Correction Compilation JS + Year animation + Contact Us Info

gulpfile.js

@@ -1,7 +1,9 @@
 'use strict';
 
 let gulp = require('gulp');
-let uglify = require('gulp-uglify');
+let uglifyes = require('uglify-es');
+let composer = require('gulp-uglify/composer');
+let uglify = composer(uglifyes, console);
 let rename = require('gulp-rename');
 let concat = require('gulp-concat');
 let Fiber = require('fibers');

package.json

@@ -14,7 +14,8 @@
     "gulp-sass": "^4.0.2",
     "gulp-uglify": "^3.0.2",
     "node-sass": "^4.12.0",
-    "sass": "^1.20.1"
+    "sass": "^1.20.1",
+    "uglify-es": "^3.3.9"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

public/js/main.min.js

@@ -1 +1 @@
-function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(e){e.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),e.target.parentElement.parentElement.classList.toggle("slide")}addCopyrightCurrentDate(),document.querySelectorAll("section#activites button").forEach(function(e){e.addEventListener("click",showActivityContent)});
+function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(e){e.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),e.target.parentElement.parentElement.classList.toggle("slide")}function pad(e,t,n){return n=n||"0",(e+="").length>=t?e:new Array(t-e.length+1).join(n)+e}function animateNumbers(e){setTimeout(function(){let t=1*(null===e.getAttribute("data-endvalue")?(new Date).getFullYear():e.getAttribute("data-endvalue")),n=setInterval(function(){t-=1,e.innerHTML=pad(parseInt(e.innerHTML)+1,4),t<=0&&clearInterval(n)},1)},null===e.getAttribute("data-delay")?250:e.getAttribute("data-delay"))}addCopyrightCurrentDate(),document.querySelectorAll("section#activites button").forEach(function(e){e.addEventListener("click",showActivityContent)}),document.querySelectorAll(".year-animated").forEach(function(e){animateNumbers(e)});

resources/js/app.js

@@ -4,6 +4,10 @@
     document.querySelectorAll('section#activites button').forEach(function(item) {
         item.addEventListener('click', showActivityContent);
     })
+
+    document.querySelectorAll( '.year-animated' ).forEach(function(item) {
+        animateNumbers( item );
+    });
 })();
 
 function addCopyrightCurrentDate() {
@@ -13,4 +17,23 @@ function addCopyrightCurrentDate() {
 function showActivityContent(e) {
     e.target.parentElement.parentElement.querySelector('.headline').classList.toggle('toggle-visibility');
     e.target.parentElement.parentElement.classList.toggle('slide');
-}
+}
+
+function pad(n, width, z) {
+    z = z || '0';
+    n = n + '';
+    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+}
+
+function animateNumbers(item) {
+    let intervalTime = 1;
+    setTimeout(function() {
+        let duration = (item.getAttribute('data-endvalue') === null ? new Date().getFullYear() : item.getAttribute('data-endvalue')) * intervalTime;
+        let animation = setInterval(function() {
+            duration -= intervalTime;
+            item.innerHTML = pad(parseInt(item.innerHTML) + 1, 4);
+            if(duration <= 0)
+                clearInterval(animation);
+        }, intervalTime);
+    }, item.getAttribute('data-delay') === null ? 250 : item.getAttribute('data-delay'));
+}

resources/sass/_partials/_general.scss

@@ -84,6 +84,25 @@ section#apropos {
     .columns {
         margin-top: 50px;
 
+        embed, iframe {
+            margin-top: 10px;
+            height: 600px;
+            width: 500px;
+            border: 1px solid lightgray;
+        }
+
+        address {
+            background: white;
+            padding: 10px;
+            margin: 0 auto;
+            font-size: 0.8rem;
+            text-align: left;
+            border: 1px solid lightgray;
+            max-width: 500px;
+            position: relative;
+            top: -10px;
+        }
+
         img.is-quarter {
             width: 25%;
         }

view/fr/index.html

@@ -52,6 +52,7 @@
             <div class="splashscreen-text-container full-width">
                 <h1>Laboratoire de médias interactifs</h1>
                 <div class="border-seperator"></div>
+                <h2><span class="year-animated" data-endvalue="2009">0000</span> - <span class="year-animated" data-delay="2000">0000</span></h2>
             </div>
         </section>
         <section class="section" id="apropos">
@@ -76,6 +77,14 @@
             <div class="columns is-centered is-vcentered">
                 <div class="column is-half-tablet is-full-mobile">
                     <h3>Contactez-nous</h3>
+                    <iframe width="500" height="600"
+                            src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJB5eDqmAayUwR9kVcpBmnMrc&key=AIzaSyDa73RDd5rn0c6jqn8nAXKh01L8NfrQGQM" allowfullscreen></iframe>
+                    <address>
+                        1219 William, Montreal<br/>
+                        Local D-2020<br/>
+                        <a href="mailto:conjure@ens.etsmtl.ca">conjure@ens.etsmtl.ca</a><br/>
+                        <a href="tel:5143968800">(514) 396-8800 poste: #7713</a>
+                    </address>
                 </div>
                 <div class="column is-half-tablet is-full-mobile">
                     <h3>Membres</h3>