Merge pull request #8 from Matej-ch/intro_options

Intro options
Matej-ch · May 13, 2022 · 1c9b297 · 1c9b297
2 parents f4cb4db + ce7d0ca
commit 1c9b297
Show file tree

Hide file tree

Showing 15 changed files with 106 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -21,14 +21,14 @@ or add
 "matejch/yii2-page-guide": "^1.0"
 ```
 
-to the require section of your `composer.json` file.
+to the requirement section of your `composer.json` file.
 
 Setup
 -----
 
 #### 1. First migrate table
 
-it is necessary for saving rules on pages
+It is necessary for saving rules on pages
 
 ```php 
 ./yii migrate --migrationPath=@vendor/matejch/yii2-page-guide/src/migrations
@@ -45,7 +45,7 @@ it is necessary for saving rules on pages
 
 #### 3. Add widget on pages you want to use page guide on
 
-By default it is rendered in place you put widget on
+By default, it is rendered in place you put widget on
 
 ```php
  <?= \matejch\pageGuide\widget\PageAssist::widget() ?>
@@ -58,13 +58,24 @@ If you want it to be positioned on right top side, use widget option **_'btnPosi
 
 ```
 
+### 4. Additional intro options from intro.js library
+
+If you want you can add intro.js option into widget with attribute `introOptions`
+
+More options here [intro.js](https://introjs.com/docs/examples/customizing/html-tooltip) 
+```php 
+<?= \matejch\pageGuide\widget\PageAssist::widget(['introOptions' => ['showProgress' => true] ]) ?>
+
+```
+
 Usage
 -----
 Access index and form for creation of rules with 
 
 ```php 
 {key_of_module_you_use_in_web.php}/page-guide/index
 ```
+
 #### 1. Create new set of rules
 
 Insert url on your yii web page into first input

diff --git a/composer.json b/composer.json
@@ -2,7 +2,7 @@
     "name": "matejch/yii2-page-guide",
     "description": "Ability to add guide to pages for user orientation",
     "type": "yii2-extension",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "keywords": ["yii2","extension","guide"],
     "license": "MIT",
     "authors": [

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "yii2-page-guide",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Page guide extension\r ====================\r Ability to add guide to pages for user orientation",
   "main": "",
   "scripts": {

diff --git a/readme/Contact with guide.png b/readme/Contact with guide.png
diff --git a/readme/Create page guide.png b/readme/Create page guide.png
diff --git a/src/messages/cs/model.php b/src/messages/cs/model.php
@@ -0,0 +1,9 @@
+<?php
+
+return [
+    'ID' => 'Id',
+    'Url' => 'Stránka návodu',
+    'Rules' => 'Pravidla',
+    'Rules not set' => 'Musíte nastavit alespoň jeden krok',
+    'Rules not valid' => 'Pravidlo je neplatné',
+];
diff --git a/src/messages/cs/view.php b/src/messages/cs/view.php
@@ -0,0 +1,29 @@
+<?php
+
+return [
+    'Not found' => 'Model nebyl nalezen',
+    'page guide' => 'Nápovědy',
+    'create' => ' Vytvořit',
+    'create guide' => 'Vytvořit nápovědu',
+    'update guide' => 'Upravit nápovědu: {id}',
+    'goto' => 'Jdi na stránku',
+    'save' => 'Uložit',
+    'help_1' => 'Vložte url adresu pro kterou, chcete nastavit nápovědu',
+    'help_2' => 'Otevřete stránku v novém okně a vyberte elementy pro které chcete vytvořit nápovědu',
+    'help_3' => 'Na stránkách kterých chcete vytvořit nápovědu musí mít widget PageAssist z adresáře widget',
+    'step' => 'Krok',
+    'element' => 'Element na který napojit návod',
+    'element_help' => 'Nápověda k elementu',
+    'help_4' => 'Přesuňte požadovaný element sem',
+    'rule_element' => 'Element',
+    'intro' => 'Obsah',
+    'prev' => 'Zpět',
+    'next' => 'Dále',
+    'skip' => 'Přeskočit',
+    'done' => 'Ukončit',
+    'position' => 'Pozice',
+    'right' => 'Vpravo',
+    'left' => 'Vlevo',
+    'bottom' => 'Dole',
+    'top' => 'Nahoru'
+];
diff --git a/src/messages/en/view.php b/src/messages/en/view.php
@@ -21,4 +21,9 @@
     'next' => 'Next',
     'skip' => 'Skip',
     'done' => 'Done',
+    'position' => 'Position',
+    'right' => 'Right',
+    'left' => 'Left',
+    'bottom' => 'Bottom',
+    'top' => 'Top'
 ];
diff --git a/src/messages/it/view.php b/src/messages/it/view.php
@@ -21,4 +21,9 @@
     'next' => 'Successivo',
     'skip' => 'Salta',
     'done' => 'Fine',
+    'position' => 'Posizione',
+    'right' => 'Right',
+    'left' => 'Left',
+    'bottom' => 'Bottom',
+    'top' => 'Top'
 ];
diff --git a/src/messages/sk/view.php b/src/messages/sk/view.php
@@ -21,4 +21,9 @@
     'next' => 'Ďalej',
     'skip' => 'Preskočiť',
     'done' => 'Ukončiť',
+    'position' => 'Pozícia',
+    'right' => 'Vpravo',
+    'left' => 'Vľavo',
+    'bottom' => 'Dole',
+    'top' => 'Hore'
 ];
