diff options
author | dizzy <diosmosis@users.noreply.github.com> | 2021-10-26 15:00:14 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-26 15:00:14 +0300 |
commit | 1023fb7d691ebf47c27aa8a1cab4702c55c2630d (patch) | |
tree | 849d9c373e89d9ceb346238fcd58430f661645f5 /plugins/CoreHome/angularjs | |
parent | 2b72bfe1648f25b76966adc93b6250ed239e0cbe (diff) |
[Vue] Migrate content-block, enriched-headline, rate-feature + related (#18166)
* 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
* Update _dataTable.twig
* fix order of operations issue
* built vue files
* fix variable reference
* built vue files
* make sure absolute paths are not used in polyfill source map
* trigger build
* trigger another build
Co-authored-by: sgiehl <stefan@matomo.org>
Diffstat (limited to 'plugins/CoreHome/angularjs')
6 files changed, 0 insertions, 313 deletions
diff --git a/plugins/CoreHome/angularjs/content-block/content-block.directive.html b/plugins/CoreHome/angularjs/content-block/content-block.directive.html deleted file mode 100644 index 547ea79878..0000000000 --- a/plugins/CoreHome/angularjs/content-block/content-block.directive.html +++ /dev/null @@ -1,10 +0,0 @@ -<div class="card"> - <div class="card-content"> - <h2 ng-if="contentTitle && !feature && !helpUrl && !helpText" class="card-title">{{contentTitle}}</h2> - <h2 ng-if="contentTitle && (feature || helpUrl || helpText)" class="card-title" - piwik-enriched-headline feature-name="{{feature}}" help-url="{{helpUrl}}" inline-help="{{ helpText }}"> - {{contentTitle}}</h2> - <div ng-transclude> - </div> - </div> -</div>
\ No newline at end of file diff --git a/plugins/CoreHome/angularjs/content-block/content-block.directive.js b/plugins/CoreHome/angularjs/content-block/content-block.directive.js deleted file mode 100644 index d803bb98c5..0000000000 --- a/plugins/CoreHome/angularjs/content-block/content-block.directive.js +++ /dev/null @@ -1,89 +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 - */ - -/** - * Usage: - * <div piwik-content-block> - */ -(function () { - angular.module('piwikApp').directive('piwikContentBlock', piwikContentBlock); - - piwikContentBlock.$inject = ['piwik']; - - function piwikContentBlock(piwik){ - - var adminContent = null; - - return { - restrict: 'A', - replace: true, - transclude: true, - scope: { - contentTitle: '@', - feature: '@', - helpUrl: '@', - helpText: '@', - anchor: '@?' - }, - templateUrl: 'plugins/CoreHome/angularjs/content-block/content-block.directive.html?cb=' + piwik.cacheBuster, - controllerAs: 'contentBlock', - compile: function (element, attrs) { - - if (attrs.feature === 'true') { - attrs.feature = true; - } - - return function (scope, element, attrs) { - if (scope.anchor) { - var anchor = $('<a></a>').attr('id', scope.anchor); - element.prepend(anchor); - } - - var inlineHelp = element.find('[ng-transclude] > .contentHelp'); - if (inlineHelp.length) { - scope.helpText = inlineHelp.html(); - inlineHelp.remove(); - } - - if (scope.feature && (scope.feature===true || scope.feature ==='true')) { - scope.feature = scope.contentTitle; - } - - if (adminContent === null) { - // cache admin node for further content blocks - adminContent = $('#content.admin'); - } - - var contentTopPosition = false; - - if (adminContent.length) { - contentTopPosition = adminContent.offset().top; - } - - if (contentTopPosition || contentTopPosition === 0) { - var parents = element.parentsUntil('.col', '[piwik-widget-loader]'); - var topThis; - if (parents.length) { - // when shown within the widget loader, we need to get the offset of that element - // as the widget loader might be still shown. Would otherwise not position correctly - // the widgets on the admin home page - topThis = parents.offset().top; - } else { - topThis = element.offset().top; - } - - if ((topThis - contentTopPosition) < 17) { - // we make sure to display the first card with no margin-top to have it on same as line as - // navigation - element.css('marginTop', '0'); - } - } - }; - } - }; - } -})(); diff --git a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.html b/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.html deleted file mode 100644 index 4907525499..0000000000 --- a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.html +++ /dev/null @@ -1,34 +0,0 @@ -<div class="enrichedHeadline" - ng-mouseenter="view.showIcons=true" ng-mouseleave="view.showIcons=false"> - <div ng-show="!editUrl" class="title" ng-transclude tabindex="6"></div> - <a ng-show="editUrl" class="title" href="{{ editUrl }}" - title="{{ 'CoreHome_ClickToEditX'|translate:(featureName|escape) }}" - ng-transclude ></a> - - <span ng-show="view.showIcons || view.showInlineHelp" class="iconsBar"> - <a ng-if="helpUrl && !inlineHelp" - rel="noreferrer noopener" - target="_blank" - href="{{ helpUrl }}" - title="{{ 'CoreHome_ExternalHelp'|translate }}" - class="helpIcon"><span class="icon-help"></span></a> - - <a ng-if="inlineHelp" - title="{{ (reportGenerated ? 'General_HelpReport' : 'General_Help' )|translate }}" - ng-click="view.showInlineHelp=!view.showInlineHelp" - class="helpIcon" ng-class="{ 'active': view.showInlineHelp }"><span class="icon-info"></span></a> - - <div class="ratingIcons" - piwik-rate-feature - title="{{ featureName }}"></div> - </span> - - <div class="inlineHelp" ng-show="view.showInlineHelp"> - <div ng-bind-html="inlineHelp"></div> - <a ng-if="helpUrl" - rel="noreferrer noopener" - target="_blank" - href="{{ helpUrl }}" - class="readMore">{{ 'General_MoreDetails'|translate }}</a> - </div> -</div> diff --git a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.js b/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.js deleted file mode 100644 index 6280736cf7..0000000000 --- a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.js +++ /dev/null @@ -1,111 +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 - */ - -/** - * Usage: - * - * <h2 piwik-enriched-headline>All Websites Dashboard</h2> - * -> uses "All Websites Dashboard" as featurename - * - * <h2 piwik-enriched-headline feature-name="All Websites Dashboard">All Websites Dashboard (Total: 309 Visits)</h2> - * -> custom featurename - * - * <h2 piwik-enriched-headline help-url="http://piwik.org/guide">All Websites Dashboard</h2> - * -> shows help icon and links to external url - * - * <h2 piwik-enriched-headline edit-url="index.php?module=Foo&action=bar&id=4">All Websites Dashboard</h2> - * -> makes the headline clickable linking to the specified url - * - * <h2 piwik-enriched-headline inline-help="inlineHelp">Pages report</h2> - * -> inlineHelp specified via a attribute shows help icon on headline hover - * - * <h2 piwik-enriched-headline>All Websites Dashboard - * <div class="inlineHelp">My <strong>inline help</strong></div> - * </h2> - * -> alternative definition for inline help - * -> shows help icon to display inline help on click. Note: You can combine inlinehelp and help-url - * - * * <h2 piwik-enriched-headline report-generated="generated time">Pages report</h2> - * -> reportGenerated specified via this attribute shows a clock icon with a tooltip which activated by hover - * -> the tooltip shows the value of the attribute - */ -(function () { - angular.module('piwikApp').directive('piwikEnrichedHeadline', piwikEnrichedHeadline); - - piwikEnrichedHeadline.$inject = ['$document', 'piwik', '$filter', '$parse', 'piwikPeriods']; - - function piwikEnrichedHeadline($document, piwik, $filter, $parse, piwikPeriods){ - var defaults = { - helpUrl: '', - editUrl: '', - }; - - return { - transclude: true, - restrict: 'A', - scope: { - helpUrl: '@', - editUrl: '@', - reportGenerated: '@?', - featureName: '@', - inlineHelp: '@?', - }, - templateUrl: 'plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.html?cb=' + piwik.cacheBuster, - compile: function (element, attrs) { - - for (var index in defaults) { - if (!attrs[index]) { attrs[index] = defaults[index]; } - } - - return function (scope, element, attrs) { - if (!scope.inlineHelp) { - - var helpNode = $('[ng-transclude] .inlineHelp', element); - - if ((!helpNode || !helpNode.length) && element.next()) { - // hack for reports :( - helpNode = element.next().find('.reportDocumentation'); - } - - if (helpNode && helpNode.length) { - - // hackish solution to get binded html of p tag within the help node - // at this point the ng-bind-html is not yet converted into html when report is not - // initially loaded. Using $compile doesn't work. So get and set it manually - var helpParagraph = $('p[ng-bind-html]', helpNode); - - if (helpParagraph.length) { - helpParagraph.html($parse(helpParagraph.attr('ng-bind-html'))); - } - - if ($.trim(helpNode.text())) { - scope.inlineHelp = $.trim(helpNode.html()); - } - helpNode.remove(); - } - } - - if (!attrs.featureName) { - attrs.featureName = $.trim(element.find('.title').first().text()); - } - - if (scope.reportGenerated && piwikPeriods.parse(piwik.period, piwik.currentDateString).containsToday()) { - element.find('.report-generated').first().tooltip({ - track: true, - content: scope.reportGenerated, - items: 'div', - show: false, - hide: false - }); - - - } - }; - } - }; - } -})(); diff --git a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less b/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less deleted file mode 100644 index 878372c857..0000000000 --- a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less +++ /dev/null @@ -1,69 +0,0 @@ -.inlineHelp { - display: none; -} - -[piwik-enriched-headline] { - visibility: hidden; - height: 47px; -} - -[piwik-enriched-headline].ng-isolate-scope { - visibility: visible; - height: auto; -} - -.enrichedHeadline { - min-height: 22px; - - a.title { - cursor: pointer; - } - - .title { - display: inline-block; - } - - .inlineHelp { - display: block; - background: #F7F7F7; - font-size: 12px; - line-height: 1.1; - font-weight: normal; - border: 1px solid #E4E5E4; - margin: 10px 0 10px 0; - padding: 10px; - border-radius: 2px; - - .readMore { - margin-top: 10px; - display: inline-block; - font-weight: bold; - } - } - - .iconsBar { - line-height: 1 !important; - } - - .ratingIcons { - display: inline-block; - vertical-align: middle; - } - - .helpIcon { - cursor: pointer; - display: inline-block; - margin: 0 0 -1px 4px; - opacity: 0.4; - font-size: 16px; - color: @theme-color-text-light !important; - - &:hover, &.active { - color: @theme-color-help-background-color !important; - opacity: 0.9; - text-decoration: none; - } - } -} - - diff --git a/plugins/CoreHome/angularjs/enrichedheadline/help.png b/plugins/CoreHome/angularjs/enrichedheadline/help.png Binary files differdeleted file mode 100644 index c5174cdf63..0000000000 --- a/plugins/CoreHome/angularjs/enrichedheadline/help.png +++ /dev/null |