luda 0.1.5

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

@@ -0,0 +1,104 @@
+//= 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 {
+      _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() {
+        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);
+        } else if (this._$file.hasAttribute(this.constructor._VALUE_ATTRIBUTE)) {
+          return this._$simulator.value = this._$file.getAttribute(this.constructor._VALUE_ATTRIBUTE);
+        }
+      }
+
+      _init() {
+        if (this._$file) {
+          if (!this._$simulator) {
+            this._insertSimulator();
+          }
+          if (this._$file.hasAttribute(this.constructor._PLACEHOLDER_ATTRIBUTE)) {
+            this._setPlaceholderValue();
+          }
+          return this._setSimulatorValue();
+        }
+      }
+
+      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();
+          });
+        });
+      }
+
+    };
+
+    _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));
+
+})));

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

@@ -0,0 +1,212 @@
+//= 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 {
+      select(indexOrIndexArray) {
+        var selectedIndexes;
+        if (this._$select.multiple) {
+          if (this._$multipleSelectPlaceholder) {
+            selectedIndexes = indexOrIndexArray;
+          } else {
+            selectedIndexes = indexOrIndexArray.map(function(index) {
+              return index + 1;
+            });
+          }
+          Array.from(this._$select.options).forEach(function($option, index) {
+            return $option.selected = selectedIndexes.includes(index);
+          });
+          return this._markSelectedOption();
+        } else {
+          this._$select.selectedIndex = selectedIndex;
+          this._setSingleSelectSimulatorValue();
+          return this._markSelectedOption();
+        }
+      }
+
+      _getConfig() {
+        var _$defaultSelectedOptions, _$multipleSelectPlaceholder, _$select, _$singleSelectSimulator, _defaultSelectedOptionMarked;
+        _$select = luda.$child(this.constructor._SELECT_SELECTOR, this._$component);
+        _$singleSelectSimulator = luda.$child(this.constructor._SINGLE_SELECT_SIMULATOR_SELECTOR, this._$component);
+        _$multipleSelectPlaceholder = luda.$child(`.${this.constructor._MULTIPLE_SELECT_PLACEHOLDER_CSS_CLASS}`, this._$component);
+        _$defaultSelectedOptions = luda.$children(`[${this.constructor._DEFAULT_SELECTED_OPTION_ATTRIBUTE}]`, this._$component);
+        _defaultSelectedOptionMarked = this._$component.hasAttribute(this.constructor._INITED_ATTRIBUTE);
+        return {_$select, _$singleSelectSimulator, _$multipleSelectPlaceholder, _$defaultSelectedOptions, _defaultSelectedOptionMarked};
+      }
+
+      _constructor() {
+        ({_$select: this._$select, _$singleSelectSimulator: this._$singleSelectSimulator, _$multipleSelectPlaceholder: this._$multipleSelectPlaceholder, _$defaultSelectedOptions: this._$defaultSelectedOptions, _defaultSelectedOptionMarked: this._defaultSelectedOptionMarked} = this._getConfig());
+        if (this._$select) {
+          if (this._$select.multiple) {
+            return this._initMultipleSelect();
+          } else {
+            return this._initSingleSelect();
+          }
+        }
+      }
+
+      _onMutations() {
+        return this._constructor();
+      }
+
+      _markSelectedOption() {
+        if (this._observer) {
+          this._disconnect();
+        }
+        Array.from(this._$select.options).forEach(function($option) {
+          if ($option.selected) {
+            return $option.setAttribute('selected', 'selected');
+          } else {
+            return $option.removeAttribute('selected');
+          }
+        });
+        if (!this._observer) {
+          return this._observe();
+        }
+      }
+
+      _markDefaultSelectedOption() {
+        this._$component.setAttribute(this.constructor._INITED_ATTRIBUTE, '');
+        return Array.from(this._$select.options).forEach(($option) => {
+          if ($option.selected) {
+            return $option.setAttribute(this.constructor._DEFAULT_SELECTED_OPTION_ATTRIBUTE, '');
+          }
+        });
+      }
+
+      _setSingleSelectedDefaultSelectedOption() {
+        var hasSelected;
+        hasSelected = Array.from(this._$select.options).some(function($option) {
+          return $option.getAttribute('selected') === 'selected';
+        });
+        if (!hasSelected) {
+          return this._$select.selectedIndex = -1;
+        }
+      }
+
+      _insertSingleSelectSimulator() {
+        this._$singleSelectSimulator = document.createElement('input');
+        this._$singleSelectSimulator.tabIndex = -1;
+        return luda.$after(this._$singleSelectSimulator, this._$select);
+      }
+
+      _setSingleSelectPlaceholderValue() {
+        return this._$singleSelectSimulator.placeholder = this._$select.getAttribute(this.constructor._PLACEHOLDER_ATTRIBUTE);
+      }
+
+      _setSingleSelectSimulatorValue() {
+        var $selectedOption;
+        if ($selectedOption = this._$select.options[this._$select.selectedIndex]) {
+          return this._$singleSelectSimulator.value = $selectedOption.innerText;
+        } else {
+          return this._$singleSelectSimulator.value = '';
+        }
+      }
+
+      _initSingleSelect() {
+        if (!this._$singleSelectSimulator) {
+          this._insertSingleSelectSimulator();
+        }
+        if (this._$select.hasAttribute(this.constructor._PLACEHOLDER_ATTRIBUTE)) {
+          this._setSingleSelectedDefaultSelectedOption();
+          this._setSingleSelectPlaceholderValue();
+        }
+        if (!this._defaultSelectedOptionMarked) {
+          this._markDefaultSelectedOption();
+        }
+        this._setSingleSelectSimulatorValue();
+        return this._markSelectedOption();
+      }
+
+      _insertMultipleSelectBlankOption() {
+        this._$multipleSelectPlaceholder = document.createElement('option');
+        this._$multipleSelectPlaceholder.className = this.constructor._MULTIPLE_SELECT_PLACEHOLDER_CSS_CLASS;
+        this._$multipleSelectPlaceholder.disabled = true;
+        return luda.$prepend(this._$multipleSelectPlaceholder, this._$select);
+      }
+
+      _setMultipleSelectPlaceholderValue() {
+        return this._$multipleSelectPlaceholder.innerText = this._$select.getAttribute(this.constructor._PLACEHOLDER_ATTRIBUTE);
+      }
+
+      _initMultipleSelect() {
+        if (!this._$multipleSelectPlaceholder) {
+          if (this._$select.hasAttribute(this.constructor._PLACEHOLDER_ATTRIBUTE)) {
+            this._insertMultipleSelectBlankOption();
+            this._setMultipleSelectPlaceholderValue();
+          }
+        }
+        if (!this._defaultSelectedOptionMarked) {
+          return this._markDefaultSelectedOption();
+        }
+      }
+
+      _reset() {
+        if (this._$select) {
+          Array.from(this._$select.options).forEach(($option) => {
+            return $option.selected = this._$defaultSelectedOptions.includes($option);
+          });
+          if (!this._$select.multiple) {
+            this._setSingleSelectSimulatorValue();
+          }
+          return this._markSelectedOption();
+        }
+      }
+
+      static _init() {
+        var self;
+        self = this;
+        luda.on('change', `${this._SELECTOR} ${this._SELECT_SELECTOR}`, function(e) {
+          var instance;
+          instance = self.query(luda.$parent(self._SELECTOR, this));
+          if (!this.multiple) {
+            instance._setSingleSelectSimulatorValue();
+          }
+          return instance._markSelectedOption();
+        });
+        return luda.on(luda._FORM_RESET, this._SELECTOR, function(e) {
+          return setTimeout(() => {
+            return self.query(this)._reset();
+          });
+        });
+      }
+
+    };
+
+    _Class._SCOPE = 'fmSelect';
+
+    _Class._SELECTOR = '.fm-select';
+
+    _Class._SELECT_SELECTOR = 'select';
+
+    _Class._SINGLE_SELECT_SIMULATOR_SELECTOR = 'input';
+
+    _Class._PLACEHOLDER_ATTRIBUTE = 'placeholder';
+
+    _Class._MULTIPLE_SELECT_PLACEHOLDER_CSS_CLASS = 'fm-select-multiple-placeholder';
+
+    _Class._DEFAULT_SELECTED_OPTION_ATTRIBUTE = 'data-fm-select-default-selected';
+
+    _Class._INITED_ATTRIBUTE = 'data-fm-select-inited';
+
+    _Class._observerConfig = {
+      childList: true,
+      attributes: true,
+      subtree: true,
+      attributeFilter: ['selected']
+    };
+
+    return _Class;
+
+  }).call(this));
+
+})));

