metro-ui-rails 0.15.8.12 → 0.15.8.13

data/lib/metro/ui/rails/version.rb

@@ -1,7 +1,7 @@
 module Metro
   module Ui
     module Rails
-      VERSION = "0.15.8.12"
+      VERSION = "0.15.8.13"
     end
   end
 end

data/vendor/assets/javascripts/metro-ui.js

@@ -1,10 +1,12 @@
+//= require metro-ui/accordion
+//= require metro-ui/buttonset
+//= require metro-ui/carousel
+//= require metro-ui/dialog
+//= require metro-ui/dropdown
 //= require metro-ui/input-control
+//= require metro-ui/pagecontrol
 //= require metro-ui/rating
-//= require metro-ui/dropdown
 //= require metro-ui/slider
-//= require metro-ui/tile-slider
+//= require metro-ui/start-menu
 //= require metro-ui/tile-drag
-//= require metro-ui/pagecontrol
-//= require metro-ui/carousel
-//= require metro-ui/buttonset
-//= require metro-ui/accordion
+//= require metro-ui/tile-slider

data/vendor/assets/javascripts/metro-ui/accordion.js

@@ -1,44 +1,78 @@
-(function($){
-    $.fn.Accordion = function( options ){
+/**
+ * jQuery plugin for input elements for Metro UI CSS framework
+ */
+(function($) {
+    var pluginName = 'Accordion',
+        initAllSelector = '[data-role="accordion"]',
+        paramKeys = [];
+
+    $[pluginName] = function(element, options) {
+        if (!element) {
+            return $()[pluginName]({initAll: true});
+        }
+
         var defaults = {
         };
 
-        var $this = $(this)
-            , $li = $this.children("li")
-            , $triggers = $li.children("a")
-            , $frames = $li.children("div")
-            ;
+        var plugin = this;
+        plugin.settings = {};
+        var $element = $(element);
+
+        var $li, $triggers, $frames;
 
-        var initTriggers = function(triggers){
-            triggers.on('click', function(e){
+        plugin.init = function() {
+            plugin.settings = $.extend({}, defaults, options);
+
+            $li = $element.children("li");
+            $triggers = $li.children("a");
+            $frames = $li.children("div");
+
+            $triggers.on('click', function(e){
                 e.preventDefault();
-                var $a = $(this)
-                  , target = $a.parent('li').children("div");
+                var $a = $(this),
+                    $activeLi = $li.filter('.active'),
+                    $parentLi = $a.parent("li"),
+                    target = $a.parent('li').children("div");
+
+                if ( $parentLi.hasClass('active') ) {
+                    target.slideUp(undefined, function(){
+                        $parentLi.removeClass("active");
+                    });
 
-                if ( $a.parent('li').hasClass('active') ) {
-                    target.slideUp();
-                    $(this).parent("li").removeClass("active");
                 } else {
-                    $frames.slideUp();
-                    $li.removeClass("active");
+                    $frames.slideUp(undefined, function(){
+                        $activeLi.removeClass("active");
+                    });
                     target.slideDown();
-                    $(this).parent("li").addClass("active");
+                    $parentLi.addClass("active");
                 }
             });
-        }
+        };
 
-        return this.each(function(){
-            if ( options ) {
-                $.extend(defaults, options)
-            }
 
-            initTriggers($triggers);
+
+        plugin.init();
+
+    };
+
+    $.fn[pluginName] = function(options) {
+        var elements = options && options.initAll ? $(initAllSelector) : this;
+        return elements.each(function() {
+            var that = $(this),
+                params = {},
+                plugin;
+            if (undefined == that.data(pluginName)) {
+                $.each(paramKeys, function(index, key){
+                    params[key[0].toLowerCase() + key.slice(1)] = that.data('param' + key);
+                });
+                plugin = new $[pluginName](this, params);
+                that.data(pluginName, plugin);
+            }
         });
-    }
-
-    $(function () {
-        $('[data-role="accordion"]').each(function () {
-            $(this).Accordion();
-        })
-    })
-})(window.jQuery);
+    };
+    // autoinit
+    $(function(){
+        $()[pluginName]({initAll: true});
+    });
+
+})(jQuery);

data/vendor/assets/javascripts/metro-ui/carousel.js

@@ -3,8 +3,14 @@
  */
 
 (function($) {
+    var pluginName = 'Carousel',
+        initAllSelector = '[data-role=carousel], .carousel',
+        paramKeys = ['Auto', 'Period', 'Duration', 'Effect', 'Direction', 'Markers', 'Arrows', 'Stop'];
 
-    $.Carousel = function(element, options) {
+    $[pluginName] = function(element, options) {
+        if (!element) {
+            return $()[pluginName]({initAll: true});
+        }
 
         // default settings
         var defaults = {
@@ -112,6 +118,14 @@
                     });
                 }
             }
+
+            // u can use same code:
+            // $('#carusel').trigger('changeSlide', [{direction: 'left', effect: 'fade', index: 1}])
+            // any option not required
+            $element.on('changeSlide', function(event, options){
+                options = options || {};
+                changeSlide(options.direction, options.effect, options.index);
+            });
         };
 
         /**
@@ -220,7 +234,7 @@
 
             outSlide = $(slides[currentSlideIndex]);
 
-            nextSlideIndex = typeof slideIndex !== 'undefined' ? slideIndex : currentSlideIndex + delta;
+            nextSlideIndex = (typeof slideIndex !== 'undefined' && slideIndex !== currentSlideIndex) ? slideIndex : currentSlideIndex + delta;
             if (nextSlideIndex >= slides.length) {
                 nextSlideIndex = 0;
             }
@@ -322,6 +336,11 @@
          * fade effect
          */
         var changeSlideFade = function (outSlide, inSlide) {
+            inSlide.hide();
+            inSlide.css({
+                left: 0,
+                top: 0
+            });
             inSlide.fadeIn(plugin.settings.duration);
             outSlide.fadeOut(plugin.settings.duration);
         };
@@ -330,39 +349,30 @@
 
     };
 
-    $.fn.Carousel = function(options) {
-        return this.each(function() {
-            if (undefined == $(this).data('Carousel')) {
-                var plugin = new $.Carousel(this, options);
-                $(this).data('Carousel', plugin);
-            }
-        });
-    };
-
     // easing effect for jquery animation
     $.easing.doubleSqrt = function(t, millisecondsSince, startValue, endValue, totalDuration) {
         var res = Math.sqrt(Math.sqrt(t));
         return res;
     };
 
-})(jQuery);
-
-
-$(window).ready(function(){
-    var allCarousels = $('[data-role=carousel], .carousel');
-    allCarousels.each(function (index, carousel) {
-        var params = {};
-        $carousel = $(carousel);
-        params.auto         = $carousel.data('paramAuto');
-        params.period       = $carousel.data('paramPeriod');
-        params.duration     = $carousel.data('paramDuration');
-        params.effect       = $carousel.data('paramEffect');
-        params.direction    = $carousel.data('paramDirection');
-        params.markers      = $carousel.data('paramMarkers');
-        params.arrows       = $carousel.data('paramArrows');
-        params.stop         = $carousel.data('paramStop');
-
-        $carousel.Carousel(params);
-    })
+    $.fn[pluginName] = function(options) {
+        var elements = options && options.initAll ? $(initAllSelector) : this;
+        return elements.each(function() {
+            var that = $(this),
+                params = {},
+                plugin;
+            if (undefined == that.data(pluginName)) {
+                $.each(paramKeys, function(index, key){
+                    params[key[0].toLowerCase() + key.slice(1)] = that.data('param' + key);
+                });
+                plugin = new $[pluginName](this, params);
+                that.data(pluginName, plugin);
+            }
+        });
+    };
+    // autoinit
+    $(function(){
+        $()[pluginName]({initAll: true});
+    });
 
-});
+})(jQuery);

