docks_theme_api 1.0.2

data/source/components/popover/popover.scss

@@ -0,0 +1,139 @@
+ /*============================================================================
+  Next Popover
+ ==============================================================================*/
+
+$popover-tooltip-size: rem(10);
+$popover-max-width: rem(400);
+$popover-min-width: rem(150);
+$popover-max-width-percent: 100%;
+$popover-max-height: rem(800);
+$popover-vertical-margin: half(default(spacing)) + ($popover-tooltip-size / 2);
+$popover-background-color: color(white);
+$popover-section-border: 1px solid color(gray-light);
+$popover-box-shadow: 0 0 0 1px rgba(color(slate), 0.05), 0 2px 7px 1px rgba(color(slate), 0.16);
+
+
+
+.popover__container {
+  position: relative;
+  display: inline-flex;
+  @include z-index(popover-resting, page);
+
+  > *:focus { outline: 0; }
+}
+
+.popover__container--contains-active-popover {
+  @include z-index(popover-active, page);
+}
+
+.popover__container--is-deactivating {
+  @include z-index(popover-deactivating, page);
+}
+
+.popover__container--full-width {
+  display: flex;
+}
+
+
+
+.popover {
+  position: absolute;
+  left: 0;
+  top: 100%;
+
+  transform: scale(0);
+  display: inline-block;
+  max-width: $popover-max-width-percent;
+  margin: $popover-vertical-margin default(spacing);
+
+  background-color: $popover-background-color;
+  border-radius: default(border-radius);
+  opacity: 0;
+  box-shadow: $popover-box-shadow;
+
+  transition: transform 0.35s cubic-bezier(.27,1.41,.53,.97), opacity 0.2s ease;
+}
+
+.popover--is-active {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.popover--is-positioned-above {
+  top: auto;
+  bottom: 100%;
+
+  .popover__tooltip {
+    top: 100%;
+
+    &:after { top: $popover-tooltip-size / -2; }
+  }
+}
+
+
+.popover__tooltip {
+  position: absolute;
+  left: 50%;
+  top: (-2 * $popover-tooltip-size);
+
+  width: ($popover-tooltip-size * 2);
+  height: ($popover-tooltip-size * 2);
+  margin-left: ($popover-tooltip-size * -1);
+  overflow: hidden;
+
+  &:after {
+    content: "";
+
+    position: absolute;
+    top: ($popover-tooltip-size * 3 / 2);
+    left: 50%;
+    transform: rotate(45deg);
+
+    margin-left: ($popover-tooltip-size / -2);
+
+    display: block;
+    height: $popover-tooltip-size;
+    width: $popover-tooltip-size;
+
+    background-color: $popover-background-color;
+    box-shadow: $popover-box-shadow;
+  }
+}
+
+
+
+.popover__content-wrapper {
+  display: flex;
+  max-width: $popover-max-width;
+  max-height: $popover-max-height;
+  border-radius: default(border-radius);
+  overflow: hidden;
+}
+
+
+
+.popover__content {
+  flex: 0 0 auto;
+  display: inline-flex;
+  flex-direction: column;
+  max-height: 100%;
+  min-width: $popover-min-width;
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+
+
+
+.popover__pane {
+  flex: 0 1 auto;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  max-width: 100%;
+}

data/source/components/range/range.scss

@@ -0,0 +1,78 @@
+//        ___                              _____        ___          ___
+//       /  /\                   ___      /  /::\      /  /\        /  /\
+//      /  /:/_                 /  /\    /  /:/\:\    /  /:/_      /  /::\
+//     /  /:/ /\  ___     ___  /  /:/   /  /:/  \:\  /  /:/ /\    /  /:/\:\
+//    /  /:/ /::\/__/\   /  /\/__/::\  /__/:/ \__\:|/  /:/ /:/_  /  /:/~/:/
+//   /__/:/ /:/\:\  \:\ /  /:/\__\/\:\_\  \:\ /  /:/__/:/ /:/ /\/__/:/ /:/___
+//   \  \:\/:/~/:/\  \:\  /:/    \  \:\/\  \:\  /:/\  \:\/:/ /:/\  \:\/:::::/
+//    \  \::/ /:/  \  \:\/:/      \__\::/\  \:\/:/  \  \::/ /:/  \  \::/~~~~
+//     \__\/ /:/    \  \::/       /__/:/  \  \::/    \  \:\/:/    \  \:\
+//       /__/:/      \__\/        \__\/    \__\/      \  \::/      \  \:\
+//       \__\/                                         \__\/        \__\/
+
+//*
+// @pattern Slider
+//
+// A simple range slider. Use this component for situations where the user has
+// to select from a continuous range of values with a minimum and maximum. For
+// example, this component is used to change the perspective and pane gap for
+// the `Exploded` component.
+//
+// @since 1.0.0
+
+//*
+// @markup
+// <label class="label" for="range">Try something in range</label>
+// <input class="range" name="range" id="range" type="range">
+
+.range {
+  width: 100%;
+  margin: 0;
+
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+$range__track--size: default(control-size--large);
+$range__thumb--spacing: (0.1 * default(control-size--large));
+$range__thumb--size: ($range__track--size - double($range__thumb--spacing));
+
+@mixin range__track {
+  // box model
+  width: 100%;
+  height: $range__track--size;
+
+  // backdrop
+  cursor: pointer;
+  background-color: ui-color(gray, dark);
+  border-radius: half($range__track--size);
+  padding: $range__thumb--spacing;
+}
+
+@mixin range__thumb {
+  // box model
+  height: $range__thumb--size;
+  width: $range__thumb--size;
+
+  // backdrop
+  box-shadow: 1px 1px 3px rgba(color(black), 0.15);
+  border-radius: half($range__thumb--size);
+  background: ui-color(gray, light);
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.range::-webkit-slider-runnable-track { @include range__track; }
+.range:focus::-webkit-slider-runnable-track { outline: none; }
+.range::-moz-range-track { @include range__track; }
+.range::-ms-track { @include range__track; }
+
+.range::-webkit-slider-thumb { @include range__thumb; }
+.range::-moz-range-thumb { @include range__thumb; }
+.range::-ms-thumb { @include range__thumb; }

data/source/components/resizable/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "resizable.js"
+}

data/source/components/resizable/resizable.erb

@@ -0,0 +1,30 @@
+<%
+  resizable.configure { |config| config.defaults(id: unique_iframe_id) }
+  id = resizable.id
+%>
+
+<div class="resizable" data-iframe-id="<%= id %>">
+  <div class="resizable__actions">
+    <div class="resizable__width-indicator">
+      <span class="resizable__width-indicator__px"></span>px / <span class="resizable__width-indicator__em"></span>em
+    </div>
+
+    <div class="resizable__size-buttons">
+      <% %w(small medium large full).each_with_index do |size, index| %>
+        <div class="resizable__size-button resizable__size-button--<%= size %>" role="button" tabindex="<%= index == 0 ? '0' : '-1' %>" data-resizable-size-button-size="<%= size %>">
+          <span class="helper--visually-hidden">Set the resizable demo window to size: <%= size %>.</span>
+          <%= docks_icon(size) %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="card">
+
+    <%= docks_iframe id: id, demo: resizable.demo %>
+
+    <div class="resizable__handle" tabindex="0">
+      <span class="helper--visually-hidden">Use the arrow keys to resize the resizable demo window.</span>
+    </div>
+  </div>
+</div>

data/source/components/resizable/resizable.js

@@ -0,0 +1,250 @@
+import SizeButtons from "./size_buttons";
+
+import { Communicator } from "~components/iframe";
+import Events from "~utilities/events";
+import UIEvents from "~utilities/ui_events";
+import Keycodes from "~utilities/keycodes";
+import Builder from "~utilities/builder";
+
+const classes = {
+  root: "resizable",
+  handle: "resizable__handle",
+  container: "resizable__size-button",
+  width_indicator: "resizable__width-indicator",
+  px_indicator: "resizable__width-indicator__px",
+  em_indicator: "resizable__width-indicator__em"
+};
+
+const states = {
+  root: { transitioning: "resizable--is-transitioning-width" },
+  size_button: {
+    hidden: "resizable__size-button--is-hidden",
+    active: "resizable__size-button--is-active"
+  },
+  width_indicator: { visible: "resizable__width-indicator--is-visible" }
+};
+
+const SHOW_WIDTH_DURATION = 2500;
+
+var Resizable,
+    key_on_handle, handle_drag_move, start_dragging_handle;
+
+//*
+// Handles key presses on the resizable handle. If the key is an arrow key,
+// the resizable component will be resized appropriately. If the shift key is
+// being pressed at the same time, the resizing will be accelerated.
+//
+// @param {Object} event - The `keypress` event.
+// @private
+
+key_on_handle = (event) => {
+  var width_change;
+
+  if(!Keycodes.ARROWS.includes(event.which)) { return; }
+  event.preventDefault();
+
+  width_change = event.shiftKey ? 10 : 2;
+  if([Keycodes.LEFT, Keycodes.DOWN].includes(event.which)) {
+    width_change = width_change * -1;
+  }
+
+  Resizable.for(event.target).set_width({ delta: width_change });
+};
+
+//*
+// Handles a drag movement while holding onto a resizable handle. As the user
+// drags, the associated resizable component will resize.
+//
+// @param {Object} context - The context for the current drag.
+// @param {Object} event   - The `mousemove`/ `touchmove` event.
+//
+// @private
+
+handle_drag_move = (context, event) => {
+  var x = UIEvents.coordinates(event).x,
+      delta = x - context.start_x;
+
+  event.preventDefault();
+  context.set_width(context.start_width + 2 * delta);
+};
+
+//*
+// Initializes the required events/ attributes to perform a drag on a resizable
+// handle. This function also removes all pointer events on the resizable to
+// prevent unnecessary clicks/ hovers/ selects.
+//
+// @param {Object} context - The context for the current drag.
+
+start_dragging_handle = (context) => {
+  var drag_move, drag_end, listeners;
+
+  context.iframe.style.pointerEvents = "none";
+
+  drag_move = (event) => { handle_drag_move(context, event); };
+  drag_end = () => {
+    listeners.remove();
+    context.iframe.style.pointerEvents = null;
+  };
+
+  listeners = UIEvents.add_drag_listeners(drag_move, drag_end);
+};
+
+//*
+// The constructor around a `Resizable` component. This component manages many
+// things, including: the intialization of resizing by dragging on the
+// `Resizable`'s handle, responding to changes in the viewport size, and
+// responding to changes in the height of the contained `iframe`.
+//
+// @param {HTMLElement} node - The root node for the `Resizable`
+//
+// @factory
+
+Resizable = (root) => {
+  var api,
+      structure, set_width, show_width, size_buttons, handle_host_resize,
+      min_width, max_width, container_side_padding, width_taken_by_side_components,
+      communicator, respond_to_height, set_height, initialize_handle_resize,
+      container_styles;
+
+  size_buttons = SizeButtons.within(root)[0];
+
+  communicator = Communicator();
+  communicator.register.from_node(root);
+
+  respond_to_height = (event) => { set_height(event.height); };
+  communicator.on(Events.types.height_change, respond_to_height);
+  communicator.on(Events.types.height_request, respond_to_height);
+
+  structure = {
+    root,
+    iframe: root.querySelector("iframe"),
+    handle: root.querySelector(`.${classes.handle}`),
+    container: root.parentNode,
+    width_indicator: root.querySelector(`.${classes.width_indicator}`)
+  };
+
+  container_styles = window.getComputedStyle(structure.container);
+  container_side_padding = parseInt(container_styles.paddingLeft, 10) + parseInt(container_styles.paddingRight, 10);
+
+  width_taken_by_side_components = structure.handle.offsetWidth;
+  max_width = structure.iframe.offsetWidth;
+  min_width = parseInt(window.getComputedStyle(root).minWidth, 10) - width_taken_by_side_components;
+
+  //*
+  // Checks whether or not a resize of the viewport has caused the resizable
+  // width to be greater than it is allowed to be. If so, it will deactivate
+  // the size button that caused that width to be active (if applicable), and
+  // will resize the `Resizable` and display the width.
+  //
+  // @param {Object} event - The `resize` event on the `window`.
+  // @private
+
+  handle_host_resize = () => {
+    max_width = structure.container.offsetWidth - container_side_padding - width_taken_by_side_components;
+    show_width();
+  };
+
+  //*
+  // Sets the height of the `Resizable`. This is done directly on the contained
+  // `iframe`.
+  //
+  // @param {Number} height - The new height of the contained `iframe`.
+  // @private
+
+  set_height = (height) => {
+    structure.iframe.style.height = `${height}px`;
+  };
+
+  //*
+  // Shows the current width of the contained `iframe`. This involves a few
+  // things: the width is converted to `em` and both the `px` and `em` widths
+  // are displayed in the width indicator, the visible state is added to the
+  // width indicator, and a timeout is set up to remove the visible state (so
+  // that the indicator is hidden after a small delay).
+  //
+  // @param {Number} width (iframe.offsetWidth) - The width to display.
+  // @private
+
+  show_width = (() => {
+    var show_width_timeout;
+
+    return () => {
+      var width = structure.iframe.offsetWidth;
+
+      structure.width_indicator.querySelector(`.${classes.px_indicator}`).textContent = width;
+      structure.width_indicator.querySelector(`.${classes.em_indicator}`).textContent = (width / 16).toFixed(2);
+
+      if(show_width_timeout) {
+        clearTimeout(show_width_timeout);
+      } else {
+        structure.width_indicator.classList.add(states.width_indicator.visible);
+      }
+
+      show_width_timeout = setTimeout(() => {
+        structure.width_indicator.classList.remove(states.width_indicator.visible);
+        show_width_timeout = null;
+      }, SHOW_WIDTH_DURATION);
+    };
+  })();
+
+  set_width = (width, options = {}) => {
+    if(typeof width === "object") {
+      options = width;
+      width = root.offsetWidth - width_taken_by_side_components + (options.delta || 0);
+    }
+
+    if(options.animated) {
+      root.classList.add(states.root.transitioning);
+      UIEvents.transition(root, () => { root.classList.remove(states.root.transitioning); });
+    }
+
+    if(width) {
+      width = Math.max(Math.min(width, max_width), min_width);
+      root.style.width = `${width + width_taken_by_side_components}px`;
+    } else {
+      root.style.width = null;
+    }
+
+    show_width();
+
+    size_buttons.try_size(width);
+    return width;
+  };
+
+  //*
+  // Listens for the start of a drag on the `Resizable` component's handle and
+  // passes the associated context to `start_dragging_handle` so that the drag
+  // events can be properly attached.
+  //
+  // @param {Object} event - The `mousedown`/ `touchstart` event.
+  // @private
+
+  initialize_handle_resize = (event) => {
+    var context = {
+      start_x: UIEvents.coordinates(event).x,
+      start_width: structure.iframe.offsetWidth,
+      max_width: structure.container.offsetWidth - container_side_padding,
+      set_width: set_width,
+      iframe: structure.iframe
+    };
+
+    start_dragging_handle(context);
+  };
+
+  show_width();
+
+  $(window).on("resize", handle_host_resize);
+  $(structure.handle).on(UIEvents.drag.start, initialize_handle_resize);
+
+  api = { set_width };
+  return api;
+};
+
+Resizable.init = () => {
+  SizeButtons.init();
+  Builder.build_and_cache(Resizable, { name: classes.root });
+
+  $(document).on("keydown", `.${classes.handle}`, key_on_handle);
+};
+
+export default Resizable;