From 37bb998f6b61a2771dfe33001b2241d82878e6be Mon Sep 17 00:00:00 2001 From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= Date: Mon, 10 Oct 2016 12:59:21 +0200 Subject: [PATCH] Network page --- .../src/assets/img/map-marker-hover.png | Bin 0 -> 1015 bytes app/static/src/assets/img/map-marker.png | Bin 0 -> 960 bytes app/static/src/js/index.js | 2 + .../src/js/modules/lightslidernetwork-init.js | 205 ++++++++++++++++++ app/static/src/sass/modules/_all.scss | 1 + .../sass/modules/sliders/_slider-network.scss | 98 +++++++++ app/templates/base.html | 1 + app/templates/network/organization_list.html | 107 ++++++--- 8 files changed, 385 insertions(+), 29 deletions(-) create mode 100644 app/static/src/assets/img/map-marker-hover.png create mode 100644 app/static/src/assets/img/map-marker.png create mode 100644 app/static/src/js/modules/lightslidernetwork-init.js create mode 100644 app/static/src/sass/modules/sliders/_slider-network.scss diff --git a/app/static/src/assets/img/map-marker-hover.png b/app/static/src/assets/img/map-marker-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..74163a7622babd6c37694d17658eb35932748e37 GIT binary patch literal 1015 zcmaJ=PiWIn7|)!HF)a=SVWRlRc5q|Ozc#gr>(-`eU0@ltE7;@GcyKUkvZ@%ks)~W=0%Ts^5DsruI)Tn!z1r|AK&ly{l8P1zZe@jHAGQV zOq*59YVQ7VZ)wX_u<0&e8pT} zHYJOmnFdp#Ob8r^4G=mjZXkyly2UFKIa0GUXqn*U480#zRWE@&@*xnJRNUkf0yr-* zyeJ9jjqG(47P zxG1HLp|1bm)N#7j0WQOXc>hTpRMtGmmSKQaeUmh9X*6=>$$1|d82J^1RytKIH4sKY z19>2ykE$jzA~>fTrtL=R@fJ?kWz7w+;hIoWGc;jhY}=9(Dwj;>ifTGlRCvCS%84Q; zDMT(Rg`%oR9juDXRR_AbgS8H@g`U`GBpi=;R-tcSg;vo=4rrw=+r48^dh)fgR_|Ey zJ+UkahK(BhSHn9hGDVTt9bfY3E&z1N)ca(->pP_cYTMBQpZo8`8A?_yBV#bR+v{`DT^C_0Ol$^ AfB*mh literal 0 HcmV?d00001 diff --git a/app/static/src/assets/img/map-marker.png b/app/static/src/assets/img/map-marker.png new file mode 100644 index 0000000000000000000000000000000000000000..faae65d9a9f64bcb65c856b4af875cd930317416 GIT binary patch literal 960 zcmaJ=y>HV%6n6^>sGqKj56kDFdlx``$gh-|v0DXdK*MU%Ro!FwDBOZ#3z7 zIsLBY=>PqnH&5xYLF#RCh`VG2Bg9l)+(E$dVGlJCbjQc1sKPLp?s}~@Y1iM)__H~=Xl?BF5MSQ_bB3Vyht4dQv3Xu1jl_Gf?6%Dn#{@I zwhbLGNY!^{INMgOASN(ykY#8rW#T-~RSSktELTmXTrzc0te2{?EGRmaO}%a!x{_fH z>esn%hZ*G2@PKDPis~t>Tkw@ZI#$ ltz410{xx^HcU;;#Sz$KiE8mS@KVPOhWz`Ri5BlThe*rTzC*lAA literal 0 HcmV?d00001 diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js index 37b62677..2ee143d7 100644 --- a/app/static/src/js/index.js +++ b/app/static/src/js/index.js @@ -13,6 +13,7 @@ var OverflowInit = require('./modules/overflow-init'); var StickyKitInit = require('./modules/sticky-kit-init'); var LightSliderPageInit = require('./modules/lightsliderpage-init'); var LightSliderHomeInit = require('./modules/lightsliderhome-init'); +var LightSliderNetworkInit = require('./modules/lightslidernetwork-init'); var HomeMenu = require('./modules/home-menu'); var Audio = require('./modules/audio'); @@ -31,5 +32,6 @@ window[OverflowInit] = new OverflowInit(); window[StickyKitInit] = new StickyKitInit(); window[LightSliderPageInit] = new LightSliderPageInit(); window[LightSliderHomeInit] = new LightSliderHomeInit(); +window[LightSliderNetworkInit] = new LightSliderNetworkInit(); window[HomeMenu] = new HomeMenu(); window[Audio] = new Audio(); diff --git a/app/static/src/js/modules/lightslidernetwork-init.js b/app/static/src/js/modules/lightslidernetwork-init.js new file mode 100644 index 00000000..b67628d5 --- /dev/null +++ b/app/static/src/js/modules/lightslidernetwork-init.js @@ -0,0 +1,205 @@ +var LightSliderNetworkInit = function() { + + this.slider = null; + this.map = null; + this.markers = []; + this.currentLine = null; + this.animationInterval = null; + + // + // Init + // + this.init(); + +}; + +LightSliderNetworkInit.prototype.init = function() { + + var that = this; + + // + // Slider init + // + that.slider = $('[data-slider-network]').lightSlider({ + item: 4, + slideMargin: 10, + pager: false, + controls: false, + loop: false, + onSliderLoad: function(elem) { + elem.parents('.slider-network').find('.lSPrev').click(function(e) { + elem.goToPrevSlide(); + }); + elem.parents('.slider-network').find('.lSNext').click(function(e) { + elem.goToNextSlide(); + }); + }, + onBeforeSlide: function(elem) { + if (that.currentLine) { + that.currentLine.setMap(null); + } + } + }); + + // + // Init map + // + that.map = new google.maps.Map(document.getElementById('network-map'), { + zoom: 4, + center: {lat: -25.363, lng: 131.044}, + styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}] + }); + + google.maps.event.addListenerOnce(that.map, 'projection_changed', function() { + that.initMarkers(); + }); + +}; + +LightSliderNetworkInit.prototype.initMarkers = function() { + + var that = this; + + $('[data-marker-idx]').each(function(idx) { + + that.markers.push({ + 'lat': parseFloat($(this).attr('data-marker-lat').replace(',', '.')), + 'lng': parseFloat($(this).attr('data-marker-lng').replace(',', '.')), + 'elem': $(this), + 'marker': new google.maps.Marker({ + position: {lat: parseFloat($(this).attr('data-marker-lat').replace(',', '.')), lng: parseFloat($(this).attr('data-marker-lng').replace(',', '.'))}, + map: that.map, + icon: "/static/img/map-marker.png" + }) + }); + + }); + + console.log(that.markers); + that.markers.forEach(function(m, i) { + + m.marker.addListener('mouseover', function(e) { + + this.setIcon("/static/img/map-marker-hover.png"); + + var target = that.markers[i].elem[0]; + + var idx = target.getAttribute('data-marker-idx'); + var lat = that.markers[idx].lat; + var lng = that.markers[idx].lng; + + that.slider.goToSlide(Math.floor(i/4)); + + setTimeout(function() { + var x = target.offsetLeft + (target.offsetWidth * .5); + + var buttonPos = target.getBoundingClientRect(); + var x = (buttonPos.left + (buttonPos.width * .5)) - document.getElementById('network-map').getBoundingClientRect().left; + + var fakeLatLng = that.point2LatLng({x: x, y: document.getElementById('network-map').getBoundingClientRect().height}, that.map); + + that.drawLine(fakeLatLng, new google.maps.LatLng(that.markers[idx].lat, that.markers[idx].lng)); + }, 250); + + }); + + m.marker.addListener('mouseout', function(e) { + + clearInterval(that.animationInterval); + this.setIcon("/static/img/map-marker.png"); + + if (that.currentLine) { + that.currentLine.setMap(null); + } + + }); + + m.elem[0].addEventListener('mouseover', function(e) { + + var idx = e.currentTarget.getAttribute('data-marker-idx'); + var lat = that.markers[idx].lat; + var lng = that.markers[idx].lng; + + that.markers[idx].marker.setIcon("/static/img/map-marker-hover.png"); + + that.map.panTo({lat: lat, lng: lng}); + + var x = e.currentTarget.offsetLeft + (e.currentTarget.offsetWidth * .5); + + var buttonPos = e.currentTarget.getBoundingClientRect(); + var x = (buttonPos.left + (buttonPos.width * .5)) - document.getElementById('network-map').getBoundingClientRect().left; + + var fakeLatLng = that.point2LatLng({x: x, y: document.getElementById('network-map').getBoundingClientRect().height}, that.map); + + that.drawLine(fakeLatLng, new google.maps.LatLng(that.markers[idx].lat, that.markers[idx].lng)); + + }); + + m.elem[0].addEventListener('mouseout', function(e) { + + var idx = e.currentTarget.getAttribute('data-marker-idx'); + that.markers[idx].marker.setIcon("/static/img/map-marker.png"); + + clearInterval(that.animationInterval); + + if (that.currentLine) { + that.currentLine.setMap(null); + } + + }); + + }); + +}; + +LightSliderNetworkInit.prototype.drawLine = function(start, end) { + + var that = this; + + if (that.currentLine) { + that.currentLine.setMap(null); + } + + that.currentLine = new google.maps.Polyline({ + path: [ + start, + start + ], + strokeColor: 'red', + strokeOpacity: 1.0, + strokeWeight: 1, + geodesic: false, + map: that.map + }); + + var step = 0; + var numSteps = 25; + var timePerStep = 5; + + that.animationInterval = setInterval(function() { + + step += 1; + + if (step > numSteps) { + clearInterval(that.animationInterval); + } else { + var currentPosLatLng = google.maps.geometry.spherical.interpolate(start, end, step / numSteps); + that.currentLine.setPath([start, currentPosLatLng]); + } + + }, timePerStep); + +}; + +LightSliderNetworkInit.prototype.point2LatLng = function(point, map) { + + var that = this; + var topRight = that.map.getProjection().fromLatLngToPoint(that.map.getBounds().getNorthEast()); + var bottomLeft = that.map.getProjection().fromLatLngToPoint(that.map.getBounds().getSouthWest()); + var scale = Math.pow(2, that.map.getZoom()); + var worldPoint = new google.maps.Point(point.x / scale + bottomLeft.x, point.y / scale + topRight.y); + return that.map.getProjection().fromPointToLatLng(worldPoint); + +}; + +module.exports = LightSliderNetworkInit; diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss index a615fb8f..77251ca4 100755 --- a/app/static/src/sass/modules/_all.scss +++ b/app/static/src/sass/modules/_all.scss @@ -19,6 +19,7 @@ // Sliders @import 'sliders/slider-page'; @import 'sliders/slider-home'; +@import 'sliders/slider-network'; // Page modules @import 'breadcrumb'; diff --git a/app/static/src/sass/modules/sliders/_slider-network.scss b/app/static/src/sass/modules/sliders/_slider-network.scss new file mode 100644 index 00000000..c523019a --- /dev/null +++ b/app/static/src/sass/modules/sliders/_slider-network.scss @@ -0,0 +1,98 @@ +$module: ".slider-network"; + +#{$module} { + + padding-right: 140px; + position: relative; + @include margin-bottom(6); + + ul { + + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + margin-top: 10px; + + } + + &__slide { + + + + } + + &__slide-image { + + background-size: contain; + background-repeat: no-repeat; + background-color: #D8D8D8; + background-position: center center; + width: 100%; + height: 140px; + + @include margin-bottom(.5); + + } + + &__slide-title { + + @include font-size(m); + @include line-height(1); + @include typeface(sans-serif); + font-weight: weight(bold); + + } + + &__slide-subtitle { + + @include font-size(xs); + @include line-height(1); + @include typeface(serif); + font-weight: weight(bold); + + } + + // + // Overrides lightSlider + // + + .lSAction { + + position: absolute; + top: 10px; + right: 0px; + + > a:hover { + width: 65px; + + background: $color-main; + &:before { + color: #363636; + } + } + + > a:before { + color: white; + line-height: 65px; + } + + .lSPrev, .lSNext { + + margin-right: 2px; + width: 65px; + height: 65px; + position: static; + display: inline-block; + + @include transform(none); + margin: 0; + + background: #363636; + color: white; + + } + + } + +} diff --git a/app/templates/base.html b/app/templates/base.html index e7b55441..66e81cae 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -30,6 +30,7 @@ {% endifinstalled %} + {% compress css %} diff --git a/app/templates/network/organization_list.html b/app/templates/network/organization_list.html index 552bde7b..4a38a6cf 100644 --- a/app/templates/network/organization_list.html +++ b/app/templates/network/organization_list.html @@ -3,9 +3,11 @@ {% block meta_title %}{% trans "Network" %}{% endblock %} -{% block meta_description %}{% metablock %} -{{ organization.description }} -{% endmetablock %}{% endblock %} +{% block meta_description %} + {% metablock %} + {{ organization.description }} + {% endmetablock %} +{% endblock %} {% block page_class %} organization @@ -20,31 +22,78 @@
  • {% trans "Network" %}
    • {% endblock %} -{% block page_content %} - - {% for organization in organizations %} - - {{ organization.name }}
    - {{ organization.lat }}
    - {{ organization.lon }}
    - {{ organization.city }}
    - {{ organization.country.name }}
    - - - {% with organization.links|get_type_link:'link' as links %} - {% if links %} - {{ links.first }} - {% endif %} - {% endwith %} -
    - - {% with organization.images.all|get_type:'logo' as images %} - {% if images %} - logo {{ organization.name }} - {% endif %} - {% endwith %} -

    - - {% endfor %} +{% block page_slider %} + +
    + +
    + +
    + +
    + +
    + +
    + +
      + + {% for organization in organizations %} + +
    • +
      +
      +
      + {{ organization.name }} +
      +
      + {{ organization.city }}, {{ organization.country.name }} +
      +
      • + + {% comment %} + {{ organization.name }}
      + {{ organization.lat }}
      + {{ organization.lon }}
      + {{ organization.city }}
      + {{ organization.country.name }}
      + + + {% with organization.links|get_type_link:'link' as links %} + {% if links %} + {{ links.first }} + {% endif %} + {% endwith %} +
      + + {% with organization.images.all|get_type:'logo' as images %} + {% if images %} + logo {{ organization.name }} + {% endif %} + {% endwith %} +

      + {% endcomment %} + + {% endfor %} + +
    + +
    + +
    + +
    + +
    + +
    {% endblock %} -- 2.39.5