vhx-quartz 0.7.7 → 0.8.0

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

@@ -0,0 +1,66 @@
+// Example Search Input Component
+
+m.component(vhxm.components.shared.search_input.ui.container, {
+  config: function(el) {
+    // mithril config for post render actions
+  },
+  search: function(query, callback) {
+    // method for search ajax request
+    // passes a query (the search term)
+    // and callback param
+  },
+  callback: function(data) {
+    // callback fires when called
+    // via the callback param above
+    // passes back data from search request
+  },
+  placeholder: 'Search',
+  oninput: function() {
+    // input event handler
+  }
+});
+vhxm.components.shared.search_input.controller = function(opts) {
+  let self = this;
+
+  self.timeout = null;
+
+  self.debounceSearch = function(event) {
+    if (self.timeout) {
+      clearTimeout(self.timeout);
+    }
+
+    self.timeout = setTimeout(function() {
+      self.fetchResults(event.target.value);
+      self.timeout = null;
+    }, 300);
+  };
+
+  self.handleInput = function(event) {
+    self.debounceSearch(event);
+  };
+
+  self.fetchResults = function(query) {
+    opts.search(query, function(data) {
+      opts.callback(data);
+    });
+  };
+};
+
+vhxm.components.shared.search_input.ui.container = {
+  controller: function(opts) {
+    return new vhxm.components.shared.search_input.controller(opts);
+  },
+  view: function(ctrl, opts) {
+    return m('input.c-select--search.padding-right-large', {
+      config: opts.config ? opts.config : '',
+      type: 'text',
+      placeholder: opts.placeholder ? opts.placeholder : 'Search',
+      oninput: function(event) {
+        if (opts.oninput) {
+          opts.oninput(event);
+        }
+        ctrl.handleInput(event);
+      }
+    });
+  }
+};

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

@@ -0,0 +1,263 @@
+// Example Select Component
+
+m.component(vhxm.components.shared.select.ui.container, {
+  search: mySearch(query, callback),
+  selected: {
+    value: null,
+    label: 'Nothing Selected'
+  },
+  items: vhxm.models.section.items,
+  value_prop: 'id',
+  label_prop: 'title',
+  descriptor_prop: 'details',
+  name: 'selected_id',
+  callback: function(obj) {
+    vhxm.models.section.chosen_item = { id: obj.value };
+  }
+});
+
+
+
+vhxm.components.shared.select.controller = function(opts) {
+  let self = this;
+
+  self.init = function() {
+    self.state = new vhxm.components.shared.select.state();
+    self.model = new vhxm.components.shared.select.model();
+
+    self.model.items = opts.items;
+    self.state.selected(opts.selected);
+
+    $(document).on('click', function(event) {
+      let is_dropdown = $(event.target).closest('.c-select--container').length;
+
+      if (!is_dropdown && self.state.isDropdownOpen()) {
+        m.startComputation();
+        self.state.isDropdownOpen(false);
+        m.endComputation();
+      }
+    });
+  };
+
+  self.selectedLabel = function() {
+    let is_default = true;
+
+    self.model.items().map(function(item) {
+      if (self.state.selected().value === item[opts.value_prop]) {
+        self.state.selected({
+          value: item[opts.value_prop],
+          label: item[opts.label_prop]
+        });
+        is_default = false;
+      }
+    });
+
+    if (is_default) {
+      self.state.selected(opts.selected);
+    }
+
+    return self.state.selected().label;
+  };
+
+
+  self.handleKeydown = function(e) {
+    let container = $(e.target).closest('.c-select--container').find('.c-select--options');
+
+    // Down Arrow
+    if (e.keyCode === 40) {
+      self.setHighlightedState('down', container);
+      e.preventDefault();
+    }
+    // Up Arrow
+    else if (e.keyCode === 38) {
+      self.setHighlightedState('up', container);
+      e.preventDefault();
+    }
+    // Enter/Return
+    else if (e.keyCode === 13 && self.state.isDropdownOpen()) {
+      self.state.selected({
+        value: self.model.items()[self.state.highlightIndex()][opts.value_prop],
+        label: self.model.items()[self.state.highlightIndex()][opts.label_prop]
+      });
+
+      self.state.isDropdownOpen(false);
+      e.preventDefault();
+    }
+  };
+
+  self.handleClick = function(event) {
+    event.preventDefault();
+    let container = $(event.target).closest('.c-select--container').find('.c-select--options');
+
+    self.state.isDropdownOpen(!self.state.isDropdownOpen());
+    self.state.highlightIndex(-1);
+
+    self.scrollOptionsList(container);
+  };
+
+  self.handleInput = function() {
+    self.state.isLoadingResults(true);
+    self.state.highlightIndex(0);
+  };
+
+  self.searchCallback = function(data) {
+    self.model.items(data);
+    self.state.isLoadingResults(false);
+  };
+
+  self.setHighlightedState = function(direction, container) {
+    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());
+    }
+  };
+
+  if (opts.init) {
+    self.init();
+  }
+};
+
+vhxm.components.shared.select.model = function() {
+  this.items = m.prop(null);
+};
+
+vhxm.components.shared.select.state = function() {
+  this.selected = m.prop({});
+  this.highlighted = m.prop({});
+  this.isDropdownOpen = m.prop(false);
+  this.highlightIndex = m.prop(null);
+  this.scrollIndex = m.prop(0);
+  this.optionHeight = m.prop(0);
+  this.optionsHeight = m.prop(0);
+  this.isLoadingResults = m.prop(false);
+};
+
+vhxm.components.shared.select.ui.container = {
+  controller: function(opts) {
+    opts.init = true;
+    return new vhxm.components.shared.select.controller(opts);
+  },
+  view: function(ctrl, opts) {
+    return m('.c-select--container.form' + (opts.search ? '.has-search' : '') + (opts.inline ? '.inline' : ''), {
+        onkeydown: ctrl.handleKeydown
+      }, [
+      m('a.c-select--trigger.btn-dropdown-' + (opts.color ? opts.color : 'gray') + '.btn--fill' + (ctrl.state.isDropdownOpen() ? '.is-active' : ''), {
+        href: '#',
+        onclick: ctrl.handleClick
+      }, ctrl.selectedLabel()),
+      m('.c-select--dropdown' + (ctrl.state.isDropdownOpen() ? '.is-open' : ''), [
+        opts.search ?
+        // if search is enabled
+        m('.c-select--input-container.padding-medium', [
+          m.component(vhxm.components.shared.search_input.ui.container, {
+            config: function(el) {
+              if (ctrl.state.isDropdownOpen()) {
+                setTimeout(function() {
+                  el.focus();
+                }, 10);
+              }
+            },
+            callback: ctrl.searchCallback,
+            search: opts.search,
+            placeholder: 'Search',
+            oninput: ctrl.handleInput
+          })
+        ]) : '',
+        m.component(vhxm.components.shared.select.ui.list.container, opts, ctrl),
+        m('input', {
+          type: 'hidden',
+          name: opts.name,
+          value: ctrl.state.selected().value
+        })
+      ])
+    ]);
+  }
+};
+
+vhxm.components.shared.select.ui.list.controller = function(opts, parent) {
+  let self = this;
+
+  self.parent = new vhxm.components.shared.select.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({
+      value: item[opts.value_prop],
+      label: item[opts.label_prop]
+    });
+    self.state.isDropdownOpen(false);
+    self.state.highlightIndex(-1);
+    if (opts.callback) {
+      opts.callback(self.state.selected());
+    }
+    self.parent.scrollOptionsList(0);
+  };
+
+};
+
+/* ................................................
+  Select List Component
+.................................................*/
+vhxm.components.shared.select.ui.list.container = {
+  controller: function(opts, parent) {
+    return new vhxm.components.shared.select.ui.list.controller(opts, parent);
+  },
+  view: function(ctrl, opts) {
+    return m('ul.c-select--options.margin-left-reset' + (ctrl.state.isLoadingResults() ? '.is-loading.padding-bottom-medium' : ''), {
+      config: function(el) {
+        ctrl.state.optionsHeight($(el).outerHeight());
+      }
+    }, [
+      ctrl.hasItems() ?
+        ctrl.model.items().map(function(item, index) {
+          return m('li.c-select--option.padding-horizontal-large.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);
+            }
+          }, [
+            m('span.c-select--item-label', item[opts.label_prop]), item[opts.descriptor_prop] ? m('span.right.text.primary', item[opts.descriptor_prop]) : '' ]);
+        })
+      : m.component(vhxm.components.shared.select.ui.list.empty, opts)
+    ]);
+  }
+};
+
+/* List Empty
+.................................................*/
+vhxm.components.shared.select.ui.list.empty = {
+  view: function() {
+    return m('li.c-select--option.padding-horizontal-large.padding-top-small.padding-bottom-medium.text.primary', 'No results');
+  }
+};

