fix ot_stats module appearence

ot_stats/Classes/Controller/OtStatsController.php

@@ -24,7 +24,6 @@ class OtStatsController extends SelectedSiteController {
      */
     const MATOMO_TOKEN = 'd781ebf1e210bc8ab1e9f4a3e21e9b01';
 
-
     /**
      * Index action (default action)
      * Displays the customizer page on the backend

ot_stats/Classes/Middleware/RequestHandler.php

@@ -20,8 +20,9 @@ use TYPO3\CMS\Fluid\View\StandaloneView;
 class RequestHandler implements MiddlewareInterface
 {
     const TEMPLATES_ROOT_PATHS = 'EXT:ot_stats/Resources/Private/Templates';
+    const PARTIALS_ROOT_PATHS = 'EXT:ot_stats/Resources/Private/Partials';
     const LAYOUTS_ROOT_PATHS = 'EXT:ot_stats/Resources/Private/Layouts';
-    const TEMPLATE_FILE = self::TEMPLATES_ROOT_PATHS . '/Header/Matomo.html';
+    const TEMPLATE_FILE = self::TEMPLATES_ROOT_PATHS . '/Header/Include.html';
 
     /**
      *
@@ -47,6 +48,7 @@ class RequestHandler implements MiddlewareInterface
         // render view
         $view = GeneralUtility::makeInstance(StandaloneView::class);
         $view->setTemplateRootPaths([self::TEMPLATES_ROOT_PATHS]);
+        $view->setPartialRootPaths([self::PARTIALS_ROOT_PATHS]);
         $view->setLayoutRootPaths([self::LAYOUTS_ROOT_PATHS]);
         $view->setTemplatePathAndFilename(
             GeneralUtility::getFileAbsFileName(self::TEMPLATE_FILE)

ot_stats/Resources/Private/Layouts/Backend/Default.html

@@ -1,7 +1,8 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
 
 <f:be.container includeCssFiles="{ot_core: '{f:uri.resource(path:\'assets/Backend/style/ot_be_module.css\', extensionName:\'ot_core\')}',
-                                  ot_stats: '{f:uri.resource(path:\'assets/Backend/style/ot_stats.css\')}'}">
+                                  ot_stats: '{f:uri.resource(path:\'assets/Backend/style/ot_stats.css\')}'}"
+                includeJsFiles="{iframeresizer: '{f:uri.resource(path:\'assets/Backend/script/iframeResizer.min.js\')}'}">
     <f:flashMessages />
     <f:render section="content" />
 </f:be.container>

ot_stats/Resources/Private/Templates/Header/Include.html

@@ -0,0 +1,26 @@
+{namespace v=FluidTYPO3\Vhs\ViewHelpers}
+{namespace st=Opentalent\OtStats\ViewHelpers}
+
+<f:comment>
+    <!-- render the matomo script for the current website (if stats are enabled) -->
+</f:comment>
+
+<v:variable.set name="matomo_site_id" value="{st:matomoSiteId()}" />
+
+<f:comment><!-- Matomo --></f:comment>
+<script type="text/javascript">
+    var _paq = window._paq || [];
+    _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
+    _paq.push(["setDomains", ["*.opentalent.fr"]]);
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function() <f:format.raw>{</f:format.raw>
+    var u="https://stats.2iopenservice.com/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', '{matomo_site_id}']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+    <f:format.raw>}</f:format.raw>)();
+</script>
+<noscript><p><img src="https://stats.2iopenservice.com/matomo.php?idsite={matomo_site_id}&amp;rec=1" style="border:0;" alt="" /></p></noscript>
+<f:comment><!-- End Matomo Code --></f:comment>

ot_stats/Resources/Private/Templates/OtStats/Index.html

@@ -5,7 +5,7 @@
 
 <f:section name="content">
     <div class="ot-be-module ot-stats">
-        <h3>Statistiques d'utilisation</h3>
+        <h1>Statistiques d'utilisation</h1>
         <div id="matomoReport">
 
             <div class="reportSection">
@@ -13,8 +13,12 @@
                 <div class="reportSubSection">
                     <div class="reportCard">
                         <f:comment><!-- Real time visits--></f:comment>
-                        <h5>Visites en temps réel</h5>
-                        <div class="widgetIframe" id="realTimeVisits"><iframe width="450" height="320" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=Live&actionToWidgetize=widget&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
+                        <h4>Visites en temps réel</h4>
+                        <div class="widgetIframe">
+                            <iframe width="500" height="350" id="realTimeVisits" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=Live&actionToWidgetize=widget&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+                            <script defer>iFrameResize({}, '#realTimeVisits')</script>
+                        </div>
+
                     </div>
 
                     <f:comment>
@@ -28,62 +32,100 @@
 
                 <div class="reportCard">
                     <f:comment><!-- Visits Summary --></f:comment>
-                    <h5>Résumé</h5>
-                    <div class="widgetIframe" id="visitsSummary"><iframe width="450" height="600" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=VisitsSummary&actionToWidgetize=get&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
+                    <h4>Résumé</h4>
+                    <div class="widgetIframe">
+                        <iframe width="500" height="350" id="visitsSummary"
+                                src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=VisitsSummary&actionToWidgetize=get&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+                        <script defer>iFrameResize({}, '#visitsSummary')</script>
+                    </div>
                 </div>
             </div>
 
             <div class="reportSection">
                 <div class="reportCard">
                     <f:comment><!-- By weekday --></f:comment>
-                    <h5>Par jours de la semaine</h5>
-                    <div class="widgetIframe" id="visitsByWeekday"><iframe width="500" height="450" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=VisitTime&actionToWidgetize=getByDayOfWeek&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
+                    <h4>Par jours de la semaine</h4>
+                    <div class="widgetIframe">
+                        <iframe width="500" height="350" id="visitsByWeekday"
+                                src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=VisitTime&actionToWidgetize=getByDayOfWeek&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+                        <script defer>iFrameResize({}, '#visitsByWeekday')</script>
+                    </div>
                 </div>
 
                 <div class="reportCard">
                     <f:comment><!-- By local hour --></f:comment>
-                    <h5>Par heures locales</h5>
-                    <div class="widgetIframe" id="visitsByHour"><iframe width="500" height="450" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=VisitTime&actionToWidgetize=getByDayOfWeek&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
+                    <h4>Par heures locales</h4>
+                    <div class="widgetIframe">
+                        <iframe width="500" height="350" id="visitsByHour"
+                                src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=VisitTime&actionToWidgetize=getByDayOfWeek&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+                        <script defer>iFrameResize({}, '#visitsByHour')</script>
+                    </div>
                 </div>
 
                 <div class="reportCard">
                     <f:comment><!-- Map --></f:comment>
-                    <h5>Répartition géographique</h5>
-                    <div class="widgetIframe" id="visitsMap"><iframe width="400" height="450" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=UserCountryMap&actionToWidgetize=visitorMap&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
+                    <h4>Répartition géographique</h4>
+                    <div class="widgetIframe">
+                        <iframe width="500" height="450" id="visitsMap"
+                                src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=UserCountryMap&actionToWidgetize=visitorMap&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+                        <f:comment><!-- Don't resize here! That makes the map shrink --></f:comment>
+                    </div>
                 </div>
             </div>
 
             <div class="reportSection">
                 <div class="reportCard">
                     <f:comment><!-- Refferers --></f:comment>
-                    <h5>Référents</h5>
-                    <div class="widgetIframe" id="visitsRefferers"><iframe width="360" height="450" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=Referrers&actionToWidgetize=getAll&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
+                    <h4>Référents</h4>
+                    <div class="widgetIframe">
+                        <iframe width="500" height="350" id="visitsRefferers"
+                                src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=Referrers&actionToWidgetize=getAll&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+                        <script defer>iFrameResize({}, '#visitsRefferers')</script>
+                    </div>
                 </div>
 
                 <div class="reportCard">
                     <f:comment><!-- By web-browsers   --></f:comment>
-                    <h5>Navigateurs</h5>
-                    <div class="widgetIframe" id="visitsByBrowsers"><iframe width="360" height="450" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=DevicesDetection&actionToWidgetize=getBrowsers&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
+                    <h4>Navigateurs</h4>
+                    <div class="widgetIframe">
+                        <iframe width="500" height="350" id="visitsByBrowsers"
+                                src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=DevicesDetection&actionToWidgetize=getBrowsers&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+                        <script defer>iFrameResize({}, '#visitsByBrowsers')</script>
+                    </div>
                 </div>
             </div>
 
             <div class="reportSection">
                 <div class="reportCard">
                     <f:comment><!-- By page   --></f:comment>
-                    <h5>Pages</h5>
-                    <div class="widgetIframe" id="visitsByPage"><iframe width="360" height="450" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=Actions&actionToWidgetize=getPageUrls&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
+                    <h4>Pages</h4>
+                    <div class="widgetIframe">
+                        <iframe width="1028" height="350" id="visitsByPage"
+                                src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=Actions&actionToWidgetize=getPageUrls&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+                        <script defer>iFrameResize({}, '#visitsByPage')</script>
+                    </div>
                 </div>
+            </div>
 
+            <div class="reportSection">
                 <div class="reportCard">
-                    <f:comment><!-- By entry page   --></f:comment>
-                    <h5>Pages d'entrée</h5>
-                    <div class="widgetIframe" id="visitorsEntryPoints"><iframe width="360" height="450" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=Actions&actionToWidgetize=getEntryPageUrls&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
+                    <f:comment><!-- By entry page --></f:comment>
+                    <h4>Pages d'entrée</h4>
+                    <div class="widgetIframe">
+                        <iframe width="500" height="350" id="visitorsEntryPoints"
+                                src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=Actions&actionToWidgetize=getEntryPageUrls&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+                        <script defer>iFrameResize({}, '#visitorsEntryPoints')</script>
+                    </div>
                 </div>
 
                 <div class="reportCard">
                     <f:comment><!-- By visits duration   --></f:comment>
-                    <h5>Durées de visite</h5>
-                    <div class="widgetIframe" id="visitsByDuration"><iframe width="360" height="450" src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=VisitorInterest&actionToWidgetize=getNumberOfVisitsPerVisitDuration&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
+                    <h4>Durées de visite</h4>
+                    <div class="widgetIframe">
+                        <iframe width="500" height="350" id="visitsByDuration"
+                                src="https://stats.2iopenservice.com/index.php?module=Widgetize&action=iframe&disableLink=1&widget=1&moduleToWidgetize=VisitorInterest&actionToWidgetize=getNumberOfVisitsPerVisitDuration&idSite={matomoSiteId}&period=month&date=today&token_auth={matomoToken}" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+                        <script defer>iFrameResize({}, '#visitsByDuration')</script>
+                    </div>
                 </div>
             </div>
 

ot_stats/Resources/Public/assets/Backend/style/ot_stats.css

@@ -33,10 +33,17 @@
     flex-direction: column;
 }
 
+#matomoReport .reportCard {
+    display: flex;
+    flex-direction: column;
+    margin: 12px 24px;
+}
+
 #matomoReport .widgetIframe {
-    margin: 0 24px;
 }
 
+#matomoReport h3, h4, h5
+
 .reportFooter {
     display: flex;
     flex-direction: row;