Merge pull request #1626 from Vizzuality/feature/indepth-button-map

Feature/indepth button map
wri · Apr 23, 2015 · 77e7e71 · 77e7e71
2 parents a8d7ebe + c42a63e
commit 77e7e71
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 25 deletions.
diff --git a/app/assets/javascripts/map/templates/tabs/countriesButtons.handlebars b/app/assets/javascripts/map/templates/tabs/countriesButtons.handlebars
@@ -1,7 +1,12 @@
-{{!-- <ul class="button-container one">
-  <li><button id="countries-analyze-button" class="btn green uppercase">Analyze</button></li>
-</ul> --}}
+
 <ul class="button-container">
   <li><a class="btn gray uppercase little" target="_blank" href="http://data.globalforestwatch.org/datasets?q={{iso}}">Country data</a></li>
   <li><a class="btn gray uppercase little" href="/country/{{iso}}">Country profile</a></li>
 </ul>
+{{#if country}}
+  {{#if country.indepth}}
+    <ul class="button-container one">
+      <li><a href="{{country.indepth}}" target="_blank" id="countries-analyze-button" class="btn green lines uppercase"><span>Forest atlas</span></a></li>
+    </ul>
+  {{/if}}
+{{/if}}
diff --git a/app/assets/javascripts/map/views/tabs/CountriesView.js b/app/assets/javascripts/map/views/tabs/CountriesView.js
@@ -158,9 +158,9 @@ define([
       }
     },
 
-    setButtons: function(to){
+    setButtons: function(to, country){
       this.$toggle.toggleClass('active', to);
-      this.$buttons.html(this.templateButtons( {iso: this.iso} ));
+      this.$buttons.html(this.templateButtons( {iso: this.iso, country: country} ));
     },
 
     analyzeIso: function(e){
@@ -243,15 +243,10 @@ define([
     // Select change iso
     changeIso: function(e){
       this.iso = $(e.currentTarget).val() || null;
-      // ($(e.currentTarget).val()) ? this.getSubCountries() : this.$regionSelect.val(null).attr('disabled', true).trigger("liszt:updated");
       this.setIsoLayers();
       this.setButtons(!!this.iso);
       this.presenter.changeIso({country: this.iso, region: null});
     },
-    // changeArea: function(e){
-    //   this.area = $(e.currentTarget).val();
-    //   this.presenter.changeIso({country: this.iso, region: this.area});
-    // },
 
     // For autoselect country and region when youn reload page
     setSelects: function(iso){
@@ -261,9 +256,33 @@ define([
       this.setButtons(!!this.iso);
       this.$countrySelect.val(this.iso).trigger("liszt:updated");
       // this.$regionSelect.val(this.area).trigger("liszt:updated");
-      // if (this.iso) {
-      //   this.getSubCountries();
-      // }
+      if (this.iso) {
+        this.getAdditionalInfoCountry();
+      }
+    },
+
+    getAdditionalInfoCountry: function(){
+      if (!amplify.store('country-'+this.iso)) {
+        $.ajax({
+          url: window.gfw.config.GFW_API_HOST + '/countries/'+this.iso,
+          dataType: 'json',
+          success: _.bind(function(data){
+            amplify.store('country-'+this.iso, data);
+            this.setAdditionalInfoCountry();
+          }, this ),
+          error: function(error){
+            console.log(error);
+          }
+        });
+      }else{
+        this.setAdditionalInfoCountry()
+      }
+      // #{ENV['GFW_API_HOST']}/countries/#{iso}
+    },
+
+    setAdditionalInfoCountry: function(){
+      var country = amplify.store('country-'+this.iso);
+      this.setButtons(!!this.iso, country);
     },
 
   });

diff --git a/app/assets/stylesheets/modules/_buttons1600.scss b/app/assets/stylesheets/modules/_buttons1600.scss
@@ -58,6 +58,14 @@
     height: 25px;
     line-height: 24px;
   }
+  &.lines{
+    line-height: 1;
+    white-space: normal;
+    height: auto;
+    line-height: 1;
+    padding: 10px;
+  }
+
 
   // Colors
   &.dark {
@@ -135,6 +143,22 @@
       @include transform(translate(0,-50%));
     }
   }
+  &.with-center-icon{
+    min-width: 0;
+    span{
+      position: relative;
+      padding-right: 25px;
+    }
+    svg{
+      width: 20px;
+      height: 20px;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      fill: $white;
+      @include transform(translate(0px,-50%));
+    }
+  }
 }
 
 

diff --git a/app/views/map/index.html.erb b/app/views/map/index.html.erb
@@ -18,6 +18,7 @@
 
 <%= render 'layouts/svg_icons' %>
 <%= render 'shared/svg_icons_map' %>
+<%= render 'shared/svg_icons_applications' %>
 <%= render 'shared/svg_icons_layers' %>
 
 <%#= render "shared/notice" %>