data/vendor/assets/stylesheets/vhx-quartz.autosuggest.css

@@ -0,0 +1,67 @@
+/* .....................................
+  Fonts
+..................................... */
+/* .....................................
+  Sets
+..................................... */
+/* .....................................
+  Media Query Ranges
+..................................... */
+/* .....................................
+  Colors - Grays
+..................................... */
+/* .....................................
+  Colors - Teals
+..................................... */
+/* .....................................
+  Colors - Red
+..................................... */
+/* .....................................
+  Colors - Navy
+..................................... */
+/* .....................................
+  Colors - Brand Palette
+..................................... */
+/* .....................................
+  Colors - External Palette
+..................................... */
+/* helper function for margin and padding
+......................................*/
+.c-autosuggest--container {
+  position: relative; }
+
+.c-autosuggest--list {
+  width: 100%;
+  position: absolute;
+  background-color: #fff;
+  background: #ffffff;
+  z-index: 2147483600;
+  border: 1px solid #D7DDE1;
+  border-top: none;
+  display: none; }
+  .c-autosuggest--list.is-open {
+    display: block; }
+
+.c-autosuggest--input-container {
+  width: 100%;
+  background: #ffffff; }
+  .c-autosuggest--input-container input {
+    border-radius: 3px 3px 0px 0 !important; }
+
+.c-autosuggest--options {
+  overflow-y: auto;
+  margin-bottom: 0;
+  max-height: 210px; }
+  .c-autosuggest--options.is-loading {
+    background-position: center center;
+    background-size: 40px;
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%20%20viewBox%3D%220%200%2040%2040%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20opacity%3D%220.2%22%20fill%3D%22%237a878e%22%20d%3D%22M20.201%2C5.169c-8.254%2C0-14.946%2C6.692-14.946%2C14.946c0%2C8.255%2C6.692%2C14.946%2C14.946%2C14.946%0D%0A%20%20s14.946-6.691%2C14.946-14.946C35.146%2C11.861%2C28.455%2C5.169%2C20.201%2C5.169z%20M20.201%2C31.749c-6.425%2C0-11.634-5.208-11.634-11.634%0D%0A%20%20c0-6.425%2C5.209-11.634%2C11.634-11.634c6.425%2C0%2C11.633%2C5.209%2C11.633%2C11.634C31.834%2C26.541%2C26.626%2C31.749%2C20.201%2C31.749z%22%2F%3E%0D%0A%3Cpath%20fill%3D%22%237a878e%22%20d%3D%22M26.013%2C10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0%0D%0A%20%20C22.32%2C8.481%2C24.301%2C9.057%2C26.013%2C10.047z%22%3E%0D%0A%20%20%3CanimateTransform%20attributeType%3D%22xml%22%0D%0A%20%20%20%20attributeName%3D%22transform%22%0D%0A%20%20%20%20type%3D%22rotate%22%0D%0A%20%20%20%20from%3D%220%2020%2020%22%0D%0A%20%20%20%20to%3D%22360%2020%2020%22%0D%0A%20%20%20%20dur%3D%220.5s%22%0D%0A%20%20%20%20repeatCount%3D%22indefinite%22%2F%3E%0D%0A%20%20%3C%2Fpath%3E%0D%0A%3C%2Fsvg%3E"); }
+    .c-autosuggest--options.is-loading li {
+      opacity: 0; }
+
+.c-autosuggest--option {
+  color: #233741; }
+  .c-autosuggest--option.is-selected {
+    cursor: pointer;
+    background-color: #F0F2F4; }