Built a new routine for intro tours.

app/Http/Controllers/Controller.php

@@ -67,10 +67,16 @@ class Controller extends BaseController
 
                 // get shown-intro-preference:
                 if (auth()->check()) {
-                    $key       = 'shown_demo_' . Route::currentRouteName();
+                    $route     = Route::currentRouteName();
+                    $key       = 'shown_demo_' . $route;
+                    $config    = config('intro.' . $route);
                     $shownDemo = Preferences::get($key, false)->data;
+                    if (is_null($config) || (is_array($config) && count($config) === 0)) {
+                        // no demo when no data for demo.
+                        $shownDemo = true;
+                    }
                     View::share('shownDemo', $shownDemo);
-                    View::share('current_route_name', Route::currentRouteName());
+                    View::share('current_route_name', $route);
                 }
 
                 return $next($request);

app/Http/Controllers/Json/IntroController.php

@@ -0,0 +1,67 @@
+<?php
+/**
+ * IntroController.php
+ * Copyright (c) 2017 thegrumpydictator@gmail.com
+ * This software may be modified and distributed under the terms of the Creative Commons Attribution-ShareAlike 4.0 International License.
+ *
+ * See the LICENSE file for details.
+ */
+
+declare(strict_types=1);
+
+namespace FireflyIII\Http\Controllers\Json;
+
+use Preferences;
+use Response;
+
+/**
+ * Class IntroController
+ *
+ * @package FireflyIII\Http\Controllers\Json
+ */
+class IntroController
+{
+
+    /**
+     * @param string $route
+     *
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function getIntroSteps(string $route)
+    {
+        $elements = config(sprintf('intro.%s', $route));
+        $steps    = [];
+        if (is_array($elements) && count($elements) > 0) {
+            foreach ($elements as $key => $options) {
+                $currentStep = $options;
+
+                // point to HTML element when not an intro or outro:
+                if (!in_array($key, ['intro', 'outro'])) {
+                    $currentStep['element'] = '#' . $key;
+                }
+
+                // get the text:
+                $currentStep['intro'] = trans('intro.' . $route . '_' . $key);
+
+                // save in array:
+                $steps[] = $currentStep;
+            }
+        }
+
+        return Response::json($steps);
+    }
+
+    /**
+     * @param string $route
+     *
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function postFinished(string $route)
+    {
+        $key = 'shown_demo_' . $route;
+        Preferences::set($key, true);
+
+        return Response::json(['result' => sprintf('Reported demo watched for route "%s".', $route)]);
+    }
+
+}

config/intro.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * intro.php
+ * Copyright (c) 2017 thegrumpydictator@gmail.com
+ * This software may be modified and distributed under the terms of the Creative Commons Attribution-ShareAlike 4.0 International License.
+ *
+ * See the LICENSE file for details.
+ */
+
+declare(strict_types=1);
+
+/*
+ * Always make sure intro is the first element (if any) and outro is the last one.
+ */
+
+return [
+    'index' => [
+        'intro'            => [],
+        'accounts-chart'   => [],
+        'box_out_holder'   => [],
+        'all_transactions' => ['position' => 'left'],
+        'help'             => ['position' => 'bottom'],
+        'outro'            => [],
+    ],
+];

public/js/ff/intro/intro.js

@@ -6,9 +6,28 @@
  * See the LICENSE file for details.
  */
 
-/** global: route_for_tour */
+/** global: routeForTour, routeStepsUri, routeForFinishedTour */
 
 $(function () {
     "use strict";
     //alert('show user intro for ' + route_for_tour);
+    $.getJSON(routeStepsUri).done(setupIntro)
 });
+
+function setupIntro(steps) {
+
+    var intro = introJs();
+    intro.setOptions({
+                         steps: steps,
+                         exitOnEsc: true,
+                         exitOnOverlayClick: true,
+                         keyboardNavigation: true,
+                     });
+    intro.oncomplete(reportIntroFinished);
+    intro.onexit(reportIntroFinished);
+    intro.start();
+}
+
+function reportIntroFinished() {
+    $.post(routeForFinishedTour);
+}

resources/lang/en_US/intro.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * intro.php
+ * Copyright (c) 2017 thegrumpydictator@gmail.com
+ * This software may be modified and distributed under the terms of the Creative Commons Attribution-ShareAlike 4.0 International License.
+ *
+ * See the LICENSE file for details.
+ */
+
+return [
+    'index_intro'            => 'Welcome to the index page of Firefly III. Please take the time to walk through this intro to get a feeling of how Firefly III works.',
+    'index_accounts-chart'   => 'This chart shows the current balance of your asset accounts. You can select the accounts visible here in your preferences.',
+    'index_box_out_holder'   => 'This little box and the boxes next to this one will give you a quick overview of your financial situation',
+    'index_all_transactions' => 'These boxes will hold your most recent transactions.',
+    'index_help'             => 'If you ever need help with a page or a form, press this button.',
+    'index_outro'            => 'Most pages of Firefly III will start with a little tour like this one. Please contact me when you have questions or comments. Enjoy!',
+
+];

resources/views/index.twig

@@ -56,6 +56,7 @@
             {% endif %}
 
             {# TRANSACTIONS #}
+            <div id="all_transactions">
                 {% for data in transactions %}
                     <div class="box">
                         <div class="box-header with-border">
@@ -100,6 +101,7 @@
                 {% endfor %}
             </div>
         </div>
+    </div>
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
             {# EXPENSE ACCOUNTS #}
@@ -131,8 +133,6 @@
 {% block scripts %}
     <script type="text/javascript">
         var billCount = {{ billCount }};
-
-        // uri's of charts:
         var accountFrontpageUri = '{{ route('chart.account.frontpage') }}';
         var accountRevenueUri = '{{ route('chart.account.revenue') }}';
         var accountExpenseUri = '{{ route('chart.account.expense') }}';

resources/views/layout/default.twig

@@ -183,7 +183,9 @@
 <script type="text/javascript" src="js/ff/help.js"></script>
 {% if not shownDemo %}
     <script type="text/javascript">
-        var route_for_tour = "{{ current_route_name }}";
+        var routeForTour = "{{ current_route_name }}";
+        var routeStepsUri = "{{ route('json.intro', [current_route_name]) }}";
+        var routeForFinishedTour = "{{ route('json.intro.finished', [current_route_name]) }}";
     </script>
     <script type="text/javascript" src="lib/intro/intro.min.js"></script>
     <script type="text/javascript" src="js/ff/intro/intro.js"></script>

resources/views/partials/boxes.twig

@@ -8,7 +8,7 @@
 
 <!-- Info boxes -->
 <div class="row hidden-sm hidden-xs">
-    <div class="{{ boxClasses }}">
+    <div class="{{ boxClasses }}" id="box_out_holder">
         <div class="info-box">
             <span class="info-box-icon bg-red">
                 <i class="fa fa-upload fa-fw"></i>

routes/web.php

@@ -449,6 +449,10 @@ Route::group(
     // currency conversion:
     Route::get('rate/{fromCurrencyCode}/{toCurrencyCode}/{date}', ['uses' => 'Json\ExchangeController@getRate', 'as' => 'rate']);
 
+    // intro things:
+    Route::get('intro/{route}', ['uses' => 'Json\IntroController@getIntroSteps', 'as' => 'intro']);
+    Route::post('intro/finished/{route}', ['uses' => 'Json\IntroController@postFinished', 'as' => 'intro.finished']);
+
 }
 );