Keyboard events on chronology
authorChloe Laisne <chloe.laisne@gmail.com>
Thu, 07 Jul 2016 11:06:11 +0200
changeset 233 0ff47a9c5da2
parent 232 d5fb6baacbd0
child 234 c928f6190771
Keyboard events on chronology
cms/app-client/app/components/playlist-component.js
cms/app-client/app/components/visu-chrono.js
cms/app-client/app/controllers/application.js
--- a/cms/app-client/app/components/playlist-component.js	Wed Jul 06 18:02:12 2016 +0200
+++ b/cms/app-client/app/components/playlist-component.js	Thu Jul 07 11:06:11 2016 +0200
@@ -10,26 +10,26 @@
     documents: Ember.computed('model', 'filter.location', 'filter.language', 'filter.discourse', 'filter.date', 'filter.theme', function() {
         var self = this;
         var documents = this.get('model');
-        if (this.get('filter.date').length > 0) {
+        if (this.get('filter').get('date').length > 0) {
             var copy = documents;
             documents.map(function(document) {
-                if (self.get('filter.date').indexOf(document.get('created')) === -1){
+                if (self.get('filter').get('date').indexOf(document.get('created')) === -1){
                     copy = copy.without(document);
                 }
             });
             documents = copy;
         }
-        if (this.get('filter.discourse')) {
-            documents = documents.filterBy('type', this.get('filter.discourse'));
+        if (this.get('filter').get('discourse')) {
+            documents = documents.filterBy('type', this.get('filter').get('discourse'));
         }
-        if (this.get('filter.language')) {
-            documents = documents.filterBy('language', this.get('filter.language'));
+        if (this.get('filter').get('language')) {
+            documents = documents.filterBy('language', this.get('filter').get('language'));
         }
-        if (this.get('filter.location')) {
-            documents = documents.filterBy('spatial', this.get('filter.location'));
+        if (this.get('filter').get('location')) {
+            documents = documents.filterBy('spatial', this.get('filter').get('location'));
         }
-        if (this.get('filter.theme')) {
-            documents = documents.filterBy('thematique', this.get('filter.theme'));
+        if (this.get('filter').get('theme')) {
+            documents = documents.filterBy('thematique', this.get('filter').get('theme'));
         }
         return documents;
     }),
--- a/cms/app-client/app/components/visu-chrono.js	Wed Jul 06 18:02:12 2016 +0200
+++ b/cms/app-client/app/components/visu-chrono.js	Thu Jul 07 11:06:11 2016 +0200
@@ -7,7 +7,7 @@
     dateObserver: Ember.observer('filter.date', function() {
         var self = this;
         this.$('li').removeClass('highlighted');
-        this.get('filter.date').forEach(function(date) {
+        this.get('filter').get('date').forEach(function(date) {
             self.$('li#' + date).addClass('highlighted');
         });
     }),
@@ -22,33 +22,65 @@
         }
 
         var isMouseDown = false,
-            isHighlighted;
+            isHighlighted,
+            didHighlight,
+            previousElement;
 
-        Ember.$("#chrono-table li").mousedown(function () {
-            isMouseDown = true;
-            var dates = self.get('filter').get('date').toArray();
-            var index = dates.indexOf(parseInt(Ember.$(this).attr('id')));
-            if(index === -1) {
-                dates.push(parseInt(Ember.$(this).attr('id')));
-                isHighlighted = true;
-            } else {
-                dates.splice(index, 1);
-                isHighlighted = false;
+        Ember.$("#chrono-table li").mousedown(function (event) {
+            // Prevent right click selection.
+            if(event.button === 0) {
+                
+                isMouseDown = true;
+                var element = parseInt(Ember.$(this).attr('id'));
+                var elements = [element];
+                if(event.shiftKey) {
+                    while(previousElement !== element) {
+                        elements.push(previousElement);
+                        if(previousElement < element) {
+                            previousElement = previousElement + 1;
+                        } else if(previousElement > element) {
+                            previousElement = previousElement - 1;
+                        } else {
+                            break;
+                        }
+                    }    
+                }
+                var dates = self.get('filter').get('date').toArray();
+                var index = dates.indexOf(element);
+                if((!event.shiftKey && index === -1) || (event.shiftKey && didHighlight)) {
+                    dates = dates.concat(elements);
+                    isHighlighted = true;
+                } else {
+                    elements.forEach(function(el) {
+                        var id = dates.indexOf(el);
+                        if((!event.shiftKey && index !== -1) || (event.shiftKey && id !== -1)) {
+                            dates.splice(id, 1);    
+                        }
+                    });
+                    isHighlighted = false;
+                }
+                // Ascending sorting.
+                dates.sort(function(a, b) { return a - b; });
+                self.get('filter').set('date', dates);
+                didHighlight = isHighlighted;
+                previousElement = element;
+                // Prevent text selection.
+                return false;
             }
-            self.get('filter').set('date', dates);
-            return false; // prevent text selection
         }).mouseover(function () {
             if (isMouseDown) {
+                var element = parseInt(Ember.$(this).attr('id'));
                 if(Ember.$(this).hasClass("highlighted") !== isHighlighted) {
                     var dates = self.get('filter').get('date').toArray();
-                    var index = dates.indexOf(parseInt(Ember.$(this).attr('id')));
+                    var index = dates.indexOf(element);
                     if(index === -1) {
-                        dates.push(parseInt(Ember.$(this).attr('id')));
+                        dates.push(element);
                     } else {
                         dates.splice(index, 1);
                     }
                     self.get('filter').set('date', dates);
                 }
+                previousElement = element;
             }
         }).bind("selectstart", function () {
             return false;
--- a/cms/app-client/app/controllers/application.js	Wed Jul 06 18:02:12 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Thu Jul 07 11:06:11 2016 +0200
@@ -43,7 +43,7 @@
     dateFilterObserver: Ember.observer('filter.date', function(sender, key) {
         key = key.split('.').pop();
         var intervals = [];
-        this.get('filter').get(key).forEach(function(date) {
+        this.get('filter').get('date').forEach(function(date) {
             var isInterval = false;
             intervals.forEach(function(interval) {
                 if(interval.length && (interval.includes(date + 1) || interval.includes(date - 1))) {
@@ -62,8 +62,8 @@
                intervals[index] =  interval.toString();
             }
         });
-        if(!this.arraysEqual(this.get(key).toArray(), intervals)) {
-            this.set(key, intervals);    
+        if(!this.arraysEqual(this.get('date').toArray(), intervals)) {
+            this.set('date', intervals);    
         }
     }),