@jsenv/plugin-toolbar 0.0.1

package/src/client/settings/settings.css

@@ -0,0 +1,201 @@
+#settings-button {
+  position: relative;
+}
+
+#settings-button[data-warning] svg {
+  fill: #cb5909;
+}
+
+#settings-button[data-warning] svg:hover {
+  fill: darkorange !important;
+}
+
+#settings-box {
+  display: none;
+  position: absolute;
+  bottom: 40px;
+  right: 0;
+  text-align: center;
+  padding: 17px;
+  font-size: 14px;
+  color: #fff;
+  background-color: #030713;
+  border-radius: 5px 5px 0 0;
+  min-width: 250px;
+  min-height: 150px;
+  z-index: -1;
+}
+
+[data-active] #settings-box {
+  display: block;
+  animation: comeUp ease 0.3s;
+}
+
+@keyframes comeUp {
+  0% {
+    opacity: 0;
+    transform: translate(0, 90px);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+#settings-box-body {
+  text-align: left;
+  padding: 18px 0;
+  max-height: 80vh;
+  overflow: auto;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+}
+
+.settings-box-items-wrapper {
+  max-width: 700px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.settings-box-item {
+  padding: 15px;
+  background: #0c111b;
+  width: 250px;
+  margin: 9px 18px;
+}
+
+#settings-box-header .settings-icon {
+  fill: none;
+  stroke: #24b1b0;
+  stroke-width: 2;
+  margin-right: 10px;
+  width: 22px;
+  height: 22px;
+  position: relative;
+  top: 4px;
+}
+
+#settings-box h3 {
+  display: inline-block;
+  font-size: 20px;
+  margin: 10px 0;
+  color: #24b1b0;
+}
+
+#button-close-settings {
+  float: right;
+  fill: #24b1b0;
+}
+
+#button-close-settings:hover {
+  opacity: 0.6;
+}
+
+label {
+  color: #a9a8a8;
+  font-size: 14px;
+  padding-bottom: 3px;
+  display: block;
+}
+
+#settings-box .category-title {
+  color: #24b1b0;
+  font-size: 16px;
+  display: inline-block;
+  margin-bottom: 15px;
+  margin-top: 4px;
+}
+
+#settings-box .category-title svg {
+  fill: currentColor;
+  vertical-align: top;
+  margin-right: 5px;
+  width: 18px;
+  height: 18px;
+}
+
+#settings-box .category-subtitle {
+  color: #a9a8a8;
+  font-size: 14px;
+  max-width: 220px;
+}
+
+/* checkbox switch */
+.switch {
+  position: relative;
+  float: right;
+  width: 3.5em;
+  height: 2em;
+  padding: 0;
+  cursor: pointer;
+}
+.switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.switch .slider {
+  position: absolute;
+  vertical-align: middle;
+  height: 0.3em;
+  left: 0.5em;
+  right: 0.5em;
+  top: 50%;
+  margin-top: -0.15em;
+  background-color: #4c4c4c;
+  transition: 0.4s;
+  border-radius: 0.15em;
+}
+.switch .square {
+  position: absolute;
+  content: "";
+  height: 1em;
+  width: 1em;
+  left: 0.5em;
+  top: 50%;
+  margin-top: -0.5em;
+  background-color: #4c4c4c;
+  color: #030713;
+  transition: 0.4s;
+  border-radius: 0.15em;
+}
+.switch input + * {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  /* It's important to have a border (event transparent)
+To be able to apply an outline to this element later*/
+  border-width: 1px;
+  border-color: transparent;
+  border-style: solid;
+}
+.switch input:checked + * .slider {
+  background-color: #24b1b0;
+}
+.switch input:checked + * .square {
+  transform: translateX(1.6em);
+  background-color: #24b1b0;
+}
+
+.settings-box-item[data-disabled] {
+  background-color: rgba(12, 17, 27, 0.4);
+  cursor: default;
+}
+.settings-box-item[data-disabled] .category-title,
+.settings-box-item[data-disabled] .switch,
+.settings-box-item[data-disabled] .category-subtitle {
+  opacity: 0.4;
+}
+.settings-box-item[data-disabled] .category-title span {
+  text-decoration: line-through;
+}
+.settings-box-item[data-disabled] .category-subtitle {
+  text-decoration: line-through;
+}
+.settings-box-item[data-disabled] .switch {
+  cursor: default;
+}

