Upgrade to release v1.1.2

kartik-v · Jul 14, 2015 · 9a91741 · 9a91741
1 parent edc0104
commit 9a91741
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 90 deletions.
diff --git a/CHANGE.md b/CHANGE.md
@@ -1,9 +1,9 @@
 version 1.1.2
 =============
-**Date:** 18-Jun-2015
+**Date:** 14-Jul-2015
 
-1. (bug #6): Correct input type change on toggle.
-2. (enh #7): Ability to configure multi-lang plugins on same page (new `language` property).
+1. (enh #7): Add ability to configure multi-language widgets on same page.
+2. (enh #8): New `inputNoToggleTemplate` for non toggle mask inputs.
 
 version 1.1.1
 =============

diff --git a/README.md b/README.md
@@ -41,11 +41,11 @@ You can use the `bower` package manager to install. Run:
 ### Using Composer
 You can use the `composer` package manager to install. Either run:
 
-    $ php composer.phar require kartik-v/strength-meter "@dev"
+    $ php composer.phar require kartik-v/strength-meter "dev-master"
 
 or add:
 
-    "kartik-v/strength-meter": "@dev"
+    "kartik-v/strength-meter": "dev-master"
 
 to your composer.json file
 
@@ -58,20 +58,20 @@ You can also manually install the plugin easily to your project. Just download t
 Step 1: Load the following assets in your header. 
 
 ```html
-<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
-<link href="path/to/css/strength-meter.min.css" media="all" rel="stylesheet" type="text/css" />
+<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
+<link href="path/to/css/star-strength.min.css" media="all" rel="stylesheet" type="text/css" />
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-<script src="path/to/js/strength-meter.min.js" type="text/javascript"></script>
+<script src="path/to/js/star-strength.min.js" type="text/javascript"></script>
 ```
 
-If you noticed, you need to load the `jquery.min.js` and `bootstrap.min.css` in addition to the `strength-meter.min.css` and `strength-meter.min.js`. 
+If you noticed, you need to load the `jquery.min.js` and `bootstrap.min.css` in addition to the `star-strength.min.css` and `star-strength.min.js`. 
 
 *Note:* You can skip the `bootstrap.min.css` if you do not need Bootstrap 3.x styling.  To use your own style, you need to setup the `inputTemplate`, `meterTemplate`, and `mainTemplate` options to match your CSS Styling needs.
 
 In addition, you can load a locale specific script for your language specific translation. For example to load German translations:
 
 ```html
-<script src="path/to/js/locales/strength-meter-de.js" type="text/javascript"></script>
+<script src="path/to/js/locales/star-strength-de.js" type="text/javascript"></script>
 ```
 
 Step 2: Initialize the plugin on your page. For example,
@@ -98,7 +98,7 @@ Alternatively, you can directly call the plugin options by setting data attribut
 The plugin supports these following options:
 
 ### language
-_string_ language configuration for the plugin to enable the plugin to display messages for your locale (you must set the ISO code for the language). You can have multiple language widgets on the same page. Note you must load the language specific locale file `strength-meter-<LANG>.js` available in the `js/locales` folder of the plugin. The file must be loaded after `strength-meter.js`.
+_string_ language configuration for the plugin to enable the plugin to display messages for your locale (you must set the ISO code for the language). This setting also allows you to have multiple language widgets on the same page. The locale JS file for the language code must be defined as mentioned in the translations section. The file must be loaded after `strength-meter.js`.
 
 #### showMeter
 _boolean_ whether the strength meter is to be displayed. Defaults to `true`.
@@ -107,18 +107,31 @@ _boolean_ whether the strength meter is to be displayed. Defaults to `true`.
 _boolean_ whether to display the checkbox for toggling display of password text. Defaults to `true`.
 
 #### inputTemplate
-_string_ the template for displaying the password input field. This defaults to:
+_string_ the template for displaying the password input field (when `toggleMask` is `true`). This defaults to:
+
+```
+<div class="input-group">
+    {input}
+    <span class="input-group-addon">{toggle}</span>
+</div>
+```
 
-    <div class="input-group">
-        {input}
-        <span class="input-group-addon">{toggle}</span>
-    </div>
-
 The following special variables will be replaced in the template:
 
 - `{input}` will be replaced with the password input 
 - `{toggle}` will be replaced with the toggle mask checkbox.
 
+#### inputNoToggleTemplate
+_string_ the template for displaying the password input field (when `toggleMask` is `false`). This defaults to:
+
+```
+{input}
+```
+
+The following special variables will be replaced in the template:
+
+- `{input}` will be replaced with the password input.
+
 #### meterTemplate
 _string_ the template for displaying the password strength meter. This defaults to:
 
@@ -289,4 +302,4 @@ alert($('#password-id').strength('verdict'));
 
 ## License
 
-**strength-meter** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.
+**strength-meter** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.
diff --git a/css/strength-meter.css b/css/strength-meter.css
@@ -72,4 +72,4 @@
 
 .kv-verdict {
     width: 100%;
-}
+}
diff --git a/js/locales/strength-meter-de.js b/js/locales/strength-meter-de.js
@@ -1,13 +1,12 @@
 /**
- * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
- * @version 1.1.2
  * Strength Meter German translation.
  * This file must be saved in UTF-8 encoding.
+ * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
  */
 (function ($) {
     "use strict";
 
-    $.fn.strengthLocales['de'] =  {
+    $.fn.strengthLocales['de'] = {
         toggleTitle: 'Passwort anzeigen / ausblenden',
         verdictTitles: {
             0: 'zu kurz',

diff --git a/js/locales/strength-meter-fr.js b/js/locales/strength-meter-fr.js
@@ -1,8 +1,7 @@
 /**
- * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
- * @version 1.1.2
  * Strength Meter French translation.
  * This file must be saved in UTF-8 encoding.
+ * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
  */
 (function ($) {
     "use strict";

diff --git a/js/locales/strength-meter-it.js b/js/locales/strength-meter-it.js
@@ -1,8 +1,7 @@
 /**
- * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
- * @version 1.1.2
  * Strength Meter Italian translation.
  * This file must be saved in UTF-8 encoding.
+ * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
  */
 (function ($) {
     "use strict";

diff --git a/js/locales/strength-meter-nl.js b/js/locales/strength-meter-nl.js
@@ -1,8 +1,7 @@
 /**
- * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
- * @version 1.1.2
  * Strength Meter Dutch translation.
  * This file must be saved in UTF-8 encoding.
+ * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
  */
 (function ($) {
     "use strict";

diff --git a/js/locales/strength-meter-pt-BR.js b/js/locales/strength-meter-pt-BR.js
@@ -1,8 +1,7 @@
 /**
- * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
- * @version 1.1.2
- * Strength Meter Portugese Brazilian translation.
+ * Strength Meter German translation.
  * This file must be saved in UTF-8 encoding.
+ * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
  */
 (function ($) {
     "use strict";

diff --git a/js/locales/strength-meter-ru.js b/js/locales/strength-meter-ru.js
@@ -1,12 +1,10 @@
 /**
- * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
- * @version 1.1.2
  * Strength Meter Russian translation.
  * This file must be saved in UTF-8 encoding.
+ * @copyright &copy; Kartik Visweswaran, Krajee.com, 2015
  */
 (function ($) {
     "use strict";
-
     $.fn.strengthLocales['ru'] = {
         toggleTitle: 'Показать / Скрыть пароль',
         verdictTitles: {

diff --git a/js/strength-meter.js b/js/strength-meter.js
@@ -15,7 +15,7 @@
  */
 (function ($) {
     "use strict";
-
+    
     $.fn.strengthLocales = {};
 
     String.prototype.strReverse = function () {
@@ -30,6 +30,9 @@
         },
         isEmpty = function (value, trim) {
             return value === null || value === undefined || value.length === 0 || trim && $.trim(value) === '';
+        },
+        replaceField = function ($fld, typ) {
+            $fld.clone(true).attr('type', typ).insertAfter($fld).prev().remove();
         };
     // determine verdict index based on overall score
     var getVerdict = function (nScore) {
@@ -241,13 +244,6 @@
                 self[key] = val;
             }
         },
-        // sets input type
-        setType: function (typ) {
-            var self = this, $fld = self.$element, $newFld = $fld.clone(true);
-            $newFld.attr('type', typ).insertAfter($fld);
-            $fld.remove();
-            self.$element = $newFld;
-        },
         // generates the HTML markup for all verdicts
         generateVerdicts: function () {
             var self = this, v = [], i;
@@ -295,13 +291,13 @@
             var self = this, nScore = getScore(self.initialValue, self.rules);
             self.$elScoreInput.val(nScore);
             self.paint(nScore);
-            self.setType('password');
+            replaceField(self.$element, 'password');
             self.$element.trigger('strength.reset');
         },
         // update password toggle mask
         toggle: function () {
             var self = this, inputType = self.$elToggle.is(":checked") ? 'text' : 'password';
-            self.setType(inputType);
+            replaceField(self.$element, inputType);
             self.$element.trigger('strength.toggle');
         },
         // current strength score
@@ -315,45 +311,40 @@
         },
         // creates the widget container
         createContainer: function () {
-            var self = this;
-            var output = self.mainTemplate;
-            output = output.replace('{input}', self.renderInput());
-            output = output.replace('{meter}', self.renderMeter());
-            var container = $(document.createElement("div")).attr({"class": self.containerClass}).html(output);
-            self.$element.before(container);
-            var holder = container.find('.kv-temporary-input');
-            var el = self.$element.detach();
-            holder.before(el);
-            holder.remove();
-            return container;
+            var self = this, output = self.mainTemplate, $container, $el;
+            output = output.replace('{input}', self.renderInput()).replace('{meter}', self.renderMeter());
+            $container = $(document.createElement("div")).addClass(self.containerClass).html(output);
+            self.$element.before($container);
+            $el = self.$element.detach();
+            $container.find('.kv-temporary-input').before($el).remove();
+            return $container;
         },
         // render toggle mask
         renderToggle: function () {
-            var self = this;
-            if (self.toggleMask) {
-                var disabled = self.$element.attr('disabled') ? ' disabled="true"' : '';
-                var readonly = self.$element.attr('readonly') ? ' readonly="true"' : '';
-                return '<input type="checkbox" tabindex=10000 class="' + self.toggleClass +
-                '" title="' + self.toggleTitle + '"' + disabled + readonly + '>';
-            }
-            return '';
+            var self = this,
+                disabled = self.$element.attr('disabled') ? ' disabled="true"' : '',
+                readonly = self.$element.attr('readonly') ? ' readonly="true"' : '';
+            return '<input type="checkbox" tabindex=10000 class="' + self.toggleClass +
+            '" title="' + self.toggleTitle + '"' + disabled + readonly + '>';
         },
         // render password input
         renderInput: function () {
-            var self = this, output = self.inputTemplate;
+            var self = this, output = self.toggleMask ? self.inputTemplate : self.inputNoToggleTemplate;
             self.$element.removeClass(self.inputClass).addClass(self.inputClass);
             output = output.replace('{input}', '<div class="kv-temporary-input"></div>');
-            output = output.replace('{toggle}', self.renderToggle());
+            if (self.toggleMask) {
+                output = output.replace('{toggle}', self.renderToggle());
+            }
             return output;
         },
         // render strength meter
         renderMeter: function () {
-            var self = this, output = self.meterTemplate;
+            var self = this, output = self.meterTemplate, css;
             if (self.showMeter) {
-                output = output.replace('{scorebar}', '<div class="' + self.scoreBarClass + '"></div>');
-                output = output.replace('{score}', '<div class="' + self.scoreClass + '"></div>');
-                output = output.replace('{verdict}', '<div class="' + self.verdictClass + '"></div>');
-                var css = self.$element.attr('disabled') ? self.meterClass + ' kv-disabled' : self.meterClass;
+                output = output.replace('{scorebar}', '<div class="' + self.scoreBarClass + '"></div>')
+                    .replace('{score}', '<div class="' + self.scoreClass + '"></div>')
+                    .replace('{verdict}', '<div class="' + self.verdictClass + '"></div>');
+                css = self.$element.attr('disabled') ? self.meterClass + ' kv-disabled' : self.meterClass;
                 return '<div class="' + css + '">' + output + '</div>';
             }
             return '';
@@ -364,7 +355,8 @@
         var args = Array.apply(null, arguments), retval = null;
         args.shift();
         this.each(function () {
-            var $this = $(this), data = $this.data('strength'), defaults,
+            var $this = $(this), defaults,
+                data = $this.data('strength'),
                 options = typeof option === 'object' && option,
                 lang = options.language || $this.data('language') || 'en';
 
@@ -385,12 +377,13 @@
         }
         return retval;
     };
-    
+
     $.fn.strength.defaults = {
         language: 'en',
         showMeter: true,
         toggleMask: true,
         inputTemplate: '<div class="input-group">\n{input}\n<span class="input-group-addon">{toggle}</span>\n</div>',
+        inputNoToggleTemplate: '{input}',
         meterTemplate: '<div class="kv-scorebar-border">{scorebar}\n{score}</div>\n{verdict}',
         mainTemplate: '<table class="kv-strength-container"><tr>\n<td>{input}</td>\n<td class="kv-meter-container">{meter}</td>\n</tr></table>',
         meterClass: 'kv-meter',
@@ -400,15 +393,6 @@
         containerClass: 'kv-password',
         inputClass: 'form-control',
         toggleClass: 'kv-toggle',
-        toggleTitle: 'Show/Hide Password',
-        verdictTitles: {
-            0: 'Too Short',
-            1: 'Very Weak',
-            2: 'Weak',
-            3: 'Good',
-            4: 'Strong',
-            5: 'Very Strong'
-        },
         verdictClasses: {
             0: 'label label-default',
             1: 'label label-danger',
@@ -431,6 +415,20 @@
         }
     };
 
+    $.fn.strengthLocales.en = {
+        toggleTitle: 'Show/Hide Password',
+        verdictTitles: {
+            0: 'Too Short',
+            1: 'Very Weak',
+            2: 'Weak',
+            3: 'Good',
+            4: 'Strong',
+            5: 'Very Strong'
+        }
+    };
+
+    $.extend($.fn.strength.defaults, $.fn.strengthLocales.en);
+
     $.fn.strength.Constructor = Strength;
 
     /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,4 +72,4 @@ @@
     .kv-verdict {
         width: 100%;
-    }
+    }