diff --git a/src/views/page-guide/partials/_rule.php b/src/views/page-guide/partials/_rule.php
@@ -2,8 +2,9 @@
 
 /** @var int $index */
 
-?>
+use yii\helpers\Html;
 
+?>
 
 <div class="w-full max300 well-block px-4 py-4 mx-2 js-rule-container relative">
     <div class="w-full">
@@ -14,6 +15,16 @@
         <label class="control-label"><?= Yii::t('pageGuide/view','element') ?></label>
         <input type="text" value="<?= $rule['element'] ?? '' ?>" name="PageGuide[rules][<?= $index ?>][element]" class="form-control js-element">
     </div>
+    <div class="w-full">
+        <label class="control-label"><?= Yii::t('pageGuide/view','position') ?></label>
+        <?= Html::dropDownList("PageGuide[rules][$index][position]",
+            $rule['position'] ?? 'bottom', [
+                'right' => Yii::t('pageGuide/view','right'),
+                'left' => Yii::t('pageGuide/view','left'),
+                'bottom' => Yii::t('pageGuide/view','bottom'),
+                'top' => Yii::t('pageGuide/view','top')
+            ], ['class' => 'form-control js-position']) ?>
+    </div>
     <div class="w-full">
         <label class="control-label"><?= Yii::t('pageGuide/view','element_help') ?></label>
         <textarea name="PageGuide[rules][<?= $index ?>][intro]" cols="30" rows="10" class="form-control js-intro"><?= $rule['intro'] ?? '' ?></textarea>

diff --git a/src/views/page-guide/templates/_rule.php b/src/views/page-guide/templates/_rule.php
@@ -1,3 +1,8 @@
+<?php
+
+use yii\helpers\Html;
+
+?>
 <template id="element-input-template">
     <div class="w-full max300 well-block px-4 py-4 mx-2 js-rule-container relative">
         <div class="w-full">
@@ -8,6 +13,15 @@
             <label class="control-label"><?= Yii::t('pageGuide/view','element') ?></label>
             <input type="text" value="" name="PageGuide[rules][][element]" class="form-control js-element">
         </div>
+        <div class="w-full">
+            <label class="control-label"><?= Yii::t('pageGuide/view','position') ?></label>
+            <?= Html::dropDownList("PageGuide[rules][][position]", 'bottom', [
+                    'right' => Yii::t('pageGuide/view','right'),
+                    'left' => Yii::t('pageGuide/view','left'),
+                    'bottom' => Yii::t('pageGuide/view','bottom'),
+                    'top' => Yii::t('pageGuide/view','top')
+                ], ['class' => 'form-control js-position']) ?>
+        </div>
         <div class="w-full">
             <label class="control-label"><?= Yii::t('pageGuide/view','element_help') ?></label>
             <textarea name="PageGuide[rules][][intro]" cols="30" rows="10" class="form-control js-intro"></textarea>

diff --git a/src/web/js/assist.js b/src/web/js/assist.js
@@ -52,9 +52,7 @@ document.addEventListener('DOMContentLoaded',() => {
 
     function startIntro() {
         const intro = introJs();
-        intro.setOptions({
-            steps: window.guideRules || []
-        });
+        intro.setOptions(window.guideRules);
 
         intro.setOption("prevLabel",window.guideLabels.prevLabel || 'Prev' );
         intro.setOption("nextLabel",window.guideLabels.nextLabel || 'Next' );
@@ -122,6 +120,7 @@ document.addEventListener('DOMContentLoaded',() => {
 
             container.querySelector('.js-step').name = 'PageGuide[rules]['+step+'][step]';
             container.querySelector('.js-step').value = step + 1;
+            container.querySelector('.js-position').name = 'PageGuide[rules]['+step+'][position]';
             container.querySelector('.js-element').name = 'PageGuide[rules]['+step+'][element]';
             container.querySelector('.js-intro').name = 'PageGuide[rules]['+step+'][intro]';
 
@@ -148,6 +147,7 @@ document.addEventListener('DOMContentLoaded',() => {
         let tmpl = document.getElementById('element-input-template').content.cloneNode(true);
         tmpl.querySelector('.js-step').name = 'PageGuide[rules]['+count+'][step]';
         tmpl.querySelector('.js-step').value = count + 1;
+        tmpl.querySelector('.js-position').name = 'PageGuide[rules]['+count+'][position]';
         tmpl.querySelector('.js-element').name = 'PageGuide[rules]['+count+'][element]';
         tmpl.querySelector('.js-intro').name = 'PageGuide[rules]['+count+'][intro]';
         document.getElementById('js-el-container').appendChild(tmpl);

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
@@ -7,6 +7,7 @@
 use matejch\pageGuide\models\PageGuide;
 use Yii;
 use yii\base\Widget;
+use yii\helpers\ArrayHelper;
 use yii\helpers\Json;
 use yii\web\View;
 
@@ -16,6 +17,8 @@ class PageAssist extends Widget
 
     public $selectors = [];
 
+    public $introOptions = [];
+
     public function init()
     {
         parent::init();
@@ -39,7 +42,10 @@ public function run()
                 'skipLabel' => Yii::t('pageGuide/view','skip'),
                 'doneLabel' => Yii::t('pageGuide/view','done')
             ]);
-            $view->registerJs("window.guideRules=$guide->rules;window.guideLabels=$labels");
+
+            $options = Json::encode(ArrayHelper::merge($this->introOptions,['steps' => Json::decode($guide->rules)]));
+
+            $view->registerJs("window.guideRules=$options;window.guideLabels=$labels");
         }
 
         if(!empty($this->selectors)) {