admin-iframe-compatibility - npm Package Compare versions

Comparing version 1.0.84 to 1.0.85-beta

cms-iframe.js

@@ -1,59 +0,197 @@
-console.debug(`%c [ADMIN CMS JS] - Running custom js `, 'background: #002833; color: #258bd2');
+(function () {
+  'use strict';
 
-/*****************************************
-*  THIS BLOCK HAS SOME HELPER FUNCTIONS  *
-******************************************/
+  /**
+   * @typedef {Object} AccountAndWorkspace
+   * @property {string} workspace - Current IO workspace
+   * @property {string} account - Current IO account
+   */
 
-var addVtexLoaderScript = function () {
-  var vtexLoaderScript = document.createElement('script')
-  vtexLoaderScript.async = false
-  vtexLoaderScript.src = "//io.vtex.com.br/io-vtex-loader/2.3.1/io-vtex-loader.min.js"
-  document.body.appendChild(vtexLoaderScript)
-}
+  /**
+   * Gets the account and workspace in which this
+   * script is running on top of.
+   *
+   * @returns {AccountAndWorkspace} The account and workspace in which this script is running on top of.
+   */
+  function getAccountAndWorkspace() {
+    const [workspace, account] = window.location.host
+      .replace(".vtexcommercestable.com.br", "")
+      .replace(".vtexcommercebeta.com.br", "")
+      .split("--");
 
-/*************************************************
-*   THIS BLOCK RUNS ONLY WHEN INSIDE AN IFRAME   *
-**************************************************/
+    if (!account) {
+      return { workspace: "master", account: workspace };
+    }
 
-if (window.self !== window.top) {
-  console.debug(`%c [ADMIN CMS JS] - running inside iframe`, 'background: #002833; color: #258bd2')
-  $("#btnVoltar").hide() // botao que volta pro catálogo (ñ faz sentido no)
-  $(".tool-box").hide()
-  // adjust height of code editor
-  setInterval(() => {
-    if ($('#editor')[0] && $('#editor').height() !== 450) {
-      console.debug(`%c [ADMIN CMS JS] - adjusting editor height`, 'background: #002833; color: #258bd2')
-      if($('#editor')[0] && $('#editor')[0].style) {
-        $('#editor')[0].style.height = '450px;'
-      }
-      var contentHeight = $('.ace_content').height()
-      if ($('.ace_scroller')[0] && $('.ace_scroller')[0].style) {
-        $('.ace_scroller')[0].style.height = `${contentHeight}px`
-      }
+    return { workspace, account };
+  }
+
+  /**
+   * Whether or not the script is running inside an
+   * iframe.
+   *
+   * @returns boolean
+   */
+  const isWithinIframe = (function isIframe() {
+    return window.self !== window.top;
+  })();
+
+  const inContextScript = `var _jipt = [];
+_jipt.push(['project', 'admin-home']);`;
+
+  const CRWDIN_IN_CONTEXT_ID = "crowdin-in-context-legacy-id--DoUbNU";
+  const CRWDIN_IN_CONTEXT_SRC_ID = "crowdin-in-context-src-legacy-id--DoUbNU";
+  const CRWDIN_IN_CONTEXT_WORKSPACE = "acholi";
+  const CRWDIN_IN_CONTEXT_ACCOUNT = "storecomponents";
+
+  /**
+   * Prepares the Crowdin In Context
+   * initialization.
+   *
+   * @returns void
+   */
+  function prepareCrowdinInContext() {
+    if (!document.getElementById(CRWDIN_IN_CONTEXT_ID)) {
+      const script = document.createElement("script");
+      script.id = CRWDIN_IN_CONTEXT_ID;
+      script.type = "text/javascript";
+      script.innerText = inContextScript;
+      document.body.appendChild(script);
     }
-    const uiWidgets = $('.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons')
-    if (uiWidgets && uiWidgets.length > 0) {
-      uiWidgets.each((index, el) => {
-        if (el.style['display'] === 'block' && el.style.position && el.style.top) {
-          console.debug(`%c [ADMIN CMS JS] - adjusting dialog box widget`, 'background: #002833; color: #258bd2')
-          // ajusta posiçao da caixa de dialogo qnd ela aparece por algum motivo com "top: -900px" e relativa
-          el.style.position = null
-          el.style.top = null
-        }
-      })
+  }
+
+  /**
+   * Loads the Crowdin In Context
+   * script.
+   *
+   * @returns void
+   */
+  function loadCrowdinInContext() {
+    if (!document.getElementById(CRWDIN_IN_CONTEXT_SRC_ID)) {
+      const script = document.createElement("script");
+      script.id = CRWDIN_IN_CONTEXT_SRC_ID;
+      script.type = "text/javascript";
+      script.src = "//cdn.crowdin.com/jipt/jipt.js";
+      document.body.appendChild(script);
     }
-  }, 500)
-}
+  }
 
-/***************************************************
-*  THIS BLOCK RUNS ONLY WHEN NOT INSIDE AN IFRAME  *
-****************************************************/
+  /**
+   * Checks whether or not the script
+   * is running on the localization
+   * workspace.
+   *
+   * @returns boolean
+   */
+  function shouldInjectCrowdinInContext() {
+    if (!isWithinIframe) {
+      return false;
+    }
 
-if (window.self === window.top) {
-  console.debug(`%c [ADMIN CMS JS] - NOT running inside iframe`, 'background: #002833; color: #258bd2')
-  // legacy topbar load
-  addVtexLoaderScript();
-  $(window).on('topbarLoaded.vtex', function () {
-    vtex.topbar.topbar = new vtex.topbar.Topbar();
-  });
-}
+    const { account, workspace } = getAccountAndWorkspace();
+
+    if (
+      workspace === CRWDIN_IN_CONTEXT_WORKSPACE &&
+      account === CRWDIN_IN_CONTEXT_ACCOUNT
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Injects the Crowdin In-Context script
+   * on the legacy applications within the
+   * Admin.
+   *
+   * @returns void
+   */
+  function startCrowdinInContext() {
+    if (shouldInjectCrowdinInContext()) {
+      prepareCrowdinInContext();
+      loadCrowdinInContext();
+    }
+  }
+
+  function addVtexLoaderScript() {
+    const vtexLoaderScript = document.createElement("script");
+    vtexLoaderScript.async = false;
+    vtexLoaderScript.src =
+      "//io.vtex.com.br/io-vtex-loader/2.3.1/io-vtex-loader.min.js";
+    document.body.appendChild(vtexLoaderScript);
+  }
+
+  console.debug(
+    `%c [ADMIN CMS JS] - Running custom js `,
+    "background: #002833; color: #258bd2"
+  );
+
+  /*************************************************
+   *   THIS BLOCK RUNS ONLY WHEN INSIDE AN IFRAME   *
+   **************************************************/
+
+  if (isWithinIframe) {
+    console.debug(
+      `%c [ADMIN CMS JS] - running inside iframe`,
+      "background: #002833; color: #258bd2"
+    );
+    $("#btnVoltar").hide(); // botao que volta pro catálogo (ñ faz sentido no)
+    $(".tool-box").hide();
+    // adjust height of code editor
+    setInterval(() => {
+      if ($("#editor")[0] && $("#editor").height() !== 450) {
+        console.debug(
+          `%c [ADMIN CMS JS] - adjusting editor height`,
+          "background: #002833; color: #258bd2"
+        );
+        if ($("#editor")[0] && $("#editor")[0].style) {
+          $("#editor")[0].style.height = "450px;";
+        }
+        var contentHeight = $(".ace_content").height();
+        if ($(".ace_scroller")[0] && $(".ace_scroller")[0].style) {
+          $(".ace_scroller")[0].style.height = `${contentHeight}px`;
+        }
+      }
+      const uiWidgets = $(
+        ".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons"
+      );
+      if (uiWidgets && uiWidgets.length > 0) {
+        uiWidgets.each((index, el) => {
+          if (
+            el.style["display"] === "block" &&
+            el.style.position &&
+            el.style.top
+          ) {
+            console.debug(
+              `%c [ADMIN CMS JS] - adjusting dialog box widget`,
+              "background: #002833; color: #258bd2"
+            );
+            // ajusta posiçao da caixa de dialogo qnd ela aparece por algum motivo com "top: -900px" e relativa
+            el.style.position = null;
+            el.style.top = null;
+          }
+        });
+      }
+    }, 500);
+
+    startCrowdinInContext();
+  }
+
+  /***************************************************
+   *  THIS BLOCK RUNS ONLY WHEN NOT INSIDE AN IFRAME  *
+   ****************************************************/
+
+  if (!isWithinIframe) {
+    console.debug(
+      `%c [ADMIN CMS JS] - NOT running inside iframe`,
+      "background: #002833; color: #258bd2"
+    );
+    // legacy topbar load
+    addVtexLoaderScript();
+    $(window).on("topbarLoaded.vtex", function () {
+      vtex.topbar.topbar = new vtex.topbar.Topbar();
+    });
+  }
+
+}());

index.js

@@ -1,117 +0,288 @@
-console.debug(`%c [ADMIN CATALOG JS] \n Running custom js `, 'background: #002833; color: #258bd2')
-// TO UPDATE i18n version, deploy version and change tag here
-const i18n_version = '0.1.205'
-const FALLBACK_LANG = 'en-US'
+(function () {
+  'use strict';
 
-/*****************************************
-*  THIS BLOCK HAS SOME HELPER FUNCTIONS  *
-******************************************/
-var addVtexLoaderScript = function () {
-  var vtexLoaderScript = document.createElement('script')
-  vtexLoaderScript.async = false
-  vtexLoaderScript.src = "//io.vtex.com.br/io-vtex-loader/2.3.1/io-vtex-loader.min.js"
-  document.body.appendChild(vtexLoaderScript)
-}
+  /**
+   * @typedef {Object} AccountAndWorkspace
+   * @property {string} workspace - Current IO workspace
+   * @property {string} account - Current IO account
+   */
 
-var i18nextJqueryInit = function () {
-  i18nextJquery.init(i18next, $, {
-      tName: 't',
-      i18nName: 'i18n',
-      handleName: 'localize',
-      selectorAttr: 'data-i18n',
-      targetAttr: 'data-i18n-target',
-      optionsAttr: 'data-i18n-options',
+  /**
+   * Gets the account and workspace in which this
+   * script is running on top of.
+   *
+   * @returns {AccountAndWorkspace} The account and workspace in which this script is running on top of.
+   */
+  function getAccountAndWorkspace() {
+    const [workspace, account] = window.location.host
+      .replace(".vtexcommercestable.com.br", "")
+      .replace(".vtexcommercebeta.com.br", "")
+      .split("--");
+
+    if (!account) {
+      return { workspace: "master", account: workspace };
+    }
+
+    return { workspace, account };
+  }
+
+  /**
+   * Whether or not the script is running inside an
+   * iframe.
+   *
+   * @returns boolean
+   */
+  const isWithinIframe = (function isIframe() {
+    return window.self !== window.top;
+  })();
+
+  const inContextScript = `var _jipt = [];
+_jipt.push(['project', 'admin-home']);`;
+
+  const CRWDIN_IN_CONTEXT_ID = "crowdin-in-context-legacy-id--DoUbNU";
+  const CRWDIN_IN_CONTEXT_SRC_ID = "crowdin-in-context-src-legacy-id--DoUbNU";
+  const CRWDIN_IN_CONTEXT_WORKSPACE = "acholi";
+  const CRWDIN_IN_CONTEXT_ACCOUNT = "storecomponents";
+
+  /**
+   * Prepares the Crowdin In Context
+   * initialization.
+   *
+   * @returns void
+   */
+  function prepareCrowdinInContext() {
+    if (!document.getElementById(CRWDIN_IN_CONTEXT_ID)) {
+      const script = document.createElement("script");
+      script.id = CRWDIN_IN_CONTEXT_ID;
+      script.type = "text/javascript";
+      script.innerText = inContextScript;
+      document.body.appendChild(script);
+    }
+  }
+
+  /**
+   * Loads the Crowdin In Context
+   * script.
+   *
+   * @returns void
+   */
+  function loadCrowdinInContext() {
+    if (!document.getElementById(CRWDIN_IN_CONTEXT_SRC_ID)) {
+      const script = document.createElement("script");
+      script.id = CRWDIN_IN_CONTEXT_SRC_ID;
+      script.type = "text/javascript";
+      script.src = "//cdn.crowdin.com/jipt/jipt.js";
+      document.body.appendChild(script);
+    }
+  }
+
+  /**
+   * Checks whether or not the script
+   * is running on the localization
+   * workspace.
+   *
+   * @returns boolean
+   */
+  function shouldInjectCrowdinInContext() {
+    if (!isWithinIframe) {
+      return false;
+    }
+
+    const { account, workspace } = getAccountAndWorkspace();
+
+    if (
+      workspace === CRWDIN_IN_CONTEXT_WORKSPACE &&
+      account === CRWDIN_IN_CONTEXT_ACCOUNT
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Injects the Crowdin In-Context script
+   * on the legacy applications within the
+   * Admin.
+   *
+   * @returns void
+   */
+  function startCrowdinInContext() {
+    if (shouldInjectCrowdinInContext()) {
+      prepareCrowdinInContext();
+      loadCrowdinInContext();
+    }
+  }
+
+  // TO UPDATE i18n version, deploy version and change tag here
+  const I18N_VERSION = "0.1.208-beta";
+  const FALLBACK_LANG = "en-US";
+
+  function i18nextJqueryInit() {
+    i18nextJquery.init(i18next, $, {
+      tName: "t",
+      i18nName: "i18n",
+      handleName: "localize",
+      selectorAttr: "data-i18n",
+      targetAttr: "data-i18n-target",
+      optionsAttr: "data-i18n-options",
       useOptionsAttr: false,
-      parseDefaultValueFromContent: true
-  });
-}
+      parseDefaultValueFromContent: true,
+    });
+  }
 
-var handleTopbarLoaded = function () {
-  vtex.topbar.topbar = new vtex.topbar.Topbar();
-}
+  function handleLocaleSelected(_, lang = FALLBACK_LANG) {
+    console.debug(
+      `%c [ADMIN CATALOG JS] \n Fetching messages from i18n repo version: ${I18N_VERSION} for selected locale: `,
+      "background: #002833; color: #258bd2",
+      lang
+    );
+    $.get(`//io.vtex.com.br/i18n/${I18N_VERSION}/catalog/` + lang + ".json")
+      .done(handleI18nData(lang))
+      .fail(function () {
+        console.debug(
+          `%c [ADMIN CATALOG JS] \n Error fetching lang locale: ${lang}`,
+          "background: #002833; color: #F71963"
+        );
+        handleI18nData(null); // this triggers the load again, but with fallback lang
+      });
+  }
 
-var handleDatesFormat = (lang) => {
-    console.debug(`%c [ADMIN CATALOG JS] \n Handling dates format in lang: ${lang}`, 'background: #002833; color: #258bd2');
-    const dateFormatOptions = { year: "numeric", month: "2-digit", day: "2-digit" }
-    const dateTimeFormatOptions = { ...dateFormatOptions, hour: "2-digit", minute: "2-digit", second: "2-digit" }
+  function handleDatesFormat(lang) {
+    console.debug(
+      `%c [ADMIN CATALOG JS] \n Handling dates format in lang: ${lang}`,
+      "background: #002833; color: #258bd2"
+    );
+    const dateFormatOptions = {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    };
+    const dateTimeFormatOptions = {
+      ...dateFormatOptions,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    };
     // DATE ELEMENTS
     var dateElements = $(".vtex-locale-date");
     // loop trough date elements
-    $.each(dateElements, (obj, e) => {
-        // translate element text based on lang using iso date attribute
-        const isoDate = $(e).attr('data-vtex-date-utc')
-        const finalDate = new Date(isoDate).toLocaleDateString(lang, dateFormatOptions)
-        if (finalDate && finalDate !== 'Invalid Date') {
-            $(e).text(finalDate)
-        }
-    })
+    $.each(dateElements, (_, e) => {
+      // translate element text based on lang using iso date attribute
+      const isoDate = $(e).attr("data-vtex-date-utc");
+      const finalDate = new Date(isoDate).toLocaleDateString(
+        lang,
+        dateFormatOptions
+      );
+      if (finalDate && finalDate !== "Invalid Date") {
+        $(e).text(finalDate);
+      }
+    });
     // DATE TIME ELEMENTS
     var dateTimeElements = $(".vtex-locale-datetime");
     // loop trough date time elements
-    $.each(dateTimeElements, (obj, e) => {
-        // translate element text based on lang using iso date attribute
-        const isoDate = $(e).attr('data-vtex-datetime-utc')
-        const finalDate = new Date(isoDate).toLocaleDateString(lang, dateTimeFormatOptions)
-        if (finalDate && finalDate !== 'Invalid Date') {
-            $(e).text(finalDate)
-        }
-    })
-}
+    $.each(dateTimeElements, (_, e) => {
+      // translate element text based on lang using iso date attribute
+      const isoDate = $(e).attr("data-vtex-datetime-utc");
+      const finalDate = new Date(isoDate).toLocaleDateString(
+        lang,
+        dateTimeFormatOptions
+      );
+      if (finalDate && finalDate !== "Invalid Date") {
+        $(e).text(finalDate);
+      }
+    });
+  }
 
-var handleI18nData = (lang) => {
-  if (!lang) {
-    // Load again in english if initial lang is not found
-    console.debug(`%c [ADMIN CATALOG JS] \n Trying the fallback locale lang: ${FALLBACK_LANG}`, 'background: #002833; color: #258bd2');
-    handleLocaleSelected(null, FALLBACK_LANG)
-    return
-  }
-  return function (messagesJson) {
-      var resources = {}
-      resources[lang] = { 'translation': messagesJson };
-      i18next.init({
+  function handleI18nData(lang) {
+    if (!lang) {
+      // Load again in english if initial lang is not found
+      console.debug(
+        `%c [ADMIN CATALOG JS] \n Trying the fallback locale lang: ${FALLBACK_LANG}`,
+        "background: #002833; color: #258bd2"
+      );
+      handleLocaleSelected(null, FALLBACK_LANG);
+      return;
+    }
+    return function (messagesJson) {
+      var resources = {};
+      resources[lang] = { translation: messagesJson };
+      i18next.init(
+        {
           lng: lang,
           debug: true,
           resources: resources,
-          fallbackLng: FALLBACK_LANG
-      }, function () {
+          fallbackLng: FALLBACK_LANG,
+        },
+        function () {
           $("body").localize();
-      });
-      handleDatesFormat(lang)
+        }
+      );
+      handleDatesFormat(lang);
+    };
   }
-}
 
-var handleLocaleSelected = function (e, lang = FALLBACK_LANG) {
-  console.debug(`%c [ADMIN CATALOG JS] \n Fetching messages from i18n repo version: ${i18n_version} for selected locale: `, 'background: #002833; color: #258bd2', lang)
-  $.get(`//io.vtex.com.br/i18n/${i18n_version}/catalog/` + lang + '.json')
-  .done(handleI18nData(lang))
-  .fail(function () {
-    console.debug(`%c [ADMIN CATALOG JS] \n Error fetching lang locale: ${lang}`, 'background: #002833; color: #F71963');
-    handleI18nData(null) // this triggers the load again, but with fallback lang
-  });
-}
+  function addVtexLoaderScript() {
+    const vtexLoaderScript = document.createElement("script");
+    vtexLoaderScript.async = false;
+    vtexLoaderScript.src =
+      "//io.vtex.com.br/io-vtex-loader/2.3.1/io-vtex-loader.min.js";
+    document.body.appendChild(vtexLoaderScript);
+  }
 
-var handleIframePostMessage = (e) => {
-  if (e.data && e.data.action && e.data.action.type === 'LOCALE_SELECTED') {
-      handleLocaleSelected(e, e.data.action.payload)
+  function handleTopbarLoaded() {
+    vtex.topbar.topbar = new vtex.topbar.Topbar();
   }
-}
 
-var handleUnload = (e) => {
-    const focusedElement = $(':focus')[0]
-    const destination = focusedElement ? focusedElement.href : null
-    if (destination && destination.includes('/admin') && !(destination.includes('/admin/Site') || destination.includes('/admin/Control'))) {
-        console.debug(`%c [ADMIN CATALOG JS] \n Will navigate to other domain: ${destination}`, 'background: #002833; color: #258bd2')
-        window.top.postMessage({
-            type: 'admin.absoluteNavigation',
-            destination,
-        }, '*');
+  function handleIframePostMessage(e) {
+    if (e.data && e.data.action && e.data.action.type === "LOCALE_SELECTED") {
+      handleLocaleSelected(e, e.data.action.payload);
     }
-}
-// End of helper functions
+  }
 
-$(function ($) {
-/*****************************
-*   THIS BLOCK ALWAYS RUNS   *
-******************************/
+  function handleUnload(_) {
+    const focusedElement = $(":focus")[0];
+    const destination = focusedElement ? focusedElement.href : null;
+    if (
+      destination &&
+      destination.includes("/admin") &&
+      !(
+        destination.includes("/admin/Site") ||
+        destination.includes("/admin/Control")
+      )
+    ) {
+      console.debug(
+        `%c [ADMIN CATALOG JS] \n Will navigate to other domain: ${destination}`,
+        "background: #002833; color: #258bd2"
+      );
+      window.top.postMessage(
+        {
+          type: "admin.absoluteNavigation",
+          destination,
+        },
+        "*"
+      );
+    }
+  }
 
+  function setGlobals(objects) {
+    objects.forEach((object) => {
+      if (typeof object === "function") {
+        window[object.name] = object;
+      } else {
+        window[Object.keys(object)[0]] = Object.values(object)[0];
+      }
+    });
+  }
+
+  console.debug(
+    `%c [ADMIN CATALOG JS] \n Running custom js `,
+    "background: #002833; color: #258bd2"
+  );
+
+  $(function ($) {
+    /*****************************
+     *   THIS BLOCK ALWAYS RUNS   *
+     ******************************/
+
     // Initialize jQuery i18n
@@ -122,184 +293,225 @@ i18nextJqueryInit();
 
-    if (pathname.toLocaleLowerCase().includes('site/categories.aspx')) {
-        // open categories automatically if category page
-        var colapseBtns = $('.hitarea.expandable-hitarea.lastExpandable-hitarea')
-        if (colapseBtns.length > 0) {
-            colapseBtns[0].click()
-        } else {
-            setTimeout(() => {
-                $('.hitarea.expandable-hitarea.lastExpandable-hitarea')[0].click()
-            }, 420); // blaze it
+    if (pathname.toLocaleLowerCase().includes("site/categories.aspx")) {
+      // open categories automatically if category page
+      var colapseBtns = $(".hitarea.expandable-hitarea.lastExpandable-hitarea");
+      if (colapseBtns.length > 0) {
+        colapseBtns[0].click();
+      } else {
+        setTimeout(() => {
+          $(".hitarea.expandable-hitarea.lastExpandable-hitarea")[0].click();
+        }, 420); // blaze it
+      }
+      // highlight of searched category style fix (desculpe mundo)
+      var stylesheet = document.styleSheets[document.styleSheets.length - 1];
+      for (var i in document.styleSheets) {
+        if (
+          document.styleSheets[i].href &&
+          document.styleSheets[i].href.indexOf("everything-else.css")
+        ) {
+          stylesheet = document.styleSheets[i];
+          break;
         }
-        // highlight of searched category style fix (desculpe mundo)
-        var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];
-        for( var i in document.styleSheets ){
-            if( document.styleSheets[i].href && document.styleSheets[i].href.indexOf("everything-else.css") ) {
-                stylesheet = document.styleSheets[i];
-                break;
-            }
-        }
-        if( stylesheet.addRule ){
-            stylesheet.addRule('.label-success', 'color:#1346d8 !important;background-color: #f2f4f5 !important');
-        } else if( stylesheet.insertRule ){
-            stylesheet.insertRule('.label-success { color:#1346d8 !important;background-color: #f2f4f5 !important }', stylesheet.cssRules.length);
-        }
+      }
+      if (stylesheet.addRule) {
+        stylesheet.addRule(
+          ".label-success",
+          "color:#1346d8 !important;background-color: #f2f4f5 !important"
+        );
+      } else if (stylesheet.insertRule) {
+        stylesheet.insertRule(
+          ".label-success { color:#1346d8 !important;background-color: #f2f4f5 !important }",
+          stylesheet.cssRules.length
+        );
+      }
     }
 
-/*************************************************
-*   THIS BLOCK RUNS ONLY WHEN INSIDE AN IFRAME   *
-**************************************************/
+    /*************************************************
+     *   THIS BLOCK RUNS ONLY WHEN INSIDE AN IFRAME   *
+     **************************************************/
 
-    if (window.self !== window.top) {
-        console.debug(`%c [ADMIN CATALOG JS] \n running inside iframe`, 'background: #002833; color: #258bd2')
-        window.addEventListener("message", handleIframePostMessage);
-        // Monitor navigation before it happens, if its an admin (not catalog) navigate to right url
-        window.addEventListener("beforeunload", handleUnload);
-        // Let the parent frame know details about our navigation AFTER navigating
-        window.top.postMessage({
-            type: 'admin.navigation',
-            hash: window.location.hash,
-            search: window.location.search,
-            pathname: window.location.pathname,
-        }, '*');
-        // hides menu and header titles when inside iframe since there is already a header there
-        $(".AspNet-Menu").parent().parent().hide()
-        $(".barra-alerta").hide() // esconde barra-alerta
-        // $('#breadCrumbNav').hide()
-        if (!window.location.href.includes('Site/RelatorioIndexacao.aspx')) {
-            $("#content h2").hide()
-        } else { // in RelatorioIndexacao.aspx page, header is a div with an h3
-            $('.page-header').hide()
-            // ajusta largura para ficar grid com 3 cards ao inves de 2 com menu lateral aberto
-            $('.container')[0].style.width = "100%"
+    if (isWithinIframe) {
+      console.debug(
+        `%c [ADMIN CATALOG JS] \n running inside iframe`,
+        "background: #002833; color: #258bd2"
+      );
+      window.addEventListener("message", handleIframePostMessage);
+      // Monitor navigation before it happens, if its an admin (not catalog) navigate to right url
+      window.addEventListener("beforeunload", handleUnload);
+      // Let the parent frame know details about our navigation AFTER navigating
+      window.top.postMessage(
+        {
+          type: "admin.navigation",
+          hash: window.location.hash,
+          search: window.location.search,
+          pathname: window.location.pathname,
+        },
+        "*"
+      );
+      // hides menu and header titles when inside iframe since there is already a header there
+      $(".AspNet-Menu").parent().parent().hide();
+      $(".barra-alerta").hide(); // esconde barra-alerta
+      // $('#breadCrumbNav').hide()
+      if (!window.location.href.includes("Site/RelatorioIndexacao.aspx")) {
+        $("#content h2").hide();
+      } else {
+        // in RelatorioIndexacao.aspx page, header is a div with an h3
+        $(".page-header").hide();
+        // ajusta largura para ficar grid com 3 cards ao inves de 2 com menu lateral aberto
+        $(".container")[0].style.width = "100%";
+      }
+      $("#areaUsuario").hide();
+      // dispatch event to myvtex sending content height to update iframe size
+      var currentHeight = document.body.scrollHeight;
+      setInterval(() => {
+        var newHeight = document.body.scrollHeight;
+        if (currentHeight !== newHeight) {
+          currentHeight = newHeight;
+          window.parent.postMessage(
+            {
+              type: "admin.updateContentHeight",
+              height: newHeight,
+            },
+            "*"
+          );
         }
-        $("#areaUsuario").hide()
-        // dispatch event to myvtex sending content height to update iframe size
-        var currentHeight = document.body.scrollHeight
-        setInterval(() => {
-            var newHeight = document.body.scrollHeight
-            if (currentHeight !== newHeight) {
-                currentHeight = newHeight
-                window.parent.postMessage({
-                    type: 'admin.updateContentHeight',
-                    height: newHeight,
-                }, '*')
-            }
-        }, 1000)
+      }, 1000);
+
+      startCrowdinInContext();
     }
 
-/***************************************************
-*  THIS BLOCK RUNS ONLY WHEN NOT INSIDE AN IFRAME  *
-****************************************************/
+    /***************************************************
+     *  THIS BLOCK RUNS ONLY WHEN NOT INSIDE AN IFRAME  *
+     ****************************************************/
 
     if (window.self === window.top) {
-        console.debug(`%c [ADMIN CATALOG JS] \n NOT running inside iframe`, 'background: #002833; color: #258bd2')
-        // legacy topbar load
-        addVtexLoaderScript();
-        $(window).on("localeSelected.vtex", handleLocaleSelected);
-        $(window).on('topbarLoaded.vtex', handleTopbarLoaded);
-        // style changes
-        $("#areaUsuario").children().removeClass('bt');
-        $("#ctl00_AreaUsuario_AreaUsuario1_lnkAcesseSite").removeClass('bt');
-        $("#ctl00_AreaUsuario_AreaUsuario1_lnkAcesseSiteAdminBeta").removeClass('bt');
-        $("#areaUsuario")[0].style['margin-top'] = "20px";
-        // start marking correct menu item as active
-        var aspNetMenuChildren = $(".AspNet-Menu").children();
-        var checkIfPathIsActive = (href) => {
-            return href && href.includes(pathname)
-        }
-        var titlePathDictionary = {
-            "mainMenu.products.label": [
-                "Site/Produto.aspx",
-                "Site/Categories.aspx",
-                "Site/Marca.aspx",
-                "Site/Relatorio_Skus.aspx",
-                "Site/ProdutoExportacaoImportacaoEspecificacaoV2.aspx",
-                "Site/ProdutoExportacaoImportacaoEspecificacaoSKUV2.aspx",
-                "Site/SkuTabelaValor.aspx",
-                "Site/gerarimagens.aspx",
-                "Site/ProdutoImagemExportacao.aspx",
-                "Site/ProdutoExportacaoImportacaoAvaliacao.aspx",
-                "Site/Anexo.aspx",
-                "Site/SkuServicoTipo.aspx",
-                "Site/SkuServicoValor.aspx",
-                "Site/SkuVincularValorServico.aspx",
-                "Site/Relatorio_Seguranca.aspx",
-                "Site/LinksRelatorios.aspx",
-                "Site/GiftList.aspx",
-                "Site/RelatorioIndexacao.aspx",
-                "Site/Relatorio_AviseMeSku.aspx",
-                "Site/RelatorioNews.aspx",
-                "Site/Resenha.aspx",
-                "Site/SkuCondicaoComercial.aspx",
-                "Site/Fornecedor.aspx",
-            ],
-            "mainMenu.campaigns.vouchers": [
-                "Site/Vale.aspx",
-            ],
-            "mainMenu.settings.label": [
-                "Site/ConfigForm.aspx",
-                "Site/ConfigSEOContents.aspx",
-                "Site/TextoSite.aspx",
-                "Site/GiftListType.aspx",
-                "Site/Xml.aspx",
-                "Site/TipoArquivo.aspx",
-                "Site/GeographicRegion.aspx",
-            ],
-            "mainMenu.marketplace.label": [
-                "Site/Store.aspx",
-                "Site/Seller.aspx",
-                "Site/SkuSeller.aspx",
-            ],
-        }
-        var forceTitleActiveStyle = (el) => {
-            $.each(titlePathDictionary[el.children[0].dataset.i18n], (index, path) => {
-                if (pathname.includes(path)) {
-                    if (el.style) {
-                        el.children[0].style['border-bottom'] = '1px solid #368df7'
-                    } else {
-                        el.children[0].style = {}
-                        el.children[0].style['border-bottom'] = '1px solid #368df7'
-                    }
-                }
-            })
-        }
-        var forceSubItemActiveStyle = (el) => {
+      console.debug(
+        `%c [ADMIN CATALOG JS] \n NOT running inside iframe`,
+        "background: #002833; color: #258bd2"
+      );
+      // legacy topbar load
+      addVtexLoaderScript();
+      $(window).on("localeSelected.vtex", handleLocaleSelected);
+      $(window).on("topbarLoaded.vtex", handleTopbarLoaded);
+      // style changes
+      $("#areaUsuario").children().removeClass("bt");
+      $("#ctl00_AreaUsuario_AreaUsuario1_lnkAcesseSite").removeClass("bt");
+      $("#ctl00_AreaUsuario_AreaUsuario1_lnkAcesseSiteAdminBeta").removeClass(
+        "bt"
+      );
+      $("#areaUsuario")[0].style["margin-top"] = "20px";
+      // start marking correct menu item as active
+      var aspNetMenuChildren = $(".AspNet-Menu").children();
+      var checkIfPathIsActive = (href) => {
+        return href && href.includes(pathname);
+      };
+      var titlePathDictionary = {
+        "mainMenu.products.label": [
+          "Site/Produto.aspx",
+          "Site/Categories.aspx",
+          "Site/Marca.aspx",
+          "Site/Relatorio_Skus.aspx",
+          "Site/ProdutoExportacaoImportacaoEspecificacaoV2.aspx",
+          "Site/ProdutoExportacaoImportacaoEspecificacaoSKUV2.aspx",
+          "Site/SkuTabelaValor.aspx",
+          "Site/gerarimagens.aspx",
+          "Site/ProdutoImagemExportacao.aspx",
+          "Site/ProdutoExportacaoImportacaoAvaliacao.aspx",
+          "Site/Anexo.aspx",
+          "Site/SkuServicoTipo.aspx",
+          "Site/SkuServicoValor.aspx",
+          "Site/SkuVincularValorServico.aspx",
+          "Site/Relatorio_Seguranca.aspx",
+          "Site/LinksRelatorios.aspx",
+          "Site/GiftList.aspx",
+          "Site/RelatorioIndexacao.aspx",
+          "Site/Relatorio_AviseMeSku.aspx",
+          "Site/RelatorioNews.aspx",
+          "Site/Resenha.aspx",
+          "Site/SkuCondicaoComercial.aspx",
+          "Site/Fornecedor.aspx",
+        ],
+        "mainMenu.campaigns.vouchers": ["Site/Vale.aspx"],
+        "mainMenu.settings.label": [
+          "Site/ConfigForm.aspx",
+          "Site/ConfigSEOContents.aspx",
+          "Site/TextoSite.aspx",
+          "Site/GiftListType.aspx",
+          "Site/Xml.aspx",
+          "Site/TipoArquivo.aspx",
+          "Site/GeographicRegion.aspx",
+        ],
+        "mainMenu.marketplace.label": [
+          "Site/Store.aspx",
+          "Site/Seller.aspx",
+          "Site/SkuSeller.aspx",
+        ],
+      };
+      var forceTitleActiveStyle = (el) => {
+        $.each(titlePathDictionary[el.children[0].dataset.i18n], (_, path) => {
+          if (pathname.includes(path)) {
             if (el.style) {
-                el.style['background-color'] = '#ddd'
+              el.children[0].style["border-bottom"] = "1px solid #368df7";
             } else {
-                el.style = {}
-                el.style['background-color'] = '#ddd'
+              el.children[0].style = {};
+              el.children[0].style["border-bottom"] = "1px solid #368df7";
             }
+          }
+        });
+      };
+      var forceSubItemActiveStyle = (el) => {
+        if (el.style) {
+          el.style["background-color"] = "#ddd";
+        } else {
+          el.style = {};
+          el.style["background-color"] = "#ddd";
         }
+      };
 
-        // loop trough menu items
-        $.each(aspNetMenuChildren, (obj, e) => {
-            // loop trough menu item children (they are all LI tags)
-            $.each(e.children, (obj, _e) => {
-                if (_e.tagName === 'A') {
-                    forceTitleActiveStyle(_e)
-                } else { // if it's not tag A it's UL
-                    // loop trough UL children
-                    $.each(_e.children, (obj, __e) => {
-                        // here every __e is an LI, so loop again
-                        $.each(__e.children, (obj, ___e) => {
-                            if (___e.tagName === 'A') {
-                                if (checkIfPathIsActive(___e.href)) {
-                                    forceSubItemActiveStyle(___e)
-                                }
-                            } else { // if it's not tag A it's UL again
-                                // loop trough UL children again
-                                $.each(___e.children, (obj, ____e) => {
-                                    if (checkIfPathIsActive(____e.children[0].href)) {
-                                        forceSubItemActiveStyle(____e.children[0])
-                                    }
-                                })
-                            }
-                        })
-                    })
+      // loop trough menu items
+      $.each(aspNetMenuChildren, (_, e) => {
+        // loop trough menu item children (they are all LI tags)
+        $.each(e.children, (__, _e) => {
+          if (_e.tagName === "A") {
+            forceTitleActiveStyle(_e);
+          } else {
+            // if it's not tag A it's UL
+            // loop trough UL children
+            $.each(_e.children, (___, __e) => {
+              // here every __e is an LI, so loop again
+              $.each(__e.children, (____, ___e) => {
+                if (___e.tagName === "A") {
+                  if (checkIfPathIsActive(___e.href)) {
+                    forceSubItemActiveStyle(___e);
+                  }
+                } else {
+                  // if it's not tag A it's UL again
+                  // loop trough UL children again
+                  $.each(___e.children, (_____, ____e) => {
+                    if (checkIfPathIsActive(____e.children[0].href)) {
+                      forceSubItemActiveStyle(____e.children[0]);
+                    }
+                  });
                 }
-            })
-        })
-        // end marking correct menu item as active
+              });
+            });
+          }
+        });
+      });
+      // end marking correct menu item as active
     }
-});
+  });
+
+  setGlobals([
+    handleLocaleSelected,
+    handleIframePostMessage,
+    handleTopbarLoaded,
+    handleUnload,
+    i18nextJqueryInit,
+    addVtexLoaderScript,
+    handleDatesFormat,
+    handleI18nData,
+    { I18N_VERSION },
+    { FALLBACK_LANG },
+  ]);
+
+}());

package.json

 {
   "name": "admin-iframe-compatibility",
-  "version": "1.0.84",
+  "version": "1.0.85-beta",
   "description": "Compatiblity js to adapt catalog admin to iframe",
-  "main": "index.js",
+  "main": "build/index.js",
   "scripts": {
     "test": "echo \"Sorry m8, no tests yet...\"",
-    "start": "node server.js",
-    "deploy": "releasy --stable && npm publish"
+    "build:index": "rollup --config rollup.config.js --environment entry:index",
+    "build:cms": "rollup --config rollup.config.js --environment entry:cms-iframe",
+    "build": "npm run build:index && npm run build:cms",
+    "postbuild": "cp package.json README.md build",
+    "start": "npm run build && node server.js",
+    "deploy": "releasy --stable",
+    "deploy:beta": "releasy"
   },
@@ -22,4 +27,6 @@ "repository": {
   "devDependencies": {
-    "express": "^4.16.3"
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "express": "^4.16.3",
+    "rollup": "^2.56.2"
   }
 }

README.md

 # There is nothing glamorous to see here
 
-  - this package is just a static js with jquery code that runs on catalog admin pages
+This package is just a static JS with jquery code that runs on catalog admin pages. It is responsible for handling translations for legacy applications, messaging the admin shell to adapt its iframe container height to match its children height, and initializing Crowdin in Context script for legacy apps.
 
-# Developing locally
+## Developing locally
 
-  - Setup:
+- Setup:
+
+```bash
+npm install
+```
+
+- You will need the requestly chrome extension [linked here](https://chrome.google.com/webstore/detail/requestly-redirect-url-mo/mdnleldcmiljblolnjhpnblkcekpdkpa)
+
+- Open requestly, and create Redirect Rules with the following semantics:
+
+```
+Request URL Contains //unpkg.com/admin-iframe-compatibility/index.js
+Destination http://localhost:4200/index.js
+
+Request URL Contains //unpkg.com/admin-iframe-compatibility/cms-iframe.js
+Destination http://localhost:4200/cms-iframe.js
+```
+
+- Save the rules and leave it on
+- Run the server
+  ```bash
+  npm start
   ```
-  npm install
-  ```
-  - You will need requestly chrome extension [linked here](https://chrome.google.com/webstore/detail/requestly-redirect-url-mo/mdnleldcmiljblolnjhpnblkcekpdkpa)
- - Open requestly, create a Redirect Rule like so:
-  ```
-  Request URL Contains //unpkg.com/admin-iframe-compatibility/index.js
+- Edit the JS, save it, run `npm start` again and refresh the admin page to see your changes.
 
-  Destination http://localhost:4200/index.js
-  ```
-  - Save it and leave it on
-  - Run the server and you are good to go
-    ```
-    npm start
-    ``` 
-  - Just edit the js, save it and refresh admin page to get the new version running
+## Publishing a new version
+
+Just run:
+
+```bash
+npm run deploy
+```
+
+or
+
+```bash
+npm run deploy:beta
+```
+
+A github workflow will be automatically triggered once new tags are pushed to the repository.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23826

increased by37.47%

Lines of code

654

increased by88.47%

Number of lines in readme file

47

increased by95.83%

Worsened metrics

Dev dependency count

3

increased by200%

Number of package files

4

decreased by-20%

Number of low quality alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes