luda 0.2.0 → 0.3.0

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

@@ -0,0 +1,34 @@
+//= require ../kernel/index
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../kernel/index.js')) :
+  typeof define === 'function' && define.amd ? define(['../kernel/index.js'], factory) :
+  (factory());
+}(this, (function () { 'use strict';
+
+  luda.mixin('disable', {
+    // attr:
+    //   disable: 'readonly | disabled'  # optional
+
+    // data:
+    //   disable:
+    //     tabIndex: string  # required
+    disableCreate: function() {
+      var dataAttr, ref, rootEl, tabIndex;
+      rootEl = this.root.els[0];
+      tabIndex = rootEl.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;
+    },
+    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;
+    }
+  });
+
+})));

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

@@ -0,0 +1,46 @@
+//= require ../kernel/index
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../kernel/index.js')) :
+  typeof define === 'function' && define.amd ? define(['../kernel/index.js'], factory) :
+  (factory());
+}(this, (function () { 'use strict';
+
+  var listened, quene;
+
+  listened = false;
+
+  quene = [];
+
+  luda.mixin('resetable', {
+    listen: function(fn) {
+      var pushed;
+      pushed = quene.some((it) => {
+        return it.Component === this.con;
+      });
+      if (!pushed) {
+        quene.push({
+          Component: this.con,
+          reset: fn
+        });
+      }
+      if (listened) {
+        return;
+      }
+      listened = true;
+      return luda(document).on('reset.MixinResetable', function(e) {
+        if (e.isDefaultPrevented()) {
+          return;
+        }
+        return setTimeout(function() {
+          return quene.forEach(function(it) {
+            return it.Component.each(function(ins, rootEl) {
+              e.target.contains(rootEl) && it.reset.call(ins);
+              return true;
+            });
+          });
+        });
+      });
+    }
+  });
+
+})));

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

