active_administration 0.0.2 → 0.0.3

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

@@ -0,0 +1,304 @@
+(function( $ ) {
+    $.widget("metro.carousel", {
+
+        version: "1.0.0",
+
+        options: {
+            auto: true,
+            period: 2000,
+            duration: 500,
+            effect: 'slowdown', // slide, fade, switch, slowdown
+            direction: 'left',
+            markers: {
+                show: true,
+                type: 'default',
+                position: 'left' //bottom-left, bottom-right, bottom-center, top-left, top-right, top-center
+            },
+            controls: true,
+            stop: true,
+            width: '100%',
+            height: 300
+        },
+
+        _slides: {},
+        _currentIndex: 0,
+        _interval: 0,
+        _outPosition: 0,
+
+        _create: function(){
+            var that = this, o = this.options,
+                element = carousel = this.element,
+                controls = carousel.find('.controls');
+
+            if (element.data('auto') != undefined) o.auto = element.data('auto');
+            if (element.data('period') != undefined) o.period = element.data('period');
+            if (element.data('duration') != undefined) o.duration = element.data('duration');
+            if (element.data('effect') != undefined) o.effect = element.data('effect');
+            if (element.data('direction') != undefined) o.direction = element.data('direction');
+            if (element.data('width') != undefined) o.width = element.data('width');
+            if (element.data('height') != undefined) o.height = element.data('height');
+            if (element.data('stop') != undefined) o.stop = element.data('stop');
+            if (element.data('controls') != undefined) o.controls = element.data('controls');
+            if (element.data('markersShow') != undefined) o.markers.show = element.data('markersShow');
+            if (element.data('markersType') != undefined) o.markers.type = element.data('markersType');
+            if (element.data('markersPosition') != undefined) o.markers.position = element.data('markersPosition');
+
+            carousel.css({
+                'width': this.options.width,
+                'height': this.options.height
+            });
+
+            this._slides = carousel.find('.slide');
+
+            if (this._slides.length <= 1) return;
+
+            if (this.options.markers !== false && this.options.markers.show && this._slides.length > 1) {
+                this._markers(that);
+            }
+
+            if (this.options.controls && this._slides.length > 1) {
+                carousel.find('.controls.left').on('click', function(){
+                    that._slideTo('prior');
+                });
+                carousel.find('.controls.right').on('click', function(){
+                    that._slideTo('next');
+                });
+            } else {
+                controls.hide();
+            }
+
+            if (this.options.stop) {
+                carousel
+                    .on('mouseenter', function(){
+                        clearInterval(that._interval);
+                    })
+                    .on('mouseleave', function(){
+                        if (that.options.auto) that._autoStart(), that.options.period;
+                    })
+            }
+
+            if (this.options.auto) {
+                this._autoStart();
+            }
+        },
+
+        _autoStart: function(){
+            var that = this;
+            this._interval = setInterval(function(){
+                if (that.options.direction == 'left') {
+                    that._slideTo('next')
+                } else {
+                    that._slideTo('prior')
+                }
+            }, this.options.period);
+        },
+
+        _slideTo: function(direction){
+            var
+                currentSlide = this._slides[this._currentIndex],
+                nextSlide;
+
+            if (direction == undefined) direction = 'next';
+
+            if (direction === 'prior') {
+                this._currentIndex -= 1;
+                if (this._currentIndex < 0) this._currentIndex = this._slides.length - 1;
+
+                this._outPosition = this.element.width();
+
+            } else if (direction === 'next') {
+                this._currentIndex += 1;
+                if (this._currentIndex >= this._slides.length) this._currentIndex = 0;
+
+                this._outPosition = -this.element.width();
+
+            }
+
+            nextSlide = this._slides[this._currentIndex];
+
+            switch (this.options.effect) {
+                case 'switch': this._effectSwitch(currentSlide, nextSlide); break;
+                case 'slowdown': this._effectSlowdown(currentSlide, nextSlide, this.options.duration); break;
+                case 'fade': this._effectFade(currentSlide, nextSlide, this.options.duration); break;
+                default: this._effectSlide(currentSlide, nextSlide, this.options.duration);
+            }
+
+            var carousel = this.element, that = this;
+            carousel.find('.markers ul li a').each(function(){
+                var index = $(this).data('num');
+                if (index === that._currentIndex) {
+                    $(this).parent().addClass('active');
+                } else {
+                    $(this).parent().removeClass('active');
+                }
+            });
+        },
+
+        _slideToSlide: function(slideIndex){
+            var
+                currentSlide = this._slides[this._currentIndex],
+                nextSlide = this._slides[slideIndex];
+
+            if (slideIndex > this._currentIndex) {
+                this._outPosition = -this.element.width();
+            } else {
+                this._outPosition = this.element.width();
+            }
+
+            switch (this.options.effect) {
+                case 'switch' : this._effectSwitch(currentSlide, nextSlide); break;
+                case 'slowdown': this._effectSlowdown(currentSlide, nextSlide, this.options.duration); break;
+                case 'fade': this._effectFade(currentSlide, nextSlide, this.options.duration); break;
+                default : this._effectSlide(currentSlide, nextSlide, this.options.duration);
+            }
+
+            this._currentIndex = slideIndex;
+        },
+
+        _markers: function (that) {
+            var div, ul, li, i, markers;
+
+            div = $('<div class="markers '+this.options.markers.type+'" />');
+            ul = $('<ul></ul>').appendTo(div);
+
+            for (i = 0; i < this._slides.length; i++) {
+                li = $('<li><a href="javascript:void(0)" data-num="' + i + '"></a></li>');
+                if (i === 0) {
+                    li.addClass('active');
+                }
+                li.appendTo(ul);
+            }
+
+
+            ul.find('li a').removeClass('active').on('click', function () {
+                var $this = $(this),
+                    index = $this.data('num');
+
+                ul.find('li').removeClass('active');
+                $this.parent().addClass('active');
+
+                if (index == that._currentIndex) {
+                    return true;
+                }
+
+                that._slideToSlide(index);
+                return true;
+            });
+
+            div.appendTo(this.element);
+
+            switch (this.options.markers.position) {
+                case 'top-left' : {
+                    div.css({
+                        left: '10px',
+                        right: 'auto',
+                        bottom: 'auto',
+                        top: '10px'
+                    });
+                    break;
+                }
+                case 'top-right' : {
+                    div.css({
+                        left: 'auto',
+                        right: '10px',
+                        bottom: 'auto',
+                        top: '0px'
+                    });
+                    break;
+                }
+                case 'top-center' : {
+                    div.css({
+                        left: this.element.width()/2 - div.width()/2,
+                        right: 'auto',
+                        bottom: 'auto',
+                        top: '0px'
+                    });
+                    break;
+                }
+                case 'bottom-left' : {
+                    div.css({
+                        left: '10px',
+                        right: 'auto'
+                    });
+                    break;
+                }
+                case 'bottom-right' : {
+                    div.css({
+                        right: '10px',
+                        left: 'auto'
+                    });
+                    break;
+                }
+                case 'bottom-center' : {
+                    div.css({
+                        left: this.element.width()/2 - div.width()/2,
+                        right: 'auto'
+                    });
+                    break;
+                }
+            }
+        },
+
+
+        _effectSwitch: function(currentSlide, nextSlide){
+            $(currentSlide)
+                .hide();
+            $(nextSlide)
+                .css({left: 0})
+                .show();
+        },
+
+        _effectSlide: function(currentSlide, nextSlide, duration){
+            $(currentSlide)
+                .animate({left: this._outPosition}, duration);
+            $(nextSlide)
+                .css('left', this._outPosition * -1)
+                .show()
+                .animate({left: 0}, duration);
+        },
+
+        _effectSlowdown: function(currentSlide, nextSlide, duration){
+            var options = {
+                'duration': duration,
+                'easing': 'doubleSqrt'
+            };
+            $.easing.doubleSqrt = function(t) {
+                return Math.sqrt(Math.sqrt(t));
+            };
+
+            $(currentSlide)
+                .animate({left: this._outPosition}, options);
+
+
+            //$(nextSlide).find('.subslide').hide();
+            $(nextSlide)
+                .css('left', this._outPosition * -1)
+                .show()
+                .animate({left: 0}, options);
+
+            //setTimeout(function(){
+            //    $(nextSlide).find('.subslide').fadeIn();
+            //}, 500);
+
+        },
+
+        _effectFade: function(currentSlide, nextSlide, duration){
+            $(currentSlide)
+                .fadeOut(duration);
+            $(nextSlide)
+                .css({left: 0})
+                .fadeIn(duration);
+        },
+
+
+        _destroy: function(){
+
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    });
+})( jQuery );
+
+

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

@@ -0,0 +1,39 @@
+
+(function($){
+    $.Metro = function(params){
+        params = $.extend({
+        }, params);
+    };
+
+    $.Metro.getDeviceSize = function(){
+        var device_width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
+        var device_height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
+        return {
+            width: device_width,
+            height: device_height
+        }
+    }
+
+})(jQuery);
+
+$(function(){
+    $('html').on('click', function(e){
+        $('.dropdown-menu').each(function(i, el){
+            if (!$(el).hasClass('keep-open') && $(el).css('display')=='block') {
+                $(el).hide();
+            }
+        });
+    });
+});
+
+$(function(){
+    $(window).on('resize', function(){
+        if (METRO_DIALOG) {
+            var top = ($(window).height() - METRO_DIALOG.outerHeight()) / 2;
+            var left = ($(window).width() - METRO_DIALOG.outerWidth()) / 2;
+            METRO_DIALOG.css({
+                top: top, left: left
+            });
+        }
+    });
+});

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

@@ -0,0 +1,200 @@
+(function( $ ) {
+    $.widget("metro.countdown", {
+
+        version: "1.0.0",
+
+        options: {
+            style: {
+                background: "bg-dark",
+                foreground: "fg-white",
+                divider: "fg-dark"
+            },
+            blink: true,
+            days: 1,
+            stoptimer: 0,
+            ontick: function(d, h, m, s){},
+            onstop: function(){}
+        },
+
+        wrappers: {},
+
+        _interval: 0,
+
+        _create: function(){
+            var that = this, countdown = this.element;
+
+            $.each(['Days','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(countdown);
+
+                if(this!="Seconds"){
+                    countdown.append('<span class="divider"></span>');
+                }
+            });
+
+            this.wrappers = this.element.find('.digit-wrapper');
+
+            if (countdown.data('blink') != undefined) {
+                this.options.blink = countdown.data('blick');
+            }
+
+            if (countdown.data('styleBackground') != undefined) {
+                this.options.style.background = countdown.data('styleBackground');
+            }
+
+            if (countdown.data('styleForeground') != undefined) {
+                this.options.style.foreground = countdown.data('styleForeground');
+            }
+
+            if (countdown.data('styleDivider') != undefined) {
+                this.options.style.divider = countdown.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 (countdown.data('stoptimer') != undefined) {
+                this.options.stoptimer = new Date(countdown.data('stoptimer'));
+            }
+
+            if (this.options.stoptimer == 0) {
+                this.options.stoptimer = (new Date()).getTime() + this.options.days*24*60*60*1000;
+            }
+
+            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 days = 24*60*60,
+                    hours = 60*60,
+                    minutes = 60;
+
+                var left, d, h, m, s;
+
+                left = Math.floor((that.options.stoptimer - (new Date())) / 1000);
+
+                if(left < 0){
+                    left = 0;
+                }
+
+                // Number of days left
+                d = Math.floor(left / days);
+                that.updateDuo(0, 1, d);
+                left -= d*days;
+
+                // Number of hours left
+                h = Math.floor(left / hours);
+                that.updateDuo(2, 3, h);
+                left -= h*hours;
+
+                // Number of minutes left
+                m = Math.floor(left / minutes);
+                that.updateDuo(4, 5, m);
+                left -= m*minutes;
+
+                // Number of seconds left
+                s = left;
+                that.updateDuo(6, 7, s);
+
+                // Calling an optional user supplied ontick
+                that.options.ontick(d, h, m, s);
+
+                that.blinkDivider();
+
+                // Scheduling another call of this function in 1s
+                if (d === 0 && h === 0 && m === 0 && s === 0) {
+                    that.options.onstop();
+                    that.stopDigit();
+                    that._trigger('alarm');
+                    clearInterval(that._interval);
+                }
+            }, 1000);
+        },
+
+        blinkDivider: function(){
+            if (this.options.blink)
+                this.element.find(".divider").toggleClass("no-visible");
+        },
+
+        stopDigit: function(){
+            this.wrappers.each(function(){
+                $(this).children(".digit").addClass("stop");
+            })
+        },
+
+        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'},'fast',function(){
+                    digit.remove();
+                });
+
+            replacement
+                .delay(100)
+                .animate({top:0,opacity:1},'fast');
+
+            return true;
+        }
+    });
+})( jQuery );
+
+