From 793c7db0bec494d7165c60e04cbf4db5f701419b Mon Sep 17 00:00:00 2001 From: dizzy Date: Mon, 11 Apr 2022 02:39:39 -0700 Subject: [Vue] migrate widgetize plugin to vue (#19029) * migrate widget preview directive * migrate export-widget controller to vue * fix ui tests * update expected screenshot * remove unneeded deletes --- plugins/CoreVue/types/index.d.ts | 1 + plugins/Widgetize/Widgetize.php | 2 - .../export-widget/export-widget.controller.js | 29 -- .../widget-preview/widget-preview.directive.js | 99 ---- plugins/Widgetize/templates/index.twig | 48 +- plugins/Widgetize/vue/dist/Widgetize.umd.js | 513 +++++++++++++++++++++ plugins/Widgetize/vue/dist/Widgetize.umd.min.js | 8 + plugins/Widgetize/vue/dist/umd.metadata.json | 5 + .../vue/src/ExportWidget/ExportWidget.vue | 169 +++++++ .../vue/src/WidgetPreview/WidgetPreview.adapter.ts | 14 + .../vue/src/WidgetPreview/WidgetPreview.vue | 76 +++ .../vue/src/WidgetPreview/WidgetPreviewIframe.vue | 47 ++ plugins/Widgetize/vue/src/index.ts | 10 + .../UIIntegrationTest_widgets_listing.png | 4 +- 14 files changed, 849 insertions(+), 176 deletions(-) delete mode 100644 plugins/Widgetize/angularjs/export-widget/export-widget.controller.js delete mode 100644 plugins/Widgetize/angularjs/widget-preview/widget-preview.directive.js create mode 100644 plugins/Widgetize/vue/dist/Widgetize.umd.js create mode 100644 plugins/Widgetize/vue/dist/Widgetize.umd.min.js create mode 100644 plugins/Widgetize/vue/dist/umd.metadata.json create mode 100644 plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue create mode 100644 plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.adapter.ts create mode 100644 plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue create mode 100644 plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue create mode 100644 plugins/Widgetize/vue/src/index.ts diff --git a/plugins/CoreVue/types/index.d.ts b/plugins/CoreVue/types/index.d.ts index 2a454c6b78..6478aa398d 100644 --- a/plugins/CoreVue/types/index.d.ts +++ b/plugins/CoreVue/types/index.d.ts @@ -176,6 +176,7 @@ declare global { interface WidgetsHelper { availableWidgets?: unknown[]; getAvailableWidgets(callback?: (widgets: Record) => unknown); + getWidgetObjectFromUniqueId(id: string, callback: (widget: unknown) => void); firstGetAvailableWidgetsCall?: Promise; } diff --git a/plugins/Widgetize/Widgetize.php b/plugins/Widgetize/Widgetize.php index 5bdb57df09..6cec8acb83 100644 --- a/plugins/Widgetize/Widgetize.php +++ b/plugins/Widgetize/Widgetize.php @@ -30,8 +30,6 @@ class Widgetize extends \Piwik\Plugin $jsFiles[] = "plugins/Morpheus/javascripts/piwikHelper.js"; $jsFiles[] = "plugins/CoreHome/javascripts/dataTable.js"; $jsFiles[] = "plugins/Dashboard/javascripts/widgetMenu.js"; - $jsFiles[] = "plugins/Widgetize/angularjs/widget-preview/widget-preview.directive.js"; - $jsFiles[] = "plugins/Widgetize/angularjs/export-widget/export-widget.controller.js"; } public function getStylesheetFiles(&$stylesheets) diff --git a/plugins/Widgetize/angularjs/export-widget/export-widget.controller.js b/plugins/Widgetize/angularjs/export-widget/export-widget.controller.js deleted file mode 100644 index 19faf5166b..0000000000 --- a/plugins/Widgetize/angularjs/export-widget/export-widget.controller.js +++ /dev/null @@ -1,29 +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('ExportWidgetController', ExportWidgetController); - - ExportWidgetController.$inject = ['piwik', '$window']; - - function ExportWidgetController(piwik, $window) { - - function getIframeCode(iframeUrl) - { - var url = iframeUrl.replace(/"/g, '"'); - - return ''; - } - - // remember to keep controller very simple. Create a service/factory (model) if needed - var urlPath = $window.location.protocol + '//' + $window.location.hostname + ($window.location.port == '' ? '' : (':' + $window.location.port)) + $window.location.pathname; - this.dashboardUrl = urlPath + '?module=Widgetize&action=iframe&moduleToWidgetize=Dashboard&actionToWidgetize=index&idSite=' + piwik.idSite + '&period=week&date=yesterday'; - this.dashboardCode = getIframeCode(this.dashboardUrl); - - this.allWebsitesDashboardUrl = urlPath + '?module=Widgetize&action=iframe&moduleToWidgetize=MultiSites&actionToWidgetize=standalone&idSite=' + piwik.idSite + '&period=week&date=yesterday'; - this.allWebsitesDashboardCode = getIframeCode(this.allWebsitesDashboardUrl); - } -})(); \ No newline at end of file diff --git a/plugins/Widgetize/angularjs/widget-preview/widget-preview.directive.js b/plugins/Widgetize/angularjs/widget-preview/widget-preview.directive.js deleted file mode 100644 index cb5599e51d..0000000000 --- a/plugins/Widgetize/angularjs/widget-preview/widget-preview.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 - */ - -/** - * Usage: - *
- */ -(function () { - angular.module('piwikApp').directive('piwikWidgetPreview', piwikWidgetPreview); - - piwikWidgetPreview.$inject = ['piwik', '$window']; - - function piwikWidgetPreview(piwik, $window){ - - function getEmbedUrl(parameters, exportFormat) { - var copyParameters = {}; - for (var variableName in parameters) { - copyParameters[variableName] = parameters[variableName]; - } - copyParameters['moduleToWidgetize'] = parameters['module']; - copyParameters['actionToWidgetize'] = parameters['action']; - delete copyParameters['action']; - delete copyParameters['module']; - var sourceUrl; - sourceUrl = $window.location.protocol + '//' + $window.location.hostname + ($window.location.port == '' ? '' : (':' + $window.location.port)) + $window.location.pathname + '?'; - sourceUrl += "module=Widgetize" + - "&action=" + exportFormat + - "&" + piwik.helper.getQueryStringFromParameters(copyParameters) + - "&idSite=" + piwik.idSite + - "&period=" + piwik.period + - "&date=" + piwik.broadcast.getValueFromUrl('date') + - "&disableLink=1&widget=1"; - return sourceUrl; - } - - return { - restrict: 'A', - controller: function () { - - var self = this; - - this.getInputFormWithHtml = function (inputId, htmlEmbed) { - return '
' + this.htmlentities(htmlEmbed) + '
'; - }; - - this.htmlentities = function (s) { - return piwik.helper.escape(piwik.helper.htmlEntities(s)); - }; - - this.callbackAddExportButtonsUnderWidget = function (widgetUniqueId, loadedWidgetElement) { - widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId, function(widget) { - var widgetParameters = widget['parameters']; - - var exportButtonsElement = $(''); - - var urlIframe = getEmbedUrl(widgetParameters, "iframe"); - // We first build the HTML code that will load the widget in an IFRAME - var widgetIframeHtml = '
' + - '' + - '
'; - - // Add the input field containing the widget in an Iframe - $(exportButtonsElement).append( - '
' + - '' + - '
' + - self.getInputFormWithHtml('iframeEmbed', widgetIframeHtml) + - '
' + - '
' + - '
' + - '' - + '
' - ); - - // Finally we append the content to the parent widget DIV - $(loadedWidgetElement) - .parent() - .append(exportButtonsElement); - - piwik.helper.compileAngularComponents(exportButtonsElement); - }); - } - }, - compile: function (element, attrs) { - - return function (scope, element, attrs, controller) { - element.widgetPreview({ - onPreviewLoaded: controller.callbackAddExportButtonsUnderWidget - }); - }; - } - }; - } -})(); diff --git a/plugins/Widgetize/templates/index.twig b/plugins/Widgetize/templates/index.twig index 2ab204877c..e6ff2bb844 100644 --- a/plugins/Widgetize/templates/index.twig +++ b/plugins/Widgetize/templates/index.twig @@ -11,50 +11,10 @@
-
-
-

{{ title|e('html_attr') }}

-

With Matomo, you can export your Web Analytics reports on your blog, website, or intranet dashboard... in one click.

-
-
-

- If you want your widgets to be viewable by everybody, you first have to set the 'view' permissions - to the anonymous user in the Users Management section. -
Alternatively, if you are publishing widgets on a password protected or private page, - you don't necessarily have to allow 'anonymous' to view your reports. In this case, you can add the secret token_auth parameter in the widget URL. - You can manage your auth tokens on your Security page. -

-
-
-

You can also display the full Matomo dashboard in your application or website in an IFRAME - (see example). - The date parameter can be set to a specific calendar date, "today", or "yesterday". The period parameter can be set to "day", "week", "month", or - "year". - The language parameter can be set to the language code of a translation, such as language=fr. - For example, for idSite=1 and date=yesterday, you can write: - -
- -
- -
- You can also widgetize the all websites dashboard in an IFRAME - (see example) - -
- -
-

-
-
-

Select a report, and copy paste in your page the embed code below the widget: - -

- -
- -
-
+
{% include "@Dashboard/_widgetFactoryTemplate.twig" %} diff --git a/plugins/Widgetize/vue/dist/Widgetize.umd.js b/plugins/Widgetize/vue/dist/Widgetize.umd.js new file mode 100644 index 0000000000..57bfa210f6 --- /dev/null +++ b/plugins/Widgetize/vue/dist/Widgetize.umd.js @@ -0,0 +1,513 @@ +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(require("CoreHome"), require("vue")); + else if(typeof define === 'function' && define.amd) + define(["CoreHome", ], factory); + else if(typeof exports === 'object') + exports["Widgetize"] = factory(require("CoreHome"), require("vue")); + else + root["Widgetize"] = factory(root["CoreHome"], root["Vue"]); +})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__19dc__, __WEBPACK_EXTERNAL_MODULE__8bbf__) { +return /******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = "plugins/Widgetize/vue/dist/"; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = "fae3"); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "19dc": +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE__19dc__; + +/***/ }), + +/***/ "8bbf": +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE__8bbf__; + +/***/ }), + +/***/ "fae3": +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +// ESM COMPAT FLAG +__webpack_require__.r(__webpack_exports__); + +// EXPORTS +__webpack_require__.d(__webpack_exports__, "WidgetPreviewIframe", function() { return /* reexport */ WidgetPreviewIframe; }); +__webpack_require__.d(__webpack_exports__, "WidgetPreview", function() { return /* reexport */ WidgetPreview; }); +__webpack_require__.d(__webpack_exports__, "ExportWidget", function() { return /* reexport */ ExportWidget; }); + +// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js +// This file is imported into lib/wc client bundles. + +if (typeof window !== 'undefined') { + var currentScript = window.document.currentScript + if (false) { var getCurrentScript; } + + var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/) + if (src) { + __webpack_require__.p = src[1] // eslint-disable-line + } +} + +// Indicate to webpack that this file can be concatenated +/* harmony default export */ var setPublicPath = (null); + +// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"} +var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf"); + +// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue?vue&type=template&id=c3436116 + +var _hoisted_1 = { + id: "embedThisWidgetIframe" +}; + +var _hoisted_2 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("label", { + for: "embedThisWidgetIframeInput" +}, "› Embed Iframe", -1); + +var _hoisted_3 = { + id: "embedThisWidgetIframeInput" +}; +var _hoisted_4 = { + readonly: "true", + id: "iframeEmbed" +}; + +var _hoisted_5 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("label", { + for: "embedThisWidgetDirectLink" +}, "› Direct Link", -1); + +var _hoisted_6 = { + id: "embedThisWidgetDirectLink" +}; +var _hoisted_7 = { + readonly: "true", + id: "directLinkEmbed" +}; + +var _hoisted_8 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" - "); + +var _hoisted_9 = ["href"]; +function render(_ctx, _cache, $props, $setup, $data, $options) { + var _directive_select_on_focus = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("select-on-focus"); + + return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_1, [_hoisted_2, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_3, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("pre", _hoisted_4, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.widgetIframeHtml), 1)], 512), [[_directive_select_on_focus, {}]])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [_hoisted_5, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_6, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("pre", _hoisted_7, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.urlIframe), 1)], 512), [[_directive_select_on_focus, {}]]), _hoisted_8, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", { + href: _ctx.urlIframe, + rel: "noreferrer noopener", + target: "_blank" + }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Widgetize_OpenInNewWindow')), 9, _hoisted_9)])])], 64); +} +// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue?vue&type=template&id=c3436116 + +// EXTERNAL MODULE: external "CoreHome" +var external_CoreHome_ = __webpack_require__("19dc"); + +// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue?vue&type=script&lang=ts + + +/* harmony default export */ var WidgetPreviewIframevue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({ + props: { + urlIframe: { + type: String, + required: true + }, + widgetIframeHtml: { + type: String, + required: true + } + }, + inheritAttrs: false, + directives: { + SelectOnFocus: external_CoreHome_["SelectOnFocus"] + } +})); +// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue?vue&type=script&lang=ts + +// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue + + + +WidgetPreviewIframevue_type_script_lang_ts.render = render + +/* harmony default export */ var WidgetPreviewIframe = (WidgetPreviewIframevue_type_script_lang_ts); +// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue?vue&type=template&id=73d2ef45 + +var WidgetPreviewvue_type_template_id_73d2ef45_hoisted_1 = { + ref: "root" +}; +function WidgetPreviewvue_type_template_id_73d2ef45_render(_ctx, _cache, $props, $setup, $data, $options) { + return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", WidgetPreviewvue_type_template_id_73d2ef45_hoisted_1, null, 512); +} +// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue?vue&type=template&id=73d2ef45 + +// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue?vue&type=script&lang=ts + + +var _window = window, + $ = _window.$, + widgetsHelper = _window.widgetsHelper; +/* harmony default export */ var WidgetPreviewvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({ + mounted: function mounted() { + var _this = this; + + var element = this.$refs.root; // eslint-disable-next-line @typescript-eslint/no-explicit-any + + $(element).widgetPreview({ + onPreviewLoaded: function onPreviewLoaded(widgetUniqueId, loadedWidgetElement) { + _this.callbackAddExportButtonsUnderWidget(widgetUniqueId, loadedWidgetElement); + } + }); + }, + methods: { + callbackAddExportButtonsUnderWidget: function callbackAddExportButtonsUnderWidget(widgetUniqueId, loadedWidgetElement) { + var _this2 = this; + + widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId, function (widget) { + var widgetParameters = widget.parameters; + var exportButtonsElement = $('
'); + + var urlIframe = _this2.getEmbedUrl(widgetParameters, 'iframe'); + + var widgetIframeHtml = '
'; + var previewIframe = $('
').attr('vue-entry', 'Widgetize.WidgetPreviewIframe').attr('widget-iframe-html', JSON.stringify(widgetIframeHtml)).attr('url-iframe', JSON.stringify(urlIframe)); + $(exportButtonsElement).append(previewIframe); + $(loadedWidgetElement).parent().append(exportButtonsElement); + external_CoreHome_["Matomo"].helper.compileVueEntryComponents(exportButtonsElement); + }); + }, + getEmbedUrl: function getEmbedUrl(parameters, exportFormat) { + var finalParams = Object.assign(Object.assign({}, parameters), {}, { + moduleToWidgetize: parameters.module, + actionToWidgetize: parameters.action, + module: 'Widgetize', + action: exportFormat, + idSite: external_CoreHome_["Matomo"].idSite, + period: external_CoreHome_["Matomo"].period, + date: external_CoreHome_["MatomoUrl"].urlParsed.value.date, + disableLink: 1, + widget: 1 + }); + var _window$location = window.location, + protocol = _window$location.protocol, + hostname = _window$location.hostname; + var port = window.location.port === '' ? '' : ":".concat(window.location.port); + var path = window.location.pathname; + var query = external_CoreHome_["MatomoUrl"].stringify(finalParams); + return "".concat(protocol, "//").concat(hostname).concat(port).concat(path, "?").concat(query); + } + } +})); +// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue?vue&type=script&lang=ts + +// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue + + + +WidgetPreviewvue_type_script_lang_ts.render = WidgetPreviewvue_type_template_id_73d2ef45_render + +/* harmony default export */ var WidgetPreview = (WidgetPreviewvue_type_script_lang_ts); +// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue?vue&type=template&id=6a596dc6 + +var ExportWidgetvue_type_template_id_6a596dc6_hoisted_1 = { + class: "widgetize" +}; + +var ExportWidgetvue_type_template_id_6a596dc6_hoisted_2 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, [/*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])("With Matomo, you can "), /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", { + rel: "noreferrer noopener", + target: "_blank", + href: "https://matomo.org/docs/embed-piwik-report/" +}, "export your Web Analytics reports"), /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" on your blog, website, or intranet dashboard... in one click.")], -1); + +var ExportWidgetvue_type_template_id_6a596dc6_hoisted_3 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" If you want your widgets to be viewable by everybody, you first have to set the 'view' permissions to the anonymous user in the "); + +var ExportWidgetvue_type_template_id_6a596dc6_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", { + href: "index.php?module=UsersManager", + rel: "noreferrer noopener", + target: "_blank" +}, "Users Management section", -1); + +var ExportWidgetvue_type_template_id_6a596dc6_hoisted_5 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(". "); + +var ExportWidgetvue_type_template_id_6a596dc6_hoisted_6 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1); + +var ExportWidgetvue_type_template_id_6a596dc6_hoisted_7 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])("Alternatively, if you are publishing widgets on a password protected or private page, you don't necessarily have to allow 'anonymous' to view your reports. In this case, you can add the secret "); + +var ExportWidgetvue_type_template_id_6a596dc6_hoisted_8 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("code", null, "token_auth", -1); + +var ExportWidgetvue_type_template_id_6a596dc6_hoisted_9 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" parameter in the widget URL. You can manage your auth tokens on your "); + +var _hoisted_10 = ["href"]; + +var _hoisted_11 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(". "); + +var _hoisted_12 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" You can also display the full Matomo dashboard in your application or website in an IFRAME ("); + +var _hoisted_13 = ["href"]; + +var _hoisted_14 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])("). The date parameter can be set to a specific calendar date, \"today\", or \"yesterday\". The period parameter can be set to \"day\", \"week\", \"month\", or \"year\". The language parameter can be set to the language code of a translation, such as language=fr. For example, for idSite=1 and date=yesterday, you can write: "); + +var _hoisted_15 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1); + +var _hoisted_16 = ["textContent"]; + +var _hoisted_17 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1); + +var _hoisted_18 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(" You can also widgetize the all websites dashboard in an IFRAME ("); + +var _hoisted_19 = ["href"]; + +var _hoisted_20 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(") "); + +var _hoisted_21 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1); + +var _hoisted_22 = ["textContent"]; + +var _hoisted_23 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, "Select a report, and copy paste in your page the embed code below the widget:", -1); + +var _hoisted_24 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", { + class: "clearfix" +}, null, -1); + +function ExportWidgetvue_type_template_id_6a596dc6_render(_ctx, _cache, $props, $setup, $data, $options) { + var _component_EnrichedHeadline = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("EnrichedHeadline"); + + var _component_ContentBlock = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ContentBlock"); + + var _component_WidgetPreview = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("WidgetPreview"); + + var _directive_content_intro = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("content-intro"); + + var _directive_select_on_focus = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("select-on-focus"); + + return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", ExportWidgetvue_type_template_id_6a596dc6_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("h2", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_EnrichedHeadline, null, { + default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () { + return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.title), 1)]; + }), + _: 1 + })]), ExportWidgetvue_type_template_id_6a596dc6_hoisted_2], 512), [[_directive_content_intro]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ContentBlock, { + "content-title": "Authentication" + }, { + default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () { + return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, [ExportWidgetvue_type_template_id_6a596dc6_hoisted_3, ExportWidgetvue_type_template_id_6a596dc6_hoisted_4, ExportWidgetvue_type_template_id_6a596dc6_hoisted_5, ExportWidgetvue_type_template_id_6a596dc6_hoisted_6, ExportWidgetvue_type_template_id_6a596dc6_hoisted_7, ExportWidgetvue_type_template_id_6a596dc6_hoisted_8, ExportWidgetvue_type_template_id_6a596dc6_hoisted_9, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", { + rel: "noreferrer noopener", + target: "_blank", + href: _ctx.linkTo({ + 'module': 'UsersManager', + 'action': 'userSecurity' + }) + }, "Security page", 8, _hoisted_10), _hoisted_11])]; + }), + _: 1 + }), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ContentBlock, { + "content-title": "Widgetize dashboards" + }, { + default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () { + return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, [_hoisted_12, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", { + rel: "noreferrer noopener", + target: "_blank", + href: _ctx.dashboardUrl + }, "see example", 8, _hoisted_13), _hoisted_14, _hoisted_15]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("pre", { + textContent: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.dashboardCode) + }, null, 8, _hoisted_16), [[_directive_select_on_focus, {}]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", null, [_hoisted_17, _hoisted_18, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("a", { + rel: "noreferrer noopener", + target: "_blank", + id: "linkAllWebsitesDashboardUrl", + href: _ctx.allWebsitesDashboardUrl + }, "see example", 8, _hoisted_19), _hoisted_20, _hoisted_21]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("pre", { + textContent: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.allWebsitesDashboardCode) + }, null, 8, _hoisted_22), [[_directive_select_on_focus, {}]])])]; + }), + _: 1 + }), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ContentBlock, { + "content-title": "Widgetize reports" + }, { + default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () { + return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [_hoisted_23, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_WidgetPreview)]), _hoisted_24])]; + }), + _: 1 + })]); +} +// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue?vue&type=template&id=6a596dc6 + +// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue?vue&type=script&lang=ts + + + + +function getIframeCode(iframeUrl) { + var url = iframeUrl.replace(/"/g, '"'); + return "'; +} + +/* harmony default export */ var ExportWidgetvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({ + props: { + title: { + type: String, + required: true + } + }, + components: { + EnrichedHeadline: external_CoreHome_["EnrichedHeadline"], + ContentBlock: external_CoreHome_["ContentBlock"], + WidgetPreview: WidgetPreview + }, + directives: { + ContentIntro: external_CoreHome_["ContentIntro"], + SelectOnFocus: external_CoreHome_["SelectOnFocus"] + }, + data: function data() { + var port = window.location.port === '' ? '' : ":".concat(window.location.port); + var path = window.location.pathname; + var urlPath = "".concat(window.location.protocol, "//").concat(window.location.hostname).concat(port).concat(path); + return { + dashboardUrl: "".concat(urlPath, "?").concat(external_CoreHome_["MatomoUrl"].stringify({ + module: 'Widgetize', + action: 'iframe', + moduleToWidgetize: 'Dashboard', + actionToWidgetize: 'index', + idSite: external_CoreHome_["Matomo"].idSite, + period: 'week', + date: 'yesterday' + })), + allWebsitesDashboardUrl: "".concat(urlPath, "?").concat(external_CoreHome_["MatomoUrl"].stringify({ + module: 'Widgetize', + action: 'iframe', + moduleToWidgetize: 'MultiSites', + actionToWidgetize: 'standalone', + idSite: external_CoreHome_["Matomo"].idSite, + period: 'week', + date: 'yesterday' + })) + }; + }, + computed: { + dashboardCode: function dashboardCode() { + return getIframeCode(this.dashboardUrl); + }, + allWebsitesDashboardCode: function allWebsitesDashboardCode() { + return getIframeCode(this.allWebsitesDashboardUrl); + } + }, + methods: { + linkTo: function linkTo(params) { + return "?".concat(external_CoreHome_["MatomoUrl"].stringify(Object.assign(Object.assign({}, external_CoreHome_["MatomoUrl"].urlParsed.value), {}, { + params: params + }))); + } + } +})); +// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue?vue&type=script&lang=ts + +// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue + + + +ExportWidgetvue_type_script_lang_ts.render = ExportWidgetvue_type_template_id_6a596dc6_render + +/* harmony default export */ var ExportWidget = (ExportWidgetvue_type_script_lang_ts); +// CONCATENATED MODULE: ./plugins/Widgetize/vue/src/index.ts +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + + + +// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js + + + + +/***/ }) + +/******/ }); +}); +//# sourceMappingURL=Widgetize.umd.js.map \ No newline at end of file diff --git a/plugins/Widgetize/vue/dist/Widgetize.umd.min.js b/plugins/Widgetize/vue/dist/Widgetize.umd.min.js new file mode 100644 index 0000000000..d6b95c9b20 --- /dev/null +++ b/plugins/Widgetize/vue/dist/Widgetize.umd.min.js @@ -0,0 +1,8 @@ +(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue")):"function"===typeof define&&define.amd?define(["CoreHome"],t):"object"===typeof exports?exports["Widgetize"]=t(require("CoreHome"),require("vue")):e["Widgetize"]=t(e["CoreHome"],e["Vue"])})("undefined"!==typeof self?self:this,(function(e,t){return function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="plugins/Widgetize/vue/dist/",r(r.s="fae3")}({"19dc":function(t,r){t.exports=e},"8bbf":function(e,r){e.exports=t},fae3:function(e,t,r){"use strict";if(r.r(t),r.d(t,"WidgetPreviewIframe",(function(){return h})),r.d(t,"WidgetPreview",(function(){return E})),r.d(t,"ExportWidget",(function(){return Z})),"undefined"!==typeof window){var o=window.document.currentScript,n=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);n&&(r.p=n[1])}var i=r("8bbf"),a={id:"embedThisWidgetIframe"},c=Object(i["createElementVNode"])("label",{for:"embedThisWidgetIframeInput"},"› Embed Iframe",-1),d={id:"embedThisWidgetIframeInput"},l={readonly:"true",id:"iframeEmbed"},u=Object(i["createElementVNode"])("label",{for:"embedThisWidgetDirectLink"},"› Direct Link",-1),s={id:"embedThisWidgetDirectLink"},b={readonly:"true",id:"directLinkEmbed"},m=Object(i["createTextVNode"])(" - "),f=["href"];function p(e,t,r,o,n,p){var g=Object(i["resolveDirective"])("select-on-focus");return Object(i["openBlock"])(),Object(i["createElementBlock"])(i["Fragment"],null,[Object(i["createElementVNode"])("div",a,[c,Object(i["createElementVNode"])("div",d,[Object(i["withDirectives"])(Object(i["createElementVNode"])("pre",l,[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.widgetIframeHtml),1)],512),[[g,{}]])])]),Object(i["createElementVNode"])("div",null,[u,Object(i["createElementVNode"])("div",s,[Object(i["withDirectives"])(Object(i["createElementVNode"])("pre",b,[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.urlIframe),1)],512),[[g,{}]]),m,Object(i["createElementVNode"])("a",{href:e.urlIframe,rel:"noreferrer noopener",target:"_blank"},Object(i["toDisplayString"])(e.translate("Widgetize_OpenInNewWindow")),9,f)])])],64)}var g=r("19dc"),O=Object(i["defineComponent"])({props:{urlIframe:{type:String,required:!0},widgetIframeHtml:{type:String,required:!0}},inheritAttrs:!1,directives:{SelectOnFocus:g["SelectOnFocus"]}});O.render=p;var h=O,j={ref:"root"};function y(e,t,r,o,n,a){return Object(i["openBlock"])(),Object(i["createElementBlock"])("div",j,null,512)}var v=window,w=v.$,N=v.widgetsHelper,V=Object(i["defineComponent"])({mounted:function(){var e=this,t=this.$refs.root;w(t).widgetPreview({onPreviewLoaded:function(t,r){e.callbackAddExportButtonsUnderWidget(t,r)}})},methods:{callbackAddExportButtonsUnderWidget:function(e,t){var r=this;N.getWidgetObjectFromUniqueId(e,(function(e){var o=e.parameters,n=w('
'),i=r.getEmbedUrl(o,"iframe"),a='
",c=w("
").attr("vue-entry","Widgetize.WidgetPreviewIframe").attr("widget-iframe-html",JSON.stringify(a)).attr("url-iframe",JSON.stringify(i));w(n).append(c),w(t).parent().append(n),g["Matomo"].helper.compileVueEntryComponents(n)}))},getEmbedUrl:function(e,t){var r=Object.assign(Object.assign({},e),{},{moduleToWidgetize:e.module,actionToWidgetize:e.action,module:"Widgetize",action:t,idSite:g["Matomo"].idSite,period:g["Matomo"].period,date:g["MatomoUrl"].urlParsed.value.date,disableLink:1,widget:1}),o=window.location,n=o.protocol,i=o.hostname,a=""===window.location.port?"":":".concat(window.location.port),c=window.location.pathname,d=g["MatomoUrl"].stringify(r);return"".concat(n,"//").concat(i).concat(a).concat(c,"?").concat(d)}}});V.render=y;var E=V,x={class:"widgetize"},W=Object(i["createElementVNode"])("p",null,[Object(i["createTextVNode"])("With Matomo, you can "),Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:"https://matomo.org/docs/embed-piwik-report/"},"export your Web Analytics reports"),Object(i["createTextVNode"])(" on your blog, website, or intranet dashboard... in one click.")],-1),T=Object(i["createTextVNode"])(" If you want your widgets to be viewable by everybody, you first have to set the 'view' permissions to the anonymous user in the "),k=Object(i["createElementVNode"])("a",{href:"index.php?module=UsersManager",rel:"noreferrer noopener",target:"_blank"},"Users Management section",-1),S=Object(i["createTextVNode"])(". "),C=Object(i["createElementVNode"])("br",null,null,-1),D=Object(i["createTextVNode"])("Alternatively, if you are publishing widgets on a password protected or private page, you don't necessarily have to allow 'anonymous' to view your reports. In this case, you can add the secret "),M=Object(i["createElementVNode"])("code",null,"token_auth",-1),I=Object(i["createTextVNode"])(" parameter in the widget URL. You can manage your auth tokens on your "),U=["href"],z=Object(i["createTextVNode"])(". "),_=Object(i["createTextVNode"])(" You can also display the full Matomo dashboard in your application or website in an IFRAME ("),P=["href"],B=Object(i["createTextVNode"])('). The date parameter can be set to a specific calendar date, "today", or "yesterday". The period parameter can be set to "day", "week", "month", or "year". The language parameter can be set to the language code of a translation, such as language=fr. For example, for idSite=1 and date=yesterday, you can write: '),H=Object(i["createElementVNode"])("br",null,null,-1),q=["textContent"],A=Object(i["createElementVNode"])("br",null,null,-1),F=Object(i["createTextVNode"])(" You can also widgetize the all websites dashboard in an IFRAME ("),L=["href"],R=Object(i["createTextVNode"])(") "),Y=Object(i["createElementVNode"])("br",null,null,-1),$=["textContent"],J=Object(i["createElementVNode"])("p",null,"Select a report, and copy paste in your page the embed code below the widget:",-1),G=Object(i["createElementVNode"])("br",{class:"clearfix"},null,-1);function K(e,t,r,o,n,a){var c=Object(i["resolveComponent"])("EnrichedHeadline"),d=Object(i["resolveComponent"])("ContentBlock"),l=Object(i["resolveComponent"])("WidgetPreview"),u=Object(i["resolveDirective"])("content-intro"),s=Object(i["resolveDirective"])("select-on-focus");return Object(i["openBlock"])(),Object(i["createElementBlock"])("div",x,[Object(i["withDirectives"])(Object(i["createElementVNode"])("div",null,[Object(i["createElementVNode"])("h2",null,[Object(i["createVNode"])(c,null,{default:Object(i["withCtx"])((function(){return[Object(i["createTextVNode"])(Object(i["toDisplayString"])(e.title),1)]})),_:1})]),W],512),[[u]]),Object(i["createVNode"])(d,{"content-title":"Authentication"},{default:Object(i["withCtx"])((function(){return[Object(i["createElementVNode"])("p",null,[T,k,S,C,D,M,I,Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.linkTo({module:"UsersManager",action:"userSecurity"})},"Security page",8,U),z])]})),_:1}),Object(i["createVNode"])(d,{"content-title":"Widgetize dashboards"},{default:Object(i["withCtx"])((function(){return[Object(i["createElementVNode"])("div",null,[Object(i["createElementVNode"])("p",null,[_,Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",href:e.dashboardUrl},"see example",8,P),B,H]),Object(i["withDirectives"])(Object(i["createElementVNode"])("pre",{textContent:Object(i["toDisplayString"])(e.dashboardCode)},null,8,q),[[s,{}]]),Object(i["createElementVNode"])("p",null,[A,F,Object(i["createElementVNode"])("a",{rel:"noreferrer noopener",target:"_blank",id:"linkAllWebsitesDashboardUrl",href:e.allWebsitesDashboardUrl},"see example",8,L),R,Y]),Object(i["withDirectives"])(Object(i["createElementVNode"])("pre",{textContent:Object(i["toDisplayString"])(e.allWebsitesDashboardCode)},null,8,$),[[s,{}]])])]})),_:1}),Object(i["createVNode"])(d,{"content-title":"Widgetize reports"},{default:Object(i["withCtx"])((function(){return[Object(i["createElementVNode"])("div",null,[J,Object(i["createElementVNode"])("div",null,[Object(i["createVNode"])(l)]),G])]})),_:1})])}function Q(e){var t=e.replace(/"/g,""");return''}var X=Object(i["defineComponent"])({props:{title:{type:String,required:!0}},components:{EnrichedHeadline:g["EnrichedHeadline"],ContentBlock:g["ContentBlock"],WidgetPreview:E},directives:{ContentIntro:g["ContentIntro"],SelectOnFocus:g["SelectOnFocus"]},data:function(){var e=""===window.location.port?"":":".concat(window.location.port),t=window.location.pathname,r="".concat(window.location.protocol,"//").concat(window.location.hostname).concat(e).concat(t);return{dashboardUrl:"".concat(r,"?").concat(g["MatomoUrl"].stringify({module:"Widgetize",action:"iframe",moduleToWidgetize:"Dashboard",actionToWidgetize:"index",idSite:g["Matomo"].idSite,period:"week",date:"yesterday"})),allWebsitesDashboardUrl:"".concat(r,"?").concat(g["MatomoUrl"].stringify({module:"Widgetize",action:"iframe",moduleToWidgetize:"MultiSites",actionToWidgetize:"standalone",idSite:g["Matomo"].idSite,period:"week",date:"yesterday"}))}},computed:{dashboardCode:function(){return Q(this.dashboardUrl)},allWebsitesDashboardCode:function(){return Q(this.allWebsitesDashboardUrl)}},methods:{linkTo:function(e){return"?".concat(g["MatomoUrl"].stringify(Object.assign(Object.assign({},g["MatomoUrl"].urlParsed.value),{},{params:e})))}}});X.render=K;var Z=X; +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */}})})); +//# sourceMappingURL=Widgetize.umd.min.js.map \ No newline at end of file diff --git a/plugins/Widgetize/vue/dist/umd.metadata.json b/plugins/Widgetize/vue/dist/umd.metadata.json new file mode 100644 index 0000000000..9ecfcc0456 --- /dev/null +++ b/plugins/Widgetize/vue/dist/umd.metadata.json @@ -0,0 +1,5 @@ +{ + "dependsOn": [ + "CoreHome" + ] +} \ No newline at end of file diff --git a/plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue b/plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue new file mode 100644 index 0000000000..3ced9730a1 --- /dev/null +++ b/plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue @@ -0,0 +1,169 @@ + + + + + diff --git a/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.adapter.ts b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.adapter.ts new file mode 100644 index 0000000000..b8d0b94385 --- /dev/null +++ b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.adapter.ts @@ -0,0 +1,14 @@ +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +import { createAngularJsAdapter } from 'CoreHome'; +import WidgetPreview from './WidgetPreview.vue'; + +export default createAngularJsAdapter({ + component: WidgetPreview, + directiveName: 'piwikWidgetPreview', +}); diff --git a/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue new file mode 100644 index 0000000000..914db36728 --- /dev/null +++ b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreview.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue new file mode 100644 index 0000000000..c26be1b533 --- /dev/null +++ b/plugins/Widgetize/vue/src/WidgetPreview/WidgetPreviewIframe.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/plugins/Widgetize/vue/src/index.ts b/plugins/Widgetize/vue/src/index.ts new file mode 100644 index 0000000000..1083248a16 --- /dev/null +++ b/plugins/Widgetize/vue/src/index.ts @@ -0,0 +1,10 @@ +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +export { default as WidgetPreviewIframe } from './WidgetPreview/WidgetPreviewIframe.vue'; +export { default as WidgetPreview } from './WidgetPreview/WidgetPreview.vue'; +export { default as ExportWidget } from './ExportWidget/ExportWidget.vue'; diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_widgets_listing.png b/tests/UI/expected-screenshots/UIIntegrationTest_widgets_listing.png index f31cd3b29a..a3dac39f5d 100644 --- a/tests/UI/expected-screenshots/UIIntegrationTest_widgets_listing.png +++ b/tests/UI/expected-screenshots/UIIntegrationTest_widgets_listing.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:37c5efff1ec57a298b5fb468419058ce8bb2d4fa448901649753e0b61672a986 -size 190884 +oid sha256:f006e227737fa8b5aa27e58be385d16420861fc0171fb8f9470ed420bdd32255 +size 191222 -- cgit v1.2.3