simplify code and make input reactive (#31)

nzambello · Nov 18, 2017 · 7748dd4 · 7748dd4
1 parent 9482c35
commit 7748dd4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 35 deletions.
diff --git a/example/index.js b/example/index.js
@@ -6,10 +6,9 @@ var globalState = {
 };
 
 function setLastEllipsis(state, lastEllipsis) {
-  if (typeof lastEllipsis !== 'number' || !state) {
-    return;
+  if (typeof lastEllipsis == 'number' && state) {
+    state.lastEllipsis = lastEllipsis;
   }
-  state.lastEllipsis = lastEllipsis;
 }
 
 function getReplaceStr() {
@@ -51,34 +50,26 @@ function reset(resizeListenerAaa, resizeListenerLorem) {
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
 
   clearEllipsis(resizeListenerAaa, resizeListenerLorem);
+  globalState.lastEllipsis = null;
 }
 
-function oneRow() {
-  ellipsize(1);
-}
-document.getElementById('one-row').addEventListener('click', oneRow);
-
-function twoRows() {
-  ellipsize(2);
-}
-document.getElementById('two-rows').addEventListener('click', twoRows);
-
-function threeRows() {
-  ellipsize(3);
-}
-document.getElementById('three-rows').addEventListener('click', threeRows);
-
-function fourRows() {
-  ellipsize(4);
-}
-document.getElementById('four-rows').addEventListener('click', fourRows);
+document.querySelector('.controls').addEventListener('click', function(e) {
+  if (e.target.tagName.toLowerCase() == 'button') {
+    var row = Number(e.target.getAttribute('data-row'));
+    if (row) {
+      ellipsize(row);
+    }
+  }
+});
 
-function fiveRows() {
-  ellipsize(5);
-}
-document.getElementById('five-rows').addEventListener('click', fiveRows);
+document.getElementById('responsive-input').addEventListener('change', function() {
+  if (globalState.lastEllipsis) {
+    ellipsize(globalState.lastEllipsis);
+  }
+});
 
-function responsiveListener() {
-  ellipsize(globalState.lastEllipsis);
-}
-document.getElementById('responsive-input').addEventListener('change', responsiveListener);
+document.querySelector('.replace-str-input').addEventListener('input', function() {
+  if (globalState.lastEllipsis) {
+    ellipsize(globalState.lastEllipsis);
+  }
+});
diff --git a/index.html b/index.html
@@ -26,11 +26,11 @@ <h1>Ellipsed Text Testing</h1>
             </div>
             <div class="controls">
                 <button class="btn reset" onclick="reset()">Reset</button>
-                <button class="btn" id="one-row">1</button>
-                <button class="btn" id="two-rows">2</button>
-                <button class="btn" id="three-rows">3</button>
-                <button class="btn" id="four-rows">4</button>
-                <button class="btn" id="five-rows">5</button>
+                <button class="btn" data-row="1">1</button>
+                <button class="btn" data-row="2">2</button>
+                <button class="btn" data-row="3">3</button>
+                <button class="btn" data-row="4">4</button>
+                <button class="btn" data-row="5">5</button>
                 <div class="replace-str">
                     <label>Replace string</label>
                     <input type="text" class="replace-str-input" value="..." />