luda 0.2.0 → 0.3.0

data/assets/javascripts/luda/behaviors/toggle.js

@@ -1,158 +1,112 @@
-//= require ../install
-//= require ../dom
-//= require ../event
-//= require ../static
+//= require ../kernel/index
+//= require ../mixins/toggleable
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../install.js'), require('../dom.js'), require('../event.js'), require('../static.js')) :
-  typeof define === 'function' && define.amd ? define(['../install.js', '../dom.js', '../event.js', '../static.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.Static {
-      static activate(name$target) {
-        return this._query$targets(name$target).forEach(($target) => {
-          if ($target.classList.contains(this._ACTIVE_CSS_CLASS)) {
-            return;
-          }
-          if (this._isTransitioning($target)) {
-            return;
-          }
-          if (this._activatePrevented($target)) {
-            return;
-          }
-          $target.classList.add(this._ACTIVE_CSS_CLASS);
-          this._handleActivateEnd($target);
-          if (this._shouldAutoDeactivate($target)) {
-            return this._delayDeactivate($target);
-          }
-        });
+  luda.component('toggle', '[data-toggle-target]').protect({
+    cls: {
+      toggleable: {
+        active: 'toggle-active'
       }
-
-      static deactivate(name$target) {
-        return this._query$targets(name$target).forEach(($target) => {
-          if (!$target.classList.contains(this._ACTIVE_CSS_CLASS)) {
-            return;
-          }
-          if (this._isTransitioning($target)) {
-            return;
-          }
-          if (this._deactivatePrevented($target)) {
-            return;
-          }
-          $target.classList.remove(this._ACTIVE_CSS_CLASS);
-          return this._handleDeactivateEnd($target);
-        });
+    },
+    data: {
+      target: 'data-toggle-target',
+      for: 'data-toggle-for',
+      auto: 'data-toggle-auto-deactivate',
+      toggleable: {
+        interruption: 'data-toggle_interruption',
+        trigger: 'data-toggleable'
       }
-
-      static toggle(name$target) {
-        return this._query$targets(name$target).forEach(($target) => {
-          if ($target.classList.contains(this._ACTIVE_CSS_CLASS)) {
-            return this.deactivate($target);
-          } else {
-            return this.activate($target);
-          }
-        });
+    },
+    default: {
+      autoDuration: 3000
+    },
+    evt: {
+      toggleable: {
+        activate: 'luda:toggle:activate',
+        activated: 'luda:toggle:activated',
+        deactivate: 'luda:toggle:deactivate',
+        deactivated: 'luda:toggle:deactivated'
       }
-
-      static _onElementAdded($ele) {
-        this._handleActivateCancel($ele);
-        this._handleDeactivateCancel($ele);
-        if (this._shouldAutoDeactivate($ele)) {
-          return this._delayDeactivate($ele);
-        }
+    }
+  }).include({
+    activate: function() {
+      if (!this.toggleableActivate()) {
+        return;
       }
-
-      static _shouldAutoDeactivate($target) {
-        return $target.hasAttribute(this._AUTO_DEACTIVATE_ATTRIBUTE);
+      return this.toggleAutoState();
+    },
+    deactivate: function() {
+      if (!this.toggleableDeactivate()) {
+        return;
       }
-
-      static _delayDeactivate($target) {
-        var delay;
-        delay = parseInt($target.getAttribute(this._AUTO_DEACTIVATE_ATTRIBUTE), 10);
-        if (!delay) {
-          delay = this._AUTO_DEACTIVATE_DURATION;
-        }
-        return setTimeout(() => {
-          if ($target) {
-            return this.deactivate($target);
-          }
-        }, delay);
+      return this.toggleAutoState();
+    },
+    toggle: function(force) {
+      if (!this.toggleableToggle(force)) {
+        return;
       }
-
-      static _query$targets(name$target) {
-        if (name$target instanceof Element) {
-          return [name$target];
-        } else {
-          return luda.$children(`[${this._TOGGLE_TARGET_ATTRIBUTE}=${name$target}]`);
-        }
+      return this.toggleAutoState();
+    }
+  }).protect(luda.mixin('toggleable').all()).protect({
+    toggleAutoState: function() {
+      if (!this.root.hasData(this.data.auto)) {
+        return;
       }
-
-      static _init() {
-        var clickEventSelector, self;
-        self = this;
-        clickEventSelector = `[${this._TOGGLE_FOR_ATTRIBUTE}],[${this._TOGGLE_ATTRIBUTE}]`;
-        luda.on(luda._DOC_READY, function() {
-          return luda.$children(self._selector).forEach(function($target) {
-            if (self._shouldAutoDeactivate($target)) {
-              return self._delayDeactivate($target);
-            }
-          });
-        });
-        return luda.on('click', clickEventSelector, function(e) {
-          var toggleChecked;
-          toggleChecked = false;
-          return luda.eventPath(e).some(function($path) {
-            var $toggle, toggleName;
-            if ($path instanceof Element) {
-              if ($path.hasAttribute(self._TOGGLE_ATTRIBUTE) || $path.hasAttribute(self._TOGGLE_FOR_ATTRIBUTE)) {
-                if (toggleName = $path.getAttribute(self._TOGGLE_FOR_ATTRIBUTE)) {
-                  self.toggle(toggleName);
-                  toggleChecked = true;
-                }
-                if ($path.hasAttribute(self._TOGGLE_ATTRIBUTE)) {
-                  if ($path.hasAttribute(self._TOGGLE_TARGET_ATTRIBUTE)) {
-                    $toggle = $path;
-                  } else {
-                    $toggle = luda.$parent(`[${self._TOGGLE_TARGET_ATTRIBUTE}]`, $path);
-                  }
-                  if ($toggle) {
-                    self.toggle($toggle);
-                    return toggleChecked = true;
-                  }
-                }
-              } else if ($path.hasAttribute(self._TOGGLE_DISABLED_ATTRIBUTE)) {
-                return toggleChecked = true;
-              }
-            }
-          });
-        });
+      if (this.toggleableActive()) {
+        return this.auto = setTimeout(() => {
+          delete this.auto;
+          return this.deactivate();
+        }, this.root.data(this.data.auto) || this.default.autoDuration);
+      } else {
+        clearTimeout(this.auto);
+        return delete this.auto;
       }
-
-    };
-
-    _Class._SCOPE = 'toggle';
-
-    _Class._TOGGLE_TARGET_ATTRIBUTE = 'data-toggle-target';
-
-    _Class._TOGGLE_ATTRIBUTE = 'data-toggle';
-
-    _Class._TOGGLE_FOR_ATTRIBUTE = 'data-toggle-for';
-
-    _Class._TOGGLE_DISABLED_ATTRIBUTE = 'data-toggle-disabled';
-
-    _Class._AUTO_DEACTIVATE_ATTRIBUTE = 'data-toggle-auto-deactivate';
-
-    _Class._AUTO_DEACTIVATE_DURATION = 3000;
-
-    _Class._ACTIVE_CSS_CLASS = 'toggle-active';
-
-    _Class._SELECTORS = [`[${_Class._TOGGLE_TARGET_ATTRIBUTE}]`];
-
-    return _Class;
-
-  }).call(this));
+    },
+    toggleOnEvent: function(e) {
+      if (!this.toggleableToggleOnEvent(e)) {
+        return;
+      }
+      return this.toggleAutoState();
+    }
+  }).help({
+    find: function() {
+      return this.toggleableFind();
+    },
+    create: function() {
+      this.toggleableCreate();
+      return this.toggleAutoState();
+    },
+    destroy: function() {
+      this.toggleableDestroy();
+      return 'auto' in this && clearTimeout(this.auto);
+    },
+    listen: function() {
+      var self;
+      self = this;
+      return [
+        ['click',
+        this.toggleOnEvent],
+        [
+          'click',
+          `[${this.data.for}]`,
+          function(e) {
+            var name;
+            name = luda(this).data(self.data.for);
+            return self.con.each(function(ins) {
+              if (ins.root.data(self.data.target) !== name) {
+                return;
+              }
+              ins.toggleOnEvent(e);
+              return true;
+            });
+          }
+        ]
+      ];
+    }
+  });
 
 })));

data/assets/javascripts/luda/degradation.js

@@ -8,7 +8,7 @@
 
   Degradation = {
     _URL_ATTRIBUTE: 'data-degradation-url',
-    _HTML: ['<div id="luda-degradation-html" ', 'style="padding:100px 30px;text-align:center">', '<h1>Your Browser Is Too Old!</h1>', '<p>', 'Please visit this site with a modern browser ', '<a target="_blank" href="https://www.google.com/chrome/">', '(Chrome recommended)', '</a>', '.</p>', '</div>'].join(''),
+    _HTML: ['<div id="luda-degradation-html" ', 'style="padding:100px 30px;text-align:center">', '<h1>Your Browser is Too Old!</h1>', '<p>', 'Please visit this site with a modern browser ', '<a target="_blank" href="https://www.google.com/chrome/">', '(Chrome is recommended)', '</a>', '.</p>', '</div>'].join(''),
     _CSS_PROPERTIES: [
       {
         display: 'flex',
@@ -21,7 +21,8 @@
     _JS_PROPERTIES: {
       es6Class: 'class X {}',
       es6ArrowFunction: '((x) => x)()',
-      mutationObserver: 'new MutationObserver(function(){})'
+      mutationObserver: 'new MutationObserver(function(){})',
+      proxy: 'new Proxy({},{})'
     },
     _NOTIFY_MILLSECONDS: 500,
     check: function() {
@@ -29,7 +30,12 @@
       this._checkJS(this._JS_PROPERTIES);
       return this._checkCSS(this._CSS_PROPERTIES);
     },
-    _eval: eval,
+    _eval: function(script) {
+      var geval;
+      geval = eval;
+      script = '(function(){' + script + '})()';
+      return geval(script);
+    },
     _checkEnv: function() {
       if (typeof document !== 'undefined') {
         if (typeof window !== 'undefined') {

data/assets/javascripts/luda/elements/form-file.js

@@ -1,118 +1,71 @@
-//= require ../install
-//= require ../dom
-//= require ../event
-//= require ../factory
+//= require ../kernel/index
+//= require ../mixins/resetable
 (function (global, 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) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../kernel/index.js'), require('../mixins/resetable.js')) :
+  typeof define === 'function' && define.amd ? define(['../kernel/index.js', '../mixins/resetable.js'], factory) :
   (factory());
 }(this, (function () { 'use strict';
 
-  luda((function() {
-    var _Class;
-
-    _Class = class extends luda.Factory {
-      reset() {
-        this._$file.value = '';
-        return this._setSimulatorInitialValue();
-      }
-
-      _getConfig() {
-        var _$file, _$simulator;
-        _$file = luda.$child(this.constructor._FILE_SELECTOR, this._$component);
-        _$simulator = luda.$child(this.constructor._SIMULATOR_SELECTOR, this._$component);
-        return {_$file, _$simulator};
-      }
-
-      _constructor() {
-        ({_$file: this._$file, _$simulator: this._$simulator} = this._getConfig());
-        return this._init();
-      }
-
-      _onMutations() {
-        return this._constructor();
-      }
-
-      _insertSimulator() {
-        this._$simulator = document.createElement('input');
-        this._$simulator.tabIndex = -1;
-        return luda.$after(this._$simulator, this._$file);
-      }
-
-      _setPlaceholderValue() {
-        if (this._$file.hasAttribute(this.constructor._PLACEHOLDER_ATTRIBUTE)) {
-          return this._$simulator.placeholder = this._$file.getAttribute(this.constructor._PLACEHOLDER_ATTRIBUTE);
-        }
-      }
-
-      _setSimulatorValue() {
-        var values;
-        values = [];
-        Array.from(this._$file.files).map(function(file) {
-          return values.push(file.name);
-        });
-        if (values.length) {
-          return this._$simulator.value = values.join(this.constructor._VALUE_SPLITOR);
-        }
-        return this._setSimulatorInitialValue();
-      }
-
-      _setSimulatorInitialValue() {
-        if (this._$file.hasAttribute(this.constructor._VALUE_ATTRIBUTE)) {
-          return this._$simulator.value = this._$file.getAttribute(this.constructor._VALUE_ATTRIBUTE);
-        }
+  luda.component('fmFile').protect({
+    selector: {
+      root: '.fm-file',
+      file: 'input[type=file]',
+      simulator: 'input:not([type=file])'
+    },
+    splitor: '  '
+  }).protect({
+    insertSimulator: function() {
+      var simulator;
+      if (this.simulator.length) {
+        return;
       }
-
-      _init() {
-        if (this._$file) {
-          if (!this._$simulator) {
-            this._insertSimulator();
-          }
-          this._setPlaceholderValue();
-          return this._setSimulatorValue();
-        }
-      }
-
-      static reset($file) {
-        return this.query($file).reset();
+      simulator = luda('<input>');
+      simulator.els[0].tabIndex = -1;
+      return simulator.insertAfter(this.file);
+    },
+    updatePlaceholder: function() {
+      var placeholder;
+      if (!(placeholder = this.file.attr('placeholder'))) {
+        return;
       }
-
-      static _init() {
-        var self;
-        self = this;
-        luda.on('change', `${this._SELECTOR} ${this._FILE_SELECTOR}`, function(e) {
-          return self.query(luda.$parent(self._SELECTOR, this))._setSimulatorValue();
-        });
-        return luda.on(luda._FORM_RESET, this._SELECTOR, function(e) {
-          return setTimeout(() => {
-            return self.query(this)._setSimulatorValue();
-          });
-        });
+      return this.simulator.attr('placeholder', placeholder);
+    },
+    updateValue: function() {
+      var value, values;
+      values = Array.from(this.file.els[0].files).map(function(f) {
+        return f.name;
+      });
+      value = values.join(this.splitor) || this.file.attr('value') || '';
+      return this.simulator.attr('value', value);
+    },
+    tryReset: function(target, oldVal) {
+      if (this.file.attr('value') !== '') {
+        return;
       }
-
-    };
-
-    _Class._SCOPE = 'fmFile';
-
-    _Class._VALUE_SPLITOR = '   ';
-
-    _Class._SELECTOR = '.fm-file';
-
-    _Class._FILE_SELECTOR = 'input[type=file]';
-
-    _Class._SIMULATOR_SELECTOR = 'input:not([type=file])';
-
-    _Class._PLACEHOLDER_ATTRIBUTE = 'placeholder';
-
-    _Class._VALUE_ATTRIBUTE = 'value';
-
-    _Class._observerConfig = {
-      childList: true,
-      subtree: true
-    };
-
-    return _Class;
-
-  }).call(this));
+      this.file.els[0].value = '';
+      return this.file.attr('value', oldVal);
+    }
+  }).help({
+    find: function() {
+      return {
+        file: this.selector.file,
+        simulator: this.selector.simulator
+      };
+    },
+    watch: function() {
+      return {
+        attr: [['value', this.selector.file, this.tryReset, this.updateValue]]
+      };
+    },
+    create: function() {
+      this.insertSimulator();
+      this.updatePlaceholder();
+      return this.updateValue();
+    },
+    listen: function() {
+      luda.mixin('resetable').get('listen').call(this, this.updateValue);
+      return [['change', this.selector.file, this.updateValue]];
+    }
+  });
 
 })));