Giter VIP home page Giter VIP logo

d-e-v-s-k / cuttr-js Goto Github PK

View Code? Open in Web Editor NEW
38.0 2.0 4.0 232 KB

Cuttr is a javascript plugin that truncates multi-line text content with multiple truncation methods and custom ellipsis.

Home Page: https://cuttr.kulahs.de/

License: GNU General Public License v3.0

JavaScript 100.00%
ellipsis truncate javascript truncate-text truncation content multi-line-text line-clamping line-clamp multiline

cuttr-js's Introduction

Cuttr.js

preview

npm License Known Vulnerabilities License

Cuttr is a zero dependency, easy to use JS / jQuery library that truncates multiple line text content (Line Clampin’) to fit within given specifications. It adds an ending string like a ellipsis (...) to indicate that there is more text available than currently visible.

  • Multiple truncation methods
  • Truncate text without breaking the HTML
  • Custom ellipsis strings
  • Optional "Read more" anchor to expand original content

Demos online | Codepen Example


Overview

Install

Download

CDN

Link directly to Cuttr files on unpkg.

<script src="https://unpkg.com/cuttr@1/dist/cuttr.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/cuttr@1/dist/cuttr.js"></script>

Link directly to Cuttr files on cdnjs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/cuttr/1.4.3/cuttr.min.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cuttr/1.4.3/cuttr.js"></script>

Package managers

npm

npm install cuttr -D

yarn

yarn add cuttr -D

bower

bower install d-e-v-s-k/cuttr-js --save

License

Commercial license

If you want to use Cuttr to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. [Purchase a Cuttr Commercial License]

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Cuttr under the terms of the GPLv3.

The credit comments in the JavaScript files should be kept intact (even after combination or minification).

Read more about Cuttr's licenses.

Usage

As you can see in the example files, you will need to include:

  • The JavaScript file cuttr.js (or its minified version cuttr.min.js)

Including files:

<script type="text/javascript" src="cuttr.js"></script>

Or as a module

import Cuttr from 'Cuttr';

Initialization

Initialization with Vanilla Javascript

All you need to do is call cuttr.js before the closing </body> tag.

new Cuttr('.element', {
    //options here
    truncate: 'words',
    length: 12
});

Initialization with jQuery

You can use cuttr.js also as a jQuery plugin if you want to!

$(document).ready(function() {
    $('.element').Cuttr({
        //options here
        truncate: 'words',
        length: 12
    });
});

Options

let truncateElement = new Cuttr( '.container', {
    // DEFAULTS LISTED

    licenseKey: 'YOUR_KEY_HERE',
    // this option is compulsory 
    // use the license key provided on the purchase of the Cuttr Commercial License
    // if your project is open source and it is compatible with the GPLv3 license you can request a license key
    // please read more about licenses here https://github.com/d-e-v-s-k/cuttr-js#license
    
    truncate: 'characters',
    // Truncate method
    // How to truncate the text
    // ['characters'|'words'|'sentences']
    
    length: 100,
    // Truncation limit
    // After how much [characters|words|sentences] should the text be truncated
    // note: character truncation also counts html characters
    
    ending: '...',
    // Truncation ending string
    
    loadedClass: 'cuttr--loaded',
    // Class to set on truncated element when truncation finished

    title: false,
    // add original, full content to elements title attribute
    // [true|false]
    
    readMore: false,
    // enables / disables the "read more" button
    // [true|false]
    
    readMoreText: 'Read more',
    // text to show as "Read more" button to show full content
    
    readLessText: 'Read less',
    // text to show as "Read less" button to show truncated content
    
    readMoreBtnPosition: 'after',
    // "Read more" button position
    // ['after'|'inside']
    // 'after' = button will be appended after the truncated element
    // 'inside' = button will be appended inside the truncated element, at the end of the truncated content
    
    readMoreBtnTag: 'button',
    // "Read-more" button HTML tag
    //  ['button'|'a'|...]
    
    readMoreBtnSelectorClass: 'cuttr__readmore',
    // "Read-more" button class selector
    
    readMoreBtnAdditionalClasses: '',
    // "Read-more" button additional classes to be added
})

Methods

Each plugin instance comes with some public methods to call. See them in action inside the examples folder at methods.html.

Example Initialization:

let truncateElement = new Cuttr('.element', {
    //options here
    truncate: 'words',
    length: 12
});

After the plugin is fired, a series of methods are available.

expandContent()

Expands the given instance content.

truncateElement.expandContent();

truncateContent()

Truncates the given instance content.

truncateElement.truncateContent();

destroy()

Completely restores the Element to its pre-init state.

truncateElement.destroy();

