angular-gridster2-1/dist/gridster.js

NPM package of angular-gridster2 for AngularJS

/*
 Angular Gridster 2
 (c) 2017 Tiberiu Zuld
 License: MIT
 */

(function () {
  'use strict';

  angular.module('angular-gridster2', []);

})();

(function () {
  'use strict';

  angular.module('angular-gridster2')
    .service('GridsterUtils', function () {
      function merge(obj1, obj2, properties) {
        for (var p in obj2) {
          if (obj2.hasOwnProperty(p) && properties.hasOwnProperty(p)) {
            if (typeof obj2[p] === 'object') {
              obj1[p] = merge(obj1[p], obj2[p], properties[p]);
            } else {
              obj1[p] = obj2[p];
            }
          }
        }

        return obj1;
      }

      function debounce(func, wait) {
        var timeout;
        return function () {
          var context = this, args = arguments;
          var later = function () {
            timeout = null;
            func.apply(context, args);
          };
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
        };
      }

      function checkTouchEvent(e) {
        if (e.clientX === undefined && e.touches) {
          if (e.touches && e.touches.length) {
            e.clientX = e.touches[0].clientX;
            e.clientY = e.touches[0].clientY;
          } else if (e.changedTouches && e.changedTouches.length) {
            e.clientX = e.changedTouches[0].clientX;
            e.clientY = e.changedTouches[0].clientY;
          }
        }
      }

      function checkContentClassForEvent(gridster, e) {
        if (gridster.$options.draggable.ignoreContent) {
          if (!checkContentClass(e.target, e.currentTarget, gridster.$options.draggable.dragHandleClass)) {
            return true;
          }
        } else {
          if (checkContentClass(e.target, e.currentTarget, gridster.$options.draggable.ignoreContentClass)) {
            return true;
          }
        }
        return false;
      }

      function checkContentClass(target, current, contentClass) {
        if (target === current) {
          return false;
        }
        if (target.classList && target.classList.contains(contentClass)) {
          return true;
        } else {
          return checkContentClass(target.parentNode, current, contentClass);
        }
      }

      return {
        merge: merge,
        debounce: debounce,
        checkTouchEvent: checkTouchEvent,
        checkContentClassForEvent: checkContentClassForEvent
      }
    });
})();

(function () {
  'use strict';

  angular.module('angular-gridster2')
    .service('GridsterSwap', function () {
      return function (gridsterItem) {
        var vm = this;
        vm.swapedItem = undefined;
        vm.gridsterItem = gridsterItem;
        vm.gridster = gridsterItem.gridster;

        vm.destroy = function () {
          delete vm.gridster;
          delete vm.gridsterItem;
          delete vm.swapedItem;
        };

        vm.swapItems = function () {
          if (vm.gridster.$options.swap) {
            vm.checkSwapBack();
            vm.checkSwap(vm.gridsterItem);
          }
        };

        vm.checkSwapBack = function () {
          if (vm.swapedItem) {
            var x = vm.swapedItem.$item.x;
            var y = vm.swapedItem.$item.y;
            vm.swapedItem.$item.x = vm.swapedItem.item.x;
            vm.swapedItem.$item.y = vm.swapedItem.item.y;
            if (vm.gridster.checkCollision(vm.swapedItem.$item)) {
              vm.swapedItem.$item.x = x;
              vm.swapedItem.$item.y = y;
            } else {
              vm.swapedItem.setSize(true);
              vm.gridsterItem.$item.x = vm.gridsterItem.item.x;
              vm.gridsterItem.$item.y = vm.gridsterItem.item.y;
              vm.swapedItem = undefined;
            }

          }
        };

        vm.restoreSwapItem = function () {
          if (vm.swapedItem) {
            vm.swapedItem.$item.x = vm.swapedItem.item.x;
            vm.swapedItem.$item.y = vm.swapedItem.item.y;
            vm.swapedItem.setSize(true);
            vm.swapedItem = undefined;
          }
        };

        vm.setSwapItem = function () {
          if (vm.swapedItem) {
            vm.swapedItem.checkItemChanges(vm.swapedItem.$item, vm.swapedItem.item);
            vm.swapedItem = undefined;
          }
        };

        vm.checkSwap = function (pushedBy) {
          var gridsterItemCollision = vm.gridster.checkCollision(pushedBy.$item);
          if (gridsterItemCollision && gridsterItemCollision !== true && gridsterItemCollision.canBeDragged()) {
            var gridsterItemCollide = gridsterItemCollision;
            var copyCollisionX = gridsterItemCollide.$item.x;
            var copyCollisionY = gridsterItemCollide.$item.y;
            var copyX = pushedBy.$item.x;
            var copyY = pushedBy.$item.y;
            gridsterItemCollide.$item.x = pushedBy.item.x;
            gridsterItemCollide.$item.y = pushedBy.item.y;
            pushedBy.$item.x = gridsterItemCollide.item.x;
            pushedBy.$item.y = gridsterItemCollide.item.y;
            if (vm.gridster.checkCollision(gridsterItemCollide.$item) || vm.gridster.checkCollision(pushedBy.$item)) {
              pushedBy.$item.x = copyX;
              pushedBy.$item.y = copyY;
              gridsterItemCollide.$item.x = copyCollisionX;
              gridsterItemCollide.$item.y = copyCollisionY;
            } else {
              gridsterItemCollide.setSize(true);
              vm.swapedItem = gridsterItemCollide;
            }
          }
        };
        return vm;
      }
    });
})();

