added DnD switcher

kalinichenko · Apr 3, 2015 · 3ae9324 · 3ae9324
1 parent 21fa0a1
commit 3ae9324
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 11 deletions.
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -17,6 +17,7 @@ require('angular-ui-router');
 require('angular-loading-bar');
 require('ngDraggable');
 require('angular-animate');
+require('flux-angular');
 
 angular.module('underscore', [])
   .factory('_', function() {
@@ -29,7 +30,7 @@ angular.module('underscore', [])
 
 angular
   .module('navEditorApp', ['templates-main','underscore', 'ui.router', 'ui.bootstrap', 'ngDraggable',
-          'angular-szn-autocomplete', 'angular-loading-bar', 'ngAnimate'])
+          'angular-szn-autocomplete', 'angular-loading-bar', 'ngAnimate', 'flux'])
   .config(function($urlRouterProvider, $locationProvider, cfpLoadingBarProvider) {
     $urlRouterProvider.otherwise('/');
     // $locationProvider.html5Mode(true);

diff --git a/app/scripts/directives/actions.js b/app/scripts/directives/actions.js
@@ -18,7 +18,11 @@ angular.module('navEditorApp')
       controllerAs: 'actionsCtrl'
     };
   })
-  .controller('ActionsCtrl', function(AreaService, ModalService, $state) {
+  .controller('ActionsCtrl', function(AreaService, ModalService, $state, SettingsStore, flux, $scope) {
+    $scope.reorderingMode = SettingsStore.reorderingMode;
+    $scope.$listenTo(SettingsStore, 'reorderingModeChanged', function() {
+      $scope.reorderingMode = SettingsStore.reorderingMode;
+    });
     this.save = function() {
       this.saving = true;
       AreaService.save().then(function() {
@@ -39,4 +43,7 @@ angular.module('navEditorApp')
         $state.go('area.group', {areaid: newArea.Id});
       });
     };
+    this.changeReorderingMode = function() {
+      flux.dispatch('changeReorderingMode');
+    };
   });
diff --git a/app/scripts/directives/area.dir.js b/app/scripts/directives/area.dir.js
@@ -50,7 +50,12 @@ angular.module('navEditorApp')
       controllerAs: 'areaCtrl'
     };
   })
-  .controller('AreaCtrl', function(AreaService, ModalService, $stateParams, $state, _) {
+  .controller('AreaCtrl', function(AreaService, ModalService, $stateParams, $state, _, $scope, SettingsStore) {
+    $scope.reorderingMode = SettingsStore.reorderingMode;
+    $scope.$listenTo(SettingsStore, 'reorderingModeChanged', function() {
+      $scope.reorderingMode = SettingsStore.reorderingMode;
+    });
+
     this.areas = AreaService.getAreas();
     this.$stateParams = $stateParams;
 

diff --git a/app/scripts/directives/group.dir.js b/app/scripts/directives/group.dir.js
@@ -20,7 +20,11 @@ angular.module('navEditorApp')
       url: '^/group/:areaid'
     });
   })
