uniform-ui 1.0 → 2.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 78d7885a26d44334dccad5dcdee337d2c17c28dc
-  data.tar.gz: 2be1c8cca98e9cd70a222ccf9e9d892b3607c8c7
+SHA256:
+  metadata.gz: d1dcff8bf35d3dee57b8cbc4de8baf06919ca562110399efff8f61210cfca4b8
+  data.tar.gz: 87aa8ec45d65367955c0bb88768e0d4af321b89f96bbbf41c1b5e5ec6500f3ac
 SHA512:
-  metadata.gz: 1bcea05b4291727254ac7104e88fc48d6b111fe2c14b85b81b0aef93368eecbd21bd88cfc1f9235305355cb9fe85b06ec3040094b4b2f321251e3eef92e47e58
-  data.tar.gz: 8d0834ad0c8679c74dbcbf9dec284e455185d33fe050132e2cfff14cf301ec675f5b6642639e94cb82cb23961802a3c407dd71657ced01601cc77bee40f0d431
+  metadata.gz: 56bbcc4f1dfd83f1f90724fa4891490f0375a097a6dda20b717de12001daffbc3695aad86cbb743320da1aa0aa6262196883421db75e5d679a63d43f4cc9c3ca
+  data.tar.gz: f3d2e38f9fda4a0df69145ce8164ff9b18a20da8b8f3e079c11aec50fd29122709d2aef469c924e31cf7654d6bbf9c6f3657d93ee1d241b4eff0217e88c40a96

data/lib/assets/config/manifest.js

@@ -0,0 +1 @@
+//= link_directory uniform/stylesheets .css

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

@@ -0,0 +1,31 @@
+import Component from './component';
+import * as Helpers from './dom-helpers';
+
+export default class Checkbox extends Component {
+    initialize (options) {
+        this.el.addEventListener('change', this.change.bind(this));
+    }
+    
+    render () {
+        var type = Helpers.hasClass(this.el, 'uniformRadio') ? 'uniformRadio' : 'uniformCheckbox';
+        this.checkbox = document.createElement('div');
+        Helpers.addClass(this.checkbox, `${type}-indicator`);
+        
+        if (this.el.className && this.el.className.replace(type, '') != '')
+            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));
+        return this;
+    }
+    
+    click (e) {
+        if (this.el.disabled) return;
+        this.el.checked = !this.el.checked
+        Helpers.trigger(this.el, 'change');
+        e.preventDefault();
+    }
+    change () {
+        Helpers.toggleClass(this.checkbox, 'checked', this.el.checked);
+    }
+}

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

@@ -0,0 +1,42 @@
+export default class Component {
+    constructor(options){
+        options = options || {};
+        this.eventListeners = new Array();
+        this.el = options.el || document.createElement('div')
+        
+        this.$el = $(this.el);//remove
+    
+        this.on = function (type, handler) {
+            this.eventListeners.push({
+                type: type,
+                handler: handler
+            });
+        };
+    
+        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);
+                }
+            }
+        };
+        
+        this.initialize(options);
+    }
+    
+    pick (object, keys) {
+        var newObject = {}
+        keys.forEach(function(key){
+            if(object[key] !== undefined) newObject[key] = object[key];
+        });
+        
+        return newObject;
+    }
+    
+    extend (object, objectMaster) {
+        
+        return
+    }
+    
+    initialize(){}
+}

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

