Add button to trigger onboarding.
authorAlexandre Segura <mex.zktk@gmail.com>
Tue, 02 May 2017 14:22:34 +0200
changeset 487 a881aa78a3b1
parent 486 869bb212631a
child 488 a16f95a4aefd
Add button to trigger onboarding.
src_js/iconolab-bundle/src/components/editor/Canvas.vue
--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Tue May 02 14:03:27 2017 +0200
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Tue May 02 14:22:34 2017 +0200
@@ -61,12 +61,18 @@
         </div>
         <div class="controls" v-show="loaded">
             <div class="controls-left">
-                <button data-intro="Visualisez toutes les annotations" data-position="top" @click="toggleReadonly" type="button" class="btn"
+                <button
+                    data-intro="Visualisez toutes les annotations"
+                    data-position="top"
+                    @click="toggleReadonly" type="button" class="btn"
                     v-bind:class="{ 'active': readonly }"
                     v-show="isAuthenticated">
                     <i class="fa fa-eye"></i>
                 </button>
-                <button data-intro="Changez de mode" data-position="top" @click="toggleReadonly" type="button" class="btn"
+                <button
+                    data-intro="Changez de mode"
+                    data-position="top"
+                    @click="toggleReadonly" type="button" class="btn"
                     v-show="isAuthenticated">
                     <i v-show="readonly" class="fa fa-toggle-on" style="transform: rotate(180deg)"></i>
                     <i v-show="!readonly" class="fa fa-toggle-on"></i>
@@ -109,7 +115,9 @@
                 </button>
             </div>
         </div>
-
+        <div class="help">
+            <a href="#" class="btn btn-default" v-on:click.stop.prevent="showOnboarding"><i class="fa fa-question-circle"></i></a>
+        </div>
     </div>
 </template>
 
@@ -245,17 +253,7 @@
 
                 if (!onboarding) {
                     setTimeout(() => {
-                        var intro = introJs.introJs();
-                        intro.setOptions({
-                            nextLabel: 'Suivant',
-                            prevLabel: 'Précédent',
-                            skipLabel: 'J\'ai compris',
-                            doneLabel: 'Terminé'
-                        })
-                        intro.onexit(function() {
-                            Cookies.set('__iconolab_onboarding', 'true', { expires: 365 });
-                        })
-                        intro.start()
+                        this.startOnboarding();
                     }, 1000);
                 }
             },
@@ -597,6 +595,25 @@
                     });
 
                 });
+            },
+
+            showOnboarding: function(e) {
+                this.startOnboarding();
+            },
+
+            startOnboarding: function() {
+                const intro = introJs.introJs();
+
+                intro.setOptions({
+                    nextLabel: 'Suivant',
+                    prevLabel: 'Précédent',
+                    skipLabel: 'J\'ai compris',
+                    doneLabel: 'Terminé'
+                })
+                intro.onexit(function() {
+                    Cookies.set('__iconolab_onboarding', 'true', { expires: 365 });
+                })
+                intro.start()
             }
         }
     }
@@ -667,4 +684,10 @@
         border-bottom-right-radius: 4px;
     }
 
+.help {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
 </style>