uniform-ui 3.0.0.beta2 → 3.0.0.beta10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbdcb9dbd05373a00cbd0d38122c4022daefafb4b11cbd25977e57f7367ab38c
-  data.tar.gz: 074e042a4176f0e1f7e61107b67dcfdbf54c24a3cc937925fa0e8f2b17f1735b
+  metadata.gz: b7bdc92171e497d800d00558b6fa1bc980d2664aea204a005379b3bf13a17156
+  data.tar.gz: 607b3652e660dbf9ee784fa1faaa0702dd35786c910dac92747d720a3bae5024
 SHA512:
-  metadata.gz: daa319ca0955e68bf4f3180066b12a8a0dc58208e26b3176b86a4c9449a645c74c396b967bd9b76c732758637623c9b2e9ede3979522e649687be7106ba396cd
-  data.tar.gz: 4d200fdbe66802694345f57d44c5b82cd0a94e149cf7c4c9cac7726f7423116cdb509bbd24adc946a2c8c834012f70153fddb89dc7f4f0e1d45fa1b37263bfa9
+  metadata.gz: 1e92685de1a592984b81e8b619364f5fd61be992af20d616bf84001b7ef6edc9f534699e6c26a1bf3a5e4bb484e15cbcd1aa57f4cbd9048b154872a2569460af
+  data.tar.gz: d72fcaaa3702f68f0558f57b876def3e96cd670e1f0c04c5c1c81af88da31be9e4b9be5e0e1a015aa9ff58a7a9efa84353bc0b6a658bd4c60ca56d222fe68dd7

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

@@ -1,5 +1,5 @@
 import Component from './component';
-import {addClass, toggleClass, trigger, createElement} from 'dolla';
+import { trigger, createElement} from 'dolla';
 
 export class Checkbox extends Component {
     static CSSClass = "uniformCheckbox";
@@ -7,15 +7,15 @@ 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;
-        addClass(this.el, this.constructor.CSSClass);
+        this.el.classList.add(this.constructor.CSSClass);
 
         this.listenTo(this.el, 'click', this.click);
         this.listenTo(this.input, 'change', this.change);
@@ -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()
@@ -38,7 +38,7 @@ export class Checkbox extends Component {
     }
     
     change () {
-        toggleClass(this.el, 'checked', this.input.checked);
+        this.el.classList.toggle('checked', this.input.checked);
     }
     
     click (e) {
@@ -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, closest} from 'dolla';
+import { HTML_ATTRIBUTES, createElement} from 'dolla';
 
 function uniqueId(prefix){
     window.idCounter || (window.idCounter = 0);
@@ -12,7 +12,14 @@ export default class Component {
         options = options || {};
         this.eventListens = new Array();
         this.eventListeners = new Array();
-        this.el = options.el || createElement('div', options); //TODO filter options to HTML_ATTRIBUTES
+        const htmlAttributes = {}
+        Object.keys(options).forEach(key => {
+            if (HTML_ATTRIBUTES.includes(key)) {
+                htmlAttributes[key] = options[key]
+            }
+        })
+        delete htmlAttributes.content;
+        this.el = options.el || createElement('div', htmlAttributes);
         this.cid = uniqueId('c');
     
         this.on = function (type, handler) {
@@ -29,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);
                 }
             })
         };
