active_administration 0.0.2 → 0.0.3

data/app/assets/javascripts/active_administration/metro-tab-control.js

@@ -0,0 +1,96 @@
+(function( $ ) {
+    $.widget("metro.tabcontrol", {
+
+        version: "1.0.0",
+
+        options: {
+            effect: 'none',
+            activateStoredTab: false,
+            tabclick: function(tab){},
+            tabchange: function(tab){}
+        },
+
+        _create: function(){
+            var that = this,
+                element = this.element,
+                tabs = $(element.children(".tabs")).children("li"),
+                frames = $(element.children(".frames")).children(".frame"),
+                element_id = element.attr("id");
+
+            if (element.data('effect') != undefined) {
+                this.options.effect = element.data('effect');
+            }
+
+            this.init(tabs, frames);
+
+            tabs.each(function(){
+
+                var tab = $(this).children("a");
+
+                tab.on('click', function(e){
+                    e.preventDefault();
+
+                    that.options.tabclick(this);
+
+                    if ($(this).parent().hasClass('disabled')) {
+                        return false;
+                    }
+
+                    tabs.removeClass("active");
+                    tab.parent("li").addClass("active");
+
+                    frames.hide();
+                    var current_frame = $(tab.attr("href"));
+                    switch (that.options.effect) {
+                        case 'slide': current_frame.slideDown(); break;
+                        case 'fade': current_frame.fadeIn(); break;
+                        default: current_frame.show();
+                    }
+
+                    that._trigger('change', null, current_frame);
+                    that.options.tabchange(this);
+
+                    if (element_id != undefined) window.localStorage.setItem(element_id+"-current-tab", $(this).attr("href"));
+                });
+            });
+
+            if (this.options.activateStoredTab) this._activateStoredTab(tabs);
+        },
+
+        init: function(tabs, frames){
+            var that = this;
+            tabs.each(function(){
+                if ($(this).hasClass("active")) {
+                    var current_frame = $($($(this).children("a")).attr("href"));
+                    frames.hide();
+                    current_frame.show();
+                    that._trigger('change', null, current_frame);
+                }
+            });
+        },
+
+        _activateStoredTab: function(tabs){
+            var current_stored_tab = window.localStorage.getItem(this.element.attr('id')+'-current-tab');
+
+            if (current_stored_tab != undefined) {
+                tabs.each(function(){
+                    var a = $(this).children("a");
+                    if (a.attr("href") == current_stored_tab) {
+                        a.click();
+                    }
+                });
+            }
+        },
+
+        _destroy: function(){
+
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );
+
+
+

data/app/assets/javascripts/active_administration/metro-table.js

@@ -0,0 +1,74 @@
+(function( $ ) {
+    $.widget("metro.tablecontrol", {
+
+        version: "1.0.0",
+
+        options: {
+            width: '100%',
+            height: 'auto',
+            cls: 'table',
+            checkRow: false,
+            colModel: [],
+            data: []
+        },
+
+        _create: function(){
+            var element = this.element,
+                table;
+
+            element.css({
+                width: this.options.width,
+                height: this.options.height
+            });
+
+            table = this.createTable(element);
+
+            this.addHeader(table, this.options.colModel);
+            this.addTableData(table, this.options.data);
+
+            table.addClass(this.options.cls);
+        },
+
+        addHeader: function(container, data){
+            var thead = $("<thead/>").appendTo(container);
+            var th, tr = $("<tr/>").appendTo(thead);
+            $.each(data, function(index, column){
+                th = $("<th/>").addClass(column.hcls).html(column.caption).appendTo(tr);
+            });
+        },
+
+        createTable: function(container){
+            return $("<table/>").appendTo(container);
+        },
+
+        addTableData: function(container, data){
+            var that = this,
+                tbody = $("<tbody/>").appendTo(container);
+
+            $.each(data, function(i, row){
+                that.addRowData(tbody, row);
+            });
+        },
+
+        addRowData: function(container, row){
+            var td, tr = $("<tr/>").appendTo(container);
+            if (row.__row_class != undefined) {
+                tr.addClass(row.__row_class);
+            }
+            $.each(this.options.colModel, function(index, val){
+                td = $("<td/>").css("width", val.width).addClass(val.cls).html(row[val.field]).appendTo(tr);
+            });
+        },
+
+        _destroy: function(){
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );
+
+$(function(){
+    $('[data-role=table]').tablecontrol();
+});

data/app/assets/javascripts/active_administration/metro-tile-transform.js

@@ -0,0 +1,65 @@
+(function( $ ) {
+    $.widget("metro.tileTransform", {
+
+        version: "1.0.0",
+
+        options: {
+        },
+
+        _create: function(){
+            var element = this.element;
+            var dim = {w: element.width(), h: element.height()};
+
+            element.on('click', function(e){
+//                e.preventDefault();
+//                if (element[0].tagName == 'A' && element.attr('href')) {
+//                    document.location.href = element.attr('href');
+//                }
+            });
+
+            element.on('mousedown', function(e){
+                var X = e.pageX - $(this).offset().left, Y = e.pageY - $(this).offset().top;
+                var transform = 'top';
+
+                if (X < dim.w * 1/3 && (Y < dim.h * 1/2 || Y > dim.h * 1/2 )) {
+                    transform = 'left';
+                } else if (X > dim.w * 2/3 && (Y < dim.h * 1/2 || Y > dim.h * 1/2 )) {
+                    transform = 'right'
+                } else if (X > dim.w*1/3 && X<dim.w*2/3 && Y > dim.h/2) {
+                    transform = 'bottom';
+                }
+
+                $(this).addClass("tile-transform-"+transform);
+
+                if (element[0].tagName == 'A' && element.attr('href')) {
+                    setTimeout(function(){
+                        document.location.href = element.attr('href');
+                    }, 500);
+                }
+            });
+
+            element.on('mouseup', function(){
+                $(this)
+                    .removeClass("tile-transform-left")
+                    .removeClass("tile-transform-right")
+                    .removeClass("tile-transform-top")
+                    .removeClass("tile-transform-bottom");
+            });
+            element.on('mouseleave', function(){
+                $(this)
+                    .removeClass("tile-transform-left")
+                    .removeClass("tile-transform-right")
+                    .removeClass("tile-transform-top")
+                    .removeClass("tile-transform-bottom");
+            });
+        },
+
+        _destroy: function(){
+
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );

data/app/assets/javascripts/active_administration/metro-times.js

@@ -0,0 +1,190 @@
+(function( $ ) {
+    $.widget("metro.times", {
+
+        version: "1.0.0",
+
+        options: {
+            style: {
+                background: "bg-dark",
+                foreground: "fg-white",
+                divider: "fg-dark"
+            },
+            blink: true,
+            alarm: {
+                h: 0,
+                m: 0,
+                s: 0
+            },
+            ontick: function(h, m, s){},
+            onalarm: function(){}
+        },
+
+        wrappers: {},
+
+        _interval: 0,
+
+        _create: function(){
+            var that = this, element = this.element;
+
+            $.each(['Hours','Minutes','Seconds'],function(){
+                $('<span class="count'+this+'">').html(
+                    '<span class="digit-wrapper">\
+                        <span class="digit">0</span>\
+                    </span>\
+                    <span class="digit-wrapper">\
+                        <span class="digit">0</span>\
+                    </span>'
+                ).appendTo(element);
+
+                if(this!="Seconds"){
+                    element.append('<span class="divider"></span>');
+                }
+            });
+
+            this.wrappers = this.element.find('.digit-wrapper');
+
+            if (element.data('blink') != undefined) {
+                this.options.blink = element.data('blick');
+            }
+
+            if (element.data('styleBackground') != undefined) {
+                this.options.style.background = element.data('styleBackground');
+            }
+
+            if (element.data('styleForeground') != undefined) {
+                this.options.style.foreground = element.data('styleForeground');
+            }
+
+            if (element.data('styleDivider') != undefined) {
+                this.options.style.divider = element.data('styleDivider');
+            }
+
+            if (this.options.style.background != "default") {
+                this.element.find(".digit").addClass(this.options.style.background);
+            }
+
+            if (this.options.style.foreground != "default") {
+                this.element.find(".digit").addClass(this.options.style.foreground);
+            }
+
+            if (this.options.style.divider != "default") {
+                this.element.find(".divider").addClass(this.options.style.divider);
+            }
+
+            if (element.data('alarm') != undefined) {
+                var _alarm = element.data('alarm').split(":");
+                this.options.alarm.h = _alarm[0] != undefined ? _alarm[0] : 0;
+                this.options.alarm.m = _alarm[1] != undefined ? _alarm[1] : 0;
+                this.options.alarm.s = _alarm[2] != undefined ? _alarm[2] : 0;
+            }
+
+            if (element.data('onalarm') != undefined) {
+            }
+
+            setTimeout( function(){
+                that.tick()
+            }, 1000);
+        },
+
+        _destroy: function(){
+
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        },
+
+
+        tick: function(){
+            var that = this;
+
+            this._interval = setInterval(function(){
+                var _date = new Date();
+
+                var h, m, s;
+
+                h = _date.getHours();
+                that.updateDuo(0, 1, h);
+
+                m = _date.getMinutes();
+                that.updateDuo(2, 3, m);
+
+                s = _date.getSeconds();
+                that.updateDuo(4, 5, s);
+
+                // Calling an optional user supplied callback
+                that.options.ontick(h, m, s);
+
+                that.blinkDivider();
+
+                var alarm = that.options.alarm;
+
+                if (alarm) {
+                    if (
+                        (alarm.h != undefined && alarm.h == h)
+                            && (alarm.m != undefined && alarm.m == m)
+                            && (alarm.s != undefined && alarm.s == s)
+                        ) {
+
+                        that.options.onalarm();
+                        that._trigger('alarm');
+                    }
+                }
+
+                // Scheduling another call of this function in 1s
+            }, 1000);
+        },
+
+        blinkDivider: function(){
+            if (this.options.blink)
+                this.element.find(".divider").toggleClass("no-visible");
+        },
+
+        updateDuo: function(minor, major, value){
+            this.switchDigit(this.wrappers.eq(minor),Math.floor(value/10)%10);
+            this.switchDigit(this.wrappers.eq(major),value%10);
+        },
+
+        switchDigit: function(wrapper, number){
+            var digit = wrapper.find('.digit');
+
+            if(digit.is(':animated')){
+                return false;
+            }
+
+            if(wrapper.data('digit') == number){
+                // We are already showing this number
+                return false;
+            }
+
+            wrapper.data('digit', number);
+
+            var replacement = $('<span>',{
+                'class':'digit',
+                css:{
+                    top:'-2.1em',
+                    opacity:0
+                },
+                html:number
+            });
+
+            replacement.addClass(this.options.style.background);
+            replacement.addClass(this.options.style.foreground);
+
+            digit
+                .before(replacement)
+                .removeClass('static')
+                .animate({top:'2.5em',opacity:0},'fast',function(){
+                    digit.remove();
+                });
+
+            replacement
+                .delay(100)
+                .animate({top:0,opacity:1},'fast');
+
+            return true;
+        }
+    });
+})( jQuery );
+
+

data/app/assets/javascripts/active_administration/metro-touch-handler.js

@@ -0,0 +1,65 @@
+var hasTouch = 'ontouchend' in window, eventTimer;
+var moveDirection = 'undefined', startX, startY, deltaX, deltaY, mouseDown = false
+
+function addTouchEvents(element){
+    if (hasTouch) {
+        element.addEventListener("touchstart", touch2Mouse, true);
+        element.addEventListener("touchmove", touch2Mouse, true);
+        element.addEventListener("touchend", touch2Mouse, true);
+    }
+}
+
+function touch2Mouse(e)
+{
+    var theTouch = e.changedTouches[0];
+    var mouseEv;
+
+    switch(e.type)
+    {
+        case "touchstart": mouseEv="mousedown"; break;
+        case "touchend":   mouseEv="mouseup"; break;
+        case "touchmove":  mouseEv="mousemove"; break;
+        default: return;
+    }
+
+
+    if (mouseEv == "mousedown") {
+        eventTimer = (new Date()).getTime();
+        startX = theTouch.clientX;
+        startY = theTouch.clientY;
+        mouseDown = true;
+    }
+
+    if (mouseEv == "mouseup") {
+        if ((new Date()).getTime() - eventTimer <= 500) {
+            mouseEv = "click";
+        } else if ((new Date()).getTime() - eventTimer > 1000) {
+            mouseEv = "longclick";
+        }
+        eventTimer = 0;
+        mouseDown = false;
+    }
+
+    if (mouseEv == "mousemove") {
+        if (mouseDown) {
+            deltaX = theTouch.clientX - startX;
+            deltaY = theTouch.clientY - startY;
+            moveDirection = deltaX > deltaY ? 'horizontal' : 'vertical';
+        }
+    }
+
+    var mouseEvent = document.createEvent("MouseEvent");
+    mouseEvent.initMouseEvent(mouseEv, true, true, window, 1, theTouch.screenX, theTouch.screenY, theTouch.clientX, theTouch.clientY, false, false, false, false, 0, null);
+    theTouch.target.dispatchEvent(mouseEvent);
+
+    e.preventDefault();
+}
+
+
+/* To add touch support for element need create listeners for component dom element
+if (hasTouch) {
+    element.addEventListener("touchstart", touch2Mouse, true);
+    element.addEventListener("touchmove", touch2Mouse, true);
+    element.addEventListener("touchend", touch2Mouse, true);
+}
+*/