{"code":"(window.webpackJsonpGUI=window.webpackJsonpGUI||[]).push([[53],{1490:function(e,t,n){(e.exports=n(9)(!1)).push([e.i,'[class^=\"sprite-info_sprite-info_\"] {\\n  height: 0;\\n  padding: 0 0.75rem;\\n  overflow: hidden;\\n  transition-property: height, padding, transform;\\n  transition-duration: var(--spriteProperties-transitionDuration);\\n}\\n\\n.sa-hide-sprite-properties [class^=\"sprite-info_sprite-info_\"] {\\n  border: none;\\n}\\n\\n[class^=\"sprite-selector_scroll-wrapper_\"],\\n/* Also take full height if `sprite-properties` is hiding the properties (specificity) */\\n.sa-hide-sprite-properties [class^=\"sprite-selector_scroll-wrapper_\"] {\\n  height: 100%;\\n  transition-property: height;\\n  transition-duration: var(--spriteProperties-transitionDuration);\\n}\\n\\n.sa-show-sprite-properties [class^=\"sprite-info_sprite-info_\"] {\\n  /* The height needs to be known for the animation to work.\\n     6.5rem + 5px is the exact height of sprite info when\\n     this addon is enabled:\\n       0.75rem (top padding)\\n     + 2rem + 2px (.icon-wrappers in the first row)\\n     + 0.5rem (margin between rows)\\n     + 2rem + 2px (.icon-wrappers in the second row)\\n     + 1.25rem (close button)\\n     + 1px (bottom border) */\\n  height: calc(6.5rem + 5px);\\n  padding: 0.75rem;\\n  padding-bottom: 0;\\n}\\n.sa-sprite-properties-wide-locale.sa-show-sprite-properties [class^=\"sprite-info_sprite-info_\"] {\\n  /* In wide languages, add in addition to the previous:\\n     + 2 * 0.625rem * 1.2 (each row\\'s text label now uses vertical space)\\n     + 2 * 0.25rem (each row has extra padding) */\\n  height: calc(6.5rem + 5px + 2rem);\\n}\\n[class^=\"label_input-group-column_\"] {\\n  /* Default line-height: normal is inconsistent across browsers, but above style needs constant line-height. */\\n  line-height: 1.2;\\n}\\n\\n/* see heights in above selectors */\\n.sa-show-sprite-properties [class^=\"sprite-selector_scroll-wrapper_\"] {\\n  height: calc(100% - 6.5rem - 5px);\\n}\\n.sa-sprite-properties-wide-locale.sa-show-sprite-properties [class^=\"sprite-selector_scroll-wrapper_\"] {\\n  height: calc(100% - 6.5rem - 5px - 2rem);\\n}\\n\\n.sa-sprite-properties-info-btn {\\n  /* !important to override displayNoneWhileDisabled\\'s inline styles */\\n  display: flex !important;\\n  position: absolute;\\n  justify-content: center;\\n  align-items: center;\\n  width: 1rem;\\n  height: 1rem;\\n  top: -2px;\\n  left: -2px;\\n  border: none;\\n  border-radius: 100%;\\n  background-color: var(--editorDarkMode-primary, hsla(260, 60%, 60%, 1));\\n}\\n[dir=\"rtl\"] .sa-sprite-properties-info-btn {\\n  left: auto;\\n  right: -2px;\\n}\\n.sa-show-sprite-properties .sa-sprite-properties-info-btn {\\n  display: none !important;\\n}\\n\\n.sa-sprite-properties-info-btn img {\\n  width: calc(1rem - 6px);\\n  height: calc(1rem - 6px);\\n  filter: var(--editorDarkMode-primary-filter);\\n}\\n\\n.sa-sprite-properties-close-btn {\\n  width: 100%;\\n  height: 1.25rem;\\n  padding: 0;\\n  padding-top: 0.5rem;\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  border: none;\\n  margin-left: auto;\\n  background-color: transparent;\\n  user-select: none;\\n}\\n\\n.sa-sprite-properties-close-btn img {\\n  filter: var(--editorDarkMode-accent-filter);\\n  transition: opacity 0.25s ease-out;\\n}\\n\\n.sa-sprite-properties-close-btn:hover img {\\n  opacity: 0.75;\\n}\\n\\n/* Prevent double clicking from highlighting the \"Choose a sprite\" button */\\n[class*=\"action-menu_main-button_\"] {\\n  user-select: none;\\n}\\n',\"\"])},1533:function(e,t,n){\"use strict\";n.r(t),n.d(t,\"resources\",(function(){return s}));var i=n(1490);const s={\"userscript.js\":async function(e){let{addon:t,console:n,msg:i}=e;const s=\"sa-show-sprite-properties\";let r;const o=new MutationObserver((()=>{h()}));function a(e){document.body.classList.toggle(s,e),document.body.classList.toggle(\"sa-hide-sprite-properties\",!e)}function p(){a(!document.body.classList.contains(s))}function c(){t.settings.get(\"autoCollapse\")&&a(!1)}document.addEventListener(\"click\",(e=>{2===e.detail&&e.target.closest('[class^=\"sprite-selector_scroll-wrapper_\"]')&&p()}));function l(){a(!t.settings.get(\"autoCollapse\")&&!t.settings.get(\"hideByDefault\"))}function d(e,n,i){const s=document.createElement(\"img\");s.setAttribute(\"src\",t.self.getResource(n)),s.draggable=!1;const r=document.createElement(\"button\");return r.classList.add(e),r.title=i,r.addEventListener(\"click\",(()=>p())),r.appendChild(s),t.tab.displayNoneWhileDisabled(r,{display:\"flex\"}),r}let g,u;function h(){g||(g=d(\"sa-sprite-properties-info-btn\",\"/info.svg\",i(\"open-properties-panel-tooltip\")));const e=r.parentNode.querySelector('[class*=\"sprite-selector-item_is-selected\"]');g.parentNode!==e&&(e?e.appendChild(g):g.remove())}function m(){const e=!!r.querySelector(\"[class^=label_input-group-column_]\");document.body.classList.toggle(\"sa-sprite-properties-wide-locale\",e)}for(document.body.addEventListener(\"mouseleave\",(e=>{e.target.matches('[class*=\"sprite-selector_sprite-selector_\"]')&&(document.querySelector(\"body > div.Popover > div > div > [class*=direction-picker_button-row_]\")||c())}),{capture:!0}),t.settings.addEventListener(\"change\",c),t.self.addEventListener(\"reenabled\",l),l(),t.self.addEventListener(\"disabled\",(()=>{a(!0)})),t.tab.redux.initialize(),t.tab.redux.addEventListener(\"statechanged\",(e=>{\"scratch-gui/StageSize/SET_STAGE_SIZE\"===e.detail.action.type&&setTimeout(m)}));;){r=await t.tab.waitForElement('[class^=\"sprite-info_sprite-info_\"]',{markAsSeen:!0,reduxEvents:[\"scratch-gui/mode/SET_PLAYER\",\"fontsLoaded/SET_FONTS_LOADED\",\"scratch-gui/locales/SELECT_LOCALE\"],reduxCondition:e=>!e.scratchGui.mode.isPlayerOnly});const e=r.parentNode.querySelector('[class*=\"sprite-selector_items-wrapper_\"]');o.observe(e,{childList:!0,subtree:!0}),m(),h(),u||(u=d(\"sa-sprite-properties-close-btn\",\"/collapse.svg\",i(\"close-properties-panel-tooltip\"))),r.appendChild(u)}},\"userstyle.css\":n.n(i).a,\"collapse.svg\":\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIuNyIgaGVpZ2h0PSI4Ljc5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02LjM2IDFhMS40MyAxLjQzIDAgMCAwLTEgLjQyTDEuNDIgNS4zNGExLjQ0IDEuNDQgMCAwIDAgMCAyYy41Ni41NiA5LjMxLjU2IDkuODcgMGExLjQ0IDEuNDQgMCAwIDAgMC0yTDcuMzcgMS40MkExLjQzIDEuNDMgMCAwIDAgNi4zNiAxeiIgZmlsbD0iIzU3NWU3NSIvPjwvc3ZnPg==\",\"info.svg\":\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAwLjU3IDAuNTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNLjIzMi4yMzJ2LjAzNmguMDM2Vi41SC4yMTR2LjAzNWguMTQzVi41SC4zMDRWLjIzM3oiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIuMDcxIiBzdHlsZT0icGFpbnQtb3JkZXI6c3Ryb2tlIGZpbGwgbWFya2VycyIvPjxjaXJjbGUgY3g9Ii4yODUiIGN5PSIuMDcxIiByPSIuMDcxIiBzdHlsZT0icGFpbnQtb3JkZXI6c3Ryb2tlIGZpbGwgbWFya2VycyIvPjwvZz48L3N2Zz4=\"}}}]);","name":"js/pentapod/addon-entry-sprite-properties.03991ebc26d5c28eb6f0.js","input":"(window[\"webpackJsonpGUI\"] = window[\"webpackJsonpGUI\"] || []).push([[53],{\n\n/***/ 1490:\n/***/ (function(module, exports, __webpack_require__) {\n\nexports = module.exports = __webpack_require__(9)(false);\n// imports\n\n\n// module\nexports.push([module.i, \"[class^=\\\"sprite-info_sprite-info_\\\"] {\\n  height: 0;\\n  padding: 0 0.75rem;\\n  overflow: hidden;\\n  transition-property: height, padding, transform;\\n  transition-duration: var(--spriteProperties-transitionDuration);\\n}\\n\\n.sa-hide-sprite-properties [class^=\\\"sprite-info_sprite-info_\\\"] {\\n  border: none;\\n}\\n\\n[class^=\\\"sprite-selector_scroll-wrapper_\\\"],\\n/* Also take full height if `sprite-properties` is hiding the properties (specificity) */\\n.sa-hide-sprite-properties [class^=\\\"sprite-selector_scroll-wrapper_\\\"] {\\n  height: 100%;\\n  transition-property: height;\\n  transition-duration: var(--spriteProperties-transitionDuration);\\n}\\n\\n.sa-show-sprite-properties [class^=\\\"sprite-info_sprite-info_\\\"] {\\n  /* The height needs to be known for the animation to work.\\n     6.5rem + 5px is the exact height of sprite info when\\n     this addon is enabled:\\n       0.75rem (top padding)\\n     + 2rem + 2px (.icon-wrappers in the first row)\\n     + 0.5rem (margin between rows)\\n     + 2rem + 2px (.icon-wrappers in the second row)\\n     + 1.25rem (close button)\\n     + 1px (bottom border) */\\n  height: calc(6.5rem + 5px);\\n  padding: 0.75rem;\\n  padding-bottom: 0;\\n}\\n.sa-sprite-properties-wide-locale.sa-show-sprite-properties [class^=\\\"sprite-info_sprite-info_\\\"] {\\n  /* In wide languages, add in addition to the previous:\\n     + 2 * 0.625rem * 1.2 (each row's text label now uses vertical space)\\n     + 2 * 0.25rem (each row has extra padding) */\\n  height: calc(6.5rem + 5px + 2rem);\\n}\\n[class^=\\\"label_input-group-column_\\\"] {\\n  /* Default line-height: normal is inconsistent across browsers, but above style needs constant line-height. */\\n  line-height: 1.2;\\n}\\n\\n/* see heights in above selectors */\\n.sa-show-sprite-properties [class^=\\\"sprite-selector_scroll-wrapper_\\\"] {\\n  height: calc(100% - 6.5rem - 5px);\\n}\\n.sa-sprite-properties-wide-locale.sa-show-sprite-properties [class^=\\\"sprite-selector_scroll-wrapper_\\\"] {\\n  height: calc(100% - 6.5rem - 5px - 2rem);\\n}\\n\\n.sa-sprite-properties-info-btn {\\n  /* !important to override displayNoneWhileDisabled's inline styles */\\n  display: flex !important;\\n  position: absolute;\\n  justify-content: center;\\n  align-items: center;\\n  width: 1rem;\\n  height: 1rem;\\n  top: -2px;\\n  left: -2px;\\n  border: none;\\n  border-radius: 100%;\\n  background-color: var(--editorDarkMode-primary, hsla(260, 60%, 60%, 1));\\n}\\n[dir=\\\"rtl\\\"] .sa-sprite-properties-info-btn {\\n  left: auto;\\n  right: -2px;\\n}\\n.sa-show-sprite-properties .sa-sprite-properties-info-btn {\\n  display: none !important;\\n}\\n\\n.sa-sprite-properties-info-btn img {\\n  width: calc(1rem - 6px);\\n  height: calc(1rem - 6px);\\n  filter: var(--editorDarkMode-primary-filter);\\n}\\n\\n.sa-sprite-properties-close-btn {\\n  width: 100%;\\n  height: 1.25rem;\\n  padding: 0;\\n  padding-top: 0.5rem;\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  border: none;\\n  margin-left: auto;\\n  background-color: transparent;\\n  user-select: none;\\n}\\n\\n.sa-sprite-properties-close-btn img {\\n  filter: var(--editorDarkMode-accent-filter);\\n  transition: opacity 0.25s ease-out;\\n}\\n\\n.sa-sprite-properties-close-btn:hover img {\\n  opacity: 0.75;\\n}\\n\\n/* Prevent double clicking from highlighting the \\\"Choose a sprite\\\" button */\\n[class*=\\\"action-menu_main-button_\\\"] {\\n  user-select: none;\\n}\\n\", \"\"]);\n\n// exports\n\n\n/***/ }),\n\n/***/ 1533:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n// ESM COMPAT FLAG\n__webpack_require__.r(__webpack_exports__);\n\n// EXPORTS\n__webpack_require__.d(__webpack_exports__, \"resources\", function() { return /* binding */ resources; });\n\n// CONCATENATED MODULE: ./src/addons/addons/sprite-properties/userscript.js\n/* harmony default export */ var userscript = (async function (_ref) {\n  let {\n    addon,\n    console,\n    msg\n  } = _ref;\n  const SHOW_PROPS_CLASS = \"sa-show-sprite-properties\";\n  const HIDE_PROPS_CLASS = \"sa-hide-sprite-properties\";\n  const PROPS_INFO_BTN_CLASS = \"sa-sprite-properties-info-btn\";\n  const PROPS_CLOSE_BTN_CLASS = \"sa-sprite-properties-close-btn\";\n\n  /** @type {HTMLElement} */\n  let propertiesPanel;\n\n  // A mutation observer is the only reliable way to detect when a different sprite has\n  // been selected or when the folder that contains the focused sprite has been opened.\n  const observer = new MutationObserver(() => {\n    injectInfoButton();\n  });\n\n  // Toggle the properties panel when double clicking in the sprite grid\n  document.addEventListener(\"click\", e => {\n    if (e.detail === 2 && e.target.closest('[class^=\"sprite-selector_scroll-wrapper_\"]')) {\n      togglePropertiesPanel();\n    }\n  });\n  function setPropertiesPanelVisible(visible) {\n    document.body.classList.toggle(SHOW_PROPS_CLASS, visible);\n    document.body.classList.toggle(HIDE_PROPS_CLASS, !visible);\n  }\n  function togglePropertiesPanel() {\n    const isCurrentlyOpen = document.body.classList.contains(SHOW_PROPS_CLASS);\n    setPropertiesPanelVisible(!isCurrentlyOpen);\n  }\n  function autoHidePanel() {\n    if (addon.settings.get(\"autoCollapse\")) {\n      setPropertiesPanelVisible(false);\n    }\n  }\n  const isDirectionPopoverOpen = () => document.querySelector(\"body > div.Popover > div > div > [class*=direction-picker_button-row_]\");\n  // Close properties panel when mouse leaves the entire sprite panel\n  document.body.addEventListener(\"mouseleave\", e => {\n    if (e.target.matches('[class*=\"sprite-selector_sprite-selector_\"]')) {\n      if (!isDirectionPopoverOpen()) autoHidePanel();\n    }\n  }, {\n    capture: true\n  });\n  addon.settings.addEventListener(\"change\", autoHidePanel);\n  function applySettings() {\n    const visibleByDefault = !addon.settings.get(\"autoCollapse\") && !addon.settings.get(\"hideByDefault\");\n    setPropertiesPanelVisible(visibleByDefault);\n  }\n  addon.self.addEventListener(\"reenabled\", applySettings);\n  applySettings();\n  addon.self.addEventListener(\"disabled\", () => {\n    setPropertiesPanelVisible(true);\n  });\n  function createButton(className, iconPath, tooltip) {\n    const buttonIcon = document.createElement(\"img\");\n    buttonIcon.setAttribute(\"src\", addon.self.getResource(iconPath)) /* rewritten by pull.js */;\n    buttonIcon.draggable = false;\n    const button = document.createElement(\"button\");\n    button.classList.add(className);\n    button.title = tooltip;\n    button.addEventListener(\"click\", () => togglePropertiesPanel());\n    button.appendChild(buttonIcon);\n    addon.tab.displayNoneWhileDisabled(button, {\n      display: \"flex\"\n    });\n    return button;\n  }\n\n  /** @type {HTMLElement} */\n  let infoButton;\n  /** @type {HTMLElement} */\n  let closeButton;\n  function injectInfoButton() {\n    if (!infoButton) {\n      infoButton = createButton(PROPS_INFO_BTN_CLASS, \"/info.svg\", msg(\"open-properties-panel-tooltip\"));\n    }\n    const selectedSprite = propertiesPanel.parentNode.querySelector('[class*=\"sprite-selector-item_is-selected\"]');\n    if (infoButton.parentNode !== selectedSprite) {\n      if (selectedSprite) {\n        selectedSprite.appendChild(infoButton);\n      } else {\n        infoButton.remove();\n      }\n    }\n  }\n  function injectCloseButton() {\n    if (!closeButton) {\n      closeButton = createButton(PROPS_CLOSE_BTN_CLASS, \"/collapse.svg\", msg(\"close-properties-panel-tooltip\"));\n    }\n    propertiesPanel.appendChild(closeButton);\n  }\n  function updateWideLocaleMode() {\n    // Certain \"wide\" languages such as Japanese use a different layout for the sprite info panel\n    // Easiest way to detect this is with this selector that only exists when the sprite info panel\n    // is using the layout with text above the input.\n    // Note that when the stage is in small mode, \"wide\" languages use the same info panel as other\n    // languages.\n    // List of languages is here:\n    // https://github.com/scratchfoundation/scratch-gui/blob/e15b2dfa3a2e58e80fae8d1586c7f56aa0cc0ede/src/lib/locale-utils.js#L6-L18\n    const isWideLocale = !!propertiesPanel.querySelector(\"[class^=label_input-group-column_]\");\n    document.body.classList.toggle(\"sa-sprite-properties-wide-locale\", isWideLocale);\n  }\n  addon.tab.redux.initialize();\n  addon.tab.redux.addEventListener(\"statechanged\", e => {\n    if (e.detail.action.type === \"scratch-gui/StageSize/SET_STAGE_SIZE\") {\n      setTimeout(updateWideLocaleMode);\n    }\n  });\n  while (true) {\n    propertiesPanel = await addon.tab.waitForElement('[class^=\"sprite-info_sprite-info_\"]', {\n      markAsSeen: true,\n      reduxEvents: [\"scratch-gui/mode/SET_PLAYER\", \"fontsLoaded/SET_FONTS_LOADED\", \"scratch-gui/locales/SELECT_LOCALE\"],\n      reduxCondition: state => !state.scratchGui.mode.isPlayerOnly\n    });\n    const spriteSelector = propertiesPanel.parentNode;\n    const itemsWrapper = spriteSelector.querySelector('[class*=\"sprite-selector_items-wrapper_\"]');\n    observer.observe(itemsWrapper, {\n      childList: true,\n      subtree: true\n    });\n    updateWideLocaleMode();\n    injectInfoButton();\n    injectCloseButton();\n  }\n});\n// EXTERNAL MODULE: ./node_modules/css-loader!./src/addons/addons/sprite-properties/userstyle.css\nvar userstyle = __webpack_require__(1490);\nvar userstyle_default = /*#__PURE__*/__webpack_require__.n(userstyle);\n\n// CONCATENATED MODULE: ./node_modules/url-loader/dist/cjs.js!./src/addons/addons/sprite-properties/collapse.svg\n/* harmony default export */ var collapse = (\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIuNyIgaGVpZ2h0PSI4Ljc5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02LjM2IDFhMS40MyAxLjQzIDAgMCAwLTEgLjQyTDEuNDIgNS4zNGExLjQ0IDEuNDQgMCAwIDAgMCAyYy41Ni41NiA5LjMxLjU2IDkuODcgMGExLjQ0IDEuNDQgMCAwIDAgMC0yTDcuMzcgMS40MkExLjQzIDEuNDMgMCAwIDAgNi4zNiAxeiIgZmlsbD0iIzU3NWU3NSIvPjwvc3ZnPg==\");\n// CONCATENATED MODULE: ./node_modules/url-loader/dist/cjs.js!./src/addons/addons/sprite-properties/info.svg\n/* harmony default export */ var info = (\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAwLjU3IDAuNTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNLjIzMi4yMzJ2LjAzNmguMDM2Vi41SC4yMTR2LjAzNWguMTQzVi41SC4zMDRWLjIzM3oiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIuMDcxIiBzdHlsZT0icGFpbnQtb3JkZXI6c3Ryb2tlIGZpbGwgbWFya2VycyIvPjxjaXJjbGUgY3g9Ii4yODUiIGN5PSIuMDcxIiByPSIuMDcxIiBzdHlsZT0icGFpbnQtb3JkZXI6c3Ryb2tlIGZpbGwgbWFya2VycyIvPjwvZz48L3N2Zz4=\");\n// CONCATENATED MODULE: ./src/addons/addons/sprite-properties/_runtime_entry.js\n/* generated by pull.js */\n\n\n\n\nconst resources = {\n  \"userscript.js\": userscript,\n  \"userstyle.css\": userstyle_default.a,\n  \"collapse.svg\": collapse,\n  \"info.svg\": info\n};\n\n/***/ })\n\n}]);","inputSourceMap":null}