National Progress Update

_includes/global_page_includes/head.html

@@ -81,8 +81,10 @@
   {% endif %}
   <link rel="stylesheet" href="{{ root_path }}{{ '/css/main.css' | sass_cache_bust  }}" />
   {% if page.title == 'National Progress' %}
-      <script src='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
-    <link href='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />
-    {% endif %}
+    <link rel="stylesheet" href="//npmcdn.com/[email protected]/dist/leaflet.css" />
+    <link rel="stylesheet" href="/css/leaflet.rrose.css" />
+    <script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
+    <script src="/js/leaflet.rrose-src.js"></script>
+  {% endif %}
   {{ custom_css }}
 </head>

_includes/jumbotrons/20160721_national-progress-jumbo.html

@@ -0,0 +1,12 @@
+<div class="jumbotron dark" style="background-image:url('/images/crowd.jpg');">
+  <div class="container">
+    <h1 class="text-center margin-bottom-xs">{{include.title}}</h1>
+    <div class="col-md-8 center-block text-center">
+      <h4 class="asi-if-h4 visible-xs text-center text-grey-light margin-bottom-xs">Tap on a state for information on progress, or</h4>
+      <h4 class="hidden-xs text-center text-grey-light margin-bottom-sm">Hover over a state for information on progress, click for more information on local efforts, or</h4>
+      <a class="btn btn-mayday" href="#get-involved" style="display:inline-block;position:relative;z-index:100;width:auto;">Get Involved</a>
+    </div>
+    {% if include.sub_title %}<h2 class="text-center">{{include.sub_title}}</h2>{% endif %}
+    <div id="map" class="margin-top-sm"></div>
+  </div>
+</div>

css/leaflet.rrose.css

@@ -0,0 +1,139 @@
+/* Rrose layout */
+
+.leaflet-rrose {
+    position: absolute;
+    text-align: center;
+}
+
+.leaflet-rrose-content-wrapper {
+    padding: 1px;
+    text-align: left;
+}
+
+.leaflet-rrose-content {
+    margin: 14px 20px;
+}
+
+.leaflet-rrose-tip-container {
+    margin: 0 auto;
+    width: 40px;
+    height: 20px;
+    position: relative;
+    overflow: hidden;
+}
+
+.leaflet-rrose-tip-container-se, .leaflet-rrose-tip-container-ne {
+    margin-left: 0;
+}
+
+.leaflet-rrose-tip-container-sw, .leaflet-rrose-tip-container-nw {
+    margin-right: 0;
+}
+
+.leaflet-rrose-tip {
+    width: 15px;
+    height: 15px;
+    padding: 1px;
+
+    -moz-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.leaflet-rrose-tip-n {
+    margin: -8px auto 0;
+}
+
+.leaflet-rrose-tip-s {
+    margin: 11px auto 0;
+}
+
+.leaflet-rrose-tip-se {
+    margin: 11px 11px 11px -8px; overflow: hidden;
+}
+
+.leaflet-rrose-tip-sw {
+    margin: 11px 11px 11px 32px; overflow: hidden;
+}
+
+.leaflet-rrose-tip-ne {
+    margin: -8px 11px 11px -8px; overflow: hidden;
+}
+
+.leaflet-rrose-tip-nw {
+    margin: -8px 11px 11px 32px; overflow: hidden;
+}
+
+a.leaflet-rrose-close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 4px 5px 0 0;
+    text-align: center;
+    width: 18px;
+    height: 14px;
+    font: 16px/14px Tahoma, Verdana, sans-serif;
+    color: #c3c3c3;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+a.leaflet-rrose-close-button:hover {
+    color: #999;
+}
+
+.leaflet-rrose-content p {
+    margin: 18px 0;
+}
+
+.leaflet-rrose-scrolled {
+    overflow: auto;
+    border-bottom: 1px solid #ddd;
+    border-top: 1px solid #ddd;
+}
+
+/* Visual appearance */
+
+.leaflet-rrose-content-wrapper, .leaflet-rrose-tip {
+    background: white;
+
+    box-shadow: 0 3px 10px #888;
+    -moz-box-shadow: 0 3px 10px #888;
+    -webkit-box-shadow: 0 3px 14px #999;
+}
+
+.leaflet-rrose-content-wrapper {
+    -moz-border-radius:    20px;
+    -webkit-border-radius: 20px;
+    border-radius:         20px;
+}
+
+.leaflet-rrose-content-wrapper-se {
+    -moz-border-radius:    0 20px 20px 20px;
+    -webkit-border-radius: 0 20px 20px 20px;
+    border-radius:         0 20px 20px 20px;
+}
+
+.leaflet-rrose-content-wrapper-sw {
+    -moz-border-radius:    20px 0 20px 20px;
+    -webkit-border-radius: 20px 0 20px 20px;
+    border-radius:         20px 0 20px 20px;
+}
+
+.leaflet-rrose-content-wrapper-nw, .leaflet-rrose-content-wrapper-w {
+    -moz-border-radius:    20px 20px 0 20px;
+    -webkit-border-radius: 20px 20px 0 20px;
+    border-radius:         20px 20px 0 20px;
+}
+
+.leaflet-rrose-content-wrapper-ne, .leaflet-rrose-content-wrapper-e {
+    -moz-border-radius:    20px 20px 20px 0;
+    -webkit-border-radius: 20px 20px 20px 0;
+    border-radius:         20px 20px 20px 0;
+}
+
+.leaflet-rrose-content {
+    font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
+}

