add tilesOptions (#10)

you can choose now between tooltip and element or both
nextcloud · Apr 17, 2016 · c1e86c6 · c1e86c6
1 parent 78f8272
commit c1e86c6
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 14 deletions.
diff --git 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
@@ -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
@@ -54,3 +54,7 @@
 div[data-strengthifyMessage] {
     padding: 3px 8px;
 }
+
+.strengthify-tiles{
+	float: right;
+}