← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to src/js/UI/Timeline.js

  • Committer: Jeff Stys
  • Date: 2014-05-20 19:12:16 UTC
  • Revision ID: jstys@sesda3.com-20140520191216-pb9h9k6gzd78hqky
Major refinements to the styling of the Timeline within the drawer.  More to do here.
An important update to the caching code for the API call.
The beginnings of integrating with the selected image layers.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/js/UI/Timeline.js
26
26
           $('#timeline-drawer').remove();
27
27
        }
28
28
 
29
 
        this.timeline_container = $('<section class="drawer" style=""><header class="clickme" style="font-size: 0.67em; padding-top: 0; margin-top: 0; width: 8em; background-color: rgba(0,0,0,0.75); border-bottom: 0; padding: 0 auto; margin: -19px auto 0 auto;"><div class="ui-icon ui-icon-arrow-1-n" style="display: inline-block;"></div>Timeline<div class="ui-icon ui-icon-arrow-1-n" style="display: inline-block;"></div></header><div class="drawer-content"><div class="drawer-items"><button id="btn-zoom-out">Zoom Out</button><button id="btn-zoom-in">Zoom In</button><button id="btn-plotline">Add PlotLine</button><button id="btn-back" style="display: none;">Back</button><div id="data-coverage-timeline"></div><button id="btn-prev" style="float: left;"><- Prev 3 Months</button><button id="btn-next" style="float: right;">Next 3 Months -></button></div<</div></div></section>').appendTo("#helioviewer-viewport");
 
29
        this.timeline_container = $('<section class="drawer" style=""><header class="clickme" style="font-size: 0.67em; padding-top: 0; margin-top: 0; width: 10em; background-color: rgba(0,0,0,0.65); border-bottom: 0; padding: 0 auto; margin: -19px auto 0 auto;"><div class="ui-icon ui-icon-arrow-1-n" style="display: inline-block;"></div>Data Coverage<div class="ui-icon ui-icon-arrow-1-n" style="display: inline-block;"></div></header><div class="drawer-content"><div class="drawer-items"><div id="data-coverage-timeline"></div><button id="btn-prev" style="float: left;"><- Prev 3 Months</button><button id="btn-zoom-out">Zoom Out</button><button id="btn-zoom-in">Zoom In</button><button id="btn-plotline">Add PlotLine</button><button id="btn-back" style="display: none;"><- Go Back</button><button id="btn-next" style="float: right;">Next 3 Months -></button></div></div></div></section>').appendTo("#helioviewer-viewport");
30
30
        this.timeline_container.css({
31
31
            'position'    : 'absolute',
32
32
            'bottom'      : '0',
33
 
            'z-index'     : '999',
 
33
            'z-index'     : '9999',
34
34
            'width'       : '100%',
35
 
            'height'      : '50%',
 
35
            'height'      : '420px',
 
36
            'max-height'  : '96%',
36
37
            'text-align'  : 'center',
37
 
            'background-color':'rgba(0,0,0,1)',
 
38
            'background-color':'rgba(0,0,0,0.55)',
38
39
            //'border-top'  : '1px solid #333'
39
40
        });
40
41
 
41
 
        this.timeline_container.bind("mousedown", function () { return false; });
42
 
        this.timeline_container.bind('dblclick',  function () { return false; });
43
 
        this.timeline_container.bind('click',     function () { return false; });
 
42
        this.timeline_container.bind("mousedown", function () {return false;});
 
43
        this.timeline_container.bind('dblclick',  function () {return false;});
 
44
        this.timeline_container.bind('click',     function () {return false;});
44
45
 
45
46
        this.timeline_container.slideDrawer({
46
47
            showDrawer: true,
47
48
            slideTimeout: true,
48
49
            slideSpeed: 500,
49
 
            slideTimeoutCount: 1500,
 
50
            slideTimeoutCount: 2000,
50
51
            drawerHiddenHeight: -10,
51
52
        });
52
53
 
53
54
 
54
55
        var container = $('#data-coverage-timeline'),
55
56
            chart = new HelioviewerTimeline(container),
56
 
            url, startDate, endDate, imageLayers;
 
57
            url, startDate, endDate, imageLayers, layers=[];
57
58
 
58
59
        chart.renderPlaceholder();
59
60
        chart.loadingIndicator(true);
60
61
 
61
 
        imageLayers = '[12,1,100],[13,1,100],[14,1,100],[15,1,100],[16,1,100]';
 
62
 
 
63
        imageLayers = Helioviewer.userSettings.get("state.tileLayers");
 
64
        $.each(imageLayers, function (i, obj) {
 
65
            layers.push('[' + obj.sourceId + ',1,100]');
 
66
        });
 
67
        layers = layers.join(',');
 
68
        console.warn(layers);
 
69
 
62
70
        startDate = new Date(chart._timeline.xAxis[0].getExtremes().dataMin).toISOString();
63
71
        endDate = new Date(chart._timeline.xAxis[0].getExtremes().dataMax).toISOString();
64
72
 
65
73
        url  = 'http://dev4.helioviewer.org/api/v1/getDataCoverage/';
66
 
        url += '?imageLayers='+imageLayers;
 
74
        url += '?imageLayers='+layers;
67
75
        url += '&startDate='+startDate;
68
76
        url += '&endDate='+endDate;
69
77