data/vendor/assets/javascripts/metro-ui/dialog.js

@@ -0,0 +1,153 @@
+/*  Author: Valerio Battaglia (vabatta)
+ *  Description: Function to create dialog box. You can have a dialog box open at once.
+ *  Version: 1.0a
+ *
+ *  Params:
+ *      title - Title of the dialog box (HTML format)
+ *      content - Content of the dialog box (HTML format)
+ *      draggable - Set draggable to dialog box, available: true, false (default: false)
+ *      overlay - Set the overlay of the page, available: true, false (default: true)
+ *      closeButton - Enable or disable the close button, available: true, false (default: false)
+ *      buttonsAlign - Align of the buttons, available: left, center, right (default: center)
+ *      buttons - Set buttons in the action bar (JSON format)
+ *          name - Text of the button (JSON format)
+ *              action - Function to bind to the button
+ *      position - Set the initial position of the dialog box (JSON format)
+ *          zone - Zone of the dialog box, available: left, center, right (default: center)
+ *          offsetY - Top offset pixels
+ *          offsetX - Left offset pixels
+ *      
+ *   Goal for next versions:
+ *      Add style param to set custom css to the dialog box controls
+ *      Add possibility to resize window
+ */
+
+(function($) {
+    $.Dialog = function(params) {
+        if(!$.DialogOpened) {
+            $.DialogOpened = true;
+        } else {
+            return false;
+        }
+
+        params = $.extend({'position':{'zone':'center'},'overlay':true}, params);
+
+        var buttonsHTML = '<div';
+
+        // Buttons position
+        if(params.buttonsAlign)
+        {
+            buttonsHTML += ' style=" float: ' + params.buttonsAlign + ';">';
+        } else {
+            buttonsHTML += '>';
+        }
+
+        $.each(params.buttons, function(name,obj) {
+            // Generating the markup for the buttons
+
+            buttonsHTML += '<button>' + name + '</button>';
+            
+            if(!obj.action) 
+            {
+                obj.action = function() {};
+            }
+        });
+
+        buttonsHTML += '</div>';
+
+        var markup = [
+            // If overlay is true, set it
+
+            '<div id="dialogOverlay">',
+            '<div id="dialogBox" class="dialog">',
+            '<div class="header">',
+            params.title,
+            (params.closeButton)?('<div><button><i class="icon-cancel-2"></i></button></div>'):(''),
+            '</div>',
+            '<div class="content">', params.content, '</div>',
+            '<div class="action" id="dialogButtons">',
+            buttonsHTML,
+            '</div></div></div>'
+        ].join('');
+
+        $(markup).hide().appendTo('body').fadeIn();
+
+        if(!params.overlay) {
+            $('#dialogOverlay').css('background-color', 'rgba(255, 255, 255, 0)');
+        }
+        
+        // Setting initial position
+        if(params.position.zone == "left")
+        {
+            $('#dialogBox').css("top", Math.max(0, (($(window).height() - $('#dialogBox').outerHeight()) / 3) + 
+                                                $(window).scrollTop()) + "px");
+            $('#dialogBox').css("left", 0);
+        } 
+        else if(params.position.zone == "right")
+        {
+            $('#dialogBox').css("top", Math.max(0, (($(window).height() - $('#dialogBox').outerHeight()) / 3) + 
+                                                $(window).scrollTop()) + "px");
+            $('#dialogBox').css("left", Math.max(0, (($(window).width() - $('#dialogBox').outerWidth())) + 
+                                                            $(window).scrollLeft()) + "px");
+        } 
+        else
+        {
+            $('#dialogBox').css("top", (params.position.offsetY)?(params.position.offsetY):(Math.max(0, (($(window).height() - $('#dialogBox').outerHeight()) / 3) + 
+                                                                                                $(window).scrollTop()) + "px"));
+            $('#dialogBox').css("left", (params.position.offsetX)?(params.position.offsetX):(Math.max(0, (($(window).width() - $('#dialogBox').outerWidth()) / 2) + 
+                                                                                                $(window).scrollLeft()) + "px"));
+        }
+
+        if(params.draggable) {
+            // Make draggable the window
+
+            $('#dialogBox div.header').css('cursor', 'move').on("mousedown", function(e) {
+                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
+
+                var z_idx = $drag.css('z-index'),
+                    drg_h = $drag.outerHeight(),
+                    drg_w = $drag.outerWidth(),
+                    pos_y = $drag.offset().top + drg_h - e.pageY,
+                    pos_x = $drag.offset().left + drg_w - e.pageX;
+                $drag.css('z-index', 99999).parents().on("mousemove", function(e) {
+                    $('.draggable').offset({
+                        top:e.pageY + pos_y - drg_h,
+                        left:e.pageX + pos_x - drg_w
+                    }).on("mouseup", function() {
+                        $(this).removeClass('draggable').css('z-index', z_idx);
+                    });
+                });
+                e.preventDefault(); // disable selection
+            }).on("mouseup", function() {
+                $(this).removeClass('active-handle').parent().removeClass('draggable');
+            });
+        }
+
+        $('#dialogBox .header button').click(function() { 
+            // Bind close button to hide dialog
+
+            $.Dialog.hide();
+            return false;
+        });
+
+        var buttons = $('#dialogBox .action button'),
+            i = 0;
+
+        $.each(params.buttons,function(name,obj){
+            buttons.eq(i++).click(function(){
+                // Calling function and hide the dialog   
+
+                obj.action();
+                $.Dialog.hide();
+                return false;
+            });
+        });
+    }
+
+    $.Dialog.hide = function(){
+        $('#dialogOverlay').fadeOut(function(){
+            $.DialogOpened = false;
+            $(this).remove();
+        });
+    }
+})(jQuery);

