Skip to content

Commit

Permalink
fix-bug-resize-update-dot
Browse files Browse the repository at this point in the history
  • Loading branch information
@hyunguyen
hyunguyen committed Sep 15, 2017
1 parent 1b8f5b0 commit 5fdc0bd
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 65 deletions.
7 changes: 5 additions & 2 deletions html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,17 @@ <h3>The 1st Paragraph <small>(lines: 2)</small></h3>
<p class="dotstail-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
</div>
</div>
<div class="paragraph">
<img src="theme/images/landscape.png" alt="">
<div class="paragraph-content">
<h3>The 2nd Paragraph <small>(lines: 3)</small></h3>
<p class="dotstail-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus illum ex, soluta temporibus suscipit rem, vel, animi iste praesentium fugiat quisquam vero non excepturi corporis! Minus deleniti aliquam blanditiis nobis! Lorem ipsum dolor sit
Porem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus illum ex, soluta temporibus suscipit rem, vel, animi iste praesentium fugiat quisquam vero non excepturi corporis! Minus deleniti aliquam blanditiis nobis! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Ab recusandae nihil, consequuntur beatae possimus neque, aspernatur molestias itaque sed a maxime! Culpa, hic laboriosam, consequuntur deleniti enim quae nisi amet.
</p>
</div>
Expand All @@ -77,7 +80,7 @@ <h3>The 2nd Paragraph <small>(lines: 3)</small></h3>
<div class="paragraph-content">
<h3>The 3rd Paragraph <small>(lines: 4)</small></h3>
<p class="dotstail-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla voluptate, voluptatem doloremque nobis. At quibusdam dolores culpa voluptatibus consequuntur in sequi laborum minima, voluptas veritatis iusto earum asperiores unde. Id. Lorem ipsum dolor
Korem ipsum dolor sit amet, consectetur adipisicing elit. Nulla voluptate, voluptatem doloremque nobis. At quibusdam dolores culpa voluptatibus consequuntur in sequi laborum minima, voluptas veritatis iusto earum asperiores unde. Id. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Provident quam a perspiciatis, molestias aperiam dolorum ipsam ab facilis qui officia ea recusandae inventore magnam quod quidem vel dolore molestiae! Vel?
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dotstail",
"version": "1.2.1",
"version": "1.2.2",
"description": "Dotstail- help you to make multiple lines elipsis",
"main": "dotstail.min.js",

Expand Down
8 changes: 6 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,18 @@ <h3>The 1st Paragraph <small>(lines: 2)</small></h3>
<p class="dotstail-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
<p class="dotstail-1">
Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam eveniet unde pariatur voluptatem adipisci dolore, illum! Quasi illo culpa iste, ea accusantium, ut nulla eligendi. Omnis sapiente ex delectus mollitia nam
eveniet unde pariatur voluptatem adipisci dolore, illum!
</p>
</div>
</div>
<div class="paragraph">
<img src="theme/images/landscape.png" alt="">
<div class="paragraph-content">
<h3>The 2nd Paragraph <small>(lines: 3)</small></h3>
<p class="dotstail-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus illum ex, soluta temporibus suscipit rem, vel, animi iste praesentium fugiat quisquam vero non excepturi corporis! Minus deleniti aliquam blanditiis nobis! Lorem ipsum dolor sit
Porem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus illum ex, soluta temporibus suscipit rem, vel, animi iste praesentium fugiat quisquam vero non excepturi corporis! Minus deleniti aliquam blanditiis nobis! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Ab recusandae nihil, consequuntur beatae possimus neque, aspernatur molestias itaque sed a maxime! Culpa, hic laboriosam, consequuntur deleniti enim quae nisi amet.
</p>
</div>
Expand All @@ -78,7 +82,7 @@ <h3>The 2nd Paragraph <small>(lines: 3)</small></h3>
<div class="paragraph-content">
<h3>The 3rd Paragraph <small>(lines: 4)</small></h3>
<p class="dotstail-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla voluptate, voluptatem doloremque nobis. At quibusdam dolores culpa voluptatibus consequuntur in sequi laborum minima, voluptas veritatis iusto earum asperiores unde. Id. Lorem ipsum dolor
Korem ipsum dolor sit amet, consectetur adipisicing elit. Nulla voluptate, voluptatem doloremque nobis. At quibusdam dolores culpa voluptatibus consequuntur in sequi laborum minima, voluptas veritatis iusto earum asperiores unde. Id. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Provident quam a perspiciatis, molestias aperiam dolorum ipsam ab facilis qui officia ea recusandae inventore magnam quod quidem vel dolore molestiae! Vel?
</p>
</div>
Expand Down
7 changes: 7 additions & 0 deletions public/theme/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
@import url("https://fonts.googleapis.com/css?family=Damion|Roboto:300,700");
.nav-huy {
padding: 0; }
.nav-huy li {
display: inline-block;
padding: 10px;
background-color: blue; }

