metro-ui-rails 0.15.8.12 → 0.15.8.13

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

@@ -17,8 +17,14 @@
  * $('ratingID').RatingVote(false or 'off')         - set vote=off rating mode
  */
 (function($) {
+    var pluginName = 'Rating',
+        initAllSelector = '[data-role=rating], .rating',
+        paramKeys = ['Stars', 'Rating', 'Vote'];
 
-    $.Rating = function(element, options) {
+    $[pluginName] = function(element, options) {
+        if (!element) {
+            return $()[pluginName]({initAll: true});
+        }
 
         var defaults = {
             // stars count
@@ -181,17 +187,6 @@
 
     };
 
-    $.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
      */
@@ -233,17 +228,24 @@
         }
     };
 
-})(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);
+    $.fn[pluginName] = function(options) {
+        var elements = options && options.initAll ? $(initAllSelector) : this;
+        return elements.each(function() {
+            var that = $(this),
+                params = {},
+                plugin;
+            if (undefined == that.data(pluginName)) {
+                $.each(paramKeys, function(index, key){
+                    params[key[0].toLowerCase() + key.slice(1)] = that.data('param' + key);
+                });
+                plugin = new $[pluginName](this, params);
+                that.data(pluginName, plugin);
+            }
+        });
+    };
+    // autoinit
+    $(function(){
+        $()[pluginName]({initAll: true});
     });
-});
+
+})(jQuery);

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

@@ -6,7 +6,7 @@
  *
  * you may use this code to handle events:
 