(function () {
  'use strict';

  angular.module('angular-gridster2')
    .service('GridsterScroll', function () {
      var scrollSensitivity;
      var scrollSpeed;
      var intervalDuration = 50;
      var gridsterElement;
      var resizeEvent;
      var resizeEventType;
      var intervalE;
      var intervalW;
      var intervalN;
      var intervalS;

      function scroll(gridsterItem, e, lastMouse, calculateItemPosition, resize, resizeEventScrollType) {
        var vm = this;
        scrollSensitivity = gridsterItem.gridster.$options.scrollSensitivity;
        scrollSpeed = gridsterItem.gridster.$options.scrollSpeed;
        gridsterElement = gridsterItem.gridster.el;
        resizeEvent = resize;
        resizeEventType = resizeEventScrollType;

        var offsetWidth = gridsterElement.offsetWidth;
        var offsetHeight = gridsterElement.offsetHeight;
        var offsetLeft = gridsterElement.scrollLeft;
        var offsetTop = gridsterElement.scrollTop;
        var elemTopOffset = gridsterItem.nativeEl.offsetTop - offsetTop;
        var elemBottomOffset = offsetHeight + offsetTop - gridsterItem.nativeEl.offsetTop - gridsterItem.nativeEl.offsetHeight;
        if (lastMouse.clientY < e.clientY && elemBottomOffset < scrollSensitivity) {
          cancelN();
          if ((resizeEvent && resizeEventType && !resizeEventType.s) || intervalS) {
            return;
          }
          intervalS = startVertical(1, calculateItemPosition, lastMouse);
        } else if (lastMouse.clientY > e.clientY && offsetTop > 0 && elemTopOffset < scrollSensitivity) {
          cancelS();
          if ((resizeEvent && resizeEventType &&!resizeEventType.n) || intervalN) {
            return;
          }
          intervalN = startVertical(-1, calculateItemPosition, lastMouse);
        } else if (lastMouse.clientY !== e.clientY) {
          cancelVertical();
        }

        var elemRightOffset = offsetLeft + offsetWidth - gridsterItem.nativeEl.offsetLeft - gridsterItem.nativeEl.offsetWidth;
        var elemLeftOffset = gridsterItem.nativeEl.offsetLeft - offsetLeft;
        if (lastMouse.clientX < e.clientX && elemRightOffset <= scrollSensitivity) {
          cancelW();
          if ((resizeEvent && resizeEventType && !resizeEventType.e) || intervalE) {
            return;
          }
          intervalE = startHorizontal(1, calculateItemPosition, lastMouse);
        } else if (lastMouse.clientX > e.clientX && offsetLeft > 0 && elemLeftOffset < scrollSensitivity) {
          cancelE();
          if ((resizeEvent && resizeEventType && !resizeEventType.w) || intervalW) {
            return;
          }
          intervalW = startHorizontal(-1, calculateItemPosition, lastMouse);
        } else if (lastMouse.clientX !== e.clientX) {
          cancelHorizontal();
        }
        return vm;
      }

      scroll.cancelScroll = cancelScroll;
      return scroll;

      function startVertical(sign, calculateItemPosition, lastMouse) {
        var clientY = lastMouse.clientY;
        return setInterval(function () {
          if (!gridsterElement || sign === -1 && gridsterElement.scrollTop - scrollSpeed < 0) {
            cancelVertical();
          }
          gridsterElement.scrollTop += sign * scrollSpeed;
          clientY += sign * scrollSpeed;
          calculateItemPosition({clientX: lastMouse.clientX, clientY: clientY});
        }, intervalDuration);
      }

      function startHorizontal(sign, calculateItemPosition, lastMouse) {
        var clientX = lastMouse.clientX;
        return setInterval(function () {
          if (!gridsterElement || sign === -1 && gridsterElement.scrollLeft - scrollSpeed < 0) {
            cancelHorizontal();
          }
          gridsterElement.scrollLeft += sign * scrollSpeed;
          clientX += sign * scrollSpeed;
          calculateItemPosition({clientX: clientX, clientY: lastMouse.clientY});
        }, intervalDuration);
      }

      function cancelScroll() {
        cancelHorizontal();
        cancelVertical();
        scrollSensitivity = undefined;
        scrollSpeed = undefined;
        gridsterElement = undefined;
        resizeEventType = undefined;
      }

      function cancelHorizontal() {
        cancelE();
        cancelW();
      }

      function cancelVertical() {
        cancelN();
        cancelS();
      }

      function cancelE() {
        if (intervalE) {
          clearInterval(intervalE);
          intervalE = undefined;
        }
      }

      function cancelW() {
        if (intervalW) {
          clearInterval(intervalW);
          intervalW = undefined;
        }
      }

      function cancelS() {
        if (intervalS) {
          clearInterval(intervalS);
          intervalS = undefined;
        }
      }

      function cancelN() {
        if (intervalN) {
          clearInterval(intervalN);
          intervalN = undefined;
        }
      }

    });
})();

