uniform-ui 2.2.2 → 2.3.2

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

@@ -0,0 +1,186 @@
+import Component from './component';
+import * as Helpers from './dom-helpers';
+
+/*
+    Requirements
+    ---
+    content:        html|node
+    anchor:         node
+    
+    Options
+    ---
+    align:          [left|right|center|#%|#px] [top|center|bottom|#%|#px] | default: 'center bottom'
+    zIndex:         # | default: unset
+    offset:         {left: 0, top: 0}
+*/
+export default class Popover extends Component {
+    initialize (options) {
+        this.showing = false;
+        options = options || {};
+        this.options = {
+            zIndex: 2,
+            container: document.body,
+            align: 'center bottom',
+            anchor: document.body,
+            content: 'needs content',
+            offset: {left: 0, top: 0}
+        };
+        Object.assign(this.options, this.pick(options, Object.keys(this.options)));
+        
+        this.listenTo(document, 'click', this.checkFocus);
+        this.listenTo(document, 'focusin', this.checkFocus);
+        this.listenTo(document, 'keyup', this.checkEscape);
+        this.listenTo(window, 'resize', () => {
+          this.resize.bind(this)()
+        });
+        
+        if(typeof this.options.container == "string"){
+          this.options.container = Helpers.closest(this.options.anchor, this.options.container)
+          this.options.container = this.options.container || document.body
+        }
+    }
+    
+    render () {
+        this.showing = true;
+        this.el.style.position = 'absolute';
+        this.el.style.zIndex = this.options.zIndex;
+        
+        if(this.options.content instanceof Node)
+            this.el.appendChild(this.options.content);
+        else
+            this.el.innerHTML = this.options.content;
+        
+        this.options.container.appendChild(this.el);
+        this.resize();
+        this.trigger('shown');
+        
+        return this;
+    }
+    
+    resize () {
+        this.setPosition();
+        
+        var align = this.options.align.split(" ");
+        var reposition = false;
+        if (Helpers.offset(this.el).top + Helpers.outerHeight(this.el) > Math.max(document.body.offsetHeight, window.innerHeight)) {
+            align[1] = "top";
+            reposition = true;
+        }
+        if (Helpers.offset(this.el).top < 0) {
+            align[1] = "bottom";
+            reposition = true;
+        }
+        if (Helpers.offset(this.el).left < 0) {
+            align[0] = "right";
+            reposition = true;
+        }
+        if (Helpers.offset(this.el).left + Helpers.outerWidth(this.el) > 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";
+        
+        var offset = Helpers.offset(this.options.anchor);
+        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.options.anchor) / 2 - Helpers.outerWidth(this.el) / 2;
+        } else if (leftAlign == 'right'){
+            position.left = offset.left + Helpers.outerWidth(this.options.anchor);
+        } else if (leftAlign.includes("%")){
+            position.left = offset.left + Helpers.outerWidth(this.options.anchor) * parseInt(leftAlign) / 100;
+        } else if (leftAlign.includes("px")){
+            position.left = offset.left + Helpers.outerWidth(this.options.anchor) + parseInt(leftAlign);
+        }
+        
+        if(topAlign == 'top'){
+            let height = Helpers.outerHeight(container);
+            if(container == document.body){
+              height = Math.max(height, document.documentElement.scrollHeight)
+            }
+            position.bottom = height - offset.top;
+        } else if(topAlign == 'center'){
+            position.top = offset.top + Helpers.outerHeight(this.options.anchor) / 2 - Helpers.outerHeight(this.el) / 2;
+        } else if (topAlign == 'bottom'){
+            position.top = offset.top + Helpers.outerHeight(this.options.anchor);
+        } else if (topAlign.includes("%")){
+            position.top = offset.top + Helpers.outerHeight(this.options.anchor) * parseInt(topAlign) / 100;
+        } else if (topAlign.includes("px")){
+            position.top = offset.top + Helpers.outerHeight(this.options.anchor) + parseInt(topAlign);
+        }
+        
+        if(this.options.offset.left) position.left += parseInt(this.options.offset.left);
+        if(this.options.offset.left) position.right -= parseInt(this.options.offset.left);
+        if(this.options.offset.top) position.top += parseInt(this.options.offset.top);
+        if(this.options.offset.top) position.bottom -= parseInt(this.options.offset.top);
+        
+        this.el.style.left = 'auto';
+        this.el.style.right = 'auto';
+        this.el.style.top = 'auto';
+        this.el.style.bottom = 'auto';
+        Helpers.removeClass(this.el, 'popover-left popover-right popover-center popover-top popover-bottom');
+        Helpers.addClass(this.el, 'popover-' + topAlign);
+        Helpers.addClass(this.el, 'popover-' + leftAlign);
+        Object.keys(position).forEach(function(key){
+            this.el.style[key] = position[key] + "px";
+        }, this);
+    }
+    
+    checkFocus (e) {
+        if (e.defaultPrevented)             return;
+        if (!this.showing)                return;
+        if (e.target === this.el)           return;
+        if (e.target == this.options.anchor)        return;
+        if (this.el.contains(e.target))     return;
+        if (this.options.anchor.contains(e.target)) return;
+        this.hide();
+    }
+    
+    checkEscape (e) {
+        if(e.which != 27) return;
+        this.hide();
+    }
+    
+    isHidden() {
+        return !this.showing;
+    }
+    
+    hide (options) {
+        options = options || {};
+        if(!this.showing) return;
+        this.el.style.display = 'none';
+        this.showing = false;
+        if(options.silent !== true) {
+          this.trigger('hidden');
+        }
+    }
+    
+    show () {
+        if(this.showing) return;
+        this.el.style.display = 'block';
+        this.showing = true;
+        this.trigger('shown');
+    }
+    
+    toggle(flag) {
+        flag = flag || this.showing;
+        if(flag) this.hide(); else this.show();
+    }
+}

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

@@ -4,7 +4,7 @@ import * as Helpers from './dom-helpers';
 export default class Resizer extends Component {
     
     initialize () {
-        window.addEventListener('resize', this.resize.bind(this));
+        this.listenTo(window, 'resize', this.resize);
         Helpers.trigger(window, 'resize');
     }
     

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

@@ -8,6 +8,7 @@ import * as Helpers from './dom-helpers';
     limit: int | false - number of options to limit to, or false to not limit
     showAll: function(select_options) to run if/when "Show All" is clicked
     label: string, used for mobile menu
+    container: selector for where to render dropdown
 */
 export default class Select extends Component {
 
@@ -22,22 +23,23 @@ export default class Select extends Component {
                 
                 return false;
             },
-            limit: 8
+            limit: 8,
+            container: document.body
         }
         
         Object.assign(this.options, this.pick(options, Object.keys(this.options)));
 
         var showing, lastScrollPosition, select_options;
 
-        this.el.addEventListener('change', this.updateSelect.bind(this));
-        this.el.addEventListener('close', this.hideOptions.bind(this));
-        this.el.addEventListener('revealed', this.resize.bind(this));
+        this.listenTo(this.el, 'change', this.updateSelect);
+        this.listenTo(this.el, 'close', this.hideOptions);
+        this.listenTo(this.el, 'revealed', this.resize);
         this.el.uniformSelect = this;
         
-        window.addEventListener('resize', this.resize.bind(this));
-        window.addEventListener('scroll', this.updatePosition.bind(this));
-        document.addEventListener('click', this.outsideClick.bind(this));
-        document.addEventListener('keyup', this.keyup.bind(this));
+        this.listenTo(window, 'resize', this.resize);
+        this.listenTo(window, 'scroll', this.updatePosition);
+        this.listenTo(document, 'click', this.outsideClick);
+        this.listenTo(document, 'keyup', this.keyup);
         
         this.activeIcon = document.createElement('span');
         Helpers.addClass(this.activeIcon, 'uniformSelect-option-icon');
@@ -64,14 +66,15 @@ export default class Select extends Component {
         this.container.appendChild(this.edit_button);
         
         if (this.el.name) {
-            Helpers.addClass(this.container, this.name.toLowerCase().replace(/[^a-z0-9\-_]+/g, '-'));
+            Helpers.addClass(this.container, this.el.name.toLowerCase().replace(/[^a-z0-9\-_]+/g, '-'));
         }
         this.el.style.display = "none";
         this.el.insertAdjacentElement('beforebegin', this.container);
         this.updateSelect();
         this.resize();
         
-        this.edit_button.addEventListener('click', this.showOptions.bind(this));
+        this.listenTo(this.edit_button, 'click', this.showOptions);
+        this.listenTo(this.edit_button, 'click', '.uniformSelect-remove', this.removeSelection);
     }
 
     resize () {
@@ -85,7 +88,8 @@ export default class Select extends Component {
         
         this.edit_button.innerHTML = '';
         this.edit_button.style.width = "auto";
-        this.edit_button.style.width = this.container.offsetWidth + "px";
+        this.edit_button.style.maxWidth = "100%";
+        this.edit_button.style.minWidth = this.container.offsetWidth + "px";
         
         Helpers.each(children, function(child){
             this.edit_button.appendChild(child);
@@ -110,14 +114,14 @@ export default class Select extends Component {
         }
         this.select_options.style.fontSize = Helpers.css(this.el, 'font-size');
         this.select_options.style.display = 'none';
-        document.body.appendChild(this.select_options);
+        this.options.container.appendChild(this.select_options);
         
         Helpers.each(this.el.querySelectorAll('option'), function(el, index){
             var button = Helpers.createElement("<button type='button' class='uniformSelect-option block outline text-left'>");
             button.option = el;
             button.textContent = el.textContent;
             button.value = el.value;
-            if (button.textContent == "") button.innerHTML("<span class='text-italic text-muted'>None</span>");
+            if (button.textContent == "") button.innerHTML = "<span class='text-italic text-muted'>None</span>";
             if(el.selected){
                 Helpers.addClass(button, 'active');
                 button.append(this.activeIcon.cloneNode(true));
@@ -125,23 +129,23 @@ export default class Select extends Component {
                 Helpers.addClass(button, 'hide');
             }
             this.select_options.append(button);
-            button.addEventListener('click', this.selectOption.bind(this));
+            this.listenTo(button, 'click', this.selectOption);
         }.bind(this));
 
         var actions_el = Helpers.createElement('<div class="uniformSelect-options-actions"></div>');
         if (this.options.limit && this.el.querySelectorAll('option').length > this.options.limit) {
             var show_all_button = Helpers.createElement("<button type='button' class='uniformSelect-show-all outline blue' style='display: block; border: none'>Show All</button>");
-            show_all_button.addEventListener('click', function(e){
+            this.listenTo(show_all_button, 'click', function(e){
                 Helpers.trigger(this.el, 'show_all');
                 if (this.options.showAll) this.options.showAll(this.select_options);
                 e.preventDefault();
                 e.stopPropagation();
-            }.bind(this));
+            })
             actions_el.appendChild(show_all_button);
         }
         if (this.el.multiple) {
             var done_button = Helpers.createElement("<button type='button' class='uniformSelect-done block outline blue'>Done</button>");
-            done_button.addEventListener('click', this.hideOptions.bind(this));
+            this.listenTo(done_button, 'click', this.hideOptions);
             actions_el.appendChild(done_button);
         }
         if (!Helpers.is_empty(actions_el)) {
@@ -158,6 +162,7 @@ export default class Select extends Component {
         Helpers.removeClass(this.select_options, 'fixed');
         Helpers.removeClass(this.edit_button, 'active');
         Helpers.removeClass(document.body, 'uniformModal-hideBody');
+        
         if(this.lastScrollPosition && window.innerWidth < 720) window.scrollTo(0, this.lastScrollPosition);
         Helpers.trigger(this.el, 'hidden:options');
     }
@@ -175,6 +180,9 @@ export default class Select extends Component {
         this.lastScrollPosition = window.scrollY;
         this.updatePosition();
         Helpers.addClass(document.body, 'uniformModal-hideBody');
+        if (this.options.container == document.body) {
+            Helpers.removeClass(document.body, 'uniformModal-hideBody');
+        }
     }
 
     selectOption(e) {
@@ -189,11 +197,7 @@ export default class Select extends Component {
         }
         Helpers.toggleClass(e.currentTarget, 'active');
         e.currentTarget.option.selected = Helpers.hasClass(e.currentTarget, 'active');
-        if (Helpers.hasClass(e.currentTarget, 'active')) {
-            e.currentTarget.append(this.activeIcon.cloneNode(true));
-        } else {
-            Helpers.each(e.currentTarget.querySelectorAll('.uniformSelect-option-icon'), Helpers.remove);
-        }
+        this.updateOptions();
         Helpers.trigger(this.el, 'change');
     }
     
@@ -202,12 +206,24 @@ export default class Select extends Component {
         var value = Helpers.map(Helpers.filter(this.el.querySelectorAll("option"), function(el){
             return el.selected;
         }), function(el){
-            return el.textContent;
-        }).join(", ");
+            return this.el.multiple ? `<span class="uniformSelect-selection">${el.textContent}<span class="uniformSelect-remove"></span></span>` : el.textContent;
+        }.bind(this)).join(" ");
         
         if (value == "") value = "&nbsp;";
         this.edit_button.querySelector('.text-js').innerHTML = value;
     }
+    
+    updateOptions () {
+        Helpers.each(this.select_options.querySelectorAll("button"), function(button) {
+            if(!button.option) return;
+            Helpers.toggleClass(button, 'active', button.option.selected);
+            if (Helpers.hasClass(button, 'active')) {
+                button.append(this.activeIcon.cloneNode(true));
+            } else {
+                Helpers.each(button.querySelectorAll('.uniformSelect-option-icon'), Helpers.remove);
+            }
+        }.bind(this))
+    }
 
     updatePosition () {
         if(!this.select_options) return;
@@ -232,4 +248,15 @@ export default class Select extends Component {
             Helpers.addClass(this.select_options, 'fixed');
         }
     }
+    
+    removeSelection(e) {
+        e.preventDefault();
+        var target = Helpers.filter(this.el.querySelectorAll("option"), function(el){
+            return el.innerText.trim() == e.target.parentNode.innerText.trim();
+        })[0];
+        if(!target) return;
+        target.selected = false;
+        this.updatePosition();
+        Helpers.trigger(this.el, 'change');
+    }
 }

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

@@ -1,9 +1,11 @@
 import Component from './component';
+import Popover from './popover';
 import * as Helpers from './dom-helpers';
 
 /*
     message: html
     align: top|bottom (default: top)
+    container: document.body
 
     methods
     ------
@@ -17,6 +19,7 @@ export default class Tooltip extends Component {
         options = options || {}
         this.options = {
             align: 'top',
+            container: document.body
         };
         Object.assign(this.options, this.pick(options, Object.keys(this.options)));
         
@@ -24,89 +27,33 @@ export default class Tooltip extends Component {
         this.message = options.message;
         options.el.tooltip = this;
 
-        this.el.addEventListener('mouseenter', this.show.bind(this));
-        this.el.addEventListener('mouseleave', this.hide.bind(this));
+        this.listenTo(this.el, 'mouseenter', this.show);
+        this.listenTo(this.el, 'mouseleave', this.hide);
     }
     
     render () {
-        this.popup = Helpers.createElement('<div class="uniformTooltip-popup">' + this.message + '</div>');
-        this.popup.insertBefore(Helpers.createElement("<div class='uniformTooltip-pointer'></div>"), this.popup.firstChild);
-        this.el.appendChild(this.popup);
-        if (this.message.length > 100) {
-            this.popup.style.minWidth = "200px";
-        } else {
-            this.popup.style.whiteSpace = "nowrap";
-        }
-        
-        if (this.popup.offsetWidth + Helpers.offset(this.popup).left > window.innerWidth) {
-            this.popup.style.left = window.innerWidth - this.popup.offsetWidth - Helpers.offset(this.popup).left + "px"
-        }
-        
-        this.popup.style.display = "block";
-        if (this.options.align == "bottom" || Helpers.offset(this.popup).top < 0) {
-            Helpers.addClass(this.popup, '-align-bottom');
-        }
-        this.popup.style.display = 'none';
         
         return this;
     }
     
-    remove () {
-        this.el.parentNode.removeChild(this.el);
-    }
-    
     show () {
-        if(!this.popup) this.render();
         if(!this.enabled) return;
-
-        if (this.hiding) return this.show_after_hide = true;
-        if (this.showing || this.shown) return;
-        this.popup.style.display = 'block';
-        this.showing = true;
-        this.hidden = false;
-        
-        var endTransition = function (e) {
-            this.trigger('shown');
-            this.showing = false;
-            this.shown = true;
-            if (this.hide_after_show) this.hide();
-            this.hide_after_show = false;
-        }.bind(this);
-        
-        Helpers.once(this.popup, 'transitionend', endTransition);
-        Helpers.once(this.popup, 'msTransitionEnd', endTransition);
-        Helpers.once(this.popup, 'oTransitionEnd', endTransition);
-        
-        if (Helpers.offset(this.popup).left < 0) this.popup.style.left = "0";
-        Helpers.addClass(this.el, 'active');
-        
-        // TODO remove timeout usage... Not sure why this is necessary, but doesn't do css animation if not delayed.
-        setTimeout(function(){
-            Helpers.addClass(this.popup, '-reveal');
-        }.bind(this), 1);
+        this.popup = new Popover({
+            content: `<div class="uniformTooltip-popup">
+              <div class='uniformTooltip-pointer'></div>
+              ${this.message}
+            </div>`,
+            anchor: this.el,
+            align: this.options.align == "top" ? `center top` : 'center 100%',
+            offset: {
+              top: -7
+            },
+            container: this.options.container
+        }).render();
     }
     
     hide () {
-        if (this.showing) return this.  hide_after_show = true;
-        if (this.hiding || this.hidden) return;
-        this.hiding = true;
-        this.shown = false;
-        
-        var endTransition = function (e) {
-            this.trigger('hidden');
-            Helpers.removeClass(this.el, 'active');
-            this.popup.style.display = 'none';
-            this.hiding = false;
-            this.hidden = true;
-            if (this.show_after_hide) this.show();
-            this.show_after_hide = false;
-        }.bind(this);
-        
-        Helpers.once(this.popup, 'transitionend', endTransition);
-        Helpers.once(this.popup, 'msTransitionEnd', endTransition);
-        Helpers.once(this.popup, 'oTransitionEnd', endTransition);
-        
-        Helpers.removeClass(this.popup, '-reveal');
+      this.popup.remove();
     }
     
     disable () {