-$(window).ready(function(){
+ $(window).ready(function(){
     $('.slider').on('change', function(e, val){
         console.log('change to ' + val);
     }).on('changed', function(e, val){
@@ -16,14 +16,21 @@ $(window).ready(function(){
 
  * and this, to retrieve value
 
-$('.slider').data('value')
+ $('.slider').data('value')
 
  *
  */
 
 (function($) {
 
-    $.slider = function(element, options) {
+    var pluginName = 'slider',
+        initAllSelector = '[data-role=slider], .slider',
+        paramKeys = ['InitValue', 'Accuracy'];
+
+    $[pluginName] = function(element, options) {
+        if (!element) {
+            return $()[pluginName]({initAll: true});
+        }
 
         // default settings
         var defaults = {
@@ -72,13 +79,12 @@ $('.slider').data('value')
             // init marker handler
             marker.on('mousedown', function (e) {
                 e.preventDefault();
-                startMoveMarker();
+                startMoveMarker(e);
             });
 
-            $element.on('click', function (event) {
-                initGeometry();
-                movingMarker(event);
-                $element.trigger('changed', [currentValuePerc]);
+            $element.on('mousedown', function (e) {
+                e.preventDefault();
+                startMoveMarker(e);
             });
 
         };
@@ -142,7 +148,7 @@ $('.slider').data('value')
         /**
          * when mousedown on marker
          */
-        var startMoveMarker = function () {
+        var startMoveMarker = function (e) {
             // register event handlers
             $(document).on('mousemove.sliderMarker', function (event) {
                 movingMarker(event);
@@ -155,6 +161,8 @@ $('.slider').data('value')
             });
 
             initGeometry();
+
+            movingMarker(e)
         };
 
         /**
@@ -217,32 +225,46 @@ $('.slider').data('value')
             $element.trigger('change', [currentValuePerc]);
         };
 
+        // public methods
+
+        /**
+         * if argument value is defined - correct it, store, place marker and return corrected value
+         * else just return current value
+         * you can use it like this: $('.slider').data('slider').val(38)
+         * @param value (percents)
+         */
+        plugin.val = function (value) {
+            if (typeof value !== 'undefined') {
+                currentValuePerc = correctValuePerc(value);
+                placeMarkerByPerc(currentValuePerc);
+                return currentValuePerc;
+            } else {
+                return 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);
+    $.fn[pluginName] = function(options) {
+        var elements = options && options.initAll ? $(initAllSelector) : this;
+        return elements.each(function() {
+            var that = $(this),
+                params = {},
+                plugin;
+            if (undefined == that.data(pluginName)) {
+                $.each(paramKeys, function(index, key){
+                    params[key[0].toLowerCase() + key.slice(1)] = that.data('param' + key);
+                });
+                plugin = new $[pluginName](this, params);
+                that.data(pluginName, 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);
+    // autoinit
+    $(function(){
+        $()[pluginName]({initAll: true});
     });
-});
+
+})(jQuery);

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

@@ -0,0 +1,153 @@
+/**
+ * use this plugin if you want to make tiled menu like windows 8 start menu
+ * what plugin needs for?
+ * it needs for following elements structure
+ *  <div class="page">
+ *      <div class="tiles">
+ *          <div class="tile-group">
+ *              <div class="tile"></div>
+ *              <div class="tile"></div>
+ *              .........
+ *              <div class="tile"></div>
+ *          </div>
+ *      </div>
+ *  </div>
+ *  
+ * if you do some changes, for example, move tile from one group, you have to use
+ * $('.tiles').trigger('changed')
+ * and all tiles will placed to own place
+ */
+(function($) {
+
+    $.StartMenu = function(element, options) {
+
+        var $startMenu,
+            plugin = this,
+            maxGroupHeight;
+
+        plugin.init = function() {
+            var resizeTimer;
+
+            $startMenu = $('.tiles');
+            
+            addMouseWheel();
+            setPageWidth();
+            tuneUpStartMenu(); // need twice
+
+            $(window).on('resize', function(){
+                clearTimeout(resizeTimer);
+                resizeTimer = setTimeout(function(){
+                    tuneUpStartMenu();
+                }, 200);
+            });
+            $startMenu.on('changed', function(){
+                tuneUpStartMenu();
+            });
+        };
+
+        /**
+         * called on init 
+         * and on resize window
+         * and any tiles moves
+         */
+        var tuneUpStartMenu = function () {
+            var $groups = $startMenu.find('.tile-group');
+            if ($groups.length === 0) {
+                return;
+            }
+            
+            maxGroupHeight = $(window).height() - $($groups.get(0)).offset().top;
+            
+            $groups.each(function(index, group){
+                var $group = $(group);
+                // finding min width for group
+                var groupWidth = 0;
+                var $tiles = $group.find('.tile');
+                if ($tiles.length === 0) {
+                    return;
+                }
+                // finding min width according to the widest tile
+                $tiles.each(function(index, tile){
+                    var $tile = $(tile);
+                    var tileWidth = 161;
+                    if ($tile.hasClass('double')) {
+                        tileWidth = 322;
+                    } else if ($tile.hasClass('triple')) {
+                        tileWidth = 483;
+                    } else if ($tile.hasClass('quadro')) {
+                        tileWidth = 644;
+                    }
+                    
+                    if (tileWidth > groupWidth) {
+                        groupWidth = tileWidth;
+                    }
+                });
+                
+                $group.css({
+                    width: 'auto',
+                    maxWidth: groupWidth
+                });
+                
+                var counter, groupHeight_,
+                groupHeight = $group.height();
+                while (groupHeight > maxGroupHeight) {
+                    if (counter > $tiles.length) { // protection from endless loop
+                        break;
+                    } else if (groupHeight === groupHeight_) {
+                        counter++;
+                    } else {
+                        counter = 1;
+                    }
+                    groupHeight_ = groupHeight;
+                    groupWidth += 161;
+                    $group.css({
+                        'maxWidth': groupWidth
+                    });
+                    groupHeight = $group.height();
+                }
+            });
+            
+            setPageWidth();
+        };
+        
+        var setPageWidth = function () {
+            var tilesWidth = 0;
+            
+            $startMenu.find(".tile-group").each(function(){
+                tilesWidth += $(this).outerWidth() + 80;
+            });
+
+            $startMenu.css("width", 120 + tilesWidth + 20);
+            
+            $(".page").css('width', '').css({
+                width: $(document).width()
+            });
+        };
+        
+        var addMouseWheel = function (){
+            $("body").mousewheel(function(event, delta){
+                var scroll_value = delta * 50;
+                $(document).scrollLeft($(document).scrollLeft() - scroll_value);
+                return false;
+            });
+        };
+        
+        plugin.init();
+
+    };
+
+    $.fn.StartMenu = function(options) {
+
+        return this.each(function() {
+            if (undefined == $(this).data('StartMenu')) {
+                var plugin = new $.StartMenu(this, options);
+                $(this).data('StartMenu', plugin);
+            }
+        });
+    };
+
+})(jQuery);
+
+$(function(){
+    $.StartMenu();
+});

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

@@ -1,12 +1,15 @@
 /**
- * jQuery plugin for drag'n'drop tiles
+ * drag'n'drop plugin
  *
- * to init plugin just add class 'tile-drag' to your tile-group element
- * or add attribute data-role="tile-drag"
+ * this plugin allows to drag tiles between groups
+ *
+ * this plugin auto enabled to 'tile-group' elements
+ * or elements with attribute data-role="tile-group"
  *
  * to handle drag/drop events use next code
+ *
 
-$(function(){
+ $(function(){
     $('#tile_group_id').on('drag', function(e, draggingTile, parentGroup){
        ... your code ...
     });
@@ -16,22 +19,19 @@ $(function(){
 });
 
  *
- * 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 defaults = {};
 
         var plugin = this;
 
         plugin.settings = {};
 
         var $element = $(element),
+            $startMenu,
             $groups,
             settings,
             tiles,
@@ -42,28 +42,25 @@ $(function(){
             $phantomTile,
             tileDeltaX,
             tileDeltaY,
-            groupOffsetX,
-            groupOffsetY,
             tilesCoordinates,
             tileSearchCount = 0, // uses for findTileUnderCursor function
             tileUnderCursorIndex,
-            tileUnderCursorSide;
+            tileUnderCursorSide,
+            newGroupsCoordinates,
+            newGroupSearchCount = 0,
+            newGroupPhantom,
+            targetType, // 'new' or 'existing' group
+            groupsMaxHeight,
+            mouseMoved,
+            tileDragTimer;
 
         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;
-            }
+            $startMenu = $('.tiles');
 
-            // any tile-group must be relative
-            $groups.css({
-                'position': 'relative'
-            });
+            // search other 'tile-group' elements
+            $groups = $('[data-role=tile-group], .tile-group');
 
             // select all tiles within group
             tiles = $groups.children('.tile');
@@ -76,16 +73,12 @@ $(function(){
             var $tile,
                 tilePosition,
                 tilePositionX,
-                tilePositionY,
-                groupOffset;
+                tilePositionY;
 
             event.preventDefault();
 
             // currently dragging tile
-            $draggingTile = $tile = $(this);
-
-            // search parent group
-            $parentGroup = $tile.parents('.tile-drag');
+            $tile = $draggingTile = $(this);
 
             // dragging tile dimentions
             draggingTileWidth = $tile.outerWidth();
@@ -103,37 +96,38 @@ $(function(){
                 $phantomTile.addClass('triple');
             } else if ($tile.hasClass('quadro')) {
                 $phantomTile.addClass('quadro');
-            } else if ($tile.hasClass('double-vertical')) {
+            }
+            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');
             }
+            
+            // place phantom tile instead dragging one
+            $phantomTile.insertAfter($tile);
+            targetType = 'existing';
+            
+            // search parent group
+            $parentGroup = $tile.parents('.tile-group');
 
             // 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;
+            tilePosition = $tile.offset();
+            tilePositionX = tilePosition.left - (event.pageX - event.clientX);
+            tilePositionY = tilePosition.top - (event.pageY - event.clientY);
 
             // 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);
+            tileDeltaX = event.clientX - tilePositionX;
+            tileDeltaY = event.clientY - tilePositionY;
 
-            /*$tile.detach();
-            $tile.appendTo($parentGroup);*/
+            // move tile element to $draggingTileContainer
+            $tile.detach();
+            $tile.insertAfter($($groups.get(-1))); // it need for invalid IE z-index
 
-            // still now it absolutely positioned
+            // from now it fixed positioned
             $tile.css({
-                'position':     'absolute',
+                'position':     'fixed',
                 'left':         tilePositionX,
                 'top':          tilePositionY,
                 'z-index':      100000
@@ -142,10 +136,13 @@ $(function(){
             // store it for future
             $tile.data('dragging', true);
             storeTilesCoordinates();
+            storeNewGroupsCoordinates();
 
             // some necessary event handlers
             $(document).on('mousemove.tiledrag', dragTile);
-            $(document).on('mouseup.tiledrag', dragStop);
+            $(document).one('mouseup.tiledrag', dragStop);
+
+            mouseMoved = false;
 
             // triggering event
             $groups.trigger('drag', [$draggingTile, $parentGroup]);
@@ -155,21 +152,36 @@ $(function(){
          * 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;
+            mouseMoved = true;
 
             event.preventDefault();
 
             // move dragging tile
             $draggingTile.css({
-                'left': event.pageX - groupOffsetX - tileDeltaX,
-                'top':  event.pageY - groupOffsetY - tileDeltaY
+                'left': event.clientX - tileDeltaX,
+                'top':  event.clientY - tileDeltaY
             });
 
+            clearTimeout(tileDragTimer);
+            tileDragTimer = setTimeout(function(){
+                findPlace(event);
+            }, 50);
+        };
+
+        // finding place where put dragging tile
+        var findPlace = function (event) {
+            // all we need is index of tile under cursor (and under dragging tile) if it exists
+            var findTileIndex,
+                findNewGroup;
+
             findTileIndex = findTileUnderCursor(event);
             if (findTileIndex) {
                 clearPlaceForTile($(tiles[findTileIndex]));
+            } else {
+                findNewGroup = findNewGroupUnderCursor(event);
+                if (findNewGroup) {
+                    showNewGroupPhantom(findNewGroup.group, findNewGroup.side);
+                }
             }
         };
 
@@ -180,17 +192,42 @@ $(function(){
          */
         var dragStop = function (event) {
             var targetGroup;
+            
+            if (!mouseMoved) {
+                // emulate default click behavior
+                if ($draggingTile.is('a')) {
+                    window.location.href = $draggingTile.attr('href');
+                }
+            } else {
+                event.preventDefault();
+            }
 
-            event.preventDefault();
-
-            $(document).off('mousemove.tiledrag');
-            $(document).off('mouseup.tiledrag');
+            clearTimeout(tileDragTimer);
+            findPlace(event);
 
             $draggingTile.detach();
-            $draggingTile.insertAfter($phantomTile);
+            // it is two way now: drop to existing group or drop to new group
+            // first drop to existing group
+            if (targetType === 'existing') {
+                $draggingTile.insertAfter($phantomTile);
+                targetGroup = $phantomTile.parents('.tile-group');
+                $phantomTile.remove();
+            } else {
+                newGroupPhantom.css({
+                    'backgroundColor': '',
+                    'width': 'auto',
+                    'max-width': '322px',
+                    'height': ''
+                });
+                $draggingTile.appendTo(newGroupPhantom);
+                targetGroup = newGroupPhantom;
+                newGroupPhantom = undefined;
+            }
 
-            targetGroup = $phantomTile.parents('.tile-drag');
-            $phantomTile.remove();
+            // remove parent group if it was a last tile there
+            if ($parentGroup.find('.tile').length === 0) {
+                $parentGroup.remove();
+            }
 
             $draggingTile.css({
                 'position': '',
@@ -200,8 +237,12 @@ $(function(){
             });
 
             $draggingTile.data('dragging', false);
+            $(document).off('mousemove.tiledrag');
 
+            $groups = $('[data-role=tile-group], .tile-group');
             $groups.trigger('drop', [$draggingTile, targetGroup]);
+            
+            $startMenu.trigger('changed');
         };
 
         /*
@@ -230,6 +271,53 @@ $(function(){
             });
         };
 
+        /**
+         * if tile dragging under this place it will creating new group there
+         */
+        var storeNewGroupsCoordinates = function () {
+            groupsMaxHeight = 0;
+            newGroupsCoordinates = [];
+            $groups.each(function(index){
+                var offset,
+                    width,
+                    height,
+                    $group;
+
+                $group = $(this);
+
+                offset = $group.offset();
+
+                width = $group.width();
+                height = $group.height();
+
+                // make it possible to insert new group before first one
+                if (index === 0) {
+                    newGroupsCoordinates.push({
+                        x1: offset.left - 70 + tileDeltaX - draggingTileWidth / 2,
+                        x2: offset.left + tileDeltaX - draggingTileWidth / 2,
+                        y1: offset.top + tileDeltaY - draggingTileHeight / 2,
+                        y2: offset.top + height + tileDeltaY - draggingTileHeight / 2,
+                        side: 'before',
+                        group: $group
+                    });
+                }
+
+                newGroupsCoordinates.push({
+                    x1: offset.left + width + tileDeltaX - draggingTileWidth / 2,
+                    x2: offset.left + width + 70 + tileDeltaX - draggingTileWidth / 2,
+                    y1: offset.top + tileDeltaY - draggingTileHeight / 2,
+                    y2: offset.top + height + tileDeltaY - draggingTileHeight / 2,
+                    side: 'after',
+                    group: $group
+                });
+
+                if (groupsMaxHeight < height) {
+                    groupsMaxHeight = height;
+                }
+
+            });
+        };
+
         /**
          * search tile under cursor using tileCoordinates from storeTilesCoordinates function
          * search occurred only one time per ten times for less load and more smooth
@@ -239,12 +327,6 @@ $(function(){
                 tileIndex = false,
                 tileSide;
 
-            if (tileSearchCount < 10) {
-                tileSearchCount++;
-                return false;
-            }
-            tileSearchCount = 0;
-
             for (i in tilesCoordinates) {
                 if (!tilesCoordinates.hasOwnProperty(i)) return;
                 coord = tilesCoordinates[i];
@@ -271,16 +353,36 @@ $(function(){
             return tileIndex;
         };
 
+        var findNewGroupUnderCursor = function (event) {
+            var i, coord, newGroup = false;
+
+            for (i in newGroupsCoordinates) {
+                if (!newGroupsCoordinates.hasOwnProperty(i)) return;
+                coord = newGroupsCoordinates[i];
+                if (coord.x1 < event.pageX && event.pageX < coord.x2 && coord.y1 < event.pageY && event.pageY < coord.y2) {
+                    newGroup = coord;
+                    break;
+                }
+            }
+
+            if (!newGroup) {
+                return false;
+            } else {
+                return newGroup;
+            }
+        };
+
         /**
          * just put phantom tile near tile under cursor (before or after)
          * and remove previous phantom tile
          */
         var clearPlaceForTile = function ($tileUnderCursor) {
             var $oldPhantomTile,
-                groupOffset;
+                $newParentGroup;
 
             $oldPhantomTile = $phantomTile;
             $phantomTile = $oldPhantomTile.clone();
+            targetType = 'existing';
 
             // before or after, this is question ...
             if (tileUnderCursorSide === 'before') {
@@ -289,13 +391,65 @@ $(function(){
                 $phantomTile.insertAfter($tileUnderCursor);
             }
 
+            if (newGroupPhantom) {
+                newGroupPhantom.remove();
+            }
             $oldPhantomTile.remove();
-            // it is necessary to store new tile coordinates
+
+            // check if it was last tile in group and it drag out
+            if ($parentGroup.find('.tile').length === 0) {
+                $newParentGroup = $tileUnderCursor.parent('.tile-group');
+                if ($parentGroup[0] !== $newParentGroup[0]) {
+                    // and if it true, make parent group invisible
+                    $parentGroup.css({
+                        'width': 0,
+                        'margin': 0
+                    });
+                }
+            }
+            
+            $startMenu.trigger('changed');
+            storeAllNecessaryCoordinates();
+        };
+
+        /**
+         * makes visible new group place
+         * @param relGroup relative group
+         * @param side 'after' or 'before'
+         */
+        var showNewGroupPhantom = function (relGroup, side) {
+            if ($phantomTile) {
+                $phantomTile.remove()
+            }
+            if (newGroupPhantom) {
+                newGroupPhantom.remove();
+            }
+
+            newGroupPhantom = $('<div class="tile-group"></div>');
+            newGroupPhantom.css({
+                'height': groupsMaxHeight,
+                'width': '70px',
+                'backgroundColor': '#333333',
+                'position': 'relative'
+            });
+            relGroup[side](newGroupPhantom);
+            targetType = 'new';
+
+            // check if it was last tile in group and it drag out
+            if ($parentGroup.find('.tile').length === 0) {
+                $parentGroup.css({
+                    'width': 0,
+                    'margin': 0
+                });
+            }
+
+            $startMenu.trigger('changed');
+            storeAllNecessaryCoordinates();
+        };
+
+        var storeAllNecessaryCoordinates = function () {
             storeTilesCoordinates();
-            // and parent group coordinates
-            groupOffset = $parentGroup.offset();
-            groupOffsetX = groupOffset.left;
-            groupOffsetY = groupOffset.top;
+            storeNewGroupsCoordinates();
         };
 
         // return all groups involved to this plugin
@@ -309,24 +463,22 @@ $(function(){
 
     $.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);
-            }
-        });
+        //this.each(function() {
+        var group = $(this[0]);
+        if (undefined == group.data('TileDrag')) {
+            var plugin = new $.TileDrag(group, 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);
-    });
+    var allTileGroups = $('[data-role=tile-group], .tile-group');
+    if (allTileGroups.length > 0) {
+        $(allTileGroups).TileDrag({});
+    }
 });