Added buttonClass to options - can now override class on the buttons.

cdownie · cdownie · commit 33b6f3175c6d · 2017-07-21T14:28:24.000-04:00
diff --git a/intro.js b/intro.js
@@ -77,7 +77,9 @@
       /* Hint button label */
       hintButtonLabel: 'Got it',
       /* Adding animation to hints? */
-      hintAnimation: true
+      hintAnimation: true,
+      /* additional classes to put on the buttons */
+      buttonClass: "introjs-button"
     };
   }
 
@@ -1015,7 +1017,7 @@
 
       //skip button
       var skipTooltipButton = document.createElement('a');
-      skipTooltipButton.className = 'introjs-button introjs-skipbutton';
+      skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton ';
       _setAnchorAsButton(skipTooltipButton);
       skipTooltipButton.innerHTML = this._options.skipLabel;
 
@@ -1058,22 +1060,22 @@
     // when it's the first step of tour
     if (this._currentStep == 0 && this._introItems.length > 1) {
       if (typeof skipTooltipButton !== "undefined" && skipTooltipButton != null) {
-        skipTooltipButton.className = 'introjs-button introjs-skipbutton';
+        skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton';
       }
       if (typeof nextTooltipButton !== "undefined" && nextTooltipButton != null) {
-        nextTooltipButton.className = 'introjs-button introjs-nextbutton';
+        nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton';
       }
 
       if (this._options.hidePrev == true) {
         if (typeof prevTooltipButton !== "undefined" && prevTooltipButton != null) {
-          prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-hidden';
+          prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton introjs-hidden';
         }
         if (typeof nextTooltipButton !== "undefined" && nextTooltipButton != null) {
           nextTooltipButton.className += ' introjs-fullbutton';
         }
       } else {
         if (typeof prevTooltipButton !== "undefined" && prevTooltipButton != null) {
-          prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled';
+          prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton introjs-disabled';
         }
       }
 
@@ -1091,19 +1093,19 @@
         skipTooltipButton.className += ' introjs-donebutton';
       }
       if (typeof prevTooltipButton !== "undefined" && prevTooltipButton != null) {
-        prevTooltipButton.className = 'introjs-button introjs-prevbutton';
+        prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton';
       }
 
       if (this._options.hideNext == true) {
         if (typeof nextTooltipButton !== "undefined" && nextTooltipButton != null) {
-          nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-hidden';
+          nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton introjs-hidden';
         }
         if (typeof prevTooltipButton !== "undefined" && prevTooltipButton != null) {
           prevTooltipButton.className += ' introjs-fullbutton';
         }
       } else {
         if (typeof nextTooltipButton !== "undefined" && nextTooltipButton != null) {
-          nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled';
+          nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton introjs-disabled';
         }
       }
 
@@ -1113,13 +1115,13 @@
     } else {
       // steps between start and end
       if (typeof skipTooltipButton !== "undefined" && skipTooltipButton != null) {
-        skipTooltipButton.className = 'introjs-button introjs-skipbutton';
+        skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton';
       }
       if (typeof prevTooltipButton !== "undefined" && prevTooltipButton != null) {
-        prevTooltipButton.className = 'introjs-button introjs-prevbutton';
+        prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton';
       }
       if (typeof nextTooltipButton !== "undefined" && nextTooltipButton != null) {
-        nextTooltipButton.className = 'introjs-button introjs-nextbutton';
+        nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton';
       }
       if (typeof skipTooltipButton !== "undefined" && skipTooltipButton != null) {
         skipTooltipButton.innerHTML = this._options.skipLabel;
@@ -1757,7 +1759,7 @@
     tooltipWrapper.innerHTML = item.hint;
 
     var closeButton = document.createElement('a');
-    closeButton.className = 'introjs-button';
+    closeButton.className = this._options.buttonClass;
     closeButton.innerHTML = this._options.hintButtonLabel;
     closeButton.onclick = _hideHint.bind(this, stepId);
 

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,9 @@`
`77`	`77`	`/* Hint button label */`
`78`	`78`	`hintButtonLabel: 'Got it',`
`79`	`79`	`/* Adding animation to hints? */`
`80`		`- hintAnimation: true`
	`80`	`+ hintAnimation: true,`
	`81`	`+ /* additional classes to put on the buttons */`
	`82`	`+ buttonClass: "introjs-button"`
`81`	`83`	`};`
`82`	`84`	`}`
`83`	`85`
`@@ -1015,7 +1017,7 @@`
`1015`	`1017`
`1016`	`1018`	`//skip button`
`1017`	`1019`	`var skipTooltipButton = document.createElement('a');`
`1018`		`- skipTooltipButton.className = 'introjs-button introjs-skipbutton';`
	`1020`	`+ skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton ';`
