Switch from bower to npm and update JS libraries (#14082)

* Starting to replace bower with npm: use updated jquery-ui from npm.

* Use jquery from npm./

* Use angular from npm.

* Add more angular libraries.

* Use chroma-js from npm.

* Remove html5shiv, does not appear to be used.

* Use iframe resizer library from npm.

* Add jquery-mousewheel

* Add jquery.dotdotdot from npm.

* Get jquery.scrollto from npm.

* Get jscrollpane from npm.

* Get materialize-css from npm.

* Get mousetrap from npm.

* Remove ngDialog, as it is no longer used.

* Install qrcode.js from npm.

* Get sprintf-js from npm.

* Get visibillityjs from npm.

* Remove bower.json.

* Getting parts of matomo to work w/ new versions of libraries installed by npm.

* Ignore node_modules subfolders in node_modules since we only use npm for frontend dependencies + fix a test.

* Fix button padding.

* Fix series picker checkboxes.

* Fix karma conf.

* Fix CSS in right place.

* Fixing more css/less issues.

* More test fixes.

* Limit selection style fix.

* Fix more tests + materializecss issues.

* Fix a couple more tests.

* Fix annotation styling.

* remove error

* add ng-dialog files

* try to fix some tests

* Fix several UI tests.

* fixing more build issues

* Fix several more tests and issues.

* fixing more tests

* split ui tests into 3 groups

* fix several more issues and tests

* Fix some console warnings on chrome.

* Updating more test files.

* fix some tests

* yet more fixes

* couple more fixes

* another form fix

* Fix some tests.

* update screenshot

* update more expected files

* Fix two more form issues.

* test commit (travis is not fetching submodules for some reason...)

* remove scripts removed in merge

* three travis builds

* split UIIntegrationTest into multiple suites

* lets try this again

* updae several expected screenshots

* fix some more tests

* fix plugin details material select and tabs initiaialization

* update screenshots + css fix

* re-initialize materialize tabs since we load jquery-ui afterwards for datepicker which unsets materialize tabs

* update more screenshots and fix couple more issues

* update more screenshots + tweak to test

* more fixes and screenshot updates

* fix some issues and update more screenshots

* update submodules

* more fixes + more updated screenshots

* more css fixes and test fixes

* couple fixes & updated screenshots

* update screenshots

* fix random failure

* Map old bower_component files to new ones in AssetManager.

* Remove node_modules from PR and ignore node_modules in .gitignore and remove libs/jquery (adding new required libs).

* Update .travis.yml.

* update screenshots

* fixing some more issues

* fix copy pasta

* update screenshots

* fix more modal issues

* Update css & screenshots.

* correct close modal calls

* fixing more issues

* data-target instead of data-activates

* fix more tests

* trigger build that works?

* fix more tests

* update submodule

* debugging travis

* more debugging

* try to fix test

* fix modal no button click in test

* update more screenshots

* couple more test fixes

* some more fixes and updated screenshots

* update screenshots

* apply some review feedback

* Fix modal centering and initial top position.

* apply some more pr feedback

* another pr fix

* update submodule

* remove style

* fix color of checkbox mark

* Fix centering the popover

Note: centering the popover relative to body doesn't work poperly anymore, maybe because of the fixed position of the widget overlay. Using the ui-widget-overlay to position the dialog centered seems to work

* ignore line endings check for node modules

* updates expected UI files

* submodule updates

* use minified file of jquery.browser.js

* updates expected test files

* ensure to hide parent tooltips when row action tooltips are shown

* tweak less for datatable navigation

* style is only useful for dashboard

* update some screenshots

* update submodules

Co-authored-by: sgiehl <stefan@matomo.org>

4 files changed, 41 insertions, 4 deletions

diff --git a/plugins/CoreHome/javascripts/corehome.js b/plugins/CoreHome/javascripts/corehome.js
index 35ef55c555..90e74d7de4 100644
--- a/plugins/CoreHome/javascripts/corehome.js
+++ b/plugins/CoreHome/javascripts/corehome.js
@@ -85,7 +85,7 @@ $( document ).ready(function() {
         $(window).scrollTo($('a[name="main"]'));
     });
 
-    $("nav .activateTopMenu").sideNav({
+    $("#mobile-top-menu").sideNav({
         closeOnClick: true,
         edge: 'right'
     });
diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 137c832402..d6bd212afe 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -1974,6 +1974,24 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                     items: 'a',
                     content: '<h3>'+action.dataTableIconTooltip[0]+'</h3>'+action.dataTableIconTooltip[1],
                     tooltipClass: 'rowActionTooltip',
+                    // ensure the tooltips of parent elements are hidden when the action tooltip is shown
+                    // otherwise it can happen that tooltips for subtable rows are shown as well.
+                    open: function() {
+                        var tooltip = $(this).parents().filter(function() {
+                            return jQuery.hasData(this) && $(this).data('ui-tooltip');
+                        }).tooltip('instance');
+                        if (tooltip) {
+                            tooltip.disable();
+                        }
+                    },
+                    close: function() {
+                        var tooltip = $(this).parents().filter(function() {
+                            return jQuery.hasData(this) && $(this).data('ui-tooltip');
+                        }).tooltip('instance');
+                        if (tooltip) {
+                            tooltip.enable();
+                        }
+                    },
                     show: false,
                     hide: false
                 });
diff --git a/plugins/CoreHome/javascripts/materialize-bc.js b/plugins/CoreHome/javascripts/materialize-bc.js
new file mode 100644
index 0000000000..0bcede9018
--- /dev/null
+++ b/plugins/CoreHome/javascripts/materialize-bc.js
@@ -0,0 +1,18 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link http://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    $(document).ready(function () {
+        window.Materialize = window.M;
+        $.fn.sideNav = $.fn.sidenav;
+        $.fn.material_select = $.fn.formSelect;
+
+        // we load jquery-ui after materialize so we can use the jquery-ui datepicker, but
+        // some controls in materialize get overwritten too. so we undo that here.
+        M.initializeJqueryWrapper(M.Tabs, 'tabs', 'M_Tabs');
+        M.initializeJqueryWrapper(M.Modal, 'modal', 'M_Modal');
+    });
+})();
\ No newline at end of file
diff --git a/plugins/CoreHome/javascripts/popover.js b/plugins/CoreHome/javascripts/popover.js
index 2ff4457e06..44efe54e74 100644
--- a/plugins/CoreHome/javascripts/popover.js
+++ b/plugins/CoreHome/javascripts/popover.js
@@ -26,7 +26,6 @@ var Piwik_Popover = (function () {
             title: title,
             modal: true,
             width: '1050px',
-            position: ['center', 'center'],
             resizable: false,
             autoOpen: true,
             open: function (event, ui) {
@@ -85,7 +84,7 @@ var Piwik_Popover = (function () {
 
     var centerPopover = function () {
         if (container !== false) {
-            container.dialog({position: ['center', 'center']});
+            container.dialog("option", "position", {my: 'center', at: 'center', of: '.ui-widget-overlay', collision: 'fit'});
         }
     };
 
@@ -186,7 +185,8 @@ var Piwik_Popover = (function () {
             
             container.children().each(function (i, childNode) {
                 piwikHelper.compileAngularComponents(childNode);
-            })
+            });
+
             centerPopover();
         },
 
@@ -263,6 +263,7 @@ var Piwik_Popover = (function () {
             // make sure the minimum top position of the popover is 15px
             var ensureMinimumTop = function () {
                 var popoverContainer = $('#Piwik_Popover').parent();
+                popoverContainer.css('top', (window.scrollY + 15) + 'px');
                 if (popoverContainer.position().top < 106) {
                     popoverContainer.css('top', '15px');
                 }