luda 0.3.0 → 0.3.1

data/assets/javascripts/luda/mixins/disable.js

@@ -12,22 +12,23 @@
     // data:
     //   disable:
     //     tabIndex: string  # required
+    disableTargetProp: function() {
+      var ref;
+      return ((ref = this.attr) != null ? ref.disable : void 0) || 'disabled';
+    },
     disableCreate: function() {
-      var dataAttr, ref, rootEl, tabIndex;
-      rootEl = this.root.els[0];
-      tabIndex = rootEl.tabIndex;
+      var dataAttr, tabIndex;
+      tabIndex = this.root.prop('tabIndex');
       dataAttr = this.data.disable.tabIndex;
       if (!this.root.hasData(dataAttr)) {
         this.root.data(dataAttr, tabIndex);
       }
-      rootEl.tabIndex = -1;
-      return rootEl[((ref = this.attr) != null ? ref.disable : void 0) || 'disabled'] = true;
+      return this.root.prop('tabIndex', -1).prop(this.disableTargetProp(), true);
     },
     disableDestroy: function() {
-      var ref, rootEl;
-      rootEl = this.root.els[0];
-      rootEl.tabIndex = this.root.data(this.data.disable.tabIndex);
-      return rootEl[((ref = this.attr) != null ? ref.disable : void 0) || 'disabled'] = false;
+      var tabIndex;
+      tabIndex = this.root.data(this.data.disable.tabIndex);
+      return this.root.prop('tabIndex', tabIndex).prop(this.disableTargetProp(), false);
     }
   });
 

data/assets/javascripts/luda/mixins/tabable.js

@@ -36,6 +36,30 @@
     //     indicators: string  # required
     //     prevCtrl: string    # optional
     //     nextCtrl: string    # optional
