Dev: Add tour to CintLink plugin

LimeSurvey · Aug 26, 2016 · b1ed5b9 · b1ed5b9
1 parent 1f1caae
commit b1ed5b9
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 9 deletions.
diff --git a/application/core/plugins/CintLink/CintLink.php b/application/core/plugins/CintLink/CintLink.php
@@ -175,13 +175,20 @@ public function actionIndex($surveyId)
         // Show tutorial if survey has no orders
         if (!CintLinkOrder::hasAnyOrders($surveyId))
         {
+            /*
             (new UniqueNotification(array(
                 'survey_id' => $surveyId,
                 'importance' => Notification::HIGH_IMPORTANCE,
                 'markAsNew' => false,
                 'title' => $this->gT('Welcome to CintLink LimeSurvey Integration'),
                 'message' => $this->renderPartial('tutorial', array(), true)
             )))->save();
+             */
+            $assetsUrl = Yii::app()->assetManager->publish(dirname(__FILE__) . '/js');
+            App()->clientScript->registerScriptFile("$assetsUrl/bootstrap-tour.min.js");
+            App()->clientScript->registerScriptFile("$assetsUrl/tour.js");
+            $assetsUrl = Yii::app()->assetManager->publish(dirname(__FILE__) . '/css');
+            App()->clientScript->registerCssFile("$assetsUrl/bootstrap-tour.min.css");
         }
 
         return $content;

diff --git a/application/core/plugins/CintLink/css/bootstrap-tour.min.css b/application/core/plugins/CintLink/css/bootstrap-tour.min.css
@@ -0,0 +1,22 @@
+/* ========================================================================
+ * bootstrap-tour - v0.10.3
+ * http://bootstraptour.com
+ * ========================================================================
+ * Copyright 2012-2015 Ulrich Sossou
+ *
+ * ========================================================================
+ * Licensed under the MIT License (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================================
+ */
+
+.tour-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;background-color:#000;opacity:.8;filter:alpha(opacity=80)}.tour-step-backdrop{position:relative;z-index:1101}.tour-step-backdrop>td{position:relative;z-index:1101}.tour-step-background{position:absolute!important;z-index:1100;background:inherit;border-radius:6px}.popover[class*=tour-]{z-index:1102}.popover[class*=tour-] .popover-navigation{padding:9px 14px;overflow:hidden}.popover[class*=tour-] .popover-navigation [data-role=end]{float:right}.popover[class*=tour-] .popover-navigation [data-role=prev],.popover[class*=tour-] .popover-navigation [data-role=next],.popover[class*=tour-] .popover-navigation [data-role=end]{cursor:pointer}.popover[class*=tour-] .popover-navigation [data-role=prev].disabled,.popover[class*=tour-] .popover-navigation [data-role=next].disabled,.popover[class*=tour-] .popover-navigation [data-role=end].disabled{cursor:default}.popover[class*=tour-].orphan{position:fixed;margin-top:0}.popover[class*=tour-].orphan .arrow{display:none}
diff --git a/application/core/plugins/CintLink/css/cintlink.css b/application/core/plugins/CintLink/css/cintlink.css
@@ -76,3 +76,18 @@
 .cintlink-shadow {
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
 }
