-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 90aeb33
Showing
6 changed files
with
657 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| /.idea/ | ||
| /dist/ | ||
| /node_modules/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| # Eripusisu | ||
|
|
||
| テキスト省略表示ライブラリ | ||
|
|
||
| ## 特長 | ||
|
|
||
| - 指定行数より後のテキストを省略表示する | ||
| - 指定行数がリンクやリストの途中でも大丈夫 | ||
| - 内容の一部が float していても大丈夫 | ||
| - 省略文字列を指定可能 | ||
|
|
||
| ## | ||
|
|
||
| [Examples](examples/index.html) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,279 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width" /> | ||
| <title>Eripusisu Examples</title> | ||
| <style> | ||
| body { | ||
| max-width: 32rem; | ||
| margin: 2rem; | ||
| } | ||
| .set { | ||
| margin-top: 1rem; | ||
| padding: 0 1rem; | ||
| border: 1px solid; | ||
| } | ||
| .float-left { | ||
| float: left; | ||
| margin-top: 0; | ||
| margin-right: 1rem; | ||
| } | ||
| .float-right { | ||
| float: right; | ||
| margin-top: 0; | ||
| margin-left: 1rem; | ||
| } | ||
| </style> | ||
| <script src="../src/index.js"></script> | ||
| </head> | ||
| <body> | ||
| <h1>Eripusisu Examples</h1> | ||
|
|
||
| <h2>Long Text</h2> | ||
| <div class="set"> | ||
| <div class="container"> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus | ||
| ipsum, varius imperdiet turpis ac, pellentesque sagittis enim. Nulla | ||
| vulputate sem felis, vitae lobortis velit tempus at. Sed in interdum | ||
| ligula. In euismod quis massa nec ullamcorper. Nunc aliquam nisi a | ||
| rhoncus gravida. Suspendisse luctus neque in erat vestibulum tempor. | ||
| Nulla pharetra, ex et lacinia molestie, turpis orci euismod nibh, | ||
| elementum finibus diam orci nec odio. Vivamus in nunc sed nisi | ||
| convallis commodo. Donec magna dolor, eleifend eu laoreet a, facilisis | ||
| eget massa. Phasellus mollis sagittis diam ornare malesuada. Donec vel | ||
| enim dolor. Vestibulum a eros aliquam, facilisis enim ut, placerat | ||
| diam. Vestibulum orci felis, porttitor eget dignissim et, semper id | ||
| lorem. Vestibulum arcu erat, rhoncus suscipit lorem nec, tempus | ||
| feugiat nulla. | ||
| </p> | ||
| </div> | ||
| <p class="toggle-container"> | ||
| <button class="toggle" type="button">Toggle</button> | ||
| </p> | ||
| </div> | ||
|
|
||
| <h2>Links</h2> | ||
| <div class="set"> | ||
| <div class="container"> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus | ||
| ipsum, varius imperdiet turpis ac, pellentesque sagittis enim. Nulla | ||
| vulputate sem felis, | ||
| <a href | ||
| >vitae lobortis velit tempus at. Sed in interdum ligula. In euismod | ||
| quis massa nec ullamcorper.</a | ||
| > | ||
| Nunc aliquam nisi a rhoncus gravida. Suspendisse luctus neque in erat | ||
| vestibulum tempor. Nulla pharetra, ex et lacinia molestie, turpis orci | ||
| euismod nibh, elementum finibus diam orci nec odio. Vivamus in nunc | ||
| sed nisi convallis commodo. Donec magna dolor, eleifend eu laoreet a, | ||
| facilisis eget massa. Phasellus mollis sagittis diam ornare malesuada. | ||
| Donec vel enim dolor. Vestibulum a eros aliquam, facilisis enim ut, | ||
| placerat diam. Vestibulum orci felis, porttitor eget dignissim et, | ||
| semper id lorem. Vestibulum arcu erat, rhoncus suscipit lorem nec, | ||
| tempus feugiat nulla. | ||
| </p> | ||
| </div> | ||
| <p class="toggle-container"> | ||
| <button class="toggle" type="button">Toggle</button> | ||
| </p> | ||
| </div> | ||
|
|
||
| <h2>Lists</h2> | ||
| <div class="set"> | ||
| <div class="container"> | ||
| <p>Lorem ipsum dolor sit amet.</p> | ||
| <ul> | ||
| <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> | ||
| <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> | ||
| <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> | ||
| </ul> | ||
| </div> | ||
| <p class="toggle-container"> | ||
| <button class="toggle" type="button">Toggle</button> | ||
| </p> | ||
| </div> | ||
|
|
||
| <h2>Floats</h2> | ||
| <div class="set"> | ||
| <div class="container"> | ||
| <p class="float-left"> | ||
| <img | ||
| src="https://via.placeholder.com/100" | ||
| width="100" | ||
| height="100" | ||
| alt="An image" | ||
| /> | ||
| </p> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus | ||
| ipsum, varius imperdiet turpis ac, pellentesque sagittis enim. Nulla | ||
| vulputate sem felis, vitae lobortis velit tempus at. Sed in interdum | ||
| ligula. In euismod quis massa nec ullamcorper. Nunc aliquam nisi a | ||
| rhoncus gravida. Suspendisse luctus neque in erat vestibulum tempor. | ||
| Nulla pharetra, ex et lacinia molestie, turpis orci euismod nibh, | ||
| elementum finibus diam orci nec odio. Vivamus in nunc sed nisi | ||
| convallis commodo. Donec magna dolor, eleifend eu laoreet a, facilisis | ||
| eget massa. Phasellus mollis sagittis diam ornare malesuada. Donec vel | ||
| enim dolor. Vestibulum a eros aliquam, facilisis enim ut, placerat | ||
| diam. Vestibulum orci felis, porttitor eget dignissim et, semper id | ||
| lorem. Vestibulum arcu erat, rhoncus suscipit lorem nec, tempus | ||
| feugiat nulla. | ||
| </p> | ||
| </div> | ||
| <p class="toggle-container"> | ||
| <button class="toggle" type="button">Toggle</button> | ||
| </p> | ||
| </div> | ||
| <div class="set"> | ||
| <div class="container"> | ||
| <p class="float-right"> | ||
| <img | ||
| src="https://via.placeholder.com/100" | ||
| width="100" | ||
| height="100" | ||
| alt="An image" | ||
| /> | ||
| </p> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus | ||
| ipsum, varius imperdiet turpis ac, pellentesque sagittis enim. Nulla | ||
| vulputate sem felis, vitae lobortis velit tempus at. Sed in interdum | ||
| ligula. In euismod quis massa nec ullamcorper. Nunc aliquam nisi a | ||
| rhoncus gravida. Suspendisse luctus neque in erat vestibulum tempor. | ||
| Nulla pharetra, ex et lacinia molestie, turpis orci euismod nibh, | ||
| elementum finibus diam orci nec odio. Vivamus in nunc sed nisi | ||
| convallis commodo. Donec magna dolor, eleifend eu laoreet a, facilisis | ||
| eget massa. Phasellus mollis sagittis diam ornare malesuada. Donec vel | ||
| enim dolor. Vestibulum a eros aliquam, facilisis enim ut, placerat | ||
| diam. Vestibulum orci felis, porttitor eget dignissim et, semper id | ||
| lorem. Vestibulum arcu erat, rhoncus suscipit lorem nec, tempus | ||
| feugiat nulla. | ||
| </p> | ||
| </div> | ||
| <p class="toggle-container"> | ||
| <button class="toggle" type="button">Toggle</button> | ||
| </p> | ||
| </div> | ||
|
|
||
| <h2>Images</h2> | ||
| <div class="set"> | ||
| <div class="container"> | ||
| <p> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| <img | ||
| src="https://via.placeholder.com/100x32" | ||
| width="100" | ||
| height="32" | ||
| alt="An image" | ||
| /> | ||
| </p> | ||
| </div> | ||
| <p class="toggle-container"> | ||
| <button class="toggle" type="button">Toggle</button> | ||
| </p> | ||
| </div> | ||
|
|
||
| <script src="https://unpkg.com/[email protected]/underscore.js"></script> | ||
| <script> | ||
| (function () { | ||
| const sets = document.querySelectorAll(".set"); | ||
| _.each(sets, function (set) { | ||
| const container = set.querySelector(".container"); | ||
| const button = set.querySelector(".toggle"); | ||
| const eripusisu = new Eripusisu(container, 3, "…", { | ||
| toggleButton: button, | ||
| }); | ||
| button.addEventListener("click", function () { | ||
| eripusisu.toggle(); | ||
| }); | ||
| }); | ||
| })(); | ||
| </script> | ||
| </body> | ||
| </html> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| { | ||
| "name": "eripusisu", | ||
| "version": "0.0.0", | ||
| "description": "Text truncation library", | ||
| "main": "dist/index.js", | ||
| "scripts": {}, | ||
| "keywords": [ | ||
| "text", | ||
| "truncate", | ||
| "ellipsis", | ||
| "line", | ||
| "range", | ||
| "float", | ||
| "inline-block" | ||
| ], | ||
| "author": "Takayuki Shimada", | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "prettier": "^2.1.2" | ||
| } | ||
| } |
Oops, something went wrong.