uniform-ui 3.0.0.beta2 → 3.0.0.beta10

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

@@ -1,5 +1,5 @@
 import Component from './component';
-import { closest, offset, outerWidth, outerHeight, removeClass, addClass } from 'dolla';
+import { offset, outerWidth, outerHeight, append, css } from 'dolla';
 
 /*
     Requirements
@@ -13,6 +13,7 @@ import { closest, offset, outerWidth, outerHeight, removeClass, addClass } from
     zIndex:         # | default: unset
     offset:         {left: 0, top: 0}
     container:      element to append popover to. default: document
+    transition:     string (reference transition classes in utilities)
 */
 export default class Popover extends Component {
     initialize (options) {
@@ -24,7 +25,8 @@ export default class Popover extends Component {
             align: 'center bottom',
             anchor: document.body,
             content: 'needs content',
-            offset: {left: 0, top: 0}
+            offset: {left: 0, top: 0},
+            transition: false
         };
         Object.assign(this.options, this.pick(options, Object.keys(this.options)));
         this.el.removeAttribute('content');
@@ -34,11 +36,11 @@ export default class Popover extends Component {
         this.listenTo(document, 'focusin', this.checkFocus);
         this.listenTo(document, 'keyup', this.checkEscape);
         this.listenTo(window, 'resize', () => {
-          this.resize.bind(this)()
+            this.resize.bind(this)()
         });
         
         if(typeof this.options.container == "string"){
-          this.options.container = closest(this.options.anchor, this.options.container)
+            this.options.container = this.options.anchor.closest(this.options.container)
         }
         this.options.container = this.options.container || document.body
         
@@ -48,14 +50,21 @@ export default class Popover extends Component {
         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.content = document.createElement('div')
+        if (this.options.transition) {
+            this.content.classList.add(this.options.transition, '-out')
+        }
+        append(this.el, this.content)
+        append(this.content, this.options.content);
         
         this.options.container.appendChild(this.el);
         this.resize();
+        
+        if (this.options.transition) {
+            this.content.classList.remove('-out')
+            this.transitionDuration = Math.max(...css(this.content, 'transition-duration').split(", ").map(x => parseFloat(x))) * 1000
+        }
+        
         this.trigger('shown');
         
         return this;
@@ -66,37 +75,37 @@ export default class Popover extends Component {
         let bounds = this.el.getBoundingClientRect();
         const body_bounds = document.body.getBoundingClientRect();
         const window_bounds = {
-          top: 0,
-          bottom: window.innerHeight,
-          left: 0,
-          right: window.innerWidth
+            top: 0,
+            bottom: window.innerHeight,
+            left: 0,
+            right: window.innerWidth
         };
         
         var reposition = false;
         if (bounds.bottom > Math.max(body_bounds.bottom, window_bounds.bottom)) {
-          var [leftAlign, topAlign] = this.options.align.split(" ");
-          this.setPosition(`${leftAlign} top`);
-          bounds = this.el.getBoundingClientRect()
-          if(bounds.top < 0) {
-            this.setPosition(`${leftAlign} bottom`);
-          }
-          bounds = this.el.getBoundingClientRect()
+            var [leftAlign, topAlign] = this.options.align.split(" ");
+            this.setPosition(`${leftAlign} top`);
+            bounds = this.el.getBoundingClientRect()
+            if(bounds.top < 0) {
+                this.setPosition(`${leftAlign} bottom`);
+            }
+            bounds = this.el.getBoundingClientRect()
         }
         if (bounds.top < body_bounds.top) {
             const difference = body_bounds.top - bounds.top
             if(this.el.style.top != null) this.el.style.top = parseInt(this.el.style.top) + difference + "px"
-            if(this.el.style.bottom != null) this.el.style.bottom = parseInt(this.el.style.bottom) - difference + "px"
+                if(this.el.style.bottom != null) this.el.style.bottom = parseInt(this.el.style.bottom) - difference + "px"
         }
         if (bounds.left < body_bounds.left) {
             const difference = body_bounds.left - bounds.left
             if(this.el.style.left != null) this.el.style.left = parseInt(this.el.style.left) + difference + "px"
-            if(this.el.style.right != null) this.el.style.right = parseInt(this.el.style.right) - difference + "px"
-            bounds = this.el.getBoundingClientRect()
+                if(this.el.style.right != null) this.el.style.right = parseInt(this.el.style.right) - difference + "px"
+                    bounds = this.el.getBoundingClientRect()
         }
         if (bounds.right > body_bounds.right) {
             const difference = body_bounds.right - bounds.right
             if(this.el.style.left != null) this.el.style.left = parseInt(this.el.style.left) + difference + "px"
-            if(this.el.style.right != null) this.el.style.right = parseInt(this.el.style.right) - difference + "px"
+                if(this.el.style.right != null) this.el.style.right = parseInt(this.el.style.right) - difference + "px"
         }
     }
     
@@ -120,7 +129,8 @@ export default class Popover extends Component {
         if(leftAlign == 'left'){
             position.right = outerWidth(container) - anchorOffset.left;
         } else if(leftAlign == 'center'){
-            position.left = anchorOffset.left + outerWidth(this.options.anchor) / 2 - outerWidth(this.el) / 2;
+            position.left = anchorOffset.left + outerWidth(this.options.anchor) / 2;
+            position.transform = "translateX(-50%)";
         } else if (leftAlign == 'right'){
             position.left = anchorOffset.left + outerWidth(this.options.anchor);
         } else if (leftAlign.includes("px")){
@@ -130,9 +140,9 @@ export default class Popover extends Component {
         if(topAlign == 'top'){
             let height = outerHeight(container);
             if(container == document.body && getComputedStyle(container)['position'] == "static"){
-              height = window.innerHeight;
+                height = window.innerHeight;
             } else if (container == document.body) {
-              height = Math.max(height, document.body.clientHeight);
+                height = Math.max(height, document.body.clientHeight);
             }
             position.bottom = height - anchorOffset.top;
         } else if(topAlign == 'center'){
@@ -154,9 +164,9 @@ export default class Popover extends Component {
         this.el.style.top = null;
         this.el.style.bottom = null;
         this.el.style.transform = null;
-        removeClass(this.el, 'popover-left popover-right popover-center popover-top popover-bottom');
-        addClass(this.el, 'popover-' + topAlign);
-        addClass(this.el, 'popover-' + leftAlign);
+        this.el.classList.remove('popover-left', 'popover-right', 'popover-center', 'popover-top', 'popover-bottom');
+        this.el.classList.add('popover-' + topAlign);
+        this.el.classList.add('popover-' + leftAlign);
         Object.keys(position).forEach(function(key){
             this.el.style[key] = position[key] + (key != "transform" ? "px" : "");
         }, this);
@@ -185,31 +195,40 @@ export default class Popover extends Component {
     
     hide (options) {
         options = options || {};
-        if(!this.showing) return;
-        this.el.style.display = 'none';
+        if (!this.showing) return;
+
+        this.content.classList.add('-out')
         this.showing = false;
-        if(options.silent !== true) {
-          this.trigger('hidden');
-        }
+        setTimeout(() => {
+            this.el.zIndexWas = this.el.style.zIndex
+            this.el.style.zIndex = '-99';
+            if (options.silent !== true) {
+                this.trigger('hidden');
+            }
+        }, this.transitionDuration || 0)
     }
     
     show () {
         if(this.showing) return;
-        this.el.style.display = 'block';
+        
+        this.el.style.zIndex = this.el.zIndexWas
+        this.content.classList.remove('-out');
         this.showing = true;
-        this.trigger('shown');
+        setTimeout(() => {
+            this.trigger('shown');
+        }, this.transitionDuration || 0)
     }
     
     toggle(flag) {
         flag = flag || this.showing;
-        if(flag) this.hide(); else this.show();
+        if (flag) this.hide(); else this.show();
     }
     
     persist() {
-      this.persisting = true;
+        this.persisting = true;
     }
     
     unpersist() {
-      this.persisting = false;
+        this.persisting = false;
     }
 }

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

@@ -1,5 +1,5 @@
 import Component from './component';
-import { trigger, toggleClass } from 'dolla';
+import { trigger } from 'dolla';
 
 export default class Resizer extends Component {
     
@@ -7,8 +7,8 @@ export default class Resizer extends Component {
         const breakpoints = getComputedStyle(window.document.body).getPropertyValue('--breakpoints')
         this.breakpoints = {}
         breakpoints.split(",").forEach(breakpoint => {
-          const [key, value] = breakpoint.split("/")
-          this.breakpoints[key.trim()] = value;
+            const [key, value] = breakpoint.split("/")
+            this.breakpoints[key.trim()] = value;
         })
         
         this.listenTo(window, 'resize', this.resize);
@@ -16,24 +16,24 @@ export default class Resizer extends Component {
     }
     
     resize () {
-      const width = this.el.offsetWidth;
-      Object.keys(this.breakpoints).forEach(size => {
-        const query = this.breakpoints[size]
-        const css_class = size + '-container'
-        let [attribute, value] = query.split(":")
-        if(value.match("px")){
-          value = parseInt(value)
-        } else {
-          throw "unsupported media units"
-        }
+        const width = this.el.offsetWidth;
+        Object.keys(this.breakpoints).forEach(size => {
+            const query = this.breakpoints[size]
+            const css_class = size + '-container'
+            let [attribute, value] = query.split(":")
+            if(value.match("px")){
+                value = parseInt(value)
+            } else {
+                throw "unsupported media units"
+            }
         
-        if(attribute == "min-width") {
-          toggleClass(this.el, css_class, width > value)
-        } else if (attribute == "max-width") {
-          toggleClass(this.el, css_class, width < value)
-        } else {
-          throw "unsupported media feature"
-        }
-      });
+            if(attribute == "min-width") {
+                this.el.classList.toggle(css_class, width > value)
+            } else if (attribute == "max-width") {
+                this.el.classList.toggle(css_class, width < value)
+            } else {
+                throw "unsupported media feature"
+            }
+        });
     }
 }

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

@@ -2,7 +2,7 @@ import Component from './component';
 import Popover from './popover';
 import Modal from './modal';
 import { check as checkIcon, arrow_down as arrowIcon, x as xIcon } from './icons';
-import { createElement, HTML_ATTRIBUTES, filter, css, toggleClass, removeClass, isEmpty, trigger, hasClass, closest } from 'dolla';
+import { createElement, HTML_ATTRIBUTES, filter, css, isEmpty, trigger } from 'dolla';
 
 /*
   options: array of html options, each item can be string | array | object
@@ -23,196 +23,220 @@ import { createElement, HTML_ATTRIBUTES, filter, css, toggleClass, removeClass,
 */
 export default class Select extends Component {
 
-  initialize (options = {}) {
-    this.htmlOptions = options.options.map(option => {
-      if(typeof option == "string") {
-        return {
-          value: option,
-          text: option
+    initialize (options = {}) {
+        this.options = {
+            multiple: false,
+            limit: 8,
+            container: false
         }
-      } else if (Array.isArray(option)){
-        return {
-          value: option[1],
-          text: option[0],
-          selected: option[2]
-        }
-      } else if (typeof option == "object") {
-        return option
-      } else {
-        throw "option of unexpected type"
-      }
-    });
-    this.options = {
-      multiple: false,
-      limit: 8,
-      container: false
-    }
-    Object.assign(this.options, this.pick(options, Object.keys(this.options)));
+        Object.assign(this.options, this.pick(options, Object.keys(this.options)));
         
-    this.el_options = Object.assign({}, this.pick(options, HTML_ATTRIBUTES));
-    this.el = createElement('button', this.el_options);
-    this.el.classList.add('uniformSelect');
+        this.el_options = Object.assign({}, this.pick(options, HTML_ATTRIBUTES));
+        this.el = createElement('button', this.el_options);
+        this.el.type = "button";
+        this.el.classList.add('uniformSelect');
 
-    this.listenTo(this.el, 'click', this.toggleOptions);
-    this.listenTo(this.el, 'click', '.uniformSelect-remove', this.removeSelection);
-    this.listenTo(this.el, 'change', 'select', this.renderValue);
-    this.listenTo(this.el, 'close', 'select', this.removeOptions);
-  }
+        this.listenTo(this.el, 'click', this.toggleOptions);
+        this.listenTo(this.el, 'click', '.uniformSelect-remove', this.removeSelection);
+        this.listenTo(this.el, 'change', 'select', this.renderValue);
+        this.listenTo(this.el, 'close', 'select', this.removeOptions);
+    
+        if (options.options) {
+            this.htmlOptions = options.options.map(option => {
+                if(typeof option == "string") {
+                    return {
+                        value: option,
+                        text: option
+                    }
+                } else if (Array.isArray(option)){
+                    return {
+                        value: option[1],
+                        text: option[0],
+                        selected: option[2]
+                    }
+                } else if (typeof option == "object") {
+                    return option
+                } else {
+                    throw "option of unexpected type"
+                }
+            });
+        }
+    
+        if (options.el) {
+            this.select = options.el;
+            this.el.setAttribute('class', this.select.getAttribute('class'))
+            this.el.classList.add('uniformSelect')
+            if (!this.htmlOptions) {
+                this.htmlOptions = Array.from(this.select.querySelectorAll('option')).map(option => {
+                    return {
+                        value: option.value,
+                        text: option.innerHTML,
+                        selected: option.selected
+                    }
+                })
+            }
+        }
+    }
     
-  render () {
-    this.valueEl = createElement('span');
-    this.valueEl.classList.add('uniformSelect-value')
-    this.el.append(this.valueEl);
+    render () {
+        this.valueEl = createElement('span');
+        this.valueEl.classList.add('uniformSelect-value')
+        this.el.append(this.valueEl);
         
-    this.indicatorEl = createElement('span', {children: arrowIcon})
-    this.indicatorEl.classList.add('uniformSelect-indicator')
-    this.el.append(this.indicatorEl);
+        this.indicatorEl = createElement('span', {children: arrowIcon})
+        this.indicatorEl.classList.add('uniformSelect-indicator')
+        this.el.append(this.indicatorEl);
 
-    this.select = createElement('select', this.el_options);
-    this.htmlOptions.forEach(option => {
-      this.select.append(createElement('option', Object.assign({}, {children: option.text}, option)))
-    });
-    this.el.append(this.select);
+        if (this.select) {
+            this.select.replaceWith(this.el);
+            this.select.innerHTML = '';
+        } else {
+            this.select = createElement('select', this.el_options);
+        }
+        this.htmlOptions.forEach(option => {
+            this.select.append(createElement('option', Object.assign({}, {children: option.text}, option)))
+        });
+        this.el.append(this.select);
         
         
-    // Append placeholder of longest option, to set width
-    const longestText = this.htmlOptions.map(x => x.text).sort((a, b) => a.length < b.length)[0]
-    const placeholder = createElement('span', {class: 'uniformSelect-placeholder', children: longestText})
-    this.el.append(placeholder);
+        // Append placeholder of longest option, to set width
+        const longestText = this.htmlOptions.map(x => x.text).sort((a, b) => a.length < b.length)[0]
+        const placeholder = createElement('span', {class: 'uniformSelect-placeholder', children: longestText})
+        this.el.append(placeholder);
         
-    this.renderValue();
-    return this;
-  }
+        this.renderValue();
+        return this;
+    }
     
-  renderValue () {
-    const selectedOptions = filter(this.select.querySelectorAll("option"), el => el.selected);
-    const html = selectedOptions.map(el => this.options.multiple ? `
-      <span class="uniformSelect-selection">
-        <span>${el.textContent}</span><span class="uniformSelect-remove">${xIcon}</span>
-      </span>
-    ` : el.textContent).join(" ");
+    renderValue () {
+        const selectedOptions = filter(this.select.querySelectorAll("option"), el => el.selected);
+        const html = selectedOptions.map(el => this.options.multiple ? `
+            <span class="uniformSelect-selection">
+                <span>${el.textContent}</span><span class="uniformSelect-remove">${xIcon}</span>
+            </span>
+        ` : el.textContent).join(" ");
         
-    this.valueEl.innerHTML = html;
-  }
-    
-  selectOption (e) {
-    const makeActive = !e.target.option.selected;
-    if (!this.options.multiple && makeActive) {
-      removeClass(e.target.offsetParent.querySelectorAll('.active'), 'active');
+        this.valueEl.innerHTML = html;
     }
-    toggleClass(e.target, 'active', makeActive);
-    e.target.option.selected = makeActive;
+    
+    selectOption (e) {
+        const makeActive = !e.target.option.selected;
+        if (!this.options.multiple && makeActive) {
+            e.target.offsetParent.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
+        }
+        e.target.classList.toggle('active', makeActive);
+        e.target.option.selected = makeActive;
         
-    if (!this.options.multiple) {
-      this.removeOptions();
-    }
+        if (!this.options.multiple) {
+            this.removeOptions();
+        }
         
-    trigger(this.select, 'change');
-  }
+        trigger(this.select, 'change');
+    }
     
-  removeSelection (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    var option = filter(this.select.querySelectorAll("option"), function(el){
-      return el.innerText.trim() == closest(e.target, '.uniformSelect-selection').innerText.trim();
-    })[0];
-    if(!option) return;
-    option.selected = false;
-    option.button.classList.remove('active');
+    removeSelection (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var option = filter(this.select.querySelectorAll("option"), function(el){
+            return el.innerText.trim() == e.target.closest('.uniformSelect-selection').innerText.trim();
+        })[0];
+        if(!option) return;
+        option.selected = false;
+        option.button.classList.remove('active');
         
-    trigger(this.select, 'change');
-  }
-  
-  toggleOptions (e) {
-    if(e && (e.target.matches('.uniformSelect-remove') || closest(e.target, '.uniformSelect-remove'))){
-      return;
+        trigger(this.select, 'change');
     }
-    toggleClass(this.el, 'active')
-    if(hasClass(this.el, 'active')){
-      this.renderOptions()
-    } else {
-      this.removeOptions()
+  
+    toggleOptions (e) {
+        if(e && (e.target.matches('.uniformSelect-remove') || e.target.closest('.uniformSelect-remove'))){
+            return;
+        }
+        this.el.classList.toggle('active')
+        if(this.el.classList.contains('active')){
+            this.renderOptions()
+        } else {
+            this.popover.toggle(false)
+        }
     }
-  }
 
-  renderOptions () {
-    const options = createElement("div", {
-      class: 'uniformSelect-options'
-    });
+    renderOptions () {
+        const options = createElement("div", {
+            class: 'uniformSelect-options'
+        });
       
-    options.style.fontSize = css(this.el, 'font-size')
+        options.style.fontSize = css(this.el, 'font-size')
       
-    this.select.querySelectorAll('option').forEach(function(option, index){
-      var button = createElement("button", {
-        type: 'button',
-        class: 'uniformSelect-option'
-      });
-      button.option = option;
-      option.button = button;
-      button.textContent = option.textContent;
-      button.value = option.value;
-      if (button.textContent == "") button.innerHTML = "<span class='text-italic text-muted'>None</span>";
-      toggleClass(button, 'active', option.selected);
+        this.select.querySelectorAll('option').forEach(function(option, index){
+            var button = createElement("button", {
+                type: 'button',
+                class: 'uniformSelect-option'
+            });
+            button.option = option;
+            option.button = button;
+            button.textContent = option.textContent;
+            button.value = option.value;
+            if (button.textContent == "") button.innerHTML = "<span class='text-italic text-muted'>None</span>";
+            button.classList.toggle('active', option.selected);
       
-      console.log(this.options.limit, index);
-      if (this.options.limit && (index + 1) > this.options.limit) {
-        button.classList.add('hide')
-      }
-      options.append(button);
-    }, this);
+            if (this.options.limit && (index + 1) > this.options.limit) {
+                button.classList.add('hide')
+            }
+            options.append(button);
+        }, this);
     
-    this.listenTo(options, 'click', '.uniformSelect-option', this.selectOption);
+        this.listenTo(options, 'click', '.uniformSelect-option', this.selectOption);
 
 
-    const actions = createElement('div', {
-      class: 'uniformSelect-actions'
-    });
+        const actions = createElement('div', {
+            class: 'uniformSelect-actions'
+        });
     
-    if (this.options.limit && this.htmlOptions.length > this.options.limit) {
-      const button = createElement('button', {
-        type: 'button',
-        class: 'uniformSelect-show-all',
-        children: 'Show All'
-      });
-      this.listenTo(button, 'click', this.showAllOptions.bind(this))
-      actions.append(button);
-    }
-    if (this.options.multiple) {
-      const button = createElement('button', {
-        type: 'button',
-        class: 'uniformSelect-done',
-        children: ['Done']
-      });
-      this.listenTo(button, 'click', this.removeOptions.bind(this));
-      actions.append(button);
-    }
-    if (!isEmpty(actions)) {
-      options.append(actions);
-    }
+        if (this.options.limit && this.htmlOptions.length > this.options.limit) {
+            const button = createElement('button', {
+                type: 'button',
+                class: 'uniformSelect-show-all',
+                children: 'Show All'
+            });
+            this.listenTo(button, 'click', this.showAllOptions.bind(this))
+            actions.append(button);
+        }
+        if (this.options.multiple) {
+            const button = createElement('button', {
+                type: 'button',
+                class: 'uniformSelect-done',
+                children: ['Done']
+            });
+            this.listenTo(button, 'click', this.removeOptions.bind(this));
+            actions.append(button);
+        }
+        if (!isEmpty(actions)) {
+            options.append(actions);
+        }
     
-    this.popover = new Popover({
-      offset: {top: 1},
-      align: '0px bottom',
-      anchor: this.el,
-      content: options,
-      container: this.options.container
-    }).render()
+        this.popover = new Popover({
+            offset: {top: 1},
+            align: '0px bottom',
+            anchor: this.el,
+            content: options,
+            container: this.options.container,
+            transition: 'transition-fade-up' 
+        }).render()
     
-    this.listenTo(this.popover, 'hidden', this.removeOptions);
-  }
+        this.listenTo(this.popover, 'hidden', this.removeOptions);
+    }
     
-  removeOptions () {
-    this.el.classList.remove('active')
-    if(!this.popover) return;
-    this.popover.remove()
-  }
+    removeOptions () {
+        this.el.classList.remove('active')
+        if (!this.popover) return;
+        this.popover.remove()
+    }
     
-  showAllOptions (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    if(!this.popover) return;
-    removeClass(this.popover.el.querySelectorAll('button.hide'), 'hide');
-    var button = this.popover.el.querySelector('.uniformSelect-show-all');
-    button.parentNode.removeChild(button);
-  }
+    showAllOptions (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if(!this.popover) return;
+        this.popover.el.querySelectorAll('button.hide').forEach(el => el.classList.remove('hide'));
+        var button = this.popover.el.querySelector('.uniformSelect-show-all');
+        button.parentNode.removeChild(button);
+    }
 }