added demo input for replaceStr

nzambello · Oct 2, 2017 · f7e956f · f7e956f
1 parent 4303a63
commit f7e956f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/example/index.css b/example/index.css
@@ -58,6 +58,17 @@ h1 {
     outline: none;
 }
 
+.replace-str {
+    padding: 15px 0;
+}
+
+.replace-str-input {
+    padding: 10px 15px;
+    border-radius: 5px;
+    background: #fff;
+    border: 1px solid #bbb;
+}
+
 .view-on-github {
     text-align: center;
     margin-top: 50px;

diff --git a/example/index.js b/example/index.js
@@ -10,27 +10,31 @@ function reset() {
   loremIpsum.innerText = '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.';
 }
 
+function getReplaceStr() {
+  return document.querySelector('.replace-str-input').value;
+}
+
 function oneRow() {
   reset();
-  ellipsis('.text p', 1);
+  ellipsis('.text p', 1, { replaceStr: getReplaceStr() });
 }
 
 function twoRows() {
   reset();
-  ellipsis('.text p', 2);
+  ellipsis('.text p', 2, { replaceStr: getReplaceStr() });
 }
 
 function threeRows() {
   reset();
-  ellipsis('.text p', 3);
+  ellipsis('.text p', 3, { replaceStr: getReplaceStr() });
 }
 
 function fourRows() {
   reset();
-  ellipsis('.text p', 4);
+  ellipsis('.text p', 4, { replaceStr: getReplaceStr() });
 }
 
 function fiveRows() {
   reset();
-  ellipsis('.text p', 5);
+  ellipsis('.text p', 5, { replaceStr: getReplaceStr() });
 }
diff --git a/index.html b/index.html
@@ -31,6 +31,10 @@ <h1>Ellipsed Text Testing</h1>
                 <button class="btn" onclick="threeRows()">3</button>
                 <button class="btn" onclick="fourRows()">4</button>
                 <button class="btn" onclick="fiveRows()">5</button>
+                <div class="replace-str">
+                    <label>Replace string</label>
+                    <input type="text" class="replace-str-input" value="..." />
+                </div>
             </div>
         </div>
         <div class="view-on-github">