ls-view-text-count - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

@@ -1,32 +0,33 @@
-    {
-        "name": "ls-view-text-count",
-        "version": "v1.0.0",
-        "private": false,
-        "main": "src/count.js",
-        "description": "Litespeed.js view component that adds a word counter to your input elements.",
-        "homepage": "https://github.com/litespeed-js/ls-view-text-count",
-        "bugs": "https://github.com/litespeed-js/ls-view-text-count/issues",
-        "license": "MIT",
-        "jsdelivr": "src/count.js",
-        "repository": {
-            "type": "git",
-            "url": "https://github.com/litespeed-js/ls-view-text-count.git"
-        },
-        "keywords": [
-            "litespeed",
-            "framework",
-            "lite",
-            "speed",
-            "lightspeed",
-            "light",
-            "javascript"
-        ],
-        "dependencies": {},
-        "devDependencies": {
-            "litespeed.js": "0.3.3",
-            "jest": "^24.8.0"
-        },
-        "scripts": {
-            "test": "jest tests"
-        }
-    }
+{
+    "name": "ls-view-text-count",
+    "version": "v1.0.1",
+    "private": false,
+    "main": "src/count.js",
+    "description": "Litespeed.js view component that adds a word counter to your input elements.",
+    "homepage": "https://github.com/litespeed-js/ls-view-text-count",
+    "bugs": "https://github.com/litespeed-js/ls-view-text-count/issues",
+    "license": "MIT",
+    "jsdelivr": "src/count.js",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/litespeed-js/ls-view-text-count.git"
+    },
+    "keywords": [
+        "litespeed",
+        "framework",
+        "lite",
+        "speed",
+        "lightspeed",
+        "light",
+        "javascript"
+    ],
+    "dependencies": {
+        "litespeed.js": "^0.3.6"
+    },
+    "devDependencies": {
+        "jest": "^24.8.0"
+    },
+    "scripts": {
+        "test": "jest tests"
+    }
+}

README.md

@@ -5,3 +5,3 @@ # ls-view-text-count
 [![npm version](https://badge.fury.io/js/ls-view-text-count.svg)](https://badge.fury.io/js/ls-view-text-count)
-[![Build Status](https://travis-ci.org/litespeed-js/litespeed.js.svg?branch=master)](https://travis-ci.org/litespeed-js/ls-view-text-count)
+[![Build Status](https://travis-ci.org/litespeed-js/ls-view-text-count.svg?branch=master)](https://travis-ci.org/litespeed-js/ls-view-text-count)
 [![Chat With Us](https://img.shields.io/gitter/room/litespeed-js/community.svg)](https://gitter.im/litespeed-js/community?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
@@ -26,2 +26,30 @@
 
+## Getting Started
+
+When input maxlength attribute is defined, the counter will show remaining chars left until the limit is going to be reached. When no maxlength attribute is set, the counter will just count how many word and chars have been written.
+
+### Example 1
+
+Setting with maxlength attribute:
+```html
+<input type="text" value="Hello World!" maxlength="20" data-ls-text-count />
+```
+
+Result:
+```html
+<input type="text" value="Hello World!" maxlength="20"><span class="ls-view-text-count">8 / 20</span>
+```
+
+### Example 2
+
+Setting without maxlength attribute:
+```html
+<input type="text" value="Hello World!" data-ls-text-count />
+```
+
+Output:
+```html
+<input type="text" value="Hello World!"><span class="ls-view-text-count">2 words and 12 chars</span>
+```
+
 ## Contributing
@@ -28,0 +56,0 @@

src/count.js

@@ -9,5 +9,5 @@ (function (window) {
             controller: function (element) {
-                var counter = document.createElement('span');
+                let counter = document.createElement('span');
 
-                counter.className = 'counter';
+                counter.className = 'ls-view-text-count';
 
@@ -17,8 +17,10 @@ element.parentNode.insertBefore(counter, element.nextSibling);
                 var count = function () {
-                    if (0 <= element.maxLength) {
-                        counter.innerText = (element.maxLength - element.value.length).toString() + ' / ' + element.maxLength;
+                    let max = parseInt(element.getAttribute('maxlength'));
+                    
+                    if (0 <= max) {
+                        counter.textContent = (max - element.value.length).toString() + ' / ' + max;
                     }
                     else {
-                        var words = (element.value !== '') ? element.value.trim().split(' ').length : 0;
-                        counter.innerText = words + ' words and ' + element.value.length.toString() + ' chars';
+                        let words = (element.value !== '') ? element.value.trim().split(' ').length : 0;
+                        counter.textContent = words + ' words and ' + element.value.length.toString() + ' chars';
                     }
@@ -25,0 +27,0 @@ };

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6901

increased by64.27%

Dev dependency count

1

decreased by-50%

Number of package files

6

increased by50%

Lines of code

50

increased by78.57%

Number of lines in readme file

64

increased by77.78%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedlitespeed.js@^0.3.6

• + Addedlitespeed.js@0.3.12(transitive)