vhx-quartz 0.9.6 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 763affc4990c71546668701bc6dc65db06923d8d
-  data.tar.gz: 81c27da88cf35c55410011e9cd30a20d9519821d
+  metadata.gz: b8861250eb0a0b6d96fabe1bfbbe36a4d87a09ff
+  data.tar.gz: f758fdd80b28c46fa9094910c1be47f02b69db1e
 SHA512:
-  metadata.gz: 1e196e1ac526ab34f955ec7409809bfe5aac4a107e30940c29ec33155f42e90e87e54f4db9fcc8731d1a34c91ffd93305c63fa3ff04f463d683c9399de57d319
-  data.tar.gz: ebd4982993c665f98ed207df3c1d2618427fa22bf72a46034c4632b3a840aff6ac553543d93dba53b7de5fa4e565b539bd5bc06cf9067bafcdd9314957016b95
+  metadata.gz: 54257d767f4062cc2b40209b955abf579df6efa16181510afff2bec3fd8edff25dcb8820c5980316e9ad8744338ad96c1d03999f93d70b20ce87ea2964a67edf
+  data.tar.gz: 2d91ca71f010dd0b4a267cb9cf9747f061484808bef91927e29099d2b11b65353d2bc2ad2b7d6f5c03697ce8fbb2aa30ce6ebd1c62a0b0c0bc3a03c97a21367c

data/lib/vhx/quartz/version.rb

@@ -1,5 +1,5 @@
 module Vhx
   module Quartz
-    VERSION = "0.9.6"
+    VERSION = "0.10.0"
   end
 end

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

@@ -18,7 +18,8 @@ if (typeof vhxm !== 'undefined') {
     },
     select: {
       ui: {
-        list: {}
+        list: {},
+        media_item: {}
       }
     },
     autosuggest: {

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

@@ -2,13 +2,27 @@
 
 vhxm.components.shared.select.controller = function (opts) {
   var self = this;
+  var api = opts.api ? opts.api : m.prop(null);
 
   self.init = function () {
     self.state = new vhxm.components.shared.select.state();
     self.model = new vhxm.components.shared.select.model();
 
+    self.type = opts.type || 'standard';
+    self.multiselect = opts.multiselect || false;
     self.model.items = opts.items;
-    self.state.selected(opts.selected);
+
+    if (opts.selected) {
+      self.state.selected(opts.selected);
+    }
+
+    if (opts.onSelect) {
+      self.state.onSelect = opts.onSelect;
+    }
+
+    if (opts.onAction) {
+      self.state.onAction = opts.onAction;
+    }
 
     $(document).on('click', function (event) {
       var is_dropdown = $(event.target).closest('.c-select--container').length;
@@ -19,50 +33,46 @@ vhxm.components.shared.select.controller = function (opts) {
         m.endComputation();
       }
     });
+
+    api(self);
   };
 
   self.selectedLabel = function () {
-    var 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;
-      }
-    });
+    var selected = opts.placeholder ? opts.placeholder : 'Select...';
 
-    if (is_default) {
-      self.state.selected(opts.selected);
+    if (self.state.selected()) {
+      self.model.items().map(function (item) {
+        if (self.state.selected()[item[opts.prop_map.key]]) {
+          selected = self.state.selected()[item[opts.prop_map.key]].label;
+        }
+      });
+      if (Object.keys(self.state.selected()).length > 1) {
+        selected = 'Multiple items selected';
+      }
     }
 
-    return self.state.selected().label;
+    return selected;
   };
 
-  self.handleKeydown = function (e) {
-    var container = $(e.target).closest('.c-select--container').find('.c-select--options');
+  self.handleKeydown = function (event) {
+    var container = $(event.target).closest('.c-select--container');
+    var options = container.find('.c-select--options');
+    var input = container.find('.c-select--input-container input');
 
     // Down Arrow
-    if (e.keyCode === 40) {
-      self.setHighlightedState('down', container);
-      e.preventDefault();
+    if (event.keyCode === 40) {
+      event.preventDefault();
+      self.setHighlightedState('down', options);
     }
     // Up Arrow
-    else if (e.keyCode === 38) {
-        self.setHighlightedState('up', container);
-        e.preventDefault();
+    else if (event.keyCode === 38) {
+        event.preventDefault();
+        self.setHighlightedState('up', options, input);
       }
       // 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();
+      else if (event.keyCode === 13 && self.state.isDropdownOpen()) {
+          event.preventDefault();
+          self.selectItem(self.model.items()[self.state.highlightIndex()]);
         }
   };
 
@@ -70,23 +80,71 @@ vhxm.components.shared.select.controller = function (opts) {
     event.preventDefault();
     var container = $(event.target).closest('.c-select--container').find('.c-select--options');
 
+    if (!self.state.isDropdownOpen()) {
+      self.state.focusInput(true);
+    }
+
     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.handleInput = function (event) {
+    self.state.highlightIndex(-1);
+    self.state.searchInputValue(event.target.value);
+    self.state.isLoading(true);
+  };
+
+  self.selectItem = function (item) {
+    var selected = void 0;
+    if (!self.multiselect) {
+      self.state.selected({});
+    }
+
+    selected = self.state.selected() || self.state.selected({});
+
+    if (selected[item[opts.prop_map.key]]) {
+      delete selected[item[opts.prop_map.key]];
+    } else {
+      selected[item[opts.prop_map.key]] = {
+        value: item[opts.prop_map.value],
+        label: item[opts.prop_map.label]
+      };
+    }
+
+    self.state.selected(selected);
+    self.state.isDropdownOpen(self.multiselect ? true : false);
+    self.state.onSelect(self.state.selected());
+    if (!self.multiselect) {
+      self.state.highlightIndex(-1);
+      self.scrollOptionsList(0);
+    }
+  };
+
+  self.handleAction = function (event) {
+    event.preventDefault();
+    m.startComputation();
+    self.state.footerLoading(true);
+    m.endComputation();
+
+    self.state.onAction(function () {
+      m.startComputation();
+      self.state.searchInputValue('');
+      self.state.footerLoading(false);
+      m.endComputation();
+    });
   };
 
   self.searchCallback = function (data) {
+    m.startComputation();
     self.model.items(data);
-    self.state.isLoadingResults(false);
+    self.state.isLoading(false);
+    m.endComputation();
   };
 
-  self.setHighlightedState = function (direction, container) {
+  self.setHighlightedState = function (direction, container, input) {
     if (direction === 'down') {
       self.state.highlightIndex(self.state.highlightIndex() + 1);
       if (self.state.highlightIndex() < self.model.items().length) {
@@ -98,6 +156,9 @@ vhxm.components.shared.select.controller = function (opts) {
       self.state.highlightIndex(self.state.highlightIndex() - 1);
       if (self.state.highlightIndex() > 0) {
         self.state.scrollIndex(self.state.scrollIndex() - 1);
+      } else if (self.state.highlightIndex() < 0) {
+        self.state.highlightIndex(-1);
+        input.focus();
       } else {
         self.state.highlightIndex(0);
       }
@@ -121,14 +182,21 @@ vhxm.components.shared.select.model = function () {
 };
 
 vhxm.components.shared.select.state = function () {
-  this.selected = m.prop({});
+  this.selected = m.prop(null);
   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);
+  this.isLoading = m.prop(false);
+  this.searchInputValue = m.prop('');
+  this.footerLoading = m.prop(false);
+  this.focusInput = m.prop(true);
+  this.onSelect = function () {};
+  this.onAction = function (done) {
+    done();
+  };
 };
 
 vhxm.components.shared.select.ui.container = {
@@ -137,64 +205,120 @@ vhxm.components.shared.select.ui.container = {
     return new vhxm.components.shared.select.controller(opts);
   },
   view: function view(ctrl, opts) {
-    opts.custom_trigger ? opts.custom_trigger.attrs.onclick = ctrl.handleClick : '';
-    opts.custom_trigger ? opts.custom_trigger.attrs.className += ' c-select--trigger' : '';
+    var options = opts.search ? '.has-search' : '';
+    options += opts.trigger ? '.has-trigger' : '';
+    options += opts.inline ? '.inline' : '';
+
+    if (opts.trigger) {
+      opts.trigger.attrs.onclick = ctrl.handleClick;
+      opts.trigger.attrs.className += ' c-select--trigger';
+    }
 
-    return m('.c-select--container.form' + (opts.search ? '.has-search' : '') + (opts.inline ? '.inline' : ''), {
+    return m('.c-select--container.relative.form' + options, {
       config: function config(el, isInitialized) {
-        if (opts.custom_trigger && isInitialized) {
-          var left_pos = el.querySelector('.c-select--trigger').offsetWidth * .25;
+        if (opts.trigger && isInitialized) {
+          var left_pos = el.querySelector('.c-select--trigger').offsetWidth * 0.25;
           el.querySelector('.c-select--caret').style.left = left_pos + 'px';
         }
       },
+      onmouseleave: function onmouseleave() {
+        ctrl.state.highlightIndex(-1);
+      },
       onkeydown: ctrl.handleKeydown
-    }, [opts.custom_trigger ? opts.custom_trigger : m('a.c-select--trigger.btn-dropdown-' + (opts.color ? opts.color : 'gray') + '.btn--fill' + (ctrl.state.isDropdownOpen() ? '.is-active' : ''), {
+    }, [opts.trigger ? opts.trigger : 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 ?
+    }, ctrl.selectedLabel()), m('.c-select--dropdown.bg-white.border.radius.fill-width' + (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 config(el) {
-        if (ctrl.state.isDropdownOpen()) {
+    m('.c-select--input-container.padding-medium.absolute.bg-white.fill-width.radius', [m.component(vhxm.components.shared.search_input.ui.container, {
+      config: function config(el, init) {
+        el.value = ctrl.state.searchInputValue();
+        if (ctrl.state.focusInput()) {
           setTimeout(function () {
             el.focus();
+            ctrl.state.focusInput(false);
           }, 10);
         }
       },
       callback: ctrl.searchCallback,
-      search: opts.search,
+      search: function search(query, callback) {
+        if (ctrl.state.highlightIndex() === -1) {
+          opts.search(query, callback);
+        }
+      },
       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
-    }), m('span.c-select--caret')])]);
+    })]) : '', m.component(vhxm.components.shared.select.ui.list.container, opts, ctrl), opts.action && ctrl.state.searchInputValue().length ?
+    // show Create New Category dropdown footer action
+    m('.c-select--footer.border-top', [m('a.btn-teal.btn--fill' + (ctrl.state.footerLoading() ? '.is-loading' : ''), {
+      onclick: ctrl.handleAction,
+      href: '#'
+    }, opts.action + (ctrl.state.searchInputValue().length ? ' \'' + ctrl.state.searchInputValue() + '\'' : ''))]) : '', m('span.c-select--caret')])]);
+  }
+};
+
+/* ................................................
+  Media Item Component
+.................................................*/
+vhxm.components.shared.select.ui.item_media = {
+  view: function view(c, params) {
+    var item = params.item;
+    var index = params.index;
+    var ctrl = params.ctrl;
+    var opts = params.opts;
+
+    return m('.c-media-item--container.padding-horz-medium.padding-vert-small.clearfix' + (index === ctrl.state.highlightIndex() ? '.is-selected' : ''), {
+      onmouseover: function onmouseover() {
+        ctrl.state.highlightIndex(index);
+      },
+      onclick: function onclick(event) {
+        ctrl.handleItemClick(event, item);
+      }
+    }, [m('.c-media-item--image-container.left', [m('img.c-media-item--image.radius.margin-right-medium', {
+      src: item[opts.prop_map.img],
+      width: 70,
+      height: 40
+    })]), m('.c-media-item--content.clearfix.left', [m('p.text--navy', item[opts.prop_map.label]), m('p.text--gray', item[opts.prop_map.descriptor])]), m('.c-media-item--action.clearfix.right', [m('.c-item-toggle.icon--xsmall.icon-check-navy.border' + (ctrl.state.selected() && ctrl.state.selected()[item[opts.prop_map.key]] ? '.is-selected.icon-check-navy' : '.icon-plus-thin-white'))])]);
+  }
+};
+
+/* ................................................
+  Standard Item Component
+.................................................*/
+vhxm.components.shared.select.ui.item_standard = {
+  view: function view(c, params) {
+    var item = params.item;
+    var index = params.index;
+    var ctrl = params.ctrl;
+    var opts = params.opts;
+
+    return m('li.c-select--option.padding-horz-medium.padding-vert-xsmall' + (index === ctrl.state.highlightIndex() ? '.is-selected' : ''), {
+      config: function config(el) {
+        ctrl.state.optionHeight($(el).outerHeight());
+      },
+      onmouseover: function onmouseover() {
+        ctrl.state.highlightIndex(index);
+      },
+      onclick: function onclick(event) {
+        ctrl.handleItemClick(event, item);
+      }
+    }, [m('span.c-select--item-label.text--navy', item[opts.prop_map.label]), item[opts.prop_map.descriptor] ? m('span.right.text--gray', item[opts.prop_map.descriptor]) : '']);
   }
 };
 
 vhxm.components.shared.select.ui.list.controller = function (opts, parent) {
   var self = this;
 
-  self.parent = new vhxm.components.shared.select.controller(opts);
+  self.parent = parent;
   self.state = parent.state;
   self.model = parent.model;
 
   self.hasItems = function () {
-    return self.model.items() && self.model.items().length > 1;
+    return self.model.items() && self.model.items().length > 0;
   };
 
   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);
+    self.parent.selectItem(item);
   };
 };
 
@@ -206,22 +330,17 @@ vhxm.components.shared.select.ui.list.container = {
     return new vhxm.components.shared.select.ui.list.controller(opts, parent);
   },
   view: function view(ctrl, opts) {
-    return m('ul.c-select--options.margin-left-reset' + (ctrl.state.isLoadingResults() ? '.is-loading.padding-bottom-medium' : ''), {
+    return m('ul.c-select--options.margin-left-reset.loader-slate.loader--transparent' + (ctrl.state.isLoading() ? '.is-loading' : ''), {
       config: function config(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 config(el) {
-          ctrl.state.optionHeight($(el).outerHeight());
-        },
-        onmouseover: function onmouseover() {
-          ctrl.state.highlightIndex(index);
-        },
-        onclick: function onclick(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]) : '']);
+      return m.component(vhxm.components.shared.select.ui['item_' + ctrl.parent.type], {
+        item: item,
+        index: index,
+        ctrl: ctrl,
+        opts: opts
+      });
     }) : m.component(vhxm.components.shared.select.ui.list.empty, opts)]);
   }
 };
@@ -230,6 +349,6 @@ vhxm.components.shared.select.ui.list.container = {
 .................................................*/
 vhxm.components.shared.select.ui.list.empty = {
   view: function view() {
-    return m('li.c-select--option.padding-horizontal-large.padding-top-small.padding-bottom-medium.text.primary', 'No results');
+    return m('li.c-select--option.padding-horz-large.padding-top-small.padding-bottom-medium.text.primary', 'No results');
   }
 };

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

@@ -6361,7 +6361,7 @@ a.head--white:hover, a.head--white:active {
   .loader--transparent.is-processing:after, .loader--transparent.is-loading:after {
     display: block;
     content: ' ' !important; }
-  .loader--transparent.is-processing *, .loader--transparent.is-loading * {
+  .loader--transparent.is-processing > *, .loader--transparent.is-loading > * {
     opacity: .2; }
 
 .loader--hide {