active_administration 0.0.2 → 0.0.3

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

@@ -0,0 +1,318 @@
+(function( $ ) {
+    $.widget("metro.inputControl", {
+
+        version: "1.0.0",
+
+        options: {
+        },
+
+        _create: function(){
+            var that = this,
+                control = this.element;
+
+            if (control.hasClass('text')) {
+                this.initTextInput(control, that);
+            } else if (control.hasClass('password')) {
+                this.initPasswordInput(control, that);
+            } else if (control.hasClass('checkbox') || control.hasClass('radio') || control.hasClass('switch')) {
+                this.initCheckboxInput(control, that);
+            } else if (control.hasClass('file')) {
+                this.initFileInput(control, that);
+            }
+        },
+
+        initCheckboxInput: function(el, that) {
+        },
+
+        initFileInput: function(el, that){
+            var button, input, wrapper;
+            wrapper = $("<input type='text' id='__input_file_wrapper__' readonly style='z-index: 1; cursor: default;'>");
+            button = el.children('.btn-file');
+            input = el.children('input[type="file"]');
+            input.css('z-index', 0);
+            wrapper.insertAfter(input);
+            input.attr('tabindex', '-1');
+            //button.attr('tabindex', '-1');
+            button.attr('type', 'button');
+
+            input.on('change', function(){
+                var val = $(this).val();
+                if (val != '') {
+                    wrapper.val(val);
+                }
+            });
+
+            button.on('click', function(){
+                input.trigger('click');
+            });
+        },
+
+        initTextInput: function(el, that){
+            var button = el.children('.btn-clear'),
+                input = el.children('input[type=text]');
+
+            //console.log(button.length);
+            //button = el.children('.btn-clear');
+
+            if (button.length == 0) return;
+
+            button.attr('tabindex', '-1');
+            button.attr('type', 'button');
+
+            button.on('click', function(){
+                input = el.children('input');
+                if (input.prop('readonly')) return;
+                input.val('');
+                input.focus();
+                that._trigger("onClear", null, el);
+            });
+
+            if (!input.attr("disabled")) input.on('click', function(){$(this).focus();});
+        },
+
+        initPasswordInput: function(el, that){
+            var button = el.children('.btn-reveal'),
+                input = el.children('input[type=password]');
+            var wrapper;
+
+            if (button.length == 0) return;
+
+            button.attr('tabindex', '-1');
+            button.attr('type', 'button');
+
+            button.on('mousedown', function(e){
+                input.attr('type', 'text');
+                //e.preventDefault();
+
+//                wrapper = el.find(".__wrapper__").length == 0 ? $('<input type="text" class="__wrapper__" />') : el.find(".__wrapper__");
+//
+//                input.hide();
+//                wrapper.appendTo(that.element);
+//                wrapper.val(input.val());
+//
+//                that._trigger("onPasswordShow", null, that.element);
+            });
+
+            button.on('mouseup, mouseleave, blur', function(e){
+                input.attr('type', 'password').focus();
+                //e.preventDefault();
+
+
+//                input.show().focus();
+//                wrapper.remove();
+//
+//                that._trigger("onPasswordHide", null, that.element);
+            });
+
+            if (!input.attr("disabled")) input.on('click', function(){$(this).focus();});
+        },
+
+        _destroy: function(){
+
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    });
+})( jQuery );
+
+
+(function( $ ) {
+    $.widget("metro.inputTransform", {
+
+        version: "1.0.0",
+
+        options: {
+            transformType: "text"
+        },
+
+        _create: function(){
+            var that = this,
+                element = this.element,
+                inputType;
+
+
+            var checkTransform = element.parent().hasClass("input-control");
+            if (checkTransform) return;
+
+            inputType = element.get(0).tagName.toLowerCase();
+
+            if (inputType == "textarea") {
+                this.options.transformType = "textarea";
+            } else if (inputType == "select") {
+                this.options.transformType = "select";
+            } else {
+                if (element.data('transformType') != undefined) {
+                    this.options.transformType = element.data('transformType');
+                } else {
+                    this.options.transformType = element.attr("type");
+                }
+            }
+
+            var control = undefined;
+
+            switch (this.options.transformType) {
+                case "password": control = this._createInputPassword(); break;
+                case "file": control = this._createInputFile(); break;
+                case "checkbox": control = this._createInputCheckbox(); break;
+                case "radio": control = this._createInputRadio(); break;
+                case "switch": control = this._createInputSwitch(); break;
+                case "select": control = this._createInputSelect(); break;
+                case "textarea": control = this._createInputTextarea(); break;
+                case "search": control = this._createInputSearch(); break;
+                case "email": control = this._createInputEmail(); break;
+                case "tel": control = this._createInputTel(); break;
+				case "number": control = this._createInputNum(); break;
+                default: control = this._createInputText();
+            }
+
+            control.inputControl();
+        },
+
+        _createInputTextarea: function(){
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass("textarea");
+            var clone = element.clone(true);
+            var parent = element.parent();
+
+            clone.appendTo(wrapper);
+            wrapper.insertBefore(element);
+
+            element.remove();
+
+            return wrapper;
+        },
+
+        _createInputSelect: function(){
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass("select");
+            var clone = element.clone(true);
+            var parent = element.parent();
+
+            clone.val(element.val()).appendTo(wrapper);
+            wrapper.insertBefore(element);
+
+            element.remove();
+
+            return wrapper;
+        },
+
+        _createInputSwitch: function(){
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass("switch");
+            var label  = $("<label/>");
+            var button = $("<span/>").addClass("check");
+            var clone = element.clone(true);
+            var parent = element.parent();
+            var caption = $("<span/>").addClass("caption").html( element.data('caption') != undefined ? element.data('caption') : "" );
+
+            label.appendTo(wrapper);
+            clone.appendTo(label);
+            button.appendTo(label);
+            caption.appendTo(label);
+
+            wrapper.insertBefore(element);
+            element.remove();
+
+            return wrapper;
+        },
+
+        _createInputCheckbox: function(){
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass("checkbox");
+            var label  = $("<label/>");
+            var button = $("<span/>").addClass("check");
+            var clone = element.clone(true);
+            var parent = element.parent();
+            var caption = $("<span/>").addClass("caption").html( element.data('caption') != undefined ? element.data('caption') : "" );
+
+            label.appendTo(wrapper);
+            clone.appendTo(label);
+            button.appendTo(label);
+            caption.appendTo(label);
+
+            wrapper.insertBefore(element);
+            element.remove();
+
+            return wrapper;
+        },
+
+        _createInputRadio: function(){
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass("radio");
+            var label  = $("<label/>");
+            var button = $("<span/>").addClass("check");
+            var clone = element.clone(true);
+            var parent = element.parent();
+            var caption = $("<span/>").addClass("caption").html( element.data('caption') != undefined ? element.data('caption') : "" );
+
+            label.appendTo(wrapper);
+            clone.appendTo(label);
+            button.appendTo(label);
+            caption.appendTo(label);
+
+            wrapper.insertBefore(element);
+            element.remove();
+
+            return wrapper;
+        },
+
+        _createInputSearch: function(){
+			return this._createInputVal("text", "btn-search");
+        },
+		
+		_createInputNum: function(){
+			return this._createInputVal("number", "btn-clear");
+        },
+
+        _createInputTel: function(){
+			return this._createInputVal("tel", "btn-clear");
+        },
+
+        _createInputEmail: function(){
+			return this._createInputVal("email", "btn-clear");
+        },
+
+        _createInputText: function(){
+			return this._createInputVal("text", "btn-clear");
+        },
+
+        _createInputPassword: function(){
+			return this._createInputVal("password", "btn-reveal");
+        },
+
+        _createInputFile: function(){
+			return this._createInputVal("file", "btn-file");
+        },
+		
+		_createInputVal: function(name, buttonName) {
+			var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass(name);
+            var button = $("<button/>").addClass(buttonName);
+            var clone = element.clone(true);
+            var parent = element.parent();
+
+            clone.appendTo(wrapper);
+            button.appendTo(wrapper);
+
+            wrapper.insertBefore(element);
+            element.remove();
+
+            return wrapper;
+		},
+
+        _destroy: function(){},
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );
+

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

@@ -0,0 +1,53 @@
+(function( $ ) {
+    $.widget("metro.listview", {
+
+        version: "1.0.0",
+
+        options: {
+            onGroupExpand: function(g){},
+            onGroupCollapse: function(g){},
+            onListClick: function(l){}
+        },
+
+        _create: function(){
+            var that = this, element = this.element;
+
+            element.children('.collapsed').children('.group-content').hide();
+
+            element.find('.group-title').on('click', function(e){
+                var $this = $(this),
+                    group = $this.parent('.list-group'),
+                    group_content = group.children('.group-content');
+
+                group.toggleClass('collapsed');
+
+                if (group.hasClass('collapsed')) {
+                    group_content.slideUp();
+                    that.options.onGroupCollapse(group);
+                } else {
+                    group_content.slideDown();
+                    that.options.onGroupExpand(group);
+                }
+
+                e.preventDefault();
+            });
+
+            element.find('.list').on('click', function(e){
+                element.find('.list').removeClass('active');
+                $(this).toggleClass('active');
+                that.options.onListClick($(this));
+                e.preventDefault();
+            });
+        },
+
+        _destroy: function(){
+
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );
+
+

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

@@ -0,0 +1,162 @@
+(function( $ ) {
+    $.widget("metro.livetile", {
+
+        version: "1.0.0",
+
+        options: {
+            effect: 'slideLeft',
+            period: 4000,
+            duration: 700,
+            easing: 'doubleSqrt'
+        },
+
+        _frames: {},
+        _currentIndex: 0,
+        _interval: 0,
+        _outPosition: 0,
+        _size: {},
+
+        _create: function(){
+            var that = this,
+                element = this.element;
+
+            if (element.data('effect') != undefined) {this.options.effect = element.data('effect');}
+            if (element.data('direction') != undefined) {this.options.direction = element.data('direction');}
+            if (element.data('period') != undefined) {this.options.period = element.data('period');}
+            if (element.data('duration') != undefined) {this.options.duration = element.data('duration');}
+            if (element.data('easing') != undefined) {this.options.easing = element.data('easing');}
+
+            //this._frames = element.children(".tile-content, .event-content");
+            this._frames = element.children("[class*='-content']");
+            //console.log(this._frames);
+
+            if (this._frames.length <= 1) return;
+
+            $.easing.doubleSqrt = function(t) {return Math.sqrt(Math.sqrt(t));};
+
+            this._size = {
+                'width': element.width(),
+                'height': element.height()
+            };
+
+            element.on('mouseenter', function(){
+                that.stop();
+            });
+
+            element.on('mouseleave', function(){
+                that.start();
+            });
+
+            this.start();
+        },
+
+        start: function(){
+            var that = this;
+            this._interval = setInterval(function(){
+                that._animate();
+            }, this.options.period);
+        },
+
+        stop: function(){
+            clearInterval(this._interval);
+        },
+
+        _animate: function(){
+            var currentFrame = this._frames[this._currentIndex], nextFrame;
+            this._currentIndex += 1;
+            if (this._currentIndex >= this._frames.length) this._currentIndex = 0;
+            nextFrame = this._frames[this._currentIndex];
+
+            switch (this.options.effect) {
+                case 'slideLeft': this._effectSlideLeft(currentFrame, nextFrame); break;
+                case 'slideRight': this._effectSlideRight(currentFrame, nextFrame); break;
+                case 'slideDown': this._effectSlideDown(currentFrame, nextFrame); break;
+                case 'slideUpDown': this._effectSlideUpDown(currentFrame, nextFrame); break;
+                case 'slideLeftRight': this._effectSlideLeftRight(currentFrame, nextFrame); break;
+                default: this._effectSlideUp(currentFrame, nextFrame);
+            }
+        },
+
+        _effectSlideLeftRight: function(currentFrame, nextFrame){
+            if (this._currentIndex % 2 == 0)
+                this._effectSlideLeft(currentFrame, nextFrame);
+            else
+                this._effectSlideRight(currentFrame, nextFrame);
+        },
+
+        _effectSlideUpDown: function(currentFrame, nextFrame){
+            if (this._currentIndex % 2 == 0)
+                this._effectSlideUp(currentFrame, nextFrame);
+            else
+                this._effectSlideDown(currentFrame, nextFrame);
+        },
+
+        _effectSlideUp: function(currentFrame, nextFrame){
+            var _out = this._size.height;
+            var options = {
+                'duration': this.options.duration,
+                'easing': this.options.easing
+            };
+
+            $(currentFrame)
+                .animate({top: -_out}, options);
+            $(nextFrame)
+                .css({top: _out})
+                .show()
+                .animate({top: 0}, options);
+        },
+
+        _effectSlideDown: function(currentFrame, nextFrame){
+            var _out = this._size.height;
+            var options = {
+                'duration': this.options.duration,
+                'easing': this.options.easing
+            };
+
+            $(currentFrame)
+                .animate({top: _out}, options);
+            $(nextFrame)
+                .css({top: -_out})
+                .show()
+                .animate({top: 0}, options);
+        },
+
+        _effectSlideLeft: function(currentFrame, nextFrame){
+            var _out = this._size.width;
+            var options = {
+                'duration': this.options.duration,
+                'easing': this.options.easing
+            };
+
+            $(currentFrame)
+                .animate({left: _out * -1}, options);
+            $(nextFrame)
+                .css({left: _out})
+                .show()
+                .animate({left: 0}, options);
+        },
+
+        _effectSlideRight: function(currentFrame, nextFrame){
+            var _out = this._size.width;
+            var options = {
+                'duration': this.options.duration,
+                'easing': this.options.easing
+            };
+
+            $(currentFrame)
+                .animate({left: _out}, options);
+            $(nextFrame)
+                .css({left: -_out})
+                .show()
+                .animate({left: 0}, options);
+        },
+
+        _destroy: function(){},
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+})( jQuery );
+
+