+    tabableActiveIndex: function() {
+      var index, ref, ref1;
+      index = ((ref = this.default) != null ? (ref1 = ref.tabable) != null ? ref1.activeIndex : void 0 : void 0) || 0;
+      this.tabableTargets.els.some((it, i) => {
+        if (!luda(it).hasClass(this.cls.tabable.active)) {
+          return false;
+        }
+        index = i;
+        return true;
+      });
+      return index;
+    },
+    tabableWrapable: function() {
+      var ref, ref1, wrapAttr, wrapable;
+      wrapAttr = this.data.tabable.wrap;
+      if (!wrapAttr) {
+        return false;
+      }
+      wrapable = this.root.data(wrapAttr);
+      if (wrapable === false) {
+        return false;
+      }
+      return (ref = this.default) != null ? (ref1 = ref.tabable) != null ? ref1.wrap : void 0 : void 0;
+    },
     tabableActivate: function(index) {
       var direction;
       if (!luda.isNumeric(index)) {
@@ -127,30 +151,6 @@
       this.tabableSetDirectionCtrlsState();
       return true;
     },
-    tabableActiveIndex: function() {
-      var index, ref, ref1;
-      index = ((ref = this.default) != null ? (ref1 = ref.tabable) != null ? ref1.activeIndex : void 0 : void 0) || 0;
-      this.tabableTargets.els.some((it, i) => {
-        if (!luda(it).hasClass(this.cls.tabable.active)) {
-          return false;
-        }
-        index = i;
-        return true;
-      });
-      return index;
-    },
-    tabableWrapable: function() {
-      var ref, ref1, wrapAttr, wrapable;
-      wrapAttr = this.data.tabable.wrap;
-      if (!wrapAttr) {
-        return false;
-      }
-      wrapable = this.root.data(wrapAttr);
-      if (wrapable === false) {
-        return false;
-      }
-      return (ref = this.default) != null ? (ref1 = ref.tabable) != null ? ref1.wrap : void 0 : void 0;
-    },
     tabableTransitioning: function() {
       return 'tabableActivating' in this || 'tabableDeactivating' in this;
     },
@@ -255,7 +255,7 @@
       wrapAttr && attr.push([wrapAttr, this.tabableSetDirectionControlState]);
       return {
         attr: attr,
-        dom: [[this.selector.tabable.targets, this.tabableLayout], [this.selector.tabable.indicators, this.tabableSetIndicatorsState]]
+        node: [[this.selector.tabable.targets, this.tabableLayout], [this.selector.tabable.indicators, this.tabableSetIndicatorsState]]
       };
     },
     tabableListen: function() {

data/assets/javascripts/luda/mixins/toggleable.js

@@ -29,6 +29,38 @@
     // selector:
     //   toggleable:
     //     target: string  # optional
+    toggleableActive: function() {
+      return this.root.hasClass(this.cls.toggleable.active);
+    },
+    toggleableTriggerable: function(e) {
+      var evtPath, index, ref, ref1, toggleAttr, trigger;
+      if (this.toggleableTransitioning()) {
+        return;
+      }
+      if (/key/.test(e.type)) {
+        return true;
+      }
+      if (!this.root.els[0].contains(e.target)) {
+        return true;
+      }
+      trigger = (ref = this.default) != null ? (ref1 = ref.toggleable) != null ? ref1.trigger : void 0 : void 0;
+      toggleAttr = this.data.toggleable.trigger;
+      if (!toggleAttr) {
+        return trigger;
+      }
+      evtPath = e.eventPath();
+      index = evtPath.indexOf(this.root.els[0]) + 1;
+      evtPath.slice(0, index).some(function(el) {
+        var ins;
+        ins = luda(el);
+        if (!ins.hasData(toggleAttr)) {
+          return;
+        }
+        trigger = ins.data(toggleAttr) !== false;
+        return true;
+      });
+      return trigger;
+    },
     toggleableActivate: function() {
       var evt;
       if (this.toggleableActive()) {
@@ -78,41 +110,9 @@
         return this.toggleableActivate();
       }
     },
-    toggleableActive: function() {
-      return this.root.hasClass(this.cls.toggleable.active);
-    },
     toggleableTransitioning: function() {
       return 'toggleableActivating' in this || 'toggleableDeactivating' in this;
     },
-    toggleableTriggerable: function(e) {
-      var evtPath, index, ref, ref1, toggleAttr, trigger;
-      if (this.toggleableTransitioning()) {
-        return;
-      }
-      if (/key/.test(e.type)) {
-        return true;
-      }
-      if (!this.root.els[0].contains(e.target)) {
-        return true;
-      }
-      trigger = (ref = this.default) != null ? (ref1 = ref.toggleable) != null ? ref1.trigger : void 0 : void 0;
-      toggleAttr = this.data.toggleable.trigger;
-      if (!toggleAttr) {
-        return trigger;
-      }
-      evtPath = e.eventPath();
-      index = evtPath.indexOf(this.root.els[0]) + 1;
-      evtPath.slice(0, index).some(function(el) {
-        var ins;
-        ins = luda(el);
-        if (!ins.hasData(toggleAttr)) {
-          return;
-        }
-        trigger = ins.data(toggleAttr) !== false;
-        return true;
-      });
-      return trigger;
-    },
     toggleableFocusOpener: function(e) {
       var ins;
       if (this.toggleableActive()) {

data/assets/javascripts/luda/patterns/carousel.js

@@ -45,6 +45,15 @@
         nextCtrl: '.carousel-next'
       }
     }
+  }).protect({
+    interval: function() {
+      var duration;
+      duration = this.root.data(this.data.interval);
+      if (duration === false) {
+        return false;
+      }
+      return Math.abs(parseInt(duration, 10)) || this.default.interval;
+    }
   }).include(luda.mixin('tabable').alias({
     activate: 'tabableActivate',
     next: 'tabableNext',
@@ -83,17 +92,26 @@
       return this.intervaling = setTimeout(handler, this.nextInterval);
     }
   }).protect(luda.mixin('tabable').all()).protect({
-    interval: function() {
-      var duration;
-      duration = this.root.data(this.data.interval);
-      if (duration === false) {
-        return false;
-      }
-      return Math.abs(parseInt(duration, 10)) || this.default.interval;
+    togglePath: function(path, action) {
+      var targets;
+      targets = path.filter((el) => {
+        return this.con.contains(el);
+      });
+      return this.con.create(targets).forEach(function(ins) {
+        return ins[action]();
+      });
+    },
+    pauseOnEvt: function(e) {
+      return this.togglePath(e.eventPath(), 'pause');
+    },
+    playOnEvt: function(e) {
+      return this.togglePath(e.eventPath(), 'play');
     },
-    touchendPlay: function() {
+    playOnTouchend: function(e) {
+      var path;
+      path = e.eventPath();
       return setTimeout(() => {
-        return this.play();
+        return this.togglePath(path, 'play');
       });
     }
   }).help({
@@ -115,7 +133,7 @@
       return watches;
     },
     listen: function() {
-      return this.tabableListen().concat([['swipeleft', this.tabableNextOnEvent], ['swiperight', this.tabablePrevOnEvent], ['touchstart mouseover', this.pause], ['mouseout', this.play], ['touchend', this.touchendPlay]]);
+      return this.tabableListen().concat([['swipeleft', this.tabableNextOnEvent], ['swiperight', this.tabablePrevOnEvent], ['touchstart mouseover', this.pauseOnEvt], ['mouseout', this.playOnEvt], ['touchend', this.playOnTouchend]]);
     }
   });
 

data/assets/javascripts/luda/patterns/dropdown.js

@@ -108,6 +108,12 @@
         }
       });
     },
