uniform-ui 2.2.2 → 2.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 143d67c2923a932a2dac22c38c5d34b3c34d20ee9342f5b78dd3b16186519586
-  data.tar.gz: 137630fa26775f6a2daebad301f5b180d739dbf56cec8b36e315cc06521abb61
+  metadata.gz: 67b851ccfc8a78fe881b699982278e0ca0822e5548bc9a13b24d0058439a45e5
+  data.tar.gz: 3775d8521849dd5e05f2198de179c33dc7cb8daa42904420f8997dedbf0c351e
 SHA512:
-  metadata.gz: 95ada558865451809abc9d757fc5fde4d2aeec45bf47d7403d57ac7e077a8d49abfcdf27fca692efc86341a3429b79440ee01a369effcb593a04d998f171856a
-  data.tar.gz: 4ed537a653c15ebdd10d3365d5c79e5f8db3ada7ba71f89e685dd538eb2b3aec6c1fc3a94dd63db0ceadacb375eee09478d86c37e3f836704e5cfbb15861ddde
+  metadata.gz: 8915a6b1cc20b2d31a99c0d6b2a0f6896d2a412484a00cd8007968e761d09acfda4ed86ef5b8f906e2e5fb1d9c0a7eda416bac2358557956db437520a0033f83
+  data.tar.gz: 6caf4d24608b7bca30c93d2838f8a32a12ad91afe039748155fc0e110e960c92c066c01a2bfe026b329d675a4120b2f49a05b8ced017b86cdfc9a0ab044777f0

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

