metro-ui-rails 0.15.8.4 → 0.15.8.11

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

@@ -1,9 +1,10 @@
-//= require metro-ui/accordion
-//= require metro-ui/buttonset
-//= require metro-ui/carousel
-//= 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/tile-drag
+//= require metro-ui/pagecontrol
+//= require metro-ui/carousel
+//= require metro-ui/buttonset
+//= require metro-ui/accordion

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

@@ -6,14 +6,14 @@
         var $this = $(this)
             , $li = $this.children("li")
             , $triggers = $li.children("a")
-            , $frames = $this.find("li div")
+            , $frames = $li.children("div")
             ;
 
         var initTriggers = function(triggers){
             triggers.on('click', function(e){
                 e.preventDefault();
                 var $a = $(this)
-                  , target = $($a.parent('li').children("div"));
+                  , target = $a.parent('li').children("div");
 
                 if ( $a.parent('li').hasClass('active') ) {
                     target.slideUp();

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

@@ -42,7 +42,7 @@
                 input = $element.children('input');
                 input.attr('value', '');
                 input.focus();
-            });
+            }).on('click', function(e){e.preventDefault(); return false;});
         };
 
         /**
@@ -67,14 +67,14 @@
                 password.hide();
                 text.insertAfter(password);
                 text.attr('value', password.attr('value'));
-            });
+            }).on('click', function(e){e.preventDefault(); return false;});
 
             // 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();

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

@@ -0,0 +1,332 @@
+/**
+ * jQuery plugin for drag'n'drop tiles
+ *
+ * to init plugin just add class 'tile-drag' to your tile-group element
+ * or add attribute data-role="tile-drag"
+ *
+ * to handle drag/drop events use next code
+
+$(function(){
+    $('#tile_group_id').on('drag', function(e, draggingTile, parentGroup){
+       ... your code ...
+    });
+    $('#tile_group_id').on('drop', function(e, draggingTile, targetGroup){
+        ... your code ...
+    });
+});
+
+ *
+ * if you want to use drag'n'drop between groups use attribute data-param-group="any_id" to link groups
+ */
+(function($) {
+
+    $.TileDrag = function(element, options) {
+
+        var defaults = {
+            // if group sets and exists other same groups, it is possible to drag'n'drop from one group to another
+            group: null
+        };
+
+        var plugin = this;
+
+        plugin.settings = {};
+
+        var $element = $(element),
+            $groups,
+            settings,
+            tiles,
+            $draggingTile,
+            $parentGroup, // parent group for dragging tile
+            draggingTileWidth,
+            draggingTileHeight,
+            $phantomTile,
+            tileDeltaX,
+            tileDeltaY,
+            groupOffsetX,
+            groupOffsetY,
+            tilesCoordinates,
+            tileSearchCount = 0, // uses for findTileUnderCursor function
+            tileUnderCursorIndex,
+            tileUnderCursorSide;
+
+        plugin.init = function() {
+            settings = plugin.settings = $.extend({}, defaults, options);
+
+            // if group is set
+            if (settings.group) {
+                // search other elements with same group
+                $groups = $('[data-role=tile-drag], .tile-drag').filter('[data-param-group=' + settings.group + ']');
+            } else {
+                $groups = $element;
+            }
+
+            // any tile-group must be relative
+            $groups.css({
+                'position': 'relative'
+            });
+
+            // select all tiles within group
+            tiles = $groups.children('.tile');
+
+            tiles.on('mousedown', startDrag);
+
+        };
+
+        var startDrag = function(event) {
+            var $tile,
+                tilePosition,
+                tilePositionX,
+                tilePositionY,
+                groupOffset;
+
+            event.preventDefault();
+
+            // currently dragging tile
+            $draggingTile = $tile = $(this);
+
+            // search parent group
+            $parentGroup = $tile.parents('.tile-drag');
+
+            // dragging tile dimentions
+            draggingTileWidth = $tile.outerWidth();
+            draggingTileHeight = $tile.outerHeight();
+
+            // hidden tile to place it where dragging tile will dropped
+            $phantomTile = $('<div></div>');
+            $phantomTile.css({
+                'background': 'none'
+            });
+            $phantomTile.addClass('tile');
+            if ($tile.hasClass('double')) {
+                $phantomTile.addClass('double');
+            } else if ($tile.hasClass('triple')) {
+                $phantomTile.addClass('triple');
+            } else if ($tile.hasClass('quadro')) {
+                $phantomTile.addClass('quadro');
+            } else if ($tile.hasClass('double-vertical')) {
+                $phantomTile.addClass('double-vertical');
+            } else if ($tile.hasClass('triple-vertical')) {
+                $phantomTile.addClass('triple-vertical');
+            } else if ($tile.hasClass('quadro-vertical')) {
+                $phantomTile.addClass('quadro-vertical');
+            }
+
+            // dragging tile position within group
+            tilePosition = $tile.position();
+            tilePositionX = tilePosition.left;
+            tilePositionY = tilePosition.top;
+
+            // group element offset relate to document border
+            groupOffset = $parentGroup.offset();
+            groupOffsetX = groupOffset.left;
+            groupOffsetY = groupOffset.top;
+
+            // pixels count between cursor and dragging tile border
+            tileDeltaX = event.pageX - groupOffsetX - tilePositionX;
+            tileDeltaY = event.pageY - groupOffsetY - tilePositionY;
+
+            // place phantom tile instead dragging one
+            $phantomTile.insertAfter($tile);
+
+            /*$tile.detach();
+            $tile.appendTo($parentGroup);*/
+
+            // still now it absolutely positioned
+            $tile.css({
+                'position':     'absolute',
+                'left':         tilePositionX,
+                'top':          tilePositionY,
+                'z-index':      100000
+            });
+
+            // store it for future
+            $tile.data('dragging', true);
+            storeTilesCoordinates();
+
+            // some necessary event handlers
+            $(document).on('mousemove.tiledrag', dragTile);
+            $(document).on('mouseup.tiledrag', dragStop);
+
+            // triggering event
+            $groups.trigger('drag', [$draggingTile, $parentGroup]);
+        };
+
+        /**
+         * it function called on every mousemove event
+         */
+        var dragTile = function (event) {
+
+            // all we need is index of tile under cursor (and under dragging tile) if it exists
+            var findTileIndex;
+
+            event.preventDefault();
+
+            // move dragging tile
+            $draggingTile.css({
+                'left': event.pageX - groupOffsetX - tileDeltaX,
+                'top':  event.pageY - groupOffsetY - tileDeltaY
+            });
+
+            findTileIndex = findTileUnderCursor(event);
+            if (findTileIndex) {
+                clearPlaceForTile($(tiles[findTileIndex]));
+            }
+        };
+
+        /**
+         * when this function called dragging tile dropping to clear place (instead phantom tile)
+         * removing events
+         * and some other necessary changes
+         */
+        var dragStop = function (event) {
+            var targetGroup;
+
+            event.preventDefault();
+
+            $(document).off('mousemove.tiledrag');
+            $(document).off('mouseup.tiledrag');
+
+            $draggingTile.detach();
+            $draggingTile.insertAfter($phantomTile);
+
+            targetGroup = $phantomTile.parents('.tile-drag');
+            $phantomTile.remove();
+
+            $draggingTile.css({
+                'position': '',
+                'left':     '',
+                'top':      '',
+                'z-index':  ''
+            });
+
+            $draggingTile.data('dragging', false);
+
+            $groups.trigger('drop', [$draggingTile, targetGroup]);
+        };
+
+        /*
+         * stores tiles coordinates for future finding one tile under cursor
+         * excluding current dragging tile
+         */
+        var storeTilesCoordinates = function () {
+            tilesCoordinates = {};
+            tiles.each(function (index, tile) {
+                var $tile, offset;
+
+                $tile = $(tile);
+
+                // we dont need dragging tile coordinates
+                if ($tile.data('dragging')) return;
+
+                offset = $tile.offset();
+                // it is not real coordinates related to document border
+                // but corrected for less computing during dragging (tile moving)
+                tilesCoordinates[index] = {
+                    x1: offset.left + tileDeltaX - draggingTileWidth / 2,
+                    y1: offset.top + tileDeltaY - draggingTileHeight / 2,
+                    x2: offset.left + $tile.outerWidth() + tileDeltaX - draggingTileWidth / 2,
+                    y2: offset.top + $tile.outerHeight() + tileDeltaY - draggingTileHeight / 2
+                }
+            });
+        };
+
+        /**
+         * search tile under cursor using tileCoordinates from storeTilesCoordinates function
+         * search occurred only one time per ten times for less load and more smooth
+         */
+        var findTileUnderCursor = function (event) {
+            var i, coord,
+                tileIndex = false,
+                tileSide;
+
+            if (tileSearchCount < 10) {
+                tileSearchCount++;
+                return false;
+            }
+            tileSearchCount = 0;
+
+            for (i in tilesCoordinates) {
+                if (!tilesCoordinates.hasOwnProperty(i)) return;
+                coord = tilesCoordinates[i];
+                if (coord.x1 < event.pageX && event.pageX < coord.x2 && coord.y1 < event.pageY && event.pageY < coord.y2) {
+                    tileIndex = i;
+                    break;
+                }
+            }
+
+            // detect side of tile (left or right) to clear place before or after tile
+            if (tileIndex) {
+                if (event.pageX < coord.x1 + $(tiles[tileIndex]).outerWidth() / 2) {
+                    tileSide = 'before';
+                } else {
+                    tileSide = 'after';
+                }
+            }
+            if (tileSide === tileUnderCursorSide && tileIndex === tileUnderCursorIndex) {
+                return false;
+            }
+            tileUnderCursorSide = tileSide;
+            tileUnderCursorIndex = tileIndex;
+
+            return tileIndex;
+        };
+
+        /**
+         * just put phantom tile near tile under cursor (before or after)
+         * and remove previous phantom tile
+         */
+        var clearPlaceForTile = function ($tileUnderCursor) {
+            var $oldPhantomTile,
+                groupOffset;
+
+            $oldPhantomTile = $phantomTile;
+            $phantomTile = $oldPhantomTile.clone();
+
+            // before or after, this is question ...
+            if (tileUnderCursorSide === 'before') {
+                $phantomTile.insertBefore($tileUnderCursor);
+            } else {
+                $phantomTile.insertAfter($tileUnderCursor);
+            }
+
+            $oldPhantomTile.remove();
+            // it is necessary to store new tile coordinates
+            storeTilesCoordinates();
+            // and parent group coordinates
+            groupOffset = $parentGroup.offset();
+            groupOffsetX = groupOffset.left;
+            groupOffsetY = groupOffset.top;
+        };
+
+        // return all groups involved to this plugin
+        plugin.getGroups = function () {
+            return $groups;
+        };
+
+        plugin.init();
+
+    };
+
+    $.fn.TileDrag = function(options) {
+
+        return this.each(function() {
+            if (undefined == $(this).data('TileDrag')) {
+                var plugin = new $.TileDrag(this, options);
+                var $groups = plugin.getGroups();
+                $groups.data('TileDrag', plugin);
+            }
+        });
+
+    };
+
+})(jQuery);
+
+$(function(){
+    var allTileGroups = $('[data-role=tile-drag], .tile-drag');
+    allTileGroups.each(function (index, tileGroup) {
+        var params = {};
+        $tileGroup = $(tileGroup);
+        params.group         = $tileGroup.data('paramGroup');
+        $tileGroup.TileDrag(params);
+    });
+});

