From: Jérémy Fabre Date: Mon, 10 Oct 2016 10:59:21 +0000 (+0200) Subject: Network page X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=37bb998f6b61a2771dfe33001b2241d82878e6be;p=mezzo.git Network page --- 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 00000000..74163a76 Binary files /dev/null and b/app/static/src/assets/img/map-marker-hover.png differ 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 00000000..faae65d9 Binary files /dev/null and b/app/static/src/assets/img/map-marker.png differ 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 %}