some more angular best practices

plugins/CoreAdminHome/templates/trackingCodeGenerator.twig

@@ -30,10 +30,10 @@
         <div piwik-site-selector
              siteid="{{ idSite }}"
              sitename="{{ defaultReportSiteName }}"
-             showallsitesitem="false"
-             switchsiteonselect="false"
+             show-all-sites-item="false"
+             switch-site-on-select="false"
              id="js-tracker-website"
-             showselectedsite="true"></div>
+             show-selected-site="true"></div>
 
         <br/><br/><br/>
     </div>
@@ -202,10 +202,10 @@
         <div piwik-site-selector
              siteid="{{ idSite }}"
              sitename="{{ defaultReportSiteName }}"
-             showallsitesitem="false"
-             switchsiteonselect="false"
              id="image-tracker-website"
-             showselectedsite="true"></div>
+             show-all-sites-item="false"
+             switch-site-on-select="false"
+             show-selected-site="true"></div>
 
         <br/><br/><br/>
     </div>

plugins/CoreHome/CoreHome.php

@@ -90,14 +90,25 @@ class CoreHome extends \Piwik\Plugin
         $jsFiles[] = "plugins/CoreHome/javascripts/color_manager.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/notification.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/notification_parser.js";
-        $jsFiles[] = "plugins/CoreHome/javascripts/piwikApp.js";
+
+        $jsFiles[] = "plugins/CoreHome/javascripts/services/services.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/services/piwik.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/services/piwikApi.js";
+
         $jsFiles[] = "plugins/CoreHome/javascripts/filters/filters.js";
-        $jsFiles[] = "plugins/CoreHome/javascripts/providers/PiwikApi.js";
-        $jsFiles[] = "plugins/CoreHome/javascripts/providers/piwik.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/filters/htmldecode.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/filters/translate.js";
+
         $jsFiles[] = "plugins/CoreHome/javascripts/directives/directives.js";
-        $jsFiles[] = "plugins/CoreHome/javascripts/siteselector/providers.js";
-        $jsFiles[] = "plugins/CoreHome/javascripts/siteselector/controller.js";
-        $jsFiles[] = "plugins/CoreHome/javascripts/siteselector/directives.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/directives/autocompleteMatched.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/directives/focusAnywhereButHere.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/directives/ignoreClick.js";
+
+        $jsFiles[] = "plugins/CoreHome/javascripts/piwikApp.js";
+        
+        $jsFiles[] = "plugins/CoreHome/javascripts/siteselector/siteSelectorModel.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/siteselector/siteSelectorController.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/siteselector/siteSelectorDirectives.js";
     }
 
     public function getClientSideTranslationKeys(&$translationKeys)

plugins/CoreHome/javascripts/directives/autocompleteMatched.js

