strip out components into separate repo

src/scripts/components/color.js

@@ -1,107 +0,0 @@
-'use strict';
-
-var HTML = require('../vendor/minified/minified').HTML;
-
-module.exports = {
-  name: 'color',
-  template: require('../../templates/components/color.tpl'),
-  manipulator: require('../lib/manipulators').val,
-  defaults: {
-    label: ''
-  },
-  initialize: function() {
-    var self = this;
-
-    /* eslint-disable  comma-spacing, no-multi-spaces, max-len,
-        standard/array-bracket-even-spacing */
-    var layout = self.config.layout || [
-      [false    , false    , '#55FF00', '#AAFF55', false    , '#FFFF55', '#FFFFAA', false    , false    ],
-      [false    , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false    ],
-      ['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
-      ['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
-      [false    , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false    ],
-      ['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
-      ['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
-      [false    , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false    ],
-      [false    , false    , false    , '#AAAAFF', '#AA55FF', '#AA55AA', false    , false    , false    ]
-    ];
-    /* eslint-enable */
-
-    var grid = '';
-    var itemWidth = 100 / layout[0].length;
-    var itemHeight = 100 / layout.length;
-    var $elem = self.$element;
-
-    for (var i = 0; i < layout.length; i++) {
-      for (var j = 0; j < layout[i].length; j++) {
-
-        var color = layout[i][j] || 'transparent';
-        var selectable = (color !== 'transparent' ? ' selectable' : '');
-
-        var roundedTL = (i === 0 && j === 0) || i === 0 && !layout[i][j - 1] ||
-                        !layout[i][j - 1] && !layout[i - 1][j] ?
-          ' rounded-tl' :
-          '';
-
-        var roundedTR = i === 0 && !layout[i][j + 1] ||
-                        !layout[i][j + 1] && !layout[i - 1][j] ?
-          ' rounded-tr ' :
-          '';
-
-        var roundedBL = (i === layout.length - 1 && j === 0) ||
-                        i === layout.length - 1 && !layout[i][j - 1] ||
-                        !layout[i][j - 1] && !layout[i + 1][j] ?
-          ' rounded-bl' :
-          '';
-
-        var roundedBR = i === layout.length - 1 && !layout[i][j + 1] ||
-                        !layout[i][j + 1] && !layout[i + 1][j] ?
-          ' rounded-br' :
-          '';
-
-        grid += '<i ' +
-          'class="color-box ' + selectable + roundedTL + roundedTR + roundedBL +
-              roundedBR + '" ' +
-          'data-value="' + color.replace(/^#/, '0x').toLowerCase() + '" ' +
-          'style="' +
-            'width:' + itemWidth + '%; ' +
-            'height:' + itemHeight + '%; ' +
-            'background:' + color + ';">' +
-        '</i>';
-      }
-    }
-
-    $elem.select('.color-box-container').add(HTML(grid));
-
-    var $valueDisplay = $elem.select('.value');
-    var $picker = $elem.select('.picker-wrap');
-    var disabled = self.$manipulatorTarget.get('disabled');
-
-    $elem.on('click', function(ev) {
-      if (!disabled) {
-        $picker.set('show');
-      }
-    });
-
-    self.on('change', function() {
-      var value = self.get().replace(/^0x/, '').toLowerCase();
-      $valueDisplay.set('$background-color', '#' + value);
-      $elem.select('.color-box').set('-selected');
-      $elem.select('.color-box[data-value="0x' + value + '"]').set('+selected');
-    });
-
-    $elem.select('.color-box.selectable').on('click', function(ev) {
-      self.set(ev.target.dataset.value);
-      $picker.set('-show');
-    });
-
-    self.on('disabled', function() {
-      disabled = true;
-    });
-
-    self.on('enabled', function() {
-      disabled = false;
-    });
-
-  }
-};

src/scripts/components/footer.js

@@ -1,10 +0,0 @@
-'use strict';
-
-module.exports = {
-  name: 'footer',
-  template: require('../../templates/components/footer.tpl'),
-  manipulator: require('../lib/manipulators').html,
-  defaults: {
-    attributes: {}
-  }
-};

src/scripts/components/heading.js

@@ -1,11 +0,0 @@
-'use strict';
-
-module.exports = {
-  name: 'heading',
-  template: require('../../templates/components/heading.tpl'),
-  manipulator: require('../lib/manipulators').html,
-  defaults: {
-    attributes: {},
-    size: 4
-  }
-};

src/scripts/components/input.js

@@ -1,11 +0,0 @@
-'use strict';
-
-module.exports = {
-  name: 'input',
-  template: require('../../templates/components/input.tpl'),
-  manipulator: require('../lib/manipulators').val,
-  defaults: {
-    label: '',
-    attributes: {}
-  }
-};

src/scripts/components/select.js

@@ -1,21 +0,0 @@
-'use strict';
-
-module.exports = {
-  name: 'select',
-  template: require('../../templates/components/select.tpl'),
-  manipulator: require('../lib/manipulators').val,
-  defaults: {
-    label: '',
-    options: []
-  },
-  initialize: function() {
-    var self = this;
-
-    var $value = self.$element.select('.value');
-
-    self.on('change', function(ev) {
-      var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
-      $value.set('innerHTML', value);
-    });
-  }
-};

src/scripts/components/submit.js

@@ -1,10 +0,0 @@
-'use strict';
-
-module.exports = {
-  name: 'submit',
-  template: require('../../templates/components/submit.tpl'),
-  manipulator: require('../lib/manipulators').val,
-  defaults: {
-    attributes: {}
-  }
-};

src/scripts/components/text.js

@@ -1,10 +0,0 @@
-'use strict';
-
-module.exports = {
-  name: 'text',
-  template: require('../../templates/components/text.tpl'),
-  manipulator: require('../lib/manipulators').html,
-  defaults: {
-    attributes: {}
-  }
-};

src/scripts/components/toggle.js

@@ -1,10 +0,0 @@
-'use strict';
-
-module.exports = {
-  name: 'toggle',
-  template: require('../../templates/components/toggle.tpl'),
-  manipulator: require('../lib/manipulators').checked,
-  defaults: {
-    attributes: {}
-  }
-};

src/scripts/config-page.js

@@ -15,14 +15,14 @@ var clayConfig = new ClayConfig(settings, config, $mainForm);
 clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() {
 
   // register components here
-  this.registerComponent(require('./components/heading'));
-  this.registerComponent(require('./components/text'));
-  this.registerComponent(require('./components/footer'));
-  this.registerComponent(require('./components/input'));
-  this.registerComponent(require('./components/color'));
-  this.registerComponent(require('./components/select'));
-  this.registerComponent(require('./components/toggle'));
-  this.registerComponent(require('./components/submit'));
+  this.registerComponent(require('pebble-clay-components/dist/components/heading'));
+  this.registerComponent(require('pebble-clay-components/dist/components/text'));
+  this.registerComponent(require('pebble-clay-components/dist/components/footer'));
+  this.registerComponent(require('pebble-clay-components/dist/components/input'));
+  this.registerComponent(require('pebble-clay-components/dist/components/color'));
+  this.registerComponent(require('pebble-clay-components/dist/components/select'));
+  this.registerComponent(require('pebble-clay-components/dist/components/toggle'));
+  this.registerComponent(require('pebble-clay-components/dist/components/submit'));
 });
 
 clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() {

src/scripts/lib/clay-config.js

@@ -19,6 +19,7 @@ var ClayItem = require('./clay-item');
 var utils = require('../lib/utils');
 var ClayEvents = require('./clay-events');
 var componentStore = require('./component-registry');
+var manipulators = require('./manipulators');
 
 /**
  * @extends ClayEvents
@@ -154,20 +155,8 @@ function ClayConfig(settings, config, $rootContainer) {
     return _settings;
   };
 
-  /**
-   * Register a component to Clay. This must be called prior to .build();
-   * @param {{}} component - the clay component to register
-   * @param {string} component.name - the name of the component
-   * @param {string} component.template - HTML template to use for the component
-   * @param {{}} component.manipulator - methods to attach to the component
-   * @param {function} component.manipulator.set - set manipulator method
-   * @param {function} component.manipulator.get - get manipulator method
-   * @param {{}} component.defaults - template defaults
-   * @param {function} [component.initialize] - method to scaffold the component
-   */
-  self.registerComponent = function(component) {
-    componentStore[component.name] = component;
-  };
+  // @todo maybe don't do this and force the static method
+  self.registerComponent = ClayConfig.registerComponent;
 
   /**
    * Build the config page. This must be run before any of the get methods can be run
@@ -189,4 +178,23 @@ function ClayConfig(settings, config, $rootContainer) {
 
 }
 
+/**
+ * Register a component to Clay. This must be called prior to .build();
+ * @param {{}} component - the clay component to register
+ * @param {string} component.name - the name of the component
+ * @param {string} component.template - HTML template to use for the component
+ * @param {string|{}} component.manipulator - methods to attach to the component
+ * @param {function} component.manipulator.set - set manipulator method
+ * @param {function} component.manipulator.get - get manipulator method
+ * @param {{}} component.defaults - template defaults
+ * @param {function} [component.initialize] - method to scaffold the component
+ */
+ClayConfig.registerComponent = function(component) {
+  var _component = _.copyObj(component);
+  if (typeof _component.manipulator === 'string') {
+    _component.manipulator = manipulators[component.manipulator];
+  }
+  componentStore[_component.name] = _component;
+};
+
 module.exports = ClayConfig;

src/scripts/lib/clay-item.js

@@ -14,14 +14,14 @@ var ClayEvents = require('./clay-events');
 function ClayItem(config) {
   var self = this;
 
-  var _itemType = componentRegistry[config.type];
+  var _component = componentRegistry[config.type];
 
-  if (!_itemType) {
+  if (!_component) {
     throw new Error('the component: ' + config.type + ' is not registered. ' +
                     'Make sure to register it with ClayConfig.registerComponent()');
   }
 
-  var _templateData = _.extend({}, _itemType.defaults, config);
+  var _templateData = _.extend({}, _component.defaults, config);
 
   /** @type {string|null} */
   self.id = config.id || null;
@@ -33,7 +33,7 @@ function ClayItem(config) {
   self.config = config;
 
   /** @type {M} */
-  self.$element = HTML(_.formatHtml(_itemType.template, _templateData));
+  self.$element = HTML(_.formatHtml(_component.template, _templateData));
 
   /** @type {M} */
   self.$manipulatorTarget = self.$element.select('[data-manipulator-target]');
@@ -48,8 +48,8 @@ function ClayItem(config) {
    * @returns {ClayItem}
    */
   self.initialize = function() {
-    if (typeof _itemType.initialize === 'function') {
-      _itemType.initialize.apply(self, arguments);
+    if (typeof _component.initialize === 'function') {
+      _component.initialize.apply(self, arguments);
     }
     return self;
   };
@@ -58,7 +58,7 @@ function ClayItem(config) {
   ClayEvents.call(self, self.$manipulatorTarget);
 
   // attach the manipulator methods to the clayItem
-  _.eachObj(_itemType.manipulator, function(methodName, method) {
+  _.eachObj(_component.manipulator, function(methodName, method) {
     self[methodName] = method.bind(self);
   });
 

src/styles/config-page.scss

@@ -3,9 +3,3 @@
 @import "partials/reset";
 @import "fonts";
 @import "base";
-
-@import "items/color";
-@import "items/toggle";
-@import "items/input";
-@import "items/select";
-@import "items/button";

src/styles/items/_button.scss

@@ -1,61 +0,0 @@
-@import "../partials/vars";
-
-.item-button {
-}
-
-
-button,
-.button {
-  @include font-pfdin(medium);
-  text-transform: uppercase;
-  background-color: $color-gray-4;
-  border-radius: $border-radius;
-  font-size: 1rem;
-  line-height: 1;
-  border: none;
-  display: block;
-
-  color: $color-white;
-  min-width: 12rem;
-  text-align: center;
-  margin: 0 auto;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-
-  padding: $button-padding;
-
-  .platform-ios & {
-    padding: $button-padding-ios;
-  }
-
-  &:disabled {
-    background-color: $color-gray-3;
-    color: $color-gray-8;
-  }
-
-  &:not(:disabled):active {
-    background-color: $color-gray-8;
-  }
-
-  &.orange, &[type="submit"] {
-    background-color: $color-orange;
-
-    &:disabled {
-      background-color: $color-orange-dark;
-      color: $color-gray-3;
-    }
-
-    &:not(:disabled):active {
-      background-color: $color-red;
-    }
-  }
-
-  &.light-grey {
-    background-color: $color-gray-5;
-  }
-
-}
-
-a.button {
-  text-decoration: none;
-  color: $color-white;
-}

src/styles/items/_color.scss

@@ -1,91 +0,0 @@
-@import "../partials/vars";
-
-.item-color {
-
-  .value {
-    width: $small-component-width;
-    height: $base-height;
-    border-radius: $base-height / 2;
-    box-shadow: $box-shadow-small-components;
-  }
-
-  input:disabled ~ .value,
-  input:disabled ~ .label {
-    opacity: 0.25;
-  }
-
-  .picker-wrap {
-    left: 0;
-    top: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    position: fixed;
-    padding: 1rem;
-    background: rgba(0,0,0,0.7);
-    opacity: 0;
-    transition: opacity 70ms ease-in 175ms;
-    pointer-events: none;
-    z-index: 100;
-
-    .picker {
-      padding: 1rem;
-      background: $color-gray-11;
-      border-radius: $border-radius;
-    }
-
-    &.show {
-      transition-delay: 0ms;
-      pointer-events: auto;
-      opacity: 1;
-    }
-  }
-
-  .color-box-wrap {
-    box-sizing: border-box;
-    position: relative;
-    height: 0;
-    width: 100%;
-    padding: 0 0 100% 0; // overridden with inline style
-    margin: 0.6em 0 0em;
-
-    .color-box-container {
-      position: absolute;
-      height: 99.97%;
-      width: 100%;
-      left: 0;
-      top: 0;
-
-      .color-box {
-        float:left;
-        cursor: pointer;
-        -webkit-tap-highlight-color: rgba(0,0,0,0);
-
-        &.rounded-tl {
-          border-top-left-radius: $border-radius;
-        }
-
-        &.rounded-tr {
-          border-top-right-radius: $border-radius;
-        }
-
-        &.rounded-bl {
-          border-bottom-left-radius: $border-radius;
-        }
-
-        &.rounded-br {
-          border-bottom-right-radius: $border-radius;
-        }
-
-        &.selected {
-          transform: scale(1.15);
-          border-radius: $border-radius;
-          box-shadow: #111 0 0 0.24rem;
-          position: relative;
-          z-index: 100;
-        }
-      }
-
-    }
-  }
-}

src/styles/items/_input.scss

@@ -1,43 +0,0 @@
-@import "../partials/vars";
-@import "../partials/mixins";
-
-
-.item-input {
-
-  display: block;
-
-  .label {
-    padding-bottom: $item-spacing-v;
-  }
-
-  .input {
-    position: relative;
-    min-width: 100%;
-    margin-top: $item-spacing-v;
-    margin-left: 0;
-  }
-
-  input {
-    display:block;
-    width: 100%;
-    background: $color-gray-2;
-    border-radius: $border-radius;
-    padding: $item-spacing-v / 2 $item-spacing-h / 2;
-    border: none;
-    vertical-align: baseline;
-    color: $color-white;
-    font-size: inherit;
-
-    @include placeholder {
-      color: $color-gray-8;
-    }
-
-    &:focus {
-      @include placeholder {
-        color: $color-gray-6;
-      }
-      border: none;
-      box-shadow: none ;
-    }
-  }
-}

src/styles/items/_select.scss

@@ -1,36 +0,0 @@
-@import "../vendor/bourbon/bourbon";
-@import "../partials/vars";
-
-.item-select {
-  position: relative;
-
-  .value {
-    $triangle-size: 0.85rem;
-    position: relative;
-    padding-right: $triangle-size + 0.25rem;
-
-    &:after {
-      content: "";
-      position: absolute;
-      right: 0;
-      top: 50%;
-      margin-top: -0.1rem;
-      @include triangle($triangle-size, $color-gray-10, down);
-    }
-  }
-
-  select {
-    opacity: 0;
-    position: absolute;
-    display: block;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: #000;
-    width: 100%;
-    border: none;
-    margin:0;
-    padding:0;
-  }
-}

src/styles/items/_toggle.scss

@@ -1,51 +0,0 @@
-@import "../partials/vars";
-
-.item-toggle {
-
-  $slide-height: $base-height * 0.75;
-  $slide-width: $small-component-width;
-  $marker-diameter: $base-height;
-
-  input {
-    display: none; // @todo make sure this doesnt mess up interactivity on iOS
-  }
-
-  .graphic {
-    display: inline-block;
-    position: relative;
-
-    .slide {
-      display:block;
-      border-radius: $slide-height;
-      height: $slide-height;
-      width: $slide-width;
-      background: $color-gray-1;
-      transition: background-color 150ms linear;
-    }
-
-    .marker {
-      background: $color-gray-10;
-      width: $marker-diameter;
-      height: $marker-diameter;
-      border-radius: $marker-diameter;
-      position: absolute;
-      left: 0;
-      display: block;
-      top: ($marker-diameter - $slide-height) / 2 * -1;
-      transition: transform 150ms linear;
-      box-shadow: $box-shadow-small-components;
-    }
-  }
-
-  input:checked + .graphic {
-    .slide {
-      background: $color-orange-dark;
-    }
-
-    .marker {
-      background: $color-orange;
-      transform: translateX($slide-width - $marker-diameter);
-    }
-  }
-
-}

src/templates/components/color.tpl

@@ -1,15 +0,0 @@
-<label class="item item-color">
-  <input
-    data-manipulator-target
-    type="hidden"
-  />
-  <span class="label">{{{label}}}</span>
-  <span class="value"></span>
-  <div class="picker-wrap">
-    <div class="picker">
-      <div class="color-box-wrap">
-        <div class="color-box-container"></div>
-      </div>
-    </div>
-  </div>
-</label>

src/templates/components/footer.tpl

@@ -1,6 +0,0 @@
-<div
-  data-manipulator-target
-  class="item-container-footer"
-  {{each attributes}} {{this.key}}="{{this.value}}" {{/each}}
->
-</div>

src/templates/components/heading.tpl

@@ -1,3 +0,0 @@
-<div class="item item-heading">
-  <h{{size}} data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h{{size}}>
-</div>

src/templates/components/input.tpl

@@ -1,9 +0,0 @@
-<label class="item item-input">
-  <span class="label">{{{label}}}</span>
-  <span class="input">
-    <input
-      data-manipulator-target
-      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
-    />
-  </span>
-</label>

src/templates/components/select.tpl

@@ -1,9 +0,0 @@
-<label class="item item-select">
-  <span class="label">{{{label}}}</span>
-  <span class="value"></span>
-  <select data-manipulator-target>
-    {{each options}}
-      <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
-    {{/each}}
-  </select>
-</label>

src/templates/components/submit.tpl

@@ -1,9 +0,0 @@
-<div class="item item-button">
-  <button
-    data-manipulator-target
-    type="submit"
-    {{each key: attributes}}{{key}}="{{this}}"{{/each}}
-  >
-    {{{label}}}
-  </button>
-</div>

src/templates/components/text.tpl

@@ -1,3 +0,0 @@
-<div class="item item-text">
-  <p data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></p>
-</div>

src/templates/components/toggle.tpl

@@ -1,14 +0,0 @@
-<label class="item item-toggle">
-  <span class="label">{{{label}}}</span>
-  <span class="input">
-    <input
-      data-manipulator-target
-      type="checkbox"
-      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
-    />
-    <span class="graphic">
-      <span class="slide"></span>
-      <span class="marker"></span>
-    </span>
-  </span>
-</label>