metro-ui-rails 0.1.3 → 0.1.6

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

@@ -0,0 +1,46 @@
+(function($){
+    $.fn.Rating = function( options ){
+        var defaults = {
+        };
+
+        var $this = $(this)
+            ;
+
+        var init = function(el){
+            var a = el.find("a");
+            var r = Math.round(el.data("rating")) || 0;
+
+            a.each(function(index){
+                console.log(index);
+                if (index < r) {
+                    $(this).addClass("rated");
+                }
+
+                $(this).hover(
+                    function(){
+                        $(this).prevAll().andSelf().addClass("hover");
+                        $(this).nextAll().removeClass("hover");
+                    },
+                    function(){
+                        $(this).prevAll().andSelf().removeClass("hover");
+                    }
+                )
+            })
+
+        }
+
+        return this.each(function(){
+            if ( options ) {
+                $.extend(defaults, options)
+            }
+
+            init($this);
+        });
+    }
+
+    $(function () {
+        $('[data-role="rating"]').each(function () {
+            $(this).Rating();
+        })
+    })
+})(window.jQuery);

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);
+    });
+});

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

@@ -0,0 +1,196 @@
+$.easing.doubleSqrt = function(t, millisecondsSince, startValue, endValue, totalDuration) {
+    var res = Math.sqrt(Math.sqrt(t));
+    return res;
+};
+
+(function($) {
+
+    $.tileBlockSlider = function(element, options) {
+
+        // настройки по умолчанию
+        var defaults = {
+            // период смены картинок
+            period: 2000,
+            // продолжительность анимации
+            duration: 1000,
+            // направление анимации (up, down, left, right)
+            direction: 'up'
+        };
+        // объект плагина
+        var plugin = this;
+        // настройки конкретного объекта
+        plugin.settings = {};
+
+        var $element = $(element), // reference to the jQuery version of DOM element
+            element = element;    // reference to the actual DOM element
+
+        var blocks, // все картинки
+            currentBlockIndex, // индекс текущего блока
+            slideInPosition, // стартовое положение блока перед началом появления
+            slideOutPosition, // финальное положение блока при скрытии
+            tileWidth, // размеры плитки
+            tileHeight;
+
+        // инициализируем
+        plugin.init = function () {
+
+            plugin.settings = $.extend({}, defaults, options);
+
+            // все блоки
+            blocks = $element.children(".tile-content");
+
+            // если блок всего 1, то слайдинг не нужен
+            if (blocks.length <= 1) {
+                return;
+            }
+
+            // индекс активного в данный момент блока
+            currentBlockIndex = 0;
+
+            // размеры текущей плитки
+            tileWidth = $element.innerWidth();
+            tileHeight = $element.innerHeight();
+            // положение блоков
+            slideInPosition = getSlideInPosition();
+            slideOutPosition = getSlideOutPosition();
+
+            // подготавливаем блоки к анимации
+            blocks.each(function (index, block) {
+                block = $(block);
+                // блоки должны быть position:absolute
+                // возможно этот параметр задан через класс стилей
+                // проверяем, и добавляем если это не так
+                if (block.css('position') !== 'absolute') {
+                    block.css('position', 'absolute');
+                }
+                // скрываем все блоки кроме первого
+                if (index !== 0) {
+                    block.css('left', tileWidth);
+                }
+            });
+
+            // запускаем интервал для смены блоков
+            setInterval(function () {
+                slideBlock();
+            }, plugin.settings.period);
+        };
+
+        // смена блоков
+        var slideBlock = function() {
+
+            var slideOutBlock, // блок который надо скрыть
+                slideInBlock, // блок который надо показать
+                mainPosition = {'left': 0, 'top': 0},
+                options;
+
+            slideOutBlock = $(blocks[currentBlockIndex]);
+
+            currentBlockIndex++;
+            if (currentBlockIndex >= blocks.length) {
+                currentBlockIndex = 0;
+            }
+            slideInBlock = $(blocks[currentBlockIndex]);
+
+            slideInBlock.css(slideInPosition);
+
+            options = {
+                duration: plugin.settings.duration,
+                easing: 'doubleSqrt'
+            };
+
+            slideOutBlock.animate(slideOutPosition, options);
+            slideInBlock.animate(mainPosition, options);
+        };
+
+        /**
+         * возвращает стартовую позицию для блока который должен появиться {left: xxx, top: yyy}
+         */
+        var getSlideInPosition = function () {
+            var pos;
+            if (plugin.settings.direction === 'left') {
+                pos = {
+                    'left': tileWidth,
+                    'top': 0
+                }
+            } else if (plugin.settings.direction === 'right') {
+                pos = {
+                    'left': -tileWidth,
+                    'top': 0
+                }
+            } else if (plugin.settings.direction === 'up') {
+                pos = {
+                    'left': 0,
+                    'top': tileHeight
+                }
+            } else if (plugin.settings.direction === 'down') {
+                pos = {
+                    'left': 0,
+                    'top': -tileHeight
+                }
+            }
+            return pos;
+        };
+
+        /**
+         * возвращает финальную позицию для блока который должен скрыться {left: xxx, top: yyy}
+         */
+        var getSlideOutPosition = function () {
+            var pos;
+            if (plugin.settings.direction === 'left') {
+                pos = {
+                    'left': -tileWidth,
+                    'top': 0
+                }
+            } else if (plugin.settings.direction === 'right') {
+                pos = {
+                    'left': tileWidth,
+                    'top': 0
+                }
+            } else if (plugin.settings.direction === 'up') {
+                pos = {
+                    'left': 0,
+                    'top': -tileHeight
+                }
+            } else if (plugin.settings.direction === 'down') {
+                pos = {
+                    'left': 0,
+                    'top': tileHeight
+                }
+            }
+            return pos;
+        };
+
+        plugin.getParams = function() {
+
+            // code goes here
+
+        }
+
+        plugin.init();
+
+    }
+
+    $.fn.tileBlockSlider = function(options) {
+        return this.each(function() {
+            if (undefined == $(this).data('tileBlockSlider')) {
+                var plugin = new $.tileBlockSlider(this, options);
+                $(this).data('tileBlockSlider', plugin);
+            }
+        });
+    }
+
+})(jQuery);
+
+
+$(window).ready(function(){
+    var slidedTiles = $('[data-role=tile-slider], .block-slider, .tile-slider');
+    slidedTiles.each(function (index, tile) {
+        var params = {};
+        tile = $(tile);
+        params.direction = tile.data('paramDirection');
+        params.duration = tile.data('paramDuration');
+        params.period = tile.data('paramPeriod');
+        tile.tileBlockSlider(params);
+    })
+
+});