(function () {
  'use strict';

  GridsterResizable.$inject = ["GridsterPush", "GridsterScroll", "GridsterUtils", "GridsterPushResize"];
  angular.module('angular-gridster2')
    .service('GridsterResizable', GridsterResizable);

  /** @ngInject */
  function GridsterResizable(GridsterPush, GridsterScroll, GridsterUtils, GridsterPushResize) {
    return function (gridsterItem, gridster) {
      var vm = this;

      vm.directionFunction = angular.noop;
      vm.dragStartFunction = angular.noop;
      vm.dragFunction = angular.noop;
      vm.dragStopFunction = angular.noop;
      vm.resizeEnabled = false;
      vm.push = undefined;
      vm.pushResize = undefined;
      vm.minHeight = 0;
      vm.minWidth = 0;
      vm.offsetTop = 0;
      vm.offsetLeft = 0;
      vm.diffTop = 0;
      vm.diffLeft = 0;
      vm.diffRight = 0;
      vm.diffBottom = 0;
      vm.margin = 0;
      vm.top = 0;
      vm.left = 0;
      vm.bottom = 0;
      vm.right = 0;
      vm.width = 0;
      vm.height = 0;
      vm.newPosition = 0;

      vm.gridsterItem = gridsterItem;
      vm.gridster = gridster;
      vm.lastMouse = {
        clientX: 0,
        clientY: 0
      };
      vm.itemBackup = [0, 0, 0, 0];
      vm.resizeEventScrollType = {
        w: false,
        e: false,
        n: false,
        s: false
      };

      vm.destroy = function () {
        delete vm.gridster;
        delete vm.gridsterItem;
      };

      vm.dragStart = function (e) {
        switch (e.which) {
          case 1:
            // left mouse button
            break;
          case 2:
          case 3:
            // right or middle mouse button
            return;
        }
        if (vm.gridster.$options.resizable.start) {
          vm.gridster.$options.resizable.start(vm.gridsterItem.item, vm.gridsterItem, e);
        }
        e.stopPropagation();
        e.preventDefault();
        vm.dragFunction = vm.dragMove.bind(vm);
        vm.dragStopFunction = vm.dragStop.bind(vm);
        document.addEventListener('mousemove', vm.dragFunction);
        document.addEventListener('mouseup', vm.dragStopFunction);
        window.addEventListener('blur', vm.dragStopFunction);
        vm.gridster.el.addEventListener('touchmove', vm.dragFunction);
        document.addEventListener('touchend', vm.dragStopFunction);
        document.addEventListener('touchcancel', vm.dragStopFunction);
        vm.gridsterItem.el.addClass('gridster-item-resizing');
        vm.lastMouse.clientX = e.clientX;
        vm.lastMouse.clientY = e.clientY;
        vm.left = vm.gridsterItem.left;
        vm.top = vm.gridsterItem.top;
        vm.width = vm.gridsterItem.width;
        vm.height = vm.gridsterItem.height;
        vm.bottom = vm.gridsterItem.top + vm.gridsterItem.height;
        vm.right = vm.gridsterItem.left + vm.gridsterItem.width;
        vm.margin = vm.gridster.$options.margin;
        vm.offsetLeft = vm.gridster.el.scrollLeft - vm.gridster.el.offsetLeft;
        vm.offsetTop = vm.gridster.el.scrollTop - vm.gridster.el.offsetTop;
        vm.diffLeft = e.clientX + vm.offsetLeft - vm.margin - vm.left;
        vm.diffRight = e.clientX + vm.offsetLeft - vm.margin - vm.right;
        vm.diffTop = e.clientY + vm.offsetTop - vm.margin - vm.top;
        vm.diffBottom = e.clientY + vm.offsetTop - vm.margin - vm.bottom;
        vm.minHeight = vm.gridster.positionYToPixels(vm.gridsterItem.$item.minItemRows ||
          vm.gridster.$options.minItemRows) - vm.margin;
        vm.minWidth = vm.gridster.positionXToPixels(vm.gridsterItem.$item.minItemCols ||
          vm.gridster.$options.minItemCols) - vm.margin;
        vm.gridster.movingItem = vm.gridsterItem.$item;
        vm.gridster.previewStyle();
        vm.push = new GridsterPush(vm.gridsterItem);
        vm.pushResize = new GridsterPushResize(vm.gridsterItem);
        vm.gridster.dragInProgress = true;
        vm.gridster.gridLines.updateGrid();

        if (e.target.classList.contains('handle-n')) {
          vm.resizeEventScrollType.n = true;
          vm.directionFunction = vm.handleN.bind(vm);
        } else if (e.target.classList.contains('handle-w')) {
          vm.resizeEventScrollType.w = true;
          vm.directionFunction = vm.handleW.bind(vm);
        } else if (e.target.classList.contains('handle-s')) {
          vm.resizeEventScrollType.s = true;
          vm.directionFunction = vm.handleS.bind(vm);
        } else if (e.target.classList.contains('handle-e')) {
          vm.resizeEventScrollType.e = true;
          vm.directionFunction = vm.handleE.bind(vm);
        } else if (e.target.classList.contains('handle-nw')) {
          vm.resizeEventScrollType.n = true;
          vm.resizeEventScrollType.w = true;
          vm.directionFunction = vm.handleNW.bind(vm);
        } else if (e.target.classList.contains('handle-ne')) {
          vm.resizeEventScrollType.n = true;
          vm.resizeEventScrollType.e = true;
          vm.directionFunction = vm.handleNE.bind(vm);
        } else if (e.target.classList.contains('handle-sw')) {
          vm.resizeEventScrollType.s = true;
          vm.resizeEventScrollType.w = true;
          vm.directionFunction = vm.handleSW.bind(vm);
        } else if (e.target.classList.contains('handle-se')) {
          vm.resizeEventScrollType.s = true;
          vm.resizeEventScrollType.e = true;
          vm.directionFunction = vm.handleSE.bind(vm);
        }
      };

      vm.dragMove = function (e) {
        e.stopPropagation();
        e.preventDefault();
        GridsterUtils.checkTouchEvent(e);
        vm.offsetTop = vm.gridster.el.scrollTop - vm.gridster.el.offsetTop;
        vm.offsetLeft = vm.gridster.el.scrollLeft - vm.gridster.el.offsetLeft;
        GridsterScroll(vm.gridsterItem, e, vm.lastMouse, vm.directionFunction, true, vm.resizeEventScrollType);
        vm.directionFunction(e);

        vm.lastMouse.clientX = e.clientX;
        vm.lastMouse.clientY = e.clientY;
        vm.gridster.gridLines.updateGrid();
      };

      vm.dragStop = function (e) {
        e.stopPropagation();
        e.preventDefault();
        GridsterScroll.cancelScroll();
        document.removeEventListener('mousemove', vm.dragFunction);
        document.removeEventListener('mouseup', vm.dragStopFunction);
        window.removeEventListener('blur', vm.dragStopFunction);
        vm.gridster.el.removeEventListener('touchmove', vm.dragFunction);
        document.removeEventListener('touchend', vm.dragStopFunction);
        document.removeEventListener('touchcancel', vm.dragStopFunction);
        vm.gridsterItem.el.removeClass('gridster-item-resizing');
        vm.gridster.dragInProgress = false;
        vm.gridster.gridLines.updateGrid();
        if (vm.gridster.$options.resizable.stop) {
          var promise = vm.gridster.$options.resizable.stop(vm.gridsterItem.item, vm.gridsterItem, e);
          if (promise && promise.then) {
            promise.then(vm.makeResize.bind(vm), vm.cancelResize.bind(vm));
          } else {
            vm.makeResize();
          }
        } else {
          vm.makeResize();
        }
        setTimeout(function () {
          vm.gridster.movingItem = null;
          vm.gridster.previewStyle();
        });
      };

      vm.cancelResize = function () {
        vm.gridsterItem.$item.cols = vm.gridsterItem.item.cols;
        vm.gridsterItem.$item.rows = vm.gridsterItem.item.rows;
        vm.gridsterItem.$item.x = vm.gridsterItem.item.x;
        vm.gridsterItem.$item.y = vm.gridsterItem.item.y;
        vm.gridsterItem.setSize(true);
        vm.push.restoreItems();
        vm.pushResize.restoreItems();
        vm.push.destroy();
        delete vm.push;
        vm.pushResize.destroy();
        delete vm.pushResize;
      };

      vm.makeResize = function () {
        vm.gridsterItem.setSize(true);
        vm.gridsterItem.checkItemChanges(vm.gridsterItem.$item, vm.gridsterItem.item);
        vm.push.setPushedItems();
        vm.pushResize.setPushedItems();
        vm.push.destroy();
        delete vm.push;
        vm.pushResize.destroy();
        delete vm.pushResize;
      };

      vm.handleN = function (e) {
        vm.top = e.clientY + vm.offsetTop - vm.margin - vm.diffTop;
        vm.height = vm.bottom - vm.top;
        if (vm.minHeight > vm.height) {
          vm.height = vm.minHeight;
          vm.top = vm.bottom - vm.minHeight;
        }
        vm.newPosition = vm.gridster.pixelsToPositionY(vm.top, Math.floor);
        if (vm.gridsterItem.$item.y !== vm.newPosition) {
          vm.itemBackup[1] = vm.gridsterItem.$item.y;
          vm.itemBackup[3] = vm.gridsterItem.$item.rows;
          vm.gridsterItem.$item.rows += vm.gridsterItem.$item.y - vm.newPosition;
          vm.gridsterItem.$item.y = vm.newPosition;
          vm.pushResize.pushItems(vm.pushResize.fromSouth, vm.gridster.$options.disablePushOnResize);
          vm.push.pushItems(vm.push.fromSouth);
          if (vm.gridster.checkCollision(vm.gridsterItem.$item)) {
            vm.gridsterItem.$item.y = vm.itemBackup[1];
            vm.gridsterItem.$item.rows = vm.itemBackup[3];
            vm.gridsterItem.el.css('top', vm.gridster.positionYToPixels(vm.gridsterItem.$item.y) + 'px');
            vm.gridsterItem.el.css('height', vm.gridster.positionYToPixels(vm.gridsterItem.$item.rows)
              - vm.gridster.$options.margin + 'px');
            return;
          } else {
            vm.gridster.previewStyle();
          }
          vm.pushResize.checkPushBack();
          vm.push.checkPushBack();
        }
        vm.gridsterItem.el.css('top', vm.top + 'px');
        vm.gridsterItem.el.css('height', vm.height + 'px');
      };

      vm.handleW = function (e) {
        vm.left = e.clientX + vm.offsetLeft - vm.margin - vm.diffLeft;
        vm.width = vm.right - vm.left;
        if (vm.minWidth > vm.width) {
          vm.width = vm.minWidth;
          vm.left = vm.right - vm.minWidth;
        }
        vm.newPosition = vm.gridster.pixelsToPositionX(vm.left, Math.floor);
        if (vm.gridsterItem.$item.x !== vm.newPosition) {
          vm.itemBackup[0] = vm.gridsterItem.$item.x;
          vm.itemBackup[2] = vm.gridsterItem.$item.cols;
          vm.gridsterItem.$item.cols += vm.gridsterItem.$item.x - vm.newPosition;
          vm.gridsterItem.$item.x = vm.newPosition;
          vm.pushResize.pushItems(vm.pushResize.fromEast);
          vm.push.pushItems(vm.push.fromEast, vm.gridster.$options.disablePushOnResize);
          if (vm.gridster.checkCollision(vm.gridsterItem.$item)) {
            vm.gridsterItem.$item.x = vm.itemBackup[0];
            vm.gridsterItem.$item.cols = vm.itemBackup[2];
            vm.gridsterItem.el.css('left',
              vm.gridster.positionXToPixels(vm.gridsterItem.$item.x) + 'px');
            vm.gridsterItem.el.css('width', vm.gridster.positionXToPixels(vm.gridsterItem.$item.cols)
              - vm.gridster.$options.margin + 'px');
            return;
          } else {
            vm.gridster.previewStyle();
          }
          vm.pushResize.checkPushBack();
          vm.push.checkPushBack();
        }
        vm.gridsterItem.el.css('left', vm.left + 'px');
        vm.gridsterItem.el.css('width', vm.width + 'px');
      };

      vm.handleS = function (e) {
        vm.height = e.clientY + vm.offsetTop - vm.margin - vm.diffBottom - vm.top;
        if (vm.minHeight > vm.height) {
          vm.height = vm.minHeight;
        }
        vm.bottom = vm.top + vm.height;
        vm.newPosition = vm.gridster.pixelsToPositionY(vm.bottom, Math.ceil);
        if ((vm.gridsterItem.$item.y + vm.gridsterItem.$item.rows) !== vm.newPosition) {
          vm.itemBackup[3] = vm.gridsterItem.$item.rows;
          vm.gridsterItem.$item.rows = vm.newPosition - vm.gridsterItem.$item.y;
          vm.pushResize.pushItems(vm.pushResize.fromNorth);
          vm.push.pushItems(vm.push.fromNorth, vm.gridster.$options.disablePushOnResize);
          if (vm.gridster.checkCollision(vm.gridsterItem.$item)) {
            vm.gridsterItem.$item.rows = vm.itemBackup[3];
            vm.gridsterItem.el.css('height', vm.gridster.positionYToPixels(vm.gridsterItem.$item.rows)
              - vm.gridster.$options.margin + 'px');
            return;
          } else {
            vm.gridster.previewStyle();
          }
          vm.pushResize.checkPushBack();
          vm.push.checkPushBack();
        }
        vm.gridsterItem.el.css('height', vm.height + 'px');
      };

      vm.handleE = function (e) {
        vm.width = e.clientX + vm.offsetLeft - vm.margin - vm.diffRight - vm.left;
        if (vm.minWidth > vm.width) {
          vm.width = vm.minWidth;
        }
        vm.right = vm.left + vm.width;
        vm.newPosition = vm.gridster.pixelsToPositionX(vm.right, Math.ceil);
        if ((vm.gridsterItem.$item.x + vm.gridsterItem.$item.cols) !== vm.newPosition) {
          vm.itemBackup[2] = vm.gridsterItem.$item.cols;
          vm.gridsterItem.$item.cols = vm.newPosition - vm.gridsterItem.$item.x;
          vm.pushResize.pushItems(vm.pushResize.fromWest);
          vm.push.pushItems(vm.push.fromWest, vm.gridster.$options.disablePushOnResize);
          if (vm.gridster.checkCollision(vm.gridsterItem.$item)) {
            vm.gridsterItem.$item.cols = vm.itemBackup[2];
            vm.gridsterItem.el.css('width', vm.gridster.positionXToPixels(vm.gridsterItem.$item.cols)
              - vm.gridster.$options.margin + 'px');
            return;
          } else {
            vm.gridster.previewStyle();
          }
          vm.pushResize.checkPushBack();
          vm.push.checkPushBack();
        }
        vm.gridsterItem.el.css('width', vm.width + 'px');
      };

      vm.handleNW = function (e) {
        vm.handleN(e);
        vm.handleW(e);
      };

      vm.handleNE = function (e) {
        vm.handleN(e);
        vm.handleE(e);
      };

      vm.handleSW = function (e) {
        vm.handleS(e);
        vm.handleW(e);
      };

      vm.handleSE = function (e) {
        vm.handleS(e);
        vm.handleE(e);
      };

      vm.toggle = function () {
        var handlers, handler, i;
        var enableDrag = vm.gridsterItem.canBeResized();
        if (!vm.resizeEnabled && enableDrag) {
          vm.resizeEnabled = !vm.resizeEnabled;
          vm.dragStartFunction = vm.dragStartDelay;
          handlers = vm.gridsterItem.nativeEl.querySelectorAll('.gridster-item-resizable-handler');
          i = handlers.length - 1;
          for (; i > -1; i--) {
            handler = handlers[i];
            handler.addEventListener('mousedown', vm.dragStartFunction);
            handler.addEventListener('touchstart', vm.dragStartFunction);
          }
        } else if (vm.resizeEnabled && !enableDrag) {
          vm.resizeEnabled = !vm.resizeEnabled;
          handlers = vm.gridsterItem.nativeEl.querySelectorAll('.gridster-item-resizable-handler');
          i = handlers.length - 1;
          for (; i > -1; i--) {
            handler = handlers[i];
            handler.removeEventListener('mousedown', vm.dragStartFunction);
            handler.removeEventListener('touchstart', vm.dragStartFunction);
          }
        }
      };


      vm.dragStartDelay = function (e) {
        GridsterUtils.checkTouchEvent(e);
        if (!vm.gridster.$options.resizable.delayStart) {
          vm.dragStart(e);
          return;
        }
        var timeout = setTimeout(function () {
          vm.dragStart(e);
          cancelDrag();
        }, vm.gridster.$options.resizable.delayStart);
        document.addEventListener('mouseup', cancelDrag);
        window.addEventListener('blur', cancelDrag);
        document.addEventListener('touchmove', cancelMove);
        document.addEventListener('touchend', cancelDrag);
        document.addEventListener('touchcancel', cancelDrag);

        function cancelMove(eventMove) {
          GridsterUtils.checkTouchEvent(eventMove);
          if (Math.abs(eventMove.clientX - e.clientX) > 9 || Math.abs(eventMove.clientY - e.clientY) > 9) {
            cancelDrag();
          }
        }

        function cancelDrag() {
          clearTimeout(timeout);
          window.removeEventListener('blur', cancelDrag);
          document.removeEventListener('mouseup', cancelDrag);
          document.removeEventListener('touchmove', cancelMove);
          document.removeEventListener('touchend', cancelDrag);
          document.removeEventListener('touchcancel', cancelDrag);
        }
      }
    };
  }
})();

