first commit prod

web/app/themes/la_mine/dist/assets/images/player.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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"
+   sodipodi:docname="player.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 26.458333 26.458333"
+   height="100"
+   width="100">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     inkscape:window-maximized="1"
+     inkscape:window-y="22"
+     inkscape:window-x="0"
+     inkscape:window-height="1029"
+     inkscape:window-width="1920"
+     units="px"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer1"
+     inkscape:document-units="mm"
+     inkscape:cy="406.94022"
+     inkscape:cx="394.29057"
+     inkscape:zoom="0.7"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base" />
+  <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
+     id="layer1"
+     inkscape:groupmode="layer"
+     inkscape:label="Calque 1">
+    <ellipse
+       ry="12.589807"
+       rx="12.589808"
+       cy="13.229163"
+       cx="13.229166"
+       id="circle2060"
+       style="opacity:0.683;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#009ee0;stroke-width:1.27872;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal;enable-background:new" />
+    <path
+       style="fill:none;stroke:#009ee0;stroke-width:1.27872;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
+       d="M 10.141751,7.8181148 18.23811,13.448797 9.9711363,18.653758 Z"
+       id="path2398-2"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

web/app/themes/la_mine/single.php

@@ -24,11 +24,21 @@ $current_id[] = get_the_ID();
 $args = get_posts(array(
   'post_type' => 'post',
   'post_status' => 'publish',
-  'orderby' => 'date',
-  'order' => 'DESC',
-  'posts_per_page' => -1,
+  'orderby' => 'meta_value',
+  'meta_key' => 'informations_debut_event',
+  'order' => 'ASC',
+  'posts_per_page' => 6,
   'category_name' => $cat,
   'post__not_in' => $current_id,
+  'meta_query' => array(
+    array(
+        'meta_key'     => 'informations_end_event',
+        'value'   => date('Y-m-d H:i:s'),
+        'compare' => '>=',
+        'type'    => 'DATE',
+    ),
+),
+
 ));
 
 $context['other'] = $args;

web/app/themes/la_mine/src/assets/js/scripts.js

