Fix several bugs/regressions in site selector including double encoding when...

Fix several bugs/regressions in site selector including double encoding when search result is clicked, down arrow overlap w/ loading icon, and dropdown changing size after selecting a site w/ a long name.

plugins/CoreHome/javascripts/autocomplete.js

@@ -14,7 +14,7 @@ function switchSite(id, name, showAjaxLoading, idCanBeAll) {
         $('.sites_autocomplete input').val(id);
         $('.custom_select_main_link > span')
             .text(name)
-            .addClass('custom_select_loading');
+            .attr('data-loading', 1);
         broadcast.propagateNewPage('segment=&idSite=' + id, showAjaxLoading);
     }
     return false;
@@ -75,10 +75,15 @@ $(function () {
                 select: function (event, ui) {
                     event.preventDefault();
                     if (ui.item.id > 0) {
+                        // autocomplete.js allows item names to be HTML, so we have to entity the site name in PHP.
+                        // to avoid double encoding, we decode before setting text.
+                        // note: use of $.html() would not be future-proof.
+                        var name = piwikHelper.htmlDecode(ui.item.name);
+
                         // set attributes of selected site display (what shows in the box)
                         $('.custom_select_main_link', selector)
                             .attr('data-siteid', ui.item.id)
-                            .text(ui.item.name);
+                            .html($('<span/>').text(name));
 
                         // hide the dropdown
                         $('.custom_select_block', selector).removeClass('custom_select_block_show');
@@ -98,12 +103,12 @@ $(function () {
                 },
                 search: function (event, ui) {
                     $('.reset', selector).show();
-                    $('.custom_select_main_link', selector).addClass('custom_select_loading');
+                    $('.custom_select_main_link', selector).attr('data-loading', 1);
                 },
                 open: function (event, ui) {
                     var widthSitesSelection = +$('.custom_select_ul_list', selector).width();
 
-                    $('.custom_select_main_link', selector).removeClass('custom_select_loading');
+                    $('.custom_select_main_link', selector).attr('data-loading', 0);
 
                     var maxSitenameWidth = $('.max_sitename_width', selector);
                     if (widthSitesSelection > maxSitenameWidth.val()) {

plugins/CoreHome/templates/_siteSelect.twig

@@ -29,7 +29,7 @@
         {% if switchSiteOnSelect is not defined or switchSiteOnSelect %}data-switch-site-on-select="1"{% endif %}>
     <div class="custom_select">
 
-        <a href="#" onclick="return false" class="custom_select_main_link" data-siteid="{% if idSite is defined %}{{ idSite }}{% else %}{{ sites[0].idsite }}{% endif %}">
+        <a href="#" onclick="return false" class="custom_select_main_link" data-loading="0" data-siteid="{% if idSite is defined %}{{ idSite }}{% else %}{{ sites[0].idsite }}{% endif %}">
             <span>{% if siteName is defined %}{{ siteName|raw }}{% else %}{{ sites[0].name|raw }}{% endif %}</span>
         </a>
 

plugins/Zeitgeist/stylesheets/ui/_siteSelect.less

@@ -51,7 +51,7 @@
 .sites_autocomplete .custom_select_ul_list li a,
 .sites_autocomplete .custom_select_all a,
 .sites_autocomplete .custom_select_main_link > span {
-  display: block;
+  display: inline-block;
   max-width: 140px;
   white-space: nowrap;
   overflow: hidden;
@@ -59,7 +59,7 @@
   padding: 0 20px 0 4px;
 }
 
-.sites_autocomplete--dropdown .custom_select_main_link:before {
+.sites_autocomplete--dropdown .custom_select_main_link[data-loading="0"]:before {
   content: " \25BC";
   position: absolute;
   right: 0;
@@ -73,7 +73,7 @@
   position: relative;
 }
 
-.sites_autocomplete .custom_select_loading {
+.sites_autocomplete .custom_select_main_link[data-loading="1"] {
   background: url(plugins/Zeitgeist/images/loading-blue.gif) no-repeat right 3px;
 }
 
@@ -141,11 +141,13 @@
 .custom_select_block {
   height: 0;
   overflow: hidden;
+  max-width:140px;
 }
 
 .custom_select_block_show {
   height: auto;
   overflow: visible;
+  max-width:inherit;
 }
 
 .sites_selector_container {