@@ -42,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) {
@@ -59,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
@@ -74,8 +85,8 @@ export default class Component {
             node,
             event,
             function(e){
-                if(!scope || (e.target.matches(scope) || closest(e.target, scope))) {
-                  return callback.bind(context)(...arguments);
+                if(!scope || (e.target.matches(scope) || e.target.closest(scope))) {
+                    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

@@ -1,23 +1,23 @@
 import Component from './component';
-import { isVisible, isFocus, hasClass, addClass, removeClass, css, createElement } from 'dolla';
+import { isVisible, isFocus, css, createElement } from 'dolla';
 
 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);
         
-        addClass(this.el, 'uniformFloatingLabelInput');
+        this.el.classList.add('uniformFloatingLabelInput');
         
         this.listenTo(this.input, 'focus', this.focus);
         this.listenTo(this.input, 'blur', this.blur);
@@ -25,7 +25,7 @@ export default class FloatingLabel extends Component {
     }
     
     render () {
-        if(!isVisible(this.input)) return;
+        if(!isVisible(this.input)) return this;
 
         let internalHeight = parseInt(css(this.input, 'height')) - parseInt(css(this.input, 'borderTopWidth')) - parseInt(css(this.input, 'borderBottomWidth'));
         this.input.style.lineHeight = 1;
@@ -47,17 +47,19 @@ export default class FloatingLabel extends Component {
         this.el.append(this.label);
         
         if(this.input.value != ""){
-          this.focus()
+            this.focus()
         }
+        
+        return this;
     }
     
     focus (e) {
-        addClass(this.el, 'present');
+        this.el.classList.add('present');
     }
     
     blur (e) {
         if(this.input.value == ""){
-          removeClass(this.el, 'present');
+            this.el.classList.remove('present');
         }
     }
 }

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

@@ -1,5 +1,5 @@
 import Component from './component';
-import {addClass, hasClass, removeClass, css, trigger} from 'dolla';
+import {css, trigger, append, createElement} from 'dolla';
 
 /*  UniformModal.initialize
     Options
@@ -16,7 +16,7 @@ export default class Modal extends Component {
         this.content = options.content;
         this.el.removeAttribute('content');
 
-        addClass(this.el, 'uniformModal');
+        this.el.classList.add('uniformModal');
         this.listenTo(document, 'keyup', this.keyup);
         this.listenTo(this.el, 'click', this.checkCloseButton);
     }
@@ -28,14 +28,10 @@ export default class Modal extends Component {
     
     render () {
         var that = this;
-        var content = typeof this.content == 'function' ? this.content() : this.content;
 
         this.highest_z_index = 0;
-        this.overlay = document.createElement('div');
-        addClass(this.overlay, 'uniformModal-overlay');
-        
-        this.blur = document.createElement('div');
-        addClass(this.blur, 'uniformModal-blur');
+        this.overlay = createElement('div', {class: 'uniformModal-overlay'});
+        this.blur = createElement('div', {class: 'uniformModal-blur'});
         
         this.original_scroll = window.scrollY;
         this.blur.style.top = 0 - this.original_scroll + "px";
@@ -47,51 +43,53 @@ export default class Modal extends Component {
             this.el.style.zIndex = this.highest_z_index + 2;
         }
         
-        this.el.appendChild(this.overlay);
-        
         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)
+            }
         }
 
-        addClass(document.body, 'uniformModal-active');
+        document.body.classList.add('uniformModal-active');
         document.body.appendChild(this.blur);
         document.body.appendChild(this.el);
         
-        var container = document.createElement('div');
-        addClass(container, 'uniformModal-container');
-        if (content instanceof Node) {
-            container.appendChild(content);
-        } else {
-            container.innerHTML = content;
-        }
-
-        var closeButton = document.createElement('div');
-        addClass(closeButton, 'uniformModal-close');
-        this.el.appendChild(closeButton);
-        
         this.el.style.top = window.scrollY;
         this.listenTo(this.overlay, 'click', this.close);
-        this.el.appendChild(container);
+        
+        const container = createElement('div', {
+            class: 'uniformModal-container',
+            children: this.content
+        });
+        
+        const closeButton = createElement('div', {
+            class: 'uniformModal-close-container',
+            children: {
+                class: 'uniformModal-close'
+            }
+        });
+        
+        this.el.append(this.overlay);
+        this.el.append(container);
+        this.el.append(closeButton);
 
-        if (this.options.klass) addClass(container, this.options.klass);
-        if (content.innerHTML) trigger(content, 'rendered');
+        if (this.options.klass) container.classList.add(this.options.klass);
+        if (this.content.innerHTML) trigger(this.content, 'rendered');
         this.trigger('rendered');
 
         return this;
     }
     
     checkCloseButton (e) {
-        if(hasClass(e.target, 'uniformModal-close'))
+        if(e.target.classList.contains('uniformModal-close')){
             this.close();
+        }
     }
     
     close () {
-        removeClass(document.querySelectorAll('uniformModal-active'), 'uniformModal-active');
+        document.querySelectorAll('uniformModal-active').forEach(el => el.classList.remove('uniformModal-active'));
         var elements = this.blur.children;
         var elementCount = elements.length
         for(var i=0; i < elementCount; i++){