metro-ui-rails-cn 0.1.6 → 0.15.8.4

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

@@ -0,0 +1,103 @@
+/**
+ * jQuery plugin for input elements for Metro UI CSS framework
+ */
+(function($) {
+
+    $.Input = function(element, options) {
+
+        var defaults = {
+        };
+
+        var plugin = this;
+        plugin.settings = {};
+        var $element = $(element);
+
+        plugin.init = function() {
+            plugin.settings = $.extend({}, defaults, options);
+
+            if ($element.hasClass('text')) {
+                initTextInput();
+            } else if ($element.hasClass('password')) {
+                initPasswordInput();
+            }
+        };
+
+        /**
+         * initialize text input element behavior
+         */
+        var initTextInput = function () {
+            var helper,
+                $helper,
+                input;
+            helper = $element.children('.helper').get(0);
+
+            if (!helper) {
+                return;
+            }
+
+            $helper = $(helper);
+
+            // clear text when clock on helper
+            $helper.on('click', function () {
+                input = $element.children('input');
+                input.attr('value', '');
+                input.focus();
+            });
+        };
+
+        /**
+         * initialize password input element behavior
+         */
+        var initPasswordInput = function () {
+            var helper,
+                $helper,
+                password,
+                text;
+            helper = $element.children('.helper').get(0);
+            if (!helper) {
+                return;
+            }
+
+            text = $('<input type="text" />');
+            password = $element.children('input');
+            $helper = $(helper);
+
+            // 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'));
+            });
+
+            // return password and remove text element
+            $helper.on('mouseup, mouseout', function () {
+                text.detach();
+                password.show();
+                password.focus();
+            });
+        };
+
+        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);
+            }
+        });
+    }
+
+})(jQuery);
+
+$(function(){
+    var allInputs = $('.input-control');
+    allInputs.each(function (index, input) {
+        var params = {};
+        $input = $(input);
+
+        $input.Input(params);
+    });
+});

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

