diff options
18 files changed, 197 insertions, 401 deletions
diff --git a/plugins/CoreAdminHome/javascripts/jsTrackingGenerator.js b/plugins/CoreAdminHome/javascripts/jsTrackingGenerator.js index 352802783a..3a1d32e0dc 100644 --- a/plugins/CoreAdminHome/javascripts/jsTrackingGenerator.js +++ b/plugins/CoreAdminHome/javascripts/jsTrackingGenerator.js @@ -188,7 +188,7 @@ var generateJsCode = function () { // get params used to generate JS code var params = { - idSite: $('#js-tracker-website').find('.custom_select_main_link').attr('data-siteid'), + idSite: $('#js-tracker-website').attr('siteid'), groupPageTitlesByDomain: $('#javascript-tracking-group-by-domain').is(':checked'), mergeSubdomains: $('#javascript-tracking-all-subdomains').is(':checked'), mergeAliasUrls: $('#javascript-tracking-all-aliases').is(':checked'), @@ -281,7 +281,7 @@ var generateImageTrackerLink = function () { // get data used to generate the link var generateDataParams = { - idSite: $('#image-tracker-website').find('.custom_select_main_link').attr('data-siteid'), + idSite: $('#image-tracker-website').attr('siteid'), actionName: $('#image-tracker-action-name').val(), piwikHost: piwikHost, piwikPath: piwikPath @@ -331,7 +331,7 @@ }; // on image link tracker site change, change available goals - $('#image-tracker-website').bind('piwik:siteSelected', function (e, site) { + $('#image-tracker-website').bind('change', function (e, site) { getSiteData(site.id, '#image-tracking-code-options', function () { resetGoalSelectItems(site.id, 'image-tracker-goal'); generateImageTrackerLink(); @@ -339,7 +339,7 @@ }); // on js link tracker site change, change available goals - $('#js-tracker-website').bind('piwik:siteSelected', function (e, site) { + $('#js-tracker-website').bind('change', function (e, site) { $('.current-site-name', '#optional-js-tracking-options').each(function () { $(this).text(site.name); }); @@ -400,7 +400,7 @@ // initial generation getSiteData( - $('#js-tracker-website').find('.custom_select_main_link').attr('data-siteid'), + $('#js-tracker-website').attr('siteid'), '#js-code-options,#image-tracking-code-options', function () { var imageTrackerSiteId = $('#image-tracker-website').find('.custom_select_main_link').attr('data-siteid'); diff --git a/plugins/CoreAdminHome/templates/trackingCodeGenerator.twig b/plugins/CoreAdminHome/templates/trackingCodeGenerator.twig index 8eaee0132b..d61e2b00ea 100644 --- a/plugins/CoreAdminHome/templates/trackingCodeGenerator.twig +++ b/plugins/CoreAdminHome/templates/trackingCodeGenerator.twig @@ -27,15 +27,13 @@ {# website #} <label class="website-label"><strong>{{ 'General_Website'|translate }}</strong></label> - <div ng-controller="SiteSelectorController" - piwik-site-selector + <div piwik-site-selector + siteid="{{ idSite }}" sitename="{{ defaultReportSiteName }}" - selectedsiteid="{{ idSite }}" showallsitesitem="0" switchsiteonselect="0" - selectorid="js-tracker-website" - showselectedsite="1" - class="sites_autocomplete"></div> + id="js-tracker-website" + showselectedsite="1"></div> <br/><br/><br/> </div> @@ -201,15 +199,13 @@ <div> {# website #} <label class="website-label"><strong>{{ 'General_Website'|translate }}</strong></label> - <div ng-controller="SiteSelectorController" - piwik-site-selector + <div piwik-site-selector + siteid="{{ idSite }}" sitename="{{ defaultReportSiteName }}" - selectedsiteid="{{ idSite }}" showallsitesitem="0" switchsiteonselect="0" - selectorid="image-tracker-website" - showselectedsite="1" - class="sites_autocomplete"></div> + id="image-tracker-website" + showselectedsite="1"></div> <br/><br/><br/> </div> diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php index a8959c8f95..eb04915474 100644 --- a/plugins/CoreHome/CoreHome.php +++ b/plugins/CoreHome/CoreHome.php @@ -69,6 +69,7 @@ class CoreHome extends \Piwik\Plugin $jsFiles[] = "libs/jquery/mwheelIntent.js"; $jsFiles[] = "libs/javascript/sprintf.js"; $jsFiles[] = "libs/angularjs/angular.js"; + $jsFiles[] = "libs/angularjs/angular-sanitize.js"; $jsFiles[] = "plugins/Zeitgeist/javascripts/piwikHelper.js"; $jsFiles[] = "plugins/Zeitgeist/javascripts/ajaxHelper.js"; $jsFiles[] = "plugins/CoreHome/javascripts/require.js"; @@ -80,7 +81,6 @@ class CoreHome extends \Piwik\Plugin $jsFiles[] = "plugins/CoreHome/javascripts/menu.js"; $jsFiles[] = "plugins/CoreHome/javascripts/menu_init.js"; $jsFiles[] = "plugins/CoreHome/javascripts/calendar.js"; - $jsFiles[] = "plugins/CoreHome/javascripts/autocomplete.js"; $jsFiles[] = "plugins/CoreHome/javascripts/sparkline.js"; $jsFiles[] = "plugins/CoreHome/javascripts/corehome.js"; $jsFiles[] = "plugins/CoreHome/javascripts/top_controls.js"; @@ -92,8 +92,10 @@ class CoreHome extends \Piwik\Plugin $jsFiles[] = "plugins/CoreHome/javascripts/notification_parser.js"; $jsFiles[] = "plugins/CoreHome/javascripts/piwikApp.js"; $jsFiles[] = "plugins/CoreHome/javascripts/filters/filters.js"; - $jsFiles[] = "plugins/CoreHome/javascripts/dependencies/PiwikApi.js"; + $jsFiles[] = "plugins/CoreHome/javascripts/services/PiwikApi.js"; + $jsFiles[] = "plugins/CoreHome/javascripts/services/piwik.js"; $jsFiles[] = "plugins/CoreHome/javascripts/directives/directives.js"; + $jsFiles[] = "plugins/CoreHome/javascripts/siteselector/services.js"; $jsFiles[] = "plugins/CoreHome/javascripts/siteselector/controller.js"; $jsFiles[] = "plugins/CoreHome/javascripts/siteselector/directives.js"; } diff --git a/plugins/CoreHome/javascripts/autocomplete.js b/plugins/CoreHome/javascripts/autocomplete.js deleted file mode 100644 index ca9f3b9587..0000000000 --- a/plugins/CoreHome/javascripts/autocomplete.js +++ /dev/null @@ -1,243 +0,0 @@ -/*! - * Piwik - Web Analytics - * - * @link http://piwik.org - * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */ - -function switchSite(id, name, showAjaxLoading, idCanBeAll) { - var $mainLink = $('.custom_select_main_link').attr('data-loading', 1); - - if (id == 'all' - && !idCanBeAll - ) { - broadcast.propagateNewPage('module=MultiSites&action=index'); - } - else { - $('.sites_autocomplete input').val(id); - $mainLink - .find('span') - .text(name); - broadcast.propagateNewPage('segment=&idSite=' + id, showAjaxLoading); - } - return false; -} - -$(function () { - - var reset = function (selector) { - $('.websiteSearch', selector).val(''); - $('.custom_select_ul_list', selector).show(); - $(".siteSelect.ui-autocomplete,.reset", selector).hide(); - }; - - // sets up every un-inited site selector widget - piwik.initSiteSelectors = function () { - function getUrlForWebsiteId(idSite) { - var idSiteParam = 'idSite=' + idSite; - var newParameters = 'segment=&' + idSiteParam; - var hash = broadcast.isHashExists() ? broadcast.getHashFromUrl() : ""; - return piwikHelper.getCurrentQueryStringWithParametersModified(newParameters) - + '#' + piwikHelper.getQueryStringWithParametersModified(hash.substring(1), newParameters); - } - - $('.sites_autocomplete').each(function () { - var selector = $(this); - - if (selector.attr('data-inited') == 1) { - return; - } - - selector.attr('data-inited', 1); - - var setSelectedWebsiteAndName = function (idSite, name) { - var mainLinkElem = $(".custom_select_main_link", selector), - mainLinkSpan = $('span', mainLinkElem); - - mainLinkElem.attr('data-siteid', idSite); - mainLinkSpan.text(name); - }; - - var websiteSearch = $('.websiteSearch', selector); - - // when the search input is clicked, clear the input - websiteSearch.click(function () { - $(this).val(''); - }); - - // when a key is released over the search input when empty, reset the selector - // - websiteSearch.keyup(function (e) { - if (e.keyCode == 27) { - $('.custom_select_block', selector).removeClass('custom_select_block_show'); - return false; - } - - if (!$(this).val()) { - reset(selector); - } - }); - - // setup the autocompleter - websiteSearch.autocomplete({ - minLength: 1, - source: '?module=SitesManager&action=getSitesForAutocompleter', - appendTo: $('.custom_select_container', selector), - 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. - ui.item.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) - .html($('<span/>').text(ui.item.name)); - - // hide the dropdown - $('.custom_select_block', selector).removeClass('custom_select_block_show'); - - // fire the site selected event - selector.trigger('piwik:siteSelected', ui.item); - } - else { - reset(selector); - } - - return false; - }, - focus: function (event, ui) { - $('.websiteSearch', selector).val(ui.item.name); - return false; - }, - search: function (event, ui) { - $('.reset', selector).show(); - $('.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).attr('data-loading', 0); - - var maxSitenameWidth = $('.max_sitename_width', selector); - if (widthSitesSelection > maxSitenameWidth.val()) { - maxSitenameWidth.val(widthSitesSelection); - } - else { - maxSitenameWidth = +maxSitenameWidth.val(); // convert to int - } - - $('.custom_select_ul_list', selector).hide(); - - // customize jquery-ui's autocomplete positioning - var cssToRemove = {float: 'none', position: 'static'}; - $('.siteSelect.ui-autocomplete', selector) - .show().width(widthSitesSelection).css(cssToRemove) - .find('li,a').each(function () { - $(this).css(cssToRemove); - }); - - $('.custom_select_block_show', selector).width(widthSitesSelection); - } - }).data("ui-autocomplete")._renderItem = function (ul, item) { - $(ul).addClass('siteSelect'); - var linkUrl = getUrlForWebsiteId(item.id); - var link = $("<a></a>").html(item.label).attr('href', linkUrl), - listItem = $('<li></li>'); - - listItem.data("item.ui-autocomplete", item) - .append(link) - .appendTo(ul); - - return listItem; - }; - - // when the reset button is clicked, reset the site selector - $('.reset', selector).click(reset); - - // when mouse button is released on body, check if it is not over the site selector, and if not - // close it - $('body').on('mouseup', function (e) { - var closestSelector = $(e.target).closest('.sites_autocomplete'); - if (!closestSelector.length || !closestSelector.is(selector)) { - if ($('.custom_select_block', selector).hasClass('custom_select_block_show')) { - reset(selector); - $('.custom_select_block', selector).removeClass('custom_select_block_show'); - } - } - }); - - // set event handling code for non-jquery-autocomplete parts of widget - if ($('li', selector).length > 1) { - - // event handler for when site selector is clicked. shows dropdown w/ first X sites - $(".custom_select", selector).click(function(e) { - if(!$(e.target).parents('.custom_select_block').length) { - $(".custom_select_block", selector).toggleClass("custom_select_block_show"); - $(".websiteSearch", selector).val("").focus(); - } - return false; - }); - - $('.custom_select_block', selector).on('mouseenter', function() { - $('.custom_select_ul_list > li > a', selector).each(function() { - var idSite = $(this).attr('data-siteid'); - var linkUrl = getUrlForWebsiteId(idSite); - $(this).attr('href', linkUrl); - }); - }); - - // change selection. fire's site selector's on select event and modifies the attributes - // of the selected link - $('.custom_select_ul_list li a', selector).each(function() { - $(this).click(function (e) { - var idsite = $(this).attr('data-siteid'), - name = $(this).text(); - - setSelectedWebsiteAndName(idsite, name); - - selector.trigger('piwik:siteSelected', {id: idsite, name: name}); - - // close the dropdown - $(".custom_select_block", selector).removeClass("custom_select_block_show"); - - e.preventDefault(); - }); - }); - } - - // handle multi-sites link click (triggers site selected event w/ id=all) - $('.custom_select_all', selector).click(function () { - - setSelectedWebsiteAndName('all', $(this).text()); - - $(".custom_select_block", selector).toggleClass("custom_select_block_show"); - - selector.trigger('piwik:siteSelected', {id: 'all', name: $('.custom_select_all>a', selector).text()}); - }); - - // handle submit button click - $('.but', selector).on('click', function (e) { - if (websiteSearch.val() != '') { - websiteSearch.autocomplete('search', websiteSearch.val() + '%%%'); - } - return false; - }); - - // if the data-switch-site-on-select attribute is set to 1 on the selector, set - // a default handler for piwik:siteSelected that switches the current site - // otherwise only update the input - selector.bind('piwik:siteSelected', function (e, site) { - if (1 == $(this).attr('data-switch-site-on-select')) { - if (piwik.idSite !== site.id) { - switchSite(site.id, site.name); - } - } else { - $('input', this).val(site.id); - } - }); - }); - }; -}); diff --git a/plugins/CoreHome/javascripts/filters/filters.js b/plugins/CoreHome/javascripts/filters/filters.js index b5d8cb327b..f4ebc26774 100644 --- a/plugins/CoreHome/javascripts/filters/filters.js +++ b/plugins/CoreHome/javascripts/filters/filters.js @@ -10,3 +10,9 @@ piwikApp.filter('translate', function() { return _pk_translate(key); } }); + +piwikApp.filter('htmldecode', function() { + return function(theString) { + return piwikHelper.htmlDecode(theString); + } +}); diff --git a/plugins/CoreHome/javascripts/piwikApp.js b/plugins/CoreHome/javascripts/piwikApp.js index 36dc2c55c4..57376fb346 100644 --- a/plugins/CoreHome/javascripts/piwikApp.js +++ b/plugins/CoreHome/javascripts/piwikApp.js @@ -1,2 +1,2 @@ -var piwikApp = angular.module('piwikApp', []); +var piwikApp = angular.module('piwikApp', ['ngSanitize']); var customApp = angular.module('app', []); diff --git a/plugins/CoreHome/javascripts/dependencies/PiwikApi.js b/plugins/CoreHome/javascripts/services/PiwikApi.js index 87328e6239..87328e6239 100644 --- a/plugins/CoreHome/javascripts/dependencies/PiwikApi.js +++ b/plugins/CoreHome/javascripts/services/PiwikApi.js diff --git a/plugins/CoreHome/javascripts/services/piwik.js b/plugins/CoreHome/javascripts/services/piwik.js new file mode 100644 index 0000000000..a1b84be81b --- /dev/null +++ b/plugins/CoreHome/javascripts/services/piwik.js @@ -0,0 +1,14 @@ +/*! + * Piwik - Web Analytics + * + * @link http://piwik.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + + +piwikApp.service('piwik', function () { + + piwik.helper = piwikHelper; + piwik.broadcast = broadcast; + return piwik; +}); diff --git a/plugins/CoreHome/javascripts/siteselector/controller.js b/plugins/CoreHome/javascripts/siteselector/controller.js index 9c3e2c9daf..2998bc2f92 100644 --- a/plugins/CoreHome/javascripts/siteselector/controller.js +++ b/plugins/CoreHome/javascripts/siteselector/controller.js @@ -1,81 +1,37 @@ -/*! - * Piwik - Web Analytics - * - * @link http://piwik.org - * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */ +piwikApp.controller('SiteSelectorController', ['$scope', 'siteSelectorModel', 'piwik', function($scope, siteSelectorModel, piwik){ -piwikApp.controller('SiteSelectorController', ['$scope', 'piwikApi', function($scope, piwikApi){ - var filterLimit = 10; + $scope.model = siteSelectorModel; + $scope.selectedSite = {id: '', name: ''}; + $scope.activeSiteId = piwik.idSite; - $scope.sites = []; - $scope.hasMultipleWebsites = false; - $scope.isLoading = false; + $scope.model.loadInitialSites(); $scope.switchSite = function (site) { if (!$scope.switchSiteOnSelect || piwik.idSite == site.idsite) { - $scope.selector.selectedSiteId = site.idsite; - $scope.siteName = site.name; + $scope.selectedSite.id = site.idsite; + $scope.selectedSite.name = site.name; return; } - if (site.idsite == 'all' && !$scope.showAllSitesItem) { - broadcast.propagateNewPage('module=MultiSites&action=index'); + if (site.idsite == 'all') { + piwik.broadcast.propagateNewPage('module=MultiSites&action=index'); } else { - broadcast.propagateNewPage($scope.getUrlForWebsiteId(site.idsite), false); + piwik.broadcast.propagateNewPage('segment=&idSite=' + site.idsite, false); } }; - $scope.getUrlForWebsiteId = function (idSite) { + function getUrlForWebsiteId (idSite) { var idSiteParam = 'idSite=' + idSite; var newParameters = 'segment=&' + idSiteParam; - var hash = broadcast.isHashExists() ? broadcast.getHashFromUrl() : ""; - return piwikHelper.getCurrentQueryStringWithParametersModified(newParameters) - + '#' + piwikHelper.getQueryStringWithParametersModified(hash.substring(1), newParameters); - }; - - $scope.updateWebsitesList = function (websites) { - angular.forEach(websites, function (website) { - website.name = piwikHelper.htmlDecode(website.name); - }); - - $scope.sites = websites; - - if (!$scope.siteName) { - $scope.siteName = websites[0].name; - } - - $scope.hasMultipleWebsites = websites.length > 1; + var hash = piwik.broadcast.isHashExists() ? piwik.broadcast.getHashFromUrl() : ""; + return piwik.helper.getCurrentQueryStringWithParametersModified(newParameters) + + '#' + piwik.helper.getQueryStringWithParametersModified(hash.substring(1), newParameters); }; +}]); - $scope.searchSite = function (term) { - if (!term) { - $scope.loadInitialSites(); - return; - } - $scope.isLoading = true; - piwikApi.fetch({ - method: 'SitesManager.getPatternMatchSites', - filter_limit: filterLimit, - pattern: term - }).then(function (response) { - $scope.updateWebsitesList(response); - }).finally(function () { - $scope.isLoading = false; - }); - }; - - $scope.loadInitialSites = function () { - $scope.isLoading = true; - piwikApi.fetch({ - method: 'SitesManager.getSitesWithAtLeastViewAccess', - filter_limit: filterLimit, - showColumns: 'name,idsite' - }).then(function (response) { - $scope.updateWebsitesList(response); - }).finally(function () { - $scope.isLoading = false; - }); - } - -}]);
\ No newline at end of file +/*! + * Piwik - Web Analytics + * + * @link http://piwik.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ diff --git a/plugins/CoreHome/javascripts/siteselector/directives.js b/plugins/CoreHome/javascripts/siteselector/directives.js index bbe004ec30..0c60ed43d4 100644 --- a/plugins/CoreHome/javascripts/siteselector/directives.js +++ b/plugins/CoreHome/javascripts/siteselector/directives.js @@ -5,33 +5,50 @@ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later */ -piwikApp.directive('piwikSiteSelector', function($document){ +piwikApp.directive('piwikSiteSelector', function($document, piwik, $filter){ + + function getBool(attr, property, defaultValue) + { + if (angular.isDefined(attr[property])) { + return !!parseInt(attr[property]); + } + + return defaultValue; + } + return { restrict: 'A', - link: function(scope, element, attr, ctrl) { - // TODO pass Piwik as a depedency - - // 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: true, + templateUrl: 'plugins/CoreHome/javascripts/siteselector/partial.html', + controller: 'SiteSelectorController', + compile: function (element, attrs) { + element.addClass('sites_autocomplete'); - scope.allWebsitesLinkLocation = attr.allwebsiteslocation || 'bottom'; - scope.showAutocomplete = attr.showautocomplete || true; - scope.siteName = attr.sitename || piwik.siteName; - scope.selector.selectedSiteId = attr.selectedsiteid || piwik.idSite; - scope.inputName = attr.inputname || ''; - scope.showSelectedSite = attr.showselectedsite || false; - scope.selectorId = attr.selectorid || false; - scope.switchSiteOnSelect = attr.switchsiteonselect || true; - scope.showAllSitesItem = attr.showallsitesitem || true; + return function (scope, element, attr, ctrl) { - /* - $scope.max_sitename_width = 130; // can be removed? - */ + // 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.allSitesLocation = attr.allsiteslocation || 'bottom'; + scope.allSitesText = attr.allsitestext || $filter('translate')('General_MultiSitesSummary'); + scope.selectedSite = {id: attr.siteid || piwik.idSite, name: attr.sitename || ''}; + scope.inputName = attr.inputname || ''; + scope.showAutocomplete = getBool(attr, 'showautocomplete', true); + scope.showSelectedSite = getBool(attr, 'showselectedsite', false); + scope.switchSiteOnSelect = getBool(attr, 'switchsiteonselect', true); + scope.showAllSitesItem = getBool(attr, 'showallsitesitem', true); + /* + $scope.max_sitename_width = 130; // can be removed? + */ - }, - // scope: {showAutoComplete: '=showautocomplete', siteName: '=sitename'}, - templateUrl: 'plugins/CoreHome/javascripts/siteselector/partial.html' + scope.$watch('selectedSite.id', function (newValue, oldValue, scope) { + if (newValue != oldValue) { + element.attr('siteid', newValue); + element.trigger('change', scope.selectedSite); + } + }); + } + } } });
\ No newline at end of file diff --git a/plugins/CoreHome/javascripts/siteselector/partial.html b/plugins/CoreHome/javascripts/siteselector/partial.html index 6f121f052d..188b60785c 100644 --- a/plugins/CoreHome/javascripts/siteselector/partial.html +++ b/plugins/CoreHome/javascripts/siteselector/partial.html @@ -1,46 +1,40 @@ -<div ng-class="{'sites_autocomplete--dropdown': (hasMultipleWebsites || showAllSitesItem)}" - id="{{ selectorId }}"> - <div piwik-focus-anywhere-but-here="selector.showSitesList=false" class="custom_select"> +<div ng-class="{'sites_autocomplete--dropdown': (model.hasMultipleWebsites || showAllSitesItem)}"> + <div piwik-focus-anywhere-but-here="view.showSitesList=false" class="custom_select"> - <input ng-if="inputName" ng-model="selector.selectedSiteId" type="hidden" name="{{ inputName }}" value=""/> + <input ng-if="inputName" type="hidden" name="{{ inputName }}" value="{{ selectedSite.id }}"/> - <a ng-click="selector.showSitesList=!selector.showSitesList; selector.showSitesList && loadInitialSites()" href="javascript:void(0)" - class="custom_select_main_link" ng-class="{'loading': isLoading}" - data-siteid="{{ selectedSiteId }}"> - <span ng-bind="siteName"></span> + <a ng-click="view.showSitesList=!view.showSitesList; view.showSitesList && model.loadInitialSites()" href="javascript:void(0)" + class="custom_select_main_link" ng-class="{'loading': model.isLoading}"> + <span ng-bind="selectedSite.name || model.firstSiteName"></span> </a> - <div ng-show="selector.showSitesList" class="custom_select_block"> + <div ng-show="view.showSitesList" class="custom_select_block"> - <div ng-click="siteName='Ddd'" ng-show="allWebsitesLinkLocation=='top' && showAllSitesItem" class="custom_select_all" style="clear: both;"> - <a href="#"> - {{ allSitesItemText || 'General_MultiSitesSummary'|translate }} - </a> + <div ng-click="switchSite({idsite: 'all', name: allSitesText})" ng-if="allSitesLocation=='top' && showAllSitesItem" class="custom_select_all"> + <a href="#" ng-bind-html="allSitesText"></a> </div> <div class="custom_select_container"> <ul class="custom_select_ul_list"> - <li ng-focus="selector.searchTerm=site.name" ng-click="selector.showSitesList=false; switchSite(site)" ng-repeat="site in sites" ng-hide="!showSelectedSite && piwik.idSite==site.idsite"> - <a href="javascript:void(0)" piwik-autocomplete-matched="selector.searchTerm">{{ site.name }}</a> + <li ng-click="view.showSitesList=false; switchSite(site)" ng-repeat="site in model.sites" ng-hide="!showSelectedSite && activeSiteId==site.idsite"> + <a href="javascript:void(0)" piwik-autocomplete-matched="view.searchTerm">{{ site.name }}</a> </li> </ul> - <ul ng-show="!sites.length" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all siteSelect"> + <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) + ' ' + selector.searchTerm }}</a> + <a class="ui-corner-all" style="float:none;position:static" tabindex="-1">{{ ('SitesManager_NotFound' | translate) + ' ' + view.searchTerm }}</a> </li> </ul> </div> - <div ng-click="siteName='Ddd'" ng-show="allWebsitesLinkLocation=='bottom' && showAllSitesItem" class="custom_select_all" style="clear: both;"> - <a href="#"> - {{ allSitesItemText || 'General_MultiSitesSummary'|translate }} - </a> + <div ng-click="switchSite({idsite: 'all', name: allSitesText})" ng-if="allSitesLocation=='bottom' && showAllSitesItem" class="custom_select_all"> + <a href="javascript:void(0)" ng-bind-html="allSitesText"></a> </div> <div class="custom_select_search" ng-show="showAutocomplete"> - <input type="text" ng-focus="selector.showSitesList" ng-click="selector.searchTerm=''" ng-model="selector.searchTerm" ng-change="searchSite(selector.searchTerm)" length="15" class="websiteSearch inp"/> + <input type="text" ng-click="view.searchTerm=''" ng-model="view.searchTerm" ng-change="model.searchSite(view.searchTerm)" length="15" class="websiteSearch inp"/> <input type="submit" value="Search" class="but"/> - <img title="Clear" ng-show="selector.searchTerm" ng-click="selector.searchTerm=''; loadInitialSites()" class="reset" style="position: relative; top: 4px; left: -44px; cursor: pointer;" + <img title="Clear" 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> diff --git a/plugins/CoreHome/javascripts/siteselector/services.js b/plugins/CoreHome/javascripts/siteselector/services.js new file mode 100644 index 0000000000..f936112c1d --- /dev/null +++ b/plugins/CoreHome/javascripts/siteselector/services.js @@ -0,0 +1,62 @@ + +piwikApp.factory('siteSelectorModel', function (piwikApi, $filter) { + var filterLimit = 10; + + var model = {}; + model.sites = []; + model.hasMultipleWebsites = false; + model.isLoading = false; + model.firstSiteName = ''; + + model.updateWebsitesList = function (websites) { + + if (!websites || !websites.length) { + model.sites = []; + return; + } + + angular.forEach(websites, function (website) { + website.name = $filter('htmldecode')(website.name); + }); + + model.sites = websites; + + if (!model.firstSiteName) { + model.firstSiteName = websites[0].name; + } + + model.hasMultipleWebsites = model.hasMultipleWebsites || websites.length > 1; + }; + + model.searchSite = function (term) { + if (!term) { + model.loadInitialSites(); + return; + } + model.isLoading = true; + piwikApi.fetch({ + 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; + }); + } + + return model; +}); diff --git a/plugins/CoreHome/templates/_siteSelect.twig b/plugins/CoreHome/templates/_siteSelect.twig deleted file mode 100644 index 63bf632f04..0000000000 --- a/plugins/CoreHome/templates/_siteSelect.twig +++ /dev/null @@ -1,6 +0,0 @@ -<div ng-controller="SiteSelectorController" - piwik-site-selector - showautocomplete="false" - sitename="test" - inputname="test" - class="sites_autocomplete"></div> diff --git a/plugins/CoreHome/templates/_siteSelectHeader.twig b/plugins/CoreHome/templates/_siteSelectHeader.twig index ba643376a3..b0ea798533 100644 --- a/plugins/CoreHome/templates/_siteSelectHeader.twig +++ b/plugins/CoreHome/templates/_siteSelectHeader.twig @@ -1,7 +1,5 @@ <div class="top_bar_sites_selector {% if currentModule == 'CoreHome' %}sites_selector_in_dashboard{% endif %}"> <label>{{ 'General_Website'|translate }}</label> - <div ng-controller="SiteSelectorController" - piwik-site-selector - class="sites_autocomplete"></div> + <div piwik-site-selector></div> </div>
\ No newline at end of file diff --git a/plugins/UsersManager/javascripts/usersManager.js b/plugins/UsersManager/javascripts/usersManager.js index 19a7817565..229753b47b 100644 --- a/plugins/UsersManager/javascripts/usersManager.js +++ b/plugins/UsersManager/javascripts/usersManager.js @@ -293,7 +293,7 @@ $(document).ready(function () { $('#superUserAccess .accessGranted, #superUserAccess .updateAccess').click(bindUpdateSuperUserAccess); // when a site is selected, reload the page w/o showing the ajax loading element - $('#usersManagerSiteSelect').bind('piwik:siteSelected', function (e, site) { + $('#usersManagerSiteSelect').bind('change', function (e, site) { if (site.id != piwik.idSite) { switchSite( site.id, diff --git a/plugins/UsersManager/javascripts/usersSettings.js b/plugins/UsersManager/javascripts/usersSettings.js index a26652255d..d50f0321b0 100644 --- a/plugins/UsersManager/javascripts/usersSettings.js +++ b/plugins/UsersManager/javascripts/usersSettings.js @@ -24,7 +24,7 @@ function sendUserSettingsAJAX() { var defaultReport = $('input[name=defaultReport]:checked').val(); if (defaultReport == 1) { - defaultReport = $('#userSettingsTable').find('.custom_select_main_link').attr('data-siteid'); + defaultReport = $('#defaultReportSiteSelector').attr('siteid'); } var postParams = {}; postParams.alias = alias; diff --git a/plugins/UsersManager/templates/index.twig b/plugins/UsersManager/templates/index.twig index cfb1d76510..734aabbf23 100644 --- a/plugins/UsersManager/templates/index.twig +++ b/plugins/UsersManager/templates/index.twig @@ -12,14 +12,14 @@ {% set applyAllSitesText %} <strong>{{ 'UsersManager_ApplyToAllWebsites'|translate }}</strong> {% endset %} - {% include "@CoreHome/_siteSelect.twig" with { - 'siteName': defaultReportSiteName, - 'idSite':idSiteSelected, - 'allSitesItemText': applyAllSitesText, - 'allWebsitesLinkLocation': 'top', - 'siteSelectorId':"usersManagerSiteSelect", - 'switchSiteOnSelect':false - } %} + + <div piwik-site-selector + siteid="{{ idSiteSelected }}" + sitename="{{ defaultReportSiteName }}" + allsitestext="{{ applyAllSitesText|raw }}" + allsiteslocation="top" + id="usersManagerSiteSelect" + switchsiteonselect="0"></div> </section> </div> diff --git a/plugins/UsersManager/templates/userSettings.twig b/plugins/UsersManager/templates/userSettings.twig index aa64d90ccb..4fe5b9e7dd 100644 --- a/plugins/UsersManager/templates/userSettings.twig +++ b/plugins/UsersManager/templates/userSettings.twig @@ -43,14 +43,14 @@ {% else %} {% set defaultReportIdSite=defaultReport %} {% endif %} - {% include "@CoreHome/_siteSelect.twig" with { - 'siteName':defaultReportSiteName, - 'idSite':defaultReportIdSite, - 'switchSiteOnSelect':false, - 'showAllSitesItem':false, - 'showSelectedSite':true, - 'siteSelectorId': 'defaultReportSiteSelector' - } %} + + <div piwik-site-selector + siteid="{{ defaultReportIdSite }}" + sitename="{{ defaultReportSiteName }}" + switchsiteonselect="0" + showallsitesitem="0" + showselectedsite="1" + id="defaultReportSiteSelector"></div> </fieldset> </td> </tr> |