(function () {
  'use strict';

  angular.module('angular-gridster2')
    .service('GridsterPushResize', GridsterPushResize);

  /** @ngInject */
  function GridsterPushResize() {
    return function (gridsterItem) {
      var vm = this;
      vm.pushedItems = [];
      vm.pushedItemsPath = [];
      vm.gridsterItem = gridsterItem;
      vm.gridster = gridsterItem.gridster;

      vm.fromSouth = 'fromSouth';
      vm.fromNorth = 'fromNorth';
      vm.fromEast = 'fromEast';
      vm.fromWest = 'fromWest';

      vm.destroy = function () {
        delete vm.gridster;
        delete vm.gridsterItem;
      };

      vm.pushItems = function (direction) {
        if (vm.gridster.$options.pushResizeItems) {
          vm.push(vm.gridsterItem, direction);
        }
      };

      vm.restoreItems = function () {
        var i = 0;
        var l = vm.pushedItems.length;
        var pushedItem;
        for (; i < l; i++) {
          pushedItem = vm.pushedItems[i];
          pushedItem.$item.x = pushedItem.item.x;
          pushedItem.$item.y = pushedItem.item.y;
          pushedItem.$item.cols = pushedItem.item.cols;
          pushedItem.$item.row = pushedItem.item.row;
          pushedItem.setSize(true);
        }
        vm.pushedItems = undefined;
        vm.pushedItemsPath = undefined;
      };

      vm.setPushedItems = function () {
        var i = 0;
        var l = vm.pushedItems.length;
        var pushedItem;
        for (; i < l; i++) {
          pushedItem = vm.pushedItems[i];
          pushedItem.checkItemChanges(pushedItem.$item, pushedItem.item);
        }
        vm.pushedItems = undefined;
        vm.pushedItemsPath = undefined;
      };

      vm.push = function (gridsterItem, direction) {
        var gridsterItemCollision = vm.gridster.checkCollision(gridsterItem.$item);
        if (gridsterItemCollision && gridsterItemCollision !== true &&
          gridsterItemCollision !== vm.gridsterItem && gridsterItemCollision.canBeResized()) {
          if (vm.tryPattern[direction].call(vm, gridsterItemCollision, gridsterItem, direction)) {
            return true;
          }
        } else if (gridsterItemCollision === false) {
          return true;
        }
        return false;
      };

      vm.trySouth = function (gridsterItemCollide, gridsterItem, direction) {
        var backUpY = gridsterItemCollide.$item.y;
        var backUpRows = gridsterItemCollide.$item.rows;
        gridsterItemCollide.$item.y = gridsterItem.$item.y + gridsterItem.$item.rows;
        gridsterItemCollide.$item.rows = backUpRows + backUpY - gridsterItemCollide.$item.y;
        if (!vm.gridster.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item)
          && !vm.gridster.checkGridCollision(gridsterItemCollide.$item)) {
          gridsterItemCollide.setSize(true);
          vm.addToPushed(gridsterItemCollide);
          vm.push(gridsterItem, direction);
          return true;
        } else {
          gridsterItemCollide.$item.y = backUpY;
          gridsterItemCollide.$item.rows = backUpRows;
        }
        return false;
      };

      vm.tryNorth = function (gridsterItemCollide, gridsterItem, direction) {
        var backUpRows = gridsterItemCollide.$item.rows;
        gridsterItemCollide.$item.rows = gridsterItem.$item.y - gridsterItemCollide.$item.y;
        if (!vm.gridster.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item)
          && !vm.gridster.checkGridCollision(gridsterItemCollide.$item)) {
          gridsterItemCollide.setSize(true);
          vm.addToPushed(gridsterItemCollide);
          vm.push(gridsterItem, direction);
          return true;
        } else {
          gridsterItemCollide.$item.rows = backUpRows;
        }
        return false;
      };

      vm.tryEast = function (gridsterItemCollide, gridsterItem, direction) {
        var backUpX = gridsterItemCollide.$item.x;
        var backUpCols = gridsterItemCollide.$item.cols;
        gridsterItemCollide.$item.x = gridsterItem.$item.x + gridsterItem.$item.cols;
        gridsterItemCollide.$item.cols = backUpCols + backUpX - gridsterItemCollide.$item.x;
        if (!vm.gridster.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item)
          && !vm.gridster.checkGridCollision(gridsterItemCollide.$item)) {
          gridsterItemCollide.setSize(true);
          vm.addToPushed(gridsterItemCollide);
          vm.push(gridsterItem, direction);
          return true;
        } else {
          gridsterItemCollide.$item.x = backUpX;
          gridsterItemCollide.$item.cols = backUpCols;
        }
        return false;
      };

      vm.tryWest = function (gridsterItemCollide, gridsterItem, direction) {
        var backUpCols = gridsterItemCollide.$item.cols;
        gridsterItemCollide.$item.cols = gridsterItem.$item.x - gridsterItemCollide.$item.x;
        if (!vm.gridster.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item)
          && !vm.gridster.checkGridCollision(gridsterItemCollide.$item)) {
          gridsterItemCollide.setSize(true);
          vm.addToPushed(gridsterItemCollide);
          vm.push(gridsterItem, direction);
          return true;
        } else {
          gridsterItemCollide.$item.cols = backUpCols;
        }
        return false;
      };

      vm.tryPattern = {
        fromEast: vm.tryWest,
        fromWest: vm.tryEast,
        fromNorth: vm.trySouth,
        fromSouth: vm.tryNorth
      };

      vm.addToPushed = function (gridsterItem) {
        if (vm.pushedItems.indexOf(gridsterItem) < 0) {
          vm.pushedItems.push(gridsterItem);
          vm.pushedItemsPath.push([
            {
              x: gridsterItem.item.x,
              y: gridsterItem.item.y,
              cols: gridsterItem.item.cols,
              rows: gridsterItem.item.rows
            },
            {
              x: gridsterItem.$item.x,
              y: gridsterItem.$item.y,
              cols: gridsterItem.$item.cols,
              rows: gridsterItem.$item.rows
            }]);
        } else {
          var i = vm.pushedItems.indexOf(gridsterItem);
          vm.pushedItemsPath[i].push(
            {
              x: gridsterItem.$item.x,
              y: gridsterItem.$item.y,
              cols: gridsterItem.$item.cols,
              rows: gridsterItem.$item.rows
            });
        }
      };

      vm.removeFromPushed = function (i) {
        if (i > -1) {
          vm.pushedItems.splice(i, 1);
          vm.pushedItemsPath.splice(i, 1);
        }
      };

      vm.checkPushBack = function () {
        var i = vm.pushedItems.length - 1;
        var change = false;
        for (; i > -1; i--) {
          if (vm.checkPushedItem(vm.pushedItems[i], i)) {
            change = true;
          }
        }
        if (change) {
          vm.checkPushBack();
        }
      };

      vm.checkPushedItem = function (pushedItem, i) {
        var path = vm.pushedItemsPath[i];
        var j = path.length - 2;
        var lastPosition, x, y, cols, rows;
        for (; j > -1; j--) {
          lastPosition = path[j];
          x = pushedItem.$item.x;
          y = pushedItem.$item.y;
          cols = pushedItem.$item.cols;
          rows = pushedItem.$item.rows;
          pushedItem.$item.x = lastPosition.x;
          pushedItem.$item.y = lastPosition.y;
          pushedItem.$item.cols = lastPosition.cols;
          pushedItem.$item.rows = lastPosition.rows;
          if (!vm.gridster.findItemWithItem(pushedItem.$item)) {
            pushedItem.setSize(true);
            path.splice(j + 1, path.length - 1 - j);
          } else {
            pushedItem.$item.x = x;
            pushedItem.$item.y = y;
            pushedItem.$item.cols = cols;
            pushedItem.$item.rows = rows;
          }
        }
        if (path.length < 2) {
          vm.removeFromPushed(i);
          return true;
        }
        return false;
      }
    }
  }
})();