@@ -0,0 +1,136 @@
+export function hasClass (el, className) {
+    var test;
+    if(el.classList)
+        test = el.classList.contains(className)
+    else 
+        test = new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
+    return test
+}
+
+export function addClass(el, className) {
+    if (el.classList){
+        each(className.split(" "), function(className){
+            el.classList.add(className);
+        });
+    } else 
+        el.className += ' ' + className;
+}
+
+export function removeClass(el, className) {
+    var removeClassFunction = function (el) {
+        if (el.classList)
+          el.classList.remove(className);
+        else
+          el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+    }
+    if (NodeList.prototype.isPrototypeOf(el))
+        each(el, removeClassFunction)
+    else
+        removeClassFunction(el);
+}
+
+export function toggleClass(el, className, toggle) {
+    if (el.classList) {
+      el.classList.toggle(className, toggle);
+    } else {
+      var classes = el.className.split(' ');
+      var existingIndex = classes.indexOf(className);
+
+      if (toggle === false || (toggle !== true && existingIndex >= 0))
+        classes.splice(existingIndex, 1);
+      else
+        classes.push(className);
+
+      el.className = classes.join(' ');
+    }
+}
+
+export function trigger(el, eventName) {
+    var event = document.createEvent('HTMLEvents');
+    event.initEvent(eventName, true, false);
+    el.dispatchEvent(event);
+}
+
+export function each (elements, method){
+    for(var i=0; i < elements.length; i++){
+        method(elements[i], i);
+    }
+}
+
+export function map (elements, method){
+    var results = [];
+    for(var i=0; i < elements.length; i++){
+        results.push(method(elements[i], i));
+    }
+    return results;
+}
+
+export function is_visible(element){
+    return element.offsetParent !== null;
+}
+
+export function is_focus(element){
+    return document.activeElement === element;
+}
+
+export function is_empty(element){
+    return element.innerHTML === "";
+}
+
+export function css (el, rule) {
+    return getComputedStyle(el)[rule];
+}
+
+export function remove (el) {
+    el.parentNode.removeChild(el);
+}
+
+export function createElement(html) {
+    var container = document.createElement('div');
+    container.innerHTML = html;
+    return container.children[0];
+}
+
+export function closest(el, selector) {
+    if(el.closest) return el.closest(el);
+    while (el) {
+        if (Element.prototype.matches ? el.matches(selector) : el.msMatchesSelector(selector)) {
+            return el;
+        }
+        el = el.parentElement;
+    }
+}
+
+export function ancestors(el) {
+    var ancestors = [];
+    el = el.parentElement;
+    while (el){
+        ancestors.push(el);
+        el = el.parentElement;
+    }
+    return ancestors;
+}
+
+export function filter(nodes, predicate){
+    var filteredNodes = [];
+    each(nodes, function(node){
+        if(predicate(node)) filteredNodes.push(node);
+    });
+    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
+    }
+}

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

@@ -0,0 +1,149 @@
+import Component from './component';
+import * as Helpers from './dom-helpers';
+
+/*. Dropdown.initialize
+    content:    string|el - content rendered in dropdown
+    align:      'center'|'left'|'right| - how dropdown aligns to trigger el
+    trigger:    'click'|'focus'|'mouseover' - what triggers showDropdown
+    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
+*/
+export default class Dropdown extends Component {
+    
+    initialize(options){
+        options = options || {}
+        this.options = {
+            align: 'center',
+            trigger: 'click',
+            show_arrow: true,
+            hide_sm: false,
+            square: false
+        };
+        
+        Object.assign(this.options, this.pick(options, Object.keys(this.options)));
+        this.content = options.content;
+        this.el.dropdown = this;
+        
+        this.el.addEventListener(this.options.trigger, this.toggle.bind(this));
+        
+        this.el.addEventListener('mousedown', function (){
+            this.mousedown = true;
+        }.bind(this));
+    
+        this.el.addEventListener('mouseup', function (){
+            this.mousedown = false;
+        }.bind(this));
+        
+        this.el.addEventListener('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));
+    }
+    
+    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.innerHTML = this.content.innerHTML ? this.content.innerHTML : this.content;
+        if (this.options.show_arrow) {
+            Helpers.addClass(this.dropdown, 'has-pointer');
+            var pointer = document.createElement('div');
+            Helpers.addClass(pointer, 'uniformDropdown-pointer')
+            this.dropdown.appendChild(pointer);
+        }
+        Helpers.toggleClass(this.dropdown, 'square', this.options.square);
+        this.dropdown.style.display = 'none';
+        document.body.appendChild(this.dropdown);
+        Helpers.removeClass(this.dropdown.querySelectorAll('.hidden'), 'hidden');
+        return this;
+    }
+    
+    resize () {
+        if(!this.dropdown) return;
+        var offset = Helpers.offset(this.el);
+        this.dropdown.style.top = offset.top + this.el.offsetHeight + "px";
+        
+        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";
+        }
+        if (this.dropdown.style.left && this.dropdown.style.left + this.dropdown.offsetWidth > window.innerWidth) {
+            this.dropdown.style.left = window.innerWidth - this.dropdown.offsetWidth + "px";
+        }
+    }
+    
+    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));
+    }
+    
+    toggle (e) {
+        if (Helpers.hasClass(this.el, 'active') && e.type == "click") {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+    
+    show () {
+        if(this.options.hide_sm && window.innerWidth < 720) return;
+        if(!this.dropdown) this.render();
+        
+        this.dropdown.style.display = 'block';
+        Helpers.addClass(this.el, 'active');
+        
+        this.resize();
+
+        this.overlay = document.createElement('div');
+        Helpers.addClass(this.overlay, 'uniformOverlay');
+        document.body.appendChild(this.overlay);
+
+        if (window.innerWidth < 720) {
+            this.lastScrollPosition = window.scrollY;
+            Helpers.addClass(document.body, 'uniformModal-hideBody');
+        }
+
+        this.overlay.addEventListener('click', this.hide.bind(this));
+        this.trigger('shown');
+    }
+    
+    hide () {
+        if(!this.dropdown) return;
+        this.dropdown.style.display = 'none';
+        Helpers.removeClass(this.el, 'active');
+        if (this.overlay) this.overlay.parentNode.removeChild(this.overlay)
+        if (window.innerWidth < 720) {
+            Helpers.removeClass(document.body, 'uniformModal-hideBody');
+            window.scrollTo(0, this.lastScrollPosition);
+        }
+        this.trigger('hidden');
+    }
+    
+    outsideClick (e) {
+        if (!this.dropdown || this.dropdown.offsetParent === null) return;
+        if (e.target === this.el) return;
+        if (e.target === this.overlay) return;
+        if (this.el.contains(e.target)) return;
+        if (this.dropdown.contains(e.target)) return;
+        this.hide();
+    }
+    
+    keyup (e) {
+        if(e.which != 27) return;
+        this.hide();
+    }
+}

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

@@ -0,0 +1,54 @@
+import Component from './component';
+import * as Helpers from './dom-helpers';
+
+export default class FloatingLabel extends Component {
+    
+    initialize(){
+        this.label = this.el.querySelector('label');
+        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));
+    }
+    
+    render () {
+        if(!Helpers.is_visible(this.input)) return;
+        if(Helpers.hasClass(this.el, 'enabled')) return;
+
+        var padding = parseInt(Helpers.css(this.input, 'paddingBottom'));
+        this.startingHeight = this.input.offsetHeight;
+        Helpers.addClass(this.el, 'enabled');
+        Helpers.addClass(this.el, 'inactive');
+
+        this.input.style.paddingTop = padding + padding/2 + "px";
+        this.input.style.paddingBottom = padding - padding/2 - 2 + "px";
+
+        this.label.style.position = 'absolute';
+        this.label.style.top = 0;
+        this.label.style.left = this.label.offsetLeft;
+        this.label.style.paddingLeft = Helpers.css(this.input, 'paddingLeft');
+        this.label.style.height = this.startingHeight;
+        this.label.style.lineHeight = this.startingHeight + "px";
+
+        if (Helpers.is_focus(this.input)) this.activate();
+        if (typeof this.input.value !== "undefined" && this.input.value != "") this.activate();
+    }
+    
+    activate (e) {
+        if (typeof e !== "undefined") Helpers.addClass(this.el, 'active');
+        if (Helpers.hasClass(this.el, 'float')) return;
+        Helpers.addClass(this.el, 'float');
+        Helpers.removeClass(this.el, 'inactive');
+        this.label.style.lineHeight = this.startingHeight / 2 + "px";
+    }
+    
+    deactivate (e) {
+        if (typeof e !== "undefined") Helpers.removeClass(this.el, 'active');
+        if (this.input.value != "") return;
+        Helpers.removeClass(this.el, 'float');
+        Helpers.addClass(this.el, 'inactive');
+        this.label.style.lineHeight = this.startingHeight + "px";
+    }
+}

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

@@ -0,0 +1,16 @@
+let check = `
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 32 32">
+<path d="M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z"></path>
+</svg>
+`.trim()
+
+let arrow_down = `
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 20 20">
+<path d="M13.418 7.601c0.271-0.268 0.709-0.268 0.979 0s0.271 0.701 0 0.969l-3.907 3.83c-0.271 0.268-0.709 0.268-0.979 0l-3.908-3.83c-0.27-0.268-0.27-0.701 0-0.969s0.708-0.268 0.979 0l3.418 3.14 3.418-3.14z"></path>
+</svg>
+`.trim()
+
+export {
+    check,
+    arrow_down
+}

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