`1019`	`1021`	`_setAnchorAsButton(skipTooltipButton);`
`1020`	`1022`	`skipTooltipButton.innerHTML = this._options.skipLabel;`
`1021`	`1023`
`@@ -1058,22 +1060,22 @@`
`1058`	`1060`	`// when it's the first step of tour`
`1059`	`1061`	`if (this._currentStep == 0 && this._introItems.length > 1) {`
`1060`	`1062`	`if (typeof skipTooltipButton !== "undefined" && skipTooltipButton != null) {`
`1061`		`- skipTooltipButton.className = 'introjs-button introjs-skipbutton';`
	`1063`	`+ skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton';`
`1062`	`1064`	`}`
`1063`	`1065`	`if (typeof nextTooltipButton !== "undefined" && nextTooltipButton != null) {`
`1064`		`- nextTooltipButton.className = 'introjs-button introjs-nextbutton';`
	`1066`	`+ nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton';`
`1065`	`1067`	`}`
`1066`	`1068`
`1067`	`1069`	`if (this._options.hidePrev == true) {`
`1068`	`1070`	`if (typeof prevTooltipButton !== "undefined" && prevTooltipButton != null) {`
`1069`		`- prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-hidden';`
	`1071`	`+ prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton introjs-hidden';`
`1070`	`1072`	`}`
`1071`	`1073`	`if (typeof nextTooltipButton !== "undefined" && nextTooltipButton != null) {`
`1072`	`1074`	`nextTooltipButton.className += ' introjs-fullbutton';`
`1073`	`1075`	`}`
`1074`	`1076`	`} else {`
`1075`	`1077`	`if (typeof prevTooltipButton !== "undefined" && prevTooltipButton != null) {`
`1076`		`- prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled';`
	`1078`	`+ prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton introjs-disabled';`
`1077`	`1079`	`}`
`1078`	`1080`	`}`
`1079`	`1081`
`@@ -1091,19 +1093,19 @@`
`1091`	`1093`	`skipTooltipButton.className += ' introjs-donebutton';`
`1092`	`1094`	`}`
`1093`	`1095`	`if (typeof prevTooltipButton !== "undefined" && prevTooltipButton != null) {`
`1094`		`- prevTooltipButton.className = 'introjs-button introjs-prevbutton';`
	`1096`	`+ prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton';`
`1095`	`1097`	`}`
`1096`	`1098`
`1097`	`1099`	`if (this._options.hideNext == true) {`
`1098`	`1100`	`if (typeof nextTooltipButton !== "undefined" && nextTooltipButton != null) {`
`1099`		`- nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-hidden';`
	`1101`	`+ nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton introjs-hidden';`
`1100`	`1102`	`}`
`1101`	`1103`	`if (typeof prevTooltipButton !== "undefined" && prevTooltipButton != null) {`
`1102`	`1104`	`prevTooltipButton.className += ' introjs-fullbutton';`
`1103`	`1105`	`}`
`1104`	`1106`	`} else {`
`1105`	`1107`	`if (typeof nextTooltipButton !== "undefined" && nextTooltipButton != null) {`
`1106`		`- nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled';`
	`1108`	`+ nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton introjs-disabled';`
`1107`	`1109`	`}`
`1108`	`1110`	`}`
`1109`	`1111`
`@@ -1113,13 +1115,13 @@`
`1113`	`1115`	`} else {`
`1114`	`1116`	`// steps between start and end`
`1115`	`1117`	`if (typeof skipTooltipButton !== "undefined" && skipTooltipButton != null) {`
`1116`		`- skipTooltipButton.className = 'introjs-button introjs-skipbutton';`
	`1118`	`+ skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton';`
`1117`	`1119`	`}`
`1118`	`1120`	`if (typeof prevTooltipButton !== "undefined" && prevTooltipButton != null) {`
`1119`		`- prevTooltipButton.className = 'introjs-button introjs-prevbutton';`
	`1121`	`+ prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton';`
`1120`	`1122`	`}`
`1121`	`1123`	`if (typeof nextTooltipButton !== "undefined" && nextTooltipButton != null) {`
`1122`		`- nextTooltipButton.className = 'introjs-button introjs-nextbutton';`
	`1124`	`+ nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton';`
`1123`	`1125`	`}`
`1124`	`1126`	`if (typeof skipTooltipButton !== "undefined" && skipTooltipButton != null) {`
`1125`	`1127`	`skipTooltipButton.innerHTML = this._options.skipLabel;`
`@@ -1757,7 +1759,7 @@`
`1757`	`1759`	`tooltipWrapper.innerHTML = item.hint;`
`1758`	`1760`
`1759`	`1761`	`var closeButton = document.createElement('a');`
`1760`		`- closeButton.className = 'introjs-button';`
	`1762`	`+ closeButton.className = this._options.buttonClass;`
`1761`	`1763`	`closeButton.innerHTML = this._options.hintButtonLabel;`
`1762`	`1764`	`closeButton.onclick = _hideHint.bind(this, stepId);`
`1763`	`1765`