diff --git a/CHANGELOG.md b/CHANGELOG.md index d6dabd86..75a5d39e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,22 @@ +# 1.1.0 (9/03/2016) + +* Tropics overlay +* Fixes to the homepage +* Several bug fixes since last release + +# 1.0.1 (1/12/2015) + +* Unbroken links +* Quicker timeline + +# 1.0 (1/12/2015) + +* Map with timeline +* Static pages +* Pantropical view + Pantropical view embed +* Compare countries +* Inspect Country + # 0.5.1 * New data on countries endpoints @@ -26,4 +45,4 @@ # 0.1.0 -* Initial release \ No newline at end of file +* Initial release diff --git a/app/assets/images/home/features/slider/slide3.jpg b/app/assets/images/home/features/slider/slide3.jpg new file mode 100644 index 00000000..d2cfa63d Binary files /dev/null and b/app/assets/images/home/features/slider/slide3.jpg differ diff --git a/app/assets/javascripts/home/views/sliderView.js b/app/assets/javascripts/home/views/sliderView.js index a6694083..5c6e4ebf 100644 --- a/app/assets/javascripts/home/views/sliderView.js +++ b/app/assets/javascripts/home/views/sliderView.js @@ -21,7 +21,10 @@ define([ events: { 'click #get-started' : 'getStarted', 'click #go-to-apps' : 'goToApps', - 'click .gotomap' : 'gotoMap' + 'click .gotomap' : 'gotoMap', + 'click .feature-slider .slick-dots li': '_onSliderClick', + 'mouseenter .feature-slider .slick-dots li': '_onSliderFeatureHighlight', + 'mouseleave .feature-slider .slick-dots li': '_onSliderFeatureUnHighlight' }, initialize: function() { @@ -29,16 +32,52 @@ define([ this.$getStarted = $('#get-started'); //Inits - this.slickSlider(); + this._slickSliderMain(); + this._slickSliderFeature(); }, - slickSlider: function(){ - //INIT - $('.main-slider-viewport').slick({ + _slickSliderMain: function() { + this.mainSlider = this._initSlick('.home-slider', 500, 3000); + }, + + _slickSliderFeature: function() { + this.featureSliderStopped = false; + this.featureSlider = this._initSlick('.feature-slider', 500, 8000); + }, + + /** + * Pauses the feature slider when the mouse + * its on top of a slick dot + */ + _onSliderFeatureHighlight: function() { + this.featureSlider.slick('slickPause'); + }, + + /** + * Plays the feature slider when the mouse + * leaves a slick dot + */ + _onSliderFeatureUnHighlight: function() { + if (!this.featureSliderStopped) { + this.featureSlider.slick('slickPlay'); + } + }, + + /** + * Pauses the feature slider when the mouse + * its on top of a slick dot + */ + _onSliderClick: function() { + this.featureSliderStopped = true; + this.featureSlider.slick('slickPause'); + }, + + _initSlick: function(el, speed, autoSpeed) { + var slick = $(el).slick({ infinite: true, - speed: 500, + speed: speed, autoplay: true, - autoplaySpeed: 3000, + autoplaySpeed: autoSpeed, slide: 'li', fade: true, cssEase: 'linear', @@ -59,6 +98,7 @@ define([ ] }); + return slick; }, getStarted: function(e){ diff --git a/app/assets/javascripts/map/geojson_overlays/tropics.json b/app/assets/javascripts/map/geojson_overlays/tropics.json new file mode 100644 index 00000000..f84733f2 --- /dev/null +++ b/app/assets/javascripts/map/geojson_overlays/tropics.json @@ -0,0 +1 @@ +{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"polyType":"tropics"},"geometry":{"type":"Polygon","coordinates":[[[-180,90],[0,90],[0,30],[-180,30],[-180,90]]]}},{"type":"Feature","properties":{"polyType":"tropics"},"geometry":{"type":"Polygon","coordinates":[[[-180,-90],[-180,-30],[0,-30],[0,-90],[-180,-90]]]}},{"type":"Feature","properties":{"polyType":"tropics"},"geometry":{"type":"Polygon","coordinates":[[[180,90],[0,90],[0,30],[180,30],[180,90]]]}},{"type":"Feature","properties":{"polyType":"tropics"},"geometry":{"type":"Polygon","coordinates":[[[180,-90],[180,-30],[0,-30],[0,-90],[180,-90]]]}}]} \ No newline at end of file diff --git a/app/assets/javascripts/map/views/GeoStylingView.js b/app/assets/javascripts/map/views/GeoStylingView.js new file mode 100644 index 00000000..e20b245d --- /dev/null +++ b/app/assets/javascripts/map/views/GeoStylingView.js @@ -0,0 +1,102 @@ +/** + * GeoJSON Styling + * Applies styles for different types + * of geojson. + */ +define([ + 'underscore', + 'handlebars', +], function(_, Handlebars) { + + 'use strict'; + + var GeoStylingView = Backbone.View.extend({ + + defaults: { + styles: { + tropics: { + strokeWeight: 0, + fillOpacity: 0.3, + fillColor: '#000', + strokeColor: "#000", + strokeOpacity: 0 + }, + analysis: { + strokeWeight: 2, + fillOpacity: 0, + fillColor: '#FFF', + strokeColor: '#5B80A0', + strokeOpacity: 1, + icon: { + url: '/assets/icons/marker_exclamation.png', + size: [36, 36], + offset: [0, 0], + anchor: [18, 18] + } + }, + country: { + strokeWeight: 2, + fillOpacity: 0, + fillColor: '#FFF', + strokeColor: '#5B80A0', + strokeOpacity: 1, + icon: { + url: '/assets/icons/marker_exclamation.png', + size: [36, 36], + offset: [0, 0], + anchor: [18, 18] + } + } + } + }, + + initialize: function(params) { + this.options = _.extend({}, this.defaults, params || {}); + this.styles = this.options.styles; + this.map = this.options.map; + }, + + setStyles: function() { + this.map.data.setStyle(_.bind(function(feature){ + for (var current in this.styles) { + var style = this.styles[current]; + + if (style && feature.getProperty('polyType') === current) { + if (style.icon) { + style.icon = this._getIcon(style.icon); + } + return style; + } + } + }, this )); + }, + + getStyles: function(type) { + var style = this.styles[type]; + + if (style.icon) { + style.icon = this._getIcon(style.icon); + } + + return style; + }, + + _getIcon: function(params) { + var icon; + var iconData = params; + + if (iconData.size && iconData.offset) { + icon = new google.maps.MarkerImage( + iconData.url, + new google.maps.Size(iconData.size[0], iconData.size[1]), // Size + new google.maps.Point(iconData.offset[0], iconData.offset[1]), // Offset + new google.maps.Point(iconData.anchor[0], iconData.anchor[1]) // Anchor + ); + } + return icon; + } + + }); + return GeoStylingView; + +}); diff --git a/app/assets/javascripts/map/views/MapView.js b/app/assets/javascripts/map/views/MapView.js index 73516fa6..351261bd 100644 --- a/app/assets/javascripts/map/views/MapView.js +++ b/app/assets/javascripts/map/views/MapView.js @@ -14,8 +14,12 @@ define([ 'map/views/maptypes/darkMaptype', 'map/views/maptypes/positronMaptype', 'map/views/maptypes/landsatMaptype', - 'map/helpers/layersHelper' -], function(Backbone, _, mps, Presenter, grayscaleMaptype, treeheightMaptype, darkMaptype, positronMaptype, landsatMaptype, layersHelper) { + 'map/views/GeoStylingView', + 'map/helpers/layersHelper', + 'text!map/geojson_overlays/tropics.json' +], function(Backbone, _, mps, Presenter, grayscaleMaptype, treeheightMaptype, + darkMaptype, positronMaptype, landsatMaptype, GeoStylingView, layersHelper, + tropicsOverlay) { 'use strict'; @@ -86,15 +90,14 @@ define([ new google.maps.LatLng(85, 180) ); // why (-85, -180)? Well, because f*ck you, Google: http://stackoverflow.com/questions/5405539/google-maps-v3-why-is-latlngbounds-contains-returning-false this.lastValidCenter = this.map.getCenter(); - this._checkDialogs(); this.resize(); this._setMaptypes(); this._addListeners(); + this._setGeoStyles(); // Node this.createMaptypeNode(); - }, /** @@ -434,9 +437,9 @@ define([ for (var i = 1999; i < 2013; i++) { this.map.mapTypes.set('landsat{0}'.format(i), landsatMaptype([i])); } + this.map.data.addGeoJson(JSON.parse(tropicsOverlay)); }, - /** * Crosshairs when analysis is activated */ @@ -538,7 +541,18 @@ define([ }, this ) ); } - } + }, + + /** + * This method will set the global styles + * for all geojson features + */ + _setGeoStyles: function() { + this.geoStyles = new GeoStylingView({ + map: this.map + }); + this.geoStyles.setStyles(); + } }); return MapView; diff --git a/app/assets/javascripts/map/views/tabs/AnalysisView.js b/app/assets/javascripts/map/views/tabs/AnalysisView.js index 68dca020..8a5991ec 100644 --- a/app/assets/javascripts/map/views/tabs/AnalysisView.js +++ b/app/assets/javascripts/map/views/tabs/AnalysisView.js @@ -10,9 +10,11 @@ define([ 'chosen', 'map/presenters/tabs/AnalysisPresenter', 'map/services/CountriesService', + 'map/views/GeoStylingView', 'text!map/templates/tabs/analysis.handlebars', 'text!map/templates/tabs/analysis-mobile.handlebars' -], function(_, Handlebars, amplify, chosen, Presenter, CountriesService, tpl, tplMobile) { +], function(_, Handlebars, amplify, chosen, Presenter, CountriesService, + GeoStylingView, tpl, tplMobile) { 'use strict'; @@ -53,6 +55,8 @@ define([ this.presenter = new Presenter(this); this.model = new AnalysisModel(); this.countriesService = CountriesService; + this.geoStyles = new GeoStylingView(); + enquire.register("screen and (min-width:"+window.gfw.config.GFW_MOBILE+"px)", { match: _.bind(function(){ this.mobile = false; @@ -187,39 +191,15 @@ define([ * Set geojson style. */ setStyle: function() { - this.style = { - strokeWeight: 2, - fillOpacity: 0, - fillColor: '#FFF', - strokeColor: '#5B80A0', - icon: new google.maps.MarkerImage( - '/assets/icons/marker_exclamation.png', - new google.maps.Size(36, 36), // size - new google.maps.Point(0, 0), // offset - new google.maps.Point(18, 18) // anchor - ) - }; - - this.map.data.setStyle(_.bind(function(feature){ - var strokeColor = (feature.getProperty('color')) ? feature.getProperty('color') : '#5B80A0'; - return ({ - strokeWeight: 2, - fillOpacity: 0, - fillColor: '#FFF', - strokeColor: strokeColor - }); - }, this )); + this.style = this.geoStyles.getStyles('analysis'); }, setGeojson: function(geojson, color) { + geojson.properties.polyType = 'country'; geojson.properties.color = color; return geojson; }, - - - - /** * COUNTRY */ @@ -329,14 +309,6 @@ define([ } }, - - - - - - - - /** * DRAWING */ @@ -481,22 +453,6 @@ define([ this.presenter.setMultipolygon(multipolygon, geojson); }, - - - - - - - - - - - - - - - - // COUNTRY MASK drawMaskCountry: function(geojson, iso){ this.mask = cartodb.createLayer(this.map, { diff --git a/app/assets/javascripts/map/views/tabs/CountriesView.js b/app/assets/javascripts/map/views/tabs/CountriesView.js index 0a376282..b9554ac2 100644 --- a/app/assets/javascripts/map/views/tabs/CountriesView.js +++ b/app/assets/javascripts/map/views/tabs/CountriesView.js @@ -10,12 +10,14 @@ define([ 'amplify', 'chosen', 'map/presenters/tabs/CountriesPresenter', + 'map/views/GeoStylingView', 'widgets/indicators/bars/BarChart', 'text!map/templates/tabs/countries.handlebars', 'text!map/templates/tabs/countriesIso.handlebars', 'text!map/templates/tabs/countriesButtons.handlebars', 'text!map/templates/tabs/countries-mobile.handlebars' -], function(_, Handlebars, amplify, chosen, Presenter, barChart, tpl, tplIso, tplButtons, tplMobile) { +], function(_, Handlebars, amplify, chosen, Presenter, GeoStylingView, + barChart, tpl, tplIso, tplButtons, tplMobile) { 'use strict'; @@ -56,6 +58,7 @@ define([ this.model = new CountriesModel(); this.presenter = new Presenter(this); this.barChart = barChart; + this.geoStyles = new GeoStylingView(); enquire.register("screen and (min-width:"+window.gfw.config.GFW_MOBILE+"px)", { match: _.bind(function(){ @@ -103,7 +106,6 @@ define([ inits: function(){ // countries - this.setStyle(0.45); this.getCountries(); if (!this.embed) { setTimeout(_.bind(function(){ @@ -117,20 +119,7 @@ define([ * Set geojson style. */ setStyle: function(opacity) { - this.style = { - strokeWeight: 2, - fillOpacity: opacity, - fillColor: '#FFF', - strokeColor: '#A2BC28', - icon: new google.maps.MarkerImage( - '/assets/icons/marker_exclamation.png', - new google.maps.Size(36, 36), // size - new google.maps.Point(0, 0), // offset - new google.maps.Point(18, 18) // anchor - ) - }; - - this.map.data.setStyle(this.style); + this.style = this.geoStyles.getStyles('country'); }, getIsoLayers: function(layers){ diff --git a/app/assets/javascripts/map/views/tabs/SubscriptionView.js b/app/assets/javascripts/map/views/tabs/SubscriptionView.js index 26f776ca..25cfec41 100644 --- a/app/assets/javascripts/map/views/tabs/SubscriptionView.js +++ b/app/assets/javascripts/map/views/tabs/SubscriptionView.js @@ -9,8 +9,10 @@ define([ 'amplify', 'chosen', 'map/presenters/tabs/SubscriptionPresenter', + 'map/views/GeoStylingView', 'text!map/templates/tabs/subscription.handlebars' -], function(_, Handlebars, amplify, chosen, Presenter, tpl) { +], function(_, Handlebars, amplify, chosen, Presenter, + GeoStylingView, tpl) { 'use strict'; @@ -50,6 +52,7 @@ define([ this.map = map; this.presenter = new Presenter(this); this.model = new SubscriptionModel(); + this.geoStyles = new GeoStylingView(); this.render(); this.setListeners(); }, @@ -161,28 +164,7 @@ define([ * Set geojson style. */ setStyle: function() { - this.style = { - strokeWeight: 2, - fillOpacity: 0, - fillColor: '#FFF', - strokeColor: '#F00', - icon: new google.maps.MarkerImage( - '/assets/icons/marker_exclamation.png', - new google.maps.Size(36, 36), // size - new google.maps.Point(0, 0), // offset - new google.maps.Point(18, 18) // anchor - ) - }; - - this.map.data.setStyle(_.bind(function(feature){ - var strokeColor = (feature.getProperty('color')) ? feature.getProperty('color') : '#F00'; - return ({ - strokeWeight: 2, - fillOpacity: 0, - fillColor: '#FFF', - strokeColor: strokeColor - }); - }, this )); + this.style = this.geoStyles.getStyles('country'); }, setGeojson: function(geojson, color) { @@ -190,10 +172,6 @@ define([ return geojson; }, - - - - /** * COUNTRY */ diff --git a/app/assets/javascripts/views/HeaderView.js b/app/assets/javascripts/views/HeaderView.js index 9f4be40d..098f6395 100644 --- a/app/assets/javascripts/views/HeaderView.js +++ b/app/assets/javascripts/views/HeaderView.js @@ -62,7 +62,6 @@ define([ }, shareOpen: function(event){ - console.log('holi') var shareView = new ShareView().share(event); this.$el.append(shareView.el); }, diff --git a/app/assets/javascripts/widgets/indicators/line/LineChartIndicator.js b/app/assets/javascripts/widgets/indicators/line/LineChartIndicator.js index 29984e9b..2be213f0 100644 --- a/app/assets/javascripts/widgets/indicators/line/LineChartIndicator.js +++ b/app/assets/javascripts/widgets/indicators/line/LineChartIndicator.js @@ -118,7 +118,6 @@ define([ }, resize: function(){ - console.log('hello'); } }); diff --git a/app/assets/javascripts/widgets/indicators/map/MapIndicator.js b/app/assets/javascripts/widgets/indicators/map/MapIndicator.js index 0afdfda8..25112508 100644 --- a/app/assets/javascripts/widgets/indicators/map/MapIndicator.js +++ b/app/assets/javascripts/widgets/indicators/map/MapIndicator.js @@ -16,7 +16,6 @@ define([ }, initialize: function() { - console.log(this.$el); this.constructor.__super__.initialize.apply(this); }, diff --git a/app/assets/stylesheets/layouts/_application.scss b/app/assets/stylesheets/layouts/_application.scss index 6a0f4b3e..ca5c4dbb 100644 --- a/app/assets/stylesheets/layouts/_application.scss +++ b/app/assets/stylesheets/layouts/_application.scss @@ -21,13 +21,39 @@ $main-slider-height-mb: 300px; position: relative; width: 100%; max-height: $main-slider-height-mb; - // overflow: hidden; @media (min-width: $br-mobile) { max-height: 620px; } } + &.-top { + .main-slider-viewport { + overflow: hidden; + } + } + + &.-feature { + .main-slider-viewport { + @media (max-width: $br-mobile) { + min-height: 320px; + overflow: hidden; + + &.slick-initialized { + overflow: visible; + } + } + @media (min-width: $br-mobile) { + min-height: 620px; + overflow: hidden; + + &.slick-initialized { + overflow: visible; + } + } + } + } + nav { position: absolute; bottom: 45px; @@ -257,6 +283,22 @@ $main-slider-height-mb: 300px; } } } + + &.-top { + .slick-dots { + width: 55%; + bottom: 40px; + + > li { + width: 10%; + } + + @media (max-width: $br-mobile) { + opacity: 0; + pointer-events: none; + } + } + } } .slide { @@ -669,6 +711,21 @@ $main-slider-height-mb: 300px; .description-container { margin-right: 20px; + .description { + > span { + font-weight: 300; + } + + > .highlighted { + font-weight: 700; + padding: 0 8px; + + &:first-child { + padding: 0 8px 0 0; + } + } + } + @media screen and (max-width: $br-mobile) { display: flex; flex-direction: column; @@ -687,6 +744,14 @@ $main-slider-height-mb: 300px; text-align: center; font-size: 15px; font-weight: 300; + + > .highlighted { + padding: 0 5px; + + &:first-child { + padding: 0 5px 0 0; + } + } } } } diff --git a/app/assets/stylesheets/modules/home/_features-slider.scss b/app/assets/stylesheets/modules/home/_features-slider.scss index b175f80c..4bec0cc0 100644 --- a/app/assets/stylesheets/modules/home/_features-slider.scss +++ b/app/assets/stylesheets/modules/home/_features-slider.scss @@ -243,6 +243,9 @@ $slider-height-mb: 550px; .col-container { background-color: $brown; } + .slide-background { + background-image: image-url('home/features/slider/slide3.jpg'); + } } } } diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim index ec29fdc4..5d568075 100644 --- a/app/views/home/index.html.slim +++ b/app/views/home/index.html.slim @@ -1,5 +1,5 @@ .layout-content - section#main-slider.main-slider + section#main-slider.main-slider.-top nav.hidden.mobile-hide h2 | Suggestions for getting started @@ -38,7 +38,7 @@ / strong data and methods / i.img.report-story - ul.main-slider-viewport + ul.main-slider-viewport.home-slider li.slide.slide0.current a href="http://bit.ly/1JVtYtD" .inner @@ -157,8 +157,8 @@ .description-container h3.title Meaningful information p.description - | GFW Climate catalyzes action on climate change by providing - span timely, credible answers + | GFW Climate catalyzes action on climate change by providing + span timely, credible answers | to questions about carbon emissions from tropical deforestation. .col.-c6.overlap-image.overflow-allowed .translated-image @@ -170,14 +170,14 @@ .col-container .description-container h3.title Forests in high definition - p.description - | Explore the landscape and analyze carbon data on the + p.description + | Explore the landscape and analyze carbon data on the span interactive map. .link-container a(href="/map" class="btn medium blue") Explore map a(href="http://data.globalforestwatch.org/datasets/d87217b5732347ab8a04ef8ffacff1fd_8" target="_blank" class="btn medium blue") Download data - + section.feature-section.-country-profiles .feature-content.inner @@ -185,9 +185,9 @@ .col-container .description-container h3.title Interactive dashboards - p.description - span Customize reports - | to show the data you want to see, the way you want to see it. Combine your indicators then save, + p.description + span Customize reports + | to show the data you want to see, the way you want to see it. Combine your indicators then save, | print or share your report with the world. .link-container @@ -203,10 +203,10 @@ .col-container .description-container h3.title Compare countries, jurisdictions and areas of interest - p.description - | Easy to access, easy to understand, + p.description + | Easy to access, easy to understand, span everything in one place - | . Select multiple areas of interest and compare information side-by-side so + | . Select multiple areas of interest and compare information side-by-side so | you can make the decisions that matter. .link-container @@ -218,9 +218,9 @@ .col-container .description-container h3.title Monitor progress - p.description - | See how - span emissions from tropical deforestation + p.description + | See how + span emissions from tropical deforestation | have changed over the 21st century. .link-container @@ -229,18 +229,18 @@ = image_tag("home/features/img-pantropical.png") section.feature-section.-profiles - section.m-feature-slider.main-slider - - ul.main-slider-viewport + section.m-feature-slider.main-slider.-feature + + ul.main-slider-viewport.feature-slider li.slide.slide0.current .slide-container .col.-c5 .col-container .description-container h3.title Features for Journalists - p.description - span.highlighted On a deadline? - | Find facts, maps and figures for your story about forests and climate change here, now. + p.description + span.highlighted On a deadline? + span Find facts, maps and figures for your story about forests and climate change here, now. .link-container a(href="https://www.youtube.com/watch?v=P_-0NRTHZyM" class="btn medium white" target="_blank") Watch the video @@ -253,10 +253,10 @@ .col-container .description-container h3.title Features for conservation organizations - p.description - | Share your work's - span.highlighted carbon successes - | with donors and partners. Explore opportunities for new projects, and find the information you need to attract support. + p.description + span Share your work's + span.highlighted carbon successes + span with donors and partners. Explore opportunities for new projects, and find the information you need to attract support. .link-container a(href="https://www.youtube.com/watch?v=x0XKNAj6Cos" class="btn medium white" target="_blank") Watch the video @@ -269,9 +269,9 @@ .col-container .description-container h3.title Features for donors/government - p.description - span.highlighted Informed decisions for maximum impact. - | Compare data, explore trends, and gain new insights about the regions you support. + p.description + span.highlighted Informed decisions for maximum impact. + span Compare data, explore trends, and gain new insights about the regions you support. .link-container a(href="/compare-countries" class="btn medium white") Learn more @@ -284,10 +284,10 @@ .col-container .description-container h3.title Features for businesses - p.description - | Perform - span.highlighted on-the-fly - | analysis to estimate emissions from deforestation in your sourcing regions. + p.description + span Perform + span.highlighted on-the-fly + span analysis to estimate emissions from deforestation in your sourcing regions. .link-container a(href="/compare-countries" class="btn medium white") Learn more @@ -307,8 +307,4 @@ / li.profile.-policy-researcher / = image_tag("home/features/profiles/profile4b.png", class: 'profile-img') / p.profile-name Policy Researcher - - - - diff --git a/dump.rdb b/dump.rdb deleted file mode 100644 index b0cf76ef..00000000 Binary files a/dump.rdb and /dev/null differ