Converted Widgetize plugin to Twig

1 files changed, 111 insertions, 0 deletions

diff --git a/plugins/Widgetize/templates/index.twig b/plugins/Widgetize/templates/index.twig
new file mode 100644
index 0000000000..558bc2ec37
--- /dev/null
+++ b/plugins/Widgetize/templates/index.twig
@@ -0,0 +1,111 @@
+{% extends 'dashboard.twig' %}
+
+{% block content %}
+{% set showSitesSelection=true %}
+{% set showPeriodSelection=true %}
+
+{{ loadJavascriptTranslations(['Dashboard']) }}
+
+<style type="text/css">
+    .widgetize {
+        width: 100%;
+        padding: 15px 15px 0 15px;
+        font-size: 13px;
+    }
+
+    .widgetize p {
+        padding: 0 0 20px 0;
+    }
+
+    .menu {
+        display: inline;
+    }
+
+    .widgetize .formEmbedCode {
+        font-size: 11px;
+        text-decoration: none;
+        background-color: #FBFDFF;
+        border: 1px solid #ECECEC;
+        width: 220px;
+    }
+
+    #periodString {
+        margin-left: 15px;
+    }
+
+    .widgetize label {
+        color: #666666;
+        line-height: 18px;
+        margin-right: 5px;
+        font-weight: bold;
+        padding-bottom: 100px;
+    }
+
+    #embedThisWidgetIframe,
+    #embedThisWidgetFlash,
+    #embedThisWidgetEverywhere {
+        margin-top: 5px;
+    }
+
+    .menuSelected {
+        font-weight: bold;
+    }
+</style>
+
+<script type="text/javascript">
+    $(document).ready(function () {
+        var widgetized = new widgetize();
+        var urlPath = document.location.protocol + '//' + document.location.hostname + (document.location.port == '' ? '' : (':' + document.location.port)) + document.location.pathname;
+        var dashboardUrl = urlPath + '?module=Widgetize&action=iframe&moduleToWidgetize=Dashboard&actionToWidgetize=index&idSite=' + piwik.idSite + '&period=week&date=yesterday';
+        $('#exportFullDashboard').html(
+                widgetized.getInputFormWithHtml('dashboardEmbed', '<iframe src="' + dashboardUrl + '" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%"></iframe>')
+        );
+        $('#linkDashboardUrl').attr('href', dashboardUrl);
+
+        var allWebsitesDashboardUrl = urlPath + '?module=Widgetize&action=iframe&moduleToWidgetize=MultiSites&actionToWidgetize=standalone&idSite=' + piwik.idSite + '&period=week&date=yesterday';
+        $('#exportAllWebsitesDashboard').html(
+                widgetized.getInputFormWithHtml('allWebsitesDashboardEmbed', '<iframe src="' + allWebsitesDashboardUrl + '" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%"></iframe>')
+        );
+        $('#linkAllWebsitesDashboardUrl').attr('href', allWebsitesDashboardUrl);
+        $('#widgetPreview').widgetPreview({
+            onPreviewLoaded: widgetized.callbackAddExportButtonsUnderWidget
+        });
+        broadcast.init();
+    });
+</script>
+
+<div class="top_controls_inner">
+    {% include "@CoreHome/period_select.twig" %}
+</div>
+
+<div class="widgetize">
+    <p>With Piwik, you can export your Web Analytics reports on your blog, website, or intranet dashboard... in one click.
+
+    <p>
+        <strong>&rsaquo; Widget authentication:</strong> If you want your widgets to be viewable by everybody, you first have to set the 'view' permissions
+        to the anonymous user in the <a href='index.php?module=UsersManager' target='_blank'>Users Management section</a>.
+        <br/>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 (found in the
+        <a href='{{ url({'module':'API','action':'listAllAPI'}) }}' target='_blank'>API page</a>) in the widget URL.
+    </p>
+
+    <p><strong>&rsaquo; Widgetize the full dashboard:</strong> You can also display the full Piwik dashboard in your application or website in an IFRAME
+        (<a href='' target='_blank' id='linkDashboardUrl'>see example</a>).
+        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: <span id='exportFullDashboard'></span>
+    </p>
+
+    <p>
+        <strong>&rsaquo; Widgetize the all websites dashboard in an IFRAME</strong> (<a href='' target='_blank' id='linkAllWebsitesDashboardUrl'>see example</a>)
+        <span id='exportAllWebsitesDashboard'></span>
+    </p>
+
+    <p><b>&rsaquo; Select a report, and copy paste in your page the embed code below the widget:</b>
+
+    <div id="widgetPreview"></div>
+
+    <div id='iframeDivToExport' style='display:none;'></div>
+</div>
+{% endblock %}
\ No newline at end of file