macbury-metro-ui-rails 0.15.9

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

@@ -0,0 +1,64 @@
+(function($){
+    $.fn.PageControl = function( options ){
+        var defaults = {
+        };
+
+        var $this = $(this)
+            , $ul = $this.children("ul")
+            , $selectors = $ul.find("li a")
+            , $selector = $ul.find(".active a")
+            , $frames = $this.find(".frames .frame")
+            , $frame = $frames.children(".frame.active")
+            ;
+
+        var initSelectors = function(selectors){
+            selectors.on('click', function(e){
+                e.preventDefault();
+                var $a = $(this);
+                if (!$a.parent('li').hasClass('active')) {
+                    $frames.hide();
+                    $ul.find("li").removeClass("active");
+                    var target = $($a.attr("href"));
+                    target.show();
+                    $(this).parent("li").addClass("active");
+                }
+                if ($(this).parent("li").parent("ul").parent(".page-control").find(".menu-pull-bar").is(":visible")) {
+                    $(this).parent("li").parent("ul").slideUp("fast", function () {
+                        $(this).css("overflow", "").css("display", "");
+                    });
+                }
+            });
+
+            $(".page-control .menu-pull-bar").text($(".page-control ul li.active a").text());
+            $(".page-control ul li a").click(function (e) {
+                e.preventDefault();
+                $(this).parent("li").parent("ul").parent(".page-control").find(".menu-pull-bar").text($(this).text());
+            });
+        }
+
+        return this.each(function(){
+            if ( options ) {
+                $.extend(defaults, options)
+            }
+
+            initSelectors($selectors);
+        });
+    }
+
+    $(function () {
+        $('[data-role="page-control"]').each(function () {
+            $(this).PageControl();
+        })
+        $(window).resize(function(){
+            if ($(window).width() >= 768) {
+                $(".page-control ul").css({
+                    display: "block"
+                    ,overflow: "visible"
+                })
+            }
+            if ($(window).width() < 768 && $(".page-control ul").css("display") == "block") {
+                $(".page-control ul").hide();
+            }
+        })
+    })
+})(window.jQuery);

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