Method usage with jQuery

In order to access the public methods via jQuery, you need to do it through jQuery's .data() function.

Example:

$(document).ready(function() {
    
    //  Cuttr initialization
    let truncateElement = $('.element').Cuttr({
        //options here
        truncate: 'words',
        length: 12
    });

    //  access html element's prototype via jQuery's .data()
    let truncData = truncateElement.data('Cuttr');
    //  call Cuttr method
    truncData.expandContent();
    
});

Callbacks

Each plugin instance provides some callbacks. See them in action inside the examples folder at callbacks.html.

At plugin initialization, a series of callbacks are available:

afterTruncate()

Callback fired once the original content has been truncated.

let truncateElement = new Cuttr('.element', {
    //options here
    truncate: 'words',
    length: 12,
    
    //  callbacks
    afterTruncate: function(){
        let truncateElement = this;
        console.log(this);
        alert('"afterTruncate" callback fired!');
    }
});

afterExpand()

Callback fired once the original content has been expanded.

let truncateElement = new Cuttr('.element', {
    //options here
    truncate: 'words',
    length: 12,
    
    //  callbacks
    afterExpand: function(){
        let truncateElement = this;
        console.log(this);
        alert('"afterExpand" callback fired!');
    }
});

Demos & Examples

Checkout our demos & examples page

More examples on Codepen:

Development

This project uses Gulp (v4) to minify the JS file. If you are unfamiliar with Gulp, check this tutorial on how to get started.
Run gulp in the command-line to put out a build on the files.

Browser support

The Cuttr javascript / jQuery string truncation plugin targets modern browsers that support ES5, meaning Internet Explorer 10 and earlier are not supported, but with IE11 and above you are fine.


Created and maintained by DEVSK.

cuttr-js's People

Contributors

19gerhard85 avatar d-e-v-s-k avatar dependabot[bot] avatar skrsm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

cuttr-js's Issues

Can't install via yarn

$ yarn add cuttr --save

yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
error /srv/project/node_modules/cuttr: Command failed.
Exit code: 1
Command: npx npm-force-resolutions
Arguments: 
Directory: /srv/project/node_modules/cuttr
Output:
npx: Installierte 6 in 2.477s
Error: ENOENT: no such file or directory, open './package-lock.json'
    at Object.openSync (fs.js:498:3)
    at Object.fs [as readFileSync] (fs.js:394:35)
    at npm_force_resolutions$core$node_slurp (/home/user/.npm/_npx/43287/lib/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:15:20)
    at npm_force_resolutions$core$read_json (/home/user/.npm/_npx/43287/lib/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:22:23)
    at switch__2144__auto__ (/home/user/.npm/_npx/43287/lib/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:151:3)
    at /home/user/.npm/_npx/43287/lib/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.cljs:151:3
    at npm_force_resolutions$core$update_package_lock_$_state_machine__2145__auto____1 (/home/user/.npm/_npx/43287/lib/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.js:648:4)
    at cljs.core.async.impl.ioc-helpers/FN-IDX (/home/user/.npm/_npx/43287/lib/node_modules/npm-force-resolutions/out/npm_force_resolutions/core.js:664:88)
    at cljs.core.async.impl.ioc-helpers/run-state-machine (/home/user/.npm/_npx/43287/lib/node_modules/npm-force-resolutions/out/cljs/core/async/impl/ioc_helpers.cljs:35:23)
    at cljs$core$async$impl$ioc_helpers$run_state_machine_wrapped (/home/user/.npm/_npx/43287/lib/node_modules/npm-force-resolutions/out/

yarn version: 1.22.19

Taking an extra word when it should just end the paragraph.

To have a better understanding of this issue here's an example where I set to cut at 100 WORDS and it for some reason doesn't end that paragraph (maybe even OK since there we have 100 words) but if I want one more word, it takes it and one extra word.

https://codepen.io/hrusticn/pen/QWBQXRZ

Please see now that it truncates at 101, and It starts with "In....."

once I change the word count to 100, It should just end the previous paragraph (take a look at the source html) but it doesn't do that, it cuts less so I'm missing now one word before cutting the paragraph. Then it ends with "Miami and South...." so the last word (Beach) isn't included.

Just toggle between 100 and 101 and you will see that I can't ever finish with only that paragraph, either I'm missing "Beach" when set to 100 or I'm getting one extra word (from the next paragraph) and that's the "In..."

It's not a solution for me to put those two paragraphs inside one paragraph because I have endless examples where I want to end at that paragraph and not at the next, so I can't go from article to article to put them in the same one, it's not an option.
Maybe there's some option that I didn't pay attention but It might be a bug as well.

Thanks !

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.