diff -r 245b4df137d3 -r dbb941b9fb66 cms/app-client/app/components/visu-carto.js --- a/cms/app-client/app/components/visu-carto.js Fri Dec 16 17:43:07 2016 +0100 +++ b/cms/app-client/app/components/visu-carto.js Sat Dec 17 23:43:28 2016 +0100 @@ -6,204 +6,257 @@ export default Ember.Component.extend({ - constants: Ember.inject.service(), - colors: Ember.inject.service(), + constants: Ember.inject.service(), + colors: Ember.inject.service(), - map: null, + map: null, - continentsMapVar: AmCharts.maps.continentsLow, - continentsAreas: [], - countriesMapVar: AmCharts.maps.worldLow, - countriesAreas: [], - franceMapVar: AmCharts.maps.france2016Low, - franceAreas: [], + continentsMapVar: AmCharts.maps.continentsLow, + continentsAreas: [], + countriesMapVar: AmCharts.maps.worldLow, + countriesAreas: [], + franceMapVar: AmCharts.maps.france2016Low, + franceAreas: [], + + dataProvider: {}, + - dataProvider: {}, + area: null, + originalZoomLevel: null, + originalZoomLongitude: null, + originalZoomLatitude: null, - color: 'rgba(113,132,141,.2)', + color: 'rgba(113,132,141,.2)', - filter: Ember.inject.service(), - locationObserver: Ember.observer('filter.location', function() { - if(this.get('filter').get('location') === null) { - this.sendAction('setLocation', this.get('constants').GEONAMES['world']); - this.get('map').selectObject(); - } else { - this.sendAction('setLocation', commonUtils.getGeonamesCode(this.get('filter').get('location'))); - } - }), + filter: Ember.inject.service(), + locationObserver: Ember.observer('filter.location', function () { + if (this.get('filter').get('location') === null) { + this.sendAction('setLocation', this.get('constants').GEONAMES['world']); + this.get('map').selectObject(); + } else { + this.sendAction('setLocation', commonUtils.getGeonamesCode(this.get('filter').get('location'))); + } + }), - geostats: [], - observerGeostats: Ember.observer('geostats', function() { - if(this.get('map')) { - if(this.get('map').selectedObject.id) { - if(this.get('map').selectedObject.parentObject.mapVar === this.get('countriesMapVar')) { - if(this.get('map').selectedObject.id === this.get('constants').GEONAMES['france']) { - this.setFranceAreas(); - this.set('dataProvider', { - 'mapVar': this.get('franceMapVar'), - 'getAreasFromMap': true, - 'areas': this.get('franceAreas') - }); - this.get('map')['dataProvider'] = this.get('dataProvider'); - this.get('map').validateData(); - } - } else if(this.get('map').selectedObject.parentObject.mapVar === this.get('continentsMapVar')) { - this.setCountriesAreas(); - this.set('dataProvider', { - 'mapVar': this.get('countriesMapVar'), - 'getAreasFromMap': true, - 'areas': this.get('countriesAreas'), - 'zoomLevel': this.get('map').zoomLevel(), - 'zoomLatitude': this.get('map').zoomLatitude(), - 'zoomLongitude': this.get('map').zoomLongitude() - }); - this.get('map')['dataProvider'] = this.get('dataProvider'); - this.get('map').validateData(); - } - } else { - this.setContinentsAreas(); - this.set('dataProvider', { - 'mapVar': this.get('continentsMapVar'), - 'areas': this.get('continentsAreas') - }); - this.createAmMap(); - } + geostats: [], + observerGeostats: Ember.observer('geostats', function () { + let map = this.get('map'); + if(!map) { + return; + } + let selectedObject = map.selectedObject; + if (selectedObject.id) { + if (selectedObject.parentObject.mapVar === this.get('countriesMapVar')) { + if (selectedObject.id === this.get('constants').GEONAMES['france']) { + this.setProperties({ + area: 'france', + originalZoomLevel: null, + originalZoomLongitude: null, + originalZoomLatitude: null, + }); + this.setFranceAreas(); + this.set('dataProvider', { + 'mapVar': this.get('franceMapVar'), + 'getAreasFromMap': true, + 'areas': this.get('franceAreas') + }); + map['zoomControl'] = { + 'zoomControlEnabled': false + }; + map['dragMap'] = false; + map['dataProvider'] = this.get('dataProvider'); + map.validateData(); } - }), - - init: function() { - this._super(...arguments); - if (ENV.environment === 'development') { - this.set('color', '#f3f3f3'); - } - this.get('service'); // gotcha cf: https://github.com/emberjs/ember.js/issues/10821 - }, + } else if (selectedObject.parentObject.mapVar === this.get('continentsMapVar')) { + this.setProperties({ + area: 'countries', + originalZoomLevel: map.zoomLevel(), + originalZoomLongitude: map.zoomLongitude(), + originalZoomLatitude: map.zoomLatitude() + }); - setFranceAreas: function() { - var self = this; - var france2016LowAreas = []; - this.get('franceMapVar')['svg']['g']['path'].forEach(function(area) { - var object = { - 'id': area.id, - 'passZoomValuesToTarget': false, - 'autoZoom': false - }; - var departments = self.get('geostats').find(geostat => geostat.id === area.id); - if(typeof departments === 'undefined') { - object['mouseEnabled'] = false; - object['color'] = self.get('color'); - } else { - object['value'] = departments.get('count'); - object['title'] = area.title + " (" + departments.get('count') + ")"; - } - france2016LowAreas.push(object); + this.setCountriesAreas(); + this.set('dataProvider', { + 'mapVar': this.get('countriesMapVar'), + 'getAreasFromMap': true, + 'areas': this.get('countriesAreas'), + 'zoomLevel': map.zoomLevel(), + 'zoomLatitude': map.zoomLatitude(), + 'zoomLongitude': map.zoomLongitude() }); - this.set('franceAreas', france2016LowAreas); - }, + map['dataProvider'] = this.get('dataProvider'); + map['zoomControl'] = { + 'zoomControlEnabled': true + }; + map['dragMap'] = true; + map.validateData(); + } + } else { + this.setProperties({ + area: 'continents', + originalZoomLevel: null, + originalZoomLongitude: null, + originalZoomLatitude: null, + }); + this.setContinentsAreas(); + this.set('dataProvider', { + 'mapVar': this.get('continentsMapVar'), + 'areas': this.get('continentsAreas') + }); + map['zoomControl'] = { + 'zoomControlEnabled': false + }; + map['dragMap'] = false; + this.createAmMap(); + } + }), + + init: function () { + this._super(...arguments); + if (ENV.environment === 'development') { + this.set('color', '#f3f3f3'); + } + this.get('service'); // gotcha cf: https://github.com/emberjs/ember.js/issues/10821 + }, - setCountriesAreas: function() { - var self = this; - var worldLowAreas = []; - this.get('countriesMapVar')['svg']['g']['path'].forEach(function(area) { - var countries = self.get('geostats').find(geostat => geostat.id === area.id); - if(typeof countries === 'undefined') { - worldLowAreas.push({ - 'id': area.id, - 'mouseEnabled': false, - 'color': self.get('color') - }); - } else { - if(typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') { - var object = { - 'id': area.id, - 'selectable': true, - 'value': countries.get('count'), - 'title': area.title + " (" + countries.get('count') + ")" - }; - if(area.id === 'FR') { - object['autoZoom'] = true; - } - worldLowAreas.push(object); - } - } - }); - this.set('countriesAreas', worldLowAreas); - }, + setFranceAreas: function () { + var self = this; + var france2016LowAreas = []; + this.get('franceMapVar')['svg']['g']['path'].forEach(function (area) { + var object = { + 'id': area.id, + 'passZoomValuesToTarget': false, + 'autoZoom': false + }; + var departments = self.get('geostats').find(geostat => geostat.id === area.id); + if (typeof departments === 'undefined') { + object['mouseEnabled'] = false; + object['color'] = self.get('color'); + } else { + object['value'] = departments.get('count'); + object['title'] = area.title + " (" + departments.get('count') + ")"; + } + france2016LowAreas.push(object); + }); + this.set('franceAreas', france2016LowAreas); + }, - setContinentsAreas: function() { - var self = this; - var continentsLowAreas = []; - this.get('continentsMapVar')['svg']['g']['path'].forEach(function(area) { - var object = { - 'id': area.id, - 'passZoomValuesToTarget': true, - 'selectable': true, - 'mouseEnabled': true, - 'autoZoom': true - }; - var continent = self.get('geostats').find(geostat => geostat.id === area.id); - if(typeof continent === 'undefined') { - object['mouseEnabled'] = false; - object['color'] = self.get('color'); - } else { - object['value'] = continent.get('count'); - object['title'] = area.title + " (" + continent.get('count') + ")"; - } - continentsLowAreas.push(object); + setCountriesAreas: function () { + var self = this; + var worldLowAreas = []; + this.get('countriesMapVar')['svg']['g']['path'].forEach(function (area) { + var countries = self.get('geostats').find(geostat => geostat.id === area.id); + if (typeof countries === 'undefined') { + worldLowAreas.push({ + 'id': area.id, + 'mouseEnabled': false, + 'color': self.get('color') }); - this.set('continentsAreas', continentsLowAreas); - }, + } else { + if (typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') { + var object = { + 'id': area.id, + 'selectable': true, + 'value': countries.get('count'), + 'title': area.title + " (" + countries.get('count') + ")" + }; + if (area.id === 'FR') { + object['autoZoom'] = true; + } + worldLowAreas.push(object); + } + } + }); + this.set('countriesAreas', worldLowAreas); + }, - didInsertElement: function(){ - this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); - this.createAmMap(); - }, + setContinentsAreas: function () { + var self = this; + var continentsLowAreas = []; + this.get('continentsMapVar')['svg']['g']['path'].forEach(function (area) { + var object = { + 'id': area.id, + 'passZoomValuesToTarget': true, + 'selectable': true, + 'mouseEnabled': true, + 'autoZoom': true + }; + var continent = self.get('geostats').find(geostat => geostat.id === area.id); + if (typeof continent === 'undefined') { + object['mouseEnabled'] = false; + object['color'] = self.get('color'); + } else { + object['value'] = continent.get('count'); + object['title'] = area.title + " (" + continent.get('count') + ")"; + } + continentsLowAreas.push(object); + }); + this.set('continentsAreas', continentsLowAreas); + }, - createAmMap: function() { + didInsertElement: function () { + this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); + this.createAmMap(); + }, + + createAmMap: function () { - this.setContinentsAreas(); - this.set('dataProvider', { - 'mapVar': this.get('continentsMapVar'), - 'areas': this.get('continentsAreas') - }); - this.set('map', AmCharts.makeChart('mapdiv', { - 'type': 'map', - 'fontFamily': 'sans-serif', - 'fontSize': '12px', - 'dragMap': false, - 'zoomOnDoubleClick': false, - 'language': 'fr', - 'areasSettings': { - 'autoZoom': false, - 'selectable': true, - 'color': this.get('colors').LINEAR_COLOR_START, - 'colorSolid': this.get('colors').LINEAR_COLOR_END, - 'colorOutline': '#253946', - 'selectedColor': '#0085cb', - 'rollOverColor': '#0085cb', - 'rollOverOutlineColor': '#ffffff' - }, - 'zoomControl': { - 'zoomControlEnabled': false, - }, - 'dataProvider': this.get('dataProvider'), - listeners: [{ - 'event':'clickMapObject', - 'method': Ember.run.bind(this, 'clickMapObject') - }, { - 'event':'homeButtonClicked', - 'method': Ember.run.bind(this, 'homeButtonClicked') - }] - })); - }, + this.setContinentsAreas(); + this.set('dataProvider', { + 'mapVar': this.get('continentsMapVar'), + 'areas': this.get('continentsAreas') + }); + this.set('map', AmCharts.makeChart('mapdiv', { + 'type': 'map', + 'accessible': true, + 'fontFamily': 'sans-serif', + 'fontSize': '12px', + 'dragMap': false, + 'zoomOnDoubleClick': false, + 'language': 'fr', + 'areasSettings': { + 'autoZoom': false, + 'selectable': true, + 'color': this.get('colors').LINEAR_COLOR_START, + 'colorSolid': this.get('colors').LINEAR_COLOR_END, + 'colorOutline': '#253946', + 'selectedColor': '#0085cb', + 'rollOverColor': '#0085cb', + 'rollOverOutlineColor': '#ffffff' + }, + 'zoomControl': { + 'zoomControlEnabled': false, + }, + 'dataProvider': this.get('dataProvider'), + listeners: [{ + 'event': 'clickMapObject', + 'method': Ember.run.bind(this, 'clickMapObject') + }, { + 'event': 'homeButtonClicked', + 'method': Ember.run.bind(this, 'homeButtonClicked') + }] + })); + }, - clickMapObject: function(event) { - this.get('filter').setFilter('location', commonConstants.GEONAMES_BASE_URL + event.mapObject.id); - }, + clickMapObject: function (event) { + this.get('filter').setFilter('location', commonConstants.GEONAMES_BASE_URL + event.mapObject.id); + }, + + homeButtonClicked: function () { + const map = this.get('map'); + const { area, originalZoomLevel, originalZoomLongitude, originalZoomLatitude } = + this.getProperties('area', 'originalZoomLevel', 'originalZoomLongitude', 'originalZoomLatitude'); - homeButtonClicked: function() { - this.get('filter').removeFilter('location', null); - this.sendAction('setLocation', this.get('constants').GEONAMES['world']); + if(area === 'countries' && ( + (originalZoomLevel && originalZoomLevel !== map.zoomLevel()) || + (originalZoomLatitude && originalZoomLatitude !== map.zoomLatitude()) || + (originalZoomLongitude && originalZoomLongitude !== map.zoomLongitude()) + )) { + // in mode countries, the map has been moved or zoomed, just reset the view + return; } + this.get('filter').removeFilter('location', null); + this.sendAction('setLocation', this.get('constants').GEONAMES['world']); + } });