+    create: function() {
+      return this.toggleableCreate();
+    },
+    destroy: function() {
+      return this.toggleableDestroy();
+    },
     listen: function() {
       var self;
       self = this;

data/assets/javascripts/luda/patterns/form-dropdown.js

@@ -16,12 +16,15 @@
     data: {
       label: 'fm-dropdown-label'
     },
+    evt: {
+      changed: 'luda:fmDropdown:changed'
+    },
     splitor: '   '
   }).protect({
-    disableSimulator: function() {
+    initSimulator: function() {
       return this.simulator.data('auto', false).attr('readonly', '');
     },
-    updateValue: function() {
+    updateSimulatorValue: function() {
       var values;
       values = [];
       this.options.els.forEach((input, index) => {
@@ -29,13 +32,31 @@
         if (!input.checked) {
           return;
         }
-        label = luda(this.labels.els[index]);
+        label = this.labels.eq(index);
         value = label.data(this.data.label) || label.text();
         if (value && !values.includes(value)) {
           return values.push(value);
         }
       });
-      return this.simulator.attr('value', values.join(this.splitor));
+      return this.simulator.val(values.join(this.splitor));
+    },
+    updateValue: function() {
+      var checked, oldVal;
+      this.updateSimulatorValue();
+      oldVal = this.selectedVal;
+      checked = this.options.els.filter(function(input) {
+        return input.checked;
+      });
+      this.selectedVal = checked.map(function(input) {
+        return luda(input).val();
+      });
+      if (!oldVal || luda.arrayEqual(this.selectedVal, oldVal)) {
+        return;
+      }
+      return this.root.trigger(this.evt.changed, {
+        value: this.selectedVal,
+        selected: checked
+      });
     },
     triggerClick: function() {
       return this.simulator.trigger('click');
@@ -49,13 +70,13 @@
       };
     },
     create: function() {
-      this.disableSimulator();
+      this.initSimulator();
       return this.updateValue();
     },
     watch: function() {
       return {
-        dom: [[this.selector.options, this.updateValue]],
-        attr: [['checked', this.selector.options, this.updateValue]]
+        node: [[this.selector.options, this.updateValue]],
+        attr: [['checked', this.selector.options, this.updateValue], ['type', this.selector.options, this.updateValue]]
       };
     },
     listen: function() {

data/assets/stylesheets/luda/default/_banner.sass

@@ -1,7 +1,7 @@
 // sass-lint:disable no-empty-rulesets
 +install(banner)
   /*! 
-   * Luda 0.3.0 | Theme default | https://oatw.github.io/luda
+   * Luda 0.3.1 | Theme default | https://oatw.github.io/luda
    * Copyright 2019 Oatw | https://oatw.blog
    * MIT license | http://opensource.org/licenses/MIT
    */

data/assets/stylesheets/luda/kernel/patterns/_navigation.sass

@@ -14,6 +14,7 @@
 
   .nav-logo img,
   .nav-logo svg
+    display: block
     height: $navigation-logo-image-height-rem
     object-fit: contain
     fill: $color-light

data/lib/luda/version.rb

@@ -1,3 +1,3 @@
 module Luda
-  VERSION = '0.3.0'
+  VERSION = '0.3.1'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: luda
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.3.1
 platform: ruby
 authors:
 - oatw
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-11-19 00:00:00.000000000 Z
+date: 2019-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass