@orangelogic/orange-dam-content-browser-sdk 2.1.55 → 2.2.0-alpha

package/gab_extension/MozillaFirefox/src/scripts/index.js

@@ -0,0 +1,347 @@
+var modalOpen = false; // Flag to track if the modal is open
+var minimized = false; // Flag to track if the modal is minimized
+
+var storage = (typeof browser !== 'undefined' && browser.storage) ? browser.storage : chrome.storage;
+
+function createModal(iframeSrc) {
+  //! Initialization Helpers
+  // Prevent creating the modal if it's already open
+  if (modalOpen) return;
+  modalOpen = true; // Set the flag to true
+
+  // Remove existing overlay if it exists
+  const existingOverlay = document.getElementById("OrangeDAMAssetBrowserPluginPopupOverlay");
+  if (existingOverlay) {
+    document.body.removeChild(existingOverlay);
+  }
+
+  //! Variables
+  const highestZIndex = 2147483647;
+  const minWidth = 400;
+  const minHeight = 400;
+  const buttonSize = { width: '24px', height: '24px' };
+  const buttonMargin = '-4px';
+  const borderRadius = '8px';
+  const transition = 'width 500ms, height 500ms, top 500ms, left 500ms, top 500ms, left 500ms';
+  const fontSize = '16px';
+  const headerHeight = '40px';
+  const iframeHeight = `calc(100% - ${headerHeight})`;
+
+  // Initial position and size
+  const initialTop = '20px';
+  const initialLeft = '20px';
+  const initialWidth = 'calc(100vw - 40px)';
+  const initialHeight = 'calc(100vh - 40px)';
+
+
+  //! Components
+  // Overlay
+  const overlay = document.createElement('div');
+  overlay.id = "OrangeDAMAssetBrowserPluginPopupOverlay";
+  overlay.style.display = 'none';
+  overlay.style.position = 'fixed';
+  overlay.style.top = '0';
+  overlay.style.left = '0';
+  overlay.style.width = '100%';
+  overlay.style.height = '100%';
+  overlay.style.zIndex = highestZIndex;
+  overlay.style.pointerEvents = 'none';
+
+  // Popup
+  const popup = document.createElement('div');
+  popup.style.display = 'none';
+  popup.style.position = 'absolute';
+  popup.style.backgroundColor = 'rgb(128, 128, 128)';
+  popup.style.boxShadow = '0 0 8px rgba(0, 0, 0, 0.5)';
+  popup.style.borderRadius = borderRadius;
+  popup.style.pointerEvents = 'auto';
+
+  // Header
+  const header = document.createElement('div');
+  header.style.display = 'none';
+  header.style.justifyContent = 'space-between';
+  header.style.backgroundColor = 'white';
+  header.style.color = 'gray';
+  header.style.padding = '12px';
+  header.style.textAlign = 'right';
+  header.style.position = 'relative';
+  header.style.borderTopLeftRadius = borderRadius;
+  header.style.borderTopRightRadius = borderRadius;
+  header.style.lineHeight = fontSize;
+  header.style.cursor = 'move';
+  header.style.userSelect = 'none';
+  header.style.borderBottom = '1px solid var(--cx-color-neutral-300)';
+
+  // SVG icon for minimize/restore
+  const minimizeButton = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  minimizeButton.setAttribute("focusable", "false");
+  minimizeButton.setAttribute("aria-hidden", "true");
+  minimizeButton.setAttribute("viewBox", "0 0 24 24");
+  const minimizePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  minimizePath.setAttribute("d", "M22 3.41 16.71 8.7 20 12h-8V4l3.29 3.29L20.59 2 22 3.41zM3.41 22l5.29-5.29L12 20v-8H4l3.29 3.29L2 20.59 3.41 22z");
+  minimizePath.style.pointerEvents = 'none';
+  minimizeButton.appendChild(minimizePath);
+  minimizeButton.style.cursor = 'pointer';
+  minimizeButton.style.width = buttonSize.width;
+  minimizeButton.style.height = buttonSize.height;
+  minimizeButton.style.margin = buttonMargin;
+  minimizeButton.style.fill = 'var(--color-secondary)';
+
+  // SVG icon for minimize/restore
+  const restoreButton = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  restoreButton.setAttribute("focusable", "false");
+  restoreButton.setAttribute("aria-hidden", "true");
+  restoreButton.setAttribute("viewBox", "0 0 24 24");
+  const restorePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  restorePath.setAttribute("d", "M21 11V3h-8l3.29 3.29-10 10L3 13v8h8l-3.29-3.29 10-10z");
+  restorePath.style.pointerEvents = 'none';
+  restoreButton.appendChild(restorePath);
+  restoreButton.style.cursor = 'pointer';
+  restoreButton.style.width = buttonSize.width;
+  restoreButton.style.height = buttonSize.height;
+  restoreButton.style.margin = buttonMargin;
+  restoreButton.style.display = 'none';
+  restoreButton.style.fill = 'var(--color-secondary)';
+
+  // close button
+  const closeButton = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  closeButton.setAttribute("focusable", "false");
+  closeButton.setAttribute("aria-hidden", "true");
+  closeButton.setAttribute("viewBox", "0 0 24 24");
+  const closePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  closePath.setAttribute("d", "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z");
+  closePath.style.pointerEvents = 'none';
+  closeButton.appendChild(closePath);
+  closeButton.style.cursor = 'pointer';
+  closeButton.style.width = buttonSize.width;
+  closeButton.style.height = buttonSize.height;
+  closeButton.style.margin = buttonMargin;
+  closeButton.style.fill = 'var(--color-secondary)';
+
+  const navigationGroup = document.createElement('div');
+  navigationGroup.style.display = 'flex';
+  navigationGroup.style.gap = '12px';
+  navigationGroup.appendChild(minimizeButton);
+  navigationGroup.appendChild(restoreButton);
+  navigationGroup.appendChild(closeButton);
+
+
+  // popup title
+  const popupTitle = document.createElement('span');
+  popupTitle.style.fontFamily = '"Fira Sans", Arial, Helvetica, sans-serif';
+  popupTitle.textContent = 'Orange DAM Asset Browser Extension';
+  popupTitle.style.color = 'var(--color-secondary)';
+  popupTitle.style.fontSize = fontSize;
+  popupTitle.style.cursor = 'move';
+  popupTitle.style.userSelect = 'none';
+
+  // iframe
+  const iframe = document.createElement('iframe');
+  iframe.src = iframeSrc;
+  iframe.style.width = '100%';
+  iframe.style.height = iframeHeight;
+  iframe.style.border = 'none';
+  iframe.style.borderBottomLeftRadius = borderRadius;
+  iframe.style.borderBottomRightRadius = borderRadius;
+  iframe.style.userSelect = 'none';
+
+  // Resize Functionality
+  const resizer = document.createElement('div');
+  resizer.style.width = '10px';
+  resizer.style.height = '10px';
+  resizer.style.position = 'absolute';
+  resizer.style.right = '2px';
+  resizer.style.bottom = '2px';
+  resizer.style.overflow = 'auto';
+  resizer.style.resize = 'both';
+  resizer.style.cursor = 'se-resize';
+
+  //! Functions
+  function savePopupState() {
+    const popupState = {
+      width: popup.style.width,
+      height: popup.style.height,
+      top: popup.style.top,
+      left: popup.style.left
+    };
+    storage.local.set({ popupState });
+  }
+
+  function restorePopupState() {
+    return new Promise((resolve) => {
+      storage.local.get('popupState', function (data) {
+        if (data.popupState) {
+          let top = parseInt(data.popupState.top, 10);
+          let left = parseInt(data.popupState.left, 10);
+
+          // Limit the left position
+          if (left < 0) left = 0;
+          if (left + popup.offsetWidth > window.innerWidth) {
+            left = window.innerWidth - popup.offsetWidth;
+          }
+
+          // Limit the top position
+          if (top < 0) top = 0;
+          if (top + popup.offsetHeight > window.innerHeight) {
+            top = window.innerHeight - popup.offsetHeight;
+          }
+
+          popup.style.left = left + 'px';
+          popup.style.top = top + 'px';
+          popup.style.width = data.popupState.width;
+          popup.style.height = data.popupState.height;
+          popup.style.transform = 'none';
+        } else {
+          // Center the popup if no position is saved
+          popup.style.top = initialTop;
+          popup.style.left = initialLeft;
+          popup.style.width = initialWidth;
+          popup.style.height = initialHeight;
+        }
+        resolve();
+      });
+    });
+  }
+
+  function minimizeModal() {
+    restoreButton.style.display = "block";
+    minimizeButton.style.display = "none";
+    header.style.cursor = 'default';
+    popupTitle.style.cursor = 'default';
+    popup.style.width = '500px';
+    popup.style.height = '40px';
+    popup.style.overflow = 'hidden';
+    popup.style.top = 'calc(100vh - 60px)';
+    popup.style.left = 'calc(100vw - 524px)';
+    popup.style.transition = transition;
+    resizer.style.display = 'none';
+    minimized = true;
+  }
+
+  function restoreModal() {
+    restoreButton.style.display = "none";
+    minimizeButton.style.display = "block";
+    header.style.cursor = 'move';
+    popupTitle.style.cursor = 'move';
+    popup.style.overflow = 'unset';
+    resizer.style.display = 'block';
+    popup.style.transition = transition;
+    minimized = false;
+    restorePopupState();
+  }
+
+  function closeModal() {
+    document.body.removeChild(overlay);
+    modalOpen = false;
+  }
+
+  function initResize(e) {
+    popup.style.transition = 'none'; // Remove transition to prevent animation for resizing
+    popup.style.pointerEvents = 'none';
+    popup.style.transform = 'none';
+    window.addEventListener('mousemove', resize);
+    window.addEventListener('mouseup', stopResize);
+  }
+
+  function resize(e) {
+    let newWidth = e.clientX - popup.offsetLeft;
+    let newHeight = e.clientY - popup.offsetTop;
+
+    // Enforce minimum width and height
+    if (newWidth < minWidth) newWidth = minWidth;
+    if (newHeight < minHeight) newHeight = minHeight;
+
+    popup.style.width = newWidth + 'px';
+    popup.style.height = newHeight + 'px';
+  }
+
+  function stopResize() {
+    popup.style.pointerEvents = 'auto';
+    resizer.style.width = '10px';
+    resizer.style.height = '10px';
+    window.removeEventListener('mousemove', resize);
+    window.removeEventListener('mouseup', stopResize);
+    savePopupState();
+  }
+
+  function initMove(e) {
+    if (minimized || e.target === minimizeButton || e.target === restoreButton || e.target === closeButton) {
+      return;
+    }
+    popup.style.transition = 'none'; // Remove transition to prevent animation for resizing
+    popup.style.pointerEvents = 'none';
+    popup.style.transform = 'none';
+    const offsetX = e.clientX - popup.offsetLeft;
+    const offsetY = e.clientY - popup.offsetTop;
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', stopMove);
+
+    function move(e) {
+      let newLeft = e.clientX - offsetX;
+      let newTop = e.clientY - offsetY;
+
+      // Limit the left position
+      if (newLeft < 0) newLeft = 0;
+      if (newLeft + popup.offsetWidth > window.innerWidth) {
+        newLeft = window.innerWidth - popup.offsetWidth;
+      }
+
+      // Limit the top position
+      if (newTop < 0) newTop = 0;
+      if (newTop + popup.offsetHeight > window.innerHeight) {
+        newTop = window.innerHeight - popup.offsetHeight;
+      }
+
+      popup.style.left = newLeft + 'px';
+      popup.style.top = newTop + 'px';
+    }
+
+    function stopMove() {
+      popup.style.pointerEvents = 'auto';
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', stopMove);
+      savePopupState();
+    }
+  }
+
+  //! Event Listeners
+  minimizeButton.addEventListener('click', function () {
+    minimizeModal();
+  });
+
+  restoreButton.addEventListener('click', function () {
+    restoreModal();
+  });
+
+  closeButton.addEventListener('click', function () {
+    closeModal();
+  });
+
+  header.addEventListener('click', function (e) {
+    if (e.target === header || e.target === popupTitle && minimized) {
+      restoreModal();
+    }
+  });
+
+  resizer.addEventListener('mousedown', initResize);
+  header.addEventListener('mousedown', initMove);
+
+  //? Restore popup location and size
+  restorePopupState().then(() => {
+    // Append elements  
+    header.appendChild(popupTitle);
+    header.appendChild(navigationGroup);
+    popup.appendChild(header);
+    popup.appendChild(iframe);
+    overlay.appendChild(popup);
+    document.body.appendChild(overlay);
+    popup.appendChild(resizer);
+    // Display the popup
+    overlay.style.display = 'block';
+    popup.style.display = 'block';
+    header.style.display = 'flex';
+  });
+}
+
+// Call the function with the desired iframe source
+createModal('http://localhost:5500/GAB.html');

package/gab_extension/README.md

@@ -0,0 +1,11 @@
+# Introduction 
+Orange DAM Asset Browser Plugin using GAB as core
+
+# Getting Started
+Follow manual plugin installation guide for the respecive platform
+Serve the GAB.html file on your local host
+Edit the URL in src/scripts.index in createModal() function
+Invoke the Plugin from browser
+
+# Build and Test
+TODO: Describe and show how to build your code and run the tests.