data/vendor/toolkit/metro-ui/buttons.less

@@ -8,6 +8,8 @@
 
 @logo: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGESURBVFhH7ZevTsNQFIfbZgKxB9gjIHgABAIcS0CSQIJE4LEIEgQCyQNMIiHhIRAgEAgECWKIySUTCEjLd3t/Cyml3em6DtMvOTn33PM3XdvbBU2SJMmKlssnjuNtZIisa2t50HQNmXAFEvQHsi9X89CzR8M31/wXZwppDpp0aX7v++XBd41q7r5Qg1I0YE8pQYixqbWFpzAMx1pnoPA5vlOZpdDzHdWPoujZGVX4c1iaH8pvhpwJshOpxtxQawM18JYdrlYXdbKIAa4o1pFphrxX8g5qD0CRPsUeZZogfkzeLjJaxAAjZIuit9oqhbgv4veQl+lGFQqfGHwdbqpLH1YMMUdK8WjfysxHlgbHyKfiM7B/obAf5LNiemfQyB1E6VkwBfsGlb9ZvduM+aVFQ3cgDV0S+gHlHrs8LqAC5gEcxLuD6c5pbeVJy9qpNECLCV1aK+lPwO86kD0TF5s2KqD2m7Au7QDtAO0A7QD/PsBcf0zIWWVdfMRmcd+M/vsvRxB8A6+/IU2N93KYAAAAAElFTkSuQmCC);
 @img-back-button: url(data:image/png;base64,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);