package/src/client/settings/toolbar_settings.js

@@ -0,0 +1,47 @@
+import {
+  toolbarSectionIsActive,
+  deactivateToolbarSection,
+  activateToolbarSection,
+  updateIframeOverflowOnParentWindow,
+} from "../util/dom.js"
+import { enableVariant } from "../variant/variant.js"
+
+export const renderToolbarSettings = () => {
+  document.querySelector("#settings-button").onclick = toggleSettings
+  document.querySelector("#button-close-settings").onclick = toggleSettings
+  disableWarningStyle()
+}
+
+const toggleSettings = () => {
+  if (settingsAreVisible()) {
+    hideSettings()
+  } else {
+    showSettings()
+  }
+}
+
+export const enableWarningStyle = () => {
+  enableVariant(document.querySelector("#settings-button"), {
+    has_warning: "yes",
+  })
+}
+
+export const disableWarningStyle = () => {
+  enableVariant(document.querySelector("#settings-button"), {
+    has_warning: "no",
+  })
+}
+
+export const settingsAreVisible = () => {
+  return toolbarSectionIsActive(document.querySelector(`#settings`))
+}
+
+export const hideSettings = () => {
+  deactivateToolbarSection(document.querySelector(`#settings`))
+  updateIframeOverflowOnParentWindow()
+}
+
+export const showSettings = () => {
+  activateToolbarSection(document.querySelector(`#settings`))
+  updateIframeOverflowOnParentWindow()
+}

package/src/client/theme/jsenv_theme.css

@@ -0,0 +1,77 @@
+/* icons */
+html[data-theme="jsenv"] .iconToolbar {
+  fill: #de5600;
+}
+html[data-theme="jsenv"] .iconToolbar:hover {
+  fill: #9a5300 !important;
+}
+
+/* loaders */
+html[data-theme="jsenv"] #loader-icon {
+  color: #404040;
+}
+
+/* settings */
+html[data-theme="jsenv"] #settings-box,
+html[data-theme="jsenv"] #settings[data-active] button {
+  background: #f7931e;
+}
+html[data-theme="jsenv"] .settings-box-item {
+  background: #ffa641;
+}
+html[data-theme="jsenv"] #settings-box-header .settings-icon {
+  stroke: #076570;
+}
+html[data-theme="jsenv"] #button-close-settings {
+  fill: #076570;
+}
+html[data-theme="jsenv"] #settings-box h3,
+html[data-theme="jsenv"] #settings-box .category-title {
+  color: #076570;
+}
+html[data-theme="jsenv"] #settings-box .category-title svg {
+  fill: #076570;
+}
+html[data-theme="jsenv"] #settings-box .category-subtitle {
+  color: #076570;
+}
+html[data-theme="jsenv"] label {
+  color: #002e33;
+}
+html[data-theme="jsenv"] input:checked + .slider,
+html[data-theme="jsenv"] .switch input:checked + .slider:before {
+  background-color: #de5600;
+}
+html[data-theme="jsenv"] .switch .slider,
+html[data-theme="jsenv"] .switch .slider:before {
+  background-color: grey;
+}
+
+/* tooltips */
+html[data-theme="jsenv"] .tooltip {
+  background-color: #ffd390;
+  color: #884900;
+}
+html[data-theme="jsenv"] .tooltipAction {
+  border-color: #884900;
+}
+html[data-theme="jsenv"] .tooltipAction a {
+  color: #884900;
+}
+html[data-theme="jsenv"] .tooltipIcon {
+  fill: #884900;
+}
+html[data-theme="jsenv"] .tooltip::after {
+  border-color: #ffd390 transparent transparent transparent;
+}
+
+/* page file list */
+html[data-theme="jsenv"] h2 {
+  color: orange;
+}
+html[data-theme="jsenv"] #fileIconSvgConfig {
+  fill: orange;
+}
+html[data-theme="jsenv"] #explorables h2 span {
+  color: #24b1b0;
+}

package/src/client/theme/light_theme.css

