docks_theme_api 1.0.2

data/source/utilities/media/media.scss

@@ -0,0 +1,172 @@
+//        ___          ___        _____                  ___
+//       /__/\        /  /\      /  /::\     ___        /  /\
+//      |  |::\      /  /:/_    /  /:/\:\   /  /\      /  /::\
+//      |  |:|:\    /  /:/ /\  /  /:/  \:\ /  /:/     /  /:/\:\
+//    __|__|:|\:\  /  /:/ /:/_/__/:/ \__\:/__/::\    /  /:/~/::\
+//   /__/::::| \:\/__/:/ /:/ /\  \:\ /  /:|__\/\:\__/__/:/ /:/\:\
+//   \  \:\~~\__\/\  \:\/:/ /:/\  \:\  /:/   \  \:\/\  \:\/:/__\/
+//    \  \:\       \  \::/ /:/  \  \:\/:/     \__\::/\  \::/
+//     \  \:\       \  \:\/:/    \  \::/      /__/:/  \  \:\
+//      \  \:\       \  \::/      \__\/       \__\/    \  \:\
+//       \__\/        \__\/                             \__\/
+
+
+
+$BREAKPOINTS: (
+  small: 25rem,
+  medium: 37.5rem,
+  large: 50rem
+);
+
+$BREAKPOINT_INCREMENTS: (
+  rem: 0.0625rem,
+  em: 0.0625em,
+  px: 1px,
+  vw: 1vw
+);
+
+
+
+@function breakpoint-value-for($breakpoint) {
+  @return map-get($BREAKPOINTS, $breakpoint);
+}
+
+@function breakpoint-clean-value($point) {
+  @if type-of($point) == number {
+    @return $point;
+  }
+
+  @return breakpoint-value-for($point);
+}
+
+@function breakpoint-increment-for($value) {
+  @return map-get($BREAKPOINT_INCREMENTS, unit($value));
+}
+
+@function breakpoint-default-inclusivity($value, $default) {
+  $inclusivity: null;
+  @if length($value) > 1 { $inclusivity: nth($value, 2); }
+
+  @if $inclusivity {
+    @return $inclusivity == inclusive;
+  } @else {
+    @return $default;
+  }
+}
+
+@function breakpoint-adjusted-for-inclusivity($value, $min-or-max, $inclusive: false) {
+  $value: breakpoint-clean-value($value);
+
+  @if not $inclusive {
+    @if $min-or-max == min {
+      $value: $value + breakpoint-increment-for($value);
+    } @else {
+      $value: $value - breakpoint-increment-for($value);
+    }
+  }
+
+  @return "(#{$min-or-max}-width: #{$value})";
+}
+
+@function breakpoint-retinize-media-query($media-query) {
+  @return "#{$media-query} and (-webkit-min-device-pixel-ratio: 2), #{$media-query} and (min-resolution: 192dpi)";
+}
+
+
+
+
+
+@mixin breakpoint-after($point) {
+  @media screen and #{breakpoint-adjusted-for-inclusivity($point, min)} {
+    @content;
+  }
+}
+
+@mixin after($point) { @include breakpoint-after($point) { @content; } }
+
+@mixin breakpoint-before($point) {
+  @media screen and #{breakpoint-adjusted-for-inclusivity($point, max)} {
+    @content;
+  }
+}
+
+@mixin before($point) { @include breakpoint-before($point) { @content; } }
+
+@mixin breakpoint($after: null, $before: null, $from: null, $to: null, $until: null, $retina: false) {
+  $min-width: null;
+  $max-width: null;
+  $min-inclusive: null;
+  $max-inclusive: null;
+
+  // $after defaults to exclusive
+  @if $after {
+    $min-width: nth($after, 1);
+    $min-inclusive: breakpoint-default-inclusivity($after, false);
+  }
+
+  // $from defaults to inclusive
+  @if $from {
+    $min-width: nth($from, 1);
+    $min-inclusive: breakpoint-default-inclusivity($from, true);
+  }
+
+  // $before defaults to exclusive
+  @if $before {
+    $max-width: nth($before, 1);
+    $max-inclusive: breakpoint-default-inclusivity($before, false);
+  }
+
+  // $to defaults to inclusive
+  @if $to {
+    $max-width: nth($to, 1);
+    $max-inclusive: breakpoint-default-inclusivity($to, true);
+  }
+
+  // $until defaults to exclusive
+  @if $until {
+    $max-width: nth($until, 1);
+    $max-inclusive: breakpoint-default-inclusivity($until, false);
+  }
+
+  @if $max-width { $max-width: breakpoint-adjusted-for-inclusivity($max-width, max, $max-inclusive); }
+  @if $min-width { $min-width: breakpoint-adjusted-for-inclusivity($min-width, min, $min-inclusive); }
+
+  $media-query: "screen";
+  @if $min-width { $media-query: $media-query + " and #{$min-width}"; }
+  @if $max-width { $media-query: $media-query + " and #{$max-width}"; }
+  @if $retina { $media-query: breakpoint-retinize-media-query($media-query); }
+
+  @media #{$media-query} {
+    @content;
+  }
+}
+
+
+
+@mixin print() {
+  @media print { @content; }
+}
+
+
+
+@mixin retina() {
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @content; }
+}
+
+
+
+@each $breakpoint, $width in $BREAKPOINTS {
+  .media__helpers--hide-before-#{$breakpoint} {
+    @include before($width) { display: none; }
+  }
+
+  .media__helpers--hide-after-#{$breakpoint} {
+    @include after($width) { display: none; }
+  }
+
+  .media__helpers--show-after-#{$breakpoint} {
+    display: none;
+
+    @include after($width) { display: block; }
+  }
+}