+@img-back-button-white: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAVESURBVGhDzZoxiFRJEIZ3hg0MNjAQnGADAw+EMzAw2EBxMzcw8MBgL9vQcA82EDRQLlgDRY9DEAwu8OCSAw/2QI8NDPQwuEDFQEThghUcUVBQUFB2/f7uej39Zt7M9NuZ92Z/qO3uqu6q6nnV/fpVb2NqTNjc3JxrNBrzW1tbe2nOQi0rhbbRS+g1/e5T3qf8SjkZ4OgunF6AbkAbtEuBMW+gm9ApmjOmtnpgbBpawvArOTIOoOsdtEx1l5lJRqkQwsgJilUe/UHP6QDjCo870GOoTZ8sZCRr0W6ppPk9tEB7v2QxkL+guNBsNn/3nDEBxTM4f4syB3jPKc5THrauyWDcAegMYx9KVwx49yg02dGBslnoiVftQVvxq0c+bd1GAnoUkv875QbaG1DpHyYHFMxBIdapf4FWqe62LmMDOrUprECfnDFA/QO0aF3KgYFy/oPpypRpDVQKs9u9QSyZOA0oUNjEv7xi/YCJKwe2Wtj8zxkH1D9BcyYeDPprwYaYN+f3mLg2YFN+PHBOAOqvoOzF2B90CrsNdYVQbb98N7CtJxFektT1VPpvHHQ44bu6zlqwlcf8MODDYShei6dNlAeyaYRx6KyaaOKQ0+aW/NLaDEeP8CaGqZX+m9Xf8qb8DnqvdgqkFFpmTPcjvg5Pb+VtA706vjxBTxbOF6ift7rroD043nWWTZQEhmjB6e2ZQ1k9g4C6k16r06uQ6rypYSx4kRNq10l+w9K3cuczoPOuqZf+zlqgccP4QufRDAF9a3NeQPWSt+BsrBvbTSDeqpLOH3St1XkB9Xu8FWdHR44ZOT/nWY65YX0Hgq61O58htkt9sclqnjeZoPP8QDBOu81txh0xlgO8nzjHX7VmlfjHSuFYE8P6hs2gj5G+2AHOC4+sFFpN/sTni7779Q5xXoh9nG0opiKnjlJXxiCHAc5fhfeLNavAZ/TnflT8nYXn1ir2X4oRfwntc70iwCtcsHUAu3fNjRxM7KAQCi8t2j15Gnhr3b/8ToIm4DIHhqLz9rWiiU0K+BKOENTbWgO3+IVPGu8H6n9ZPYA+pyj+QJY7YqDgT4qPvjV+YO8ZdNGaDtg8RPHQ6o/k3K9UHKgXn7WBJgF9sa4OtLU26suqAWzG57Y1hdBrL3JQ0qkQbJX6tX9kXAgnfp0jtG9DdU4iTqq19RiUkHVgRs9N0Bf0meiTwNa6t+qwpAnoS+yNbzsM/Qae1CSkP7NrpU820LgppuGMYw4BY2qfBPoXvSVvy9jeGeNL4FZ4CjQOqm0S6I4zJivGDo/mnRc5JGfCGFfLJNAXr1XZy58aYK54seug40Vyrp7+lU8CfXGS64qxO4CvD/twLqLeeUQJoH9lk5Bur9HpVKQUZwoRxN+c6fnICoEP+6GwS1I/Z6Ji0EG/mgN1pVrGc9GwDWBba7M7Tzs4tOlQlI8sfXc1KrCp99OacwJQV3q/52qrEHTszkdqAdX2JLClXz44L9DWgTIdDAgvDYH26Fc+CcCGYr77SutnE5cDY3V31X3lo0RrcuauDNCtnSw+1mzf+Qwo6Lnyof2UIvuGGBnomkdn2OcF2vqxyoVNP6BIV07hyicDPOUqtfWWvsFhjOJ8ESq8voWSFmxIrw8DepXi1gfPWb4DehY0MmUzlHRS3kaZhDbfEOGimyK76JZjx6H5gi88pfMvw78EffbcMQMjuyFdboe1MSrQpdugK1Tru4vDmN4Xp6H17UzGnL4H6QzWk85JRXIIDQIOKPGl+7RjkMLE/bsNYeCyHMhcSEEKKf0fxb+Uf1O+pRwBU1PfACwo53PCh30zAAAAAElFTkSuQmCC);
+
 
 .modern-ui-logo, .metro-ui-logo {
     height: 28px;
@@ -38,6 +40,10 @@
     }
     &.page-back {
     }
