Updates angular and nouislider and refactors components based on libr…

…ary updates. Updates timeline to not group layers that do not have a time dimension.
MapStory · Mar 14, 2017 · 85726a4 · 85726a4
1 parent e2da296
commit 85726a4
Show file tree

Hide file tree

Showing 7 changed files with 236 additions and 78 deletions.
diff --git a/bower.json b/bower.json
@@ -20,15 +20,15 @@
   ],
   "dependencies": {
     "jquery": ">=1.8.0",
-    "nouislider": "7.0.9",
-    "angular": "1.2.21",
+    "nouislider": "9.2.0",
+    "angular": "1.6.3",
     "angular-bootstrap": "0.11.2",
     "angular-bootstrap-colorpicker": "~3.0.8",
     "jsonix": "highsource/jsonix#e285e82fb15fa3d62665a35eb728022936df1f4b",
     "ogc-schemas": "highsource/ogc-schemas#master",
     "w3c-schemas": "highsource/w3c-schemas#master",
     "angular-sortable-view" : "0.0.13",
-    "designmodo-flat-ui": "https://github.com/designmodo/Flat-UI.git"
+    "materialize" : "0.98.0",
   },
   "devDependencies": {
     "bootstrap": "3.0.0",

diff --git a/lib/core/time/controls.js b/lib/core/time/controls.js
@@ -76,7 +76,7 @@ function TimeController(model, slider, timeline, controls) {
         currentTimelineWindow = range;
     }
 
-    slider.on('rangeChanged', function(ev, range) {
+    slider.on('rangeChanged', function(range) {
         clearTimeout();
         adjust(centerTimeline, range);
         schedule();

diff --git a/lib/core/time/line.js b/lib/core/time/line.js
@@ -16,8 +16,8 @@ exports.TimeLine = function(id, model) {
     var offset = new Date().getTimezoneOffset() * 60 * 1000;
 
     function init(model) {
-        var story_pin_label = 'Story Pin';
         var elements = [], layer_groups = [], groups = [], options;
+        var story_pin_label = 'Annotation';
         var range = model.getRange();
         if (range.isEmpty()) {
             range = utils.createRange(Date.now());
@@ -40,7 +40,7 @@ exports.TimeLine = function(id, model) {
 
         // Add the Group we there are elements.
         if(elements.length > 0){
-            groups.append({id: story_pin_label, title: story_pin_label, time: []});
+            groups.push({id: story_pin_label, title: story_pin_label, time: []});
         }
 
         if (model.boxy.box) {
@@ -65,32 +65,37 @@ exports.TimeLine = function(id, model) {
             var id = lyr.get('id');
             var title = lyr.get('title');
             var times = lyr.get('times') || [];
+            var group = null;
 
-            if(times.length > 1500){
-                 elements.push({
+            if (times.length > 0) {
+                if (times.length > 1500) {
+                    elements.push({
                         id: utils.sha1(id),
                         group: id,
                         content: "",
                         start: times[0],
                         end: times[times.length - 1],
                         type: 'range'
                     });
-            }else{
-                for (var j = 0; j < times.length; j++) {
-                    var time = times[j];
-                    elements.push({
-                        id: utils.sha1(id + time),
-                        group: id,
-                        content: "",
-                        start: time,
-                        type: 'box'
-                    });
+                } else {
+                    for (var j = 0; j < times.length; j++) {
+                        var time = times[j];
+                        elements.push({
+                            id: utils.sha1(id + time),
+                            group: id,
+                            content: "",
+                            start: time,
+                            type: 'box'
+                        });
+                    }
                 }
-            }
-            return {
+                group = {
                 id: id,
                 content: title
             };
+
+            }
+            return group;
         });
 
         groups = groups.concat(layer_groups);

diff --git a/lib/core/time/slider.js b/lib/core/time/slider.js
@@ -1,3 +1,4 @@
+var utils = require('./utils');
 /**
  * Visual feedback of complete story line. Allow dragging of range, click
  * to position.
@@ -16,7 +17,8 @@
  * @returns {TimeSlider}
  */
 exports.TimeSlider = function(id, model) {
-    var slider = $("#" + id);
+    var slider = $("#" + id)[0];
+    var events = new utils.Events();
     var initialized = false;
     var singleSlider;
 
@@ -67,20 +69,25 @@ exports.TimeSlider = function(id, model) {
         } else if (singleSlider) {
             options.start = 0;
         }
-        slider.noUiSlider(options, initialized);
+
         if (!initialized) {
-            slider.bind('slide', function(ev) {
-                var range = getRange();
-                slider.trigger('rangeChanged', range);
-            });
+            if(slider)
+            {
+                noUiSlider.create(slider, options);
+                slider.noUiSlider.on('slide', function (ev) {
+                    var range = getRange();
+                    events.event('rangeChanged').publish(range);
+                });
+                initialized = true;
+            }
         }
-        initialized = true;
+
     }
 
     init(model);
 
     function getSliderRangeInternal() {
-        var range = slider.val();
+        var range = slider.noUiSlider.get();
         if (! Array.isArray(range)) {
             range = parseInt(range, 10);
             range = [model.mode === 'cumulative' ? 0 : range, range];
@@ -111,15 +118,17 @@ exports.TimeSlider = function(id, model) {
     function setValue(val) {
         // normalize nouislider.val to handle array
         if (singleSlider) {
-            slider.val(val[1]);
+            slider.noUiSlider.set(val[1]);
         } else {
-            slider.val(val);
+            slider.noUiSlider.set(val);
         }
     }
 
     this.slider = slider;
-    this.on = function() {
-        slider.on.apply(slider, arguments);
+    this.on = function(event, fn) {
+        if(initialized) {
+            events.event(event).subscribe(fn);
+        }
     };
     this.getSliderRangeInternal = getSliderRangeInternal;
     this.center = function(index) {

diff --git a/lib/core/time/utils.js b/lib/core/time/utils.js
@@ -5,7 +5,7 @@ var moment = require('moment');
  * @param arg - either Date, range (returns start), string or number
  * @returns milliseconds or null if nothing provided
  */
-getTime = function(arg) {
+var getTime = function(arg) {
     var type = typeof arg;
     if (type === 'number') {
         return arg;
@@ -27,7 +27,7 @@ getTime = function(arg) {
     throw new Error('cannot call getTime with ' + type + ", : " + arg);
 };
 
-isRangeLike = function(object) {
+var isRangeLike = function(object) {
     /*jshint eqnull:true */
     return object != null && (object.hasOwnProperty('start') || object.hasOwnProperty('end'));
 };
@@ -286,6 +286,10 @@ exports.pickInterval = function(range) {
     return intervals[Math.max(exports.find(intervals, range.width()) - 1, 0)];
 };
 
+exports.stringToMoment = function(date, format){
+    return moment(date, format);
+}
+
 exports.getTime = getTime;
 
 /**