vhx-quartz 0.8.18 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c1f61117681f9b8bb347e4f347dce6d2d41f57f8
-  data.tar.gz: 346a21e1de5f41cad5e783f32d4ec3800417b1f2
+  metadata.gz: 27f84c0ef67a554a6562b3a114b33606f5606210
+  data.tar.gz: 5c73f121351900d47af862c463a2b271cecfed9f
 SHA512:
-  metadata.gz: e88349feada9a68af685ae6856bc88e460aab8bd35043f49b3328d265c83c17844cb362c9cd93e0c988ab3a5ff13774278de7a6bd96cc1260859da36ae82eddc
-  data.tar.gz: c05f6ec29b473302854c85cbccfebefc9e1dbb2b662fded75408a49d353e58d1d64cc9da3dfffe612008603e1bec78f6790e9d07ee4bf56c61bdbc80c6ba4092
+  metadata.gz: 1b1338f7a378d9675cd4ca6cf86fb5865e34811bb7cee0ce02d671cf4e033163597ea729a570267ead467026db7ec3176ee95872cdd9e9d79f4797af98b7b1ff
+  data.tar.gz: 8e03b979186dfe16ec3628f795ac7443e7a617b8a7c0a217254221bf185d68666ce98563153b63191daae4bf13dd4eb1a9dbe51ecb6b72f8b32d9da0d257921b

data/lib/vhx/quartz/version.rb

@@ -1,5 +1,5 @@
 module Vhx
   module Quartz
-    VERSION = "0.8.18"
+    VERSION = "0.9.0"
   end
 end

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