(function () {
  'use strict';

  angular.module('angular-gridster2')
    .service('GridsterPush', GridsterPush);

  /** @ngInject */
  function GridsterPush() {
    return function (gridsterItem) {
      var vm = this;

      vm.pushedItems = [];
      vm.pushedItemsPath = [];
      vm.pushedItemsTemp = [];
      vm.pushedItemsTempPath = [];
      vm.gridsterItem = gridsterItem;
      vm.gridster = gridsterItem.gridster;
      vm.fromSouth = 'fromSouth';
      vm.fromNorth = 'fromNorth';
      vm.fromEast = 'fromEast';
      vm.fromWest = 'fromWest';

      vm.destroy = function () {
        delete vm.gridster;
        delete vm.gridsterItem;
      };

      vm.pushItems = function (direction, disabled) {
        if (vm.gridster.$options.pushItems && !disabled) {
          vm.pushedItemsOrder = [];
          if (!vm.push(vm.gridsterItem, direction)) {
            vm.restoreTempItems();
          }
          vm.pushedItemsOrder = [];
          vm.pushedItemsTemp = [];
          vm.pushedItemsTempPath = [];
        }
      };

      vm.restoreTempItems = function () {
        var i = vm.pushedItemsTemp.length - 1;
        for (; i > -1; i--) {
          vm.removeFromTempPushed(vm.pushedItemsTemp[i]);
        }
      };

      vm.restoreItems = function () {
        var i = 0;
        var l = vm.pushedItems.length;
        var pushedItem;
        for (; i < l; i++) {
          pushedItem = vm.pushedItems[i];
          pushedItem.$item.x = pushedItem.item.x;
          pushedItem.$item.y = pushedItem.item.y;
          pushedItem.setSize(true);
        }
        vm.pushedItems = undefined;
        vm.pushedItemsPath = undefined;
      };

      vm.setPushedItems = function () {
        var i = 0;
        var l = vm.pushedItems.length;
        var pushedItem;
        for (; i < l; i++) {
          pushedItem = vm.pushedItems[i];
          pushedItem.checkItemChanges(pushedItem.$item, pushedItem.item);
        }
        vm.pushedItems = undefined;
        vm.pushedItemsPath = undefined;
      };

      vm.push = function (gridsterItem, direction) {
        if (vm.gridster.checkGridCollision(gridsterItem.$item)) {
          return false;
        }
        var a = vm.gridster.findItemsWithItem(gridsterItem.$item);
        var i = a.length - 1, itemCollision;
        var makePush = true;
        var b = [];
        for (; i > -1; i--) {
          itemCollision = a[i];
          if (itemCollision === vm.gridsterItem) {
            makePush = false;
            break;
          }
          if (!itemCollision.canBeDragged()) {
            makePush = false;
            break;
          }
          if (vm.pushedItemsTemp.indexOf(itemCollision) > -1) {
            makePush = false;
            break;
          }
          if (vm.tryPattern[direction][0].call(vm, itemCollision, gridsterItem)) {
            vm.pushedItemsOrder.push(itemCollision);
            b.push(itemCollision);
          } else if (vm.tryPattern[direction][1].call(vm, itemCollision, gridsterItem)) {
            vm.pushedItemsOrder.push(itemCollision);
            b.push(itemCollision);
          } else if (vm.tryPattern[direction][2].call(vm, itemCollision, gridsterItem)) {
            vm.pushedItemsOrder.push(itemCollision);
            b.push(itemCollision);
          } else if (vm.tryPattern[direction][3].call(vm, itemCollision, gridsterItem)) {
            vm.pushedItemsOrder.push(itemCollision);
            b.push(itemCollision);
          } else {
            makePush = false;
            break;
          }
        }
        if (!makePush) {
          i = vm.pushedItemsOrder.lastIndexOf(b[0]);
          if (i > -1) {
            var j = vm.pushedItemsOrder.length - 1;
            for (; j >= i; j--) {
              itemCollision = vm.pushedItemsOrder[j];
              vm.pushedItemsOrder.pop();
              vm.removeFromTempPushed(itemCollision);
              vm.removeFromPushedItem(itemCollision);
            }
          }
        }
        return makePush;
      };

      vm.trySouth = function (gridsterItemCollide, gridsterItem) {
        if (!vm.gridster.$options.pushDirections.south) {
          return false;
        }
        vm.addToTempPushed(gridsterItemCollide);
        gridsterItemCollide.$item.y = gridsterItem.$item.y + gridsterItem.$item.rows;
        if (vm.push(gridsterItemCollide, vm.fromNorth)) {
          gridsterItemCollide.setSize(true);
          vm.addToPushed(gridsterItemCollide);
          return true;
        } else {
          vm.removeFromTempPushed(gridsterItemCollide);
        }
        return false;
      };

      vm.tryNorth = function (gridsterItemCollide, gridsterItem) {
        if (!vm.gridster.$options.pushDirections.north) {
          return false;
        }
        vm.addToTempPushed(gridsterItemCollide);
        gridsterItemCollide.$item.y = gridsterItem.$item.y - gridsterItemCollide.$item.rows;
        if (vm.push(gridsterItemCollide, vm.fromSouth)) {
          gridsterItemCollide.setSize(true);
          vm.addToPushed(gridsterItemCollide);
          return true;
        } else {
          vm.removeFromTempPushed(gridsterItemCollide);
        }
        return false;
      };

      vm.tryEast = function (gridsterItemCollide, gridsterItem) {
        if (!vm.gridster.$options.pushDirections.east) {
          return false;
        }
        vm.addToTempPushed(gridsterItemCollide);
        gridsterItemCollide.$item.x = gridsterItem.$item.x + gridsterItem.$item.cols;
        if (vm.push(gridsterItemCollide, vm.fromWest)) {
          gridsterItemCollide.setSize(true);
          vm.addToPushed(gridsterItemCollide);
          return true;
        } else {
          vm.removeFromTempPushed(gridsterItemCollide);
        }
        return false;
      };

      vm.tryWest = function (gridsterItemCollide, gridsterItem) {
        if (!vm.gridster.$options.pushDirections.west) {
          return false;
        }
        vm.addToTempPushed(gridsterItemCollide);
        gridsterItemCollide.$item.x = gridsterItem.$item.x - gridsterItemCollide.$item.cols;
        if (vm.push(gridsterItemCollide, vm.fromEast)) {
          gridsterItemCollide.setSize(true);
          vm.addToPushed(gridsterItemCollide);
          return true;
        } else {
          vm.removeFromTempPushed(gridsterItemCollide);
        }
        return false;
      };

      vm.tryPattern = {
        fromEast: [vm.tryWest, vm.trySouth, vm.tryNorth, vm.tryEast],
        fromWest: [vm.tryEast, vm.trySouth, vm.tryNorth, vm.tryWest],
        fromNorth: [vm.trySouth, vm.tryEast, vm.tryWest, vm.tryNorth],
        fromSouth: [vm.tryNorth, vm.tryEast, vm.tryWest, vm.trySouth]
      };

      vm.addToTempPushed = function (gridsterItem) {
        var i = vm.pushedItemsTemp.indexOf(gridsterItem);
        if (i === -1) {
          i = vm.pushedItemsTemp.push(gridsterItem) - 1;
          vm.pushedItemsTempPath[i] = [];
        }
        vm.pushedItemsTempPath[i].push({x: gridsterItem.$item.x, y: gridsterItem.$item.y});
      };

      vm.removeFromTempPushed = function (gridsterItem) {
        var i = vm.pushedItemsTemp.indexOf(gridsterItem);
        var tempPosition = vm.pushedItemsTempPath[i].pop();
        if (!tempPosition) {
          return;
        }
        gridsterItem.$item.x = tempPosition.x;
        gridsterItem.$item.y = tempPosition.y;
        gridsterItem.setSize(true);
        if (!vm.pushedItemsTempPath[i].length) {
          vm.pushedItemsTemp.splice(i, 1);
          vm.pushedItemsTempPath.splice(i, 1);
        }
      };

      vm.checkInTempPushed = function (gridsterItem) {
        return vm.pushedItemsTemp.indexOf(gridsterItem) > -1;
      };

      vm.addToPushed = function (gridsterItem) {
        if (vm.pushedItems.indexOf(gridsterItem) < 0) {
          vm.pushedItems.push(gridsterItem);
          vm.pushedItemsPath.push([{x: gridsterItem.item.x, y: gridsterItem.item.y}, {
            x: gridsterItem.$item.x,
            y: gridsterItem.$item.y
          }]);
        } else {
          var i = vm.pushedItems.indexOf(gridsterItem);
          vm.pushedItemsPath[i].push({x: gridsterItem.$item.x, y: gridsterItem.$item.y});
        }
      };

      vm.removeFromPushed = function (i) {
        if (i > -1) {
          vm.pushedItems.splice(i, 1);
          vm.pushedItemsPath.splice(i, 1);
        }
      };

      vm.checkPushBack = function () {
        var i = vm.pushedItems.length - 1;
        var change = false;
        for (; i > -1; i--) {
          if (vm.checkPushedItem(vm.pushedItems[i], i)) {
            change = true;
          }
        }
        if (change) {
          vm.checkPushBack();
        }
      };

      vm.removeFromPushedItem = function (gridsterItem) {
        var i = vm.pushedItems.indexOf(gridsterItem);
        if (i > -1) {
          vm.pushedItemsPath[i].pop();
          if (!vm.pushedItemsPath.length) {
            vm.pushedItems.splice(i, 1);
            vm.pushedItemsPath.splice(i, 1);
          }
        }
      };

      vm.checkPushedItem = function (pushedItem, i) {
        var path = vm.pushedItemsPath[i];
        var j = path.length - 2;
        var lastPosition, x, y;
        for (; j > -1; j--) {
          lastPosition = path[j];
          x = pushedItem.$item.x;
          y = pushedItem.$item.y;
          pushedItem.$item.x = lastPosition.x;
          pushedItem.$item.y = lastPosition.y;
          if (!vm.gridster.findItemWithItem(pushedItem.$item)) {
            pushedItem.setSize(true);
            path.splice(j + 1, path.length - 1 - j);
          } else {
            pushedItem.$item.x = x;
            pushedItem.$item.y = y;
          }
        }
        if (path.length < 2) {
          vm.removeFromPushed(i);
          return true;
        }
        return false;
      };
    }
  }
})();

