diff options
author | dizzy <diosmosis@users.noreply.github.com> | 2021-11-15 16:00:13 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-11-15 16:00:13 +0300 |
commit | 89cb577059ff4b7d850c316dd361a326ecb39f47 (patch) | |
tree | df84f7b103c1f89ee595164660ff921108643416 /plugins/CoreHome/angularjs | |
parent | cc8efde643c25abea56b294b88d4ca5724e21eda (diff) |
[Vue] migrate notifications directive & service + UI.Notifications (#18225)
* migrating RateFeature and ReviewLinks + adding AjaxHelper.fetch utility method (all untested)
* get ratefeature component to work, modify matomodialog component to use v-model, add event parameters to createAngularAdapter, allow translate to use variadic args or one string array + rebuild
* remove ratefeature angularjs files
* rebuild + make vue mapping property optional in createANgularJsAdapter
* migrate enrichedheadline and get to work
* fix test
* fix translate
* fix another translate issue & migrate contentblock directive
* fix anchor links, not including the "/" causes angularjs to fail (also on 4.x-dev)
* update expected screenshots
* fix ui test
* fix some test failures
* fix nested transclude issue
* remove content block files
* fix icon spacing that occurs due to angularjs inserting empty comments in between nodes while vue 3 does not
* update some screenshots
* update screenshot (actually fixes an alignment issue)
* update screenshot
* first pass at converting comparisons service/component
* get new code to build and load without error in the UI
* debugging
* getting basic functionaltiy to work
* Update _dataTable.twig
* fix UI test failure + URL encoding/angularjs issue causing back button to not work
* fix order of operations issue
* built vue files
* using ref in setup() is not needed to access this.$refs
* Convert comparisons service angularjs tests to comparison store typescript tests.
* migrate piwik-date-picker directive
* migrate date range picker component (changed invalid date in input handling to just reset back to the previous date since it was easier in vue to do that)
* migrate period-date-picker component (using composition api more when easier for migration)
* convert piwik-expand-onclick directive to vue directive
* migrate expand on hover directive to vue directive
* fix variable reference
* build
* Add materialize-css @types and migrate piwik-dropdown-menu.
* migrate focus-anywhere-but-here directive to vue directive
* migrate focus-if directive
* migrate menudropdown directive
* forgot to remove old files
* built vue files
* first pass at migrating notification directive, notification service and parts of UI.Notification to Vue
* rewrite URL handling to use computed properties in a URL store + do the same for other dependent data in the comparison store to allow vues to subscribe to the properties for changes to global state
* fix some tests
* some more fixes
* more fixes + disallow modifications to MatomoUrl state
* get angularjs unit tests to pass + fix a couple more issues
* another fix
* fix bad merge
* self review + fixes
* remove old fix as it may not be needed anymore
* empty string is not a valid date + do not report invalid date exception just rethrow
* update screenshots and try to fix random failure
* use jquery $destroy event instead of scope one since the scope one is broadcasted
* rangeChange event must be triggered once on mount
* initialize startDateText/endDateText correctly
* use jquery $destroy event instead of angularjs one
* built vue files
* fix menudropdown.directive.js reference
* load vue in installation/updater & correctly make focusanywherebuthere stateful
* correctly implement stateful directives for ExpandOnClick/ExpandOnHover
* less tweak (angularjs comment removal)
* fix submenu check
* quick type fix
* load vue in installation workflow
* add broadcast.js to Installation workflow + do not fail in pk_translate if no translations are loaded
* update expected screenshots (spacing of arrow changed because of angularjs comment no longer being there)
* start moving Notification class code to notifications store
* fix prop type
* fix html escaping
* built vue files
* get toast and other transitions to work + fix broken toast
* move all of notification.js to NotificationStore
* wait for angular to be initialized to post events to avoid loading race condition
* get scroll to notification to work + get initialization of notification groups to work
* correct unmount + remove notifications service file
* fix some test failures
* re add accidentally removed (?) file
* remove no longer needed file
* Add CoreHome UMD in CoreUpdater/Installation.
* self review
* fix type + add default value
* remove file from JS list
* fix test
* fix UI tests
* set correct type in users manager notification and allow scope values to be transformed in createAngularAdapter
* built vue files
* get focus-if to work and remove debugging return;
* rebuilt vue
* built vue files
Co-authored-by: sgiehl <stefan@matomo.org>
Diffstat (limited to 'plugins/CoreHome/angularjs')
6 files changed, 1 insertions, 264 deletions
diff --git a/plugins/CoreHome/angularjs/notification/notification.controller.js b/plugins/CoreHome/angularjs/notification/notification.controller.js deleted file mode 100644 index 80497e940f..0000000000 --- a/plugins/CoreHome/angularjs/notification/notification.controller.js +++ /dev/null @@ -1,34 +0,0 @@ -/*! - * Matomo - free/libre analytics platform - * - * @link https://matomo.org - * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */ -(function () { - angular.module('piwikApp').controller('NotificationController', NotificationController); - - NotificationController.$inject = ['piwikApi']; - - function NotificationController(piwikApi) { - /** - * Marks a persistent notification as read so it will not reappear on the next page - * load. - */ - this.markNotificationAsRead = function (notificationId) { - if (!notificationId) { - return; - } - - piwikApi.withTokenInUrl(); - piwikApi.post( - { // GET params - module: 'CoreHome', - action: 'markNotificationAsRead' - }, - { // POST params - notificationId: notificationId - } - ); - }; - } -})();
\ No newline at end of file diff --git a/plugins/CoreHome/angularjs/notification/notification.directive.html b/plugins/CoreHome/angularjs/notification/notification.directive.html deleted file mode 100644 index 82138156f1..0000000000 --- a/plugins/CoreHome/angularjs/notification/notification.directive.html +++ /dev/null @@ -1,8 +0,0 @@ -<div class="notification system"> - <button type="button" class="close" data-dismiss="alert" ng-if="!noclear" ng-click="notification.markNotificationAsRead(notificationId)">×</button> - <strong ng-if="title">{{ title }}</strong> - - <!-- ng-transclude causes directive child elements to be added here --> - <div ng-transclude></div> - -</div> diff --git a/plugins/CoreHome/angularjs/notification/notification.directive.js b/plugins/CoreHome/angularjs/notification/notification.directive.js deleted file mode 100644 index 51ff0d4819..0000000000 --- a/plugins/CoreHome/angularjs/notification/notification.directive.js +++ /dev/null @@ -1,99 +0,0 @@ -/*! - * Matomo - free/libre analytics platform - * - * @link https://matomo.org - * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */ - -/** - * Directive to show a notification. - * - * Note: using this directive is preferred over the Notification class (which uses jquery - * exclusively). - * - * Supports the following attributes: - * - * * **context**: Either 'success', 'error', 'info', 'warning' - * * **type**: Either 'toast', 'persistent', 'transient' - * * **noclear**: If truthy, no clear button is displayed. For persistent notifications, has no effect. - * - * Usage: - * - * <div piwik-notification context="success" type="persistent" noclear="true"> - * <strong>Info: </strong>My notification message. - * </div> - */ -(function () { - angular.module('piwikApp').directive('piwikNotification', piwikNotification); - - piwikNotification.$inject = ['piwik', '$timeout']; - - function piwikNotification(piwik, $timeout) { - return { - restrict: 'A', - scope: { - notificationId: '@?', - title: '@?notificationTitle', // TODO: shouldn't need this since the title can be specified within - // HTML of the node that uses the directive. - context: '@?', - type: '@?', - noclear: '@?', - toastLength: '@?' - }, - transclude: true, - templateUrl: 'plugins/CoreHome/angularjs/notification/notification.directive.html?cb=' + piwik.cacheBuster, - controller: 'NotificationController', - controllerAs: 'notification', - link: function (scope, element) { - scope.toastLength = scope.toastLength || 12 * 1000; - - if (scope.notificationId) { - closeExistingNotificationHavingSameIdIfNeeded(scope.notificationId, element); - } - - if (scope.context) { - element.children('.notification').addClass('notification-' + scope.context); - } - - if (scope.type == 'persistent') { - // otherwise it is never possible to dismiss the notification - scope.noclear = false; - } - - if ('toast' == scope.type) { - addToastEvent(); - } - - if (!scope.noclear) { - addCloseEvent(); - } - - function addToastEvent() { - $timeout(function () { - element.fadeOut('slow', function() { - element.remove(); - }); - }, scope.toastLength); - } - - function addCloseEvent() { - element.on('click', '.close', function (event) { - if (event && event.delegateTarget) { - angular.element(event.delegateTarget).remove(); - } - }); - } - - function closeExistingNotificationHavingSameIdIfNeeded(id, notificationElement) { - // TODO: instead of doing a global query for notification, there should be a notification-container - // directive that manages notifications. - var notificationStillExists = !!notificationElement.parents('body').length; - var existingNode = angular.element('[notification-id=' + id + ']').not(notificationElement); - if (notificationStillExists && existingNode && existingNode.length) { - existingNode.remove(); - } - } - } - }; - } -})();
\ No newline at end of file diff --git a/plugins/CoreHome/angularjs/notification/notification.directive.less b/plugins/CoreHome/angularjs/notification/notification.directive.less deleted file mode 100644 index ae372d74b6..0000000000 --- a/plugins/CoreHome/angularjs/notification/notification.directive.less +++ /dev/null @@ -1,69 +0,0 @@ -.system.notification { - .alert; - - box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); - border: 0 !important; - - p:not(:first-child) { - margin-top: 1em; - } - - // We have to use !important because the default button style is crazy - .close { - position: relative; - top: -5px; - right: -10px; - padding: 0 !important; - background: transparent !important; - border: none !important; - float: right; - font-size: 20px !important; - font-weight: bold; - line-height: 20px !important; - color: inherit !important; - opacity: 0.3; - filter: alpha(opacity=30); - } - - &.notification-success { - .alert-success; - color: #eef6ef !important; - background-color: @color-green-piwik !important; - &:before, p, a { - color: #eef6ef; - } - } - &.notification-warning { - .alert-warning; - background-color: #f57c00; - color: #fbf7f1 !important; - &:before, p, a { - color: #fbf7f1; - } - } - &.notification-danger, - &.notification-error { - .alert-danger; - color: #fdf0f2 !important; - background-color: #e53935; - &:before, p, a { - color: #fdf0f2; - } - } - &.notification-info { - .alert-info; - color: #f3feff !important; - background-color: #00bcd4; - &:before, p, a { - color: #f3feff; - } - } - - .help-notification &.notification-info { - background-color: @theme-color-help-background-color; - - &:before { - content: "\e61f"; - } - } -} diff --git a/plugins/CoreHome/angularjs/notification/notification.service.js b/plugins/CoreHome/angularjs/notification/notification.service.js deleted file mode 100644 index 637af734fa..0000000000 --- a/plugins/CoreHome/angularjs/notification/notification.service.js +++ /dev/null @@ -1,53 +0,0 @@ -/*! - * Matomo - free/libre analytics platform - * - * @link https://matomo.org - * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */ -(function () { - angular.module('piwikApp').factory('notifications', NotificationFactory); - - NotificationFactory.$inject = []; - - function NotificationFactory() { - - return { - parseNotificationDivs: parseNotificationDivs, - clearTransientNotifications: clearTransientNotifications, - }; - - function parseNotificationDivs() { - var UI = require('piwik/UI'); - - var $notificationNodes = $('[data-role="notification"]'); - - $notificationNodes.each(function (index, notificationNode) { - $notificationNode = $(notificationNode); - var attributes = $notificationNode.data(); - var message = $notificationNode.html(); - - if (message) { - var notification = new UI.Notification(); - attributes.animate = false; - notification.show(message, attributes); - } - - $notificationNodes.remove(); - }); - } - - function clearTransientNotifications() { - $('[piwik-notification][type=transient]').each(function () { - var $element = angular.element(this); - $element.scope().$destroy(); - $element.remove(); - }); - } - } - - angular.module('piwikApp').run(['notifications', function (notifications) { - $(function () { - notifications.parseNotificationDivs(); - }); - }]); -})(); diff --git a/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js b/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js index 0c34f1e666..949d85a9b0 100644 --- a/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js +++ b/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js @@ -93,7 +93,7 @@ var prefix = '<strong>' + _pk_translate('CoreHome_ReportingCategoryHelpPrefix', [category.name, subcategory.name]) + '</strong><br/>'; - var options = { context: 'info', id: 'reportingmenu-help', type: 'persistent', noclear: true }; + var options = { context: 'info', id: 'reportingmenu-help', type: 'transient', noclear: true }; options['class'] = 'help-notification'; notification.show(prefix + subcategory.help, options); |