body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
Expand Down
14 changes: 5 additions & 9 deletions public/theme/js/dotstail.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 9 additions & 1 deletion sass/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
@import url('https://fonts.googleapis.com/css?family=Damion|Roboto:300,700');

.nav-huy {
padding: 0;
li {

display: inline-block;
padding: 10px;
background-color: blue;
}
}
//Custom Css
body {
font-family: 'Roboto', sans-serif;
Expand Down
72 changes: 22 additions & 50 deletions theme/js/dotstail.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,18 @@
'us strict';
'use strict';
var dotstail = {
setDot: function ( options ) {
window.addEventListener('load', function() {
var myArray = [];
var sort = ['element', 'letter', 'lines', 'resize'];
sort.forEach(el => {
myArray.push( options[el] );
myArray.push(options[el]);
});
var myObject = checkError.apply(myObject, myArray);
// check error value include
function checkError ( pr_element, pr_letter, pr_lines, pr_resize ) {
function checkError ( pr_element, pr_letter, pr_lines) {
var getElement = document.querySelectorAll(pr_element);
getElement = [].slice.call(getElement)

var text_data;
getElement.forEach( el => {
text_data = el.textContent;
text_data = text_data.trim();
});

if ( text_data === "" ) {
text_data = "."
}

if ( pr_element === undefined ) {
return console.log("%c'Thank you for using dotstail. Please, insert property for element selector element: 'element here'", 'background: #f16d99; color: #fff');
}
Expand All @@ -38,52 +28,34 @@ var dotstail = {
pr_letter = 0;
});
}

if ( pr_lines != undefined && typeof(pr_lines) === 'string' ) {
return console.log("%c'Thank you for using dotstail. Please, lines property must be a number", 'background: #f16d99; color: #fff');
}
if ( pr_lines === undefined || pr_lines === 0 ) {
getElement.forEach( el => {
pr_lines = parseFloat(el.offsetHeight);
});
}

var myArray = [pr_element, pr_letter, pr_lines, text_data]
var myArray = [pr_element, pr_letter, pr_lines]
var myObject = addDot.apply(myObject, myArray);

function resizeDot() {
addDot(pr_element, pr_letter, pr_lines, text_data);
}
if ( pr_resize != undefined && typeof(pr_resize) != "boolean" ) {
return console.log("%c'Thank you for using dotstail. Please, insert property for element selector resize: 'boolean (true, flase)'", 'background: #f16d99; color: #fff');
}
// undefined -> default true
if ( pr_resize === undefined || pr_resize === true ) {
window.addEventListener('resize', resizeDot);
}
}

function addDot (pr_element, pr_letter, pr_lines) {
var getElement = document.querySelectorAll(pr_element);
getElement = [].slice.call(getElement);
var maxHeight; // set maxHeight

var maxHeight,
text_data,
text_use;
getElement.forEach( el => {
var text_data;
text_data = el.textContent.trim();
maxHeight = parseFloat(window.getComputedStyle(el).getPropertyValue('line-height')) * pr_lines;
for (var i = 0; i < text_data.length + 1; i++) {
el.textContent = text_data.slice(0, [i]);
var height = parseFloat(el.offsetHeight);
var width = parseFloat(el.offsetWidth);


if (height > maxHeight) {
return el.textContent = text_data.slice(0, [i] - 4 - pr_letter)+'...';
text_data = el.textContent;
var text_cache = text_data;

var text_local = function(){
maxHeight = parseFloat(window.getComputedStyle(el).getPropertyValue('line-height')) * pr_lines;
text_use = text_cache;
for (var i = 0; i < text_use.length; i++) {
el.textContent = text_use.slice(0, [i]);
var height = parseFloat(el.offsetHeight);
if (height > maxHeight) {
return el.textContent = text_use.slice(0, [i] - 3 - pr_letter) + "...";
}
}
}
text_local();
window.addEventListener('resize', text_local);
});
}
},true);
}
}
}

0 comments on commit 5fdc0bd

Please sign in to comment.