☰

Embed Jetpunk

Embed Jetpunk into whatever site (change the @match)

  1. // ==UserScript==
  2. // @name         Embed Jetpunk
  3. // @namespace    https://your-website.com
  4. // @version      1.0
  5. // @description  Embed Jetpunk into whatever site (change the @match)
  6. // @author       Your Name
  7. // @match        (what I want to embed in)
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Create a container div to hold the iframe
  16.     var iframeContainer = document.createElement('div');
  17.     iframeContainer.style.position = 'absolute'; // Positioning it on top of other content
  18.     iframeContainer.style.top = '70px'; // Adjusted this value to push it lower
  19.     iframeContainer.style.left = '0';
  20.     iframeContainer.style.width = '100%';
  21.     iframeContainer.style.height = '600px'; // Default height
  22.     iframeContainer.style.zIndex = '9999'; // Ensure it stays on top of other content
  23.     iframeContainer.style.border = '5px solid #a75cf5'; // Vibrant purple border
  24.     iframeContainer.style.marginBottom = '50px'; // Prevent content from being hidden underneath the resizer
  25.     iframeContainer.style.overflow = 'auto'; // Allow scrolling in the container if necessary
  26.  
  27.     // Create a draggable header bar with a gradient background (lighter blue to green)
  28.     var headerBar = document.createElement('div');
  29.     headerBar.style.background = 'linear-gradient(45deg, #513df9, #00ff00)'; // Lighter blue to green gradient
  30.     headerBar.style.color = 'white';
  31.     headerBar.style.padding = '5px';
  32.     headerBar.style.cursor = 'move';
  33.     headerBar.style.textAlign = 'center';
  34.     headerBar.innerHTML = 'Drag to Move Textbook';
  35.  
  36.     // Adjust headerBar to ensure it's not pushed out of view
  37.     headerBar.style.marginBottom = '0px'; // Increased margin to push down slightly
  38.  
  39.     // Add the header bar to the container
  40.     iframeContainer.appendChild(headerBar);
  41.  
  42.     // Create an iframe element to embed the OpenStax website
  43.     var iframe = document.createElement('iframe');
  44.     iframe.src = 'https://www.jetpunk.com/';
  45.     iframe.style.width = '100%';
  46.     iframe.style.height = '100%'; // Take up full container height
  47.     iframe.style.border = 'none';
  48.  
  49.     // Append the iframe to the container
  50.     iframeContainer.appendChild(iframe);
  51.  
  52.     // Function to create resizers
  53.     function createResizer(position) {
  54.         var resizer = document.createElement('div');
  55.         resizer.style.width = '20px';
  56.         resizer.style.height = '20px';
  57.         resizer.style.position = 'absolute';
  58.         resizer.style.cursor = `${position}-resize`;
  59.  
  60.         // Set the resizer color to black
  61.         resizer.style.backgroundColor = 'black';
  62.  
  63.         switch(position) {
  64.             case 'top-left':
  65.                 resizer.style.top = '-5px'; // Push resizer up slightly
  66.                 resizer.style.left = '-5px'; // Ensure resizer is visible in the corner
  67.                 break;
  68.             case 'top-right':
  69.                 resizer.style.top = '-5px'; // Push resizer up slightly
  70.                 resizer.style.right = '-5px'; // Ensure resizer is visible in the corner
  71.                 break;
  72.         }
  73.  
  74.         return resizer;
  75.     }
  76.  
  77.     // Add resizers to top-left and top-right only
  78.     var topLeftResizer = createResizer('top-left');
  79.     var topRightResizer = createResizer('top-right');
  80.  
  81.     iframeContainer.appendChild(topLeftResizer);
  82.     iframeContainer.appendChild(topRightResizer);
  83.  
  84.     // Append the container to the body of the page
  85.     document.body.appendChild(iframeContainer);
  86.  
  87.     // Function to make the container draggable
  88.     headerBar.addEventListener('mousedown', function(e) {
  89.         e.preventDefault();
  90.  
  91.         // Start dragging the container
  92.         var initialTop = iframeContainer.offsetTop;
  93.         var initialLeft = iframeContainer.offsetLeft;
  94.         var initialX = e.clientX;
  95.         var initialY = e.clientY;
  96.  
  97.         // Mousemove event to move the container
  98.         function onMouseMove(event) {
  99.             var deltaX = event.clientX - initialX;
  100.             var deltaY = event.clientY - initialY;
  101.  
  102.             iframeContainer.style.top = initialTop + deltaY + 'px'; // Only allow vertical movement
  103.             iframeContainer.style.left = initialLeft + deltaX + 'px'; // Allow horizontal movement as well
  104.         }
  105.  
  106.         // Mouseup event to stop dragging the container
  107.         function onMouseUp() {
  108.             document.removeEventListener('mousemove', onMouseMove);
  109.             document.removeEventListener('mouseup', onMouseUp);
  110.         }
  111.  
  112.         document.addEventListener('mousemove', onMouseMove);
  113.         document.addEventListener('mouseup', onMouseUp);
  114.     });
  115.  
  116.     // Function to resize the iframe container from the corners
  117.     function resizeContainer(resizer, corner) {
  118.         let isResizing = false;
  119.  
  120.         resizer.addEventListener('mousedown', function(e) {
  121.             e.preventDefault();
  122.             isResizing = true;
  123.  
  124.             // Initial dimensions and mouse position
  125.             var initialWidth = iframeContainer.offsetWidth;
  126.             var initialHeight = iframeContainer.offsetHeight;
  127.             var initialX = e.clientX;
  128.             var initialY = e.clientY;
  129.             var initialTop = iframeContainer.offsetTop;
  130.             var initialLeft = iframeContainer.offsetLeft;
  131.  
  132.             // Mousemove event to resize both horizontally and vertically
  133.             function onMouseMove(event) {
  134.                 if (isResizing) {
  135.                     var deltaX = event.clientX - initialX;
  136.                     var deltaY = event.clientY - initialY;
  137.  
  138.                     // Handle resizing based on corner
  139.                     if (corner === 'top-left') {
  140.                         iframeContainer.style.width = initialWidth - deltaX + 'px';
  141.                         iframeContainer.style.height = initialHeight - deltaY + 'px';
  142.                         iframe.style.width = iframeContainer.style.width;
  143.                         iframe.style.height = iframeContainer.style.height;
  144.                         iframeContainer.style.top = initialTop + deltaY + 'px'; // Update top position when resizing
  145.                         iframeContainer.style.left = initialLeft + deltaX + 'px'; // Update left position when resizing
  146.                     } else if (corner === 'top-right') {
  147.                         iframeContainer.style.width = initialWidth + deltaX + 'px';
  148.                         iframeContainer.style.height = initialHeight - deltaY + 'px';
  149.                         iframe.style.width = iframeContainer.style.width;
  150.                         iframe.style.height = iframeContainer.style.height;
  151.                         iframeContainer.style.top = initialTop + deltaY + 'px'; // Update top position when resizing
  152.                     }
  153.                 }
  154.             }
  155.  
  156.             // Mouseup event to stop resizing
  157.             function onMouseUp() {
  158.                 isResizing = false;
  159.                 document.removeEventListener('mousemove', onMouseMove);
  160.                 document.removeEventListener('mouseup', onMouseUp);
  161.             }
  162.  
  163.             document.addEventListener('mousemove', onMouseMove);
  164.             document.addEventListener('mouseup', onMouseUp);
  165.         });
  166.     }
  167.  
  168.     // Attach resize functionality to the top-left and top-right corners
  169.     resizeContainer(topLeftResizer, 'top-left');
  170.     resizeContainer(topRightResizer, 'top-right');
  171. })();