@jsenv/plugin-toolbar 0.1.1 → 0.1.2

package/dist/css/toolbar_menu_overflow.css

@@ -0,0 +1,59 @@
+#menu_overflow_button {
+  width: 40px;
+  background: #404040;
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+#menu_overflow_icon {
+  width: 25px;
+}
+
+#menu_overflow {
+  visibility: hidden;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: #404040;
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 100%;
+}
+
+#menu_overflow[data-animate] {
+  transition-property: left, opacity;
+  transition-duration: .3s;
+}
+
+#menu_overflow > * {
+  vertical-align: middle;
+  text-align: center;
+}
+
+#toolbar[data-menu-overflow-enabled] #menu_overflow_button {
+  display: block;
+}
+
+#toolbar[data-menu-overflow-opened] #menu_overflow_button {
+  background: #030713;
+}
+
+#toolbar[data-menu-overflow-enabled][data-menu-overflow-opened] #toolbar-wrapper {
+  visibility: hidden;
+}
+
+#toolbar[data-menu-overflow-opened] #menu_overflow {
+  visibility: visible;
+  opacity: 1;
+  margin-left: -40px;
+  display: block;
+  left: 0;
+}
+
+#toolbar[data-menu-overflow-enabled] #settings_box {
+  right: -40px;
+}

package/dist/css/toolbar_settings.css

