|
0
|
1 /*
|
|
|
2 * FuzzyTimelineRangeSlider.js
|
|
|
3 *
|
|
|
4 * Copyright (c) 2013, Sebastian Kruse. All rights reserved.
|
|
|
5 *
|
|
|
6 * This library is free software; you can redistribute it and/or
|
|
|
7 * modify it under the terms of the GNU Lesser General Public
|
|
|
8 * License as published by the Free Software Foundation; either
|
|
|
9 * version 3 of the License, or (at your option) any later version.
|
|
|
10 *
|
|
|
11 * This library is distributed in the hope that it will be useful,
|
|
|
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
|
14 * Lesser General Public License for more details.
|
|
|
15 *
|
|
|
16 * You should have received a copy of the GNU Lesser General Public
|
|
|
17 * License along with this library; if not, write to the Free Software
|
|
|
18 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
|
|
|
19 * MA 02110-1301 USA
|
|
|
20 */
|
|
|
21
|
|
|
22 /**
|
|
|
23 * @class FuzzyTimelineRangeSlider
|
|
|
24 * Implementation for a fuzzy time-ranges slider
|
|
|
25 * @author Sebastian Kruse (skruse@mpiwg-berlin.mpg.de)
|
|
|
26 *
|
|
|
27 * @param {HTML object} parent div to append the FuzzyTimeline
|
|
|
28 */
|
|
|
29 function FuzzyTimelineRangeSlider(parent) {
|
|
|
30
|
|
|
31 var rangeSlider = this;
|
|
|
32
|
|
|
33 this.parent = parent;
|
|
|
34 this.options = parent.options;
|
|
|
35
|
|
|
36 this.spans;
|
|
|
37
|
|
|
38 this.datasets;
|
|
|
39
|
|
|
40 this.sliderParentTable = this.parent.gui.sliderTable;
|
|
|
41 var headerRow = $("<tr></tr>");
|
|
|
42 var controlsRow = $("<tr></tr>");
|
|
|
43 $(this.sliderParentTable).append(headerRow).append(controlsRow);
|
|
|
44
|
|
|
45 headerRow.append("<td>Time start</td>");
|
|
|
46 this.rangeStart = document.createElement("select");
|
|
|
47 controlsRow.append($("<td></td>").append(this.rangeStart));
|
|
|
48
|
|
|
49 headerRow.append("<td>Time unit</td>");
|
|
|
50 this.rangeDropdown = document.createElement("select");
|
|
|
51 controlsRow.append($("<td></td>").append(this.rangeDropdown));
|
|
|
52
|
|
|
53 headerRow.append("<td>Scaling</td>");
|
|
|
54 this.scalingDropdown = document.createElement("select");
|
|
|
55 controlsRow.append($("<td></td>").append(this.scalingDropdown));
|
|
|
56 $(this.scalingDropdown).append("<option>normal</option>");
|
|
|
57 $(this.scalingDropdown).append("<option>logarithm</option>");
|
|
|
58 $(this.scalingDropdown).append("<option>percentage</option>");
|
|
|
59 $(this.scalingDropdown).change(function(eventObject){
|
|
|
60 var scaleMode = $(rangeSlider.scalingDropdown).find("option:selected").text();
|
|
|
61 rangeSlider.parent.changeScaleMode(scaleMode);
|
|
|
62 });
|
|
|
63
|
|
|
64 headerRow.append("<td>Animation</td>");
|
|
|
65 this.startAnimation = document.createElement("div");
|
|
|
66 $(this.startAnimation).addClass("smallButton playDisabled");
|
|
|
67 this.pauseAnimation = document.createElement("div");
|
|
|
68 $(this.pauseAnimation).addClass("smallButton pauseDisabled");
|
|
|
69 controlsRow.append($("<td></td>").append(this.startAnimation).append(this.pauseAnimation));
|
|
|
70
|
|
|
71 headerRow.append("<td>Dated Objects</td>");
|
|
|
72 this.numberDatedObjects = 0;
|
|
|
73 this.numberDatedObjectsDIV = document.createElement("div");
|
|
|
74 $(this.numberDatedObjectsDIV).addClass("ddbElementsCount");
|
|
|
75 controlsRow.append($("<td></td>").append(this.numberDatedObjectsDIV));
|
|
|
76 }
|
|
|
77
|
|
|
78 FuzzyTimelineRangeSlider.prototype = {
|
|
|
79
|
|
|
80 initialize : function(datasets) {
|
|
|
81 var rangeSlider = this;
|
|
|
82 rangeSlider.datasets = datasets;
|
|
|
83
|
|
|
84 //reset values
|
|
|
85 rangeSlider.spans = [];
|
|
|
86 rangeSlider.spanHash = [];
|
|
|
87
|
|
|
88 //find smallest (most accurate) time-span
|
|
|
89 var smallestSpan;
|
|
|
90 rangeSlider.numberDatedObjects = 0;
|
|
|
91 $(this.datasets).each(function(){
|
|
|
92 $(this.objects).each(function(){
|
|
|
93 var dataObject = this;
|
|
|
94 var span;
|
|
|
95 if (dataObject.isTemporal){
|
|
|
96 rangeSlider.numberDatedObjects++;
|
|
|
97 smallestSpan = moment.duration(1,'milliseconds');
|
|
|
98 } else if (dataObject.isFuzzyTemporal){
|
|
|
99 rangeSlider.numberDatedObjects++;
|
|
|
100 span = moment.duration(dataObject.TimeSpanEnd-dataObject.TimeSpanBegin);
|
|
|
101 if ( (typeof smallestSpan === 'undefined') || (span < smallestSpan))
|
|
|
102 smallestSpan = span;
|
|
|
103 }
|
|
|
104 });
|
|
|
105 if ((typeof smallestSpan !== 'undefined') && (smallestSpan.asMilliseconds() === 1))
|
|
|
106 return false;
|
|
|
107 });
|
|
|
108
|
|
|
109 //show number of objects that have a time in header
|
|
|
110 $(rangeSlider.numberDatedObjectsDIV).empty().append(rangeSlider.numberDatedObjects + " results");
|
|
|
111
|
|
|
112 if (typeof smallestSpan === 'undefined')
|
|
|
113 return;
|
|
|
114
|
|
|
115 var fixedSpans = [
|
|
|
116 moment.duration(1, 'seconds'),
|
|
|
117 moment.duration(1, 'minutes'),
|
|
|
118 moment.duration(10, 'minutes'),
|
|
|
119 moment.duration(15, 'minutes'),
|
|
|
120 moment.duration(30, 'minutes'),
|
|
|
121 moment.duration(1, 'hours'),
|
|
|
122 moment.duration(5, 'hours'),
|
|
|
123 moment.duration(10, 'hours'),
|
|
|
124 moment.duration(12, 'hours'),
|
|
|
125 moment.duration(1, 'days'),
|
|
|
126 moment.duration(7, 'days'),
|
|
|
127 moment.duration(1, 'weeks'),
|
|
|
128 moment.duration(2, 'weeks'),
|
|
|
129 moment.duration(1, 'months'),
|
|
|
130 moment.duration(2, 'months'),
|
|
|
131 moment.duration(3, 'months'),
|
|
|
132 moment.duration(6, 'months'),
|
|
|
133 moment.duration(1, 'years'),
|
|
|
134 moment.duration(5, 'years'),
|
|
|
135 moment.duration(10, 'years'),
|
|
|
136 moment.duration(20, 'years'),
|
|
|
137 moment.duration(25, 'years'),
|
|
|
138 moment.duration(50, 'years'),
|
|
|
139 moment.duration(100, 'years'),
|
|
|
140 moment.duration(200, 'years'),
|
|
|
141 moment.duration(250, 'years'),
|
|
|
142 moment.duration(500, 'years'),
|
|
|
143 moment.duration(1000, 'years'),
|
|
|
144 moment.duration(2000, 'years'),
|
|
|
145 moment.duration(2500, 'years'),
|
|
|
146 moment.duration(5000, 'years'),
|
|
|
147 moment.duration(10000, 'years'),
|
|
|
148 ];
|
|
|
149 var overallSpan = rangeSlider.parent.overallMax-rangeSlider.parent.overallMin;
|
|
|
150 //only add spans that are not too small for the data
|
|
|
151 for (var i = 0; i < fixedSpans.length; i++){
|
|
|
152 if ( (fixedSpans[i].asMilliseconds() > (smallestSpan.asMilliseconds() * 0.5)) &&
|
|
|
153 (fixedSpans[i].asMilliseconds() < overallSpan)
|
|
|
154 &&
|
|
|
155 (
|
|
|
156 rangeSlider.parent.options.showAllPossibleSpans ||
|
|
|
157 ((rangeSlider.parent.overallMax-rangeSlider.parent.overallMin)/fixedSpans[i]<rangeSlider.options.maxBars)
|
|
|
158 ))
|
|
|
159 rangeSlider.spans.push(fixedSpans[i]);
|
|
|
160 }
|
|
|
161
|
|
|
162 $(rangeSlider.rangeDropdown).empty();
|
|
|
163
|
|
|
164 $(rangeSlider.rangeDropdown).append("<option>continuous</option>");
|
|
|
165 var index = 0;
|
|
|
166 $(rangeSlider.spans).each(function(){
|
|
|
167 var duration = this;
|
|
|
168 if (duration < moment.duration(1,'second'))
|
|
|
169 humanizedSpan = duration.milliseconds() + "ms";
|
|
|
170 else if (duration < moment.duration(1,'minute'))
|
|
|
171 humanizedSpan = duration.seconds() + "s";
|
|
|
172 else if (duration < moment.duration(1,'hour'))
|
|
|
173 humanizedSpan = duration.minutes() + "min";
|
|
|
174 else if (duration < moment.duration(1,'day'))
|
|
|
175 humanizedSpan = duration.hours() + "h";
|
|
|
176 else if (duration < moment.duration(1,'month')){
|
|
|
177 var days = duration.days();
|
|
|
178 humanizedSpan = days + " day";
|
|
|
179 if (days > 1)
|
|
|
180 humanizedSpan += "s";
|
|
|
181 } else if (duration < moment.duration(1,'year')){
|
|
|
182 var months = duration.months();
|
|
|
183 humanizedSpan = months + " month";
|
|
|
184 if (months > 1)
|
|
|
185 humanizedSpan += "s";
|
|
|
186 } else {
|
|
|
187 var years = duration.years();
|
|
|
188 humanizedSpan = years + " year";
|
|
|
189 if (years > 1)
|
|
|
190 humanizedSpan += "s";
|
|
|
191 }
|
|
|
192 $(rangeSlider.rangeDropdown).append("<option index='"+index+"'>"+humanizedSpan+"</option>");
|
|
|
193 index++;
|
|
|
194 });
|
|
|
195
|
|
|
196 $(rangeSlider.rangeDropdown).change(function( eventObject ){
|
|
|
197 var handlePosition = $(rangeSlider.rangeDropdown).find("option:selected").first().attr("index");
|
|
|
198 //if there is no index, "continuous" is selected - so the density plot will be drawn
|
|
|
199
|
|
|
200 if (typeof handlePosition === "undefined"){
|
|
|
201 rangeSlider.parent.switchViewMode("density");
|
|
|
202 } else {
|
|
|
203 rangeSlider.parent.switchViewMode("barchart");
|
|
|
204 }
|
|
|
205
|
|
|
206 rangeSlider.parent.slidePositionChanged(rangeSlider.spans[handlePosition]);
|
|
|
207 });
|
|
|
208
|
|
|
209 $(rangeSlider.rangeStart).empty();
|
|
|
210 //add start of timeline selections
|
|
|
211 //TODO: add Months/Days/etc., atm there are only years
|
|
|
212 var starts = [];
|
|
|
213 var overallMin = rangeSlider.parent.overallMin;
|
|
|
214 var last = moment(overallMin).year();
|
|
|
215 starts.push(last);
|
|
|
216 for (i = 1;;i++){
|
|
|
217 var date = moment(overallMin).year();
|
|
|
218 date = date/Math.pow(10,i);
|
|
|
219 if (Math.abs(date)<1)
|
|
|
220 break;
|
|
|
221 date = Math.floor(date);
|
|
|
222 date = date*Math.pow(10,i);
|
|
|
223 if (date != last)
|
|
|
224 starts.push(date);
|
|
|
225 last = date;
|
|
|
226 }
|
|
|
227 $(starts).each(function(){
|
|
|
228 $(rangeSlider.rangeStart).append("<option>"+this+"</option>");
|
|
|
229 });
|
|
|
230
|
|
|
231 $(rangeSlider.rangeStart).change(function( eventObject ){
|
|
|
232 var handlePosition = rangeSlider.rangeStart.selectedIndex;
|
|
|
233 var start = starts[handlePosition];
|
|
|
234
|
|
|
235 rangeSlider.parent.overallMin = moment().year(start);
|
|
|
236 $(rangeSlider.rangeDropdown).change();
|
|
|
237 });
|
|
|
238
|
|
|
239 $(rangeSlider.rangeDropdown).change();
|
|
|
240
|
|
|
241 $(rangeSlider.startAnimation).click(function(){
|
|
|
242 if ($(rangeSlider.startAnimation).hasClass("playEnabled")){
|
|
|
243 $(rangeSlider.startAnimation).removeClass("playEnabled").addClass("playDisabled");
|
|
|
244 $(rangeSlider.pauseAnimation).removeClass("pauseDisabled").addClass("pauseEnabled");
|
|
|
245
|
|
|
246 rangeSlider.parent.startAnimation();
|
|
|
247 }
|
|
|
248 });
|
|
|
249
|
|
|
250 $(rangeSlider.pauseAnimation).prop('disabled', true);
|
|
|
251 $(rangeSlider.pauseAnimation).click(function(){
|
|
|
252 if ($(rangeSlider.pauseAnimation).hasClass("pauseEnabled")){
|
|
|
253 $(rangeSlider.startAnimation).removeClass("playDisabled").addClass("playEnabled");
|
|
|
254 $(rangeSlider.pauseAnimation).removeClass("pauseEnabled").addClass("pauseDisabled");
|
|
|
255
|
|
|
256 rangeSlider.parent.pauseAnimation();
|
|
|
257 }
|
|
|
258 });
|
|
|
259 },
|
|
|
260
|
|
|
261 triggerHighlight : function(columnElement) {
|
|
|
262
|
|
|
263 },
|
|
|
264
|
|
|
265 triggerSelection : function(columnElement) {
|
|
|
266
|
|
|
267 },
|
|
|
268
|
|
|
269 deselection : function() {
|
|
|
270 },
|
|
|
271
|
|
|
272 filtering : function() {
|
|
|
273 },
|
|
|
274
|
|
|
275 inverseFiltering : function() {
|
|
|
276 },
|
|
|
277
|
|
|
278 triggerRefining : function() {
|
|
|
279 },
|
|
|
280
|
|
|
281 reset : function() {
|
|
|
282 },
|
|
|
283
|
|
|
284 show : function() {
|
|
|
285 },
|
|
|
286
|
|
|
287 hide : function() {
|
|
|
288 }
|
|
|
289 };
|