@@ -0,0 +1,274 @@
+//= require ../kernel/index
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../kernel/index.js')) :
+  typeof define === 'function' && define.amd ? define(['../kernel/index.js'], factory) :
+  (factory());
+}(this, (function () { 'use strict';
+
+  luda.mixin('tabable', {
+    // cls:
+    //   tabable:
+    //     active: string           # required
+    //     indicatorActive: string  # required
+    //     prev: string             # optional
+    //     next: string             # optional
+
+    // data:
+    //   tabable:
+    //     interruption: string  # required
+    //     wrap: string          # optional
+
+    // default:
+    //   tabable:
+    //     activeIndex: integer  # optional
+    //     wrap: boolean         # optional
+
+    // evt:
+    //   tabable:
+    //     activate: string     #required
+    //     activated: string    #required
+    //     deactivate: string   #required
+    //     deactivated: string  #required
+
+    // selector:
+    //   tabable:
+    //     targets: string     # required
+    //     indicators: string  # required
+    //     prevCtrl: string    # optional
+    //     nextCtrl: string    # optional
+    tabableActivate: function(index) {
+      var direction;
+      if (!luda.isNumeric(index)) {
+        return;
+      }
+      direction = index < this.tabableActiveIndex() ? 'prev' : 'next';
+      return this.tabableSlide(index, direction);
+    },
+    tabableNext: function() {
+      var index;
+      index = this.tabableActiveIndex() + 1;
+      if (index >= this.tabableTargets.length) {
+        if (!this.tabableWrapable()) {
+          return;
+        }
+        index = 0;
+      }
+      return this.tabableSlide(index, 'next');
+    },
+    tabablePrev: function() {
+      var index;
+      index = this.tabableActiveIndex() - 1;
+      if (index < 0) {
+        if (!this.tabableWrapable()) {
+          return;
+        }
+        index = this.tabableTargets.length - 1;
+      }
+      return this.tabableSlide(index, 'prev');
+    },
+    tabableLayout: function() {
+      this.tabableTargets.els.forEach((it, index) => {
+        var activeCls, isActive, item, nextCls, prevCls;
+        item = luda(it);
+        if ((activeCls = this.cls.tabable.active) && item.hasClass(activeCls)) {
+          return;
+        }
+        if ((nextCls = this.cls.tabable.next) && item.hasClass(nextCls)) {
+          return;
+        }
+        if ((prevCls = this.cls.tabable.prev) && item.hasClass(prevCls)) {
+          return;
+        }
+        isActive = index === this.tabableActiveIndex();
+        item.css('transition', 'none').toggleClass(activeCls, isActive).toggleClass(prevCls, index < this.tabableActiveIndex()).toggleClass(nextCls, index > this.tabableActiveIndex()).reflow().css('transition', '');
+        return isActive && item.trigger(this.evt.tabable.activated);
+      });
+      this.tabableSetIndicatorsState();
+      return this.tabableSetDirectionCtrlsState();
+    },
+    tabableSlide: function(index, direction) {
+      var activateEvt, activated, activatedIndex, activeCls, deactivateEvt, directionCls, item, oppsite, oppsiteCls;
+      if (!luda.isNumeric(index)) {
+        return;
+      }
+      if (index === (activatedIndex = this.tabableActiveIndex())) {
+        return;
+      }
+      if (index < 0 || index >= this.tabableTargets.length) {
+        return;
+      }
+      item = this.tabableTargets.eq(index);
+      activated = this.tabableTargets.eq(activatedIndex);
+      activateEvt = item.trigger(this.evt.tabable.activate, null, true)[0];
+      if (activateEvt.isDefaultPrevented()) {
+        return;
+      }
+      deactivateEvt = activated.trigger(this.evt.tabable.deactivate, null, true)[0];
+      if (deactivateEvt.isDefaultPrevented()) {
+        return;
+      }
+      oppsite = direction === 'next' ? 'prev' : 'next';
+      directionCls = this.cls.tabable[direction];
+      oppsiteCls = this.cls.tabable[oppsite];
+      activeCls = this.cls.tabable.active;
+      item.css('transition', 'none').addClass(directionCls).removeClass(oppsiteCls).reflow().css('transition', '').addClass(activeCls).removeClass(directionCls);
+      activated.addClass(oppsiteCls).removeClass(activeCls);
+      this.tabableActivating = setTimeout(() => {
+        delete this.tabableActivating;
+        return item.trigger(this.evt.tabable.activated);
+      }, item.transitionDuration());
+      this.tabableDeactivateIndex = activatedIndex;
+      this.tabableDeactivating = setTimeout(() => {
+        delete this.tabableDeactivating;
+        delete this.tabableDeactivateIndex;
+        return activated.trigger(this.evt.tabable.deactivated);
+      }, activated.transitionDuration());
+      this.tabableSetIndicatorsState();
+      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;
+    },
+    tabableSetIndicatorsState: function() {
+      return this.tabableIndicators.els.forEach((it, index) => {
+        var activeCls, val;
+        activeCls = this.cls.tabable.indicatorActive;
+        val = index === this.tabableActiveIndex();
+        return luda(it).toggleClass(activeCls, val);
+      });
+    },
+    tabableSetDirectionCtrlsState: function() {
+      var index, maxIndex, minIndex, nextCtrl, nextDis, prevCtrl, prevDis;
+      prevCtrl = this.tabablePrevCtrl;
+      nextCtrl = this.tabableNextCtrl;
+      if (!(prevCtrl || nextCtrl)) {
+        return;
+      }
+      if (this.tabableTargets.length <= 1) {
+        prevDis = nextDis = '';
+      } else if (this.tabableWrapable()) {
+        prevDis = nextDis = null;
+      } else {
+        index = this.tabableActiveIndex();
+        minIndex = 0;
+        maxIndex = this.tabableTargets.length - 1;
+        prevDis = index === minIndex ? '' : null;
+        nextDis = index === maxIndex ? '' : null;
+      }
+      prevCtrl && prevCtrl.attr('disabled', prevDis);
+      return nextCtrl && nextCtrl.attr('disabled', nextDis);
+    },
+    tabableActivateOnEvent: function(e) {
+      var index, ref, ref1;
+      if (this.tabableTransitioning()) {
+        return;
+      }
+      index = (ref = e.detail) != null ? (ref1 = ref.tabable) != null ? ref1.activeIndex : void 0 : void 0;
+      if (index == null) {
+        index = this.tabableIndicators.els.indexOf(e.currentTarget);
+      }
+      return this.tabableActivate(index);
+    },
+    tabablePrevOnEvent: function(e) {
+      if (!this.tabableTransitioning()) {
+        return this.tabablePrev();
+      }
+    },
+    tabableNextOnEvent: function(e) {
+      if (!this.tabableTransitioning()) {
+        return this.tabableNext();
+      }
+    },
+    tabableDestroy: function() {
+      var interruption;
+      if ('tabableActivating' in this) {
+        clearTimeout(this.tabableActivating);
+        interruption = {
+          activate: this.tabableActiveIndex()
+        };
+      }
+      if ('tabableDeactivating' in this) {
+        clearTimeout(this.tabableDeactivating);
+        interruption || (interruption = {});
+        interruption.deactivateIndex = this.tabableDeactivateIndex;
+      }
+      return this.root.data(this.data.tabable.interruption, interruption);
+    },
+    tabableCreate: function() {
+      var activate, dataAttr, deactive, interruption;
+      this.tabableLayout();
+      dataAttr = this.data.tabable.interruption;
+      if (!(interruption = this.root.data(dataAttr))) {
+        return;
+      }
+      if ((activate = interruption.activated) != null) {
+        this.tabableTargets.eq(activated).trigger(this.evt.tabable.activated);
+      }
+      if ((deactive = interruption.deactivated) != null) {
+        this.tabableTargets.eq(deactivated).trigger(this.evt.tabable.deactivated);
+      }
+      return this.root.removeData(dataAttr);
+    },
+    tabableFind: function() {
+      var conf, nextCtrl, prevCtrl;
+      conf = {
+        tabableTargets: this.selector.tabable.targets,
+        tabableIndicators: this.selector.tabable.indicators
+      };
+      if (prevCtrl = this.selector.tabable.prevCtrl) {
+        conf.tabablePrevCtrl = prevCtrl;
+      }
+      if (nextCtrl = this.selector.tabable.nextCtrl) {
+        conf.tabableNextCtrl = nextCtrl;
+      }
+      return conf;
+    },
+    tabableWatch: function() {
+      var attr, wrapAttr;
+      attr = [];
+      wrapAttr = this.data.tabable.wrap;
+      wrapAttr && attr.push([wrapAttr, this.tabableSetDirectionControlState]);
+      return {
+        attr: attr,
+        dom: [[this.selector.tabable.targets, this.tabableLayout], [this.selector.tabable.indicators, this.tabableSetIndicatorsState]]
+      };
+    },
+    tabableListen: function() {
+      var listeners, nextCtrl, prevCtrl;
+      listeners = [['click', this.selector.tabable.indicators, this.tabableActivateOnEvent]];
+      if (prevCtrl = this.selector.tabable.prevCtrl) {
+        listeners.push(['click', prevCtrl, this.tabablePrevOnEvent]);
+      }
+      if (nextCtrl = this.selector.tabable.nextCtrl) {
+        listeners.push(['click', nextCtrl, this.tabableNextOnEvent]);
+      }
+      return listeners;
+    }
+  });
+
+})));

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

