@jsenv/plugin-toolbar 1.0.1 → 1.0.2

package/dist/html/toolbar.html

@@ -235,6 +235,25 @@
                     Toggle light/dark mode on jsenv toolbar.
                   </div>
                 </div>
+
+                <div class="settings_box_item" id="ribbon_box" style="display: none">
+                  <div class="category_title">
+                    <svg width="20px" height="20px" viewBox="0 0 448 512">
+                      <path d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"></path>
+                    </svg>
+                    Ribbon
+                  </div>
+                  <label class="switch" data-contains-hidden-input="">
+                    <input id="checkbox_dark_theme" type="checkbox">
+                    <div>
+                      <div class="slider"></div>
+                      <div class="square"></div>
+                    </div>
+                  </label>
+                  <div class="category_subtitle">
+                    Toggle dev ribbon visibility
+                  </div>
+                </div>
               </div>
             </div>
           </div>

package/dist/js/toolbar_core.js

@@ -50,7 +50,7 @@ l$2.__b = function (n) {
   var i = (r$1 = n.__c).__H;
   i && (u$1 === r$1 ? (i.__h = [], r$1.__h = [], i.__.forEach(function (n) {
     n.__N && (n.__ = n.__N), n.__V = c$2, n.__N = n.i = void 0;
-  })) : (i.__h.forEach(k), i.__h.forEach(w$1), i.__h = [])), u$1 = r$1;
+  })) : (i.__h.forEach(k), i.__h.forEach(w$1), i.__h = [], t$1 = 0)), u$1 = r$1;
 }, l$2.diffed = function (t) {
   v$1 && v$1(t);
   var o = t.__c;
@@ -1701,6 +1701,33 @@ const renderToolbarThemeSetting = () => {
   };
 };
 
+const ribbonDisplayedSignal = u(typeof stateFromLocalStorage.ribbonDisplayed === "boolean" ? stateFromLocalStorage.ribbonDisplayed : true);
+
+const ribbonBox = document.querySelector("#ribbon_box");
+const ribbonCheckbox = ribbonBox.querySelector("input");
+const renderToolbarRibbonSetting = () => {
+  const ribbonContainer = window.parent.document.querySelector("#jsenv_ribbon_container");
+  if (ribbonContainer) {
+    ribbonBox.style.display = "block";
+    b(() => {
+      const ribbonDisplayed = ribbonDisplayedSignal.value;
+      ribbonCheckbox.checked = ribbonDisplayed;
+      if (ribbonDisplayed) {
+        ribbonContainer.style.display = "block";
+      } else {
+        ribbonContainer.style.display = "none";
+      }
+    });
+    ribbonCheckbox.onchange = () => {
+      if (ribbonCheckbox.checked) {
+        ribbonDisplayedSignal.value = true;
+      } else {
+        ribbonDisplayedSignal.value = false;
+      }
+    };
+  }
+};
+
 const renderToolbarSettings = () => {
   document.querySelector("#settings_open_button").onclick = toggleSettings;
   document.querySelector("#settings_close_button").onclick = toggleSettings;
@@ -1709,6 +1736,7 @@ const renderToolbarSettings = () => {
   renderToolbarAnimationSetting();
   renderToolbarNotificationSetting();
   renderToolbarThemeSetting();
+  renderToolbarRibbonSetting();
   b(() => {
     const settingsOpened = settingsOpenedSignal.value;
     if (settingsOpened) {
@@ -1797,11 +1825,13 @@ const toolbarStateSignal = w(() => {
   const theme = themeSignal.value;
   const animationsEnabled = animationsEnabledSignal.value;
   const notificationsEnabled = notificationsEnabledSignal.value;
+  const ribbonDisplayed = ribbonDisplayedSignal.value;
   return {
     opened,
     theme,
     animationsEnabled,
-    notificationsEnabled
+    notificationsEnabled,
+    ribbonDisplayed
   };
 });
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@jsenv/plugin-toolbar",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/jsenv/core",
-    "directory": "packages/jsenv-plugin-toolbar"
+    "directory": "packages/plugins/jsenv-plugin-toolbar"
   },
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,7 @@
     "/src/"
   ],
   "dependencies": {
-    "@jsenv/ast": "4.0.0",
+    "@jsenv/ast": "4.0.2",
     "@preact/signals": "1.1.3"
   },
   "scripts": {

package/src/client/core/ribbon_signals.js

@@ -0,0 +1,9 @@
+import { signal } from "@preact/signals";
+
+import { stateFromLocalStorage } from "./toolbar_state_context.js";
+
+export const ribbonDisplayedSignal = signal(
+  typeof stateFromLocalStorage.ribbonDisplayed === "boolean"
+    ? stateFromLocalStorage.ribbonDisplayed
+    : true,
+);

package/src/client/core/toolbar_state_signals.js

@@ -4,17 +4,20 @@ import { openedSignal } from "./toolbar_open_signals.js";
 import { themeSignal } from "./theme_signals.js";
 import { animationsEnabledSignal } from "./animation_signals.js";
 import { notificationsEnabledSignal } from "./notification_signals.js";
+import { ribbonDisplayedSignal } from "./ribbon_signals.js";
 
 export const toolbarStateSignal = computed(() => {
   const opened = openedSignal.value;
   const theme = themeSignal.value;
   const animationsEnabled = animationsEnabledSignal.value;
   const notificationsEnabled = notificationsEnabledSignal.value;
+  const ribbonDisplayed = ribbonDisplayedSignal.value;
 
   return {
     opened,
     theme,
     animationsEnabled,
     notificationsEnabled,
+    ribbonDisplayed,
   };
 });

package/src/client/toolbar.html

@@ -347,6 +347,31 @@
                     Toggle light/dark mode on jsenv toolbar.
                   </div>
                 </div>
+
+                <div
+                  class="settings_box_item"
+                  id="ribbon_box"
+                  style="display: none"
+                >
+                  <div class="category_title">
+                    <svg width="20px" height="20px" viewBox="0 0 448 512">
+                      <path
+                        d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"
+                      ></path>
+                    </svg>
+                    Ribbon
+                  </div>
+                  <label class="switch" data-contains-hidden-input>
+                    <input id="checkbox_dark_theme" type="checkbox" />
+                    <div>
+                      <div class="slider"></div>
+                      <div class="square"></div>
+                    </div>
+                  </label>
+                  <div class="category_subtitle">
+                    Toggle dev ribbon visibility
+                  </div>
+                </div>
               </div>
             </div>
           </div>

package/src/client/ui/toolbar_settings/toolbar_ribbon_setting.js

@@ -0,0 +1,33 @@
+import { effect } from "@preact/signals";
+
+import { ribbonDisplayedSignal } from "../../core/ribbon_signals.js";
+
+const ribbonBox = document.querySelector("#ribbon_box");
+const ribbonCheckbox = ribbonBox.querySelector("input");
+
+export const renderToolbarRibbonSetting = () => {
+  const ribbonContainer = window.parent.document.querySelector(
+    "#jsenv_ribbon_container",
+  );
+  if (ribbonContainer) {
+    ribbonBox.style.display = "block";
+    effect(() => {
+      const ribbonDisplayed = ribbonDisplayedSignal.value;
+      ribbonCheckbox.checked = ribbonDisplayed;
+
+      if (ribbonDisplayed) {
+        ribbonContainer.style.display = "block";
+      } else {
+        ribbonContainer.style.display = "none";
+      }
+    });
+
+    ribbonCheckbox.onchange = () => {
+      if (ribbonCheckbox.checked) {
+        ribbonDisplayedSignal.value = true;
+      } else {
+        ribbonDisplayedSignal.value = false;
+      }
+    };
+  }
+};

package/src/client/ui/toolbar_settings/toolbar_settings.js

@@ -11,6 +11,7 @@ import { renderToolbarAutoreloadSetting } from "./toolbar_autoreload_setting.js"
 import { renderToolbarAnimationSetting } from "./toolbar_animation_setting.js";
 import { renderToolbarNotificationSetting } from "./toolbar_notification_setting.js";
 import { renderToolbarThemeSetting } from "./toolbar_theme_setting.js";
+import { renderToolbarRibbonSetting } from "./toolbar_ribbon_setting.js";
 
 export const renderToolbarSettings = () => {
   document.querySelector("#settings_open_button").onclick = toggleSettings;
@@ -21,6 +22,7 @@ export const renderToolbarSettings = () => {
   renderToolbarAnimationSetting();
   renderToolbarNotificationSetting();
   renderToolbarThemeSetting();
+  renderToolbarRibbonSetting();
 
   effect(() => {
     const settingsOpened = settingsOpenedSignal.value;