metro-ui-rails 0.1.6 → 0.15.8.3

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

@@ -2,6 +2,7 @@
 //= 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/slider

data/vendor/assets/javascripts/metro-ui/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/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/toolkit/metro-ui/bricks.less

@@ -38,6 +38,7 @@
     height: 150px;
 }
 
+/*
 .badge {
     .brick;
     width: @subunit*7;
@@ -47,6 +48,7 @@
     color: @darken;
     text-align: center;
 }
+*/
 
 .square {
     display: block;

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

@@ -56,6 +56,7 @@ button, .button {
     vertical-align: middle;
     cursor: pointer;
     padding: 4px 10px;
+    position: relative;
 
     &.standart {
         min-width: 90px;
@@ -63,8 +64,8 @@ button, .button {
     }
 
     &:active, &.default:active {
-        background-color: #000 !important;
-        color: #fff;
+        top: 1px;
+        left: 1px;
     }
 
     &:disabled, &.disabled {
@@ -82,10 +83,12 @@ button, .button {
         outline: 0;
         border: 1px #353535 dotted;
     }
+}
 
-    &:hover {
+a.button {
+    &:hover, &:active {
+        color: inherit;
     }
-
 }
 
 button, .button, .tool-button {
@@ -95,28 +98,15 @@ button, .button, .tool-button {
         min-width: 24px;
         height: 26px;
         font-size: .8em;
-
-        [class*=icon-] {
-
-        }
     }
     &.big {
         min-height: 48px;
         height: 48px;
         font-size: 1.2em;
-
-        [class*=icon-] {
-            margin-top: 6px;
-            zoom: 1;
-        }
     }
 }
 
 .tool-button {
-    [class*=icon-] {
-        margin-top: 2px !important;
-    }
-
     &.mini {
         min-width: 22px;
         width: 22px;
@@ -125,11 +115,6 @@ button, .button, .tool-button {
     &.big {
         min-width: 48px;
         width: 48px;
-
-        [class*=icon-] {
-            margin-top: 2px !important;
-            margin-left: 15px !important;
-        }
     }
 }
 
@@ -248,3 +233,193 @@ button, .button, .tool-button {
     }
 }
 
+.shortcuts {
+    margin-bottom: 10px;
+}
+
+.shortcut {
+    width: 92px;
+    height: 92px;
+    display: inline-block;
+    //padding: 18px 0;
+    margin: 0 10px 10px 0;
+    vertical-align: top;
+    text-decoration: none;
+    background: #F3F3F3;
+    text-align: center;
+    cursor: pointer;
+    border: 0;
+    border-bottom: 2px transparent solid;
+    position: relative;
+
+    &:hover {
+        border-color: red;
+        //box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+    &:active {
+        //box-shadow: none;
+        background: #F3F3F3;
+        top: 1px;
+        left: 1px;
+    }
+
+    &:last-child {
+
+    }
+
+    & > .icon {
+        margin-top: .25em;
+        margin-bottom: .25em;
+        font-size: 32px;
+        color: #888;
+    }
+    & > .label {
+        display: block;
+        font-weight: 400;
+        color: #666;
+    }
+
+    & > .badge {
+        position: absolute;
+        right: 0;
+        top: 0;
+        background-color: @blue;
+        padding: 5px;
+        margin: 0 !important;
+        text-align: center;
+        display: block;
+        font-size: 9pt;
+        color: #fff;
+    }
+}
+
+a.shortcut {
+    padding: 30px 0;
+    .label {
+        font-size: 9pt;
+    }
+}
+
+.pagination {
+    width: auto;
+    //padding: 10px 10px 5px;
+    margin-bottom: 10px;
+
+    & > ul {
+        .unstyled;
+        margin: 0;
+
+        li {
+            display: inline-block;
+            margin-right: 1px;
+            position: relative;
+
+            a {
+                .tool-button;
+                position: relative;
+                display: block;
+                float: left;
+                font-size: 10pt;
+                padding: 5px;
+                min-width: 32px;
+                height: 32px;
+                text-align: center;
+                //background-color: #fff;
+                vertical-align: middle;
+                cursor: pointer;
+                //border: 1px @blue solid;
+                margin-right: 1px;
+
+                &:hover {
+                    background-color: @darken;
+                    color: @white;
+                }
+
+                &:active {
+                    top: 1px;
+                    left: 1px;
+                    //background-color: @blueDark;
+                }
+            }
+
+            &.first, &.prev, &.next, &.last {
+                a {
+                    font-size: 20pt;
+
+                    &:before {
+                        position: absolute;
+                        left: 50%;
+                        top: 0;
+                        margin-left: -7px;
+                        content: "\25C4";
+                        font-size: 1.5em;
+                    }
+                }
+            }
+
+            &.first {
+                a {
+                    &:before {
+                        content: "\AB";
+                        margin-left: -10px;
+                    }
+                }
+            }
+            &.prev {
+                a {
+                    &:before {
+                        content: "\2039";
+                    }
+                }
+            }
+            &.next {
+                a {
+                    &:before {
+                        content: "\203A";
+                    }
+                }
+            }
+            &.last {
+                a {
+                    &:before {
+                        content: "\BB";
+                        margin-left: -10px;
+                    }
+                }
+            }
+
+            &.active {
+                a {
+                    background-color: #008287 ;
+                    color: @white;
+                }
+            }
+            &.disabled, &.spaces {
+                a {
+                    background-color: darken(@white, 5%);
+                    color: #1e1e1e;
+                    cursor: not-allowed;
+
+                    &:active {
+                        top: 0;
+                        left: 0;
+                    }
+                }
+            }
+            &.disabled {
+                a {
+                    //border-color: @lighten;
+                    color: #1e1e1e;
+                }
+            }
+
+
+            &.spaces {
+                a {
+                    background-color: @white;
+                    cursor: default;
+                }
+            }
+        }
+    }
+}