js/leaflet.rrose-src.js

@@ -0,0 +1,115 @@
+/*
+  Copyright (c) 2012 Eric S. Theise
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
+  documentation files (the "Software"), to deal in the Software without restriction, including without limitation the 
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit 
+  persons to whom the Software is furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the 
+  Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE 
+  WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
+  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 
+  OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+L.Rrose = L.Popup.extend({
+
+  _initLayout:function () {
+    var prefix = 'leaflet-rrose',
+      container = this._container = L.DomUtil.create('div', prefix + ' ' + this.options.className + ' leaflet-zoom-animated'),
+      closeButton, wrapper;
+
+    if (this.options.closeButton) {
+      closeButton = this._closeButton = L.DomUtil.create('a', prefix + '-close-button', container);
+      closeButton.href = '#close';
+      closeButton.innerHTML = '×';
+
+      L.DomEvent.on(closeButton, 'click', this._onCloseButtonClick, this);
+    }
+
+    // Set the pixel distances from the map edges at which popups are too close and need to be re-oriented.
+    var x_bound = 160, y_bound = 160;
+    // Determine the alternate direction to pop up; north mimics Leaflet's default behavior, so we initialize to that.
+    this.options.position = 'n';
+    // Then see if the point is too far north...
+    var y_diff = y_bound - this._map.latLngToContainerPoint(this._latlng).y;
+    if (y_diff > 0) {
+      this.options.position = 's'
+    }
+    // or too far east...
+    var x_diff = this._map.latLngToContainerPoint(this._latlng).x - (this._map.getSize().x - x_bound);
+    if (x_diff > 0) {
+      this.options.position += 'w'
+    } else {
+    // or too far west.
+      x_diff = x_bound - this._map.latLngToContainerPoint(this._latlng).x;
+      if (x_diff > 0) {
+        this.options.position += 'e'
+      }
+    }
+
+    // Create the necessary DOM elements in the correct order. Pure 'n' and 's' conditions need only one class for styling, others need two.
+    if (/s/.test(this.options.position)) {
+      if (this.options.position === 's') {
+        this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container', container);
+        wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper', container);
+      } 
+      else {
+        this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container' + ' ' + prefix + '-tip-container-' + this.options.position, container);
+        wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper' + ' ' + prefix + '-content-wrapper-' + this.options.position, container);
+      }
+      this._tip = L.DomUtil.create('div', prefix + '-tip' + ' ' + prefix + '-tip-' + this.options.position, this._tipContainer);
+      L.DomEvent.disableClickPropagation(wrapper);
+      this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);
+      L.DomEvent.on(this._contentNode, 'mousewheel', L.DomEvent.stopPropagation);
+    } 
+    else {
+      if (this.options.position === 'n') {
+        wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper', container);
+        this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container', container);
+      } 
+      else {
+        wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper' + ' ' + prefix + '-content-wrapper-' + this.options.position, container);
+        this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container' + ' ' + prefix + '-tip-container-' + this.options.position, container);
+      }
+      L.DomEvent.disableClickPropagation(wrapper);
+      this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);
+      L.DomEvent.on(this._contentNode, 'mousewheel', L.DomEvent.stopPropagation);
+      this._tip = L.DomUtil.create('div', prefix + '-tip' + ' ' + prefix + '-tip-' + this.options.position, this._tipContainer);
+    }
+
+  },
+
+  _updatePosition:function () {
+    var pos = this._map.latLngToLayerPoint(this._latlng),
+      is3d = L.Browser.any3d,
+      offset = this.options.offset;
+
+    if (is3d) {
+      L.DomUtil.setPosition(this._container, pos);
+    }
+
+    if (/s/.test(this.options.position)) {
+      this._containerBottom = -this._container.offsetHeight + offset.y - (is3d ? 0 : pos.y);
+    } else {
+      this._containerBottom = -offset.y - (is3d ? 0 : pos.y);
+    }
+
+    if (/e/.test(this.options.position)) {
+      this._containerLeft = offset.x + (is3d ? 0 : pos.x);
+    } 
+    else if (/w/.test(this.options.position)) {
+      this._containerLeft = -Math.round(this._containerWidth) + offset.x + (is3d ? 0 : pos.x);
+    } 
+    else {
+      this._containerLeft = -Math.round(this._containerWidth / 2) + offset.x + (is3d ? 0 : pos.x);
+    }
+
+    this._container.style.bottom = this._containerBottom + 'px';
+    this._container.style.left = this._containerLeft + 'px';
+  }
+
+});