@@ -1,46 +1,249 @@
-(function($){
-    $.fn.Rating = function( options ){
+/**
+ * jQuery plugin for rating component of MetroUiCss framework
+ * use attribute data-role="rating" or class="rating" to initialize rating plugin for some element
+ * or use $(ratingElement).rating({parameters})
+ *
+ * available parameters (attributes):
+ * data-role-stars="integer" stars count for this rating element (default 5)
+ * data-role-rating="integer" current average rating (default 0)
+ * data-role-vote="string" ('on' or 'off') (default 'on')
+ *
+ * to control rating you can use:
+ * $('ratingID').RatingValue(float)                 - set rating
+ * $('ratingID').RatingValue()                      - return rating
+ * $('ratingID').RatingPercents(0 < float < 100)    - set rating by percents
+ * $('ratingID').RatingPercents()                   - return rating percents
+ * $('ratingID').RatingVote(true or 'on')           - set vote=on rating mode
+ * $('ratingID').RatingVote(false or 'off')         - set vote=off rating mode
+ */
+(function($) {
+
+    $.Rating = function(element, options) {
+
         var defaults = {
+            // stars count
+            stars:      5,
+            // init value
+            rating:     0,
+            // voting mode
+            vote:       'on'
+
         };
 
-        var $this = $(this)
-            ;
+        var plugin = this;
 
-        var init = function(el){
-            var a = el.find("a");
-            var r = Math.round(el.data("rating")) || 0;
+        plugin.settings = {};
 
-            a.each(function(index){
-                console.log(index);
-                if (index < r) {
-                    $(this).addClass("rated");
-                }
+        var $element = $(element),
+            starElements = [],
+            $starElements,
+            $innerElement, // for vote=off mode
+            currentRating;
 
-                $(this).hover(
-                    function(){
-                        $(this).prevAll().andSelf().addClass("hover");
-                        $(this).nextAll().removeClass("hover");
-                    },
-                    function(){
-                        $(this).prevAll().andSelf().removeClass("hover");
-                    }
-                )
-            })
+        plugin.init = function() {
 
-        }
+            plugin.settings = $.extend({}, defaults, options);
+
+            currentRating = plugin.settings.rating;
+
+            if (plugin.settings.vote === 'on') {
+                voteOnInit();
+            } else {
+                voteOffInit();
+            }
+
+        };
+
+        /**
+         * public methods to set and get rating (value, percent)
+         * use it like this: $('#ratingElementID').data('Rating').setRating(4)
+         */
+        plugin.setRating = function (rating) {
+            setRating(rating);
+            return rating;
+        };
+        plugin.setRatingPercents = function (ratingPercents) {
+            setRating((ratingPercents / 100) * plugin.settings.stars);
+            return ratingPercents;
+        };
+        plugin.getRating = function () {
+            return currentRating;
+        };
+        plugin.getRatingPercents = function () {
+            return currentRating / plugin.settings.stars * 100;
+        };
+        /**
+         * public method for change vote mode
+         */
+        plugin.voteOn = function () {
+            plugin.settings.vote = 'on';
+            voteOnInit();
+        };
+        plugin.voteOff = function () {
+            plugin.settings.vote = 'off';
+            voteOffInit();
+        };
+
+
+        /**
+         * init vote=off mode rating
+         */
+        var voteOffInit = function () {
+
+            var width,
+                settings = plugin.settings;
+
+            $element.empty();
+
+            // special class for vote=off mode
+            $element.addClass('static-rating');
+
+            width = ($element.hasClass('small') ? '14' : '27') * settings.stars;
+            $element.css('width', width);
+
+            $innerElement = $('<div class="rating-value"></div>');
+            $innerElement.appendTo($element);
+
+            setRating(currentRating);
+
+        };
+
+        /**
+         * init vote=on mode rating
+         */
+        var voteOnInit = function () {
+            var settings = plugin.settings,
+                a, i;
 
-        return this.each(function(){
-            if ( options ) {
-                $.extend(defaults, options)
+            $element.empty();
+            $element.removeClass('static-rating');
+
+            // create stars (count starts from 1)
+            for (i = 1; i <= settings.stars; i++) {
+                a = starElements[i] = $('<a href="javascript:void(0)"></a>');
+                a.data('starIndex', i);
+                a.appendTo($element);
+            }
+
+            // event handlers for voting
+            $starElements = $element.find('a');
+
+            $starElements.on('mouseenter', function () {
+                var index = $(this).data('starIndex');
+                lightStars(0, true);
+                lightStars(index);
+                $element.trigger('hovered', [index]);
+            });
+            $starElements.on('mouseleave', function () {
+                lightStars(0);
+                lightStars(currentRating, true);
+            });
+            $starElements.on('click', function(){
+                var index = $(this).data('starIndex');
+                currentRating = index;
+                $element.trigger('rated', [index]);
+            });
+
+            setRating(currentRating);
+        };
+
+        /**
+         * make stars fired (from first to (starIndex - 1))
+         * or turn off stars if starIndex = 0
+         * @param starIndex
+         * @param rated if true - add 'rated' class, else 'hover'
+         */
+        var lightStars = function (starIndex, rated) {
+            var class_ = rated ? 'rated' : 'hover';
+            starIndex = Math.round(starIndex);
+            $starElements.removeClass(class_);
+            $starElements.filter(':lt(' + starIndex + ')').addClass(class_);
+        };
+
+        /**
+         * light stars and store rating
+         * @param rating
+         */
+        var setRating = function (rating) {
+            var settings = plugin.settings,
+                percents;
+            currentRating = rating;
+            if (settings.vote === 'on') {
+                lightStars(rating, true);
+            } else {
+                percents = rating / settings.stars * 100;
+                $innerElement.css('width', percents + '%');
             }
 
-            init($this);
+        };
+
+        plugin.init();
+
+    };
+
+    $.fn.Rating = function(options) {
+
+        return this.each(function() {
+            if (undefined == $(this).data('Rating')) {
+                var plugin = new $.Rating(this, options);
+                $(this).data('Rating', plugin);
+            }
         });
-    }
-
-    $(function () {
-        $('[data-role="rating"]').each(function () {
-            $(this).Rating();
-        })
-    })
-})(window.jQuery);
+
+    };
+
+    /**
+     * get or set rating value to/from first element in set
+     */
+    $.fn.RatingValue = function(value) {
+        var ratingPlugin = $(this.get(0)).data('Rating');
+        if (typeof ratingPlugin !== 'undefined') {
+            if (typeof value !== 'undefined') {
+                return ratingPlugin.setRating(value);
+            } else {
+                return ratingPlugin.getRating();
+            }
+        }
+    };
+    /**
+     * get or set rating percents to/from first element in set
+     */
+    $.fn.RatingPercents = function(value) {
+        var ratingPlugin = $(this.get(0)).data('Rating');
+        if (typeof ratingPlugin !== 'undefined') {
+            if (typeof value !== 'undefined') {
+                return ratingPlugin.setRatingPercents(value);
+            } else {
+                return ratingPlugin.getRatingPercents();
+            }
+        }
+    };
+
+    /**
+     * changes rating mode
+     */
+    $.fn.RatingVote = function(vote) {
+        var ratingPlugin = $(this.get(0)).data('Rating');
+        if (typeof ratingPlugin !== 'undefined') {
+            if (vote === true || vote === 'on') {
+                ratingPlugin.voteOn();
+            } else if (vote === false || vote === 'off') {
+                ratingPlugin.voteOff();
+            }
+        }
+    };
+
+})(jQuery);
+
+$(function(){
+    var allratings = $('[data-role=rating], .rating');
+    allratings.each(function (index, rating) {
+        var params = {};
+        $rating = $(rating);
+        params.stars        = $rating.data('paramStars');
+        params.rating       = $rating.data('paramRating');
+        params.vote         = $rating.data('paramVote');
+
+        $rating.Rating(params);
+    });
+});

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

@@ -0,0 +1,271 @@
+/**
+ * jQuery plugin for drag'n'drop tiles
+ */
+(function($) {
+
+    $.TileDrag = function(element, options) {
+
+        var defaults = {
+        };
+
+        var plugin = this;
+
+        plugin.settings = {};
+
+        var $element = $(element),
+            tiles,
+            $draggingTile,
+            draggingTileWidth,
+            draggingTileHeight,
+            $phantomTile,
+            tileDeltaX,
+            tileDeltaY,
+            groupOffsetX,
+            groupOffsetY,
+            tilesCoordinates,
+            tileSearchCount = 0, // uses for findTileUnderCursor function
+            tileUnderCursorIndex,
+            tileUnderCursorSide;
+
+        plugin.init = function() {
+            plugin.settings = $.extend({}, defaults, options);
+
+            $element.css({
+                'position': 'relative'
+            });
+
+            // select all tiles within group
+            tiles = $element.children('.tile');
+
+            tiles.on('mousedown', startDrag);
+
+        };
+
+        var startDrag = function(event) {
+            var $tile,
+                /*tileOffset,
+                tileOffsetX,
+                tileOffsetY,*/
+                tilePosition,
+                tilePositionX,
+                tilePositionY,
+                groupOffset;
+
+            event.preventDefault();
+
+            $draggingTile = $tile = $(this);
+
+            draggingTileWidth = $tile.outerWidth();
+            draggingTileHeight = $tile.outerHeight();
+
+            $phantomTile = $('<div></div>');
+            //$phantom.data('phantomTile', true);
+            $phantomTile.css({
+                'background': 'none'
+            });
+            $phantomTile.addClass('tile');
+            if ($tile.hasClass('double')) {
+                $phantomTile.addClass('double');
+            } else if ($tile.hasClass('double-vertical')) {
+                $phantomTile.addClass('double-vertical');
+            }
+
+            /*tileOffset = $tile.offset();
+            tileOffsetX = tileOffset.left;
+            tileOffsetY = tileOffset.top;*/
+
+            tilePosition = $tile.position();
+            tilePositionX = tilePosition.left;
+            tilePositionY = tilePosition.top;
+
+            groupOffset = $element.offset();
+            groupOffsetX = groupOffset.left;
+            groupOffsetY = groupOffset.top;
+
+            tileDeltaX = event.pageX - groupOffsetX - tilePositionX;
+            tileDeltaY = event.pageY - groupOffsetY - tilePositionY;
+
+            $phantomTile.insertAfter($tile);
+
+            $tile.detach();
+            $tile.appendTo($element);
+
+            $tile.css({
+                'position':     'absolute',
+                'left':         tilePositionX,
+                'top':          tilePositionY,
+                'z-index':      100000
+            });
+
+            $tile.data('dragging', true);
+            storeTilesCoordinates();
+
+            $(document).on('mousemove.tiledrag', dragTile);
+            $(document).on('mouseup.tiledrag', dragStop);
+        };
+
+        var dragTile = function (event) {
+
+            var findTileIndex;
+
+            event.preventDefault();
+
+            $draggingTile.css({
+                'left': event.pageX - groupOffsetX - tileDeltaX,
+                'top':  event.pageY - groupOffsetY - tileDeltaY
+            });
+
+            findTileIndex = findTileUnderCursor(event);
+            if (findTileIndex) {
+                clearPlaceForTile($(tiles[findTileIndex]));
+            } else {
+                return;
+            }
+        };
+
+        var dragStop = function (event) {
+
+            event.preventDefault();
+
+            $(document).off('mousemove.tiledrag');
+            $(document).off('mouseup.tiledrag');
+
+            $draggingTile.detach();
+            $draggingTile.insertAfter($phantomTile);
+
+            $phantomTile.remove();
+
+            $draggingTile.css({
+                'position': '',
+                'left':     '',
+                'top':      '',
+                'z-index':  ''
+            });
+
+            $draggingTile.data('dragging', false);
+        };
+
+        /*
+         * 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);
+
+                if ($tile.data('dragging')) return;
+
+                offset = $tile.offset();
+                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)
+            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;
+        };
+
+        var clearPlaceForTile = function ($tileUnderCursor) {
+            var $oldPhantomTile;
+            $oldPhantomTile = $phantomTile;
+            $phantomTile = $oldPhantomTile.clone();
+
+            /*$phantomTile.css({
+                'width':    0,
+                'height':   0
+            });*/
+            if (tileUnderCursorSide === 'before') {
+                $phantomTile.insertBefore($tileUnderCursor);
+            } else {
+                $phantomTile.insertAfter($tileUnderCursor);
+            }
+
+            /*$oldPhantomTile.animate({
+                'width':    0,
+                'height':   0
+            }, function () {
+                $oldPhantomTile.remove();
+            });
+
+            $phantomTile.animate({
+                'width':    draggingTileWidth,
+                'height':   draggingTileHeight
+            }, function () {
+                storeTilesCoordinates();
+            });*/
+
+            $oldPhantomTile.remove();
+            storeTilesCoordinates();
+        };
+
+        plugin.init();
+
+    };
+
+    $.fn.TileDrag = function(options) {
+
+        return this.each(function() {
+            if (undefined == $(this).data('TileDrag')) {
+                var plugin = new $.TileDrag(this, options);
+                $(this).data('TileDrag', plugin);
+            }
+        });
+
+    };
+
+})(jQuery);
+
+$(function(){
+    var allTileGroups = $('[data-role=tile-drag], .tile-drag');
+    allTileGroups.each(function (index, tileGroup) {
+        var params = {};
+        $tileGroup = $(tileGroup);
+        //params.vote         = $rating.data('paramVote');
+
+        $tileGroup.TileDrag(params);
+    });
+});