vhx-quartz 0.7.7 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8eec831f6138878d95e096eb959bdbe794ba965c
-  data.tar.gz: e0c94e69da470b261956485877d2422f887fdd46
+  metadata.gz: 2b4bb1572cbf11cb2eb356800c80868f88c8bd07
+  data.tar.gz: 72bde5df5ebf2b1e7bacb69ce3f86ab905fc9308
 SHA512:
-  metadata.gz: 172cbf0d96d01b49c4051af6e7d846ba0190f643a0a946c1225283c52d4d8022f52def4357c278a7c8eba5235c78f37fcd2e3bbdb37cd75ee8a89a6da12cf332
-  data.tar.gz: 66ae4f4d5c840702f96de35b94d76687e187d35107e754d7ee930b8ac2d237de9cb18e6057769ac7090b21764b93c5f4a250aae8d4d5e399c5eca1f2118e2136
+  metadata.gz: baa502bb4c136ab3468f094f249c2f856655f1a4f0b6509f732a0f542ab93bd7f277def0ec136acd05fa1f6c7fc1c9e390d3aa5cd3af45ade99118e870ef47a4
+  data.tar.gz: 1b5a6a51e42760b95eb0f0ea86432a0876b4708f4d71c4af153dbf33c13874eafb78c31025adae3f10027b5ac2b9c89a9520f41f966f529e9cf3f130a7aeadae

data/lib/vhx/quartz/version.rb

@@ -1,5 +1,5 @@
 module Vhx
   module Quartz
-    VERSION = "0.7.7"
+    VERSION = "0.8.0"
   end
 end

data/vendor/assets/javascripts/vhx-quartz.autosuggest.js