@@ -0,0 +1,106 @@
+/* general */
+html[data-theme="light"] #toolbar {
+  background: #e8eff3;
+}
+
+/* icons */
+html[data-theme="light"] .iconToolbar {
+  fill: #404040;
+}
+html[data-theme="light"] .iconToolbar:hover {
+  fill: #757575 !important;
+}
+
+/* loaders */
+html[data-theme="light"] #loader-icon {
+  color: #404040;
+}
+
+/* settings */
+html[data-theme="light"] #settings-box,
+html[data-theme="light"] #settings[data-active] button {
+  background: #87acd3;
+}
+html[data-theme="light"] .settings-box-item {
+  background: #97b9da;
+}
+html[data-theme="light"] #settings-box-header .settings-icon {
+  stroke: #076570;
+}
+html[data-theme="light"] #button-close-settings {
+  fill: #076570;
+}
+html[data-theme="light"] #settings-box h3,
+html[data-theme="light"] #settings-box .category-title {
+  color: #076570;
+}
+html[data-theme="light"] #settings-box .category-title svg {
+  fill: #076570;
+}
+html[data-theme="light"] #settings-box .category-subtitle {
+  color: #5d5d5d;
+}
+html[data-theme="light"] label {
+  color: #002e33;
+}
+html[data-theme="light"] .switch input + * .slider,
+html[data-theme="light"] .switch input + * .square {
+  background-color: grey;
+}
+html[data-theme="light"] .switch input:checked + * .slider,
+html[data-theme="light"] .switch input:checked + * .square {
+  background-color: #076570;
+}
+
+/* tooltips */
+html[data-theme="light"] .tooltip {
+  background-color: rgb(138, 145, 154);
+  color: #fff;
+}
+html[data-theme="light"] .tooltipAction {
+  border-color: #fff;
+}
+html[data-theme="light"] .tooltip::after {
+  border-color: rgb(138, 145, 154) transparent transparent transparent;
+}
+
+/* overflow menu */
+html[data-theme="light"] #overflow-menu-button {
+  background: #e8eff3;
+}
+html[data-theme="light"]
+  #toolbar[data-overflow-menu-visible]
+  #overflow-menu-button {
+  background: #a5a9ad;
+}
+html[data-theme="light"] #overflow-menu {
+  background: #dfe4e7;
+}
+
+/*  page file list */
+html[data-theme="light"] h2,
+html[data-theme="light"] h4 {
+  color: #076570;
+}
+html[data-theme="light"] #fileIconSvgConfig {
+  fill: #076570;
+}
+html[data-theme="light"] #explorables h2 span {
+  color: #ff8d00;
+}
+html[data-theme="light"] article[data-page="file-list"],
+html[data-theme="light"] #file-list-link[data-active] a {
+  background: #bbd5ea;
+}
+html[data-theme="light"] #explorables fieldset input:checked + * {
+  color: #ff8d00;
+  background: #bbd5ea;
+}
+html[data-theme="light"] #explorables #explorables-header,
+html[data-theme="light"] #explorables fieldset label input + * {
+  background: #ddf0ff;
+}
+html[data-theme="light"] .execution-link {
+  background: #ddf0ff;
+  color: #076570;
+}

package/src/client/theme/toolbar_theme.js

@@ -0,0 +1,34 @@
+import { createPreference } from "../util/preferences.js"
+
+const DARK_THEME = "dark"
+const LIGHT_THEME = "light"
+const themePreference = createPreference("jsenv_toolbar_theme")
+
+export const renderToolbarTheme = () => {
+  const theme = getThemePreference()
+  const checkbox = document.querySelector("#checkbox-dark-theme")
+  checkbox.checked = theme === DARK_THEME
+  setTheme(theme)
+  checkbox.onchange = () => {
+    if (checkbox.checked) {
+      setThemePreference(DARK_THEME)
+      setTheme(DARK_THEME)
+    } else {
+      setThemePreference(LIGHT_THEME)
+      setTheme(LIGHT_THEME)
+    }
+  }
+}
+
+const getThemePreference = () => {
+  return themePreference.has() ? themePreference.get() : DARK_THEME
+}
+
+const setThemePreference = (value) => {
+  themePreference.set(value)
+  setTheme(value)
+}
+
+const setTheme = (theme) => {
+  document.querySelector("html").setAttribute("data-theme", theme)
+}