uniform-ui 3.0.0.beta8 → 3.0.0.beta10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 412523e9eff8e56b4f3874670f9b43dd0fe8deea00dc41fc59d9ca57e1f4b808
-  data.tar.gz: 91e4e049712982119860f56e3942f02d6bbc622bc9af779027100b7eeab6c66a
+  metadata.gz: b7bdc92171e497d800d00558b6fa1bc980d2664aea204a005379b3bf13a17156
+  data.tar.gz: 607b3652e660dbf9ee784fa1faaa0702dd35786c910dac92747d720a3bae5024
 SHA512:
-  metadata.gz: dfe6402b702439be8cfe35a287d7dcffcb2eab8fa899a9bd2dceb0a10e4fc937e40580379242a7e94d62c57e2bf6bfb65aea1b4b9b2bf5a7a8d0b4c7e60d628f
-  data.tar.gz: e8394e0e62e9d03691ff63799387101f9b892e6715cead997885e530c73da034532422fc71fe07e6c0413fb924f88cec2f06cf90016dc5b7a68b4942025e542c
+  metadata.gz: 1e92685de1a592984b81e8b619364f5fd61be992af20d616bf84001b7ef6edc9f534699e6c26a1bf3a5e4bb484e15cbcd1aa57f4cbd9048b154872a2569460af
+  data.tar.gz: d72fcaaa3702f68f0558f57b876def3e96cd670e1f0c04c5c1c81af88da31be9e4b9be5e0e1a015aa9ff58a7a9efa84353bc0b6a658bd4c60ca56d222fe68dd7

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

@@ -7,11 +7,11 @@ export class Checkbox extends Component {
     
     initialize (options) {
         if(options.input instanceof Element) {
-          this.input = options.input
+            this.input = options.input
         } else {
-          this.input = createElement('input', Object.assign({}, {
-            type: this.constructor.type
-          }, options.input)) // TODO filter options to dolla.HTML_ATTRIBUTES
+            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;
@@ -27,9 +27,9 @@ export class Checkbox extends Component {
         this.input.style.display = "none";
 
         if(this.input.parentNode){
-          this.input.parentNode.insertBefore(this.el, this.input.nextSibling);
+            this.input.parentNode.insertBefore(this.el, this.input.nextSibling);
         } else {
-          this.el.append(this.input);
+            this.el.append(this.input);
         }
         
         this.change()
@@ -58,17 +58,17 @@ export class Checkbox extends Component {
     }
     
     keydown(e) {
-      if(e.keyCode == 32 && document.activeElement == this.el) {
-        // Prevent Page Scroll
-        e.preventDefault();
-      }
+        if(e.keyCode == 32 && document.activeElement == this.el) {
+            // Prevent Page Scroll
+            e.preventDefault();
+        }
     }
 }
 
 export class Radio extends Checkbox {
-  static CSSClass = "uniformRadio";
+    static CSSClass = "uniformRadio";
 }
 
 export class Toggle extends Checkbox {
-  static CSSClass = "uniformToggle";
+    static CSSClass = "uniformToggle";
 }

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

@@ -1,4 +1,4 @@
-import {hasClass, HTML_ATTRIBUTES, createElement} from 'dolla';
+import { HTML_ATTRIBUTES, createElement} from 'dolla';
 
 function uniqueId(prefix){
     window.idCounter || (window.idCounter = 0);
@@ -14,9 +14,9 @@ export default class Component {
         this.eventListeners = new Array();
         const htmlAttributes = {}
         Object.keys(options).forEach(key => {
-          if (HTML_ATTRIBUTES.includes(key)) {
-            htmlAttributes[key] = options[key]
-          }
+            if (HTML_ATTRIBUTES.includes(key)) {
+                htmlAttributes[key] = options[key]
+            }
         })
         delete htmlAttributes.content;
         this.el = options.el || createElement('div', htmlAttributes);
@@ -36,11 +36,15 @@ export default class Component {
             });
         }.bind(this);
     
-        this.trigger = function (event_key) {
+        this.trigger = function (event_key, ...args) {
             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.eventListeners.forEach(listener => {
+                if (listener.type == "*" || listener.type == "all" || event_key == listener.type){
+                    args.push(this);
+                    if (event_key != listener.type) {
+                        args.unshift(event_key)
+                    }
+                    listener.handler(...args);
                 }
             })
         };
@@ -49,11 +53,11 @@ export default class Component {
     }
     
     addEventListener () {
-      this.on.apply(this, arguments);
+        this.on.apply(this, arguments);
     }
     
     removeEventListener () {
-      this.off.apply(this, arguments);
+        this.off.apply(this, arguments);
     }
     
     pick (object, keys) {
@@ -66,8 +70,8 @@ export default class Component {
     }
     
     /*
-        listenTo(el, 'click', '.inner_class', f(), this)
-        listenTo(el, 'click', f(), this)
+    listenTo(el, 'click', '.inner_class', f(), this)
+    listenTo(el, 'click', f(), this)
     */
     listenTo(node, event, scope, callback, context){
         // scope is optional param
@@ -82,7 +86,7 @@ export default class Component {
             event,
             function(e){
                 if(!scope || (e.target.matches(scope) || e.target.closest(scope))) {
-                  return callback.bind(context)(...arguments);
+                    return callback.bind(context)(...arguments);
                 }
             }.bind(context)
         ]

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

@@ -18,69 +18,69 @@ import {createElement} from 'dolla';
 */
 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)));
+    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.enabled = true;
+        this.active = false;
+        this.content = options.content;
+        this.el.dropdown = this;
       
-      this.listenTo(this.el, 'click', this.toggle);
-  }
+        this.listenTo(this.el, 'click', this.toggle);
+    }
     
-  render () {
-      return this;
-  }
+    render () {
+        return this;
+    }
   
-  toggle () {
-    this.active = !this.active
-    if(this.active) {
-      this.show()
-    } else {
-      this.hide()
+    toggle () {
+        this.active = !this.active
+        if(this.active) {
+            this.show()
+        } else {
+            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)
+    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();
-  }
+    hide () {
+        this.popup.remove();
+        delete this.popup;
+        this.hidden();
+    }
   
-  hidden () {
-    this.active = false;
-    this.el.classList.remove('-active');
-  }
+    hidden () {
+        this.active = false;
+        this.el.classList.remove('-active');
+    }
   
-  disable () {
-      this.enabled = false;
-  }
+    disable () {
+        this.enabled = false;
+    }
   
-  enabled () {
-      this.enabled = true;
-  }
+    enabled () {
+        this.enabled = true;
+    }
 }

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

@@ -0,0 +1,107 @@
+import Component from './component';
+import { remove, append } from 'dolla';
+
+/*  
+    Options
+    ===
+    content:    string|$el|function
+    el:         element
+
+*/
+export default class Dropzone extends Component {
+    
+    enabled = true;
+    
+    initialize (options) {
+        this.el.classList.add('uniformDropzone');
+        if (getComputedStyle(this.el)['position'] == "static") {
+            this.el.classList.add('relative');
+        }
+        if (typeof options.enabled == "boolean") {
+            this.enabled = options.enabled
+        }
+        
+        this.windowDragEnter = this.windowDragEnter.bind(this)
+        this.windowDragLeave = this.windowDragLeave.bind(this)
+        this.windowDrop = this.windowDrop.bind(this)
+        this.el.addEventListener('drop', this.drop.bind(this))
+        this.el.addEventListener('dragover', this.dragOver.bind(this))
+        this.el.addEventListener('dragenter', this.dragEnter.bind(this))
+        this.el.addEventListener('dragleave', this.dragLeave.bind(this))
+        window.addEventListener('dragenter', this.windowDragEnter);
+        window.addEventListener('dragleave', this.windowDragLeave);
+        window.addEventListener('drop', this.windowDrop);
+
+    }
+    
+    remove () {
+        window.removeEventListener('dragenter', this.windowDragEnter);
+        window.removeEventListener('dragleave', this.windowDragLeave);
+        window.removeEventListener('drop', this.windowDrop);
+        super.remove()
+    }
+    
+    /*--------------------
+        This Events
+    --------------------*/
+    dragEnter (e) {
+        if (!this.enabled) return;
+        e.preventDefault();
+    
+        this.el.classList.add('-active');
+    }
+  
+    dragLeave (e) {
+        if (!this.enabled) return;
+        e.preventDefault();
+    
+        // relatedTarget is what drag is going to, deals with dragging inside dropzone
+        if (!this.el.contains(e.relatedTarget)) {
+            this.el.classList.remove('-active');
+        }
+    }
+  
+    drop (e) {
+        if (!this.enabled) return;
+        e.preventDefault();
+        ([...e.dataTransfer.files]).forEach(file => {
+            this.trigger('drop', file)
+        });
+    }
+  
+    // Enables Dropzone
+    dragOver (e) {
+        if (!this.enabled) return;
+        e.preventDefault();
+    }
+    
+    
+    /*--------------------
+        Window Events
+    --------------------*/
+    windowDragEnter (e) {
+        if (!this.enabled) return;
+        e.preventDefault();
+    
+        // Meaning it came from not in window
+        if (!e.relatedTarget) {
+            this.el.classList.add('-show')
+        }
+    }
+
+    windowDragLeave (e) {
+        if (!this.enabled) return;
+        e.preventDefault();
+        
+        // Meaning it came from not in window
+        if (!e.relatedTarget) {
+            this.el.classList.remove('-show')
+        }
+    }
+    
+    windowDrop (e) {
+        if (!this.enabled) return;
+        e.preventDefault();
+        this.el.classList.remove('-show')
+    }
+}

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

@@ -5,15 +5,15 @@ export default class FloatingLabel extends Component {
     
     initialize(options){
         if(options.input instanceof Element) {
-          this.input = options.input
+            this.input = options.input
         } else {
-          this.input = createElement('input', Object.assign({}, {
-            type: this.constructor.type
-          }, options.input)) // TODO filter options to dolla.HTML_ATTRIBUTES
+            this.input = createElement('input', Object.assign({}, {
+                type: this.constructor.type
+            }, options.input)) // TODO filter options to dolla.HTML_ATTRIBUTES
         }
         this.label = createElement('label', {
-          for: this.input.id,
-          children: [options.label]
+            for: this.input.id,
+                children: [options.label]
         });
         this.input.setAttribute('aria-label', options.label);
         
@@ -47,7 +47,7 @@ export default class FloatingLabel extends Component {
         this.el.append(this.label);
         
         if(this.input.value != ""){
-          this.focus()
+            this.focus()
         }
         
         return this;
@@ -59,7 +59,7 @@ export default class FloatingLabel extends Component {
     
     blur (e) {
         if(this.input.value == ""){
-          this.el.classList.remove('present');
+            this.el.classList.remove('present');
         }
     }
 }

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

@@ -45,11 +45,11 @@ export default class Modal extends Component {
         
         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)
-          }
+            const element = next_element;
+            next_element = element.nextElementSibling;
+            if(!element.matches('[blurrable="false"]')) {
+                this.blur.appendChild(element)
+            }
         }
 
         document.body.classList.add('uniformModal-active');
@@ -60,15 +60,15 @@ export default class Modal extends Component {
         this.listenTo(this.overlay, 'click', this.close);
         
         const container = createElement('div', {
-          class: 'uniformModal-container',
-          children: this.content
+            class: 'uniformModal-container',
+            children: this.content
         });
         
         const closeButton = createElement('div', {
-          class: 'uniformModal-close-container',
-          children: {
-            class: 'uniformModal-close'
-          }
+            class: 'uniformModal-close-container',
+            children: {
+                class: 'uniformModal-close'
+            }
         });
         
         this.el.append(this.overlay);
@@ -84,7 +84,7 @@ export default class Modal extends Component {
     
     checkCloseButton (e) {
         if(e.target.classList.contains('uniformModal-close')){
-          this.close();
+            this.close();
         }
     }
     

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

@@ -1,5 +1,5 @@
 import Component from './component';
-import { offset, outerWidth, outerHeight, append } from 'dolla';
+import { offset, outerWidth, outerHeight, append, css } from 'dolla';
 
 /*
     Requirements
@@ -13,6 +13,7 @@ import { offset, outerWidth, outerHeight, append } from 'dolla';
     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 = this.options.anchor.closest(this.options.container)
+            this.options.container = this.options.anchor.closest(this.options.container)
         }
         this.options.container = this.options.container || document.body
         
@@ -48,11 +50,21 @@ export default class Popover extends Component {
         this.showing = true;
         this.el.style.position = 'absolute';
         this.el.style.zIndex = this.options.zIndex;
-        
-        append(this.el, 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;
@@ -63,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"
         }
     }
     
@@ -128,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'){
@@ -183,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;
     }
 }