luda 0.1.11 → 0.1.12

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

@@ -2,57 +2,65 @@
 //= require ../constants
 //= require ../dom
 //= require ../event
-//= require ../component
+//= require ../factory
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../install.js'), require('../constants.js'), require('../dom.js'), require('../event.js'), require('../component.js')) :
-  typeof define === 'function' && define.amd ? define(['../install.js', '../constants.js', '../dom.js', '../event.js', '../component.js'], 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) :
   (factory());
 }(this, (function () { 'use strict';
 
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Component {
-      active() {
+    _Class = class extends luda.Factory {
+      activate() {
         var ref;
-        if (!this._actived()) {
-          this._$component.classList.add(this.constructor._ACTIVE_CSS_CLASS);
-          this.constructor._$focused.push(document.activeElement);
-          if ((ref = this._parent) != null) {
-            ref.active();
-          }
-          return luda.dispatch(this._$component, this.constructor._ACTIVED_EVENT_TYPE);
+        if (this._isActive() || this._isTransitioning()) {
+          return;
+        }
+        if (this._activatePrevented(this._$menu)) {
+          return;
         }
+        this._$component.classList.add(this.constructor._ACTIVE_CSS_CLASS);
+        this.constructor._$focused.push(document.activeElement);
+        if ((ref = this._parent) != null) {
+          ref.activate();
+        }
+        return this._handleActivateEnd(this._$menu);
       }
 
-      deactive(focus) {
+      deactivate(focus) {
         var ref;
-        if (this._actived()) {
-          this._$component.classList.remove(this.constructor._ACTIVE_CSS_CLASS);
-          this._children.forEach(function(child) {
-            return child.deactive();
-          });
-          if (focus) {
-            if ((ref = this.constructor._$focused[this.constructor._$focused.length - 1]) != null) {
-              ref.focus();
-            }
+        if (!(this._isActive() && !this._isTransitioning())) {
+          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 luda.dispatch(this._$component, this.constructor._DEACTIVED_EVENT_TYPE);
         }
+        this.constructor._$focused.splice(this.constructor._$focused.length - 1, 1);
+        return this._handleDeactivateEnd(this._$menu);
       }
 
       toggle(focus) {
-        if (this._actived()) {
-          return this.deactive(focus);
+        if (this._isActive()) {
+          return this.deactivate(focus);
         } else {
-          return this.active();
+          return this.activate();
         }
       }
 
-      prev() {
+      _prev() {
         var focusIndex;
-        if (this._$items.length && this._actived()) {
+        if (this._$items.length && this._isActive()) {
           focusIndex = this._$items.indexOf(document.activeElement) - 1;
           if (focusIndex < 0) {
             focusIndex = 0;
@@ -61,9 +69,9 @@
         }
       }
 
-      next() {
+      _next() {
         var focusIndex;
-        if (this._$items.length && this._actived()) {
+        if (this._$items.length && this._isActive()) {
           focusIndex = this._$items.indexOf(document.activeElement) + 1;
           if (focusIndex > this._$items.length - 1) {
             focusIndex = this._$items.length - 1;
@@ -79,41 +87,55 @@
         _$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 {_$items, _$switches, _$noneSwitches, _isStandalone};
+        return {_$menu, _$items, _$switches, _$noneSwitches, _isStandalone};
       }
 
       _constructor() {
-        return ({_$items: this._$items, _$switches: this._$switches, _$noneSwitches: this._$noneSwitches, _isStandalone: this._isStandalone} = this._getConfig());
+        this._onMutations();
+        this._handleActivateCancel(this._$menu);
+        return this._handleDeactivateCancel(this._$menu);
       }
 
       _onMutations(mutations) {
-        return this._constructor();
+        return ({_$menu: this._$menu, _$items: this._$items, _$switches: this._$switches, _$noneSwitches: this._$noneSwitches, _isStandalone: this._isStandalone} = this._getConfig());
       }
 
-      _actived() {
+      _isActive() {
         return this._$component.classList.contains(this.constructor._ACTIVE_CSS_CLASS);
       }
 
-      _deactiveChildrenExcept(exceptions) {
+      _deactivateChildrenExcept(exceptions) {
         if (exceptions && !(exceptions instanceof Array)) {
           exceptions = [exceptions];
         }
         if (exceptions) {
           return this._children.forEach(function(child) {
-            if (child._actived() && !exceptions.includes(child)) {
-              return child.deactive();
+            if (child._isActive() && !exceptions.includes(child)) {
+              return child.deactivate();
             }
           });
         } else {
           return this._children.forEach(function(child) {
-            if (child._actived()) {
-              return child.deactive();
+            if (child._isActive()) {
+              return child.deactivate();
             }
           });
         }
       }
 
-      static deactiveExcept(instances$dropdowns) {
+      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)) {
@@ -134,14 +156,14 @@
             instanceHasntExceptionChild = exceptions.every(function(exception) {
               return !instance._hasDescendant(exception);
             });
-            if (instance._actived() && instanceIsntInExceptions && instanceHasntExceptionChild) {
-              return instance.deactive();
+            if (instance._isActive() && instanceIsntInExceptions && instanceHasntExceptionChild) {
+              return instance.deactivate();
             }
           });
         } else {
           return this._instances.forEach(function(instance) {
-            if (instance._actived()) {
-              return instance.deactive();
+            if (instance._isActive()) {
+              return instance.deactivate();
             }
           });
         }
@@ -159,17 +181,17 @@
         var self;
         self = this;
         luda.onOpposite('click', this._SELECTOR, function(e) {
-          return self.deactiveExcept(self._standaloneInstances());
+          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.deactiveExcept(self._standaloneInstances().concat(instance));
-            instance._deactiveChildrenExcept();
+            self.deactivateExcept(self._standaloneInstances().concat(instance));
+            instance._deactivateChildrenExcept();
             if (instance._parent) {
-              instance._parent._deactiveChildrenExcept(instance);
+              instance._parent._deactivateChildrenExcept(instance);
             }
             if (instance._$switches.length || instance._$noneSwitches.length) {
               luda.eventPath(e).some(function($path) {
@@ -187,23 +209,23 @@
           }
         });
         luda.onOpposite('keyup', this._SELECTOR, function(e) {
-          return self.deactiveExcept();
+          return self.deactivateExcept();
         });
         luda.on('keyup', this._SELECTOR, function(e) {
           var instance;
           if (e.keyCode === luda.KEY_TAB && (instance = self.query(this))) {
-            self.deactiveExcept(instance);
-            return instance.active();
+            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._actived()) {
-              return instance.deactive(true);
+            if (instance._isActive()) {
+              return instance.deactivate(true);
             } else {
-              return (ref = instance._parent) != null ? ref.deactive(true) : void 0;
+              return (ref = instance._parent) != null ? ref.deactivate(true) : void 0;
             }
           }
         });
@@ -211,17 +233,17 @@
           var instance, ref, ref1;
           if ([luda.KEY_LEFT, luda.KEY_UP].includes(e.keyCode) && (instance = self.query(this))) {
             e.preventDefault();
-            if (instance._actived()) {
-              return instance.prev();
+            if (instance._isActive()) {
+              return instance._prev();
             } else {
-              return (ref = instance._parent) != null ? ref.prev() : void 0;
+              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._actived()) {
-              return instance.next();
+            if (instance._isActive()) {
+              return instance._next();
             } else {
-              return (ref1 = instance._parent) != null ? ref1.next() : void 0;
+              return (ref1 = instance._parent) != null ? ref1._next() : void 0;
             }
           }
         });
@@ -239,25 +261,21 @@
 
     _Class._TOGGLE_ATTRIBUTE = 'data-dropdown-toggle';
 
-    _Class._NONE_TOGGLE_ATTRIBUTE = 'data-dropdown-toggle-disabled';
+    _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._NONE_TOGGLE_ATTRIBUTE}]`;
+    _Class._NONE_SWITCHES_SELECTOR = `[${_Class._TOGGLE_DISABLED_ATTRIBUTE}]`;
 
     _Class._ACTIVE_CSS_CLASS = 'dropdown-active';
 
-    _Class._ACTIVED_EVENT_TYPE = `${_Class._SCOPE}:actived`;
-
-    _Class._DEACTIVED_EVENT_TYPE = `${_Class._SCOPE}:deactived`;
-
     _Class._observerConfig = {
       childList: true,
       attributes: true,
       subtree: true,
-      attributeFilter: [_Class._TOGGLE_ATTRIBUTE, _Class._NONE_TOGGLE_ATTRIBUTE, _Class._STANDALONE_ATTRIBUTE]
+      attributeFilter: [_Class._TOGGLE_ATTRIBUTE, _Class._TOGGLE_DISABLED_ATTRIBUTE, _Class._STANDALONE_ATTRIBUTE]
     };
 
     _Class._$focused = [];

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

@@ -1,19 +1,19 @@
 //= require ../install
 //= require ../dom
 //= require ../event
-//= require ../component
+//= require ../factory
 //= require ../behaviors/focus
-//= require ../behaviors/enter-click
+//= require ../behaviors/enter
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../install.js'), require('../dom.js'), require('../event.js'), require('../component.js'), require('../behaviors/focus.js'), require('../behaviors/enter-click.js')) :
-  typeof define === 'function' && define.amd ? define(['../install.js', '../dom.js', '../event.js', '../component.js', '../behaviors/focus.js', '../behaviors/enter-click.js'], 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) :
   (factory());
 }(this, (function () { 'use strict';
 
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Component {
+    _Class = class extends luda.Factory {
       _getConfig() {
         var _$defaultValues, _$valueHolder, _$values;
         _$values = luda.$children(this.constructor._VALUE_SELECTOR, this._$component);
@@ -62,7 +62,7 @@
       static _init() {
         var self;
         self = this;
-        luda.enterClick._add(this._ENTER_CLICK_VALUE_HOLDER_SELECTOR);
+        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();
         });
@@ -73,7 +73,7 @@
         });
         // 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_CLICK_VALUE_HOLDER_SELECTOR, function(e) {
+          return luda.on('focusin', this._ENTER_BEHAVIOR_SELECTOR, function(e) {
             this.blur();
             return this.classList.add(luda.focus._CSS_CLASS);
           });
@@ -96,7 +96,7 @@
 
     _Class._VALUE_HOLDER_SELECTOR = '.fm input';
 
-    _Class._ENTER_CLICK_VALUE_HOLDER_SELECTOR = '.fm-dropdown .fm input';
+    _Class._ENTER_BEHAVIOR_SELECTOR = '.fm-dropdown .fm input';
 
     _Class._observerConfig = {
       childList: true,

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

@@ -1,26 +1,29 @@
 //= require ../install
 //= require ../dom
 //= require ../event
-//= require ../component
+//= require ../factory
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../install.js'), require('../dom.js'), require('../event.js'), require('../component.js')) :
-  typeof define === 'function' && define.amd ? define(['../install.js', '../dom.js', '../event.js', '../component.js'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../install.js'), require('../dom.js'), require('../event.js'), require('../factory.js')) :
+  typeof define === 'function' && define.amd ? define(['../install.js', '../dom.js', '../event.js', '../factory.js'], factory) :
   (factory());
 }(this, (function () { 'use strict';
 
   luda((function() {
     var _Class;
 
-    _Class = class extends luda.Component {
+    _Class = class extends luda.Factory {
       
       // public
-      active(index) {
-        var activedIndex;
-        if (this._$panes.length) {
-          activedIndex = this._activeIndex;
+      activate(index) {
+        var activatedIndex;
+        if (this._$panes.length && !this._isTransitioning()) {
+          activatedIndex = this._activeIndex;
           if ((index != null) && index !== this._activeIndex && (0 <= index && index <= this._$panes.length - 1)) {
+            if (!this._canTransition(index, activatedIndex)) {
+              return;
+            }
             this._activeIndex = index;
-            return this._active(activedIndex);
+            return this._activate(activatedIndex);
           }
         }
       }
@@ -42,38 +45,77 @@
 
       _constructor() {
         ({_$panes: this._$panes, _$indicators: this._$indicators, _activeIndex: this._activeIndex} = this._getConfig());
-        return this._active();
+        this._layout();
+        return this._handleTransitionCancel();
       }
 
       _onMutations(mutations) {
-        return this._constructor();
+        ({_$panes: this._$panes, _$indicators: this._$indicators, _activeIndex: this._activeIndex} = this._getConfig());
+        return this._setIndicatorsState();
       }
 
-      _active(activedIndex) {
+      _layout() {
         this._$panes.forEach(($pane, index) => {
+          $pane.style.transition = 'none';
           if (index === this._activeIndex) {
             $pane.classList.add(this.constructor._PANE_ACTIVE_CSS_CLASS);
-            return luda.dispatch($pane, this.constructor._ACTIVED_EVENT_TYPE, index);
           } else {
             $pane.classList.remove(this.constructor._PANE_ACTIVE_CSS_CLASS);
-            if (index === activedIndex) {
-              return luda.dispatch($pane, this.constructor._DEACTIVED_EVENT_TYPE, index);
-            }
           }
+          luda.reflow($pane);
+          return $pane.style.transition = '';
         });
         return this._setIndicatorsState();
       }
 
+      _activate(activatedIndex) {
+        var $activatedPane, $pane;
+        $pane = this._$panes[this._activeIndex];
+        $activatedPane = this._$panes[activatedIndex];
+        $pane.classList.add(this.constructor._PANE_ACTIVE_CSS_CLASS);
+        $activatedPane.classList.remove(this.constructor._PANE_ACTIVE_CSS_CLASS);
+        this._handleTransitionEnd(this._activeIndex, activatedIndex);
+        return this._setIndicatorsState();
+      }
+
+      _canTransition(activeIndex, activatedIndex) {
+        return !this._activatePrevented(this._$panes[activeIndex], activeIndex) && !this._deactivatePrevented(this._$panes[activatedIndex], activatedIndex);
+      }
+
+      _handleTransitionEnd(activeIndex, activatedIndex) {
+        var activateDuration, deactivateDuration;
+        activateDuration = this._handleActivateEnd(this._$panes[activeIndex], activeIndex);
+        return deactivateDuration = this._handleDeactivateEnd(this._$panes[activatedIndex], activatedIndex);
+      }
+
+      _handleTransitionCancel() {
+        var activatedIndex, index;
+        if (this._isActivating()) {
+          index = parseInt(this._getActivatingMark(), 10);
+          this._handleActivateCancel(this._$panes[index], index);
+        }
+        if (this._isDeactivating()) {
+          activatedIndex = parseInt(this._getDeactivatingMark(), 10);
+          return this._handleDeactivateCancel(this._$panes[activatedIndex], activatedIndex);
+        }
+      }
+
       _setIndicatorsState() {
         return this._$indicators.forEach(($indicator, index) => {
           if (index === this._activeIndex) {
-            return $indicator.setAttribute('checked', '');
+            $indicator.setAttribute('checked', '');
+            return $indicator.checked = true;
           } else {
-            return $indicator.removeAttribute('checked');
+            $indicator.removeAttribute('checked');
+            return $indicator.checked = false;
           }
         });
       }
 
+      static activate($tab, index) {
+        return this.query($tab).activate(index);
+      }
+
       // static private
       static _init() {
         var self;
@@ -82,7 +124,8 @@
           var instance;
           if (this.checked) {
             instance = self.query(luda.$parent(self._SELECTOR, this));
-            return instance.active(instance._$indicators.indexOf(this));
+            instance._setIndicatorsState();
+            return instance.activate(instance._$indicators.indexOf(this));
           }
         });
       }
@@ -101,10 +144,6 @@
 
     _Class._ACTIVE_INDEX = 0;
 
-    _Class._ACTIVED_EVENT_TYPE = `${_Class._SCOPE}:actived`;
-
-    _Class._DEACTIVED_EVENT_TYPE = `${_Class._SCOPE}:deactived`;
-
     _Class._observerConfig = {
       childList: true,
       subtree: true