(function () {
  'use strict';

  GridsterGridController.$inject = ["$element"];
  angular.module('angular-gridster2').component('gridsterPreview', {
    controller: GridsterGridController,
    require: {
      gridster: '^^gridster'
    }
  });

  /** @ngInject */
  function GridsterGridController($element) {
    var vm = this;

    vm.$onInit = function () {
      vm.gridster.previewStyle = vm.previewStyle.bind(vm);
    };

    vm.$onDestroy = function () {
      delete vm.gridster.previewStyle;
    };

    vm.previewStyle = function () {
      if (!vm.gridster.movingItem) {
        $element.css('display', 'none');
      } else {
        var margin = 0;
        var curRowHeight = vm.gridster.curRowHeight;
        var curColWidth = vm.gridster.curColWidth;
        if (vm.gridster.$options.outerMargin) {
          margin = vm.gridster.$options.margin;
        }
        $element.css('display', 'block');
        $element.css('height', (vm.gridster.movingItem.rows * curRowHeight - margin) + 'px');
        $element.css('width', (vm.gridster.movingItem.cols * curColWidth - margin) + 'px');
        $element.css('top', (vm.gridster.movingItem.y * curRowHeight + margin) + 'px');
        $element.css('left', (vm.gridster.movingItem.x * curColWidth + margin) + 'px');
        $element.css('marginBottom', margin + 'px');
      }
    }
  }
})();

