Feature/player

package.json

@@ -27,6 +27,7 @@
     "jquery": "^3.3.1",
     "node-sass": "^4.9.0",
     "postcss-cli": "^5.0.0",
+    "rangeslider.js": "^2.3.2",
     "virtual-scroll": "^1.3.1"
   }
 }

src/static/js/chart.js

@@ -27,7 +27,7 @@ function getUrlParameters() {
   return $.param(urlParameters);
 }
 
-function loadData(url, callback) {
+function loadData(url, callback, loadOnly = false) {
   var newArray = [];
 
   $.ajax({
@@ -65,8 +65,10 @@ function loadData(url, callback) {
           });
 
           if (data.length === 0) {
-            $('.js-active-slider').removeClass('-hide');
             $('.js-error-data').removeClass('-hide');
+            if (loadOnly === false) {
+              $('.js-active-slider').removeClass('-hide');
+            }
           } else {
             $('.js-error-data').addClass('-hide');
             callback(data);
@@ -75,8 +77,10 @@ function loadData(url, callback) {
 
       } else {
         if (data.length === 0) {
-          $('.js-active-slider').removeClass('-hide');
           $('.js-error-data').removeClass('-hide');
+          if (loadOnly === false) {
+            $('.js-active-slider').removeClass('-hide');
+          }
         } else {
           $('.js-error-data').addClass('-hide');
           callback(data);
@@ -187,7 +191,7 @@ function drawCanvas(selector, chartName) {
           .classed("js-chart", true)
 }
 
-function createHexagonGroup(canvas, data) {
+function createHexagonGroup(canvas, data, loadOnly = false) {
   return canvas.selectAll("rect")
     .data(data)
     .enter()
@@ -202,8 +206,15 @@ function createHexagonGroup(canvas, data) {
             var chartName = $(this).closest('.js-svg-root').data('chartName');
             return `${chartName}-hexagon-${d.id}`;
           })
-          .classed('_hidden', true)
           .classed('-small', true)
+          // .classed('_hidden', true)
+          .classed('_hidden', function(d, i) {
+            if (loadOnly === true) {
+              return false;
+            } else {
+              return true;
+            }
+          });
 }
 
 function hexagonOnClick(hexagonGroup, callback) {
@@ -319,6 +330,37 @@ function setTransformOrigin(canvas) {
   }
 }
 
+function onlyLoadWordChart(callback) {
+  $('.js-page').remove();
+  loadData("/visualizations/tokens/", function(data) {
+    var canvas = drawCanvas('.wrapper', 'token');
+    var hexagonGroup = createHexagonGroup(canvas, data, loadOnly = true);
+    addHexagons(hexagonGroup, 90);
+    hexagonOnClick(hexagonGroup, function(data) {
+      var currentPage = $(data.element).closest('.js-page');
+      currentPage.removeClass('-active');
+      $('.js-active-slider').addClass('-hide');
+      $('.js-circle').one('transitionend', function(){
+        currentPage.addClass('_hidden');
+        setNavigationTitle(data.token);
+        $('.js-back').removeClass('_hidden');
+
+      });
+      tokensChart(data.stem);
+      tokensScroll = scrollPosition;
+      hammertime.destroy();
+    });
+    positionHexagon(hexagonGroup);
+    addText(hexagonGroup);
+    showHexagonGroup(hexagonGroup);
+    updateCanvasSize(canvas);
+    setTransformOrigin(canvas);
+    enableScroll();
+    visiblePage = 'tokens';
+    callback();
+  }, loadOnly = true);
+}
+
 function wordChart() {
   $('.js-page').remove();
   const params = new URLSearchParams(window.location.search);
@@ -373,7 +415,6 @@ function tokensChart(tokenId) {
         currentPage.addClass('_hidden');
         currentPage.removeClass('-active');
         setNavigationName(data.token);
-        $('.js-inactive-slider').removeClass('-negative');
       });
       authorsChart(tokenId, data.id);
       authorsScroll = scrollPosition;
@@ -390,7 +431,6 @@ function tokensChart(tokenId) {
     $('.js-slider-min').text(parsedMinValue);
     $('.js-slider-max').text(parsedMaxValue);
     $('.js-inactive-slider').removeClass('-hide');
-    $('.js-inactive-slider').addClass('-negative');
     updateCanvasSize(canvas);
     setTransformOrigin(canvas);
     enableScroll();

src/static/js/player.js

@@ -0,0 +1,131 @@
+$('.js-player').rangeslider({
+
+    polyfill: false,
+
+    rangeClass: 'controls',
+    disabledClass: 'rangeslider--disabled',
+    horizontalClass: 'rangeslider--horizontal',
+    verticalClass: 'rangeslider--vertical',
+    fillClass: 'fill',
+    handleClass: 'handle',
+
+    onInit: function() {
+      $('.js-range-player .handle').prepend('<span class="currentdate js-current-date"></span>')
+    }
+});
+var interval = undefined;
+var datesRange = [];
+var currentMonthFromRange = undefined;
+
+$('.js-player-play').click(function(){
+  var initialDate = $(".js-slider").dateRangeSlider("values").min;
+  var lastDate = $(".js-slider").dateRangeSlider("values").max;
+
+  var currentYear = initialDate.getFullYear();
+  var currentMonth = initialDate.getMonth();
+
+  $('.js-slider-min').text((monthShortNames[initialDate.getMonth()]+"/"+initialDate.getFullYear()))
+  $('.js-slider-max').text((monthShortNames[lastDate.getMonth()]+"/"+lastDate.getFullYear()))
+
+  var dateDiff = (lastDate.getFullYear() - initialDate.getFullYear())*12 + (lastDate.getMonth() - initialDate.getMonth());
+
+  $('.js-active-slider').addClass('-hide');
+  $('.js-range-player').removeClass('-hide');
+
+  for (i = 0; i < dateDiff + 1; i++) {
+    datesRange.push(monthShortNames[currentMonth]+"/"+currentYear);
+
+    if (currentMonth == 11) {
+      currentMonth = 0;
+      currentYear++;
+    } else {
+      currentMonth++;
+    };
+  };
+
+  var playerInput = $('.js-player');
+
+  var max = 500;
+  var months = datesRange.length;
+
+  var monthSecs = 2;
+  var monthRatio = max / months;
+
+  var speed = max / monthRatio * monthSecs * 2;
+
+  var showingMonth = 0;
+  playerInput.attr('max', max);
+
+  playerInput.on('input', function(){
+    var currentTick = parseInt(playerInput.val());
+    var currentMonthFromRange = Math.floor(currentTick / monthRatio);
+
+    $('.js-current-date').html(datesRange[currentMonthFromRange]);
+
+  });
+
+  if (interval) {
+    clearInterval(interval)
+  };
+
+  function loadInterval() {
+      var currentTick = parseInt(playerInput.val());
+
+      currentMonthFromRange = Math.floor(currentTick / monthRatio);
+      console.log(currentMonthFromRange)
+      if (currentMonthFromRange !== showingMonth) {
+        var urlMinMonthValue = ("0" + ((monthShortNames.indexOf(datesRange[currentMonthFromRange].split('/')[0]))+1)).slice(-2);
+        var urlMinYearValue = datesRange[currentMonthFromRange].split('/')[1]
+        var urlMaxMonthValue = ("0" + ((monthShortNames.indexOf(datesRange[currentMonthFromRange].split('/')[0]))+2)).slice(-2);
+
+        var urlMinValue = urlMinYearValue+"-"+urlMinMonthValue;
+
+        if (urlMinMonthValue == "12") {
+          var urlMaxValue = parseInt(urlMinYearValue) + 1 +"-"+"01";
+
+        } else {
+          var urlMaxValue = urlMinYearValue +"-"+urlMaxMonthValue
+        }
+        console.log(urlMaxValue);
+
+        const params = new URLSearchParams(window.location.search);
+        params.set('initialDate', urlMinValue);
+        params.set('endDate', urlMaxValue);
+        window.history.replaceState({}, '', `${location.pathname}?${params}`);
+
+        onlyLoadWordChart(function() {
+          interval = setInterval(loadInterval, speed);
+        });
+        if (interval) {
+          clearInterval(interval)
+        };
+        showingMonth = currentMonthFromRange;
+      }
+
+      var nextTick = currentTick + 1;
+      if (nextTick <= max) {
+        playerInput.val(nextTick).change();
+      } else {
+        clearInterval(interval);
+      }
+    }
+
+  interval = setInterval(loadInterval, speed);
+
+
+});
+
+$('.js-player-pause').click(function(){
+  if (interval) {
+    clearInterval(interval)
+  };
+});
+
+$('.js-player-stop').click(function(){
+  clearInterval(interval);
+  $('.js-player').val(0);
+  $('.js-player').off('input');
+  $('.js-active-slider').removeClass('-hide');
+  $('.js-range-player').addClass('-hide');
+});
+

src/static/js/scripts.js

@@ -64,7 +64,6 @@ $('.js-back').on('click', function() {
       hammertime.destroy();
 
       if (visiblePage === 'manifestation' || visiblePage === 'manifestations') {
-        $('.js-inactive-slider').addClass('-negative');
         setNavigationName('');
       } else if (visiblePage === 'authors') {
         setNavigationTitle('Parla');

src/static/scss/ambience/_z-index.scss

@@ -1,6 +1,7 @@
 $z-index: (
-  reveal-circle         : 200,
+  reveal-circle          : 200,
   filter-modal           : 100,
+  player-controls        : 90,
   back                   : 80,
   hex-bg                 : -1,
 );

src/static/scss/app.scss

@@ -25,9 +25,13 @@
 @import 'components/speeches-list';
 @import 'components/hexagon-group';
 @import 'components/simple-link';
-@import 'components/range-slider';
 @import 'components/error-message';
 @import 'components/selected-bar';
+@import 'components/player-controls';
+@import 'components/range-slider';
+@import 'components/range-player';
+@import 'components/range-selected';
+@import 'components/date-filters';
 
 // Trumps
 

src/static/scss/components/_date-filters.scss

@@ -0,0 +1,6 @@
+.date-filters {
+  position: relative;
+
+  height: 58px;
+  margin: 0 10vw;
+}

src/static/scss/components/_player-controls.scss

@@ -0,0 +1,39 @@
+.player-controls {
+  position: relative;
+  z-index: map-get($z-index, player-controls);
+
+  display: flex;
+  justify-content: center;
+
+  margin: 0 10vw 15px 10vw;
+
+  & > * + * {
+    margin-left: 20px;
+  }
+
+  & > span {
+    display: inline-block;
+
+    width: 16px;
+    height: 16px;
+    padding: 10px;
+
+    cursor: pointer;
+
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 50%;
+  }
+
+  & > .play {
+    background-image: url('../img/play.svg');
+  }
+
+  & > .stop {
+    background-image: url('../img/stop.svg');
+  }
+
+  & > .pause {
+    background-image: url('../img/pause.svg');
+  }
+}