luda 0.1.5

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

@@ -0,0 +1,269 @@
+//= require ../install
+//= require ../constants
+//= require ../dom
+//= require ../event
+//= require ../component
+(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) :
+  (factory());
+}(this, (function () { 'use strict';
+
+  luda((function() {
+    var _Class;
+
+    _Class = class extends luda.Component {
+      active() {
+        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);
+        }
+      }
+
+      deactive(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();
+            }
+          }
+          this.constructor._$focused.splice(this.constructor._$focused.length - 1, 1);
+          return luda.dispatch(this._$component, this.constructor._DEACTIVED_EVENT_TYPE);
+        }
+      }
+
+      toggle(focus) {
+        if (this._actived()) {
+          return this.deactive(focus);
+        } else {
+          return this.active();
+        }
+      }
+
+      prev() {
+        var focusIndex;
+        if (this._$items.length && this._actived()) {
+          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._actived()) {
+          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 {_$items, _$switches, _$noneSwitches, _isStandalone};
+      }
+
+      _constructor() {
+        return ({_$items: this._$items, _$switches: this._$switches, _$noneSwitches: this._$noneSwitches, _isStandalone: this._isStandalone} = this._getConfig());
+      }
+
+      _onMutations(mutations) {
+        return this._constructor();
+      }
+
+      _actived() {
+        return this._$component.classList.contains(this.constructor._ACTIVE_CSS_CLASS);
+      }
+
+      _deactiveChildrenExcept(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();
+            }
+          });
+        } else {
+          return this._children.forEach(function(child) {
+            if (child._actived()) {
+              return child.deactive();
+            }
+          });
+        }
+      }
+
+      static deactiveExcept(instances$dropdowns) {
+        var exceptions;
+        exceptions = [];
+        if (instances$dropdowns && !(instances$dropdowns instanceof Array)) {
+          instances$dropdowns = [instances$dropdowns];
+        }
+        if (instances$dropdowns) {
+          instances$dropdowns.forEach((instance$dropdown) => {
+            var exception;
+            if (exception = this.query(instance$dropdown)) {
+              return exceptions.push(exception);
+            }
+          });
+        }
+        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);
+            });
+            if (instance._actived() && instanceIsntInExceptions && instanceHasntExceptionChild) {
+              return instance.deactive();
+            }
+          });
+        } else {
+          return this._instances.forEach(function(instance) {
+            if (instance._actived()) {
+              return instance.deactive();
+            }
+          });
+        }
+      }
+
+      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.deactiveExcept(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();
+            if (instance._parent) {
+              instance._parent._deactiveChildrenExcept(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.deactiveExcept();
+        });
+        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();
+          }
+        });
+        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);
+            } else {
+              return (ref = instance._parent) != null ? ref.deactive(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._actived()) {
+              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._actived()) {
+              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._NONE_TOGGLE_ATTRIBUTE = 'data-dropdown-none-toggle';
+
+    _Class._STANDALONE_ATTRIBUTE = 'data-dropdown-standalone';
+
+    _Class._SWITCHES_SELECTOR = `[${_Class._TOGGLE_ATTRIBUTE}]`;
+
+    _Class._NONE_SWITCHES_SELECTOR = `[${_Class._NONE_TOGGLE_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]
+    };
+
+    _Class._$focused = [];
+
+    return _Class;
+
+  }).call(this));
+
+})));

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

@@ -0,0 +1,112 @@
+//= require ../install
+//= require ../dom
+//= require ../event
+//= require ../component
+//= require ../behaviours/focus
+//= require ../behaviours/enter-click
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../install.js'), require('../dom.js'), require('../event.js'), require('../component.js'), require('../behaviours/focus.js'), require('../behaviours/enter-click.js')) :
+  typeof define === 'function' && define.amd ? define(['../install.js', '../dom.js', '../event.js', '../component.js', '../behaviours/focus.js', '../behaviours/enter-click.js'], factory) :
+  (factory());
+}(this, (function () { 'use strict';
+
+  luda((function() {
+    var _Class;
+
+    _Class = class extends luda.Component {
+      _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._VALUE_ATTRIBUTE)) {
+              value = $value.getAttribute(this.constructor._VALUE_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', '');
+        }
+      }
+
+      static _init() {
+        var self;
+        self = this;
+        luda.enterClick._add(this._ENTER_CLICK_VALUE_HOLDER_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_CLICK_VALUE_HOLDER_SELECTOR, function(e) {
+            this.blur();
+            return this.classList.add(luda.focus._CSS_CLASS);
+          });
+        }
+      }
+
+    };
+
+    _Class._SCOPE = 'fmDropdown';
+
+    _Class._SELECTOR = '.fm-dropdown';
+
+    _Class._VALUE_SPLITOR = '   ';
+
+    _Class._VALUE_ATTRIBUTE = 'data-fm-dropdown-value';
+
+    _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_CLICK_VALUE_HOLDER_SELECTOR = '.fm-dropdown .fm input';
+
+    _Class._observerConfig = {
+      childList: true,
+      attributes: true,
+      subtree: true,
+      attributeFilter: ['checked', _Class._VALUE_ATTRIBUTE]
+    };
+
+    return _Class;
+
+  }).call(this));
+
+})));

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

@@ -0,0 +1,117 @@
+//= require ../install
+//= require ../dom
+//= require ../event
+//= require ../component
+(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) :
+  (factory());
+}(this, (function () { 'use strict';
+
+  luda((function() {
+    var _Class;
+
+    _Class = class extends luda.Component {
+      
+      // public
+      active(index) {
+        var activedIndex;
+        if (this._$panes.length) {
+          activedIndex = this._activeIndex;
+          if ((index != null) && index !== this._activeIndex && (0 <= index && index <= this._$panes.length - 1)) {
+            this._activeIndex = index;
+            return this._active(activedIndex);
+          }
+        }
+      }
+
+      // private
+      _getConfig() {
+        var _$indicators, _$panes, _activeIndex;
+        _$panes = luda.$unnested(this.constructor._PANE_SELECTOR, this._$component, this.constructor._SELECTOR);
+        _$indicators = luda.$unnested(this.constructor._INDICATOR_SELECTOR, this._$component, this.constructor._SELECTOR);
+        _activeIndex = this.constructor._ACTIVE_INDEX;
+        _$indicators.some(function($indicator, index) {
+          if ($indicator.checked) {
+            _activeIndex = index;
+            return true;
+          }
+        });
+        return {_$panes, _$indicators, _activeIndex};
+      }
+
+      _constructor() {
+        ({_$panes: this._$panes, _$indicators: this._$indicators, _activeIndex: this._activeIndex} = this._getConfig());
+        return this._active();
+      }
+
+      _onMutations(mutations) {
+        return this._constructor();
+      }
+
+      _active(activedIndex) {
+        this._$panes.forEach(($pane, index) => {
+          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);
+            }
+          }
+        });
+        return this._setIndicatorsState();
+      }
+
+      _setIndicatorsState() {
+        return this._$indicators.forEach(($indicator, index) => {
+          if (index === this._activeIndex) {
+            return $indicator.setAttribute('checked', '');
+          } else {
+            return $indicator.removeAttribute('checked');
+          }
+        });
+      }
+
+      // static private
+      static _init() {
+        var self;
+        self = this;
+        return luda.on('change', this._INDICATOR_SELECTOR, function(e) {
+          var instance;
+          if (this.checked) {
+            instance = self.query(luda.$parent(self._SELECTOR, this));
+            return instance.active(instance._$indicators.indexOf(this));
+          }
+        });
+      }
+
+    };
+
+    _Class._SCOPE = 'tab';
+
+    _Class._SELECTOR = '.tab';
+
+    _Class._PANE_SELECTOR = '.tab-pane';
+
+    _Class._INDICATOR_SELECTOR = '.tab-indicators .btn-radio input[type=radio]';
+
+    _Class._PANE_ACTIVE_CSS_CLASS = 'tab-pane-active';
+
+    _Class._ACTIVE_INDEX = 0;
+
+    _Class._ACTIVED_EVENT_TYPE = `${_Class._SCOPE}:actived`;
+
+    _Class._DEACTIVED_EVENT_TYPE = `${_Class._SCOPE}:deactived`;
+
+    _Class._observerConfig = {
+      childList: true,
+      subtree: true
+    };
+
+    return _Class;
+
+  }).call(this));
+
+})));