(function () {
  'use strict';

  GridsterItemController.$inject = ["$scope", "$element", "GridsterDraggable", "GridsterResizable", "GridsterUtils"];
  angular.module('angular-gridster2').component('gridsterItem', {
    templateUrl: 'gridster2/gridsterItem.html',
    controller: GridsterItemController,
    controllerAs: 'GridsterItemCtrl',
    bindings: {
      item: '<'
    },
    require: {
      gridster: '^^gridster'
    },
    transclude: true
  });

  /** @ngInject */
  function GridsterItemController($scope, $element, GridsterDraggable, GridsterResizable, GridsterUtils) {
    var vm = this;
    vm.$item = {
      cols: undefined,
      rows: undefined,
      x: undefined,
      y: undefined,
      initCallback: undefined,
      dragEnabled: undefined,
      resizeEnabled: undefined,
      compactEnabled: undefined,
      maxItemRows: undefined,
      minItemRows: undefined,
      maxItemCols: undefined,
      minItemCols: undefined,
      maxItemArea: undefined,
      minItemArea: undefined
    };
    vm.el = $element;
    vm.nativeEl = $element[0];
    vm.notPlaced = false;
    vm.itemTop = 0;
    vm.itemLeft = 0;
    vm.itemWidth = 0;
    vm.itemHeight = 0;
    vm.top = 0;
    vm.left = 0;
    vm.width = 0;
    vm.height = 0;
    vm.itemMargin = 0;

    vm.$onInit = function () {
      vm.drag = new GridsterDraggable(vm, vm.gridster);
      vm.resize = new GridsterResizable(vm, vm.gridster);
      vm.updateOptions();
      vm.gridster.addItem(vm);
    };

    vm.updateOptions = function () {
      vm.$item = GridsterUtils.merge(vm.$item, vm.item, vm.$item);
    };

    vm.$onDestroy = function () {
      vm.gridster.removeItem(vm);
      delete vm.$item.initCallback;
      vm.drag.destroy();
      delete vm.drag;
      vm.resize.destroy();
      delete vm.resize;
    };

    vm.setSize = function (noCheck) {
      if (vm.gridster.mobile) {
        vm.top = 0;
        vm.left = 0;
        if (vm.gridster.$options.keepFixedWidthInMobile) {
          vm.width = vm.$item.cols * vm.gridster.$options.fixedColWidth;
        } else {
          vm.width = vm.gridster.curWidth - (vm.gridster.$options.outerMargin ? 2 * vm.gridster.$options.margin : 0);
        }
        if (vm.gridster.$options.keepFixedHeightInMobile) {
          vm.height = vm.$item.rows * vm.gridster.$options.fixedRowHeight;
        } else {
          vm.height = vm.width / 2;
        }
      } else {
        vm.top = vm.$item.y * vm.gridster.curRowHeight;
        vm.left = vm.$item.x * vm.gridster.curColWidth;
        vm.width = vm.$item.cols * vm.gridster.curColWidth - vm.gridster.$options.margin;
        vm.height = vm.$item.rows * vm.gridster.curRowHeight - vm.gridster.$options.margin;
      }
      if (!noCheck && v