@@ -0,0 +1,185 @@
+//= require ../kernel/index
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../kernel/index.js')) :
+  typeof define === 'function' && define.amd ? define(['../kernel/index.js'], factory) :
+  (factory());
+}(this, (function () { 'use strict';
+
+  luda.mixin('toggleable', {
+    // cls:
+    //   toggleable:
+    //     active: string  #required
+
+    // data:
+    //   toggleable:
+    //     interruption: string  # required
+    //     toggle: string        # optional
+
+    // default:
+    //   toggleable:
+    //     trigger: boolean  #optional
+
+    // evt:
+    //   toggleable:
+    //     activate: string     # required
+    //     activated: string    # required
+    //     deactivate: string   # required
+    //     deactivated: string  # required
+
+    // selector:
+    //   toggleable:
+    //     target: string  # optional
+    toggleableActivate: function() {
+      var evt;
+      if (this.toggleableActive()) {
+        return;
+      }
+      evt = this.toggleableTarget.trigger(this.evt.toggleable.activate, null, true)[0];
+      if (evt.isDefaultPrevented()) {
+        return;
+      }
+      clearTimeout(this.toggleableDeactivating);
+      delete this.toggleableDeactivating;
+      this.root.addClass(this.cls.toggleable.active);
+      this.toggleableActivating = setTimeout(() => {
+        delete this.toggleableActivating;
+        return this.toggleableTarget.trigger(this.evt.toggleable.activated);
+      }, this.toggleableTarget.transitionDuration());
+      return true;
+    },
+    toggleableDeactivate: function() {
+      var evt;
+      if (!this.toggleableActive()) {
+        return;
+      }
+      evt = this.toggleableTarget.trigger(this.evt.toggleable.deactivate, null, true)[0];
+      if (evt.isDefaultPrevented()) {
+        return;
+      }
+      clearTimeout(this.toggleableActivating);
+      delete this.toggleableActivating;
+      this.root.removeClass(this.cls.toggleable.active);
+      this.toggleableDeactivating = setTimeout(() => {
+        delete this.toggleableDeactivating;
+        return this.toggleableTarget.trigger(this.evt.toggleable.deactivated);
+      }, this.toggleableTarget.transitionDuration());
+      return true;
+    },
+    toggleableToggle: function(force) {
+      if (force === true) {
+        return this.toggleableActivate();
+      }
+      if (force === false) {
+        return this.toggleableDeactivate();
+      }
+      if (this.toggleableActive()) {
+        return this.toggleableDeactivate();
+      } else {
+        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()) {
+        return this.toggleableFocused = document.activeElement;
+      }
+      if (!this.toggleableFocused) {
+        return;
+      }
+      if ('focus' in (ins = luda(this.toggleableFocused))) {
+        return ins.focus(!e.detail, e.detail);
+      } else {
+        return this.toggleableFocused.focus({
+          preventScroll: e.detail
+        });
+      }
+    },
+    toggleableActivateOnEvent: function(e) {
+      if (!(this.toggleableTriggerable(e) && this.toggleableActivate())) {
+        return;
+      }
+      this.toggleableFocusOpener(e);
+      return true;
+    },
+    toggleableDeactivateOnEvent: function(e) {
+      if (!(this.toggleableTriggerable(e) && this.toggleableDeactivate())) {
+        return;
+      }
+      this.toggleableFocusOpener(e);
+      return true;
+    },
+    toggleableToggleOnEvent: function(e) {
+      if (!(this.toggleableTriggerable(e) && this.toggleableToggle())) {
+        return;
+      }
+      this.toggleableFocusOpener(e);
+      return true;
+    },
+    toggleableCreate: function() {
+      var dataAttr, evt, interruption;
+      dataAttr = this.data.toggleable.interruption;
+      if (!(interruption = this.root.data(dataAttr))) {
+        return;
+      }
+      evt = this.evt.toggleable[interruption];
+      this.root.removeData(dataAttr);
+      return this.toggleableTarget.trigger(evt);
+    },
+    toggleableDestroy: function() {
+      var interruption;
+      if ('toggleableActivating' in this) {
+        interruption = 'activated';
+        clearTimeout(this.toggleableActivating);
+      } else if ('toggleableDeactivating' in this) {
+        interruption = 'deactivated';
+        clearTimeout(this.toggleableDeactivating);
+      }
+      return interruption && this.root.data(this.data.toggleable.interruption, interruption);
+    },
+    toggleableFind: function() {
+      var ref, ref1, target;
+      target = (ref = this.selector) != null ? (ref1 = ref.toggleable) != null ? ref1.target : void 0 : void 0;
+      return {
+        toggleableTarget: target || function() {
+          return this.root;
+        }
+      };
+    }
+  });
+
+})));