@@ -0,0 +1,126 @@
+'use strict';
+
+vhxm.components.shared.modal.controller = function (opts) {
+  var self = this;
+
+  self.setupStateType = function (type, opts) {
+    if (type && opts[type]) {
+      $.each(opts[type], function (key, item) {
+        if (key.match(/Callback/)) {
+          vhxm.components.shared.modal.state[type][key] = item;
+        } else {
+          vhxm.components.shared.modal.state[type][key](item);
+        }
+      });
+    }
+  };
+
+  self.setupState = function (opts) {
+    $.each(opts, function (key, item) {
+      if (!key.match(/content|actions/)) {
+        vhxm.components.shared.modal.state[key](item);
+      }
+    });
+
+    self.setupStateType('actions', opts);
+    self.setupStateType('content', opts);
+  };
+};
+vhxm.components.shared.modal.open = function () {
+  vhxm.components.shared.modal.state.onOpen()();
+  vhxm.components.shared.modal.state.isOpen(true);
+  m.redraw();
+};
+
+vhxm.components.shared.modal.close = function () {
+  vhxm.components.shared.modal.state.isOpen(false);
+  m.redraw();
+  vhxm.components.shared.modal.state.onClose()();
+};
+
+vhxm.components.shared.modal.setTo = function (opts) {
+  var ctrl = new vhxm.components.shared.modal.controller();
+  m.startComputation();
+  ctrl.setupState(opts);
+  m.endComputation();
+};
+
+$(document).on('keyup', function (ev) {
+  if (ev.keyCode === 27 && vhxm.components.shared.modal.state.isOpen()) {
+    vhxm.components.shared.modal.close();
+  }
+});
+
+vhxm.components.shared.modal.state = {
+  isOpen: m.prop(false),
+  size: m.prop('medium'),
+  hasActions: m.prop(2),
+  onOpen: m.prop(function () {}),
+  onClose: m.prop(function () {}),
+  content: {
+    title: m.prop(null),
+    body: m.prop(null)
+  },
+  actions: {
+    left: m.prop('Cancel'),
+    right: m.prop('OK'),
+    single: m.prop('OK'),
+    template: m.prop(null),
+    leftCallback: vhxm.components.shared.modal.close,
+    rightCallback: function rightCallback() {},
+    singleCallback: vhxm.components.shared.modal.close
+  }
+};
+vhxm.components.shared.modal.ui.container = {
+  controller: function controller(opts) {
+    var ctrl = new vhxm.components.shared.modal.controller();
+    ctrl.setupState(opts);
+  },
+  view: function view(ctrl, opts) {
+    var size = '.c-modal--' + vhxm.components.shared.modal.state.size();
+
+    return m('.c-modal' + (vhxm.components.shared.modal.state.isOpen() ? '.is-open' : ''), [m('.c-modal-container' + (vhxm.components.shared.modal.state.hasActions() ? '.c-modal--has-actions' : '') + size, {
+      config: function config(el) {
+        var margin = -$(el).outerHeight() / 2;
+        $(el).css('marginBottom', margin + 'px');
+      }
+    }, [vhxm.components.shared.modal.state.content.title() ? m.component(vhxm.components.shared.modal.ui.header) : '', vhxm.components.shared.modal.state.content.body() ? m.component(vhxm.components.shared.modal.ui.body) : '', vhxm.components.shared.modal.state.hasActions() ? m.component(vhxm.components.shared.modal.ui.actions) : '', m.component(vhxm.components.shared.modal.ui.close)]), vhxm.components.shared.modal.state.isOpen() ? m('.c-modal-bg', {
+      onclick: vhxm.components.shared.modal.close
+    }) : '']);
+  }
+};
+
+vhxm.components.shared.modal.ui.close = {
+  view: function view() {
+    return m('.c-modal--close' + (vhxm.components.shared.size.state.smallOnly() ? '.is-hidden' : ''), {
+      onclick: vhxm.components.shared.modal.close
+    }, [m('i.icon.icon--xsmall.icon-x-white')]);
+  }
+};
+
+vhxm.components.shared.modal.ui.header = {
+  view: function view() {
+    return m('.c-modal--header.padding-medium', [m('span', [m('.h2.head-4.head.secondary.text-left', vhxm.components.shared.modal.state.content.title())])]);
+  }
+};
+
+vhxm.components.shared.modal.ui.body = {
+  view: function view() {
+    return m('.c-modal--body.padding-medium', [m.component(vhxm.components.shared.modal.state.content.body())]);
+  }
+};
+
+vhxm.components.shared.modal.ui.actions = {
+  view: function view() {
+    var singleAction = parseInt(vhxm.components.shared.modal.state.hasActions(), 10) === 1;
+    if (vhxm.components.shared.modal.state.actions.template()) {
+      return m('.c-modal--actions', [m.component(vhxm.components.shared.modal.state.actions.template())]);
+    } else {
+      return m('.c-modal--actions', [m('.padding-small.text-center', [!singleAction ? m('.btn.btn--' + (singleAction ? 'fill' : 'half') + '.btn-gray', {
+        onclick: vhxm.components.shared.modal.state.actions.leftCallback
+      }, vhxm.components.shared.modal.state.actions.left()) : '', m('.btn.btn--' + (singleAction ? 'fill' : 'half') + '.btn-teal', {
+        onclick: vhxm.components.shared.modal.state.actions[singleAction ? 'singleCallback' : 'rightCallback']
+      }, vhxm.components.shared.modal.state.actions[singleAction ? 'single' : 'right']())])]);
+    }
+  }
+};

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

@@ -1,18 +1,54 @@
 'use strict';
 
