Merge pull request #25 from domProjects/master

JS code change with Google guide recommendations

dist/assets/js/core.js

@@ -1,37 +1,45 @@
-var hexToRgba = function(hex, opacity) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    var rgb = result ? {
+/**
+ *
+ */
+let hexToRgba = function(hex, opacity) {
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let rgb = result ? {
     r: parseInt(result[1], 16),
     g: parseInt(result[2], 16),
     b: parseInt(result[3], 16)
   } : null;
 
-    return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', '+ opacity + ')';
+  return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + opacity + ')';
 };
 
-$(document).ready(function () {
+/**
+ *
+ */
+$(document).ready(function() {
+  /** Constant div card */
+  const DIV_CARD = 'div.card';
 
-    // Initialize tooltips
+  /** Initialize tooltips */
   $('[data-toggle="tooltip"]').tooltip();
 
-    // Initialize popovers
+  /** Initialize popovers */
   $('[data-toggle="popover"]').popover({
     html: true
   });
 
-    // Function for remove card
-    $('[data-toggle="card-remove"]').on('click', function (e) {
-        var $card = $(this).closest('div.card');
+  /** Function for remove card */
+  $('[data-toggle="card-remove"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);
+
     $card.remove();
 
     e.preventDefault();
     return false;
   });
 
-    // Function for collapse card
-    $('[data-toggle="card-collapse"]').on('click', function (e) {
-        var $this = $(this),
-            $card = $this.closest('div.card');
+  /** Function for collapse card */
+  $('[data-toggle="card-collapse"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);
 
     $card.toggleClass('card-collapsed');
 
@@ -39,9 +47,9 @@ $(document).ready(function () {
     return false;
   });
 
-    // Function for fullscreen card
+  /** Function for fullscreen card */
   $('[data-toggle="card-fullscreen"]').on('click', function(e) {
-        var $card = $(this).closest('div.card');
+    let $card = $(this).closest(DIV_CARD);
 
     $card.toggleClass('card-fullscreen').removeClass('card-collapsed');
 
@@ -49,8 +57,9 @@ $(document).ready(function () {
     return false;
   });
 
-    if($('[data-sparkline]').length) {
-        var generateSparkline = function($elem, data, params) {
+  /**  */
+  if ($('[data-sparkline]').length) {
+    let generateSparkline = function($elem, data, params) {
       $elem.sparkline(data, {
         type: $elem.attr('data-sparkline-type'),
         height: '100%',
@@ -66,9 +75,9 @@ $(document).ready(function () {
       });
     };
 
-        require(['sparkline'], function(){
-            $('[data-sparkline]').each(function(){
-                var $chart = $(this);
+    require(['sparkline'], function() {
+      $('[data-sparkline]').each(function() {
+        let $chart = $(this);
 
         generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
           color: $chart.attr('data-sparkline-color')
@@ -77,11 +86,12 @@ $(document).ready(function () {
     });
   }
 
+  /**  */
+  if ($('.chart-circle').length) {
+    require(['circle-progress'], function() {
+      $('.chart-circle').each(function() {
+        let $this = $(this);
 
-    if($('.chart-circle').length) {
-        require(['circle-progress'], function () {
-            $('.chart-circle').each(function () {
-                var $this = $(this);
         $this.circleProgress({
           fill: {
             color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue

dist/form-elements.html

@@ -594,10 +594,10 @@
                     </div>
                     <div class="col-md-6 col-lg-4">
                       <div class="form-group">
-                        <label class="form-label">Radios</label>
+                        <div class="form-label">Radios</div>
                         <div class="custom-controls-stacked">
                           <label class="custom-control custom-radio">
-                            <input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
+                            <input type="radio" class="custom-control-input" name="example-radios" value="option1" checked>
                             <div class="custom-control-label">Option 1</div>
                           </label>
                           <label class="custom-control custom-radio">
@@ -617,57 +617,56 @@
                       <div class="form-group">
                         <div class="form-label">Inline Radios</div>
                         <div class="custom-controls-stacked">
-                          <div class="custom-control custom-radio">
-                            <input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
+                          <label class="custom-control custom-radio">
+                            <input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked>
                             <span class="custom-control-label">Option 1</span>
-                          </div>
-                          <div class="custom-control custom-radio">
+                          </label>
+                          <label class="custom-control custom-radio">
                             <input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
                             <span class="custom-control-label">Option 2</span>
-                          </div>
-                          <div class="custom-control custom-radio">
+                          </label>
+                          <label class="custom-control custom-radio">
                             <input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
                             <span class="custom-control-label">Option 3</span>
-                          </div>
+                          </label>
                         </div>
                       </div>
                       <div class="form-group">
-                        <label class="form-label">Checkboxes</label>
+                        <div class="form-label">Checkboxes</div>
                         <div class="custom-controls-stacked">
-                          <div class="custom-control custom-checkbox">
-                            <input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
-                            <label class="custom-control-label">Option 1</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                          <label class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked>
+                            <span class="custom-control-label">Option 1</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
-                            <label class="custom-control-label">Option 2</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                            <span class="custom-control-label">Option 2</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
-                            <label class="custom-control-label">Option Disabled</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                            <span class="custom-control-label">Option Disabled</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
-                            <label class="custom-control-label">Option Disabled Checked</label>
-                          </div>
+                            <span class="custom-control-label">Option Disabled Checked</span>
+                          </label>
                         </div>
                       </div>
                       <div class="form-group">
                         <div class="form-label">Inline Checkboxes</div>
                         <div class="custom-controls-stacked">
-                          <div class="custom-control custom-checkbox">
-                            <input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
-								   checked="">
-                            <label class="custom-control-label">Option 1</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                          <label class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1" checked>
+                            <span class="custom-control-label">Option 1</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
-                            <label class="custom-control-label">Option 2</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                            <span class="custom-control-label">Option 2</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
-                            <label class="custom-control-label">Option 3</label>
-                          </div>
+                            <span class="custom-control-label">Option 3</span>
+                          </label>
                         </div>
                       </div>
                       <div class="form-group">

src/_includes/cards/form-all-elements.html

@@ -232,10 +232,10 @@
 			</div>
 			<div class="col-md-6 col-lg-4">
 				<div class="form-group">
-					<label class="form-label">Radios</label>
+					<div class="form-label">Radios</div>
 					<div class="custom-controls-stacked">
 						<label class="custom-control custom-radio">
-							<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
+							<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked>
 							<div class="custom-control-label">Option 1</div>
 						</label>
 						<label class="custom-control custom-radio">
@@ -255,57 +255,57 @@
 				<div class="form-group">
 					<div class="form-label">Inline Radios</div>
 					<div class="custom-controls-stacked">
-						<div class="custom-control custom-radio">
-							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
+						<label class="custom-control custom-radio">
+							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked>
 							<span class="custom-control-label">Option 1</span>
-						</div>
-						<div class="custom-control custom-radio">
+						</label>
+						<label class="custom-control custom-radio">
 							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
 							<span class="custom-control-label">Option 2</span>
-						</div>
-						<div class="custom-control custom-radio">
+						</label>
+						<label class="custom-control custom-radio">
 							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
 							<span class="custom-control-label">Option 3</span>
-						</div>
+						</label>
 					</div>
 				</div>
 				<div class="form-group">
-					<label class="form-label">Checkboxes</label>
+					<div class="form-label">Checkboxes</div>
 					<div class="custom-controls-stacked">
-						<div class="custom-control custom-checkbox">
-							<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
+						<label class="custom-control custom-checkbox">
+							<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked>
 							<label class="custom-control-label">Option 1</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
 							<label class="custom-control-label">Option 2</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
 							<label class="custom-control-label">Option Disabled</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
 							<label class="custom-control-label">Option Disabled Checked</label>
-						</div>
+						</label>
 					</div>
 				</div>
 				<div class="form-group">
 					<div class="form-label">Inline Checkboxes</div>
 					<div class="custom-controls-stacked">
-						<div class="custom-control custom-checkbox">
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
-								   checked="">
+								   checked>
 							<label class="custom-control-label">Option 1</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
 							<label class="custom-control-label">Option 2</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
 							<label class="custom-control-label">Option 3</label>
-						</div>
+						</label>
 					</div>
 				</div>
 				<div class="form-group">

src/assets/js/core.js

@@ -1,37 +1,45 @@
-var hexToRgba = function(hex, opacity) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    var rgb = result ? {
+/**
+ *
+ */
+let hexToRgba = function(hex, opacity) {
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let rgb = result ? {
     r: parseInt(result[1], 16),
     g: parseInt(result[2], 16),
     b: parseInt(result[3], 16)
   } : null;
 
-    return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', '+ opacity + ')';
+  return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + opacity + ')';
 };
 
-$(document).ready(function () {
+/**
+ *
+ */
+$(document).ready(function() {
+  /** Constant div card */
+  const DIV_CARD = 'div.card';
 
-    // Initialize tooltips
+  /** Initialize tooltips */
   $('[data-toggle="tooltip"]').tooltip();
 
-    // Initialize popovers
+  /** Initialize popovers */
   $('[data-toggle="popover"]').popover({
     html: true
   });
 
-    // Function for remove card
-    $('[data-toggle="card-remove"]').on('click', function (e) {
-        var $card = $(this).closest('div.card');
+  /** Function for remove card */
+  $('[data-toggle="card-remove"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);
+
     $card.remove();
 
     e.preventDefault();
     return false;
   });
 
-    // Function for collapse card
-    $('[data-toggle="card-collapse"]').on('click', function (e) {
-        var $this = $(this),
-            $card = $this.closest('div.card');
+  /** Function for collapse card */
+  $('[data-toggle="card-collapse"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);
 
     $card.toggleClass('card-collapsed');
 
@@ -39,9 +47,9 @@ $(document).ready(function () {
     return false;
   });
 
-    // Function for fullscreen card
+  /** Function for fullscreen card */
   $('[data-toggle="card-fullscreen"]').on('click', function(e) {
-        var $card = $(this).closest('div.card');
+    let $card = $(this).closest(DIV_CARD);
 
     $card.toggleClass('card-fullscreen').removeClass('card-collapsed');
 
@@ -49,8 +57,9 @@ $(document).ready(function () {
     return false;
   });
 
-    if($('[data-sparkline]').length) {
-        var generateSparkline = function($elem, data, params) {
+  /**  */
+  if ($('[data-sparkline]').length) {
+    let generateSparkline = function($elem, data, params) {
       $elem.sparkline(data, {
         type: $elem.attr('data-sparkline-type'),
         height: '100%',
@@ -66,9 +75,9 @@ $(document).ready(function () {
       });
     };
 
-        require(['sparkline'], function(){
-            $('[data-sparkline]').each(function(){
-                var $chart = $(this);
+    require(['sparkline'], function() {
+      $('[data-sparkline]').each(function() {
+        let $chart = $(this);
 
         generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
           color: $chart.attr('data-sparkline-color')
@@ -77,11 +86,12 @@ $(document).ready(function () {
     });
   }
 
+  /**  */
+  if ($('.chart-circle').length) {
+    require(['circle-progress'], function() {
+      $('.chart-circle').each(function() {
+        let $this = $(this);
 
-    if($('.chart-circle').length) {
-        require(['circle-progress'], function () {
-            $('.chart-circle').each(function () {
-                var $this = $(this);
         $this.circleProgress({
           fill: {
             color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue