/app/scripts/components/Slider.js

 1(function() {
 2  'use strict';
 3
 4  /**
 5   * Chroniton ( component used for slider )
 6   */
 7  VizabiPrototype.prototype.Slider = function(sOptions) {
 8    var sliderID = this.sliderID;
 9    var dataset = this.dataset;
10
11    if (sOptions.data) {
12      dataset = sOptions.data;
13    }
14
15    var currentChart = this.currentChart;
16    var options = this.options;
17
18    var optionLoop = options.state.time.loop;
19    var optionValue = options.state.time.value;
20    var optionPlayable = options.state.time.playable;
21
22    var styleProps = 'float:left;' +
23      'margin-top: 20px;' +
24      'padding: 11px 12px;' +
25      'border: 1px solid;' +
26      'border-radius: 25px;' +
27      'font-size: 16px;' +
28      'text-align: center;' +
29      'padding-left: 17px;'+
30      'background-color: #607889;'+
31      'width: 45px;' +
32      'height: 45px;';
33
34    var button = d3.select(sliderID)
35      .append('button')
36      .attr('style', styleProps)
37      .classed('fa fa-play text-success', true);
38
39    if(optionPlayable == false)
40      d3.select('div#slider button').classed('vzb-invisible', true);
41    else
42      d3.select('div#slider button').classed('vzb-invisible', false);
43
44    var playPause = function() {
45      if (c.playing()) {
46        button.classed('fa-play', false);
47        button.classed('fa-pause', true);
48      } else {
49        button.classed('fa-play', true);
50        button.classed('fa-pause', false);
51      }
52    };
53
54    button.on('click', function () {
55      c.playPause();
56      playPause();
57    });
58
59    var c = chroniton()
60      .domain([options.state.time.start, options.state.time.end])
61      .setInitialValue(optionValue)
62      .width(this.screenSize.width).loop(optionLoop);
63
64    d3.select(sliderID)
65      .append('span')
66      .attr('style', 'float:left;width:80%;margin-top:15px;')
67      .attr('class', 'theme-example')
68      .call(c);
69
70    c.on('change', function (d) {
71      if (typeof sOptions.transform === 'function') {
72        sOptions.transform.call(currentChart, d, dataset);
73      }
74      playPause();
75    });
76    c.playbackRate(1);
77
78    if(this.screenSize.width < 350)
79      c.playbackRate(1);
80    else if(this.screenSize.width < 580)
81      c.playbackRate(1.5);
82    else if(this.screenSize.width < 900)
83      c.playbackRate(2);
84    else
85      c.playbackRate(2);
86
87    c.hideLabel();
88
89    return c;
90  };
91})();