Updating Metro-UI-CSS

ViliusLuneckas · Aug 29, 2013 · 7997924 · 7997924
1 parent 362a76d
commit 7997924
Show file tree

Hide file tree

Showing 21 changed files with 611 additions and 82 deletions.
diff --git a/Metro-UI-CSS b/Metro-UI-CSS
diff --git a/lib/metro/ui/rails/version.rb b/lib/metro/ui/rails/version.rb
@@ -1,7 +1,7 @@
 module Metro
   module Ui
     module Rails
-      VERSION = "0.15.8.14"
+      VERSION = "0.15.8.15
     end
   end
 end
diff --git a/vendor/assets/javascripts/metro-ui.js b/vendor/assets/javascripts/metro-ui.js
@@ -1,14 +1,16 @@
 //= require jquery.mousewheel.min.js
-//= require metro-ui/pagecontrol
 //= require metro-ui/accordion
+//= require metro-ui/buttonset
 //= require metro-ui/calendar
-//= require metro-ui/tile-drag
-//= require metro-ui/dropdown
-//= require metro-ui/start-menu
-//= require metro-ui/dialog
-//= require metro-ui/tile-slider
 //= require metro-ui/carousel
-//= require metro-ui/buttonset
+//= require metro-ui/contextmenu
+//= require metro-ui/dialog
+//= require metro-ui/dropdown
 //= require metro-ui/input-control
+//= require metro-ui/pagecontrol
+//= require metro-ui/pagelist
 //= require metro-ui/rating
 //= require metro-ui/slider