@@ -0,0 +1,266 @@
+vhxm.components.shared.autosuggest.controller = function(opts) {
+  var self = this;
+
+  self.timeout = null;
+
+  self.init = function() {
+    self.state = new vhxm.components.shared.autosuggest.state();
+    self.model = new vhxm.components.shared.autosuggest.model();
+
+    self.model.items(null);
+    self.state.selected(null);
+
+    if (opts.focusonready) {
+      self.state.hasFocus(true);
+    }
+
+    if (opts.suggestonready) {
+      self.fetchResults('');
+    }
+
+    $(document).on('click', function(event) {
+      var is_list = $(event.target).closest('.c-autosuggest--container').length;
+
+      if (!is_list && self.state.hasFocus()) {
+        m.startComputation();
+        self.state.hasFocus(false);
+        self.model.items(null);
+        m.endComputation();
+      }
+    });
+  };
+
+  self.isListOpen = function() {
+    return self.model.items() && self.state.hasFocus();
+  };
+
+  self.fetchResults = function(query) {
+    self.state.highlightIndex(0);
+
+    m.startComputation();
+    if (opts.data()) {
+      var result = [];
+      opts.data().map(function(item) {
+        var query_clean = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+        if (item.toLowerCase().match(query_clean.toLowerCase())) {
+          result.push(item);
+        }
+      });
+      self.model.items(result.length ? result : null);
+      m.endComputation();
+      return;
+    }
+
+    if (opts.search) {
+      opts.search(query, function(data) {
+        self.model.items(data.length ? data : null);
+        m.endComputation();
+      });
+    }
+  };
+
+  self.handleKeydown = function(e) {
+    var container = $(e.target).closest('.c-select--container').find('.c-select--options');
+
+    // Down Arrow
+    if (e.keyCode === 40) {
+      self.state.hasFocus(true);
+      self.setHighlightedState('down', container);
+      e.preventDefault();
+    }
+    // Up Arrow
+    else if (e.keyCode === 38) {
+      self.state.hasFocus(true);
+      self.setHighlightedState('up', container);
+      e.preventDefault();
+    }
+    // Enter/Return
+    else if (e.keyCode === 13 && self.isListOpen()) {
+      if (self.model.items()) {
+        self.state.selected(self.model.items()[self.state.highlightIndex()]);
+        opts.onselect(self.state.selected(), true);
+      }
+
+      self.state.hasFocus(false);
+      self.model.items(null);
+      e.preventDefault();
+    }
+  };
+
+  self.handleClick = function(event) {
+    event.preventDefault();
+    self.state.hasFocus(true);
+  };
+
+  self.handleInput = function(event) {
+    event.preventDefault();
+    self.state.hasFocus(true);
+    self.state.selected(event.target.value);
+    opts.onselect(self.state.selected(), false);
+    self.debounceSearch(event);
+  };
+
+  self.setHighlightedState = function(direction, container) {
+    if (self.model.items()) {
+      if (direction === 'down') {
+        self.state.highlightIndex(self.state.highlightIndex() + 1);
+        if (self.state.highlightIndex() < self.model.items().length) {
+          self.state.scrollIndex(self.state.scrollIndex() + 1);
+        }
+        else {
+          self.state.highlightIndex(self.model.items().length - 1);
+        }
+      }
+      else if (direction === 'up') {
+        self.state.highlightIndex(self.state.highlightIndex() - 1);
+        if (self.state.highlightIndex() > 0) {
+          self.state.scrollIndex(self.state.scrollIndex() - 1);
+        }
+        else {
+          self.state.highlightIndex(0);
+        }
+      }
+      self.scrollOptionsList(container);
+    }
+  };
+
+  self.scrollOptionsList = function(container) {
+    if (container.length) {
+      container.eq(0).scrollTop(self.state.optionHeight() * self.state.highlightIndex());
+    }
+  };
+
+  self.debounceSearch = function(event) {
+    if (self.timeout) {
+      clearTimeout(self.timeout);
+    }
+
+    self.timeout = setTimeout(function() {
+      self.fetchResults(event.target.value);
+      self.timeout = null;
+    }, 300);
+  };
+
+  if (opts.init) {
+    self.init();
+  }
+};
+
+vhxm.components.shared.autosuggest.model = function() {
+  this.items = m.prop([]);
+};
+
+vhxm.components.shared.autosuggest.state = function() {
+  this.selected = m.prop({});
+  this.highlighted = m.prop({});
+  this.highlightIndex = m.prop(null);
+  this.scrollIndex = m.prop(0);
+  this.optionHeight = m.prop(0);
+  this.optionsHeight = m.prop(0);
+  this.hasFocus = m.prop(false);
+};
+
+vhxm.components.shared.autosuggest.ui.container = {
+  controller: function(opts) {
+    opts.init = true;
+    return new vhxm.components.shared.autosuggest.controller(opts);
+  },
+  view: function(ctrl, opts) {
+    if (opts.reset()) {
+      ctrl.state.selected(null);
+      opts.reset(false);
+    }
+    return m('.c-autosuggest--container.form', {
+        onkeydown: ctrl.handleKeydown,
+        onclick: ctrl.handleClick,
+      }, [
+      m('.c-autosuggest--input-container', [
+        m('input.c-autosuggest--search', {
+          config: function(el) {
+            if (ctrl.state.hasFocus()) {
+              setTimeout(function() {
+                el.focus();
+              }, 10);
+            }
+          },
+          autocomplete: 'off',
+          name: opts.name ? opts.name : null,
+          type: 'text',
+          value: ctrl.state.selected(),
+          placeholder: opts.placeholder ? opts.placeholder : '',
+          oninput: ctrl.handleInput
+        })
+      ]),
+      m('.c-autosuggest--list' + (ctrl.isListOpen() ? '.is-open' : ''), [
+        m.component(vhxm.components.shared.autosuggest.ui.list.container, opts, ctrl),
+      ])
+    ]);
+  }
+};
+
+m.component(vhxm.components.shared.autosuggest.ui.container, {
+  name: 'auto_suggest',
+  placeholder: 'Enter name',
+  data: m.prop(['This', 'That', 'Those', 'Some', 'More', 'Left', 'Right']),
+  focusonready: true,
+  reset: m.prop(false),
+  onselect: function(selected) {
+    // handle event
+  }
+});
+vhxm.components.shared.autosuggest.ui.list.controller = function(opts, parent) {
+  let self = this;
+
+  self.parent = new vhxm.components.shared.autosuggest.controller(opts);
+  self.state = parent.state;
+  self.model = parent.model;
+
+  self.hasItems = function() {
+    return self.model.items() && self.model.items().length > 1;
+  };
+
+  self.handleItemClick = function(event, item) {
+    self.state.selected(item);
+    self.state.highlightIndex(-1);
+
+    if (opts.onselect) {
+      opts.onselect(self.state.selected(), true);
+    }
+    self.state.hasFocus(false);
+    self.model.items(null);
+    self.parent.scrollOptionsList(0);
+  };
+
+};
+
+/* ................................................
+  Select List Component
+.................................................*/
+vhxm.components.shared.autosuggest.ui.list.container = {
+  controller: function(opts, parent) {
+    return new vhxm.components.shared.autosuggest.ui.list.controller(opts, parent);
+  },
+  view: function(ctrl) {
+    return m('ul.c-autosuggest--options.margin-left-reset', {
+      config: function(el) {
+        ctrl.state.optionsHeight($(el).outerHeight());
+      }
+    }, [
+      ctrl.model.items() ?
+        ctrl.model.items().map(function(item, index) {
+          return m('li.c-autosuggest--option.padding-horizontal-medium.padding-horz-medium.padding-vert-small.padding-vertical-small' + (index === ctrl.state.highlightIndex() ? '.is-selected' : ''), {
+            config: function(el) {
+              ctrl.state.optionHeight($(el).outerHeight());
+            },
+            onmouseover: function() {
+              ctrl.state.highlightIndex(index);
+            },
+            onclick: function(event) {
+              ctrl.handleItemClick(event, item);
+            }
+          }, item);
+        })
+      : ''
+    ]);
+  }
+};

