active_administration 0.0.2 → 0.0.3

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

@@ -0,0 +1,304 @@
+(function( $ ) {
+    $.widget("metro.slider", {
+
+        version: "1.0.2",
+
+        options: {
+            position: 0,
+            accuracy: 0,
+            color: 'default',
+            completeColor: 'default',
+            markerColor: 'default',
+            colors: [],
+            showHint: false,
+            change: function(value, slider){},
+            changed: function(value, slider){},
+			min: 0,
+			max: 100,
+			animate: true,
+
+            _slider: {
+                vertical: false,
+                offset: 0,
+                length: 0,
+                marker: 0,
+                ppp: 0,
+                start: 0,
+                stop: 0
+            }
+        },
+
+
+        _create: function(){
+            var that = this,
+                element = this.element,
+
+                o = this.options,
+                s = this.options._slider;
+
+            if (element.data('accuracy') != undefined) {
+                o.accuracy = element.data('accuracy') > 0 ? element.data('accuracy') : 0;
+            }
+			if (element.data('animate') != undefined) {
+                o.animate = element.data('animate');
+            }
+			if (element.data('min') != undefined) {
+                o.min = element.data('min');
+            }
+			o.min = o.min < 0 ? 0 : o.min;
+			o.min = o.min > o.max ? o.max : o.min;
+			if (element.data('max') != undefined) {
+                o.max = element.data('max');
+            }
+			o.max = o.max > 100 ? 100 : o.max;
+			o.max = o.max < o.min ? o.min : o.max;
+            if (element.data('position') != undefined) {
+                o.position = this._correctValue(element.data('position') > this.options.min ? (element.data('position') > this.options.max ? this.options.max : element.data('position')) : this.options.min);
+            }
+            if (element.data('color') != undefined) {
+                o.color = element.data('color');
+            }
+            if (element.data('completeColor') != undefined) {
+                o.completeColor = element.data('completeColor');
+            }
+            if (element.data('markerColor') != undefined) {
+                o.markerColor = element.data('markerColor');
+            }
+            if (element.data('colors') != undefined) {
+                o.colors = element.data('colors').split(",");
+            }
+            if (element.data('showHint') != undefined) {
+                o.showHint = element.data('showHint');
+            }
+
+            s.vertical = element.hasClass("vertical");
+
+            this._createSlider();
+            this._initPoints();
+            this._placeMarker(o.position);
+
+            addTouchEvents(element[0]);
+
+            element.children('.marker').on('mousedown', function (e) {
+                e.preventDefault();
+                that._startMoveMarker(e);
+            });
+
+            element.on('mousedown', function (e) {
+                e.preventDefault();
+                that._startMoveMarker(e);
+            });
+        },
+
+        _startMoveMarker: function(e){
+            var element = this.element, o = this.options, that = this, hint = element.children('.hint');
+
+            $(document).mousemove(function (event) {
+                that._movingMarker(event);
+                if (!element.hasClass('permanent-hint')) {
+                    hint.css('display', 'block');
+                }
+            });
+            $(document).mouseup(function () {
+                $(document).off('mousemove');
+                $(document).off('mouseup');
+                element.data('value', that.options.position);
+                element.trigger('changed', that.options.position);
+                o.changed(that.options.position, element);
+                if (!element.hasClass('permanent-hint')) {
+                    hint.css('display', 'none');
+                }
+            });
+
+            this._initPoints();
+
+            this._movingMarker(e)
+        },
+
+        _movingMarker: function (event) {
+            var cursorPos,
+                percents,
+                valuePix,
+
+                vertical = this.options._slider.vertical,
+                sliderOffset = this.options._slider.offset,
+                sliderStart = this.options._slider.start,
+                sliderEnd = this.options._slider.stop,
+                sliderLength = this.options._slider.length,
+                markerSize = this.options._slider.marker;
+
+            if (vertical) {
+                cursorPos = event.pageY - sliderOffset;
+            } else {
+                cursorPos = event.pageX - sliderOffset;
+            }
+
+            if (cursorPos < sliderStart) {
+                cursorPos = sliderStart;
+            } else if (cursorPos > sliderEnd) {
+                cursorPos = sliderEnd;
+            }
+
+            if (vertical) {
+                valuePix = sliderLength - cursorPos - markerSize / 2;
+            } else {
+                valuePix = cursorPos - markerSize / 2;
+            }
+
+            percents = this._pixToPerc(valuePix);
+
+            this._placeMarker(percents);
+
+            this.options.position = percents;
+
+            this.options.change(Math.round(percents), this.element);
+        },
+
+        _placeMarker: function (value) {
+            var size, size2, o = this.options, colorParts = 0, colorIndex = 0, colorDelta = 0,
+                marker = this.element.children('.marker'),
+                complete = this.element.children('.complete'),
+                hint = this.element.children('.hint'),
+				oldPos = this._percToPix(this.options.position);
+
+            colorParts = o.colors.length;
+            colorDelta = o._slider.length / colorParts;
+
+            if (this.options._slider.vertical) {
+				var oldSize = this._percToPix(this.options.position) + this.options._slider.marker,
+					oldSize2 = this.options._slider.length - oldSize;
+                size = this._percToPix(value) + this.options._slider.marker;
+                size2 = this.options._slider.length - size;
+                this._animate(marker.css('top', oldSize2),{top: size2});
+                this._animate(complete.css('height', oldSize),{height: size});
+                if (colorParts) {
+                    colorIndex = Math.round(size / colorDelta)-1;
+                    complete.css('background-color', o.colors[colorIndex<0?0:colorIndex]);
+                }
+                if (o.showHint) {
+                    hint.html(Math.round(value)).css('top', size2 - hint.height()/2);
+                }
+            } else {
+                size = this._percToPix(value);
+                this._animate(marker.css('left', oldPos),{left: size});
+                this._animate(complete.css('width', oldPos),{width: size});
+                if (colorParts) {
+                    colorIndex = Math.round(size / colorDelta)-1;
+                    complete.css('background-color', o.colors[colorIndex<0?0:colorIndex]);
+                }
+                if (o.showHint) {
+                    this._animate(hint.html(Math.round(value)).css('left', oldPos - hint.width() / 2), {left: size - hint.width() / 2});
+                }
+            }
+
+        },
+		
+		_animate: function (obj, val) {
+			if(this.options.animate) {
+				obj.stop(true).animate(val);
+			} else {
+				obj.css(val);
+			}
+		},
+
+        _pixToPerc: function (valuePix) {
+            var valuePerc;
+            valuePerc = valuePix * this.options._slider.ppp;
+            return this._correctValue(valuePerc);
+        },
+
+        _percToPix: function (value) {
+            if (this.options._slider.ppp === 0) {
+                return 0;
+            }
+            return value / this.options._slider.ppp;
+        },
+
+        _correctValue: function (value) {
+            var accuracy = this.options.accuracy;
+			var max = this.options.max;
+			var min = this.options.min;
+            if (accuracy === 0) {
+                return value;
+            }
+            if (value === max) {
+                return max;
+            }
+			if (value === min) {
+                return min;
+            }
+            value = Math.floor(value / accuracy) * accuracy + Math.round(value % accuracy / accuracy) * accuracy;
+            if (value > max) {
+                return max;
+            }
+			if (value < min) {
+                return min;
+            }
+            return value;
+        },
+
+        _initPoints: function(){
+            var s = this.options._slider, element = this.element;
+
+            if (s.vertical) {
+                s.offset = element.offset().top;
+                s.length = element.height();
+                s.marker = element.children('.marker').height();
+            } else {
+                s.offset = element.offset().left;
+                s.length = element.width();
+                s.marker = element.children('.marker').width();
+            }
+
+            s.ppp = this.options.max / (s.length - s.marker);
+            s.start = s.marker / 2;
+            s.stop = s.length - s.marker / 2;
+        },
+
+        _createSlider: function(){
+            var element = this.element,
+                options = this.options,
+                complete, marker, hint;
+
+            element.html('');
+
+            complete = $("<div/>").addClass("complete").appendTo(element);
+            marker = $("<a/>").addClass("marker").appendTo(element);
+
+            if (options.showHint) {
+                hint = $("<span/>").addClass("hint").appendTo(element);
+            }
+
+            if (options.color != 'default') {
+                element.css('background-color', options.color);
+            }
+            if (options.completeColor != 'default') {
+                complete.css('background-color', options.completeColor);
+            }
+            if (options.markerColor != 'default') {
+                marker.css('background-color', options.markerColor);
+            }
+        },
+
+        value: function (value) {
+			value = value > this.options.max ? this.options.max : value;
+			value = value < this.options.min ? this.options.min : value;
+            if (typeof value !== 'undefined') {
+                this._placeMarker(parseInt(value));
+                this.options.position = parseInt(value);
+                this.options.change(Math.round(parseInt(value)), this.element);
+                return this;
+            } else {
+                return Math.round(this.options.position);
+            }
+        },
+
+        _destroy: function(){},
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );
+
+

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

@@ -0,0 +1,105 @@
+(function( $ ) {
+    $.widget("metro.stepper", {
+
+        version: "1.0.0",
+
+        options: {
+            steps: 3,
+            start: 1,
+            onStep: function(index, step){}
+        },
+
+        _create: function(){
+            var element = this.element, o = this.options;
+
+            if (element.data('steps') != undefined) o.steps = element.data('steps');
+            if (element.data('start') != undefined) o.start = element.data('start');
+
+            this._createStepper();
+            this._positioningSteps();
+            this._stepTo(o.start);
+        },
+
+        _createStepper: function(){
+            var element = this.element, o= this.options;
+            var i, ul, li;
+
+            ul = $("<ul/>");
+            for(i=0;i< o.steps;i++) {
+                li = $("<li/>").appendTo(ul);
+            }
+            ul.appendTo(element);
+        },
+
+        _positioningSteps: function(){
+            var that = this, element = this.element, o = this.options,
+                steps = element.find("li"),
+                element_width = element.width(),
+                steps_length = steps.length-1,
+                step_width = $(steps[0]).width();
+
+            $.each(steps, function(i, step){
+                var left = i == 0 ? 0 : (element_width - step_width)/steps_length * i;
+                $(step).animate({
+                    left: left
+                });
+            });
+        },
+
+        _stepTo: function(step){
+            var element = this.element, o = this.options;
+            var steps = element.find("li");
+
+            steps.removeClass('current').removeClass('complete');
+
+            $.each(steps, function(i, s){
+                if (i < step - 1) $(s).addClass('complete');
+                if (i == step - 1) {
+                    $(s).addClass('current') ;
+                    o.onStep(i+1, s);
+                }
+            });
+        },
+
+        first: function(){
+            var o = this.options;
+            o.start = 1;
+            this._stepTo(o.start);
+        },
+
+        last: function(){
+            var element = this.element, o = this.options;
+            var steps = element.find("li");
+
+            o.start = steps.length;
+            this._stepTo(o.start);
+        },
+
+        next: function(){
+            var element = this.element, o = this.options;
+            var steps = element.find("li");
+
+            if (o.start + 1 > steps.length) return;
+
+            o.start++;
+            this._stepTo(o.start);
+        },
+
+        prior: function(){
+            var o = this.options;
+
+            if (o.start - 1 == 0) return;
+
+            o.start--;
+            this._stepTo(o.start);
+        },
+
+        _destroy: function(){
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );
+

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

@@ -0,0 +1,214 @@
+(function( $ ) {
+    $.widget("metro.streamer", {
+
+        version: "1.0.0",
+
+        options: {
+            scrollBar: false,
+            meter: {
+                start: 9,
+                stop: 19,
+                interval: 20
+            },
+            slideToGroup: 1,
+            slideToTime: "10:20",
+            slideSleep: 1000,
+            slideSpeed: 1000,
+            onClick: function(event){},
+            onLongClick: function(event){}
+        },
+
+        _create: function(){
+            var that = this, element = this.element, o = this.options,
+                streams = element.find(".stream"),
+                events = element.find(".event"),
+                events_container = element.find(".events"),
+                events_area = element.find(".events-area"),
+                groups = element.find(".event-group"),
+                event_streams = element.find(".event-stream");
+
+
+            if (element.data('scrollBar') != undefined) o.scrollBar = element.data('scrollBar');
+            if (element.data('meterStart') != undefined) o.meter.start = parseInt(element.data('meterStart'));
+            if (element.data('meterStop') != undefined) o.meter.stop = parseInt(element.data('meterStop'));
+            if (element.data('meterInterval') != undefined) o.meter.interval = element.data('meterInterval');
+            if (element.data('slideToGroup') != undefined) o.slideToGroup = parseInt(element.data('slideToGroup'));
+            if (element.data('slideSleep') != undefined) o.slideSleep = parseInt(element.data('slideSleep'));
+            if (element.data('slideSpeed') != undefined) o.slideSpeed = parseInt(element.data('slideSpeed'));
+
+            element.data('streamSelect', -1);
+
+            var meter = $("<ul/>").addClass("meter");
+            var i, j, m, start = o.meter.start, stop = o.meter.stop, interval = o.meter.interval;
+
+            var _intervals = [];
+            for (i = start; i<stop; i++) {
+                for (j = 0; j < 60; j+=interval) {
+                    m = (i<10?"0"+i:i)+":"+(j<10?"0"+j:j);
+                    $("<li/>").addClass("js-interval-"+ m.replace(":", "-")).html("<em>"+m+"</em>").appendTo(meter);
+                    _intervals.push(m);
+                }
+            }
+            element.data("intervals", _intervals);
+            meter.insertBefore(element.find(".events-grid"));
+
+            //console.log(element.data("intervals"));
+
+            // Re-Calc all event-stream width and set background for time
+            element.find(".event-stream").each(function(i, s){
+                var event_stream_width = 0;
+                var events = $(s).find(".event");
+
+                events.each(function(i, el){
+                    event_stream_width += $(el).outerWidth();
+                });
+
+                $(s).css({
+                    width: (event_stream_width + ( (events.length-1) * 2 ) + 1)
+                });
+
+                $(s).find(".time").css("background-color", $(streams[i]).css('background-color'));
+            });
+
+            // Set scrollbar
+            events_container.css({
+                'overflow-x': (o.scrollBar ? 'scroll' : 'hidden')
+            });
+
+            // Set streamer height
+            element.css({
+                height: element.find(".streams").outerHeight() + (o.scrollBar ? 20 : 0)
+            });
+
+            // Re-Calc events-area width
+            var events_area_width = 0;
+            groups.each(function(i, el){
+                events_area_width += $(el).outerWidth();
+            });
+            events_area_width += ( (groups.length-1) * 2 ) + 10;
+            events_area.css('width', events_area_width);
+
+            events.each(function(i, el){
+                addTouchEvents(el);
+            });
+
+            events.mousedown(function(e){
+                if (e.altKey) {
+                    $(this).toggleClass("selected");
+                }
+            });
+
+            element.mousewheel(function(event, delta){
+                var scroll_value = delta * 50;
+                events_container.scrollLeft(events_container.scrollLeft() - scroll_value);
+                return false;
+            });
+
+            streams.each(function(i, s){
+                $(s).mousedown(function(e){
+                    if (element.data('streamSelect') == i) {
+                        events.removeClass('event-disable');
+                        element.data('streamSelect', -1);
+                    } else {
+                        element.data('streamSelect', i);
+                        events.addClass('event-disable');
+                        $(event_streams[i]).find(".event").removeClass("event-disable");
+                    }
+                });
+            });
+
+            events.on('click', function(e){
+                e.preventDefault();
+                o.onClick($(this));
+            });
+
+            events.on('longclick', function(e){
+                $(this).toggleClass("selected");
+                e.preventDefault();
+                o.onLongClick($(this));
+            });
+
+            element.find(".js-go-previous-time").on('click', function(e){
+                var next_index = element.data("intervals").indexOf(element.data("current-time"));
+                if (next_index == 0) {
+                    return;
+                }
+                next_index--;
+                var new_time = element.data("intervals")[next_index];
+                that.slideToTime(new_time, 0, o.slideSpeed);
+            });
+
+            element.find(".js-go-next-time").on('click', function(e){
+                var next_index = element.data("intervals").indexOf(element.data("current-time"));
+                if (next_index == element.data("intervals").length - 1) {
+                    return;
+                }
+                next_index++;
+                var new_time = element.data("intervals")[next_index];
+                that.slideToTime(new_time, 0, o.slideSpeed);
+            });
+
+            element.find(".js-show-all-streams").on("click", function(e){
+                element.find(".event").removeClass("event-disable");
+                element.data('streamSelect', -1);
+                e.preventDefault();
+            });
+
+
+            element.find(".js-schedule-mode").on("click", function(e){
+                $(this).toggleClass("inverse");
+                element.data("schedule-mode", $(this).hasClass("inverse"));
+                e.preventDefault();
+            });
+
+            if (o.slideToTime) {
+                this.slideToTime(o.slideToTime, o.slideSleep, o.slideSpeed);
+            } else {
+                this.slideToGroup(o.slideToGroup, o.slideSleep, o.slideSpeed);
+            }
+
+        },
+
+        slideToTime: function(time, sleep, speed){
+            var that = this, element = this.element,
+                interval = element.find(".meter li.js-interval-"+time.replace(":", "-"))[0],
+                streams_width = element.find(".streams").outerWidth() + 2;
+
+            setTimeout(function(){
+                element.find(".events").animate({
+                    scrollLeft: "+="+ (interval.offsetLeft - streams_width)
+                }, speed, function(){
+                    that._afterSlide();
+                });
+            }, sleep);
+
+            element.data("current-time", time);
+        },
+
+        slideToGroup: function(group, sleep, speed){
+            var that = this, element = this.element, groups = element.find(".event-group"), streams_width = element.find(".streams").outerWidth() + 2;
+
+            setTimeout(function(){
+                element.find(".events").animate({
+                    scrollLeft: "+="+ (groups[group-1].offsetLeft - streams_width)
+                }, speed, function(){
+                    that._afterSlide();
+                });
+            }, sleep);
+        },
+
+        _afterSlide: function(){
+
+        },
+
+        _destroy: function(){
+
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );
+
+