@jsenv/plugin-toolbar 0.1.2 → 0.1.3

package/dist/js/animation.js

@@ -1,282 +0,0 @@
-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

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

package/dist/js/animation_effects.js

@@ -1,10 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

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

package/dist/js/changes_indicator.js

@@ -1,57 +0,0 @@
-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

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

package/dist/js/document_execution_indicator.js

@@ -1,62 +0,0 @@
-import { effect } from "./signals.mjs";
-import { executionSignal, executionTooltipOpenedSignal } from "./execution_signals.js";
-import { closeExecutionTooltip, openExecutionTooltip } from "./execution_actions.js";
-import { removeForceHideElement } from "./dom.js";
-import { enableVariant } from "./variant.js";
-const executionIndicator = document.querySelector("#document_execution_indicator");
-export const renderDocumentExecutionIndicator = async () => {
-  removeForceHideElement(document.querySelector("#document_execution_indicator"));
-  effect(() => {
-    const execution = executionSignal.value;
-    updateExecutionIndicator(execution);
-  });
-  effect(() => {
-    const executionTooltipOpened = executionTooltipOpenedSignal.value;
-    if (executionTooltipOpened) {
-      executionIndicator.setAttribute("data-tooltip-visible", "");
-    } else {
-      executionIndicator.removeAttribute("data-tooltip-visible");
-    }
-  });
-};
-const updateExecutionIndicator = ({
-  status,
-  startTime,
-  endTime
-} = {}) => {
-  enableVariant(executionIndicator, {
-    execution: status
-  });
-  const variantNode = executionIndicator.querySelector("[data-when-active]");
-  variantNode.querySelector("button").onclick = () => {
-    const executionTooltipOpened = executionTooltipOpenedSignal.value;
-    if (executionTooltipOpened) {
-      closeExecutionTooltip();
-    } else {
-      openExecutionTooltip();
-    }
-  };
-  variantNode.querySelector(".tooltip").textContent = computeText({
-    status,
-    startTime,
-    endTime
-  });
-};
-
-// relative time: https://github.com/tc39/proposal-intl-relative-time/issues/118
-const computeText = ({
-  status,
-  startTime,
-  endTime
-}) => {
-  if (status === "completed") {
-    return `Execution completed in ${endTime - startTime}ms`;
-  }
-  if (status === "errored") {
-    return `Execution failed in ${endTime - startTime}ms`;
-  }
-  if (status === "running") {
-    return "Executing...";
-  }
-  return "";
-};

package/dist/js/document_index_link.js

@@ -1,4 +0,0 @@
-import { setLinkHrefForParentWindow } from "./iframe_to_parent_href.js";
-export const renderDocumentIndexLink = () => {
-  setLinkHrefForParentWindow(document.querySelector("#document_index_link"), "/");
-};

package/dist/js/dom.js

@@ -1,48 +0,0 @@
-export const getToolbarIframe = () => {
-  const iframes = Array.from(window.parent.document.querySelectorAll("iframe"));
-  return iframes.find(iframe => iframe.contentWindow === window);
-};
-export const forceHideElement = element => {
-  element.setAttribute("data-force-hide", "");
-};
-export const removeForceHideElement = element => {
-  element.removeAttribute("data-force-hide");
-};
-export const setStyles = (element, styles) => {
-  const elementStyle = element.style;
-  const restoreStyles = Object.keys(styles).map(styleName => {
-    let restore;
-    if (styleName in elementStyle) {
-      const currentStyle = elementStyle[styleName];
-      restore = () => {
-        elementStyle[styleName] = currentStyle;
-      };
-    } else {
-      restore = () => {
-        delete elementStyle[styleName];
-      };
-    }
-    elementStyle[styleName] = styles[styleName];
-    return restore;
-  });
-  return () => {
-    restoreStyles.forEach(restore => restore());
-  };
-};
-export const setAttributes = (element, attributes) => {
-  Object.keys(attributes).forEach(name => {
-    element.setAttribute(name, attributes[name]);
-  });
-};
-export const getDocumentScroll = () => {
-  return {
-    x: document.documentElement.scrollLeft,
-    y: document.documentElement.scrollTop
-  };
-};
-export const activateToolbarSection = element => {
-  element.setAttribute("data-active", "");
-};
-export const deactivateToolbarSection = element => {
-  element.removeAttribute("data-active");
-};

package/dist/js/execution_actions.js

@@ -1,46 +0,0 @@
-import { executionTooltipOpenedSignal } from "./execution_signals.js";
-import { notify } from "./notification_actions.js";
-export const openExecutionTooltip = () => {
-  executionTooltipOpenedSignal.value = true;
-};
-export const closeExecutionTooltip = () => {
-  executionTooltipOpenedSignal.value = false;
-};
-export const notifyExecutionResult = (execution, previousExecution) => {
-  const executedFileRelativeUrl = window.location.href;
-  const notificationOptions = {
-    lang: "en",
-    icon: getFaviconHref(),
-    clickToFocus: true,
-    clickToClose: true
-  };
-  if (execution.status === "errored") {
-    if (previousExecution) {
-      if (previousExecution.status === "completed") {
-        notify("Broken", {
-          ...notificationOptions,
-          body: `${executedFileRelativeUrl} execution now failing.`
-        });
-      } else {
-        notify("Still failing", {
-          ...notificationOptions,
-          body: `${executedFileRelativeUrl} execution still failing.`
-        });
-      }
-    } else {
-      notify("Failing", {
-        ...notificationOptions,
-        body: `${executedFileRelativeUrl} execution failed.`
-      });
-    }
-  } else if (previousExecution && previousExecution.status === "errored") {
-    notify("Fixed", {
-      ...notificationOptions,
-      body: `${executedFileRelativeUrl} execution fixed.`
-    });
-  }
-};
-const getFaviconHref = () => {
-  const link = document.querySelector('link[rel="icon"]');
-  return link ? link.href : undefined;
-};

package/dist/js/execution_effects.js

@@ -1,16 +0,0 @@
-import { effect } from "./signals.mjs";
-import { executionSignal, previousExecutionSignal } from "./execution_signals.js";
-import { notifyExecutionResult } from "./execution_actions.js";
-effect(() => {
-  const execution = executionSignal.value;
-  if (execution) {
-    sessionStorage.setItem(window.location.href, JSON.stringify(execution));
-  }
-});
-effect(() => {
-  const execution = executionSignal.value;
-  const previousExecution = previousExecutionSignal.value;
-  if (execution) {
-    notifyExecutionResult(execution, previousExecution);
-  }
-});

package/dist/js/execution_signals.js

@@ -1,17 +0,0 @@
-import { signal } from "./signals.mjs";
-export const executionTooltipOpenedSignal = signal(false);
-export const executionSignal = signal({
-  status: "running"
-});
-export const previousExecutionSignal = signal(sessionStorage.hasOwnProperty(window.location.href) ? JSON.parse(sessionStorage.getItem(window.location.href)) : null);
-window.parent.__supervisor__.getDocumentExecutionResult().then(({
-  status,
-  startTime,
-  endTime
-}) => {
-  executionSignal.value = {
-    status,
-    startTime,
-    endTime
-  };
-});