@@ -75,7 +75,6 @@ function paralax() {
 }
 
 function isotope() {
-
   var $grid = $('.grid').isotope({
     percentPosition: true,
     itemSelector: '.thumbnails',
@@ -126,11 +125,105 @@ function scrollto(){
   });
 }
 
+function callPlayer(frame_id, func, args) {
+  
+  if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
+  var iframe = document.getElementById(frame_id);
+  if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
+      iframe = iframe.getElementsByTagName('iframe')[0];
+  }
+  // When the player is not ready yet, add the event to a queue
+  // Each frame_id is associated with an own queue.
+  // Each queue has three possible states:
+  //  undefined = uninitialised / array = queue / .ready=true = ready
+
+  console.log('domReady',iframe);
+
+  if (!callPlayer.queue) callPlayer.queue = {};
+  var queue = callPlayer.queue[frame_id],
+      domReady = document.readyState == 'complete';
+  if (domReady && !iframe) {
+      // DOM is ready and iframe does not exist. Log a message
+      window.console && console.log('callPlayer: Frame not found; id=' + frame_id);
+      if (queue) clearInterval(queue.poller);
+  } else if (func === 'listening') {
+      // Sending the "listener" message to the frame, to request status updates
+      if (iframe && iframe.contentWindow) {
+          func = '{"event":"listening","id":' + JSON.stringify(''+frame_id) + '}';
+          iframe.contentWindow.postMessage(func, '*');
+      }
+  } else if ((!queue || !queue.ready) && (
+             !domReady ||
+             iframe && !iframe.contentWindow ||
+             typeof func === 'function')) {
+      if (!queue) queue = callPlayer.queue[frame_id] = [];
+      queue.push([func, args]);
+      if (!('poller' in queue)) {
+          // keep polling until the document and frame is ready
+          queue.poller = setInterval(function() {
+              callPlayer(frame_id, 'listening');
+          }, 250);
+          // Add a global "message" event listener, to catch status updates:
+          messageEvent(1, function runOnceReady(e) {
+              if (!iframe) {
+                  iframe = document.getElementById(frame_id);
+                  if (!iframe) return;
+                  if (iframe.tagName.toUpperCase() != 'IFRAME') {
+                      iframe = iframe.getElementsByTagName('iframe')[0];
+                      if (!iframe) return;
+                  }
+              }
+              if (e.source === iframe.contentWindow) {
+                  // Assume that the player is ready if we receive a
+                  // message from the iframe
+                  clearInterval(queue.poller);
+                  queue.ready = true;
+                  messageEvent(0, runOnceReady);
+                  // .. and release the queue:
+                  while (tmp = queue.shift()) {
+                      callPlayer(frame_id, tmp[0], tmp[1]);
+                  }
+              }
+          }, false);
+      }
+  } else if (iframe && iframe.contentWindow) {
+      // When a function is supplied, just call it (like "onYouTubePlayerReady")
+      if (func.call) return func();
+      // Frame exists, send message
+      iframe.contentWindow.postMessage(JSON.stringify({
+          "event": "command",
+          "func": func,
+          "args": args || [],
+          "id": frame_id
+      }), "*");
+  }
+  function messageEvent(add, listener) {
+    var w3 = add ? window.addEventListener : window.removeEventListener;
+    w3 ?
+        w3('message', listener, !1)
+    :
+        (add ? window.attachEvent : window.detachEvent)('onmessage', listener);
+  }
+}
+
+
+function setupPlayers() {
+  $('#section_MineVideo .cover').click(function(){
+    $(this).fadeOut();
+    var id = $(this).parent().find('iframe').attr('id');
+    callPlayer(id, function() {
+      callPlayer(id, "playVideo");
+    });
+  });
+}
+
 $( document ).ready(function() {
   burger();
   click_nav();
   slides();
   isotope();
+  setupPlayers();
+  // custom_player();
   // masonry();
   paralax();
   // drag();

web/app/themes/la_mine/src/assets/scss/components/_footer.scss

@@ -1,4 +1,7 @@
 body{
+  a{
+    color: black;
+  }
     & > footer{
         box-shadow: inset 0px 10px 10px rgba(0, 0, 0, 0.05);
         padding-top: 2rem;

web/app/themes/la_mine/src/assets/scss/components/_thumbnails.scss

@@ -30,10 +30,12 @@
       &.musiques{
         background-image: url("../../assets/images/svg/picto_musique.svg");
       }
-      &.autres{
+      &.transition_urbaine{
+        background-image: url("../../assets/images/svg/picto_transition.svg");
+      }
+      &.transition_urbaine{
         background-image: url("../../assets/images/svg/picto_autres.svg");
       }
-
     }
     a{
         text-decoration: none;

web/app/themes/la_mine/src/assets/scss/pages/_home.scss

@@ -150,6 +150,7 @@
                         border:5px solid $colorRed;
                         padding: 2rem;
                         height: calc(100% - 4rem);
+                        background: white;
                         h4{
                             font-size: 1rem;
                             line-height: 1.2;
@@ -239,8 +240,34 @@
                             width: 100%;
                             height: 100%;
                         }
-                    }
 
+                        .cover{
+                          position: absolute;
+                          top: 0;
+                          left: 0;
+                          z-index: 9999;
+                          width: 100%;
+                          height: 100%;
+                          display: flex;
+                          #thumbnails{
+                            z-index: 0;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                          }
+                          #player{
+                            z-index: 999;
+                            margin: auto;
+                            cursor: pointer;
+                            &:hover{
+                              opacity: 0.8;
+                            }
+                          }
+                        }
+                    }
                 }
             }
         }

web/app/themes/la_mine/templates/accueil.twig

@@ -42,12 +42,16 @@
 	</div>
 </section>
 
-<section id="section_MineVideo" class="row ">
+<section id="section_MineVideo" class="row">
 	<div class="container-fluid">
-		<h3>La Mine en vidéo</h3>
+		<h3>Transition urbaine</h3>
 		{% if post.video_la_mine  %}
 			<figure class="row mx-0">
-				<iframe width="560" height="315" src="//www.youtube.com/embed/{{ post.video_la_mine }}" frameborder="0" allowfullscreen></iframe>
+				<div class="cover">
+					<img id="thumbnails" src="http://img.youtube.com/vi/XUsBV5mXJGs/maxresdefault.jpg" alt="thumbnail">
+					<img id="player" src="{{theme.link}}/dist/assets/images/player.svg" alt="player">
+				</div>
+				<iframe id="playVideo" src="https://www.youtube.com/embed/XUsBV5mXJGs?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
 			</figure>
 		{% endif %}
 	</div>