+
+/* Tour */
+.tour-limesurvey-cintlink-tour .popover-title {
+    background-color: #eee;
+    border: 0;
+}
+
+.tour-limesurvey-cintlink-tour-element {
+    pointer-events: none;
+}
+
+body .tour-backdrop {
+    background-color: #fff;
+    opactiy: .8;
+}
diff --git a/application/core/plugins/CintLink/js/bootstrap-tour.min.js b/application/core/plugins/CintLink/js/bootstrap-tour.min.js
diff --git a/application/core/plugins/CintLink/js/cintlink.js b/application/core/plugins/CintLink/js/cintlink.js
@@ -118,10 +118,15 @@ $(document).ready(function() {
             // Make sure notifications are updated even if we are using Ajax.
             LS.updateNotificationWidget(LS.plugin.cintlink.notificationUpdateUrl, false);
 
+            // If surveyId is defined we have survey specific dashboard
             if (LS.plugin.cintlink.surveyId) {
 
-                var useLangWizard = $('#cint-lang-wizard input[name="lang"]').length > 1 ;
+                if (LS.plugin.cintlink.tour) {
+                    LS.plugin.cintlink.tour.init();
+                    LS.plugin.cintlink.tour.start();
+                }
                 /*
+                var useLangWizard = $('#cint-lang-wizard input[name="lang"]').length > 1 ;
                 var shouldShowWidget = $('#cintlink-gridview table tr').length == 2;
 
                 if (shouldShowWidget) {

diff --git a/application/core/plugins/CintLink/js/tour.js b/application/core/plugins/CintLink/js/tour.js
@@ -0,0 +1,60 @@
+/**
+ * Interactive tour as introduction
+ * @since 2016-08-26
+ */
+LS.plugin.cintlink.tour = new Tour({
+    name: 'limesurvey-cintlink-tour',
+    storage: false,
+    backdrop: true,
+    debug: true,
+    steps: [
+    {
+        element: '#cintlink-header',
+        title: 'Welcome to the CintLink Tour',
+        content: 'This is a short guided tour that will introduce you to the LimeSurvey CintLink plugin. For more detailed information, please visit the <a target="_blank" href="https://manual.limesurvey.org">LimeSurvey manual</a>.',
+        placement: 'bottom'
+    },
+    {
+        orphan: true,
+        title: 'blaha',
+        content: 'blasdfs'
+    },
+    {
+        element: '#cintlink-widget-button',
+        title: 'Cint widget',
+        content: 'This button opens the Cint widget. From here you can order participant and decide what target group you want.'
+    },
+    {
+        element: '#cintlink-login-button',
+        title: 'Login',
+        content: 'To be able to order participant, you must first login to <a href="https://www.limesurvey.org">limesurvey.org</a>. If you don\'t have an account, you can register one <a target="_blank" href="https://www.limesurvey.org/cb-registration/registers">here</a>. It\'s completely free.'
+    },
+    {
+        element: '#cintlink-gridview',
+        title: 'Orders',
+        content: 'Your orders will be listed here. They can be in six different states:<br/><ul><li>Waiting for payment</li><li>Under review</li><li>Live</li><li>Completed</li><li>Cancelled</li><li>Denied</li></ul>',
+        placement: 'top'
+    },
+    {
+        element: '#cintlink-status-column',
+        title: 'Orders',
+        content: 'When your order is waiting for payment, you will see this button:<br/><button class="btn btn-default btn-sm"><span class="fa fa-credit-card"></span>&nbsp;Pay now</button><br/>Clicking this will take you to <a target="_blank" href="https://www.limesurvey.org">limesurvey.org</a> for the payment procedure.',
+        placement: 'top'
+    },
+    {
+        element: '#cintlink-refresh-button',
+        title: 'Refresh',
+        content: 'Don\'t forget to refresh or reload the page after you\'ve paid.',
+        placement: 'left'
+    },
+    {
+        element: '#cintlink-sidemenu-button',
+        title: 'Side-menu',
+        content: 'Your orders will also be listed here'
+    },
+    {
+        element: '#ls-activate-survey',
+        title: 'Activate survey',
+        content: 'Before ordering participants from Cint you should make sure your survey is completed and activated',
+    }
+]});
diff --git a/application/core/plugins/CintLink/views/dashboard.php b/application/core/plugins/CintLink/views/dashboard.php
@@ -27,7 +27,7 @@
     <div class='row'>
 
         <!-- Show Cint widget -->
-        <div class='col-sm-3' style='cursor: pointer;'>
+        <div id='cintlink-widget-button' class='col-sm-3' style='cursor: pointer;'>
             <div
                 class='panel panel-primary cintlink-shadow'
                   onclick='<?php if ($additionalLanguages === null): echo 'LS.plugin.cintlink.showWidget();'; else: echo 'LS.plugin.cintlink.showLangWizard();'; endif; ?>'
@@ -46,7 +46,7 @@ class='panel panel-primary cintlink-shadow'
             </div>
         </div>
 
-        <div class='col-sm-3' style='<?php if (!$loggedIn) echo 'cursor: pointer;'; ?>'>
+        <div id='cintlink-login-button' class='col-sm-3' style='<?php if (!$loggedIn) echo 'cursor: pointer;'; ?>'>
                 <div
                 class='panel panel-primary cintlink-shadow <?php if ($loggedIn) echo 'disabled'; ?>'
                     onclick='<?php if (!$loggedIn) echo 'LS.plugin.cintlink.showLoginForm();'; ?>'
@@ -97,7 +97,7 @@ class='panel panel-primary cintlink-shadow <?php if ($loggedIn) echo 'disabled';
         </div>
 
         <!-- Refresh -->
-        <button class='btn btn-default pull-right' onclick='LS.plugin.cintlink.showDashboard();'><span class='fa fa-refresh'></span>&nbsp;<?php echo $plugin->gT('Refresh'); ?></button>
+        <button id='cintlink-refresh-button' class='btn btn-default pull-right' onclick='LS.plugin.cintlink.showDashboard();'><span class='fa fa-refresh'></span>&nbsp;<?php echo $plugin->gT('Refresh'); ?></button>
 
   </div>
 <?php endif; ?>
@@ -178,7 +178,10 @@ class='panel panel-primary cintlink-shadow <?php if ($loggedIn) echo 'disabled';
         'name' => 'status',
         'header' => $plugin->gT('Status'),
         'value' => '$data->styledStatus',
-        'type' => 'raw'
+        'type' => 'raw',
+        'id' => 'cintlink-status-column',
+        'htmlOptions' => array(
+        )
     );
     $columns[] = array(
         'name' => 'buttons',

diff --git a/application/core/plugins/CintLink/views/index.php b/application/core/plugins/CintLink/views/index.php
@@ -2,7 +2,7 @@
 
 <div class="row">
     <div class="col-lg-12 content-right">
-        <h3><?php eT("CintLink Integration");?></h3>
+        <h3 id='cintlink-header'><?php eT("CintLink Integration");?></h3>
         <div id='cintlink-container'>
         </div>
     </div>

diff --git a/application/core/plugins/CintLink/views/sidemenu.php b/application/core/plugins/CintLink/views/sidemenu.php
@@ -1,7 +1,7 @@
 <!-- CintLink side-menu content -->
 
 <li>
-    <a href='<?php echo $href; ?>'>
+    <a id='cintlink-sidemenu-button' href='<?php echo $href; ?>'>
         <span class='cintlink-icons cinticon cintlink-icon-sidemenu'></span>
         <?php echo $plugin->gT('CintLink'); ?>
     </a>

diff --git a/application/views/admin/survey/surveybar_view.php b/application/views/admin/survey/surveybar_view.php
@@ -76,14 +76,14 @@
 
                     <!-- activate -->
                     <?php if($canactivate): ?>
-                        <a class="btn btn-success" href="<?php echo $this->createUrl("admin/survey/sa/activate/surveyid/$surveyid"); ?>" role="button">
+                        <a id='ls-activate-survey' class="btn btn-success" href="<?php echo $this->createUrl("admin/survey/sa/activate/surveyid/$surveyid"); ?>" role="button">
                             <?php eT("Activate this survey"); ?>
                         </a>
 
                     <!-- can't activate -->
                     <?php elseif (Permission::model()->hasSurveyPermission($surveyid, 'surveyactivation', 'update')): ?>
                         <span class="btntooltip" style="display: inline-block" data-toggle="tooltip" data-placement="bottom" title="<?php eT('Survey cannot be activated. Either you have no permission or there are no questions.'); ?>">
-                            <button type="button" class="btn btn-success btntooltip" disabled="disabled">
+                            <button id='ls-activate-survey' type="button" class="btn btn-success btntooltip" disabled="disabled">
                                 <?php eT("Activate this survey"); ?>
                             </button>
                         </span>