diff options
| author | Patrick <patrick@feirer.me> | 2016-04-17 21:48:32 +0300 |
|---|---|---|
| committer | Morris Jobke <hey@morrisjobke.de> | 2016-04-17 21:48:32 +0300 |
| commit | c1e86c63ec7ebe75d2a1ad86668cced5d944535e (patch) | |
| tree | b1fc7bcee6ec793096f76c1cb815fcb2a9bfc2a2 | |
| parent | 78f827220d9364194561f3c74111a9bda27e8eb7 (diff) | |
add tilesOptions (#10)
you can choose now between tooltip and element or both
| -rw-r--r-- | examples.html | 30 | ||||
| -rw-r--r-- | jquery.strengthify.js | 42 | ||||
| -rw-r--r-- | strengthify.css | 4 |
3 files changed, 62 insertions, 14 deletions
diff --git a/examples.html b/examples.html index 0e69646..a21dfb9 100644 --- a/examples.html +++ b/examples.html @@ -48,6 +48,14 @@ <label for="p8">drawTitles</label> <input id="p8" class="password-field-only-title"> </div> + <div class="password-group"> + <label for="p9">drawTitlesWithoutTooltip</label> + <input id="p9" class="password-field-title-without-tooltip"> + </div> + <div class="password-group"> + <label for="p10">drawTitlesTooltipAndElement</label> + <input id="p10" class="password-field-title-tooltip-element"> + </div> <script type="text/javascript"> $('.password-field').strengthify({ zxcvbn: 'https://cdn.rawgit.com/dropbox/zxcvbn/master/dist/zxcvbn.js' @@ -85,6 +93,28 @@ drawMessage: false, drawBars: false }) + $('.password-field-title-without-tooltip').strengthify({ + zxcvbn: 'https://cdn.rawgit.com/dropbox/zxcvbn/master/dist/zxcvbn.js', + tilesOptions:{ + tooltip: false, + element: true + }, + drawTitles: true, + drawMessage: false, + drawBars: true + }) + $('.password-field-title-tooltip-element').strengthify({ + zxcvbn: 'https://cdn.rawgit.com/dropbox/zxcvbn/master/dist/zxcvbn.js', + tilesOptions:{ + tooltip: true, + element: true + }, + drawTitles: true, + drawMessage: false, + drawBars: false + }) + + </script> </body> </html> diff --git a/jquery.strengthify.js b/jquery.strengthify.js index c61e97d..1939249 100644 --- a/jquery.strengthify.js +++ b/jquery.strengthify.js @@ -45,6 +45,10 @@ 'Good', 'Perfect' ], + tilesOptions:{ + tooltip: true, + element: false + }, drawTitles: false, drawMessage: false, drawBars: true @@ -139,22 +143,28 @@ if (options.drawTitles) { // set a title for the wrapper - $wrapper.attr( - 'title', - options.titles[result.score] - ).tooltip({ - placement: 'bottom', - trigger: 'manual', - }).tooltip( - 'fixTitle' - ).tooltip( - 'show' + if(options.tilesOptions.tooltip){ + $wrapper.attr( + 'title', + options.titles[result.score] + ).tooltip({ + placement: 'bottom', + trigger: 'manual', + }).tooltip( + 'fixTitle' + ).tooltip( + 'show' ); - if (opacity === 0) { - $wrapper.tooltip( - 'hide' - ); + if (opacity === 0) { + $wrapper.tooltip( + 'hide' + ); + } + } + + if(options.tilesOptions.element){ + $wrapper.find(".strengthify-tiles").text(options.titles[result.score]); } } }; @@ -180,6 +190,10 @@ getWrapperFor(elemId).append('<div data-strengthifyMessage></div>'); } + if (options.drawTitles && options.tilesOptions) { + getWrapperFor(elemId).append('<div class="strengthify-tiles"></div>'); + } + $elem.parent().on('scroll', drawSelf); $.ajax({ diff --git a/strengthify.css b/strengthify.css index 0c686e5..e7073e1 100644 --- a/strengthify.css +++ b/strengthify.css @@ -54,3 +54,7 @@ div[data-strengthifyMessage] { padding: 3px 8px; } + +.strengthify-tiles{ + float: right; +}
\ No newline at end of file |