uniform-ui 2.4.1 → 3.0.0.beta2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1a70cfa3c98bab49b50c2c5866fcfdb2f1dde00ced660c7c2c3cc9009a21f819
-  data.tar.gz: 5c64c92d6d8e636ded0928b2fd8e1a878f1b1deaf3998a6a4fcf6dadc160e7af
+  metadata.gz: bbdcb9dbd05373a00cbd0d38122c4022daefafb4b11cbd25977e57f7367ab38c
+  data.tar.gz: 074e042a4176f0e1f7e61107b67dcfdbf54c24a3cc937925fa0e8f2b17f1735b
 SHA512:
-  metadata.gz: e2c963331db17062cf77bd459435d6ec92e75783434304b5e35b6180ec34c9eec020996f4f4caad831243e3075c9b42bd3558ec4320d500bba8c08351fd609c7
-  data.tar.gz: 30c019f85d3b028382c89ccd5ef4611b88e3b9b83aeb69b528775909d7c0407cf7f8a691ba072c523c1db10f1dd0b4c5899ffb56666b5959e085428f4a20003e
+  metadata.gz: daa319ca0955e68bf4f3180066b12a8a0dc58208e26b3176b86a4c9449a645c74c396b967bd9b76c732758637623c9b2e9ede3979522e649687be7106ba396cd
+  data.tar.gz: 4d200fdbe66802694345f57d44c5b82cd0a94e149cf7c4c9cac7726f7423116cdb509bbd24adc946a2c8c834012f70153fddb89dc7f4f0e1d45fa1b37263bfa9

data/lib/assets/javascripts/uniform.js

@@ -1,21 +1,8 @@
-import Dropdown from './uniform/dropdown';
-import Checkbox from './uniform/checkbox';
-import Modal from './uniform/modal';
-import Select from './uniform/select';
-import FloatingLabel from './uniform/floating-label';
-import Resizer from './uniform/resizer';
-import Tooltip from './uniform/tooltip';
-import Popover from './uniform/popover';
-
-export {
-    Dropdown,
-    Checkbox,
-    Modal,
-    Select,
-    FloatingLabel,
-    Resizer,
-    Tooltip,
-    Popover
-};
-
- 
+export Dropdown from './uniform/dropdown';
+export Modal from './uniform/modal';
+export Select from './uniform/select';
+export FloatingLabelInput from './uniform/floating-label-input';
+export Resizer from './uniform/resizer';
+export Tooltip from './uniform/tooltip';
+export Popover from './uniform/popover';
+export {Checkbox, Radio, Toggle} from './uniform/checkbox';

data/lib/assets/javascripts/uniform/checkbox.js

@@ -1,31 +1,74 @@
 import Component from './component';
-import * as Helpers from './dom-helpers';
+import {addClass, toggleClass, trigger, createElement} from 'dolla';
 
