Move code to ES2015

tcorral · tcorral · commit 211b59ed364b · 2016-04-21T03:48:52.000+02:00
- Lazy
diff --git a/Lazy/Lazy.js b/Lazy/Lazy.js
diff --git a/Lazy/index.html b/Lazy/index.html
@@ -1,8 +1,7 @@
 <html>
 <head>
-    <link type="text/css" rel="stylesheet" href="../css/style.css"/>
+    <link type="text/css" rel="stylesheet" href="../statics/css/style.css"/>
     <title>Lazy Pattern</title>
-    <script type="text/javascript" src="Lazy.js"></script>
     <style type="text/css">
         #test {
             margin-left: 40px;
@@ -17,18 +16,21 @@
 <div id="source">
     <h2>Source</h2>
             <pre>
-    var nCounter = 0;
-    var aElements = ['Zero', 'First', 'Second', 'Third', 'Fourth'];
-    var nIdTimeout = 0;
-    var oLazy = new Lazy(document.getElementById('test'), aElements[nCounter], new Date());
-    nIdTimeout = setInterval(function()
-    {
-        if(nCounter === 4)
-        {
-            clearInterval(nIdTimeout);
-        }
-        oLazy.update(aElements[nCounter++], new Date());
-    }, 500);
+import Lazy from './Lazy';
+
+let counter = 0;
+const elements = ['Zero', 'First', 'Second', 'Third', 'Fourth'];
+
+let timeout = null;
+let lazy = new Lazy(document.getElementById('test'), elements[counter], new Date());
+
+timeout = setInterval(function() {
+  if (counter === 4) {
+    clearInterval(timeout);
+  }
+  lazy.update(aElements[counter++], new Date());
+}, 500);
+
             </pre>
 </div>
 <div id="console">
@@ -37,18 +39,7 @@ <h2>Console</h2>
     <ul></ul>
     <h1>Lazy</h1>
 </div>
-<script type="text/javascript" src="../js/utils.js"></script>
-<script type="text/javascript">
-    var nCounter = 0;
-    var aElements = ['Zero', 'First', 'Second', 'Third', 'Fourth'];
-    var nIdTimeout = 0;
-    var oLazy = new Lazy(document.getElementById('test'), aElements[nCounter], new Date());
-    nIdTimeout = setInterval(function() {
-        if (nCounter === 4) {
-            clearInterval(nIdTimeout);
-        }
-        oLazy.update(aElements[nCounter++], new Date());
-    }, 500);
-</script>
+<script type="text/javascript" src="../statics/js/utils.js"></script>
+<script type="text/javascript" src="dist/scripts/main.js"></script>
 </body>
 </html>
diff --git a/Lazy/scripts/Lazy.js b/Lazy/scripts/Lazy.js
@@ -0,0 +1,41 @@
+class Lazy {
+  constructor(container, text, date) {
+    this.container = container;
+    this.update(text, date);
+  }
+
+  static addZero(time) {
+    return time < 10 ? '0' + time : time;
+  }
+
+  getFormattedTime(date) {
+    return Lazy.addZero(date.getHours()) + ":" + Lazy.addZero(date.getMinutes()) + ":" + Lazy.addZero(date.getSeconds());
+  }
+
+  update(text, date) {
+    this.container.innerHTML = `
+      <div>
+        <div>
+          Not changed:
+          <span>
+            ${this.getFormattedTime(new Date())}
+          </span>
+        </div>
+        <span class="text">
+          ${text}
+        </span>
+        <span class="time">
+          ${this.getFormattedTime(date)}
+        </span>
+      </div>
+    `;
+    this.update = (text, date) => {
+      var textNode = this.container.querySelector('.text');
+      var timeNode = this.container.querySelector('.time');
+      textNode.innerHTML = text;
+      timeNode.innerHTML = this.getFormattedTime(date);
+    };
+  }
+}
+
+export default Lazy;
diff --git a/Lazy/scripts/main.js b/Lazy/scripts/main.js
@@ -0,0 +1,14 @@
+import Lazy from './Lazy';
+
+let counter = 0;
+const elements = ['Zero', 'First', 'Second', 'Third', 'Fourth'];
+
+let timeout = null;
+let lazy = new Lazy(document.getElementById('test'), elements[counter], new Date());
+
+timeout = setInterval(function() {
+  if (counter === 4) {
+    clearInterval(timeout);
+  }
+  lazy.update(elements[counter++], new Date());
+}, 500);
