@orangelogic/orange-dam-content-browser-sdk 2.1.54 → 2.1.57

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

@@ -1,347 +0,0 @@
-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

@@ -1,11 +0,0 @@
-# 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.