@@ -3,7 +3,7 @@ import * as Helpers from './dom-helpers';
 
 export default class Checkbox extends Component {
     initialize (options) {
-        this.el.addEventListener('change', this.change.bind(this));
+        this.listenTo(this.el, 'change', this.change);
     }
     
     render () {
@@ -15,7 +15,7 @@ export default class Checkbox extends Component {
             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.checkbox.addEventListener('click', this.click.bind(this));
+        this.listenTo(this.checkbox, 'click', this.click);
         return this;
     }
     

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

@@ -1,10 +1,12 @@
+import {uniqueId, hasClass} from './dom-helpers';
+
 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 = $(this.el);//remove
+        this.el = options.el || document.createElement('div');
+        this.cid = uniqueId('c');
     
         this.on = function (type, handler) {
             this.eventListeners.push({
@@ -12,13 +14,21 @@ export default class Component {
                 handler: handler
             });
         };
+        
+        this.off = function (type, handler) {
+            if(!this.eventListeners) return;
+            this.eventListeners = this.eventListeners.filter(function(listener){
+                return !(listener.type == type && listener.handler)
+            });
+        }.bind(this);
     
         this.trigger = function (event_key) {
-            for (var i = 0; i < this.eventListeners.length; i++) {
-                if(this.eventListeners[i].type == "*" || this.eventListeners[i].type == "all" || event_key == this.eventListeners[i].type){
-                    this.eventListeners[i].handler(event_key, this);
+            if(!this.eventListeners) return;
+            this.eventListeners.forEach(function(listener){
+                if(listener.type == "*" || listener.type == "all" || event_key == listener.type){
+                    listener.handler(event_key, this);
                 }
-            }
+            })
         };
         
         this.initialize(options);
@@ -33,9 +43,55 @@ export default class Component {
         return newObject;
     }
     
-    extend (object, objectMaster) {
+    /*
+        listenTo(el, 'click', '.inner_class', f(), this)
+        listenTo(el, 'click', f(), this)
+    */
+    listenTo(node, event, scope, callback, context){
+        // scope is optional param
+        if(typeof scope != "string") {
+            context = callback
+            callback = scope
+            scope = false;
+        }
+        context || (context = this);
+        var listen = [
+            node,
+            event,
+            function(e){
+                if(scope && !hasClass(e.target, scope.replace('.', ''))) return;
+                return callback.bind(context)(...arguments);
+            }.bind(context)
+        ]
+        this.eventListens.push(listen);
+        node.addEventListener(event, listen[2]);
+    }
+    
+    listenToOnce(node, event, callback, context){
+        context || (context = this);
+        var onceCallback = function(e){
+            node.removeEventListener(event, onceCallback);
+            return callback.apply(context, arguments);
+        }
+        var listen = [
+            node,
+            event,
+            onceCallback
+        ]
+        this.eventListens.push(listen);
+        node.addEventListener(event, onceCallback);
+    }
+    
+    remove () {
+        this.trigger('removed');
         
-        return
+        if(this.eventListens) this.eventListens.forEach(function(listen){
+            listen[0].removeEventListener(listen[1], listen[2]);
+        });
+        delete this.eventListens;
+        delete this.eventListeners;
+        if(this.el && this.el.parentNode) this.el.parentNode.removeChild(this.el);
+        delete this.el;
     }
     
     initialize(){}

data/lib/assets/javascripts/uniform/dom-helpers.js

@@ -19,7 +19,7 @@ export function addClass(el, className) {
 export function removeClass(el, className) {
     var removeClassFunction = function (el) {
         if (el.classList)
-          el.classList.remove(className);
+            className.split(" ").forEach((x) => el.classList.remove(x));
         else
           el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
     }
@@ -92,7 +92,7 @@ export function createElement(html) {
 }
 
 export function closest(el, selector) {
-    if(el.closest) return el.closest(el);
+    if(el.closest) return el.closest(selector);
     while (el) {
         if (Element.prototype.matches ? el.matches(selector) : el.msMatchesSelector(selector)) {
             return el;
@@ -119,18 +119,40 @@ export function filter(nodes, predicate){
     return filteredNodes;
 }
 
-export function once(el, type, callback) {
-    el.addEventListener(type, function fn (e){
-        console.log('fn', type, fn);
-        e.target.removeEventListener(e.type, fn);
-        return callback(e);
-    });
-}
-
 export function offset(el){
     var rect = el.getBoundingClientRect();
     return { 
       top: rect.top + window.scrollY,
       left: rect.left + window.scrollX
     }
+}
+
+export function offsetToViewport(el){
+    var rect = el.getBoundingClientRect();
+    return { 
+      top: rect.top,
+      left: rect.left
+    }
+}
+
+export function outerHeight(el){
+    var height = el.offsetHeight;
+    var style = getComputedStyle(el);
+
+    height += parseInt(style.marginTop) + parseInt(style.marginBottom);
+    return height;
+}
+
+export function outerWidth(el){
+    var width = el.offsetWidth;
+    var style = getComputedStyle(el);
+
+    width += parseInt(style.marginLeft) + parseInt(style.marginRight);
+    return width;
+}
+
+export function uniqueId(prefix){
+    window.idCounter || (window.idCounter = 0);
+    var id = ++window.idCounter + '';
+    return prefix ? prefix + id : id;
 }

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

@@ -8,50 +8,53 @@ import * as Helpers from './dom-helpers';
     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
 */
 export default class Dropdown extends Component {
     
     initialize(options){
         options = options || {}
         this.options = {
-            align: 'center',
+            align: 'center bottom',
             trigger: 'click',
             show_arrow: true,
             hide_sm: false,
-            square: 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.el.addEventListener(this.options.trigger, this.toggle.bind(this));
+        this.listenTo(this.el, this.options.trigger, this.toggle);
         
-        this.el.addEventListener('mousedown', function (){
+        this.listenTo(this.el, 'mousedown', function (){
             this.mousedown = true;
-        }.bind(this));
+        });
     
-        this.el.addEventListener('mouseup', function (){
+        this.listenTo(this.el, 'mouseup', function (){
             this.mousedown = false;
-        }.bind(this));
+        });
         
-        this.el.addEventListener('focus', function (){
+        this.listenTo(this.el, 'focus', function (){
             if(this.mousedown) return;
             this.show();
-        }.bind(this));
-        
-        document.addEventListener('focus', this.outsideClick.bind(this));
-        document.addEventListener(this.options.trigger, this.outsideClick.bind(this));
-        document.addEventListener('keyup', this.keyup.bind(this));
+        });
         
-        window.addEventListener('resize', this.resize.bind(this));
+        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 () {
-        this.dropdown = document.createElement('div');
         Helpers.addClass(this.dropdown, 'uniformDropdown-dropdown');
         Helpers.addClass(this.dropdown, 'absolute');
-        this.dropdown.style.minWidth = this.$el.outerWidth();
+        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');
@@ -61,34 +64,96 @@ export default class Dropdown extends Component {
         }
         Helpers.toggleClass(this.dropdown, 'square', this.options.square);
         this.dropdown.style.display = 'none';
-        document.body.appendChild(this.dropdown);
+        this.options.container.appendChild(this.dropdown);
         Helpers.removeClass(this.dropdown.querySelectorAll('.hidden'), 'hidden');
         return this;
     }
     
     resize () {
-        if(!this.dropdown) return;
+        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);
-        this.dropdown.style.top = offset.top + this.el.offsetHeight + "px";
+        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
+        }
         
-        if (this.options.align == "center") {
-            this.dropdown.style.left = offset.left + this.el.offsetWidth / 2 - this.dropdown.offsetWidth / 2 + "px";
-        } else if(this.options.align == "right") {
-            this.dropdown.style.right = window.innerWidth - (offset.left + this.el.offsetWidth) + "px";
-        } else {
-            this.dropdown.style.left = offset.left + "px";
+        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 (this.dropdown.style.left && this.dropdown.style.left + this.dropdown.offsetWidth > window.innerWidth) {
-            this.dropdown.style.left = window.innerWidth - this.dropdown.offsetWidth + "px";
+        
+        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 () {
-        this.el.parentNode.removeChild(this.el);
-        this.el.removeEventListener(this.options.trigger);
-        window.removeEventListener('resize', this.resize.bind(this));
-        document.removeEventListener(this.options.trigger, this.outsideClick.bind(this));
-        document.removeEventListener('keyup', this.keyup.bind(this));
+        Component.prototype.remove.apply(this, arguments);
+        if(this.dropdown.parentNode) this.dropdown.parentNode.removeChild(this.dropdown);
+        delete this.dropdown;
     }
     
     toggle (e) {
@@ -99,7 +164,8 @@ export default class Dropdown extends Component {
         }
     }
     
-    show () {
+    show (options) {
+        options || (options = {});
         if(this.options.hide_sm && window.innerWidth < 720) return;
         if(!this.dropdown) this.render();
         
@@ -117,20 +183,22 @@ export default class Dropdown extends Component {
             Helpers.addClass(document.body, 'uniformModal-hideBody');
         }
 
-        this.overlay.addEventListener('click', this.hide.bind(this));
-        this.trigger('shown');
+        this.listenTo(this.overlay, 'click', this.hide);
+        if(!options.silent) this.trigger('shown');
     }
     
-    hide () {
+    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.removeChild(this.overlay)
+        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);
         }
-        this.trigger('hidden');
+        if(!options.silent) this.trigger('hidden');
     }
     
     outsideClick (e) {

data/lib/assets/javascripts/uniform/floating-label.js

@@ -8,9 +8,9 @@ export default class FloatingLabel extends Component {
         this.input = this.el.querySelector("#" + this.label.getAttribute('for'));
         this.startingHeight;
         
-        this.input.addEventListener('focus', this.activate.bind(this));
-        this.input.addEventListener('blur', this.deactivate.bind(this));
-        this.input.addEventListener('revealed', this.render.bind(this));
+        this.listenTo(this.input, 'focus', this.activate);
+        this.listenTo(this.input, 'blur', this.deactivate);
+        this.listenTo(this.input, 'revealed', this.render);
     }
     
     render () {

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

@@ -5,6 +5,8 @@ import * as Helpers from './dom-helpers';
     Options
     content:    string|$el|function
     klass:      string - classes to append to modal container
+
+    * use blurrable to keep some elements from being blurred ie. <div blurrable="false">...</div>
 */
 export default class Modal extends Component {
     
@@ -14,8 +16,8 @@ export default class Modal extends Component {
         this.content = options.content;
 
         Helpers.addClass(this.el, 'uniformModal');
-        document.addEventListener('keyup', this.keyup.bind(this));
-        this.el.addEventListener('click', this.checkCloseButton.bind(this));
+        this.listenTo(document, 'keyup', this.keyup);
+        this.listenTo(this.el, 'click', this.checkCloseButton);
     }
     
     keyup (e) {
@@ -46,10 +48,13 @@ export default class Modal extends Component {
         
         this.el.appendChild(this.overlay);
         
-        var elements = document.body.children;
-        var elementCount = elements.length
-        for(var i=0; i < elementCount; i++){
-            this.blur.appendChild(elements[0])
+        let next_element = document.body.children[0]
+        while(next_element){
+          const element = next_element;
+          next_element = element.nextElementSibling;
+          if(!element.matches('[blurrable="false"]')) {
+            this.blur.appendChild(element)
+          }
         }
 
         Helpers.addClass(document.body, 'uniformModal-active');
@@ -58,14 +63,18 @@ export default class Modal extends Component {
         
         var container = document.createElement('div');
         Helpers.addClass(container, 'uniformModal-container');
-        container.innerHTML = content.innerHTML ? content.innerHTML : content;
+        if (content instanceof Node) {
+            container.appendChild(content);
+        } else {
+            container.innerHTML = content;
+        }
 
         var closeButton = document.createElement('div');
         Helpers.addClass(closeButton, 'uniformModal-close');
         container.appendChild(closeButton);
         
         this.el.style.top = window.scrollY;
-        this.overlay.addEventListener('click', this.close.bind(this));
+        this.listenTo(this.overlay, 'click', this.close);
         this.el.appendChild(container);
 
         if (this.options.klass) Helpers.addClass(container, this.options.klass);
@@ -87,17 +96,15 @@ export default class Modal extends Component {
         for(var i=0; i < elementCount; i++){
             document.body.appendChild(elements[0]);
         }
-        this.blur.parentNode.removeChild(this.blur);
+        if(this.blur.parentNode) this.blur.parentNode.removeChild(this.blur);
         window.scrollTo(0, this.original_scroll);
         this.trigger('closed');
         this.remove();
     }
     
     remove () {
-        this.overlay.parentNode.removeChild(this.overlay);
-        this.el.parentNode.removeChild(this.el);
-        this.el.removeEventListener('click', this.checkCloseButton.bind(this));
-        this.overlay.removeEventListener('click', this.close.bind(this));
-        document.removeEventListener('keyup', this.keyup.bind(this));
+        Component.prototype.remove.apply(this, arguments);
+        if(this.overlay && this.overlay.parentNode) this.overlay.parentNode.removeChild(this.overlay);
+        delete this.overlay;
     }
 }