Converted password element to use main progress bar layout and jLayou…

…ts, instead of hard coding class names in the JS
keianrad · Dec 19, 2016 · 5a62ac0 · 5a62ac0
1 parent 3bcafe5
commit 5a62ac0
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 19 deletions.
diff --git a/components/com_fabrik/layouts/fabrik-progress-bar.php b/components/com_fabrik/layouts/fabrik-progress-bar.php
@@ -11,6 +11,8 @@
 $klass = '';
 
 $stripped = isset($d->stripped) && $d->stripped === true ? 'progress-striped': '';
+$extraClass = isset($d->extraClass) ? $d->extraClass : '';
+$extraStyle = isset($d->extraStyle) ? $d->extraStyle : '';
 $animated = isset($d->animated) && $d->animated === true ? 'active' : '';
 $value = isset($d->value) ? (int) $d->value : 0;
 
@@ -33,6 +35,6 @@
 }
 
 ?>
-<div class="progress <?php echo $stripped;?>">
+<div class="progress <?php echo $stripped;?> <?php echo $extraClass;?>" style="<?php echo $extraStyle; ?>">
 	<div class="bar <?php echo $klass;?> <?php echo $animated;?>" style="width: <?php echo $value;?>%;"></div>
 </div>
diff --git a/plugins/fabrik_element/password/password-min.js b/plugins/fabrik_element/password/password-min.js
diff --git a/plugins/fabrik_element/password/password.js b/plugins/fabrik_element/password/password.js
@@ -68,33 +68,33 @@ define(['jquery', 'fab/element'], function (jQuery, FbElement) {
                 } else {
                     html = '<span style="color:red">' + Joomla.JText._('PLG_ELEMENT_PASSWORD_WEAK') + '</span>';
                 }
+	            strength.set('html', html);
             } else {
                 // Bootstrap progress bar
-                html += '<div class="bar bar-warning" style="width: 10%;"></div>';
-                var tipTitle = Joomla.JText._('PLG_ELEMENT_PASSWORD_MORE_CHARACTERS');
-                if (enoughRegex.test(pwd.value)) {
-                    html = '<div class="bar bar-info" style="width: 30%;"></div>';
-                    tipTitle = Joomla.JText._('PLG_ELEMENT_PASSWORD_WEAK');
+                var tipTitle = '', newBar;
+                if (strongRegex.test(pwd.value)) {
+	                tipTitle = Joomla.JText._('PLG_ELEMENT_PASSWORD_STRONG');
+	                newBar = jQuery(Fabrik.jLayouts['fabrik-progress-bar-strong']);
                 }
-                if (mediumRegex.test(pwd.value)) {
-                    html = '<div class="bar bar-info" style="width: 70%;"></div>';
+                else if (mediumRegex.test(pwd.value)) {
                     tipTitle = Joomla.JText._('PLG_ELEMENT_PASSWORD_MEDIUM');
+	                newBar = jQuery(Fabrik.jLayouts['fabrik-progress-bar-medium']);
                 }
-                if (strongRegex.test(pwd.value)) {
-                    html = '<div class="bar bar-success" style="width: 100%;"></div>';
-                    tipTitle = Joomla.JText._('PLG_ELEMENT_PASSWORD_STRONG');
+	            else if (enoughRegex.test(pwd.value)) {
+		            tipTitle = Joomla.JText._('PLG_ELEMENT_PASSWORD_WEAK');
+		            newBar = jQuery(Fabrik.jLayouts['fabrik-progress-bar-weak']);
+	            }
+                else {
+	                tipTitle = Joomla.JText._('PLG_ELEMENT_PASSWORD_MORE_CHARACTERS');
+	                newBar = jQuery(Fabrik.jLayouts['fabrik-progress-bar-more']);
+
                 }
                 var options = {
                     title: tipTitle
                 };
-                try {
-                    jQuery(strength).tooltip('destroy');
-                } catch (e) {
-                    console.log(e);
-                }
-                jQuery(strength).tooltip(options);
+                jQuery(newBar).tooltip(options);
+                jQuery(strength).replaceWith(newBar);
             }
-            strength.set('html', html);
         },
 
         getConfirmationField: function () {

diff --git a/plugins/fabrik_element/password/password.php b/plugins/fabrik_element/password/password.php
@@ -87,6 +87,51 @@ public function render($data, $repeatCounter = 0)
 			return '***********';
 		}
 
+		FabrikHelperHTML::jLayoutJs(
+			'fabrik-progress-bar-strong',
+			'fabrik-progress-bar',
+			(object) array(
+				'context' => 'success',
+				'value' => 100,
+				'stripped' => true,
+				'extraClass' => 'strength',
+				'extraStyle' => 'margin-top:20px;width:40%;'
+			)
+		);
+		FabrikHelperHTML::jLayoutJs(
+			'fabrik-progress-bar-medium',
+			'fabrik-progress-bar',
+			(object) array(
+				'context' => 'info',
+				'value' => 70,
+				'stripped' => true,
+				'extraClass' => 'strength',
+				'extraStyle' => 'margin-top:20px;width:40%;'
+			)
+		);
+		FabrikHelperHTML::jLayoutJs(
+			'fabrik-progress-bar-weak',
+			'fabrik-progress-bar',
+			(object) array(
+				'context' => 'info',
+				'value' => 30,
+				'stripped' => true,
+				'extraClass' => 'strength',
+				'extraStyle' => 'margin-top:20px;width:40%;'
+			)
+		);
+		FabrikHelperHTML::jLayoutJs(
+			'fabrik-progress-bar-more',
+			'fabrik-progress-bar',
+			(object) array(
+				'context' => 'warning',
+				'value' => 10,
+				'stripped' => true,
+				'extraClass' => 'strength',
+				'extraStyle' => 'margin-top:20px;width:40%;'
+			)
+		);
+
 		$bits                = $this->inputProperties($repeatCounter, 'password');
 		$bits['value']       = $value;
 		$bits['placeholder'] = FText::_('PLG_ELEMENT_PASSWORD_TYPE_PASSWORD');