@@ -0,0 +1,103 @@
+import Component from './component';
+import * as Helpers from './dom-helpers';
+
+/*  UniformModal.initialize
+    Options
+    content:    string|$el|function
+    klass:      string - classes to append to modal container
+*/
+export default class Modal extends Component {
+    
+    initialize (options) {
+        this.options = {};
+        this.options.klass = options.klass || false;
+        this.content = options.content;
+
+        Helpers.addClass(this.el, 'uniformModal');
+        document.addEventListener('keyup', this.keyup.bind(this));
+        this.el.addEventListener('click', this.checkCloseButton.bind(this));
+    }
+    
+    keyup (e) {
+        if(e.which != 27) return;
+        this.close();
+    }
+    
+    render () {
+        var that = this;
+        var content = typeof this.content == 'function' ? this.content() : this.content;
+
+        this.highest_z_index = 0;
+        this.overlay = document.createElement('div');
+        Helpers.addClass(this.overlay, 'uniformModal-overlay');
+        
+        this.blur = document.createElement('div');
+        Helpers.addClass(this.blur, 'uniformModal-blur');
+        
+        this.original_scroll = window.scrollY;
+        this.blur.style.top = 0 - this.original_scroll + "px";
+
+        if (document.body.querySelectorAll('.uniformModal').length > 0) {
+            this.highest_z_index = Math.max(Array.prototype.map.call(document.body.querySelectorAll('.uniformModal'), function(el){
+                return parseInt(Helpers.css(el, 'zIndex'));
+            }));
+            this.el.style.zIndex = this.highest_z_index + 2;
+        }
+        
+        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])
+        }
+
+        Helpers.addClass(document.body, 'uniformModal-active');
+        document.body.appendChild(this.blur);
+        document.body.appendChild(this.el);
+        
+        var container = document.createElement('div');
+        Helpers.addClass(container, 'uniformModal-container');
+        container.innerHTML = content.innerHTML ? content.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.el.appendChild(container);
+
+        if (this.options.klass) Helpers.addClass(container, this.options.klass);
+        if (content.innerHTML) Helpers.trigger(content, 'rendered');
+        this.trigger('rendered');
+
+        return this;
+    }
+    
+    checkCloseButton (e) {
+        if(Helpers.hasClass(e.target, 'uniformModal-close'))
+            this.close();
+    }
+    
+    close () {
+        Helpers.removeClass(document.querySelectorAll('uniformModal-active'), 'uniformModal-active');
+        var elements = this.blur.children;
+        var elementCount = elements.length
+        for(var i=0; i < elementCount; i++){
+            document.body.appendChild(elements[0]);
+        }
+        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));
+    }
+}

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

@@ -0,0 +1,43 @@
+import Component from './component';
+import * as Helpers from './dom-helpers';
+
+export default class Resizer extends Component {
+    
+    initialize () {
+        window.addEventListener('resize', this.resize.bind(this));
+        Helpers.trigger(window, 'resize');
+    }
+    
+    resize () {
+        // breakpoints at 720, 1080, 1440
+        var width = this.el.offsetWidth;
+
+        if(width > 720 && !Helpers.hasClass(this.el, 'md-size')) {
+            Helpers.addClass(this.el, 'md-size');
+            Helpers.trigger(window, 'resized-md');
+        } else if (width < 720 && Helpers.hasClass(this.el, 'md-size')) {
+            Helpers.removeClass(this.el, 'md-size');
+        }
+
+        if(width > 1080 && !this.el.hasClass('lg-size')) {
+            Helpers.addClass(this.el, 'lg-size');
+            Helpers.trigger(window, 'resized-lg');
+        } else if (width < 1080 && Helpers.hasClass(this.el, 'lg-size')) {
+            Helpers.removeClass(this.el, 'lg-size');
+        }
+
+        if(width > 1440 && !Helpers.hasClass(this.el, 'xl-size')) {
+            Helpers.addClass(this.el, 'xl-size');
+            Helpers.trigger(window, 'resized-xl');
+        } else if (width < 1440 && Helpers.hasClass(this.el, 'xl-size')) {
+            Helpers.removeClass(this.el, 'xl-size');
+        }
+
+        if(width < 720 && !Helpers.hasClass(this.el, 'sm-size')) {
+            Helpers.addClass(this.el, 'sm-size');
+            Helpers.trigger(window, 'resized-sm');
+        } else if (width > 720 && Helpers.hasClass(this.el, 'sm-size')) {
+            Helpers.removeClass(this.el, 'sm-size');
+        }
+    }
+}