+/*!
+ * Piwik - Web Analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+piwikAppDirectives.directive('piwikAutocompleteMatched', function() {
+    return function(scope, element, attrs) {
+        var searchTerm;
+
+        scope.$watch(attrs.piwikAutocompleteMatched, function(value) {
+            searchTerm = value;
+            updateText();
+        });
+
+        function updateText () {
+            if (!searchTerm || !element) {
+                return;
+            }
+
+            var content   = element.text();
+            var startTerm = content.toLowerCase().indexOf(searchTerm);
+            if (-1 !== startTerm) {
+                var word = content.substr(startTerm, searchTerm.length);
+                content = content.replace(word, '<span class="autocompleteMatched">' + word + '</span>');
+                element.html(content);
+            };
+        }
+    };
+});
\ No newline at end of file

plugins/CoreHome/javascripts/directives/directives.js

@@ -5,62 +5,4 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-piwikApp.directive('piwikFocusAnywhereButHere', function($document){
-    return {
-        restrict: 'A',
-        link: function(scope, element, attr, ctrl) {
-
-            function onClickOutsideElement (event) {
-                if (element.has(event.target).length === 0) {
-                    scope.$apply(attr.piwikFocusAnywhereButHere);
-                }
-            }
-
-            function onEscapeHandler (event) {
-                if (event.which === 27) {
-                    scope.$apply(attr.piwikFocusAnywhereButHere);
-                }
-            }
-
-            $document.on('keyup', onEscapeHandler);
-            $document.on('mouseup', onClickOutsideElement);
-            scope.$on('$destroy', function() {
-                $document.off('mouseup', onClickOutsideElement);
-                $document.off('keyup', onEscapeHandler);
-            });
-        }
-    }
-});
-
-piwikApp.directive('piwikIgnoreClick', function() {
-    return function(scope, element, attrs) {
-        $(element).click(function(event) {
-            event.preventDefault();
-        });
-    }
-})
-
-piwikApp.directive('piwikAutocompleteMatched', function() {
-    return function(scope, element, attrs) {
-        var searchTerm;
-
-        scope.$watch(attrs.piwikAutocompleteMatched, function(value) {
-            searchTerm = value;
-            updateText();
-        });
-
-        function updateText () {
-            if (!searchTerm || !element) {
-                return;
-            }
-
-            var content   = element.text();
-            var startTerm = content.toLowerCase().indexOf(searchTerm);
-            if (-1 !== startTerm) {
-                var word = content.substr(startTerm, searchTerm.length);
-                content = content.replace(word, '<span class="autocompleteMatched">' + word + '</span>');
-                element.html(content);
-            };
-        }
-    };
-});
\ No newline at end of file
+var piwikAppDirectives = angular.module('piwikApp.directive', []);

plugins/CoreHome/javascripts/directives/focusAnywhereButHere.js

+/*!
+ * Piwik - Web Analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+piwikAppDirectives.directive('piwikFocusAnywhereButHere', function($document){
+    return {
+        restrict: 'A',
+        link: function(scope, element, attr, ctrl) {
+
+            function onClickOutsideElement (event) {
+                if (element.has(event.target).length === 0) {
+                    scope.$apply(attr.piwikFocusAnywhereButHere);
+                }
+            }
+
+            function onEscapeHandler (event) {
+                if (event.which === 27) {
+                    scope.$apply(attr.piwikFocusAnywhereButHere);
+                }
+            }
+
+            $document.on('keyup', onEscapeHandler);
+            $document.on('mouseup', onClickOutsideElement);
+            scope.$on('$destroy', function() {
+                $document.off('mouseup', onClickOutsideElement);
+                $document.off('keyup', onEscapeHandler);
+            });
+        }
+    }
+});

plugins/CoreHome/javascripts/directives/ignoreClick.js

+/*!
+ * Piwik - Web Analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+piwikAppDirectives.directive('piwikIgnoreClick', function() {
+    return function(scope, element, attrs) {
+        $(element).click(function(event) {
+            event.preventDefault();
+        });
+    }
+});
\ No newline at end of file

plugins/CoreHome/javascripts/filters/filters.js

@@ -4,14 +4,15 @@
  * @link http://piwik.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
+var piwikAppFilters = angular.module('piwikApp.filter', []);
 
-piwikApp.filter('translate', function() {
+piwikAppFilters.filter('translate', function() {
     return function(key) {
         return _pk_translate(key);
     }
 });
 
-piwikApp.filter('htmldecode', function() {
+piwikAppFilters.filter('htmldecode', function() {
     return function(theString) {
         return piwikHelper.htmlDecode(theString);
     }

plugins/CoreHome/javascripts/filters/htmldecode.js

+/*!
+ * Piwik - Web Analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+piwikAppFilters.filter('htmldecode', function() {
+    return function(theString) {
+        return piwikHelper.htmlDecode(theString);
+    }
+});

plugins/CoreHome/javascripts/filters/translate.js

+/*!
+ * Piwik - Web Analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+piwikAppFilters.filter('translate', function() {
+    return function(key) {
+        return _pk_translate(key);
+    }
+});
\ No newline at end of file

plugins/CoreHome/javascripts/piwikApp.js

-var piwikApp  = angular.module('piwikApp', ['ngSanitize']);
+var piwikApp = angular.module('piwikApp', [
+    'ngSanitize',
+    'piwikApp.service',
+    'piwikApp.directive',
+    'piwikApp.filter'
+]);
 var customApp = angular.module('app', []);

plugins/CoreHome/javascripts/providers/PiwikApi.js → plugins/CoreHome/javascripts/services/PiwikApi.js

@@ -5,12 +5,13 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-piwikApp.factory('piwikApi', function ($http, $q, $rootScope, piwik, $window) {
+piwikAppServices.factory('piwikApi', function ($http, $q, $rootScope, piwik, $window) {
 
     var url = 'index.php';
     var format = 'json';
     var getParams  = {};
     var postParams = {};
+    var requestHandle = null;
 
     var piwikApi = {};
 
@@ -39,13 +40,14 @@ piwikApp.factory('piwikApi', function ($http, $q, $rootScope, piwik, $window) {
      */
     function send (cacheResult) {
 
-        var deferred = $q.defer();
+        var deferred = requestHandle = $q.defer();
 
         var onError = function (message) {
             deferred.reject(message);
+            requestHandle = null;
         };
 
-        var onSuccess  = function (response) {
+        var onSuccess = function (response) {
             if (response && response.result == 'error') {
 
                 if (response.message) {
@@ -66,6 +68,7 @@ piwikApp.factory('piwikApi', function ($http, $q, $rootScope, piwik, $window) {
             } else {
                 deferred.resolve(response);
             }
+            requestHandle = null;
         };
 
         var headers = {'Content-Type': 'application/x-www-form-urlencoded'};
@@ -142,6 +145,16 @@ piwikApp.factory('piwikApi', function ($http, $q, $rootScope, piwik, $window) {
         return getParamsToMixin;
     };
 
+    piwikApi.abort = function () {
+        getParams  = {};
+        postParams = {};
+
+        if (requestHandle) {
+            requestHandle.resolve();
+            requestHandle = null;
+        }
+    };
+
     /**
      * Make a reading API request. Response is cached for fast future requests
      * @param getParams

plugins/CoreHome/javascripts/providers/piwik.js → plugins/CoreHome/javascripts/services/piwik.js

@@ -5,8 +5,9 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
+var piwikAppServices = angular.module('piwikApp.service', []);
 
-piwikApp.service('piwik', function () {
+piwikAppServices.service('piwik', function () {
 
     piwik.helper    = piwikHelper;
     piwik.broadcast = broadcast;

plugins/CoreHome/javascripts/services/services.js

+/*!
+ * Piwik - Web Analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+var piwikAppServices = angular.module('piwikApp.service', []);

plugins/CoreHome/javascripts/siteselector/controller.js → plugins/CoreHome/javascripts/siteselector/siteSelectorController.js

@@ -8,7 +8,6 @@
 piwikApp.controller('SiteSelectorController', function($scope, siteSelectorModel, piwik){
 
     $scope.model = siteSelectorModel;
-    $scope.model.loadInitialSites();
 
     $scope.selectedSite = {id: '', name: ''};
     $scope.activeSiteId = piwik.idSite;

plugins/CoreHome/javascripts/siteselector/directives.js → plugins/CoreHome/javascripts/siteselector/siteSelectorDirectives.js

@@ -6,46 +6,46 @@
  */
 
 piwikApp.directive('piwikSiteSelector', function($document, piwik, $filter){
+    var defaults = {
+        'name': '',
+        'siteid': piwik.idSite,
+        'sitename': piwik.siteName,
+        'all-sites-location': 'bottom',
+        'all-sites-text': $filter('translate')('General_MultiSitesSummary'),
+        'show-selected-site': 'false',
+        'show-all-sites-item': 'true',
+        'switch-site-on-select': 'true',
+    };
 
     return {
         restrict: 'A',
-        // why not directly use camel case and for example site-name? If I remember correct this does not work
-        // in all of or required IE versions. Alternative can be to define a namespace attribute and prefix all
-        // attributes with piwik, eg. piwik-site-name. Again: Not sure if I remember correct, will have a look
-        // later
         scope: {
-            showAutocomplete: '=showautocomplete',
-            showSelectedSite: '=showselectedsite',
-            showAllSitesItem: '=showallsitesitem',
-            switchSiteOnSelect: '=switchsiteonselect',
-            maxSitenameWidth: '=maxsitenamewidth',
-            inputName: '@inputname',
-            allSitesText: '@allsitestext',
-            allSitesLocation: '@allsiteslocation'
+            showSelectedSite: '=',
+            showAllSitesItem: '=',
+            switchSiteOnSelect: '=',
+            inputName: '@name',
+            allSitesText: '@',
+            allSitesLocation: '@'
         },
-        templateUrl: 'plugins/CoreHome/javascripts/siteselector/partial.html',
+        templateUrl: 'plugins/CoreHome/javascripts/siteselector/siteSelectorPartial.html',
         controller: 'SiteSelectorController',
         compile: function (element, attrs) {
             attrs.$addClass('sites_autocomplete');
 
-            // define default values
-            if (!attrs.allsiteslocation) attrs.allsiteslocation = 'bottom';
-            if (!attrs.allsitestext) attrs.allsitestext = $filter('translate')('General_MultiSitesSummary');
-            if (!attrs.siteid) attrs.siteid = '';
-            if (!attrs.sitename) attrs.sitename = '';
-            if (!attrs.inputname) attrs.inputname = '';
-            if (!attrs.showautocomplete) attrs.showautocomplete = 'true';
-            if (!attrs.showselectedsite) attrs.showselectedsite = 'false';
-            if (!attrs.switchsiteonselect) attrs.switchsiteonselect = 'true';
-            if (!attrs.showallsitesitem) attrs.showallsitesitem = 'true';
-            if (!attrs.maxSitenameWidth) attrs.maxsitenamewidth = '130'; // can be removed?
+            for (var index in defaults) {
+               if (!attrs[index]) { attrs[index] = defaults[index]; }
+            }
 
             return function (scope, element, attrs) {
 
-                // selectedSite.id|.name is hard-coded but actually the directive should not know about this
+                // selectedSite.id|.name + model is hard-coded but actually the directive should not know about this
                 scope.selectedSite.id   = attrs.siteid;
                 scope.selectedSite.name = attrs.sitename;
 
+                if (!attrs.siteid || !attrs.sitename) {
+                    scope.model.loadInitialSites();
+                }
+
                 scope.$watch('selectedSite.id', function (newValue, oldValue, scope) {
                     if (newValue != oldValue) {
                         element.attr('siteid', newValue);

plugins/CoreHome/javascripts/siteselector/providers.js → plugins/CoreHome/javascripts/siteselector/siteSelectorModel.js

 
 piwikApp.factory('siteSelectorModel', function (piwikApi, $filter) {
-    var filterLimit = 10;
 
     var model = {};
     model.sites = [];
@@ -8,6 +7,24 @@ piwikApp.factory('siteSelectorModel', function (piwikApi, $filter) {
     model.isLoading = false;
     model.firstSiteName = '';
 
+    function fetchAndUpdate(params)
+    {
+        if (model.isLoading) {
+            piwikApi.abort();
+        }
+
+        model.isLoading = true;
+
+        params.filter_limit = 10;
+        params.showColumns  = 'name,idsite';
+
+        piwikApi.fetch(params).then(function (response) {
+            model.updateWebsitesList(response);
+        }).finally(function () {
+            model.isLoading = false;
+        });
+    }
+
     model.updateWebsitesList = function (websites) {
 
         if (!websites || !websites.length) {
@@ -33,29 +50,17 @@ piwikApp.factory('siteSelectorModel', function (piwikApi, $filter) {
             model.loadInitialSites();
             return;
         }
-        model.isLoading = true;
-        piwikApi.fetch({
+
+        fetchAndUpdate({
             method: 'SitesManager.getPatternMatchSites',
-            filter_limit: filterLimit,
             pattern: term
-        }).then(function (response) {
-            model.updateWebsitesList(response);
-        }).finally(function () {
-            model.isLoading = false;
         });
     };
 
     model.loadInitialSites = function () {
-        model.isLoading = true;
-        piwikApi.fetch({
-            method: 'SitesManager.getSitesWithAtLeastViewAccess',
-            filter_limit: filterLimit,
-            showColumns: 'name,idsite'
-        }).then(function (response) {
-            model.updateWebsitesList(response);
-        }).finally(function () {
-            model.isLoading = false;
-        });
+        fetchAndUpdate({
+            method: 'SitesManager.getSitesWithAtLeastViewAccess'
+        })
     }
 
     return model;

plugins/CoreHome/javascripts/siteselector/partial.html → plugins/CoreHome/javascripts/siteselector/siteSelectorPartial.html

-<div ng-class="{'sites_autocomplete--dropdown': (model.hasMultipleWebsites || showAllSitesItem)}">
+<div ng-class="{'sites_autocomplete--dropdown': (model.hasMultipleWebsites || showAllSitesItem || !model.sites.length)}">
     <div piwik-focus-anywhere-but-here="view.showSitesList=false" class="custom_select">
 
         <script type="text/ng-template" id="siteselector_allsiteslink.html">
@@ -16,19 +16,13 @@
            href="javascript:void(0)"
            class="custom_select_main_link"
            ng-class="{'loading': model.isLoading}">
-            <span ng-bind-html="selectedSite.name || (initialSiteName || model.firstSiteName)"></span>
+            <span ng-bind-html="selectedSite.name || model.firstSiteName">?</span>
         </a>
 
         <div ng-show="view.showSitesList" class="custom_select_block">
             <div ng-if="allSitesLocation=='top' && showAllSitesItem"
                  ng-include="'siteselector_allsiteslink.html'"></div>
 
-            <div ng-click="switchSite({idsite: 'all', name: allSitesText})"
-                 ng-if="allSitesLocation=='top' && showAllSitesItem"
-                 class="custom_select_all">
-                <a href="{{ getUrlAllSites() }}" ng-bind-html="allSitesText"></a>
-            </div>
-
             <div class="custom_select_container">
                 <ul class="custom_select_ul_list">
                     <li ng-click="view.showSitesList=false; switchSite(site)"
@@ -37,10 +31,9 @@
                         <a piwik-ignore-click href="{{ getUrlForSiteId(site.idsite) }}" piwik-autocomplete-matched="view.searchTerm">{{ site.name }}</a>
                     </li>
                 </ul>
-                <ul ng-show="!model.sites.length" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all siteSelect">
-                    <li class="ui-menu-item"
-                        style="float:none;position:static">
-                        <a class="ui-corner-all" style="float:none;position:static" tabindex="-1">{{ ('SitesManager_NotFound' | translate) + ' ' + view.searchTerm }}</a>
+                <ul ng-show="!model.sites.length && view.searchTerm" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all siteSelect">
+                    <li class="ui-menu-item">
+                        <a class="ui-corner-all" tabindex="-1">{{ ('SitesManager_NotFound' | translate) + ' ' + view.searchTerm }}</a>
                     </li>
                 </ul>
             </div>
@@ -48,7 +41,7 @@
             <div ng-if="allSitesLocation=='bottom' && showAllSitesItem"
                  ng-include="'siteselector_allsiteslink.html'"></div>
 
-            <div class="custom_select_search" ng-show="showAutocomplete">
+            <div class="custom_select_search" ng-show="model.hasMultipleWebsites">
                 <input type="text"
                        ng-click="view.searchTerm=''"
                        ng-model="view.searchTerm"
@@ -60,7 +53,6 @@
                      ng-show="view.searchTerm"
                      ng-click="view.searchTerm=''; model.loadInitialSites()"
                      class="reset"
-                     style="position: relative; top: 4px; left: -44px; cursor: pointer;"
                      src="plugins/CoreHome/images/reset_search.png"/>
             </div>
         </div>

plugins/UsersManager/templates/index.twig

@@ -16,10 +16,10 @@
         <div piwik-site-selector
              siteid="{{ idSiteSelected }}"
              sitename="{{ defaultReportSiteName }}"
-             allsitestext="{{ applyAllSitesText|raw }}"
-             allsiteslocation="top"
+             all-sites-text="{{ applyAllSitesText|raw }}"
+             all-sites-location="top"
              id="usersManagerSiteSelect"
-             switchsiteonselect="false"></div>
+             switch-site-on-select="false"></div>
     </section>
 </div>
 

plugins/UsersManager/templates/userSettings.twig

@@ -47,8 +47,8 @@
                 <div piwik-site-selector
                      siteid="{{ defaultReportIdSite }}"
                      sitename="{{ defaultReportSiteName }}"
-                     switchsiteonselect="false"
-                     showallsitesitem="false"
+                     switch-site-on-select="false"
+                     show-all-sites-item="false"
                      showselectedsite="true"
                      id="defaultReportSiteSelector"></div>
             </fieldset>

plugins/Zeitgeist/stylesheets/ui/_siteSelect.less

@@ -126,6 +126,9 @@
   color: #454545;
 
 }
+.sites_autocomplete {
+  width: 165px;
+}
 
 .sites_autocomplete .custom_select_search .but {
   vertical-align: top;
@@ -143,6 +146,15 @@
   padding-left: 12px;
 }
 
+.custom_selector_container .ui-menu-item,
+.custom_selector_container .ui-menu-item a {
+  float:none;position:static
+}
+
+.custom_select_search .reset {
+  position: relative; top: 4px; left: -44px; cursor: pointer;
+}
+
 .custom_select_block {
   overflow: hidden;
   max-width: inherit