update dependencies

add material design to demo add unit tests
tiberiuzuld · Mar 25, 2016 · 5199d61 · 5199d61
1 parent aff8fac
commit 5199d61
Show file tree

Hide file tree

Showing 14 changed files with 60,661 additions and 4,808 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules/
 bower_components/
 .idea/
 .tmp/
+coverage
diff --git a/bower.json b/bower.json
@@ -6,13 +6,13 @@
     "dist/gridster.css"
   ],
   "dependencies": {
-    "angular": "^1.x",
-    "lodash": "*",
+    "angular": "~1.x",
+    "lodash": "~4.x",
     "javascript-detect-element-resize": "~0.5.3"
   },
   "devDependencies": {
-    "angular-mocks": "^1.x",
-    "angular-material": "^1.0.5"
+    "angular-mocks": "~1.x",
+    "angular-material": "~1.0.6"
   },
   "homepage": "https://github.io/tiberiuzuld/angular-gridster2",
   "bugs": {

diff --git a/dist/gridster.js b/dist/gridster.js
@@ -408,7 +408,7 @@
     return {
       restrict: 'A',
       replace: true,
-      template: '<div class="gridster-item gridster-preview-holder"></div>',
+      template: '<div class="gridster-preview-holder"></div>',
       link: function (scope, element) {
         scope.gridster.previewStyleString = {};
         /**
@@ -743,12 +743,12 @@
 
 (function () {
   'use strict';
-  gridsterController.$inject = ["$scope", "gridsterConfig"];
+  GridsterController.$inject = ["$scope", "gridsterConfig"];
   angular.module('angular-gridster2')
-    .controller('GridsterController', gridsterController);
+    .controller('GridsterController', GridsterController);
 
   /** @ngInject */
-  function gridsterController($scope, gridsterConfig) {
+  function GridsterController($scope, gridsterConfig) {
     var vm = this;
     vm.mobile = false;
 

diff --git a/dist/index.html b/dist/index.html
@@ -7,46 +7,46 @@
   <meta name="viewport" content="width=device-width">
   <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
-
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="stylesheet" href="styles/vendor.css">
 
   <link rel="stylesheet" href="gridster.css">
 
   <link rel="stylesheet" href="styles/app.css">
 </head>
-<body ng-controller="IndexController as vm">
-<div class="toolbar">
-  <button ng-click="vm.addItem()">Add widget</button>
-  <button ng-disable="vm.options.gridType === 'fit'" ng-click="vm.toggleFitToScreen('fit')">
-    <span>Fit to screen</span>
-  </button>
-  <button ng-disable="vm.options.gridType === 'scrollVertical'" ng-click="vm.toggleFitToScreen('scrollVertical')">
-    <span>Scroll Vertical</span>
-  </button>
-  <button ng-disable="vm.options.gridType === 'scrollHorizontal'" ng-click="vm.toggleFitToScreen('scrollHorizontal')">
-    <span>Scroll Horizontal</span>
-  </button>
-  <button ng-click="vm.toggleDrag()">
-    <span ng-show="vm.options.draggable.enabled === false">Enable drag</span>
-    <span ng-show="vm.options.draggable.enabled === true">Disable drag</span>
-  </button>
-  <button ng-click="vm.toggleResize()">
-    <span ng-show="vm.options.resizable.enabled === false">Enable resize</span>
-    <span ng-show="vm.options.resizable.enabled === true">Disable resize</span>
-  </button>
-  <label>
-    Margin:
-  </label>
-  <input type="number" ng-model="vm.options.margin">
-  <label>
-    Outer Margin:
-  </label>
-  <input type="checkbox" ng-model="vm.options.outerMargin">
-</div>
+<body ng-controller="IndexController as vm" layout="column">
+<md-toolbar>
+  <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
+    <md-button ng-click="vm.addItem()">
+      <md-icon>add</md-icon>
+      Add widget
+    </md-button>
+    <md-select aria-label="Grid type" ng-model="vm.options.gridType">
+      <md-option value="fit">Fit to screen</md-option>
+      <md-option value="scrollVertical">Scroll Vertical</md-option>
+      <md-option value="scrollHorizontal">Scroll Horizontal</md-option>
+    </md-select>
+    <md-checkbox ng-model="vm.options.draggable.enabled">
+      Drag Items
+    </md-checkbox>
+    <md-checkbox ng-model="vm.options.resizable.enabled">
+      Resize Items
+    </md-checkbox>
+    <div flex="30" layout="row" layout-align="center center">
+      <div><span>Margin</span></div>
+      <md-slider aria-label="Margin" flex min="0" max="30" ng-model="vm.options.margin"></md-slider>
+      <input type="number" min="0" max="30" ng-model="vm.options.margin">
+    </div>
+    <md-checkbox ng-model="vm.options.outerMargin">Outer Margin</md-checkbox>
+  </div>
+</md-toolbar>
 
 <div gridster="vm.options">
   <div gridster-item="item" ng-repeat="item in vm.dashboard">
     <div class="button-holder">
-      <button ng-click="vm.removeItem(item)">X</button>
+      <md-button class="md-fab md-primary md-mini" ng-click="vm.removeItem(item)">X
+        <md-tooltip>Remove</md-tooltip>
+      </md-button>
     </div>
   </div>
 </div>

diff --git a/dist/scripts/app.js b/dist/scripts/app.js
@@ -1,7 +1,7 @@
 (function () {
   'use strict';
 
-  angular.module('gridster2App', ['angular-gridster2', 'ngMockE2E']);
+  angular.module('gridster2App', ['angular-gridster2', 'ngMockE2E', 'ngMaterial']);
 })();
 
 (function () {
@@ -49,19 +49,6 @@
       vm.dashboard.push({});
     };
 
-    vm.toggleFitToScreen = function (gridType) {
-      if (vm.options.gridType !== gridType) {
-        vm.options.gridType = gridType;
-      }
-    };
-
-    vm.toggleDrag = function () {
-      vm.options.draggable.enabled = !vm.options.draggable.enabled;
-    };
-    vm.toggleResize = function () {
-      vm.options.resizable.enabled = !vm.options.resizable.enabled;
-    };
-
     function eventStop(item, scope) {
       $log.info('eventStop', item, scope);
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,4 @@ node_modules/ @@
     bower_components/
     .idea/
     .tmp/
+    coverage