data/source/utilities/mixins/mixins.scss

@@ -0,0 +1,89 @@
+//        ___                  ___                   ___
+//       /__/\      ___       /__/|      ___        /__/\
+//      |  |::\    /  /\     |  |:|     /  /\       \  \:\
+//      |  |:|:\  /  /:/     |  |:|    /  /:/        \  \:\
+//    __|__|:|\:\/__/::\   __|__|:|   /__/::\    _____\__\:\
+//   /__/::::| \:\__\/\:\_/__/::::\___\__\/\:\__/__/::::::::\
+//   \  \:\~~\__\/  \  \:\/\ ~\~~\::::/  \  \:\/\  \:\~~\~~\/
+//    \  \:\         \__\::/  |~~|:|~~    \__\::/\  \:\  ~~~
+//     \  \:\        /__/:/   |  |:|      /__/:/  \  \:\
+//      \  \:\       \__\/    |  |:|      \__\/    \  \:\
+//       \__\/                |__|/                 \__\/
+//
+// Mixins are used to include common functionality in components.
+// Use these over placeholders even when no variables are required:
+// `@extends` is more trouble than it's worth, and proper compression
+// mostly solves the problem of duplicated markup from mixins.
+
+//    ___ ___ ___ ___ _      ___   __
+//   |   \_ _/ __| _ \ |    /_\ \ / /
+//   | |) | |\__ \  _/ |__ / _ \ V /
+//   |___/___|___/_| |____/_/ \_\_|
+//
+// =========================================================
+// Placeholders providing common display/ positioning patterns.
+
+@mixin composite-layer {
+  backface-visibility: hidden;
+}
+
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin center {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin cover-all {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+}
+
+@mixin remove-browser-styling {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+
+
+//    _____ ___  _   _  ___ _  _
+//   |_   _/ _ \| | | |/ __| || |
+//     | || (_) | |_| | (__| __ |
+//     |_| \___/ \___/ \___|_||_|
+//
+// ======================================================
+// Placeholders to help with touch devices.
+
+@mixin touch-scroll {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+
+
+//    _______   _____ ___
+//   |_   _\ \ / / _ \ __|
+//     | |  \ V /|  _/ _|
+//     |_|   |_| |_| |___|
+//
+// ======================================================
+// Placholders to add nice features to text content.
+
+@mixin word-wrap {
+  word-break: break-word;
+  hyphens: auto;
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

data/source/utilities/naming_convention/naming_convention.js

@@ -0,0 +1,3 @@
+var naming_convention = {};
+
+export { naming_convention };

data/source/utilities/naming_convention/package.json

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

data/source/utilities/numbers/numbers.js

@@ -0,0 +1,14 @@
+var Matrix, between;
+
+between = (point, min, max, options = {}) => {
+  var min_condition = options.include_min ? (point >= min) : (point > min),
+      max_condition = options.include_max ? (point <= max) : (point < max);
+  return min_condition && max_condition;
+};
+
+Matrix = (...args) => {
+  var MatrixClass = window.WebKitCSSMatrix || window.MSCSSMatrix || window.CSSMatrix;
+  return new MatrixClass(...args);
+};
+
+export { Matrix, between };

data/source/utilities/numbers/package.json

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

data/source/utilities/painting/package.json

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

data/source/utilities/painting/painting.js

@@ -0,0 +1,7 @@
+var force_repaint;
+
+force_repaint = (node = document) => {
+  return node.offsetHeight && node.offsetWidth;
+};
+
+export { force_repaint };

data/source/utilities/pattern/package.json

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

data/source/utilities/pattern/pattern.js

@@ -0,0 +1,50 @@
+var Pattern, pattern, result_types, find_variation;
+
+pattern = window.pattern;
+delete window.pattern;
+
+result_types = ["style", "script"];
+
+find_variation = (component, symbol) => {
+  var variation;
+
+  for(variation of (component.state || []).concat(component.variant || [])) {
+    if(symbol.include(variation.name)) { return variation; }
+  }
+};
+
+Pattern = {
+  find(symbol, options = {}) {
+    var result_type, result, variation, subcomponent;
+
+    if(!pattern) { return false; }
+
+    symbol = symbol.split(/\s+/);
+
+    for(result_type of result_types) {
+      for(result of pattern[result_type]) {
+        if(symbol.include(result.name)) { return result; }
+
+        if(options.search_variations || options.search_all) {
+          variation = find_variation(result, symbol);
+          if(variation) { return variation; }
+        }
+
+        if(options.search_subcomponents || options.search_all) {
+          for(subcomponent of (result.subcomponent || [])) {
+            if(symbol.include(subcomponent.name)) { return subcomponent; }
+
+            variation = find_variation(result, symbol);
+            if(variation) { return variation; }
+          }
+        }
+      }
+    }
+
+    return false;
+  },
+
+  __pattern__: pattern
+};
+
+export default Pattern;

data/source/utilities/query_string/package.json

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

data/source/utilities/query_string/query_string.js

@@ -0,0 +1,24 @@
+import query_string from "~vendor/query_string";
+
+var QueryString, location, query;
+
+location = () => { return window.location; };
+query = () => { return query_string.parse(location().search); };
+
+QueryString = {
+  get(key) {
+    return query()[key];
+  },
+
+  set(key, value) {
+    var current_query = query(),
+        new_url;
+
+    current_query[key] = value;
+    new_url = `${location.protocol}//${location.host}${location.pathname}?${query_string.stringify(query)}`;
+    window.history.replaceState({ path: new_url }, document.title, new_url);
+    return current_query;
+  }
+};
+
+export default QueryString;

data/source/utilities/template/package.json

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

data/source/utilities/template/template.js

@@ -0,0 +1,10 @@
+import Mustache from "mustache";
+
+var Template = {
+  render(template, binding) {
+    if(template.innerHTML) { template = template.innerHTML; }
+    Mustache.render(template, binding);
+  }
+};
+
+export default Template;

data/source/utilities/text_range/package.json

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

data/source/utilities/text_range/text_range.js

@@ -0,0 +1,30 @@
+var TextRange, select_all;
+
+TextRange = (target) => {
+  return {
+    select_all() { select_all(target); }
+  };
+};
+
+export default TextRange;
+
+select_all = (() => {
+  if(window.getSelection) {
+    return (target) => {
+      var selection, range;
+
+      selection = window.getSelection();
+      selection.removeAllRanges();
+
+      range = document.createRange();
+      range.selectNodeContents(target);
+      selection.addRange(range);
+    };
+  } else {
+    return (target) => {
+      var range = document.body.createTextRange();
+      range.moveToElementText(target);
+      range.select();
+    };
+  }
+})();

data/source/utilities/ui_events/package.json

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

data/source/utilities/ui_events/ui_events.js

@@ -0,0 +1,85 @@
+// TODO
+
+const DRAG_THRESHOLD = 5;
+
+var UIEvents, coordinates;
+
+coordinates = (event) => {
+  var touches = event.touches;
+
+  return {
+    x: touches ? touches[0].x : event.pageX,
+    y: touches ? touches[0].y : event.pageY
+  };
+};
+
+coordinates.distance_between = (before, after) => {
+  var delta_x = Math.abs(after.x - before.x),
+      delta_y = Math.abs(after.y - before.y);
+
+  return Math.sqrt(delta_x * delta_x + delta_y * delta_y);
+};
+
+UIEvents = {
+  get transition_end() {
+    var transitions, transition, element, event_name;
+
+    transitions = {
+      WebkitTransition: "webkitTransitionEnd",
+      MozTransition: "transitionend",
+      OTransition: "otransitionend",
+      transition: "transitionend"
+    };
+
+    element = document.createElement("div");
+    event_name = null;
+
+    for(transition in transitions) {
+      if(element.style[transition] !== undefined) {
+        event_name = transitions[transition];
+        break;
+      }
+    }
+
+    Object.defineProperty(UIEvents, "transition_end", { value: event_name });
+    return event_name;
+  },
+
+  drag: {
+    get start() { return "mousedown"; },
+    get move() { return "mousemove"; },
+    get end() { return "mouseup"; }
+  },
+
+  transition(node, callback) {
+    return new Promise((resolve) => {
+      var transition_end = this.transition_end;
+
+      if(transition_end) {
+        node.addEventListener(transition_end, resolve);
+        callback();
+      } else {
+        resolve();
+      }
+    });
+  },
+
+  add_drag_listeners(move_handler, end_handler) {
+    var { move, end } = this.drag;
+
+    document.addEventListener(move, move_handler);
+    document.addEventListener(end, end_handler);
+
+    return {
+      remove() {
+        document.removeEventListener(move, move_handler);
+        document.removeEventListener(end, end_handler);
+      }
+    };
+  },
+
+  coordinates,
+  DRAG_THRESHOLD
+};
+
+export default UIEvents;

data/source/utilities/variables/variables.scss

@@ -0,0 +1,18 @@
+//   __   ___   ___ ___   _   ___ _    ___ ___
+//   \ \ / /_\ | _ \_ _| /_\ | _ ) |  | __/ __|
+//    \ V / _ \|   /| | / _ \| _ \ |__| _|\__ \
+//     \_/_/ \_\_|_\___/_/ \_\___/____|___|___/
+//
+// =========================================================================================
+// =========================================================================================
+//
+// Use this stylesheet to declare site-wide variables. If you are declaring a default
+// property for a CSS value, use `_default.scss` instead. If you are declaring a
+// color, use `_color.scss` instead. If you are declaring a font size, use
+// `_font-sizes.scss` instead. If you are declaring a z-index, use `_z-index.scss`
+// instead. Functions, mixins, and placeholders should be included in their
+// respective stylesheets.
+
+
+
+$bouncy-transition: cubic-bezier(0.32, 1.44, 0.46, 0.99);

data/source/utilities/z_indexes/z-indexes.scss

@@ -0,0 +1,88 @@
+//        ___                     ___         _____         ___          ___
+//       /  /\       ___         /__/\       /  /::\       /  /\        /__/|
+//      /  /::|     /  /\        \  \:\     /  /:/\:\     /  /:/_      |  |:|
+//     /  /:/:|    /  /:/         \  \:\   /  /:/  \:\   /  /:/ /\     |  |:|
+//    /  /:/|:|__ /__/::\     _____\__\:\ /__/:/ \__\:| /  /:/ /:/_  __|__|:|
+//   /__/:/ |:| /\\__\/\:\__ /__/::::::::\\  \:\ /  /://__/:/ /:/ /\/__/::::\____
+//   \__\/  |:|/:/   \  \:\/\\  \:\~~\~~\/ \  \:\  /:/ \  \:\/:/ /:/   ~\~~\::::/
+//       |  |:/:/     \__\::/ \  \:\  ~~~   \  \:\/:/   \  \::/ /:/     |~~|:|~~
+//       |  |::/      /__/:/   \  \:\        \  \::/     \  \:\/:/      |  |:|
+//       |  |:/       \__\/     \  \:\        \__\/       \  \::/       |  |:|
+//       |__|/                   \__\/                     \__\/        |__|/
+//
+//*
+// @pattern Z-Index
+// @tagline Stack it up!
+// @group Helper
+//
+// `z-index` is managed in this centralized stylesheet to create a manageable
+// and self-documenting system. The process to add z-indexes is as follows:
+//
+// 1. For each stacking context (a set of elements for which you would like
+//    to maintain the stacking order), create a new map with a descriptive
+//    variable name.
+//
+// 2. Add entries to the map for each element that you would like to control the
+//    stacking context of. The delta between elements should not matter, only
+//    the numeric order. Elements with higher numbers will stack on top of
+//    elements with lower z-indexes.
+//
+// 3. `@include z-index` in your stylesheet with the name of the component you are
+//    setting z-index for and the map name defined in step 1.
+//
+// 4. Profit.
+
+
+
+$Z_INDEXES: (
+  global: (
+    content: 10,
+    sidebar: 20
+  ),
+
+  page: (
+    avatar: 10,
+    popover-resting: 20,
+    popover-deactivating: 30,
+    popover-active: 40
+  ),
+
+  avatar: (
+    initials: 10,
+    image: 20
+  ),
+
+  table: (
+    cell: 10,
+    cell-persistant: 20,
+    backdrop: 30
+  )
+);
+
+
+
+//*
+// This mixin creates a z-index declaration based on the element and context
+// passed in. The mixin will attempt to retrieve the `$context` as a key from
+// the global `$Z-INDEXES` map, and will then try to retrieve the `$element`
+// from that map. If this is successful, the z-index declaration is included.
+//
+// @param {String} $element - The element within the stacking context you are
+//                            adding the rule for.
+// @param {String} $context - The stacking context you want to search in for
+//                            `$element`.
+
+@mixin z-index($element, $context) {
+  $index: map-get(map-get($Z_INDEXES, $context), $element);
+
+  @if $index {
+    z-index: $index;
+  }
+}
+
+@function z-index-stacking-context($name, $stack-order) {
+  $new-stack-order: ( $name: $stack-order );
+  $Z_INDEXES: map-merge($Z_INDEXES, $new-stack-order);
+
+  @return true;
+}

data/source/vendor/array_includes.js

@@ -0,0 +1,28 @@
+if(![].includes) {
+  Array.prototype.includes = function(searchElement /*, fromIndex*/ ) {
+    'use strict';
+    var O = Object(this);
+    var len = parseInt(O.length) || 0;
+    if (len === 0) {
+      return false;
+    }
+    var n = parseInt(arguments[1]) || 0;
+    var k;
+    if (n >= 0) {
+      k = n;
+    } else {
+      k = len + n;
+      if (k < 0) {k = 0;}
+    }
+    var currentElement;
+    while (k < len) {
+      currentElement = O[k];
+      if (searchElement === currentElement ||
+         (searchElement !== searchElement && currentElement !== currentElement)) {
+        return true;
+      }
+      k++;
+    }
+    return false;
+  };
+}