+
+    &.white {
+        background-image: @img-back-button-white;
+    }
 }
 
 button, .button {
@@ -89,6 +95,9 @@ a.button {
     &:hover, &:active {
         color: inherit;
     }
+    &.big {
+        padding: 14px 10px;
+    }
 }
 
 button, .button, .tool-button {

data/vendor/toolkit/metro-ui/forms.less

@@ -260,15 +260,22 @@
 
 //Input text, password, ...
 
-.input-control > input[type=text], .input-control > input[type=email], .input-control > input[type=url], .input-control > input[type=phone], .input-control > input[type=password], .input-control > select, .input-control > textarea {
+.input-control > input[type=text],
+.input-control > input[type=email],
+.input-control > input[type=url],
+.input-control > input[type=phone],
+.input-control > input[type=password],
+.input-control > select,
+.input-control > textarea {
     border: 2px #bababa solid;
     width: 100%;
     padding: 4px 32px 6px 5px;
-    .pos-rel;
     background-color: #fff;
     outline: 0;
     margin-right: 32px;
-    width: 100%;
+    min-height: 32px;
+    .pos-rel;
+
 
     &:disabled {
         background-color: #eaeaea;
@@ -278,6 +285,17 @@
     }
 }
 
+.input-control > input[type=text]::-ms-clear,
+.input-control > input[type=email]::-ms-clear,
+.input-control > input[type=url]::-ms-clear,
+.input-control > input[type=phone]::-ms-clear {
+    display: none;
+}
+.input-control > input[type=password]::-ms-reveal {
+    display: none;
+}
+
+
 .input-control > select {
     padding-right: 5px;
 }
@@ -307,31 +325,40 @@
     position: relative;
 
     &.text, &.password {
-        .helper {
+        .helper, .btn-search {
             background: #fff;// @textbox_pass_inactive_icon 50% no-repeat;
-            right: 3px;
             top: 2px;
-            width: 26px;
-            height: 26px;
+            width: 26px !important;
+            height: 27px !important;
+            min-width: 26px !important;
+            min-height: 27px !important;
             cursor: pointer;
             color: #000;
-            .pos-abs;
+            position: absolute;
+            left: 100%;
+            margin-left: -28px;
+            display: block;
+            border: 1px #fff solid;
 
             &:before {
+                //content: "";
                 font-size: 12pt;
-                .pos-abs;
+                position: absolute;
                 #font > .normal;
             }
 
+
             &:hover {
                 background: #d9d9d9;// @textbox_pass_inactive_icon 50% no-repeat;
             }
 
             &:active {
                 background-color: #000;
+
                 &:before {
                     color: #fff;
                 }
+
             }
         }
     }
@@ -346,11 +373,28 @@
     }
     &.text {
         .helper {
+
             &:before {
-                content: "\2715";
+                font-family: iconFont;
+                font-size: 12px;
+                content: "\e089";
                 left: 7px;
-                top: 4px;
+                top: 3px;
             }
+
+        }
+    }
+    &.text {
+        .btn-search {
+
+            &:before {
+                font-family: iconFont;
+                font-size: 12px;
+                content: "\e041";
+                left: 7px;
+                top: 3px;
+            }
+
         }
     }
 }