Merge pull request #6 from nxmndr/skip-empty-elements

feat: skip null elements

extend.php

@@ -52,6 +52,7 @@
     (new Extend\Settings())
         ->serializeToForum('datlechin-simple-tour-guide.showProgress', 'datlechin-simple-tour-guide.show_progress', 'boolval')
         ->serializeToForum('datlechin-simple-tour-guide.allowDismiss', 'datlechin-simple-tour-guide.allow_dismiss', 'boolval')
+        ->serializeToForum('datlechin-simple-tour-guide.skipNullElements', 'datlechin-simple-tour-guide.skip_null_elements', 'boolval')
         ->serializeToForum('datlechin-simple-tour-guide.steps', 'datlechin-simple-tour-guide.steps'),
 
     (new Extend\Event())

js/src/admin/components/SettingsPage.tsx

@@ -39,6 +39,12 @@ export default class SettingsPage extends ExtensionPage {
               label: app.translator.trans('datlechin-simple-tour-guide.admin.settings.allow_close_label'),
               help: app.translator.trans('datlechin-simple-tour-guide.admin.settings.allow_close_help'),
             })}
+            {this.buildSettingComponent({
+              setting: 'datlechin-simple-tour-guide.skip_null_elements',
+              type: 'boolean',
+              label: app.translator.trans('datlechin-simple-tour-guide.admin.settings.skip_null_elements_label'),
+              help: app.translator.trans('datlechin-simple-tour-guide.admin.settings.skip_null_elements_help'),
+            })}
             <div className="Form-group">
               <Button className="Button" icon="fas fa-plus" onclick={() => app.modal.show(EditTourGuideStepModal)}>
                 {app.translator.trans('datlechin-simple-tour-guide.admin.add_step')}

js/src/forum/index.ts

@@ -64,14 +64,19 @@ app.initializers.add('datlechin/flarum-simple-tour-guide', () => {
         current: '{{current}}',
         total: '{{total}}',
       }),
-      showButtons: ['next', 'previous'],
+      showButtons: getSetting('skipNullElements') ? ['next'] : ['next', 'previous'],
       nextBtnText: getTranslation('next_btn_text'),
       prevBtnText: getTranslation('prev_btn_text'),
       doneBtnText: getTranslation('done_btn_text'),
       steps: getSteps(),
       onDestroyed: () => {
         dismissTour();
       },
+      onHighlightStarted(element) {
+        if (!element && getSetting('skipNullElements')) {
+          setTimeout(() => driverObj.moveNext(), 10);
+        }
+      },
     });
 
     driverObj.drive();

locale/en.yml

@@ -5,6 +5,8 @@ datlechin-simple-tour-guide:
       show_progress_help: This will show the current step and total steps at the top of the popover.
       allow_close_label: Allow close
       allow_close_help: Allow users closing the popover by click on the backdrop.
+      skip_null_elements_label: Skip null elements
+      skip_null_elements_help: Skip steps whose target matches no HTML element. You can use this to target languages with 'html[lang="es"] my-selector'. This also hides Prev button for coherence, and you should hide progress.
 
     permissions:
       reset_tour_guide: Reset tour guide

src/TourGuideStepValidator.php

@@ -9,7 +9,7 @@ class TourGuideStepValidator extends AbstractValidator
     protected $rules = [
         'title' => ['required', 'string'],
         'description' => ['required', 'string'],
-        'target' => ['required', 'string', 'regex:/^[.#]?[a-zA-Z]+[\w-]*$/'],
+        'target' => ['required', 'string', 'max:255', 'not_regex:/[\n\r]/'],
         'is_trigger_click' => ['required', 'boolean'],
     ];
 }