data/assets/javascripts/luda/event.js

@@ -0,0 +1,193 @@
+//= require ./install
+//= require ./dom
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('./install.js'), require('./dom.js')) :
+  typeof define === 'function' && define.amd ? define(['./install.js', './dom.js'], factory) :
+  (factory());
+}(this, (function () { 'use strict';
+
+  var splice = [].splice;
+
+  luda({
+    _SWIPE_DISTANCE: 10,
+    _EVENT_TYPE_PREFIX: 'luda',
+    _SWIPE_LEFT: 'swipeleft',
+    _SWIPE_RIGHT: 'swiperight',
+    _SWIPE_UP: 'swipeup',
+    _SWIPE_DOWN: 'swipedown',
+    _SWIPE_LEFT_OR_UP: 'swipeleft or swipeup',
+    _SWIPE_RIGHT_OR_DOWN: 'swiperight or swipedown',
+    _DOC_READY: 'docready',
+    _FORM_RESET: 'reset',
+    eventPath: function(event) {
+      var path;
+      if (event.composedPath) {
+        return path = event.composedPath();
+      } else if (event.path) {
+        return path = event.path;
+      } else {
+        return path = [event.target].concat(luda.$parents('*', event.target));
+      }
+    },
+    on: function(event, ...selector) {
+      var handler, ref;
+      ref = selector, [...selector] = ref, [handler] = splice.call(selector, -1);
+      switch (event) {
+        case this._DOC_READY:
+          return this._onDocReady(handler);
+        case this._FORM_RESET:
+          return this._onReset(selector[0], handler);
+        case this._SWIPE_LEFT:
+        case this._SWIPE_RIGHT:
+        case this._SWIPE_UP:
+        case this._SWIPE_DOWN:
+        case this._SWIPE_LEFT_OR_UP:
+        case this._SWIPE_RIGHT_OR_DOWN:
+          return this._onSwipe(event, selector[0], handler);
+        default:
+          return this._on(event, selector[0], handler);
+      }
+    },
+    onOpposite: function(event, selector, handler) {
+      var _self;
+      _self = this;
+      return document.addEventListener(event, function(e) {
+        var trigger;
+        trigger = _self.eventPath(e).every(function($element) {
+          return !$element.matches || !$element.matches(selector);
+        });
+        if (trigger) {
+          return handler(e);
+        }
+      });
+    },
+    dispatch: function($target, type, detail, options = {}) {
+      var evt;
+      if (typeof options.bubbles !== 'boolean') {
+        options.bubbles = true;
+      }
+      if (typeof options.cancelable !== 'boolean') {
+        options.cancelable = true;
+      }
+      if (typeof options.composed !== 'boolean') {
+        options.composed = true;
+      }
+      evt = new Event(`${this._EVENT_TYPE_PREFIX}:${type}`, options);
+      evt.detail = detail;
+      $target.dispatchEvent(evt);
+      return evt;
+    },
+    _onDocReady: function(handler) {
+      if (document.readyState === 'loading') {
+        return document.addEventListener('DOMContentLoaded', handler);
+      } else {
+        return handler();
+      }
+    },
+    _onReset: function(selector, handler) {
+      return document.addEventListener('reset', function(e) {
+        if (selector != null) {
+          return luda.$children(selector, e.target).forEach(function($element) {
+            return handler.bind($element)(e);
+          });
+        } else {
+          return handler(e);
+        }
+      });
+    },
+    _onSwipe: function(event, selector, handler) {
+      var $touchStartElement, _self, touchStartE, touchStartX, touchStartY, watch;
+      _self = this;
+      watch = false;
+      $touchStartElement = document;
+      touchStartE = null;
+      touchStartX = 0;
+      touchStartY = 0;
+      document.addEventListener('touchstart', function(e) {
+        if (e.touches.length === 1) {
+          touchStartX = e.touches[0].screenX;
+          touchStartY = e.touches[0].screenY;
+          if (selector != null) {
+            return _self.eventPath(e).some(function($element) {
+              if ($element.matches && $element.matches(selector)) {
+                $touchStartElement = $element;
+                touchStartE = e;
+                watch = true;
+                return true;
+              }
+            });
+          } else {
+            return watch = true;
+          }
+        }
+      });
+      return document.addEventListener('touchmove', function(e) {
+        var eventX, eventXOrY, eventY, touchDistanceX, touchDistanceY;
+        if (watch && e.touches.length === 1) {
+          touchDistanceX = e.touches[0].screenX - touchStartX;
+          touchDistanceY = e.touches[0].screenY - touchStartY;
+          eventX = void 0;
+          eventY = void 0;
+          eventXOrY = void 0;
+          if (Math.abs(touchDistanceX) >= _self._SWIPE_DISTANCE) {
+            if (touchDistanceX > 0) {
+              eventX = _self._SWIPE_RIGHT;
+            } else {
+              eventX = _self._SWIPE_LEFT;
+            }
+          }
+          if (Math.abs(touchDistanceY) >= _self._SWIPE_DISTANCE) {
+            if (touchDistanceY > 0) {
+              eventY = _self._SWIPE_DOWN;
+            } else {
+              eventY = _self._SWIPE_UP;
+            }
+          }
+          if (eventX === _self._SWIPE_LEFT || eventY === _self._SWIPE_UP) {
+            eventXOrY = _self._SWIPE_LEFT_OR_UP;
+          }
+          if (eventX === _self._SWIPE_RIGHT || eventY === _self._SWIPE_DOWN) {
+            eventXOrY = _self._SWIPE_RIGHT_OR_DOWN;
+          }
+          if (((eventX != null) && eventX === event) || ((eventY != null) && eventY === event) || eventXOrY === event) {
+            if (selector != null) {
+              return _self.eventPath(e).some(function($element) {
+                if ($element === $touchStartElement) {
+                  watch = false;
+                  handler.bind($element)(touchStartE, e);
+                  return true;
+                }
+              });
+            } else {
+              watch = false;
+              return handler(touchStartE, e);
+            }
+          }
+        }
+      });
+    },
+    _on: function(event, selector, handler) {
+      var _self;
+      if (selector === window) {
+        return window.addEventListener(event, function(e) {
+          return handler(e);
+        });
+      } else {
+        _self = this;
+        return document.addEventListener(event, function(e) {
+          if (selector != null) {
+            return _self.eventPath(e).some(function($element) {
+              if ($element.matches && $element.matches(selector)) {
+                handler.bind($element)(e);
+                return true;
+              }
+            });
+          } else {
+            return handler(e);
+          }
+        });
+      }
+    }
+  });
+
+})));