adding callbacks to intro js

YetOpen · May 21, 2022 · bd58f06 · bd58f06
1 parent a96ddcd
commit bd58f06
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 ![latest_tag](https://badgen.net/github/tag/Matej-ch/yii2-page-guide)
-![https://github.com/Matej-ch/yii2-page-guide/wiki](https://badgen.net/badge/icon/wiki?icon=wiki&label)
+![wiki](https://badgen.net/badge/icon/wiki?icon=wiki&label)
 
 Page guide extension
 ====================
@@ -67,6 +67,16 @@ More options here [intro.js](https://introjs.com/docs/examples/customizing/html-
 ```php 
 <?= \matejch\pageGuide\widget\PageAssist::widget(['introOptions' => ['showProgress' => true] ]) ?>
 
+```
+### 5. Optional
+
+Widget now also supports intro.js callbacks
+
+Available callbacks are `oncomplete` `onexit` `onbeforeexit` `onchange` `onbeforechange` `onafterchange`
+
+```php 
+<?= \matejch\pageGuide\widget\PageAssist::widget(['introCallbacks' => ['onchange' => ] ]) ?>
+
 ```
 
 Usage

diff --git a/src/web/js/assist.js b/src/web/js/assist.js
@@ -58,6 +58,11 @@ document.addEventListener('DOMContentLoaded',() => {
         intro.setOption("nextLabel",window.guideLabels.nextLabel || 'Next' );
         intro.setOption("skipLabel",window.guideLabels.skipLabel || 'Skip' );
         intro.setOption("doneLabel",window.guideLabels.doneLabel || 'Done' );
+
+        if(window.guideCallbacks) {
+            console.log(window.guideCallbacks)
+        }
+
         intro.start();
     }
 

diff --git a/src/web/js/assist.min.js b/src/web/js/assist.min.js
diff --git a/src/widget/PageAssist.php b/src/widget/PageAssist.php
@@ -9,6 +9,7 @@
 use yii\base\Widget;
 use yii\helpers\ArrayHelper;
 use yii\helpers\Json;
+use yii\web\JsExpression;
 use yii\web\View;
 
 class PageAssist extends Widget
@@ -17,8 +18,27 @@ class PageAssist extends Widget
 
     public $selectors = [];
 
+    /**
+     * Array of additional intro.js options
+     *
+     * @var array
+     */
     public $introOptions = [];
 
+    /**
+     * Array of callbacks usable in intro.js
+     * Available callbacks
+     *      oncomplete
+     *      onexit
+     *      onbeforeexit
+     *      onchange
+     *      onbeforechange
+     *      onafterchange
+     *
+     * @var array
+     */
+    public $introCallbacks = [];
+
     public function init()
     {
         parent::init();
@@ -45,7 +65,13 @@ public function run()
 
             $options = Json::encode(ArrayHelper::merge($this->introOptions,['steps' => Json::decode($guide->rules)]));
 
-            $view->registerJs("window.guideRules=$options;window.guideLabels=$labels");
+            $jsString = "window.guideRules=$options;window.guideLabels=$labels;";
+            if(!empty($this->introCallbacks)) {
+                $callbacks = $this->filterCallbacks();
+                $jsString = "window.guideCallbacks=$callbacks";
+            }
+
+            $view->registerJs($jsString);
         }
 
         if(!empty($this->selectors)) {
@@ -79,4 +105,21 @@ public function registerTranslations()
             ];
         }
     }
+
+    private function filterCallbacks(): string
+    {
+        return Json::encode(array_intersect_key($this->introCallbacks,array_flip($this->allowedCallbacks())));
+    }
+
+    private function allowedCallbacks(): array
+    {
+        return [
+            'oncomplete',
+            'onexit',
+            'onbeforeexit',
+            'onchange',
+            'onbeforechange',
+            'onafterchange',
+        ];
+    }
 }