+vhxm.components.shared.radio.controller = function (opts) {
+  var self = this;
+
+  self.state = new vhxm.components.shared.radio.state();
+
+  opts.items.map(function (item) {
+    if (item.checked) {
+      self.state.isChecked(item.value);
+    }
+  });
+
+  if (!self.state.isChecked()) {
+    self.state.isChecked(opts.items[0].value);
+  }
+};
+
+vhxm.components.shared.radio.state = function () {
+  this.isChecked = m.prop(null);
+};
 vhxm.components.shared.radio.ui.container = {
+  controller: vhxm.components.shared.radio.controller,
   view: function view(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('form.form', [m('ul.radio-' + (opts.color ? opts.color : 'teal') + (opts.stacked ? '.radio--stacked' : opts.buttons ? '.radio--buttons' : ''), [opts.items.map(function (item, index) {
+      var is_checked = ctrl.state.isChecked() === item.value;
       return m('li', [m('input', {
         id: opts.name + '-' + index,
         type: 'radio',
-        onchange: opts.onchange,
+        onchange: function onchange() {
+          ctrl.state.isChecked(item.value);
+          if (opts.onchange) {
+            opts.onchange(arguments);
+          }
+        },
         name: opts.name,
         value: item.value,
-        checked: item.checked ? item.checked : null
-      }), m('label', {
+        checked: is_checked
+      }), m('label' + (opts.buttons ? '.btn-' + (is_checked ? 'teal' : 'gray') + '.btn--fill.btn-radio.margin-bottom-medium' : ''), {
         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)]), item.template ? m('div.clear.padding-top-xsmall', [item.template]) : '']);
+      }, [m.component(vhxm.components.shared.radio.ui.icon), m('span.radio--label.text-left' + (opts.buttons ? '.padding-left-small' : ''), {
+        style: {
+          marginTop: !opts.buttons || opts.buttons && item.label.title ? '0px' : '8px'
+        }
+      }, opts.buttons ? [m('strong.head-5' + (is_checked ? '.text--white' : '.text--navy'), item.label.title ? item.label.title : item.label), item.label.descriptor ? m('p.text-4' + (is_checked ? '.text--white' : ''), item.label.descriptor) : ''] : item.label)]), item.template ? m('div.clear.padding-top-xsmall', [item.template]) : '']);
     })])]);
   }
 };
+
+vhxm.components.shared.radio.ui.icon = {
+  view: function view() {
+    return m('span.radio--icon', [m('i.circle-top', [m('span')]), m('i.circle-bottom', [m('span')])]);
+  }
+};

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

@@ -2,6 +2,9 @@
 
 if (typeof vhxm !== 'undefined') {
   vhxm.components.shared = {
+    modal: {
+      ui: {}
+    },
     radio: {
       ui: {}
     },
@@ -36,6 +39,9 @@ if (typeof vhxm !== 'undefined') {
       ui: {}
     },
     avatar: {},
-    size: {}
+    size: {},
+    tag: {
+      ui: {}
+    }
   };
 }

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

@@ -0,0 +1,39 @@
+'use strict';
+
+vhxm.components.shared.tag.controller = function (opts) {
+  var self = this;
+
+  self.state = new vhxm.components.shared.tag.state();
+};
+vhxm.components.shared.tag.state = function () {
+  this.isHover = m.prop(false);
+  this.isRemoveHover = m.prop(false);
+};
+
+vhxm.components.shared.tag.ui.container = {
+  controller: vhxm.components.shared.tag.controller,
+  view: function view(ctrl, opts) {
+    return m('span.inline.relative.c-tag' + (ctrl.state.isHover() ? '.is-hover' : ''), {
+      onmouseover: function onmouseover() {
+        ctrl.state.isHover(true);
+      },
+      onmouseout: function onmouseout() {
+        ctrl.state.isHover(false);
+      }
+    }, [m('button.c-tag--button' + (ctrl.state.isHover() ? '.btn-teal.is-hover' : '.btn-gray'), {
+      onclick: function onclick() {
+        ctrl.state.onShow();
+      }
+    }, 'Tag'), m('a.c-tag--remove.icon--center.icon-x-white.icon--xxsmall' + (ctrl.state.isRemoveHover() ? '.btn-red' : '.btn-teal'), {
+      onclick: function onclick() {
+        ctrl.state.onRemove();
+      },
+      onmouseover: function onmouseover() {
+        ctrl.state.isRemoveHover(true);
+      },
+      onmouseout: function onmouseout() {
+        ctrl.state.isRemoveHover(false);
+      }
+    })]);
+  }
+};