Better integration of bootstrap tour tooltips

This commit is contained in:
Manuel Cillero 2017-08-31 16:10:17 +02:00
parent e5f2b64d98
commit f036f960ca
6 changed files with 153 additions and 149 deletions

View file

@ -1,19 +1,22 @@
/* ===========================================================
# bootstrap-tour - v0.9.3
# http://bootstraptour.com
# ==============================================================
# Copyright 2012-2013 Ulrich Sossou
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# 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}.tour-step-backdrop{position:relative;z-index:1101;background:inherit}.tour-step-background{position:absolute;z-index:1100;background:inherit;border-radius:6px}.popover[class*=tour-]{z-index:1100}.popover[class*=tour-] .popover-navigation{padding:9px 14px}.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}
/* ========================================================================
* 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}

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,4 @@
'use strict';
$jq(document).ready(function ($) {
$jq(function () {
// Bind to scroll.
$(window).scroll(function () {
@ -13,7 +11,7 @@ $jq(document).ready(function ($) {
});
// Function for scrolling to top.
$('#scroll-top-link').click(function () {
$('#scroll-top-link').click(function (e) {
$("html, body").animate({
scrollTop: 0
}, 600);

View file

@ -1,72 +1,79 @@
$jq(function() {
var path, prev, next, endtour, tour, cookie_tour, cookie_value;
// Destination, relative path starting with a slash.
var path = '/';
path = location.pathname.substring(0, 8);
if (path != "/en" && path != "/en/") path = "/";
var langPath = location.pathname.replace(/^\/+/, '') + '/';
var basePath = Drupal.settings.basePath ? Drupal.settings.basePath : '';
basePath = basePath == '/' ? '' : basePath;
if (basePath.length > 0 && langPath.indexOf(basePath) == 0) {
langPath = langPath.substring(basePath.length);
}
langPath = langPath.substring(0, langPath.indexOf('/'));
path = langPath.length == 2 ? basePath + '/' + langPath + path : basePath + path;
prev = Drupal.t("« Prev");
next = Drupal.t("Next »");
endtour = Drupal.t("End Tour");
var prev = Drupal.t("« Prev");
var next = Drupal.t("Next »");
var endtour = Drupal.t("End Tour");
tour = new Tour({
template: "<div class='popover'> \
<div class='arrow'></div> \
<h3 class='popover-title' style='font-weight: bold;'></h3> \
<div class='popover-content small'></div> \
<div class='popover-navigation'> \
<div class='btn-group'> \
<button class='btn btn-sm btn-default' data-role='prev'>" + prev + "</button> \
<button class='btn btn-sm btn-default' data-role='next'>" + next + "</button> \
var tour = new Tour({
template: '<div class="popover"> \
<div class="arrow"></div> \
<h3 class="popover-title" style="font-weight: bold;"></h3> \
<div class="popover-content" style="font-size: 80%;"></div> \
<div class="popover-navigation"> \
<div class="btn-group"> \
<button class="btn btn-sm btn-default" data-role="prev">' + prev + '</button> \
<button class="btn btn-sm btn-default" data-role="next">' + next + '</button> \
</div> \
<button class='btn btn-sm btn-default' data-role='end'>" + endtour + "</button> \
<button class="btn btn-sm btn-default" data-role="end">' + endtour + '</button> \
</div> \
</div>",
</div>',
steps: [
{
element: "#user-options",
placement: "left",
title: Drupal.t("Welcome!"),
content: Drupal.t("Remember, here you can see your user profile and main options.")
} , {
path: path,
element: "li.suitedesk",
element: "#logo",
placement: "bottom",
title: Drupal.t("What is SuiteDesk?"),
content: Drupal.t("SuiteDesk is a web based software useful for project management, planning, personal productivity, communication between project stakeholders, collaboration, customers support, documentation, cost control and change management.")
} , {
path: path,
element: "#stormprojects",
element: "#main-content ul.tabs li:last-child",
placement: "bottom",
title: Drupal.t("Welcome!"),
content: Drupal.t("Remember, here you can see your user profile and main options.")
} , {
path: path,
element: "#stormproject-item a:first-child",
placement: "top",
title: Drupal.t("Active projects"),
content: Drupal.t("Here you can see your projects. At the most basic level, SuiteDesk will help to track projects from start to finish, allows for the creation, assignment and control of tasks and deadlines, and let project stakeholders at different levels to have an input into the process.")
} , {
path: path,
element: "#stormtickets",
placement: "bottom",
title: Drupal.t("An issue tracking system"),
content: Drupal.t("SuiteDesk facilitates the reporting, notifying, updating, and viewing of issues like bugs, errors and new features. If you want to notify a bug or track an issue, here you can do it. A support ticket should include vital information for the account involved and the issue encountered.")
} , {
path: path,
element: "#storminvoices",
placement: "bottom",
title: Drupal.t("Easy invoice tracking"),
content: Drupal.t("SuiteDesk give you total control of the invoicing and payment activities of projects you are involved with.")
} , {
path: path,
element: "#stormdok",
placement: "bottom",
element: "#stormdok-item a:first-child",
placement: "top",
title: Drupal.t("Sharing project documents"),
content: Drupal.t("It is vital to keep all participants up to date on what is going on. Document sharing and collaboration is essentially a document repository that all project stakeholders have access to.")
} , {
path: path,
element: "#stormfaq",
placement: "bottom",
element: "#stormticket-item a:first-child",
placement: "top",
title: Drupal.t("An issue tracking system"),
content: Drupal.t("SuiteDesk facilitates the reporting, notifying, updating, and viewing of issues like bugs, errors and new features. If you want to notify a bug or track an issue, here you can do it. A support ticket should include vital information for the account involved and the issue encountered.")
} , {
path: path,
element: "#storminvoice-item a:first-child",
placement: "top",
title: Drupal.t("Easy invoice tracking"),
content: Drupal.t("SuiteDesk give you total control of the invoicing and payment activities of projects you are involved with.")
} , {
path: path,
element: "#stormfaq-item a:first-child",
placement: "top",
title: Drupal.t("Frequently Asked Questions"),
content: Drupal.t("A compilation of questions and answers commonly asked by a new customer, user or project member. Before asking a question make sure that you've checked out this list.")
} , {
path: path,
element: "#stormwatcher",
placement: "bottom",
element: "#stormwatcher-item a:first-child",
placement: "top",
title: Drupal.t("Watch content for changes"),
content: Drupal.t("SuiteDesk lets users a way to easily watch tickets for changes or new comments without having to post themselves. Supports email notifications being sent when both or either of the above occurs.")
} , {
@ -83,9 +90,14 @@ $jq(function() {
content: Drupal.t("And this block displays the last updated contents of your projects in SuiteDesk.")
}
]
}).init().start(true);
});
if (decodeURI((RegExp('tour=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]) == 'suitedesk') {
tour.goTo(1);
}
});
tour.init();
tour.start();
$('#menu-help a').click(function (e) {
e.preventDefault();
tour.restart();
});
});

View file

@ -162,65 +162,65 @@ function zuitedesk_preprocess_page(&$vars, $hook) {
$pl = '';
if ($vars['logged_in'] && !empty($deskmenu)) {
// Home option:
$pl .= _zuitedesk_option(TRUE, "$lang/", t('Home'), NULL, t('Desktop'));
$pl .= _zuitedesk_option(TRUE, "$lang/", t('Home'), 'home', NULL, t('Desktop'));
// CRM submenu:
$submenu = '';
$submenu .= _zuitedesk_option(!empty($_SESSION['SuiteCRM_Session_ID']), "$lang/suitecrm", 'SuiteCRM', 'crm', t('Core sales, customer service and marketing processes with SuiteCRM'));
$submenu .= _zuitedesk_option($deskmenu[7], "$lang/organizations", t('Organizations'), 'org');
$submenu .= _zuitedesk_option(!empty($_SESSION['SuiteCRM_Session_ID']), "$lang/suitecrm", 'SuiteCRM', 'suitecrm', 'crm', t('Core sales, customer service and marketing processes with SuiteCRM'));
$submenu .= _zuitedesk_option($deskmenu[7], "$lang/organizations", t('Organizations'), 'org', 'org');
$partial = '';
$partial .= _zuitedesk_option($deskmenu[1], "$lang/admin/user/user/local", t('User list'), 'login', t('Allows to view list users and register new users'));
$partial .= _zuitedesk_option($deskmenu[8], "$lang/people", t('People'), 'people');
$partial .= _zuitedesk_option($deskmenu[9], "$lang/teams", t('Teams'), 'team');
$partial .= _zuitedesk_option($deskmenu[1], "$lang/admin/user/user/local", t('User list'), 'userlist', 'login', t('Allows to view list users and register new users'));
$partial .= _zuitedesk_option($deskmenu[8], "$lang/people", t('People'), 'people', 'people');
$partial .= _zuitedesk_option($deskmenu[9], "$lang/teams", t('Teams'), 'teams', 'team');
$submenu .= _zuitedesk_divider($submenu, $partial);
$partial = '';
$partial .= _zuitedesk_option(FALSE, "$lang/activity", t('Activity'), 'eye');
$partial .= _zuitedesk_option(FALSE, "$lang/activity", t('Activity'), 'activity', 'eye');
$submenu .= _zuitedesk_divider($submenu, $partial);
$pl .= _zuitedesk_submenu($submenu, t('Contacts'));
$pl .= _zuitedesk_submenu($submenu, t('Contacts'), 'contacts');
// Plan submenu:
$submenu = '';
$submenu .= _zuitedesk_option($deskmenu[2], "$lang/projects", t('Projects'), 'project');
$submenu .= _zuitedesk_option($deskmenu[3], "$lang/tasks", t('Tasks'), 'task');
$submenu .= _zuitedesk_option($deskmenu[4], "$lang/tasks/kanban", t('Tasks Kanban'), 'kanban', t('Kanban board view for your tasks'));
$submenu .= _zuitedesk_option($deskmenu[2], "$lang/projects", t('Projects'), 'projects', 'project');
$submenu .= _zuitedesk_option($deskmenu[3], "$lang/tasks", t('Tasks'), 'tasks', 'task');
$submenu .= _zuitedesk_option($deskmenu[4], "$lang/tasks/kanban", t('Tasks Kanban'), 'kanban', 'kanban', t('Kanban board view for your tasks'));
$partial = '';
$partial .= _zuitedesk_option($deskmenu[5], "$lang/events", t('Events'), 'event');
$partial .= _zuitedesk_option($deskmenu[5], "$lang/calendar", t('Calendar'), 'calendar');
$partial .= _zuitedesk_option($deskmenu[5], "$lang/events", t('Events'), 'events', 'event');
$partial .= _zuitedesk_option($deskmenu[5], "$lang/calendar", t('Calendar'), 'calendar', 'calendar');
$submenu .= _zuitedesk_divider($submenu, $partial);
$partial = '';
$partial .= _zuitedesk_option($deskmenu[6], "$lang/doks", t('Documentation'), 'doc');
$partial .= _zuitedesk_option($deskmenu[6], "$lang/lexicon", t('Glossary'), 'glossary');
$partial .= _zuitedesk_option($deskmenu[6], "$lang/doks", t('Documentation'), 'dok', 'doc');
$partial .= _zuitedesk_option($deskmenu[6], "$lang/lexicon", t('Glossary'), 'glossary', 'glossary');
$submenu .= _zuitedesk_divider($submenu, $partial);
$pl .= _zuitedesk_submenu($submenu, t('Plan'));
$pl .= _zuitedesk_submenu($submenu, t('Plan'), 'plan');
// Assistance submenu:
$submenu = '';
$submenu .= _zuitedesk_option($deskmenu[10], "$lang/tickets", t('Tickets'), 'ticket');
$submenu .= _zuitedesk_option($deskmenu[10], "$lang/tickets", t('Tickets'), 'tickets', 'ticket');
$partial = '';
$partial .= _zuitedesk_option($deskmenu[11], "$lang/timetrackings", t('Timetrackings'), 'timetracking');
$partial .= _zuitedesk_option($deskmenu[12], "$lang/expenses", t('Expenses'), 'expense');
$partial .= _zuitedesk_option($deskmenu[13], "$lang/invoices", t('Invoices'), 'invoice');
$partial .= _zuitedesk_option($deskmenu[11], "$lang/timetrackings", t('Timetrackings'), 'timetracking', 'timetracking');
$partial .= _zuitedesk_option($deskmenu[12], "$lang/expenses", t('Expenses'), 'expenses', 'expense');
$partial .= _zuitedesk_option($deskmenu[13], "$lang/invoices", t('Invoices'), 'invoices', 'invoice');
$submenu .= _zuitedesk_divider($submenu, $partial);
$partial = '';
$partial .= _zuitedesk_option($deskmenu[16], "$lang/trash", t('Trash'), 'trash');
$partial .= _zuitedesk_option($deskmenu[16], "$lang/trash", t('Trash'), 'trash', 'trash');
$submenu .= _zuitedesk_divider($submenu, $partial);
$pl .= _zuitedesk_submenu($submenu, t('Assistance'));
$pl .= _zuitedesk_submenu($submenu, t('Assistance'), 'assistance');
// User submenu:
$submenu = '';
$submenu .= _zuitedesk_option($deskmenu[14], "$lang/notes", t('My notes'), 'note');
$submenu .= _zuitedesk_option($deskmenu[15], "$lang/ideas", t('My ideas'), 'idea');
$submenu .= _zuitedesk_option(TRUE, "$lang/?tour=suitedesk", 'SuiteDesk Tour', 'help', t('A beginner\'s guide to SuiteDesk'));
$submenu .= _zuitedesk_option($deskmenu[14], "$lang/notes", t('My notes'), 'notes', 'note');
$submenu .= _zuitedesk_option($deskmenu[15], "$lang/ideas", t('My ideas'), 'ideas', 'idea');
$submenu .= _zuitedesk_option(TRUE, '', 'SuiteDesk Tour', 'help', 'help', t('A beginner\'s guide to SuiteDesk'));
$partial = '';
$partial .= _zuitedesk_option($deskmenu[17], "$lang/user/watcher", t('Watcher'), 'apply');
$partial .= _zuitedesk_option($deskmenu[17], "$lang/user/watcher", t('Watcher'), 'watcher', 'apply');
$submenu .= _zuitedesk_divider($submenu, $partial);
$partial = '';
$partial .= _zuitedesk_option(TRUE, "$lang/" . drupal_get_path_alias('user/' . $user->uid) . '/edit', t('My SuiteDesk profile'), 'user', t('Edit my personal account options'));
$partial .= _zuitedesk_option(TRUE, "$lang/logout", t('Logout'), 'logout', t('Close your session'));
$partial .= _zuitedesk_option(TRUE, "$lang/" . drupal_get_path_alias('user/' . $user->uid) . '/edit', t('My SuiteDesk profile'), 'profile', 'user', t('Edit my personal account options'));
$partial .= _zuitedesk_option(TRUE, "$lang/logout", t('Logout'), 'logout', 'logout', t('Close your session'));
$submenu .= _zuitedesk_divider($submenu, $partial);
$user_name = !empty($user->picture) ? '<div id="picture-menu"><img src="/' . preg_replace('/\/files\/suitedesk\//', '/system/files/', $user->picture) . '" alt="' . $user->name . '" /></div>' : '';
$firstname = strpos($user->name, ' ');
$user_name .= $firstname === FALSE ? $user->name : substr($user->name, 0, $firstname);
$pl .= _zuitedesk_submenu($submenu, $user_name);
$pl .= _zuitedesk_submenu($submenu, $user_name, 'user');
}
else {
$pl = _zuitedesk_option(TRUE, "$lang/user/login", t('Login') . ' <span class="icon-login"></span>', NULL, t('New session for authenticated users'));
$pl = _zuitedesk_option(TRUE, "$lang/user/login", t('Login') . ' <span class="icon-login"></span>', 'login', NULL, t('New session for authenticated users'));
}
$vars['primary_links'] = '<h2 class="element-invisible">' . t('Main menu') . '</h2>';
@ -242,8 +242,6 @@ function zuitedesk_preprocess_page(&$vars, $hook) {
// Special class and bootstrap tour for SuiteDesk pages:
$vars['classes_array'][] = 'suitedesk';
$closure = FALSE;
// Node vars.
if (!empty($vars['node'])) {
$node = $vars['node'];
@ -254,32 +252,20 @@ function zuitedesk_preprocess_page(&$vars, $hook) {
// Javascript to confirm projects cloning.
if ($vars['node']->type == 'stormproject' && user_access('Storm project: clone projects')) {
drupal_add_js('(function($) {$("li.stormproject_clone_run a").on("click", function() {return confirm("' . t('WARNING! This operation will duplicate all the project, tasks and documents in book. Are you sure?') . '");});})($jq);', 'inline', 'footer', FALSE);
$closure = TRUE;
$vars['closure'] .= drupal_get_js('footer');
}
}
// For first time users login or on demand:
if ($_SESSION['deskmenu'][0] || !empty($_GET['tour'])) {
drupal_add_js(drupal_get_path('theme', 'zuitedesk') . '/js/bootstrap-tour.min.js', 'theme', 'footer');
drupal_add_js(drupal_get_path('theme', 'zuitedesk') . '/js/tourpro.js', 'theme', 'footer');
$closure = TRUE;
}
if ($closure) {
$vars['closure'] = drupal_get_js('footer');
}
/*
$vars['sample_variable'] = t('Lorem ipsum.');
// To remove a class from $classes_array, use array_diff().
//$vars['classes_array'] = array_diff($vars['classes_array'], array('class-to-remove'));
*/
// Guided tour:
$tour = 'tourmenu';
drupal_add_js(drupal_get_path('theme', 'zuitedesk') . "/js/$tour.js", 'theme', 'footer', FALSE);
}
function _zuitedesk_option($access, $url, $text, $icon = NULL, $message = NULL) {
function _zuitedesk_option($access, $url, $text, $id = NULL, $icon = NULL, $message = NULL) {
$option = '';
if ($access) {
$option .= '<li><a href="' . $url . '"';
$option .= empty($id) ? '<li>' : '<li id="menu-' . $id . '">';
$option .= '<a href="' . $url . '"';
$option .= empty($message) ? '' : ' title="' . $message . '"';
$option .= empty($icon) ? '>' : ' class="icon-' . $icon . '"> ';
$option .= $text . '</a></li>';
@ -291,8 +277,14 @@ function _zuitedesk_divider(&$submenu, &$partial) {
return !empty($submenu) && !empty($partial) ? '<li class="divider"></li>' . $partial : $partial;
}
function _zuitedesk_submenu(&$submenu, $text) {
return !empty($submenu) ? '<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">' . $text . ' <span class="caret"></span></a><ul class="dropdown-menu">' . $submenu . '</ul></li>' : '';
function _zuitedesk_submenu(&$submenu, $text, $id = NULL) {
$options = '';
if (!empty($submenu)) {
$options .= empty($id) ? '<li class="dropdown">' : '<li id="menu-' . $id . '" class="dropdown">';
$options .= '<a href="#" class="dropdown-toggle" data-toggle="dropdown">' . $text . ' <span class="caret"></span></a>';
$options .= '<ul class="dropdown-menu">' . $submenu . '</ul></li>';
}
return $options;
}
function _zuitedesk_social_link($social_field, $title, $class) {

View file

@ -1,6 +1,6 @@
name = SuiteDesk Theme
description = SuiteDesk Theme Zen.
version = 0.2.43
version = 0.2.45
screenshot = screenshot.png
@ -8,7 +8,6 @@ core = 6.x
base theme = zen
;;;;;;;;;;;;;;;;;;;;;
;; CSS
;;;;;;;;;;;;;;;;;;;;;
@ -54,17 +53,16 @@ stylesheets[all][] = modules/storm/storm-node.css
stylesheets[all][] = modules/print/css/printlinks.css
;;;;;;;;;;;;;;;;;;;;;
;; Javascript
;;;;;;;;;;;;;;;;;;;;;
; BOOTSTRAP:
scripts[] = js/bootstrap.min.js
scripts[] = js/bootstrap-tour.min.js
scripts[] = js/runapp.js
;;;;;;;;;;;;;;;;;;;;;
;; Regions
;;;;;;;;;;;;;;;;;;;;;
@ -89,7 +87,6 @@ regions[footer] = Footer
regions[page_closure] = Page closure
;;;;;;;;;;;;;;;;;;;;;
;; Features
;;;;;;;;;;;;;;;;;;;;;
@ -114,7 +111,6 @@ features[] = favicon
; features[] = secondary_links
;;;;;;;;;;;;;;;;;;;;;
;; Theme settings
;;;;;;;;;;;;;;;;;;;;;