-export default class Checkbox extends Component {
+export class Checkbox extends Component {
+    static CSSClass = "uniformCheckbox";
+    static type = 'checkbox';
+    
     initialize (options) {
-        this.listenTo(this.el, 'change', this.change);
+        if(options.input instanceof Element) {
+          this.input = options.input
+        } else {
+          this.input = createElement('input', Object.assign({}, {
+            type: this.constructor.type
+          }, options.input)) // TODO filter options to dolla.HTML_ATTRIBUTES
+        }
+        
+        if(!options.tabindex) this.el.tabIndex = 0;
+        addClass(this.el, this.constructor.CSSClass);
+
+        this.listenTo(this.el, 'click', this.click);
+        this.listenTo(this.input, 'change', this.change);
+        this.listenTo(document, 'keyup', this.keyup);
+        this.listenTo(document, 'keydown', this.keydown);
     }
     
     render () {
-        var type = Helpers.hasClass(this.el, 'uniformRadio') ? 'uniformRadio' : 'uniformCheckbox';
-        this.checkbox = document.createElement('div');
-        Helpers.addClass(this.checkbox, `${type}-indicator`);
+        this.input.style.display = "none";
+
+        if(this.input.parentNode){
+          this.input.parentNode.insertBefore(this.el, this.input.nextSibling);
+        } else {
+          this.el.append(this.input);
+        }
         
-        if (this.el.className && this.el.className.replace(type, '') != '')
-            Helpers.addClass(this.checkbox, this.el.className.replace(type, ''));
-        Helpers.toggleClass(this.checkbox, 'checked', this.el.checked);
-        this.el.parentNode.insertBefore(this.checkbox, this.el.nextSibling);
-        this.listenTo(this.checkbox, 'click', this.click);
+        this.change()
+
         return this;
     }
     
+    change () {
+        toggleClass(this.el, 'checked', this.input.checked);
+    }
+    
     click (e) {
-        if (this.el.disabled) return;
-        this.el.checked = !this.el.checked
-        Helpers.trigger(this.el, 'change');
+        if (this.input.disabled) return;
+        
+        this.input.checked = !this.input.checked
+        trigger(this.input, 'change');
         e.preventDefault();
     }
-    change () {
-        Helpers.toggleClass(this.checkbox, 'checked', this.el.checked);
+    
+    keyup (e) {
+        if(document.activeElement != this.el) return;
+        if(e.keyCode != 32) return;
+
+        e.preventDefault();
+        this.click(e);
     }
+    
+    keydown(e) {
+      if(e.keyCode == 32 && document.activeElement == this.el) {
+        // Prevent Page Scroll
+        e.preventDefault();
+      }
+    }
+}
+
+export class Radio extends Checkbox {
+  static CSSClass = "uniformRadio";
+}
+
+export class Toggle extends Checkbox {
+  static CSSClass = "uniformToggle";
 }

data/lib/assets/javascripts/uniform/component.js

@@ -1,11 +1,18 @@
-import {uniqueId, hasClass} from './dom-helpers';
+import {hasClass, HTML_ATTRIBUTES, createElement, closest} from 'dolla';
+
+function uniqueId(prefix){
+    window.idCounter || (window.idCounter = 0);
+    var id = ++window.idCounter + '';
+    return prefix ? prefix + id : id;
+}
 
 export default class Component {
+
     constructor(options){
         options = options || {};
         this.eventListens = new Array();
         this.eventListeners = new Array();
-        this.el = options.el || document.createElement('div');
+        this.el = options.el || createElement('div', options); //TODO filter options to HTML_ATTRIBUTES
         this.cid = uniqueId('c');
     
         this.on = function (type, handler) {
@@ -34,6 +41,14 @@ export default class Component {
         this.initialize(options);
     }
     
+    addEventListener () {
+      this.on.apply(this, arguments);
+    }
+    
+    removeEventListener () {
+      this.off.apply(this, arguments);
+    }
+    
     pick (object, keys) {
         var newObject = {}
         keys.forEach(function(key){
@@ -59,8 +74,9 @@ export default class Component {
             node,
             event,
             function(e){
-                if(scope && !hasClass(e.target, scope.replace('.', ''))) return;
-                return callback.bind(context)(...arguments);
+                if(!scope || (e.target.matches(scope) || closest(e.target, scope))) {
+                  return callback.bind(context)(...arguments);
+                }
             }.bind(context)
         ]
         this.eventListens.push(listen);

data/lib/assets/javascripts/uniform/dropdown.js

@@ -1,217 +1,86 @@
 import Component from './component';
-import * as Helpers from './dom-helpers';
+import Popover from './popover';
+import {createElement} from 'dolla';
 
-/*. Dropdown.initialize
-    content:    string|el - content rendered in dropdown
-    align:      'center'|'left'|'right| - how dropdown aligns to trigger el
-    trigger:    'click'|'focus'|'mouseover' - what triggers showDropdown
-    show_arrow: true\false - show dropdown arrow
-    hide_sm:    true|false - don't show dropdown on mobile browsers
-    square:     true|false - round corners on dropdown
-    container:  node - append dropdown to
+/*.
+    anchor: element
+    content: html
+    align: top|bottom (default: top)
+    container: document.body
+
+    methods
+    ------
+    enable
+    disable
+    hide
+    show
+    toggle
 */
 export default class Dropdown extends Component {
+  
+  initialize (options) {
+      this.el = options.anchor;
+      options = options || {}
+      this.options = {
+          align: 'center bottom',
+          container: document.body
+      };
+      Object.assign(this.options, this.pick(options, Object.keys(this.options)));
+      
+      this.enabled = true;
+      this.active = false;
+      this.content = options.content;
+      this.el.dropdown = this;
+      
+      this.listenTo(this.el, 'click', this.toggle);
+  }
     
-    initialize(options){
-        options = options || {}
-        this.options = {
-            align: 'center bottom',
-            trigger: 'click',
-            show_arrow: true,
-            hide_sm: false,
-            square: false,
-            container: document.body,
-            offset: {}
-        };
-        this.options.container = this.options.container || document.body;
-        
-        Object.assign(this.options, this.pick(options, Object.keys(this.options)));
-        this.content = options.content;
-        this.dropdown = document.createElement('div');
-        this.el.dropdown = this;
-        
-        this.listenTo(this.el, this.options.trigger, this.toggle);
-        
-        this.listenTo(this.el, 'mousedown', function (){
-            this.mousedown = true;
-        });
-    
-        this.listenTo(this.el, 'mouseup', function (){
-            this.mousedown = false;
-        });
-        
-        this.listenTo(this.el, 'focus', function (){
-            if(this.mousedown) return;
-            this.show();
-        });
-        
-        this.listenTo(document, 'focus', this.outsideClick);
-        this.listenTo(document, this.options.trigger, this.outsideClick);
-        this.listenTo(document, 'keyup', this.keyup);
-        this.listenTo(window, 'resize', this.resize);
-    }
-    
-    render () {
-        Helpers.addClass(this.dropdown, 'uniformDropdown-dropdown');
-        Helpers.addClass(this.dropdown, 'absolute');
-        this.dropdown.style.minWidth = Helpers.outerWidth(this.el);
-        this.dropdown.innerHTML = this.content.innerHTML ? this.content.innerHTML : this.content;
-        if (this.options.show_arrow) {
-            Helpers.addClass(this.dropdown, 'has-pointer');
-            var pointer = document.createElement('div');
-            Helpers.addClass(pointer, 'uniformDropdown-pointer')
-            this.dropdown.appendChild(pointer);
-        }
-        Helpers.toggleClass(this.dropdown, 'square', this.options.square);
-        this.dropdown.style.display = 'none';
-        this.options.container.appendChild(this.dropdown);
-        Helpers.removeClass(this.dropdown.querySelectorAll('.hidden'), 'hidden');
-        return this;
-    }
-    
-    resize () {
-        this.setPosition();
-        
-        var align = this.options.align.split(" ");
-        var reposition = false;
-        if (Helpers.offset(this.dropdown).top + Helpers.outerHeight(this.dropdown) > Math.max(document.body.offsetHeight, window.innerHeight)) {
-            align[1] = "top";
-            reposition = true;
-        }
-        if (Helpers.offset(this.dropdown).top < 0) {
-            align[1] = "bottom";
-            reposition = true;
-        }
-        if (Helpers.offset(this.dropdown).left < 0) {
-            align[0] = "right";
-            reposition = true;
-        }
-        if (Helpers.offset(this.dropdown).left + Helpers.outerWidth(this.dropdown) > document.body.offsetWidth) {
-            align[0] = "left";
-            reposition = true;
-        }
-        if(reposition) this.setPosition(align.join(" "))
-    }
-
-    
-    setPosition(align){
-        align = align || this.options.align;
-        var [leftAlign, topAlign] = align.split(" ");
-        leftAlign = leftAlign || "bottom";
-        topAlign = topAlign || "bottom";
-        
-        var offset = Helpers.offset(this.el);
-        var container = this.options.container;
-        if(getComputedStyle(container)['position'] == "static") container = container.offsetParent;
-        if(!container) container = document.body;
-
-        var containerOffset = Helpers.offset(container);
-        offset = {
-            top: offset.top - containerOffset.top,
-            left: offset.left - containerOffset.left
-        }
-        
-        var position = {};
-        if(leftAlign == 'left'){
-            position.right = Helpers.outerWidth(container) - offset.left;
-        } else if(leftAlign == 'center'){
-            position.left = offset.left + Helpers.outerWidth(this.el) / 2 - Helpers.outerWidth(this.dropdown) / 2;
-        } else if (leftAlign == 'right'){
-            position.left = offset.left + Helpers.outerWidth(this.el);
-        } else if (leftAlign.includes("%")){
-            position.left = offset.left + Helpers.outerWidth(this.el) * parseInt(leftAlign) / 100;
-        } else if (leftAlign.includes("px")){
-            position.left = offset.left + Helpers.outerWidth(this.el) + parseInt(leftAlign);
-        }
-        
-        if(topAlign == 'top'){
-            position.top = offset.top - Helpers.outerHeight(this.dropdown);
-        } else if(topAlign == 'center'){
-            position.top = offset.top + Helpers.outerHeight(this.el) / 2 - Helpers.outerHeight(this.dropdown) / 2;
-        } else if (topAlign == 'bottom'){
-            position.top = offset.top + Helpers.outerHeight(this.el);
-        } else if (topAlign.includes("%")){
-            position.top = offset.top + Helpers.outerHeight(this.el) * parseInt(topAlign) / 100;
-        } else if (topAlign.includes("px")){
-            position.top = offset.top + Helpers.outerHeight(this.el) + parseInt(topAlign);
-        }
-        
-        if(this.options.offset.left) position.left += parseInt(this.options.offset.left);
-        if(this.options.offset.top) position.top += parseInt(this.options.offset.top);
-        if(this.options.offset.left) position.right -= parseInt(this.options.offset.left);
-        
-        this.dropdown.style.left = 'auto';
-        this.dropdown.style.right = 'auto';
-        Helpers.removeClass(this.dropdown, 'popover-left popover-right popover-center popover-top popover-bottom');
-        Helpers.addClass(this.dropdown, 'popover-' + topAlign);
-        Helpers.addClass(this.dropdown, 'popover-' + leftAlign);
-        Object.keys(position).forEach(function(key){
-            this.dropdown.style[key] = position[key] + "px";
-        }, this);
-    }
-    
-    remove () {
-        Component.prototype.remove.apply(this, arguments);
-        if(this.dropdown.parentNode) this.dropdown.parentNode.removeChild(this.dropdown);
-        delete this.dropdown;
+  render () {
+      return this;
+  }
+  
+  toggle () {
+    this.active = !this.active
+    if(this.active) {
+      this.show()
+    } else {
+      this.hide()
     }
-    
-    toggle (e) {
-        if (Helpers.hasClass(this.el, 'active') && e.type == "click") {
-            this.hide();
-        } else {
-            this.show();
-        }
-    }
-    
-    show (options) {
-        options || (options = {});
-        if(this.options.hide_sm && window.innerWidth < 720) return;
-        if(!this.dropdown) this.render();
-        
-        this.dropdown.style.display = 'block';
-        Helpers.addClass(this.el, 'active');
-        
-        this.resize();
-
-        this.overlay = document.createElement('div');
-        Helpers.addClass(this.overlay, 'uniformOverlay');
-        document.body.appendChild(this.overlay);
-
-        if (window.innerWidth < 720) {
-            this.lastScrollPosition = window.scrollY;
-            Helpers.addClass(document.body, 'uniformModal-hideBody');
-        }
-
-        this.listenTo(this.overlay, 'click', this.hide);
-        if(!options.silent) this.trigger('shown');
-    }
-    
-    hide (options) {
-        options || (options = {});
-        if(!this.dropdown) return;
-        if(!Helpers.hasClass(this.el, 'active')) return;
-        this.dropdown.style.display = 'none';
-        Helpers.removeClass(this.el, 'active');
-        if (this.overlay && this.overlay.parentNode) this.overlay.parentNode.removeChild(this.overlay)
-        if (window.innerWidth < 720) {
-            Helpers.removeClass(document.body, 'uniformModal-hideBody');
-            window.scrollTo(0, this.lastScrollPosition);
-        }
-        if(!options.silent) this.trigger('hidden');
-    }
-    
-    outsideClick (e) {
-        if (!this.dropdown || this.dropdown.offsetParent === null) return;
-        if (e.target === this.el) return;
-        if (e.target === this.overlay) return;
-        if (this.el.contains(e.target)) return;
-        if (this.dropdown.contains(e.target)) return;
-        this.hide();
-    }
-    
-    keyup (e) {
-        if(e.which != 27) return;
-        this.hide();
+  }
+  
+  show () {
+    if(!this.enabled) return;
+    this.active = true;
+    this.el.classList.add('-active');
+    if (this.popup) {
+      this.popup.show()
+    } else {
+      this.popup = new Popover({
+          content: this.content,
+          anchor: this.el,
+          align: this.options.align,
+          container: this.options.container
+      }).render();
+      this.listenToOnce(this.popup, 'hidden', this.hidden)
     }
+  }
+  
+  hide () {
+    this.popup.remove();
+    delete this.popup;
+    this.hidden();
+  }
+  
+  hidden () {
+    this.active = false;
+    this.el.classList.remove('-active');
+  }
+  
+  disable () {
+      this.enabled = false;
+  }
+  
+  enabled () {
+      this.enabled = true;
+  }
 }