Merge branch 'develop' of github.com:Vizzuality/gfw-climate into feat…

…ure/remove-widgets

app/assets/javascripts/countries/presenters/show/FixedHeaderPresenter.js

@@ -0,0 +1,46 @@
+define([
+  'backbone',
+  'countries/presenters/PresenterClass',
+], function(Backbone, PresenterClass) {
+
+  'use strict';
+
+  var fixedHeaderPresenter = PresenterClass.extend({
+
+    status: new (Backbone.Model.extend({
+      defaults: {}
+    })),
+
+    init: function(view) {
+      this._super();
+      this.view = view;
+    },
+
+    /**
+     * Application subscriptions.
+     */
+    _subscriptions: [{
+      'View/update': function() {
+        this.view.lockHeader();
+      },
+      'Grid/ready': function(p) {
+        this._updateOptions(p);
+        this.view.unlockHeader();
+      }
+    }],
+
+    _updateOptions: function(p) {
+      this.status.set('country', p);
+    },
+
+    /**
+     * Set the param's name will be displayed in the header
+     */
+    setName: function(d) {
+      this.status.set('dataName', d);
+    }
+  });
+
+  return fixedHeaderPresenter;
+
+});

app/assets/javascripts/countries/templates/fixedHeader.handlebars

@@ -0,0 +1,11 @@
+<div class="fixed-wrap">
+  <div class="inner">
+    <ul>
+      {{#if country}}
+        {{#each country.name}}
+          <li data-index="{{@index}}" id={{this.id}}>{{this.name}}</li>
+        {{/each}}
+      {{/if}}
+    </ul>
+  </div>
+</div>

app/assets/javascripts/countries/views/CountryShowView.js

@@ -1,11 +1,12 @@
 define([
   'backbone',
   'countries/views/show/CountryShowHeaderView',
+  'countries/views/show/FixedHeaderView',
   'countries/views/show/TabsView',
   'countries/views/show/CountryModalView',
   'countries/views/show/WidgetGridView'
-], function(Backbone, CountryShowHeaderView,
-  TabsView, CountryModalView, WidgetGridView) {
+], function(Backbone, FixedHeaderView,
+  CountryShowHeaderView, TabsView, CountryModalView, WidgetGridView) {
 
   'use strict';
 
@@ -14,6 +15,7 @@ define([
     initialize: function() {
       new CountryShowHeaderView();
       new CountryModalView();
+      new FixedHeaderView();
       new TabsView();
       new WidgetGridView();
     }

app/assets/javascripts/countries/views/show/FixedHeaderView.js

@@ -0,0 +1,172 @@
+/**
+ * The CompareFixedHeaderView view.
+ */
+define([
+  'jquery',
+  'backbone',
+  'underscore',
+  'handlebars',
+  'mps',
+  'countries/presenters/show/FixedHeaderPresenter',
+  'text!countries/templates/fixedHeader.handlebars'
+], function($, Backbone, _, Handlebars, mps, fixedHeaderPresenter, tpl) {
+
+  'use strict';
+
+  var FixedHeaderView = Backbone.View.extend({
+
+    el: '#fixedHeaderView',
+
+    template: Handlebars.compile(tpl),
+
+    events: {},
+
+    initialize: function() {
+      this.presenter = new fixedHeaderPresenter(this);
+      this.status = this.presenter.status;
+      //CACHE
+      this.$window = $(window);
+      this.$document = $(document);
+
+      this.$offsetTop = $('#offsetTop');
+      this.$offsetBottom = $('#offsetBottom');
+
+      //INITS
+      this.calculateOffsets();
+      this.scrollDocument();
+
+      this.setListeners();
+    },
+
+    setListeners: function(){
+      this.$document.on('scroll',_.bind(this.scrollDocument,this));
+      this.$window.on('resize',_.bind(this.calculateOffsets,this));
+
+      this.status.on('change:dataName', this.onChangeName, this);
+      this.status.on('change:country', this.render, this);
+    },
+
+    /**
+     * Calculates the neccesary number and percentage of tranlations
+     * for every param.
+     */
+    onChangeName:function() {
+      var id = this.status.get('dataName').id,
+        index = $('#' + id).data('index'),
+        items = $('.-country li').length,
+        parentHeight = $('.-country').height() * items,
+        totalPercentage,
+        translate,
+
+      totalPercentage = (100 / items) * index;
+      translate = -Math.abs((parentHeight * totalPercentage) / 100);
+
+      $('.-country').css({
+        transform: 'translate(0, ' + translate  + 'px)'
+      });
+    },
+
+    calculateOffsets: function(){
+      this.offsetTop = this.$offsetTop.offset().top;
+      this.offsetBottom = this.$offsetBottom.offset().top - this.$el.height();
+    },
+
+    /**
+     * Obtain the cut points and id's from current widgets displayed
+     */
+    getCutPoints: function() {
+      var boxes = document.getElementsByClassName('box'),
+        points = [];
+
+      _.each(boxes, function(b) {
+        var id = b.getAttribute('id').split('-')[2];
+
+        points.push({
+          id: id,
+          cutpoint: $(b).offset().top
+        });
+      });
+
+      this.cutPoints = points;
+    },
+
+
+    /**
+     * Check the current scroll position and set name based
+     * on the position.
+     */
+    _checkPosition:function(y) {
+      if (!this.cutPoints) {
+        return;
+      }
+
+      var max = this.cutPoints.length;
+
+      for (var i = max - 1; i >= 0; i--) {
+        if (y > this.cutPoints[i].cutpoint) {
+          return this.presenter.setName(this.cutPoints[i]);
+        }
+      }
+    },
+
+    scrollDocument: function(e){
+      var scrollTop = this.$document.scrollTop();
+      this.calculateOffsets();
+      this._checkPosition(scrollTop);
+      if (scrollTop > this.offsetTop) {
+        this.$offsetTop.css({'padding-top': this.$el.height()});
+        if(scrollTop < this.offsetBottom) {
+          this.$el.removeClass('is-bottom').addClass('is-fixed');
+        }else{
+          this.$el.removeClass('is-fixed').addClass('is-bottom');
+        }
+      }else{
+        this.$offsetTop.css({'padding-top': 0});
+        this.$el.removeClass('is-fixed is-bottom');
+      }
+    },
+
+    render: function() {
+      this.$el.html(this.template(this._parseData()));
+      this.$el.find('ul').addClass('-country');
+      this.getCutPoints();
+    },
+
+    lockHeader: function() {
+      this.$el.addClass('is-hidden');
+    },
+
+    unlockHeader: function() {
+      this.$el.removeClass('is-hidden');
+    },
+
+    _parseData: function() {
+      var country = this.status.get('country'),
+        data, filter;
+
+      switch(country.options.view) {
+
+        case 'subnational':
+            filter = country.options.jurisdictions;
+          break;
+
+        case 'areas':
+            filter = country.options.areas;
+          break;
+      }
+
+      data = _.map(filter, function(d) {
+        return _.pick(d, 'name', 'id')
+      });
+
+      return { country: {
+        tab: '1',
+        name: data
+      }};
+    }
+
+  });
+
+  return FixedHeaderView;
+
+});

app/assets/javascripts/countries/views/show/reports/AreasView.js

@@ -1,10 +1,11 @@
 define([
+  'mps',
   'backbone',
   'handlebars',
   'widgets/views/WidgetView',
   'text!countries/templates/country-areas-grid.handlebars',
   'text!countries/templates/no-indicators.handlebars'
-], function(Backbone, Handlebars, WidgetView, tpl, noIndicatorsTpl) {
+], function(mps, Backbone, Handlebars, WidgetView, tpl, noIndicatorsTpl) {
 
   var AreasView = Backbone.View.extend({
 
@@ -99,6 +100,14 @@ define([
 
         }, this));
 
+        this.parent.append(this.$el);
+        mps.publish('Grid/ready', [{
+          options: {
+            view: 'areas',
+            areas: this.areas
+          }
+        }]);
+
 
       } else {
 
@@ -111,9 +120,9 @@ define([
         this.$el.html(this.template({
           setup: options
         }));
-      }
 
-      this.parent.append(this.$el);
+        this.parent.append(this.$el);
+      }
     },
 
 

app/assets/javascripts/countries/views/show/reports/SubNationalView.js

@@ -1,10 +1,11 @@
 define([
+  'mps',
   'backbone',
   'handlebars',
   'widgets/views/WidgetView',
   'text!countries/templates/country-subnational-grid.handlebars',
   'text!countries/templates/no-indicators.handlebars'
-], function(Backbone, Handlebars, WidgetView, tpl, noIndicatorsTpl) {
+], function(mps, Backbone, Handlebars, WidgetView, tpl, noIndicatorsTpl) {
 
   var SubNationalView = Backbone.View.extend({
 
@@ -98,6 +99,14 @@ define([
 
         }, this));
 
+        this.parent.append(this.$el);
+        mps.publish('Grid/ready', [{
+          options: {
+            view: 'subnational',
+            jurisdictions: this.jurisdictions
+          }
+        }]);
+
       } else {
 
         this.template = Handlebars.compile(noIndicatorsTpl);
@@ -109,9 +118,9 @@ define([
         this.$el.html(this.template({
           setup: options
         }));
-      }
 
-      this.parent.append(this.$el);
+        this.parent.append(this.$el);
+      }
     },
 
     parseData: function() {

app/assets/stylesheets/compare.scss

@@ -29,6 +29,7 @@
 // Compare
 @import "modules/compare/*";
 @import "modules/common/m-toolbar";
+@import "modules/common/m-fixed-header";
 
 // Common
 @import "states";

app/assets/stylesheets/modules/common/_m-fixed-header.scss

@@ -0,0 +1,47 @@
+.m-fixed-header {
+  width: 100%;
+  z-index: 1000;
+
+  &.is-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  &.is-bottom {
+    position: absolute;
+    top: auto;
+    bottom: 0;
+    left: 0;
+  }
+
+  .fixed-wrap{
+    max-width: 1600px;
+    margin: 0 auto;
+    background: $extra-light-grey;
+    overflow: hidden;
+  }
+
+  ul {
+    display: flex;
+    justify-content: space-between;
+    li {
+      width: 47.5%;
+      padding: 10px 0;
+      text-transform: uppercase;
+    }
+
+    &.-country {
+      display: inline-block;
+      height: 36px;
+
+      transform: translate(0, 0);
+      transition: .2s all ease;
+      li {
+        float: left;
+        width: 100%;
+      }
+    }
+  }
+}
+