luda 0.2.0 → 0.3.0

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

@@ -1,287 +1,148 @@
-//= require ../install
-//= require ../constants
-//= require ../dom
-//= require ../event
-//= require ../factory
+//= require ../kernel/index
+//= require ../mixins/toggleable
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../install.js'), require('../constants.js'), require('../dom.js'), require('../event.js'), require('../factory.js')) :
-  typeof define === 'function' && define.amd ? define(['../install.js', '../constants.js', '../dom.js', '../event.js', '../factory.js'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../kernel/index.js'), require('../mixins/toggleable.js')) :
+  typeof define === 'function' && define.amd ? define(['../kernel/index.js', '../mixins/toggleable.js'], factory) :
   (factory());
 }(this, (function () { 'use strict';
 
-  luda((function() {
-    var _Class;
-
-    _Class = class extends luda.Factory {
-      activate() {
-        var ref;
-        if (this._isActive() || this._isTransitioning()) {
-          return;
-        }
-        if (this._activatePrevented(this._$menu)) {
+  luda.component('dropdown', '.dropdown-absolute, .dropdown-static, .dropdown-fixed, .dropdown-static-m').protect({
+    cls: {
+      toggleable: {
+        active: 'dropdown-active'
+      }
+    },
+    data: {
+      standalone: 'data-dropdown-standalone',
+      toggleable: {
+        interruption: 'data-dropdown_interruption',
+        trigger: 'data-dropdownable'
+      }
+    },
+    default: {
+      toggleable: {
+        trigger: true
+      }
+    },
+    evt: {
+      toggleable: {
+        activate: 'luda:dropdown:activate',
+        activated: 'luda:dropdown:activated',
+        deactivate: 'luda:dropdown:deactivate',
+        deactivated: 'luda:dropdown:deactivated'
+      }
+    },
+    selector: {
+      items: 'a[href]:not([disabled]),button:not([disabled]), input:not([disabled]),[tabindex]:not([disabled]), area[href]:not([disabled]),iframe:not([disabled])',
+      toggleable: {
+        target: '.dropdown-menu'
+      }
+    }
+  }).include(luda.mixin('toggleable').alias({
+    activate: 'toggleableActivate',
+    deactivate: 'toggleableDeactivate',
+    toggle: 'toggleableToggle'
+  })).protect(luda.mixin('toggleable').all()).protect({
+    parent: function() {
+      var rootEl;
+      rootEl = this.parentRoot.els[0];
+      if (rootEl) {
+        return this.con.create(rootEl)[0];
+      } else {
+        return null;
+      }
+    },
+    escDeactivate: function(e) {
+      var parent;
+      if (this.toggleableActive()) {
+        return this.toggleableDeactivateOnEvent(e);
+      } else if (parent = this.parent()) {
+        return parent.escDeactivate(e);
+      }
+    },
+    prevItem: function(e) {
+      var index, items, parent;
+      if (this.toggleableActive()) {
+        if (!(items = this.items.els).length) {
           return;
         }
-        this._$component.classList.add(this.constructor._ACTIVE_CSS_CLASS);
-        this.constructor._$focused.push(document.activeElement);
-        if ((ref = this._parent) != null) {
-          ref.activate();
+        index = items.indexOf(document.activeElement) - 1;
+        if (index < 0) {
+          index = 0;
         }
-        return this._handleActivateEnd(this._$menu);
-      }
-
-      deactivate(focus) {
-        var ref;
-        if (!(this._isActive() && !this._isTransitioning())) {
+        return items[index].focus();
+      } else if (parent = this.parent()) {
+        return parent.prevItem(e);
+      }
+    },
+    nextItem: function(e) {
+      var index, items, parent;
+      if (this.toggleableActive()) {
+        if (!(items = this.items.els).length) {
           return;
         }
-        if (this._deactivatePrevented(this._$menu)) {
-          return;
-        }
-        this._$component.classList.remove(this.constructor._ACTIVE_CSS_CLASS);
-        this._children.forEach(function(child) {
-          return child.deactivate();
-        });
-        if (focus) {
-          if ((ref = this.constructor._$focused[this.constructor._$focused.length - 1]) != null) {
-            ref.focus();
-          }
-        }
-        this.constructor._$focused.splice(this.constructor._$focused.length - 1, 1);
-        return this._handleDeactivateEnd(this._$menu);
-      }
-
-      toggle(focus) {
-        if (this._isActive()) {
-          return this.deactivate(focus);
-        } else {
-          return this.activate();
-        }
-      }
-
-      _prev() {
-        var focusIndex;
-        if (this._$items.length && this._isActive()) {
-          focusIndex = this._$items.indexOf(document.activeElement) - 1;
-          if (focusIndex < 0) {
-            focusIndex = 0;
-          }
-          return this._$items[focusIndex].focus();
-        }
-      }
-
-      _next() {
-        var focusIndex;
-        if (this._$items.length && this._isActive()) {
-          focusIndex = this._$items.indexOf(document.activeElement) + 1;
-          if (focusIndex > this._$items.length - 1) {
-            focusIndex = this._$items.length - 1;
-          }
-          return this._$items[focusIndex].focus();
-        }
-      }
-
-      _getConfig() {
-        var _$items, _$menu, _$noneSwitches, _$switches, _isStandalone;
-        _$menu = luda.$child(this.constructor._MENU_SELECTOR, this._$component);
-        _$switches = luda.$unnested(this.constructor._SWITCHES_SELECTOR, this._$component, this.constructor._SELECTOR).concat(luda.$unnested(this.constructor._SWITCHES_SELECTOR, _$menu, this.constructor._MENU_SELECTOR));
-        _$noneSwitches = luda.$unnested(this.constructor._NONE_SWITCHES_SELECTOR, this._$component, this.constructor._SELECTOR).concat(luda.$unnested(this.constructor._NONE_SWITCHES_SELECTOR, _$menu, this.constructor._MENU_SELECTOR));
-        _$items = luda.$unnested(this.constructor._ITEMS_SELECTOR, _$menu, this.constructor._MENU_SELECTOR);
-        _isStandalone = this._$component.hasAttribute(this.constructor._STANDALONE_ATTRIBUTE);
-        return {_$menu, _$items, _$switches, _$noneSwitches, _isStandalone};
-      }
-
-      _constructor() {
-        this._onMutations();
-        this._handleActivateCancel(this._$menu);
-        return this._handleDeactivateCancel(this._$menu);
-      }
-
-      _onMutations(mutations) {
-        return ({_$menu: this._$menu, _$items: this._$items, _$switches: this._$switches, _$noneSwitches: this._$noneSwitches, _isStandalone: this._isStandalone} = this._getConfig());
-      }
-
-      _isActive() {
-        return this._$component.classList.contains(this.constructor._ACTIVE_CSS_CLASS);
-      }
-
-      _deactivateChildrenExcept(exceptions) {
-        if (exceptions && !(exceptions instanceof Array)) {
-          exceptions = [exceptions];
-        }
-        if (exceptions) {
-          return this._children.forEach(function(child) {
-            if (child._isActive() && !exceptions.includes(child)) {
-              return child.deactivate();
-            }
-          });
-        } else {
-          return this._children.forEach(function(child) {
-            if (child._isActive()) {
-              return child.deactivate();
-            }
-          });
-        }
-      }
-
-      static activate($dropdown) {
-        return this.query($dropdown).activate();
-      }
-
-      static deactivate($dropdown, focus) {
-        return this.query($dropdown).deactivate(focus);
-      }
-
-      static toggle($dropdown, focus) {
-        return this.query($dropdown).toggle(focus);
-      }
-
-      static deactivateExcept(instances$dropdowns) {
-        var exceptions;
-        exceptions = [];
-        if (instances$dropdowns && !(instances$dropdowns instanceof Array)) {
-          instances$dropdowns = [instances$dropdowns];
+        index = items.indexOf(document.activeElement) + 1;
+        if (index >= items.length) {
+          index = items.length - 1;
         }
-        if (instances$dropdowns) {
-          instances$dropdowns.forEach((instance$dropdown) => {
-            var exception;
-            if (exception = this.query(instance$dropdown)) {
-              return exceptions.push(exception);
-            }
+        return items[index].focus();
+      } else if (parent = this.parent()) {
+        return parent.nextItem(e);
+      }
+    }
+  }).help({
+    find: function() {
+      return Object.assign(this.toggleableFind(), {
+        parentRoot: function() {
+          return this.root.parent(this.con.root);
+        },
+        items: function() {
+          var menu, self;
+          self = this;
+          menu = this.toggleableTarget;
+          return menu.find(this.selector.items).filter(function(el) {
+            var parentMenu;
+            parentMenu = luda(el).parent(self.selector.toggleable.target);
+            return parentMenu.els[0] === menu.els[0];
           });
         }
-        if (exceptions.length) {
-          return this._instances.forEach(function(instance) {
-            var instanceHasntExceptionChild, instanceIsntInExceptions;
-            instanceIsntInExceptions = !exceptions.includes(instance);
-            instanceHasntExceptionChild = exceptions.every(function(exception) {
-              return !instance._hasDescendant(exception);
+      });
+    },
+    listen: function() {
+      var self;
+      self = this;
+      return [
+        ['click',
+        this.toggleableToggleOnEvent],
+        ['keyup@tab',
+        this.toggleableActivateOnEvent],
+        ['keydown@esc&prevent',
+        this.escDeactivate],
+        ['keydown@left@up&prevent',
+        this.prevItem],
+        ['keydown@right@down&prevent',
+        this.nextItem],
+        [
+          'click keyup@tab',
+          function(e) {
+            var exceptions;
+            exceptions = [];
+            e.eventPath().forEach(function(el) {
+              return self.con.contains(el) && exceptions.push(el);
+            });
+            return self.con.each(function(ins,
+          rootEl) {
+              var isExcepted,
+          isStandalone;
+              isExcepted = exceptions.includes(rootEl);
+              isStandalone = ins.root.hasData(self.data.standalone);
+              !isExcepted && !isStandalone && ins.deactivate();
+              return true;
             });
-            if (instance._isActive() && instanceIsntInExceptions && instanceHasntExceptionChild) {
-              return instance.deactivate();
-            }
-          });
-        } else {
-          return this._instances.forEach(function(instance) {
-            if (instance._isActive()) {
-              return instance.deactivate();
-            }
-          });
-        }
-      }
-
-      static _standaloneInstances() {
-        return this._instances.filter(function(instance) {
-          if (instance._isStandalone) {
-            return instance;
-          }
-        });
-      }
-
-      static _init() {
-        var self;
-        self = this;
-        luda.onOpposite('click', this._SELECTOR, function(e) {
-          return self.deactivateExcept(self._standaloneInstances());
-        });
-        luda.on('click', this._SELECTOR, function(e) {
-          var focus, instance, toggleChecked;
-          if (instance = self.query(this)) {
-            toggleChecked = false;
-            focus = !e.detail;
-            self.deactivateExcept(self._standaloneInstances().concat(instance));
-            instance._deactivateChildrenExcept();
-            if (instance._parent) {
-              instance._parent._deactivateChildrenExcept(instance);
-            }
-            if (instance._$switches.length || instance._$noneSwitches.length) {
-              luda.eventPath(e).some(function($path) {
-                if (instance._$switches.includes($path)) {
-                  instance.toggle(focus);
-                  return toggleChecked = true;
-                } else if (instance._$noneSwitches.includes($path)) {
-                  return toggleChecked = true;
-                }
-              });
-            }
-            if (!toggleChecked) {
-              return instance.toggle(focus);
-            }
-          }
-        });
-        luda.onOpposite('keyup', this._SELECTOR, function(e) {
-          return self.deactivateExcept();
-        });
-        luda.on('keyup', this._SELECTOR, function(e) {
-          var instance;
-          if (e.keyCode === luda.KEY_TAB && (instance = self.query(this))) {
-            self.deactivateExcept(instance);
-            return instance.activate();
-          }
-        });
-        luda.on('keydown', this._SELECTOR, function(e) {
-          var instance, ref;
-          if (e.keyCode === luda.KEY_ESC && (instance = self.query(this))) {
-            e.preventDefault();
-            if (instance._isActive()) {
-              return instance.deactivate(true);
-            } else {
-              return (ref = instance._parent) != null ? ref.deactivate(true) : void 0;
-            }
-          }
-        });
-        return luda.on('keydown', this._SELECTOR, function(e) {
-          var instance, ref, ref1;
-          if ([luda.KEY_LEFT, luda.KEY_UP].includes(e.keyCode) && (instance = self.query(this))) {
-            e.preventDefault();
-            if (instance._isActive()) {
-              return instance._prev();
-            } else {
-              return (ref = instance._parent) != null ? ref._prev() : void 0;
-            }
-          } else if ([luda.KEY_RIGHT, luda.KEY_DOWN].includes(e.keyCode) && (instance = self.query(this))) {
-            e.preventDefault();
-            if (instance._isActive()) {
-              return instance._next();
-            } else {
-              return (ref1 = instance._parent) != null ? ref1._next() : void 0;
-            }
           }
-        });
-      }
-
-    };
-
-    _Class._SCOPE = 'dropdown';
-
-    _Class._SELECTOR = '.dropdown-fixed,.dropdown-absolute, .dropdown-static,.dropdown-absolute-m';
-
-    _Class._MENU_SELECTOR = '.dropdown-menu';
-
-    _Class._ITEMS_SELECTOR = 'a[href]:not([disabled]),button:not([disabled]), input:not([disabled]),[tabindex]:not([disabled])';
-
-    _Class._TOGGLE_ATTRIBUTE = 'data-dropdown-toggle';
-
-    _Class._TOGGLE_DISABLED_ATTRIBUTE = 'data-dropdown-toggle-disabled';
-
-    _Class._STANDALONE_ATTRIBUTE = 'data-dropdown-standalone';
-
-    _Class._SWITCHES_SELECTOR = `[${_Class._TOGGLE_ATTRIBUTE}]`;
-
-    _Class._NONE_SWITCHES_SELECTOR = `[${_Class._TOGGLE_DISABLED_ATTRIBUTE}]`;
-
-    _Class._ACTIVE_CSS_CLASS = 'dropdown-active';
-
-    _Class._observerConfig = {
-      childList: true,
-      attributes: true,
-      subtree: true,
-      attributeFilter: [_Class._TOGGLE_ATTRIBUTE, _Class._TOGGLE_DISABLED_ATTRIBUTE, _Class._STANDALONE_ATTRIBUTE]
-    };
-
-    _Class._$focused = [];
-
-    return _Class;
-
-  }).call(this));
+        ]
+      ];
+    }
+  });
 
 })));

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

@@ -1,112 +1,67 @@
-//= require ../install
-//= require ../dom
-//= require ../event
-//= require ../factory
-//= require ../behaviors/focus
-//= require ../behaviors/enter
+//= require ../kernel/index
+//= require ../mixins/resetable
+//= require ./dropdown
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../install.js'), require('../dom.js'), require('../event.js'), require('../factory.js'), require('../behaviors/focus.js'), require('../behaviors/enter.js')) :
-  typeof define === 'function' && define.amd ? define(['../install.js', '../dom.js', '../event.js', '../factory.js', '../behaviors/focus.js', '../behaviors/enter.js'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../kernel/index.js'), require('../mixins/resetable.js'), require('./dropdown.js')) :
+  typeof define === 'function' && define.amd ? define(['../kernel/index.js', '../mixins/resetable.js', './dropdown.js'], factory) :
   (factory());
 }(this, (function () { 'use strict';
 
-  luda((function() {
-    var _Class;
-
-    _Class = class extends luda.Factory {
-      _getConfig() {
-        var _$defaultValues, _$valueHolder, _$values;
-        _$values = luda.$children(this.constructor._VALUE_SELECTOR, this._$component);
-        _$defaultValues = luda.$children(this.constructor._DEFAULT_VALUE_SELECTOR, this._$component);
-        _$valueHolder = luda.$child(this.constructor._VALUE_HOLDER_SELECTOR, this._$component);
-        return {_$values, _$valueHolder, _$defaultValues};
-      }
-
-      _constructor() {
-        ({_$values: this._$values, _$valueHolder: this._$valueHolder, _$defaultValues: this._$defaultValues} = this._getConfig());
-        this._setValueHolderAttribute();
-        return this._setValueHolderValue();
-      }
-
-      _onMutations() {
-        return this._constructor();
-      }
-
-      _setValueHolderValue() {
-        var values;
-        values = [];
-        this._$values.forEach(($value, index) => {
-          var value;
-          if ($value.checked) {
-            if ($value.hasAttribute(this.constructor._LABEL_ATTRIBUTE)) {
-              value = $value.getAttribute(this.constructor._LABEL_ATTRIBUTE);
-            } else {
-              value = this._$defaultValues[index].innerText;
-            }
-          }
-          if (value && !values.includes(value)) {
-            return values.push(value);
-          }
-        });
-        if (this._$valueHolder) {
-          return this._$valueHolder.value = values.join(this.constructor._VALUE_SPLITOR);
-        }
-      }
-
-      _setValueHolderAttribute() {
-        if (this._$valueHolder) {
-          return this._$valueHolder.setAttribute('readonly', '');
+  luda.component('fmDropdown').protect({
+    selector: {
+      options: '.dropdown-items .btn-radio input, .dropdown-items .btn-check input',
+      labels: '.dropdown-items .btn-radio label, .dropdown-items .btn-check label',
+      simulator: '.fm input'
+    },
+    data: {
+      label: 'fm-dropdown-label'
+    },
+    splitor: '   '
+  }).protect({
+    disableSimulator: function() {
+      return this.simulator.data('auto', false).attr('readonly', '');
+    },
+    updateValue: function() {
+      var values;
+      values = [];
+      this.options.els.forEach((input, index) => {
+        var label, value;
+        if (!input.checked) {
+          return;
         }
-      }
-
-      static _init() {
-        var self;
-        self = this;
-        luda.enter._add(this._ENTER_BEHAVIOR_SELECTOR);
-        luda.on('change', `${this._SELECTOR} ${this._VALUE_SELECTOR}`, function(e) {
-          return self.query(luda.$parent(self._SELECTOR, this))._setValueHolderValue();
-        });
-        luda.on(luda._FORM_RESET, this._SELECTOR, function(e) {
-          return setTimeout(() => {
-            return self.query(this)._setValueHolderValue();
-          });
-        });
-        // prevent ios device pop out wired navigation pannel
-        if (/iphone/i.test(navigator.userAgent) || /ipad/i.test(navigator.userAgent)) {
-          return luda.on('focusin', this._ENTER_BEHAVIOR_SELECTOR, function(e) {
-            this.blur();
-            return this.classList.add(luda.focus._CSS_CLASS);
-          });
+        label = luda(this.labels.els[index]);
+        value = label.data(this.data.label) || label.text();
+        if (value && !values.includes(value)) {
+          return values.push(value);
         }
-      }
-
-    };
-
-    _Class._SCOPE = 'fmDropdown';
-
-    _Class._SELECTOR = '.fm-dropdown';
-
-    _Class._VALUE_SPLITOR = '   ';
-
-    _Class._LABEL_ATTRIBUTE = 'data-fm-dropdown-label';
-
-    _Class._VALUE_SELECTOR = '.dropdown-items .btn-radio input, .dropdown-items .btn-check input';
-
-    _Class._DEFAULT_VALUE_SELECTOR = '.dropdown-items .btn-radio label, .dropdown-items .btn-check label';
-
-    _Class._VALUE_HOLDER_SELECTOR = '.fm input';
-
-    _Class._ENTER_BEHAVIOR_SELECTOR = '.fm-dropdown .fm input';
-
-    _Class._observerConfig = {
-      childList: true,
-      attributes: true,
-      subtree: true,
-      attributeFilter: ['checked', _Class._LABEL_ATTRIBUTE]
-    };
-
-    return _Class;
-
-  }).call(this));
+      });
+      return this.simulator.attr('value', values.join(this.splitor));
+    },
+    triggerClick: function() {
+      return this.simulator.trigger('click');
+    }
+  }).help({
+    find: function() {
+      return {
+        options: this.selector.options,
+        labels: this.selector.labels,
+        simulator: this.selector.simulator
+      };
+    },
+    create: function() {
+      this.disableSimulator();
+      return this.updateValue();
+    },
+    watch: function() {
+      return {
+        dom: [[this.selector.options, this.updateValue]],
+        attr: [['checked', this.selector.options, this.updateValue]]
+      };
+    },
+    listen: function() {
+      luda.mixin('resetable').get('listen').call(this, this.updateValue);
+      return [['change', this.selector.options, this.updateValue], ['keydown@enter', this.selector.simulator, this.triggerClick]];
+    }
+  });
 
 })));