data/vendor/assets/javascripts/vhx-quartz.checkbox.js

@@ -0,0 +1,46 @@
+vhxm.components.shared.checkbox.ui.container = {
+  view: function(ctrl, opts) {
+    return m('fieldset.checkbox.' + (opts.size ? opts.size : 'medium') + (opts.type === 'toggle' ? '.alt' : ''), [
+      m('input[type=checkbox]', {
+        checked: opts.checked,
+        name: opts.name,
+        onchange: opts.onchange,
+        id: opts.name
+      }),
+      m('label', {
+        for: opts.name
+      }, [
+      opts.type === 'toggle' ?
+        m('span.checkbox--contain', [
+          m('span.checkbox--icon'),
+          m('span.checkbox--circle', [
+            m('i.circle-top', m.trust('<span></span>')),
+            m('i.circle-bottom', m.trust('<span></span>'))
+          ]),
+          m('span.checkbox--label')
+        ]) :
+        m('span.checkbox--contain', [
+          m('span.checkbox--icon', [
+            m('span.checkbox-animate')
+          ]),
+          opts.label ?
+          m('span.checkbox--label', opts.label) : ''
+        ])
+      ])
+    ]);
+  }
+};
+// standard checkbox
+m.component(vhxm.components.shared.checkbox.ui.container, {
+  name: 'standard',
+  checked: true,
+  size: 'medium'
+});
+
+// toggle checkbox
+m.component(vhxm.components.shared.checkbox.ui.container, {
+  name: 'toggle',
+  type: 'toggle',
+  checked: true,
+  size: 'medium'
+});

data/vendor/assets/javascripts/vhx-quartz.filter.js

@@ -0,0 +1,254 @@
+// Example Filter Component
+
+m.component(vhxm.components.shared.filter.container, {
+  label: 'Customize this table',
+  api: vhxm.component.name.state.filterApi,
+  filters: [
+    'date',
+    'location',
+    {
+      type: 'test',
+      title: 'Test',
+      template: {
+        view: function() {
+          // custom filter template
+        }
+      }
+    }
+  ]
+});
+vhxm.components.shared.filter.constants = Object.freeze({
+  date: {
+    title: 'Date'
+  },
+  location: {
+    title: 'Location'
+  }
+});
+vhxm.components.shared.filter.controller = function(opts) {
+  let self = this;
+
+  self.init = function() {
+    self.state = new vhxm.components.shared.filter.state();
+    self.model = new vhxm.components.shared.filter.model();
+
+    if (opts.api) {
+      opts.api({
+        state: self.state,
+        model: self.model,
+        removeFilter: self.removeFilter,
+        addFilter: self.addFilter,
+      });
+    }
+  };
+
+  self.handleFilterClick = function(event, name) {
+    event.preventDefault();
+
+    let state = self.state.dropdown.filtersOpen().indexOf(name);
+
+    if (state === -1) {
+      self.state.dropdown.filtersOpen().push(name);
+    }
+    else {
+      self.state.dropdown.filtersOpen().splice(state, 1);
+    }
+  };
+
+  self.handleApplyClick = function(event) {
+    event.preventDefault();
+
+    let state = self.state.dropdown.isOpen() ? false : true;
+
+    if (!state && self.state.selected().length) {
+      self.applyFilter();
+    }
+
+    self.state.dropdown.isOpen(state);
+  };
+
+  self.handleFilterRemoveClick = function(filter) {
+    self.removeFilter(filter, function() {
+      self.applyFilter();
+    });
+  };
+
+  self.applyFilter = function() {
+    self.state.applied(true);
+    if (opts.filterHandler) {
+      opts.filterHandler(self.state.selected(), function() {});
+    }
+  };
+
+  self.removeFilter = function(filter, callback) {
+    self.state.selected().filter(function(item, index) {
+      if (item.value === filter.value) {
+        self.state.selected().splice(item, 1);
+      }
+    });
+
+    if (callback) {
+      callback();
+    }
+  };
+
+  self.addFilter = function(filter, type) {
+    self.state.selected().push({
+      type: type,
+      label: filter.label,
+      value: filter.value
+    });
+  };
+
+  if (opts && opts.init) {
+    self.init();
+  }
+};
+vhxm.components.shared.filter.model = function() {
+};
+
+vhxm.components.shared.filter.state = function() {
+  this.selected = m.prop([]);
+  this.applied = m.prop(false);
+  this.available = m.prop(null);
+  this.dropdown = {
+    isOpen: m.prop(false),
+    filtersOpen: m.prop([])
+  };
+};
+
+vhxm.components.shared.filter.ui.container = {
+  controller: function(opts) {
+    opts.init = true;
+    return new vhxm.components.shared.filter.controller(opts);
+  },
+  view: function(ctrl, opts) {
+    let ready_to_apply = ctrl.state.dropdown.isOpen() && ctrl.state.selected() && ctrl.state.selected().length;
+
+    return m('.c-filter--container.dropdown.dropdown--large' + (ctrl.state.dropdown.isOpen() ? '.is-open' : ''), [
+      m('div.row', [
+        m('.column.small-3.padding-reset', [
+          m('a.c-filter--trigger.block.radius.head-5.text--gray' +
+            (ready_to_apply ? '.text-center' : ('.icon--right.icon-' + (ctrl.state.dropdown.isOpen() ? 'x-navy' : 'chevron-down-gray') + '.icon--xxsmall.margin-right-medium.fill-width')), {
+            onclick: ctrl.handleApplyClick
+          }, ready_to_apply ? 'Apply' : 'Filters'),
+          m.component(vhxm.components.shared.filter.ui.dropdown, opts, ctrl)
+        ]),
+        m('.column.small-13.padding-reset', [
+          m('.margin-left-small.padding-left-medium.border-left', [
+            ctrl.state.applied() && ctrl.state.selected().length ?
+            m.component(vhxm.components.shared.filter.ui.applied, opts, ctrl) : m('span.c-filter--label', opts.label ? opts.label : '')
+          ])
+        ])
+      ])
+    ]);
+  }
+};
+
+vhxm.components.shared.filter.ui.applied = {
+  controller: function(opts, parent_ctrl) {
+    return parent_ctrl;
+  },
+  view: function(ctrl) {
+    return m('div', [
+      ctrl.state.selected().map(function(item) {
+        return m('a.c-filter--applied.icon--right.icon-x-navy.icon--xxsmall', {
+          href: '#',
+          onclick: function(event) {
+            event.preventDefault();
+            ctrl.handleFilterRemoveClick(item);
+          }
+        }, item.label);
+      })
+    ]);
+  }
+};
+
+vhxm.components.shared.filter.ui.dropdown = {
+  controller: function(opts, parent_ctrl) {
+    return parent_ctrl;
+  },
+  view: function(ctrl, opts) {
+    return m('.c-filter--dropdown.dropdown-list', [
+      m('ul.padding-reset', [
+        opts.filters.map(function(item) {
+          if (typeof(item) === 'string' && vhxm.components.shared.filter.ui[item]) {
+            return m('li.border-bottom', [
+              m('a.c-filter--item.head-5.fill-width.icon--right.icon-chevron-' + (ctrl.state.dropdown.filtersOpen().indexOf(item) >= 0 ? 'up' : 'down') + '-navy.icon--xxsmall', {
+                href: '#',
+                onclick: function(event) {
+                  ctrl.handleFilterClick(event, item);
+                }
+              }, vhxm.components.shared.filter.constants[item].title),
+              m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item) >= 0 ? '.is-active' : ''), [
+                m.component(vhxm.components.shared.filter.ui[item])
+              ])
+            ]);
+          }
+          if (typeof(item) === 'object') {
+            if (item.template) {
+              return m.component(vhxm.components.shared.filter.ui.template, item, ctrl);
+            }
+            else if (item.data) {
+              return m.component(vhxm.components.shared.filter.ui.data, item, ctrl);
+            }
+          }
+        })
+      ])
+    ]);
+  }
+};
+
+vhxm.components.shared.filter.ui.template = {
+  controller: function(item, parent_ctrl) {
+    return parent_ctrl;
+  },
+  view: function(ctrl, item) {
+    return m('li.border-bottom', [
+      m('a.c-filter--item.head-5.fill-width.icon--right.icon-chevron-' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? 'up' : 'down') + '-navy.icon--xxsmall', {
+        href: '#',
+        onclick: function(event) {
+          ctrl.handleFilterClick(event, item.type);
+        }
+      }, item.title),
+      m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? '.is-active' : ''), [
+        m.component(item.template)
+      ])
+    ]);
+  }
+};
+
+vhxm.components.shared.filter.ui.data = {
+  controller: function(opts, parent_ctrl) {
+    return parent_ctrl;
+  },
+  view: function(ctrl, item) {
+    return m('li.border-bottom', [
+      m('a.c-filter--item.head-5.fill-width.icon--right.icon-chevron-' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? 'up' : 'down') + '-navy.icon--xxsmall', {
+        href: '#',
+        onclick: function(event) {
+          ctrl.handleFilterClick(event, item.type);
+        }
+      }, item.title),
+      m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? '.is-active' : ''), [
+        m('ul.form', [
+          item.data().map(function(child, index) {
+            return m('li', [
+              m.component(vhxm.components.shared.checkbox.ui.container, {
+                name: item.type + '-' + index,
+                checked: child.checked,
+                label: child.label,
+                onchange: function(event) {
+                  ctrl.removeFilter(child);
+                  if (event.target.checked) {
+                   ctrl.addFilter(child, item);
+                  }
+                }
+              })
+            ]);
+          })
+        ])
+      ])
+    ]);
+  }
+};

data/vendor/assets/javascripts/vhx-quartz.header.js

@@ -0,0 +1,27 @@
+m.component(vhxm.components.shared.header.ui.container, {
+  title: 'Section Title',
+  icon: 'product',
+  description: 'This should be a concise summary of what this section does',
+  buttons: m('a.btn-teal', {
+    href: '#'
+  }, 'Action')
+});
+vhxm.components.shared.header.ui.container = {
+  view: function(ctrl, data) {
+    return m('header.row.padding-bottom-medium.border-bottom', [
+      m('.column.small-16.medium-8.large-10', [
+        m('.media', [
+          m('.media-unit.text-top', [
+            m('i.icon.icon--large.icon-' + data.icon)
+          ]),
+          m('.media-unit.media-fill.padding-left-medium', [
+            m('h2.head-3', data.title),
+            m('p.text.primary.small-margin-bottom-small', (data.description ? data.description : ''))
+          ])
+        ])
+      ]),
+      m('.column.small-16.medium-8.large-6.text-right', (data.buttons ? data.buttons : ''))
+    ]);
+  }
+};
+

data/vendor/assets/javascripts/vhx-quartz.radio.js

@@ -0,0 +1,66 @@
+// horizontal gray radio
+m.component(vhxm.components.shared.radio.ui.container, {
+  color: 'gray',
+  name: 'horz-gray',
+  items: [
+    {
+      label: 'This',
+      value: 'this',
+      checked: true
+    },
+    {
+      label: 'That',
+      value: 'that'
+    }
+  ]
+});
+
+// stacked teal radio
+m.component(vhxm.components.shared.radio.ui.container, {
+  color: 'teal',
+  stacked: true,
+  name: 'horz-teal',
+  items: [
+    {
+      label: 'Here',
+      value: 'here',
+      checked: true
+    },
+    {
+      label: 'There',
+      value: 'there'
+    }
+  ]
+});
+vhxm.components.shared.radio.ui.container = {
+  view: function(ctrl, opts) {
+    return m('form.form', [
+      m('ul.radio-' + (opts.color ? opts.color : 'teal') + (opts.stacked ? '.radio--stacked' : ''), [
+        opts.items.map(function(item, index) {
+          return m('li', [
+            m('input', {
+              id: opts.name + '-' + index,
+              type: 'radio',
+              name: opts.name,
+              value: item.value,
+              checked: item.checked ? item.checked : null
+            }),
+            m('label', {
+              for: opts.name + '-' + index,
+            }, [
+              m('span.radio--icon', [
+                m('i.circle-top', [
+                  m('span')
+                ]),
+                m('i.circle-bottom', [
+                  m('span')
+                ])
+              ]),
+              m('span.radio--label', item.label)
+            ])
+          ]);
+        })
+      ])
+    ]);
+  }
+};