[fixmystreet.com] Experiment, no pins by default.

This changes the default flow to show no pins and a message about
reporting, with the second tab displaying existing problems (and showing
map pins). Those existing problems are the ones that would currently be
on "problems on the map" followed by those currently on "problems
nearby".

perllib/FixMyStreet/App/Controller/Around.pm

@@ -263,22 +263,18 @@ sub ajax : Path('/ajax') {
     # render templates to get the html
     my $on_map_list_html = $c->render_fragment(
         'around/on_map_list_items.html',
-        { on_map => $on_map }
+        { on_map => $on_map, around_map => $around_map }
     );
     my $around_map_list_html = $c->render_fragment(
         'around/around_map_list_items.html',
-        { around_map => $around_map, dist => $dist }
+        { on_map => $on_map, around_map => $around_map }
     );
 
     # JSON encode the response
-    my $body = JSON->new->utf8(1)->encode(
-        {
-            pins         => $pins,
-            current      => $on_map_list_html,
-            current_near => $around_map_list_html,
-        }
-    );
-
+    my $json = { pins => $pins };
+    $json->{current} = $on_map_list_html if $on_map_list_html;
+    $json->{current_near} = $around_map_list_html if $around_map_list_html;
+    my $body = JSON->new->utf8(1)->encode($json);
     $c->res->body($body);
 }
 

templates/web/fixmystreet.com/around/_report_banner.html

@@ -0,0 +1,16 @@
+[%# Identical to parent, just with variant0s %]
+
+<h1 class="big-green-banner variant0">
+    [% loc( 'Click map to report a problem' ) %]
+    [% IF c.cobrand.moniker == 'bromley' %]
+        <span>Yellow pins show existing reports</span>
+    [% END %]
+</h1>
+<p id="skip-this-step" class="variant0">
+    [%
+        tprintf(
+            loc("Can't see the map? <a href='%s' rel='nofollow'>Skip this step</a>"),
+            url_skip
+        )
+    %]
+</p>

templates/web/fixmystreet.com/around/tabbed_lists.html

@@ -0,0 +1,46 @@
+<menu id="problems-nav" class="tab-nav">
+    <ul class="variant0">
+        <li><a href="#current_tab">[% loc('Problems on the map') %]</a></li>
+        <li><a href="#current_near_tab">[% loc( 'Problems nearby' ) %]</a></li>
+    </ul>
+    <ul class="variant1">
+        <li><a href="#reporting">[% loc('Report a problem') %]</a></li>
+        <li><a href="#current_near_tab">[% loc( 'Problems near here' ) %]</a></li>
+    </ul>
+</menu>
+
+<div class="variant1">
+<div id="reporting" class="tab">
+    <h1>[% loc( 'Click the map to<br/>report a problem' ) %]</h1>
+
+    <a id="skip-this-step" href="[% url_skip %]" rel="nofollow">
+        [% loc("Can't see the map? <em>Skip this step</em>") %]
+    </a>
+
+    <p>Don’t worry if it’s not in precisely the right place,<br/>
+    you can move the pin afterwards.</p>
+</div>
+</div>
+
+<div class="variant0">
+<div id="current_tab" class="tab">
+    <ul id="current" class="issue-list-a">
+        [% INCLUDE "around/on_map_list_items.html" %]
+    </ul>
+</div>
+</div>
+
+<div id="current_near_tab" class="tab">
+    <ul id="current_near" class="issue-list-a">
+        [% INCLUDE "around/around_map_list_items.html" %]
+    </ul>
+</div>
+
+<script>
+if (variation == 1) {
+    fixmystreet.initial_hide_pins = true;
+    $(function(){
+        $('#current').insertBefore('#current_near');
+    });
+}
+</script>

templates/web/fixmystreet.com/header_extra.html

@@ -1,3 +1,23 @@
 <script src="[% start %][% version('/js/jquery.cookie.min.js') %]" type="text/javascript" charset="utf-8"></script>
 
+[%# We are conducting an A/B experiment on the first step of reporting process %]
+[% IF page == 'around' %]
+<script>
+if (window.matchMedia) {
+    var desktop = window.matchMedia("(min-width: 48em)").matches;
+    if (desktop) {
+        var variation = cxApi.chooseVariation(),
+            docElement = document.documentElement,
+            className = docElement.className;
+        docElement.className = className + ' ' + 'variant' + variation;
+    }
+}
+</script>
+<style>
+html .variant1 { display: none !important; }
+html.variant1 .variant0 { display: none !important; }
+html.variant1 .variant1 { display: block !important; }
+</style>
+[% END %]
+
 [% INCLUDE 'tracking_code.html' %]

web/cobrands/fixmystreet/fixmystreet.js

@@ -46,6 +46,17 @@ function tabs(elem, indirect) {
         //hide / show the right tab
         $('.tab.open').hide().removeClass('open');
         $(target).show().addClass('open');
+
+        // Clicking on tabs to show/hide pins, content experiment
+        if (typeof(variation) !== 'undefined' && variation == 1) {
+            if (target == '#current_near_tab' && !fixmystreet.markers.getVisibility()) {
+                $('#hide_pins_link').click();
+            }
+            if (target == '#reporting' && fixmystreet.markers.getVisibility()) {
+                $('#hide_pins_link').click();
+            }
+        }
+
     }
 }
 
@@ -176,8 +187,8 @@ $(function(){
      * Tabs
      */
     //make initial tab active
-    $('.tab-nav a').first().addClass('active');
-    $('.tab').first().addClass('open');
+    $('.tab-nav a:visible').first().addClass('active');
+    $('.tab:visible').first().addClass('open');
 
     //hide other tabs
     $('.tab').not('.open').hide();

web/cobrands/fixmystreet/layout.scss

@@ -92,6 +92,15 @@ body.mappage {
             @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
         }
     }
+
+    #reporting {
+      padding: 1em;
+      text-align: center;
+
+      h1 {
+        line-height: 1.2em;
+      }
+    }
 }
 
 #main-nav {

web/cobrands/sass/_layout.scss

@@ -342,6 +342,40 @@ body.mappage {
   }
 }
 
+#skip-this-step {
+  display: block;
+  color: inherit;
+  //margin: 0 -15px;
+  padding: 16px;
+  font-size: 18px;
+  line-height: 20px;
+  border-bottom: 1px solid #E7E1C0;
+  background: #FDF4C5;
+
+  em {
+    font-style: normal;
+    text-decoration: underline;
+    color: #0BA7D1;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  html.js & {
+    // If javascript is enabled, hide the skip link off-screen,
+    // but keep it visible for screen readers.
+    position: absolute;
+    top: -999px;
+
+    &:focus {
+      // And show it again if it receives focus (eg: via tab key)
+      position: static;
+    }
+  }
+}
+
+
 // full width page
 body.fullwidthpage {
   .content {

web/js/map-OpenLayers.js

@@ -227,6 +227,10 @@ function fixmystreet_onload() {
         }
     });
 
+    if (fixmystreet.initial_hide_pins) {
+        $('#hide_pins_link').click();
+    }
+
     $('#all_pins_link').click(function(e) {
         e.preventDefault();
         fixmystreet.markers.setVisibility(true);