@@ -0,0 +1,202 @@
+@import "./theme_light.css";
+
+#settings_button {
+  position: relative;
+}
+
+#settings_button[data-warning] svg {
+  fill: #cb5909;
+}
+
+#settings_button[data-warning] svg:hover {
+  fill: #ff8c00 !important;
+}
+
+#settings_box {
+  text-align: center;
+  color: #fff;
+  min-width: 250px;
+  min-height: 150px;
+  z-index: -1;
+  background-color: #030713;
+  border-radius: 5px 5px 0 0;
+  padding: 17px;
+  font-size: 14px;
+  display: none;
+  position: absolute;
+  bottom: 40px;
+  right: 0;
+}
+
+[data-active] #settings_box {
+  animation: .3s comeUp;
+  display: block;
+}
+
+@keyframes comeUp {
+  0% {
+    opacity: 0;
+    transform: translate(0, 90px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+
+#settings_box_body {
+  text-align: left;
+  max-height: 80vh;
+  width: 100vw;
+  justify-content: center;
+  padding: 18px 0;
+  display: flex;
+  overflow: auto;
+}
+
+.settings_box_items_wrapper {
+  max-width: 700px;
+  flex-wrap: wrap;
+  justify-content: center;
+  display: flex;
+}
+
+.settings_box_item {
+  width: 250px;
+  background: #0c111b;
+  margin: 9px 18px;
+  padding: 15px;
+}
+
+#settings_box_header .settings_icon {
+  fill: none;
+  stroke: #24b1b0;
+  stroke-width: 2px;
+  width: 22px;
+  height: 22px;
+  margin-right: 10px;
+  position: relative;
+  top: 4px;
+}
+
+#settings_box h3 {
+  color: #24b1b0;
+  margin: 10px 0;
+  font-size: 20px;
+  display: inline-block;
+}
+
+#settings_close_button {
+  float: right;
+  fill: #24b1b0;
+}
+
+#settings_close_button:hover {
+  opacity: .6;
+}
+
+label {
+  color: #a9a8a8;
+  padding-bottom: 3px;
+  font-size: 14px;
+  display: block;
+}
+
+#settings_box .category_title {
+  color: #24b1b0;
+  margin-top: 4px;
+  margin-bottom: 15px;
+  font-size: 16px;
+  display: inline-block;
+}
+
+#settings_box .category_title svg {
+  fill: currentColor;
+  vertical-align: top;
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+}
+
+#settings_box .category_subtitle {
+  color: #a9a8a8;
+  max-width: 220px;
+  font-size: 14px;
+}
+
+.switch {
+  float: right;
+  width: 3.5em;
+  height: 2em;
+  cursor: pointer;
+  padding: 0;
+  position: relative;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.switch .slider {
+  vertical-align: middle;
+  height: .3em;
+  background-color: #4c4c4c;
+  border-radius: .15em;
+  margin-top: -.15em;
+  transition: all .4s;
+  position: absolute;
+  top: 50%;
+  left: .5em;
+  right: .5em;
+}
+
+.switch .square {
+  content: "";
+  height: 1em;
+  width: 1em;
+  color: #030713;
+  background-color: #4c4c4c;
+  border-radius: .15em;
+  margin-top: -.5em;
+  transition: all .4s;
+  position: absolute;
+  top: 50%;
+  left: .5em;
+}
+
+.switch input + * {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #0000;
+  position: relative;
+}
+
+.switch input:checked + * .slider {
+  background-color: #24b1b0;
+}
+
+.switch input:checked + * .square {
+  background-color: #24b1b0;
+  transform: translateX(1.6em);
+}
+
+.settings_box_item[data-disabled] {
+  cursor: default;
+  background-color: #0c111b66;
+}
+
+.settings_box_item[data-disabled] .category_title, .settings_box_item[data-disabled] .switch, .settings_box_item[data-disabled] .category_subtitle {
+  opacity: .4;
+}
+
+.settings_box_item[data-disabled] .category_title span, .settings_box_item[data-disabled] .category_subtitle {
+  text-decoration: line-through;
+}
+
+.settings_box_item[data-disabled] .switch {
+  cursor: default;
+}

package/dist/css/tooltips.css

@@ -0,0 +1,67 @@
+.tooltip {
+  color: #fff;
+  text-align: center;
+  max-width: 260px;
+  cursor: default;
+  background-color: #5e5e5e;
+  border-radius: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+  font-size: 14px;
+  display: none;
+  position: absolute;
+  bottom: 100%;
+}
+
+.tooltip:after {
+  content: "";
+  border: 5px solid #0000;
+  border-top-color: #5e5e5e;
+  position: absolute;
+  top: 100%;
+  left: 14px;
+}
+
+.tooltip[data-toolip-left] {
+  margin-right: 5px;
+}
+
+.tooltip[data-toolip-left]:after {
+  left: 15px;
+}
+
+[data-tooltip-visible] .tooltip, [data-tooltip-auto-visible] .tooltip {
+  animation: .4s fadeIn;
+  display: block;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.tooltip_action {
+  border: 1px solid #a0a0a0;
+  border-radius: 3px;
+  margin-top: 6px;
+  padding: 3px 7px;
+  display: inline-block;
+}
+
+.tooltip_action a {
+  vertical-align: middle;
+  color: #fff;
+  text-decoration: none;
+}
+
+.tooltip_icon {
+  fill: #fff;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}

package/dist/js/animation.js

@@ -0,0 +1,282 @@
+import { setStyles } from "./dom.js";
+const animateFallback = () => {
+  return Promise.resolve();
+};
+const animateNative = (node, keyframes, {
+  signal,
+  ...options
+} = {}) => {
+  const animation = node.animate(keyframes, options);
+  if (signal) {
+    signal.addEventListener("abort", () => {
+      animation.cancel();
+    });
+  }
+  return new Promise(resolve => {
+    animation.onfinish = resolve;
+  });
+};
+export const canUseAnimation = () => typeof HTMLElement.prototype.animate === "function";
+export const animateElement = canUseAnimation() ? animateNative : animateFallback;
+export const fadeIn = (node, options) => animateElement(node, [{
+  opacity: 0
+}, {
+  opacity: 1
+}], options);
+export const fadeOut = (node, options) => animateElement(node, [{
+  opacity: 1
+}, {
+  opacity: 0
+}], options);
+export const move = (fromNode, toNode, options) => {
+  const fromComputedStyle = window.getComputedStyle(fromNode);
+  const toComputedStyle = window.getComputedStyle(toNode);
+  // get positions of input in toolbar and aElement
+  const fromPosition = fromNode.getBoundingClientRect();
+  const toPosition = toNode.getBoundingClientRect();
+
+  // we'll do the animation in a div preventing overflow and pointer events
+  const div = document.createElement("div");
+  div.style.position = "absolute";
+  div.style.left = 0;
+  div.style.top = 0;
+  div.style.width = `${document.documentElement.scrollWidth}px`;
+  div.style.height = `${document.documentElement.scrollHeight}px`;
+  div.style.overflow = "hidden";
+  div.style.pointerEvents = "none";
+  const documentScroll = {
+    left: window.pageXOffset || document.documentElement.scrollLeft,
+    top: window.pageYOffset || document.documentElement.scrollTop
+  };
+
+  // clone node and style it
+  const copy = fromNode.cloneNode(true);
+  copy.style.position = "absolute";
+  copy.style.left = `${documentScroll.left + fromPosition.left}px`;
+  copy.style.top = `${documentScroll.top + fromPosition.top}px`;
+  copy.style.maxWidth = `${fromPosition.right - fromPosition.left}px`;
+  copy.style.overflow = toComputedStyle.overflow;
+  copy.style.textOverflow = toComputedStyle.textOverflow;
+  div.appendChild(copy);
+  document.body.appendChild(div);
+  const left = toPosition.left - fromPosition.left - (parseInt(fromComputedStyle.paddingLeft) || 0);
+  const top = toPosition.top - fromPosition.top - (parseInt(fromComputedStyle.paddingTop) || 0);
+  // define final position of new element and the duration
+  const translate = `translate(${left}px, ${top}px)`;
+
+  // animate new element
+  return animateElement(copy, [{
+    transform: "translate(0px, 0px)",
+    backgroundColor: fromComputedStyle.backgroundColor,
+    color: fromComputedStyle.color,
+    fontSize: fromComputedStyle.fontSize,
+    height: `${fromPosition.bottom - fromPosition.top}px`,
+    width: "100%"
+  }, {
+    offset: 0.9,
+    backgroundColor: fromComputedStyle.backgroundColor,
+    color: fromComputedStyle.color
+  }, {
+    transform: translate,
+    backgroundColor: toComputedStyle.backgroundColor,
+    color: toComputedStyle.color,
+    fontSize: toComputedStyle.fontSize,
+    height: `${toPosition.bottom - toPosition.top}px`,
+    width: toComputedStyle.width
+  }], options).then(() => {
+    div.parentNode.removeChild(div);
+  });
+};
+
+// the whole point of this toolbar animation wass to flight a visual imperfection when it's done by css transition.
+// This imperfection is a white line sometimes flickering at the bottom of the page.
+// It got fixed by removing the usage of calc(100vh - 40px)
+// It was hapenning in chrome, safari but not inside Firefox
+// I assume it's because Firefox does not read parent element min-height while
+// chrome use it to compute min-height: 100%
+export const createToolbarAnimation = () => {
+  const collapsedState = {
+    "#page": {
+      paddingBottom: 0
+    },
+    "footer": {
+      height: 0
+    },
+    "#toolbar": {
+      visibility: "hidden"
+    }
+  };
+  const expandedState = {
+    "#page": {
+      paddingBottom: "40px"
+    },
+    "footer": {
+      height: "40px"
+    },
+    "#toolbar": {
+      visibility: "visible"
+    }
+  };
+  const expandTransition = transit(collapsedState, expandedState, {
+    duration: 300
+  });
+  const expand = () => {
+    expandTransition.play();
+  };
+  const collapse = () => {
+    expandTransition.reverse();
+  };
+  return {
+    expand,
+    collapse
+  };
+};
+export const transit = (fromState, toState, {
+  commitStyles = true,
+  fill = "both",
+  duration = 300
+} = {}) => {
+  const steps = [];
+  Object.keys(fromState).forEach(selector => {
+    const fromStyles = {};
+    const toStyles = {};
+    const element = document.querySelector(selector);
+    const keyframes = [];
+    const fromProperties = fromState[selector];
+    const toProperties = toState[selector];
+    Object.keys(fromProperties).forEach(propertyName => {
+      const from = fromProperties[propertyName];
+      const to = toProperties[propertyName];
+      fromStyles[propertyName] = from;
+      toStyles[propertyName] = to;
+    });
+    keyframes.push(fromStyles, toStyles);
+    let animation;
+    if (canUseAnimation()) {
+      const effect = new KeyframeEffect(element, keyframes, {
+        fill,
+        duration
+      });
+      animation = new Animation(effect);
+    } else {
+      animation = {
+        playbackRate: 1,
+        play: () => {
+          animation.onfinish();
+        },
+        reverse: () => {
+          animation.playbackRate = -1;
+          animation.onfinish();
+        },
+        finish: () => {},
+        onfinish: () => {}
+      };
+    }
+    steps.push({
+      element,
+      animation,
+      fromStyles,
+      toStyles
+    });
+  });
+  const play = async () => {
+    await Promise.all(steps.map(({
+      animation,
+      element,
+      toStyles
+    }) => {
+      return new Promise(resolve => {
+        animation.onfinish = () => {
+          if (commitStyles) {
+            setStyles(element, toStyles);
+          }
+          resolve();
+        };
+        if (animation.playbackRate === -1) {
+          animation.reverse();
+        } else {
+          animation.play();
+        }
+      });
+    }));
+  };
+  const reverse = async () => {
+    await Promise.all(steps.map(({
+      animation,
+      element,
+      fromStyles
+    }) => {
+      return new Promise(resolve => {
+        animation.onfinish = () => {
+          if (commitStyles) {
+            setStyles(element, fromStyles);
+          }
+          resolve();
+        };
+        animation.reverse();
+      });
+    }));
+  };
+  const finish = async () => {
+    steps.forEach(({
+      animation
+    }) => {
+      animation.finish();
+    });
+  };
+  return {
+    play,
+    reverse,
+    finish
+  };
+};
+export const startJavaScriptAnimation = ({
+  duration = 300,
+  timingFunction = t => t,
+  onProgress = () => {},
+  onCancel = () => {},
+  onComplete = () => {}
+}) => {
+  if (isNaN(duration)) {
+    // console.warn(`duration must be a number, received ${duration}`)
+    return () => {};
+  }
+  duration = parseInt(duration, 10);
+  const startMs = performance.now();
+  let currentRequestAnimationFrameId;
+  let done = false;
+  let rawProgress = 0;
+  let progress = 0;
+  const handler = () => {
+    currentRequestAnimationFrameId = null;
+    const nowMs = performance.now();
+    rawProgress = Math.min((nowMs - startMs) / duration, 1);
+    progress = timingFunction(rawProgress);
+    done = rawProgress === 1;
+    onProgress({
+      done,
+      rawProgress,
+      progress
+    });
+    if (done) {
+      onComplete();
+    } else {
+      currentRequestAnimationFrameId = window.requestAnimationFrame(handler);
+    }
+  };
+  handler();
+  const stop = () => {
+    if (currentRequestAnimationFrameId) {
+      window.cancelAnimationFrame(currentRequestAnimationFrameId);
+      currentRequestAnimationFrameId = null;
+    }
+    if (!done) {
+      done = true;
+      onCancel({
+        rawProgress,
+        progress
+      });
+    }
+  };
+  return stop;
+};

package/dist/js/animation_actions.js

@@ -0,0 +1,7 @@
+import { animationsEnabledSignal } from "./animation_signals.js";
+export const enableAnimations = () => {
+  animationsEnabledSignal.value = true;
+};
+export const disableAnimations = () => {
+  animationsEnabledSignal.value = false;
+};

package/dist/js/animation_effects.js

@@ -0,0 +1,10 @@
+import { effect } from "./signals.mjs";
+import { animationsEnabledSignal } from "./animation_signals.js";
+effect(() => {
+  const animationsEnabled = animationsEnabledSignal.value;
+  if (animationsEnabled) {
+    document.documentElement.removeAttribute("data-animation-disabled");
+  } else {
+    document.documentElement.setAttribute("data-animation-disabled", "");
+  }
+});

package/dist/js/animation_signals.js

@@ -0,0 +1,4 @@
+import { signal } from "./signals.mjs";
+import { paramsFromParentWindow } from "./parent_window_context.js";
+import { stateFromLocalStorage } from "./toolbar_state_context.js";
+export const animationsEnabledSignal = signal(typeof stateFromLocalStorage.animationsEnabled === "boolean" ? stateFromLocalStorage.animationsEnabled : typeof paramsFromParentWindow.animationsEnabled === "boolean" ? paramsFromParentWindow.animationsEnabled : false);

package/dist/js/changes_actions.js

@@ -0,0 +1,7 @@
+import { changesTooltipOpenedSignal } from "./changes_signals.js";
+export const openChangesToolip = () => {
+  changesTooltipOpenedSignal.value = true;
+};
+export const closeChangesToolip = () => {
+  changesTooltipOpenedSignal.value = false;
+};

package/dist/js/changes_indicator.js

@@ -0,0 +1,57 @@
+import { effect } from "./signals.mjs";
+import { parentWindowReloader } from "./parent_window_context.js";
+import { autoreloadEnabledSignal, changesSignal } from "./parent_window_signals.js";
+import { changesTooltipOpenedSignal } from "./changes_signals.js";
+import { openChangesToolip, closeChangesToolip } from "./changes_actions.js";
+import { enableVariant } from "./variant.js";
+const changesIndicator = document.querySelector("#changes_indicator");
+export const renderChangesIndicator = () => {
+  effect(() => {
+    const autoreloadEnabled = autoreloadEnabledSignal.value;
+    const changes = changesSignal.value;
+    const changeCount = changes.length;
+    enableVariant(changesIndicator, {
+      changes: !autoreloadEnabled && changeCount ? "yes" : "no"
+    });
+    if (changeCount) {
+      changesIndicator.querySelector(".tooltip_text").innerHTML = computeTooltipText({
+        changes
+      });
+      changesIndicator.querySelector(".tooltip_text a").onclick = () => {
+        // eslint-disable-next-line no-alert
+        window.alert(JSON.stringify(changes, null, "  "));
+        console.log(changes);
+      };
+      changesIndicator.querySelector(".changes_text").innerHTML = changeCount;
+    }
+  });
+  changesIndicator.querySelector(".tooltip_action").onclick = () => {
+    parentWindowReloader.reload();
+  };
+  effect(() => {
+    const changesTooltipOpened = changesTooltipOpenedSignal.value;
+    if (changesTooltipOpened) {
+      changesIndicator.setAttribute("data-tooltip-visible", "");
+    } else {
+      changesIndicator.removeAttribute("data-tooltip-visible");
+    }
+  });
+  const button = changesIndicator.querySelector("button");
+  button.onclick = () => {
+    const changesTooltipOpened = changesTooltipOpenedSignal.value;
+    if (changesTooltipOpened) {
+      closeChangesToolip();
+    } else {
+      openChangesToolip();
+    }
+  };
+};
+const computeTooltipText = ({
+  changes
+}) => {
+  const changesCount = changes.length;
+  if (changesCount === 1) {
+    return `There is <a href="javascript:void(0)">1</a> change to apply`;
+  }
+  return `There is  <a href="javascript:void(0)">${changesCount}<a> changes to apply`;
+};

package/dist/js/changes_signals.js

@@ -0,0 +1,2 @@
+import { signal } from "./signals.mjs";
+export const changesTooltipOpenedSignal = signal(false);