refactored regions logic and markup (bug 934582)

src/media/css/chart.styl

@@ -135,55 +135,54 @@ x-datepicker {
 
 // Thanks mbostock! http://bl.ocks.org/mbostock/3750941
 .progress-meter .background {
-  fill: #ccc;
+    fill: #ccc;
 }
 
 .progress-meter .foreground {
-  fill: $sailor-blue;
+    fill: $sailor-blue;
 }
 
 .progress-meter text {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 24px;
-  font-weight: bold;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 24px;
+    font-weight: bold;
 }
 
 .regions {
     float: left;
-    left: 455px;
     margin-right: 20px;
-    position: absolute;
-    z-index: 30;
-    a {
+    select {
+        margin-top: -15px;
+        font-size: 13px;
+    }
+    em {
         background-position: -1px -1px;
         background-repeat: no-repeat;
         background-size: 26px auto;
         border-radius: 12px;
         border: 0;
-        box-shadow: 0 0 1px 1px rgba(0,0,0,.6) inset;
-        cursor: pointer;
         display: inline-block;
         height: 24px;
         margin: 0 2px;
-        opacity: 0.30;
         width: 24px;
-        &.active {
-            box-shadow: 0 0 2px 1px rgba(0,0,0,.5) inset;
-            opacity: 1;
-        }
     }
 }
 
-a.br {background-image: url(../img/icons/regions/br.png);}
-a.co {background-image: url(../img/icons/regions/co.png);}
-a.de {background-image: url(../img/icons/regions/de.png);}
-a.es {background-image: url(../img/icons/regions/es.png);}
-a.gr {background-image: url(../img/icons/regions/gr.png);}
-a.hu {background-image: url(../img/icons/regions/hu.png);}
-a.me {background-image: url(../img/icons/regions/me.png);}
-a.mx {background-image: url(../img/icons/regions/mx.png);}
-a.pl {background-image: url(../img/icons/regions/pl.png);}
-a.rs {background-image: url(../img/icons/regions/rs.png);}
-a.uk {background-image: url(../img/icons/regions/uk.png);}
-a.us {background-image: url(../img/icons/regions/us.png);}
-a.ve {background-image: url(../img/icons/regions/ve.png);}
+em.ar {background-image: url(../img/icons/regions/ar.png);}
+em.br {background-image: url(../img/icons/regions/br.png);}
+em.cn {background-image: url(../img/icons/regions/cn.png);}
+em.co {background-image: url(../img/icons/regions/co.png);}
+em.de {background-image: url(../img/icons/regions/de.png);}
+em.es {background-image: url(../img/icons/regions/es.png);}
+em.gr {background-image: url(../img/icons/regions/gr.png);}
+em.hu {background-image: url(../img/icons/regions/hu.png);}
+em.me {background-image: url(../img/icons/regions/me.png);}
+em.mx {background-image: url(../img/icons/regions/mx.png);}
+em.pe {background-image: url(../img/icons/regions/pe.png);}
+em.pl {background-image: url(../img/icons/regions/pl.png);}
+em.rs {background-image: url(../img/icons/regions/rs.png);}
+em.uk {background-image: url(../img/icons/regions/uk.png);}
+em.us {background-image: url(../img/icons/regions/us.png);}
+em.uy {background-image: url(../img/icons/regions/uy.png);}
+em.ve {background-image: url(../img/icons/regions/ve.png);}
+em.worldwide {background-image: url(../img/icons/regions/worldwide.png);}

src/media/js/chartutils.js

@@ -1,5 +1,5 @@
-define('chartutils', ['linechart', 'notification', 'urls', 'user', 'utils', 'z'],
-       function(linechart, notification, urls, user, utils, z) {
+define('chartutils', ['linechart', 'notification', 'settings', 'urls', 'user', 'utils', 'z'],
+       function(linechart, notification, settings, urls, user, utils, z) {
 
     // Get last `dayrange` days when no chart date range specified.
     var dayrange = 30;
@@ -11,23 +11,11 @@ define('chartutils', ['linechart', 'notification', 'urls', 'user', 'utils', 'z']
     var doRedirect = false;
     var ask = notification.confirmation;
     var notify = notification.notification;
+    var regs = settings.REGION_CHOICES_SLUG;
 
-    // Update as needed.
-    var regions = [
-        {code: 'us', name: gettext('United States')},
-        {code: 'uk', name: gettext('United Kingdom')},
-        {code: 'br', name: gettext('Brazil')},
-        {code: 'es', name: gettext('Spain')},
-        {code: 'co', name: gettext('Colombia')},
-        {code: 've', name: gettext('Venezuela')},
-        {code: 'pl', name: gettext('Poland')},
-        {code: 'mx', name: gettext('Mexico')},
-        {code: 'hu', name: gettext('Hungary')},
-        {code: 'de', name: gettext('Germany')},
-        {code: 'me', name: gettext('Montenegro')},
-        {code: 'rs', name: gettext('Serbia')},
-        {code: 'gr', name: gettext('Greece')}
-    ];
+    var regions = Object.keys(regs).map(function(reg) {
+        return {code: reg, name: regs[reg]};
+    });
 
     var strings = {
         errors: {
@@ -85,15 +73,14 @@ define('chartutils', ['linechart', 'notification', 'urls', 'user', 'utils', 'z']
         var $range = $('#range x-datepicker');
 
         if (region) {
-            $('.regions a').each(function() {
-                var $this = $(this);
-                if ($this.hasClass(region)) $this.addClass('active');
-                $this.on('click', function() {
-                    region = this.className.replace(' active', '');
-                    newURL = getNewURL(apiName, start, end, region, slug);
-                    z.page.trigger('divert', [newURL]);
-                });
-            });
+            var $icon = $('.regions em');
+            $icon.removeClass().addClass(region);
+            $('.regions select').on('change', function() {
+                region = this.value;
+                $icon.removeClass().addClass(region);
+                newURL = getNewURL(apiName, start, end, region, slug);
+                z.page.trigger('divert', [newURL]);
+            }).find('option[value=' + region + ']').prop('selected', true);
         }
 
         if (doRedirect) {

src/media/js/settings.js

@@ -25,24 +25,24 @@ define('settings', ['l10n', 'settings_local', 'underscore'], function(l10n, sett
 
         // A list of regions and their L10n mappings.
         REGION_CHOICES_SLUG: {
-            'worldwide': gettext('Worldwide'),
             'ar': gettext('Argentina'),
             'br': gettext('Brazil'),
             'cn': gettext('China'),
             'co': gettext('Colombia'),
             'de': gettext('Germany'),
+            'es': gettext('Spain'),
             'gr': gettext('Greece'),
             'hu': gettext('Hungary'),
-            'mx': gettext('Mexico'),
             'me': gettext('Montenegro'),
+            'mx': gettext('Mexico'),
             'pe': gettext('Peru'),
             'pl': gettext('Poland'),
             'rs': gettext('Serbia'),
-            'es': gettext('Spain'),
             'uk': gettext('United Kingdom'),
             'us': gettext('United States'),
             'uy': gettext('Uruguay'),
-            've': gettext('Venezuela')
+            've': gettext('Venezuela'),
+            'worldwide': gettext('Worldwide')
         },
 
         timing_url: '',  // TODO: figure this out

src/templates/apps_chart.html

@@ -5,15 +5,7 @@ <h1>{{ title }}</h1>
       <form id="rangeform">
         <label>{{ _('From') }} <x-datepicker name="from"></x-datepicker></label>
         <label>{{ _('To') }} <x-datepicker name="to"></x-datepicker></label>
-
-        {# TODO: This should be a macro. #}
-        {% if regions %}
-          <div class="regions">
-            {% for region in regions %}
-              <a class="{{ region.code }}" title="{{ region.name }}"></a>
-            {% endfor %}
-          </div>
-        {% endif %}
+        {% include 'includes/regions.html' %}
         <input type="submit" value="{{ _('Update') }}">
       </form>
     </div>

src/templates/includes/regions.html

@@ -0,0 +1,10 @@
+{% if regions %}
+  <div class="regions">
+    <em class="worldwide"></em>
+    <select name="region">
+      {% for region in regions %}
+        <option value="{{ region.code }}">{{ region.name }}</option>
+      {% endfor %}
+    </select>
+  </div>
+{% endif %}

src/templates/per_app_chart.html

@@ -9,15 +9,7 @@ <h1>
         <form id="rangeform">
           <label>{{ _('From') }} <x-datepicker name="from"></x-datepicker></label>
           <label>{{ _('To') }} <x-datepicker name="to"></x-datepicker></label>
-
-          {# TODO: This should be a macro. #}
-          {% if regions %}
-            <div class="regions">
-              {% for region in regions %}
-                <a class="{{ region.code }}" title="{{ region.name }}"></a>
-              {% endfor %}
-            </div>
-          {% endif %}
+          {% include 'includes/regions.html' %}
           <input type="submit" value="{{ _('Update') }}">
         </form>
       </div>