opt-out

user/themes/lecampus/images/fleche-out.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="50"
+   height="20"
+   viewBox="0 0 13.229166 5.2916668"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="fleche-out.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.9195959"
+     inkscape:cx="21.727363"
+     inkscape:cy="13.938092"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1029"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-291.70832)">
+    <path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.64805323;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 0.4818754,296.67566 6.1327075,-4.66383 6.1327081,4.66383"
+       id="path4518"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+  </g>
+</svg>

user/themes/lecampus/js/site.js

@@ -129,6 +129,11 @@ function addclass() {
     $(this).toggleClass('open');
   })
 
+  var $out = $('.opt-out .txt');
+  
+  $out.on('click', function() {
+    $(this).parent('.opt-out').toggleClass('open');
+  })
 }
 
 function mapsalles() {

user/themes/lecampus/scss/theme/_footer.scss

@@ -1,4 +1,5 @@
 #footer{
+  margin-bottom: 45px;
   width: 100%;
   background: $light-grey;
   .block{
@@ -27,3 +28,36 @@
     }
   }
 }
+
+.opt-out{
+  height: auto;
+  transform: translateY(70%);
+  z-index: 9999;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: rgba(255,255,255,.5 );
+  text-align: center;
+  font-family: $Bold;
+  transition: transform 0.3s ease, background 0.3s ease;
+  iframe{
+    height: 110px;
+  }
+  p{
+    cursor: pointer;
+    font-size: 12px;
+  }
+  img{
+    width: 20px;
+    height: auto;
+    cursor: pointer;
+  }
+  &.open{
+    transform: translateX(0);
+    background: white;
+    transition: all 0.3s ease;
+    img{
+      transform: rotate(180deg);
+    }
+  }
+}

user/themes/lecampus/templates/partials/base.html.twig

@@ -45,12 +45,17 @@
 
   <!-- Matomo -->
   <script type="text/javascript">
+
     var _paq = _paq || [];
     /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+
     _paq.push(["setDoNotTrack", true]);
     _paq.push(["disableCookies"]);
+    _paq.push(['requireConsent']);
     _paq.push(['trackPageView']);
     _paq.push(['enableLinkTracking']);
+    _paq.push(['rememberConsentGiven'])
+
     (function() {
       var u="//analytics.figureslibres.io/";
       _paq.push(['setTrackerUrl', u+'piwik.php']);
@@ -129,10 +134,17 @@
 
     {% block footer %}
       {% include 'partials/footer.html.twig' %}
-      <iframe title="exclude"
-        style="border: 0;"
-        src="https://lecampus.kevintessier.net/matomo/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=&fontColor=&fontSize=&fontFamily="
-        ></iframe>
+      <div class="opt-out">
+        <div class="txt">
+          <img src="/user/themes/lecampus/images/fleche-out.svg" alt="fleche">
+          <p>Cookies</p>
+        </div>
+
+      <iframe class="exclude"
+        style="border: 0; width: 100%; text-align: center;"
+        src="https://analytics.figureslibres.io/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=&fontColor=&fontSize=12px&fontFamily=arial">
+      </iframe>
+    </div>
     {% endblock %}
 
     {% block bottom %}