@@ -0,0 +1,249 @@
+/**
+ * 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 plugin = this;
+
+        plugin.settings = {};
+
+        var $element = $(element),
+            starElements = [],
+            $starElements,
+            $innerElement, // for vote=off mode
+            currentRating;
+
+        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;
+
+            $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 + '%');
+            }
+
+        };
+
+        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);
+            }
+        });
+
+    };
+
+    /**
+     * 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/slider.js

@@ -0,0 +1,248 @@
+/**
+ * Slider - jQuery plugin for MetroUiCss framework
+ *
+ * there is "change" event triggering when marker moving
+ * and "changed" event when stop moving
+ *
+ * you may use this code to handle events:
+
+$(window).ready(function(){
+    $('.slider').on('change', function(e, val){
+        console.log('change to ' + val);
+    }).on('changed', function(e, val){
+        console.log('changed to ' + val);
+    });
+});
+
+ * and this, to retrieve value
+
+$('.slider').data('value')
+
+ *
+ */
+
+(function($) {
+
+    $.slider = function(element, options) {
+
+        // default settings
+        var defaults = {
+            // start value of slider
+            initValue: 0,
+            // accuracy
+            accuracy: 1
+        };
+
+        var plugin = this;
+        plugin.settings = {};
+
+        var $element = $(element); // reference to the jQuery version of DOM element
+
+        var complete, // complete part element
+            marker, // marker element
+            currentValuePerc, // current percents count
+            sliderLength,
+            sliderOffset,
+            sliderStart,
+            sliderEnd,
+            percentPerPixel,
+            markerSize,
+            vertical = false;
+
+        // initialization
+        plugin.init = function () {
+
+            plugin.settings = $.extend({}, defaults, options);
+
+            // create inside elements
+            complete = $('<div class="complete"></div>');
+            marker = $('<div class="marker"></div>');
+
+            complete.appendTo($element);
+            marker.appendTo($element);
+
+            vertical = $element.hasClass('vertical');
+
+            initGeometry();
+
+            // start value
+            currentValuePerc = correctValuePerc(plugin.settings.initValue);
+            placeMarkerByPerc(currentValuePerc);
+
+            // init marker handler
+            marker.on('mousedown', function (e) {
+                e.preventDefault();
+                startMoveMarker();
+            });
+
+            $element.on('click', function (event) {
+                initGeometry();
+                movingMarker(event);
+                $element.trigger('changed', [currentValuePerc]);
+            });
+
+        };
+
+        /**
+         * correct percents using "accuracy" parameter
+         */
+        var correctValuePerc = function (value) {
+            var accuracy = plugin.settings.accuracy;
+            if (accuracy === 0) {
+                return value;
+            }
+            if (value === 100) {
+                return 100;
+            }
+            value = Math.floor(value / accuracy) * accuracy + Math.round(value % accuracy / accuracy) * accuracy;
+            if (value > 100) {
+                return 100;
+            }
+            return value;
+        };
+
+        /**
+         * convert pixels to percents
+         */
+        var pixToPerc = function (valuePix) {
+            var valuePerc;
+            valuePerc = valuePix * percentPerPixel;
+            return correctValuePerc(valuePerc);
+        };
+
+        /**
+         * convert percents to pixels
+         */
+        var percToPix = function (value) {
+            if (percentPerPixel === 0) {
+                return 0;
+            }
+            return value / percentPerPixel;
+        };
+
+        /**
+         * place marker
+         */
+        var placeMarkerByPerc = function (valuePerc) {
+            var size, size2;
+
+            if (vertical) {
+                size = percToPix(valuePerc) + markerSize;
+                size2 = sliderLength - size;
+                marker.css('top', size2);
+                complete.css('height', size);
+            } else {
+                size = percToPix(valuePerc);
+                marker.css('left', size);
+                complete.css('width', size);
+            }
+
+        };
+
+        /**
+         * when mousedown on marker
+         */
+        var startMoveMarker = function () {
+            // register event handlers
+            $(document).on('mousemove.sliderMarker', function (event) {
+                movingMarker(event);
+            });
+            $(document).on('mouseup.sliderMarker', function () {
+                $(document).off('mousemove.sliderMarker');
+                $(document).off('mouseup.sliderMarker');
+                $element.data('value', currentValuePerc);
+                $element.trigger('changed', [currentValuePerc]);
+            });
+
+            initGeometry();
+        };
+
+        /**
+         * some geometry slider parameters
+         */
+        var initGeometry = function () {
+            if (vertical) {
+                sliderLength = $element.height(); // slider element length
+                sliderOffset = $element.offset().top; // offset relative to document edge
+                markerSize = marker.height();
+            } else {
+                sliderLength = $element.width();
+                sliderOffset = $element.offset().left;
+                markerSize = marker.width();
+
+            }
+
+            percentPerPixel = 100 / (sliderLength - markerSize); // it depends on slider element size
+            sliderStart = markerSize / 2;
+            sliderEnd = sliderLength - markerSize / 2;
+        };
+
+        /**
+         * moving marker
+         */
+        var movingMarker = function (event) {
+            var cursorPos,
+                percents,
+                valuePix;
+
+            // cursor position relative to slider start point
+            if (vertical) {
+                cursorPos = event.pageY - sliderOffset;
+            } else {
+                cursorPos = event.pageX - sliderOffset;
+            }
+
+            // if outside
+            if (cursorPos < sliderStart) {
+                cursorPos = sliderStart;
+            } else if (cursorPos > sliderEnd) {
+                cursorPos = sliderEnd;
+            }
+
+            // get pixels count
+            if (vertical) {
+                valuePix = sliderLength - cursorPos - markerSize / 2;
+            } else {
+                valuePix = cursorPos - markerSize / 2;
+            }
+
+            // convert to percent
+            percents = pixToPerc(valuePix);
+
+            // place marker
+            placeMarkerByPerc(percents);
+
+            currentValuePerc = percents;
+
+            $element.trigger('change', [currentValuePerc]);
+        };
+
+
+        plugin.init();
+
+    };
+
+    $.fn.slider = function(options) {
+        return this.each(function() {
+            if (undefined == $(this).data('slider')) {
+                var plugin = new $.slider(this, options);
+                $(this).data('slider', plugin);
+            }
+        });
+    };
+
+
+})(jQuery);
+
+
+$(window).ready(function(){
+    var allsliders = $('[data-role=slider], .slider');
+    allsliders.each(function (index, slider) {
+        var params = {};
+        $slider = $(slider);
+        params.initValue        = $slider.data('paramInitValue');
+        params.accuracy       = $slider.data('paramAccuracy');
+
+        $slider.slider(params);
+    });
+});