-  .controller('GroupCtrl', function(AreaService, ModalService, $stateParams, $state, _, $templateCache) {
+  .controller('GroupCtrl', function(AreaService, ModalService, $stateParams, $state, _, $templateCache, $scope, SettingsStore) {
+    $scope.reorderingMode = SettingsStore.reorderingMode;
+    $scope.$listenTo(SettingsStore, 'reorderingModeChanged', function() {
+      $scope.reorderingMode = SettingsStore.reorderingMode;
+    });
     this.groups = AreaService.getGroups($stateParams.areaid);
     this.$stateParams = $stateParams;
 

diff --git a/app/scripts/directives/subarea.dir.js b/app/scripts/directives/subarea.dir.js
@@ -10,7 +10,11 @@ require('angular-ui-router');
  * # group
  */
 angular.module('navEditorApp')
-  .controller('SubAreaCtrl', function(AreaService, ModalService, $stateParams, $scope, _) {
+  .controller('SubAreaCtrl', function(AreaService, ModalService, $stateParams, $scope, _, SettingsStore) {
+    $scope.reorderingMode = SettingsStore.reorderingMode;
+    $scope.$listenTo(SettingsStore, 'reorderingModeChanged', function() {
+      $scope.reorderingMode = SettingsStore.reorderingMode;
+    });
     this.subareas = AreaService.getSubAreas($stateParams.areaid, $scope.group.Id);
     this.$stateParams = $stateParams;
 

diff --git a/app/scripts/services/settings.service.js b/app/scripts/services/settings.service.js
@@ -0,0 +1,26 @@
+'use strict';
+
+require('angular');
+
+angular
+  .module('navEditorApp')
+  .store('SettingsStore', function(flux) {
+    var state = flux.immutable({
+      reorderingMode: false
+    });
+    return {
+      handlers: {
+        'changeReorderingMode': 'changeReorderingMode'
+      },
+      changeReorderingMode: function() {
+        state = state.set('reorderingMode', !state.reorderingMode);
+        this.emit('reorderingModeChanged');
+      },
+      exports: {
+        get reorderingMode() {
+          return state.reorderingMode;
+        }
+      }
+    };
+  });
+
diff --git a/app/views/actions.view.html b/app/views/actions.view.html
@@ -1,7 +1,11 @@
 <div class="well">
   <div class="btn-group" role="group">
-    <button class="btn btn-default navbar-btn" ng-click="actionsCtrl.addArea()">Add area</button>
-    <button ng-disabled="actionsCtrl.downloading" class="btn btn-default navbar-btn" ng-click="actionsCtrl.download()">Download</button>
-    <button ng-disabled="actionsCtrl.saving" class="btn btn-primary navbar-btn" ng-click="actionsCtrl.save()">Save</button>
+    <button class="btn btn-default" ng-click="actionsCtrl.addArea()">Add area</button>
+    <button ng-disabled="actionsCtrl.downloading" class="btn btn-default" ng-click="actionsCtrl.download()">Download</button>
+    <button ng-disabled="actionsCtrl.saving" class="btn btn-primary" ng-click="actionsCtrl.save()">Save</button>
   </div>
+  <button class="btn btn-default pull-right" data-toggle="button" ng-click="actionsCtrl.changeReorderingMode()">
+    <span ng-if="reorderingMode">DnD on</span>
+    <span ng-if="!reorderingMode">DnD off</span>
+  </button>
 </div>
diff --git a/app/views/area.view.html b/app/views/area.view.html
@@ -3,7 +3,7 @@
     class="entities__frame col-lg-3 col-md-4 col-sm-4 col-xs-6"
     ng-drop-success="areaCtrl.onDropComplete($index, $data, $event)"
     ng-drop="true">
-    <div class='entity area-entity' ng-drag="true" ng-drag-data="area"
+    <div class='entity area-entity' ng-drag="reorderingMode" ng-drag-data="area"
       ng-class="{'area-entity--selected': areaCtrl.$stateParams.areaid === area.Id}">
         <a draggable="false" class="entity-link" ui-sref="area.group({areaid: area.Id})">
           <span class="entity-link__frame">{{area.Title}}</span>

diff --git a/app/views/group.view.html b/app/views/group.view.html
@@ -4,7 +4,7 @@
         class='entities__frame col-lg-3 col-md-4 col-sm-4 col-xs-6'>
       <div ng-drop-success="groupCtrl.onDropComplete($index, $data, $event)"
         ng-drop="true">
-        <div class='entity group-entity' ng-drag="true" ng-drag-data="group">
+        <div class='entity group-entity' ng-drag="reorderingMode" ng-drag-data="group">
           <span class="entity-link__frame">{{group.Title}}</span>
           <div class="entity-menu-icon"></div>
           <div class="entity-menu-container">

diff --git a/app/views/subarea.view.html b/app/views/subarea.view.html
@@ -2,7 +2,7 @@
   <div ng-repeat="subarea in subAreaCtrl.subareas" class=" voffset"
       ng-drop-success="subAreaCtrl.onDropComplete($index, $data, $event)"
       ng-drop="true">
-    <div class='entity subarea-entity' ng-drag="true"
+    <div class='entity subarea-entity' ng-drag="reorderingMode"
       ng-drag-data="subarea">
       <div ng-if="subarea.IconPreviewUrl !== undefined" class="entity-image-container">
         <img ng-src="{{subarea.IconPreviewUrl}}" />

diff --git a/package.json b/package.json
@@ -9,7 +9,9 @@
     "angular-szn-autocomplete": "^1.0.2",
     "angular-ui-router": "^0.2.13",
     "bootstrap": "3.3.4",
+    "flux-angular": "git://github.com/kalinichenko/flux-angular",
     "jquery": "^2.1.3",
+    "napa": "^1.2.0",
     "underscore": "^1.8.2"
   },
   "repository": {},