+//= require metro-ui/start-menu
+//= require metro-ui/tile-drag
+//= require metro-ui/tile-slider
diff --git a/vendor/assets/javascripts/metro-ui/contextmenu.js b/vendor/assets/javascripts/metro-ui/contextmenu.js
@@ -0,0 +1,11 @@
+$(function(){
+$(".contextmenu").hide();
+$(document).on("contextmenu", function(event) { 
+    event.preventDefault();
+    $(".contextmenu")
+    .show()
+    .css({top: event.pageY + "px", left: event.pageX + "px"});
+}).on("click", function(event) {
+    $(".contextmenu").hide();
+});
+});
diff --git a/vendor/assets/javascripts/metro-ui/dialog.js b/vendor/assets/javascripts/metro-ui/dialog.js
@@ -1,6 +1,6 @@
 /*  Author: Valerio Battaglia (vabatta)
  *  Description: Function to create dialog box. You can have a dialog box open at once.
- *  Version: 1.0a
+ *  Version: 1.1b
  *
  *  Params:
  *      title - Title of the dialog box (HTML format)
@@ -9,6 +9,7 @@
  *      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)
+ *      keepOpened - Keep the window opened after buttons click, available: true, false (default: false)
  *      buttons - Set buttons in the action bar (JSON format)
  *          name - Text of the button (JSON format)
  *              action - Function to bind to the button
@@ -17,20 +18,29 @@
  *          offsetY - Top offset pixels
  *          offsetX - Left offset pixels
  *      
+ *  API:
+ *      $.Dialog.content() - Getter or setter for the content of opened dialog (HTML format)
+ *      $.Dialog.title() - Getter or setter for the title of opened dialog (HTML format)
+ *      $.Dialog.buttons() - Setter for the buttons of opened dialog (JSON Format)
+ *      $.Dialog.close() - Close, if any, current dialog box
+ *
  *   Goal for next versions:
  *      Add style param to set custom css to the dialog box controls
  *      Add possibility to resize window
+ *      Create setup with steps
  */
 
 (function($) {
     $.Dialog = function(params) {
-        if(!$.DialogOpened) {
-            $.DialogOpened = true;
+        if(!$.Dialog.opened) {
+            $.Dialog.opened = true;
         } else {
             return false;
         }
 
-        params = $.extend({'position':{'zone':'center'},'overlay':true}, params);
+        $.Dialog.settings = params;
+
+        params = $.extend({ 'position': {'zone': 'center'}, 'overlay': true }, params);
 
         var buttonsHTML = '<div';
 
@@ -42,7 +52,7 @@
             buttonsHTML += '>';
         }
 
-        $.each(params.buttons, function(name,obj) {
+        $.each(params.buttons, function(name, obj) {
             // Generating the markup for the buttons
 
             buttonsHTML += '<button>' + name + '</button>';
@@ -60,9 +70,9 @@
 
             '<div id="dialogOverlay">',
             '<div id="dialogBox" class="dialog">',
-            '<div class="header">',
-            params.title,
-            (params.closeButton)?('<div><button class="tool-button"><i class="icon-cancel-2"></i></button></div>'):(''),
+            '<div class="header"><span>',
+            params.title,'</span>',
+            (params.closeButton)?('<div><button><i class="icon-cancel-2"></i></button></div>'):(''),
             '</div>',
             '<div class="content">', params.content, '</div>',
             '<div class="action" id="dialogButtons">',
@@ -109,44 +119,134 @@
                     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() {
+                    var t = (e.pageY > 0)?(e.pageY + pos_y - drg_h):(0);
+                    var l = (e.pageX > 0)?(e.pageX + pos_x - drg_w):(0);
+
+                    if(t >= 0 && t <= window.innerHeight) {
+                        $('.draggable').offset({top: t});
+                    }
+                    if(l >= 0 && l <= window.innerWidth) {
+                        $('.draggable').offset({left: l});
+                    }
+
+                    $('.draggable').on("mouseup", function() {
                         $(this).removeClass('draggable').css('z-index', z_idx);
                     });
                 });
-                e.preventDefault(); // disable selection
+                // disable selection
+
+                e.preventDefault();
             }).on("mouseup", function() {
                 $(this).removeClass('active-handle').parent().removeClass('draggable');
             });
         }
 
         $('#dialogBox .header button').click(function() { 
-            // Bind close button to hide dialog
+            // Bind close button to close dialog
 
-            $.Dialog.hide();
+            $.Dialog.close();
             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   
+        $.each(params.buttons, function(name, obj) {
+            buttons.eq(i++).click(function() {
+                // Calling function and close the dialog   
+
+                var result = obj.action();
+                if(!params.keepOpened || result != false) {
+                   $.Dialog.close();
+                   return false;
+                }
+            });
+        });
+    }
+
+    $.Dialog.content = function(newContent) {
+        // Prevent using function without dialog opened
+        if(!$.Dialog.opened) {
+            return false;
+        }
+
+        if(newContent) {
+            $('#dialogBox .content').html(newContent);
+        } else {
+            return $('#dialogBox .content').html();
+        }
+    }
+
+    $.Dialog.title = function(newTitle) {
+        // Prevent using function without dialog opened
+        if(!$.Dialog.opened) {
+            return false;
+        }
+
+        if(newTitle) {
+            $('#dialogBox .header span').html(newTitle);
+        } else {
+            return $('#dialogBox .header span').html();
+        }
+    }
+
+    $.Dialog.buttons = function(newButtons) {
+        // Prevent using function without dialog opened or no params
+        if(!$.Dialog.opened || !newButtons) {
+            return false;
+        }
+
+        var buttonsHTML = '<div';
+
+        // Buttons position
+        if($.Dialog.settings.buttonsAlign)
+        {
+            buttonsHTML += ' style=" float: ' + $.Dialog.settings.buttonsAlign + ';">';
+        } else {
+            buttonsHTML += '>';
+        }
+
+        $.each(newButtons, function(name, obj) {
+            // Generating the markup for the buttons
+
+            buttonsHTML += '<button>' + name + '</button>';
+
+            if(!obj.action) 
+            {
+                obj.action = function() {};
+            }
+        });
+
+        buttonsHTML += '</div>';
+
+        $('#dialogButtons').html(buttonsHTML);
+
+        var buttons = $('#dialogBox .action button'),
+            i = 0;
+
+        $.each(newButtons, function(name, obj) {
+            buttons.eq(i++).click(function() {
+                // Calling function and close the dialog   
 
                 obj.action();
-                $.Dialog.hide();
+                if(!$.Dialog.settings.keepOpened) {
+                   $.Dialog.close();
+                }
                 return false;
             });
         });
     }
 
-    $.Dialog.hide = function(){
-        $('#dialogOverlay').fadeOut(function(){
-            $.DialogOpened = false;
+    $.Dialog.close = function() {
+        // Prevent using function without dialog opened
+        if(!$.Dialog.opened) {
+            return false;
+        }
+
+        $('#dialogOverlay').fadeOut(function() {
+            $.Dialog.opened = false;
             $(this).remove();
         });
     }

diff --git a/vendor/assets/javascripts/metro-ui/dropdown.js b/vendor/assets/javascripts/metro-ui/dropdown.js
@@ -12,17 +12,26 @@
                 $(this).slideUp('fast', function(){});
                 $(this).parent().removeClass("active");
             });
-        }
+        };
 
         var initSelectors = function(selectors){
-            selectors.on('click', function(e){
-                e.stopPropagation();
+        	selectors.off("click.dropdown");
+            selectors.on('click.dropdown', function(e){
+                //e.stopPropagation();
                 //$("[data-role=dropdown]").removeClass("active");
+            	if($(e.originalEvent.target).parent().is("[data-role]")) e.stopPropagation();
 
                 clearDropdown();
                 $(this).parents("ul").css("overflow", "visible");
 
                 var $m = $(this).children(".dropdown-menu, .sidebar-dropdown-menu");
+                $(this).parents("ul").children(".dropdown").children(".dropdown-menu, .sidebar-dropdown-menu").each(function(){
+                    if(!$(this).hasClass("keep-opened") && !$m.hasClass("keep-opened")) {
+                        $(this).slideUp('fast');
+                        $(this).parents("li").removeClass("active");
+                    }
+                });
+
                 if ($m.css('display') == "block") {
                     $m.slideUp('fast');
                     $(this).removeClass("active");
@@ -34,24 +43,25 @@
                 //$(this).children(".dropdown-menu").hide();
             });
             $('html').on("click", function(e){
-                clearDropdown();
+            	if(e.originalEvent && $(e.originalEvent.target).parents('[data-role="dropdown"]').length == 0)
+            		clearDropdown();
             });
-        }
+        };
 
         return this.each(function(){
             if ( options ) {
-                $.extend(defaults, options)
+                $.extend(defaults, options);
             }
 
             initSelectors($this);
         });
-    }
+    };
 
     $(function () {
         $('[data-role="dropdown"]').each(function () {
             $(this).Dropdown();
-        })
-    })
+        });
+    });
 })(window.jQuery);
 
 
@@ -76,20 +86,20 @@
                 }
                 //$(this).toggleClass("active");
             });
-        }
+        };
 
         return this.each(function(){
             if ( options ) {
-                $.extend(defaults, options)
+                $.extend(defaults, options);
             }
 
             initSelectors($this);
         });
-    }
+    };
 
     $(function () {
         $('.pull-menu, .menu-pull').each(function () {
             $(this).PullDown();
-        })
-    })
-})(window.jQuery);
+        });
+    });
+})(window.jQuery);
diff --git a/vendor/assets/javascripts/metro-ui/pagecontrol.js b/vendor/assets/javascripts/metro-ui/pagecontrol.js
@@ -12,6 +12,13 @@
             ;
 
         var initSelectors = function(selectors){
+            $.each(selectors, function(i, s){
+                if ($(s).parent("li").hasClass("active")) {
+                    var target = $(s).attr("href");
+                    $(target).show();
+                }
+            })
+
             selectors.on('click', function(e){
                 e.preventDefault();
                 var $a = $(this);