data/vendor/assets/javascripts/metro-ui/dropdown.js

@@ -88,7 +88,7 @@
     }
 
     $(function () {
-        $('.menu-pull').each(function () {
+        $('.pull-menu, .menu-pull').each(function () {
             $(this).PullDown();
         })
     })

data/vendor/assets/javascripts/metro-ui/input-control.js

@@ -2,8 +2,14 @@
  * jQuery plugin for input elements for Metro UI CSS framework
  */
 (function($) {
+    var pluginName = 'Input',
+        initAllSelector = '.input-control',
+        paramKeys = [];
 
-    $.Input = function(element, options) {
+    $[pluginName] = function(element, options) {
+        if (!element) {
+            return $()[pluginName]({initAll: true});
+        }
 
         var defaults = {
         };
@@ -26,78 +32,82 @@
          * initialize text input element behavior
          */
         var initTextInput = function () {
-            var helper,
-                $helper,
+            var $helper,
                 input;
-            helper = $element.children('.helper').get(0);
+            $helper = $element.children('.helper');
 
-            if (!helper) {
+            if (!$helper.get(0)) {
                 return;
             }
 
-            $helper = $(helper);
+            $helper.attr('tabindex', '-1');
+            $helper.attr('type', 'button');
 
-            // clear text when clock on helper
+            // clear text when click on helper
             $helper.on('click', function () {
                 input = $element.children('input');
-                input.attr('value', '');
+                if (input.prop('readonly')) {
+                    return;
+                }
+                input.val('');
                 input.focus();
-            }).on('click', function(e){e.preventDefault(); return false;});
+            });
         };
 
         /**
          * initialize password input element behavior
          */
         var initPasswordInput = function () {
-            var helper,
-                $helper,
+            var $helper,
                 password,
                 text;
-            helper = $element.children('.helper').get(0);
-            if (!helper) {
+            $helper = $element.children('.helper');
+            if (!$helper.get(0)) {
                 return;
             }
 
             text = $('<input type="text" />');
             password = $element.children('input');
-            $helper = $(helper);
+            $helper.attr('tabindex', '-1');
+            $helper.attr('type', 'button');
 
             // insert text element and hode password element when push helper
             $helper.on('mousedown', function () {
                 password.hide();
                 text.insertAfter(password);
-                text.attr('value', password.attr('value'));
-            }).on('click', function(e){e.preventDefault(); return false;});
+                text.val(password.val());
+            });
 
             // return password and remove text element
             $helper.on('mouseup, mouseout', function () {
                 text.detach();
                 password.show();
                 password.focus();
-            }).on('click', function(e){e.preventDefault(); return false;});
+            });
         };
 
         plugin.init();
 
     };
 
-    $.fn.Input = function(options) {
-        return this.each(function() {
-            if (undefined == $(this).data('Input')) {
-                var plugin = new $.Input(this, options);
-                $(this).data('Input', plugin);
+    $.fn[pluginName] = function(options) {
+        var elements = options && options.initAll ? $(initAllSelector) : this;
+        return elements.each(function() {
+            var that = $(this),
+                params = {},
+                plugin;
+            if (undefined == that.data(pluginName)) {
+                $.each(paramKeys, function(index, key){
+                    params[key[0].toLowerCase() + key.slice(1)] = that.data('param' + key);
+                });
+                plugin = new $[pluginName](this, params);
+                that.data(pluginName, plugin);
             }
         });
-    }
-
-})(jQuery);
-
-$(function(){
-    var allInputs = $('.input-control');
-    allInputs.each(function (index, input) {
-        var params = {};
-        $input = $(input);
-
-        $input.Input(params);
+    };
+    // autoinit
+    $(function(){
+        //$()[pluginName]({initAll: true});
     });
-});
+
+})(jQuery);