web/app/themes/la_mine/templates/components/footer.twig

@@ -5,6 +5,7 @@
     </figure>
 
     <div class="col-12 col-sm-6 col-md">
+      <strong><a href="https://numerique.ressourcerie-la-mine.com/">La Mine Numérique</a></strong>
       {{options.texte_horaire }}
     </div>
 
@@ -36,7 +37,7 @@
   <div class="row">
 
     <div id="mc_embed_signup" class="col-12">
-      <form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=364a0fe850" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+      <form action="https://ressourcerie-la-mine.us20.list-manage.com/subscribe/post?u=e7a0c89dae3ca6b1d5d904aea&amp;id=1537dadb5d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
         <div class="d-flex" id="mc_embed_signup_scroll">
           <div><p>Recevoir l'actualité de La Mine</p></div>
           <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="E-mail" required>

web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig

@@ -12,7 +12,11 @@
     <figure>
       <span class="icone_cat {{cat}}"></span>
       <div class="overflow-hidden">
-        <img class="lazyload" src="{{ Image(item.image_event).src|resize(600,500) }}" data-original="{{ Image(item.image_event).src|resize(600,500) }}">
+        {% if item.ajouter_un_media_0_video %}
+          <img class="lazyload" src="{{ item.thumbnail|resize(600,500) }}" data-original="{{ item.thumbnail|resize(600,500) }}">
+          {% else %}
+          <img class="lazyload" src="{{ Image(item.image_event).src|resize(600,500) }}" data-original="{{ Image(item.image_event).src|resize(600,500) }}">
+        {% endif %}
       </div>
 
       <figcaption class="wrap_content">
@@ -29,9 +33,7 @@
               <span class="end">
                 à <time datetime="{{item.informations_fin_event|date("G:i")}}">{{item.informations_fin_event|date("G:i")}}</time>
               </span>
-
             {% else %}
-
               <span class="start">
                 Du <time datetime="{{item.informations_debut_event|date("j F Y") }}">{{item.informations_debut_event|date("j F Y") }}</time>
                 à <time datetime="{{item.informations_debut_event|date("G:i")}}">{{item.informations_debut_event|date("G:i")}}</time>
@@ -40,7 +42,6 @@
                 <br>Au <time datetime="{{item.informations_fin_event|date("j F Y") }}">{{item.informations_fin_event|date("j F Y") }}</time>
                 à <time datetime="{{item.informations_fin_event|date("G:i")}}">{{item.informations_fin_event|date("G:i")}}</time></br>
               </span>
-
             {% endif %}
           </div>
           <div class="places">{{item.informations_lieu}}</div>

web/app/themes/la_mine/templates/les_temps_forts.twig

@@ -7,7 +7,7 @@
 	</div>
 
 	{% for item in posts %}
-		<article class="row tpsF">
+		<article id="{{item.slug}}" class="row tpsF">
 			<aside class="sidebar col-md-4">
 				<div class="title">
 					<h3>{{item.title}}</h3>

web/app/themes/la_mine/templates/partial/section_tpsF.twig

@@ -2,6 +2,7 @@
 <div class="row">
 	{% for item in tpsF %}
 		<article class="thumbnails col-12 col-md-6 col-lg {{cat}}">
+		<a rel="noreferrer" href="{{site.url}}/les-temps-forts/#{{item.slug}}">
 			<figure>
 				<div class="overflow-hidden">
 					<img src="{{item.thumbnail.src|resize(500,500) }}" alt="{{item.thumbnail.alt}}" title="{{item.thumbnail.title}}">
@@ -19,6 +20,7 @@
 				</figcaption>
 
 			</figure>
+			</a>
 		</article>
 	{% endfor %}
 </div>

web/app/themes/la_mine/templates/single.twig

@@ -15,7 +15,11 @@
 			</header>
 
 			<figure class="__img_event col-lg-6 col-12">
-				<img src="{{ Image(post.image_event).src }}" />
+				{% if post.ajouter_un_media_0_image_event %}
+				<img src="{{ Image(post.ajouter_un_media_0_image_event).src }}" />
+				{% else %}
+					<iframe width="560" height="315" src="{{post.ajouter_un_media_0_video}}" frameborder="0" allowfullscreen></iframe>
+				{% endif %}
 			</figure>
 
 			<div class="article-content col-lg-6 col-12 my-3 my-lg-0">