jssource/src_files/include/javascript/tour.js

   1 /*********************************************************************************
   2  * SugarCRM Community Edition is a customer relationship management program developed by
   3  * SugarCRM, Inc. Copyright (C) 2004-2012 SugarCRM Inc.
   4  *
   5  * This program is free software; you can redistribute it and/or modify it under
   6  * the terms of the GNU Affero General Public License version 3 as published by the
   7  * Free Software Foundation with the addition of the following permission added
   8  * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
   9  * IN WHICH THE COPYRIGHT IS OWNED BY SUGARCRM, SUGARCRM DISCLAIMS THE WARRANTY
  10  * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
  11  *
  12  * This program is distributed in the hope that it will be useful, but WITHOUT
  13  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  14  * FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
  15  * details.
  16  *
  17  * You should have received a copy of the GNU Affero General Public License along with
  18  * this program; if not, see http://www.gnu.org/licenses or write to the Free
  19  * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
  20  * 02110-1301 USA.
  21  *
  22  * You can contact SugarCRM, Inc. headquarters at 10050 North Wolfe Road,
  23  * SW2-130, Cupertino, CA 95014, USA. or at email address contact@sugarcrm.com.
  24  *
  25  * The interactive user interfaces in modified source and object code versions
  26  * of this program must display Appropriate Legal Notices, as required under
  27  * Section 5 of the GNU Affero General Public License version 3.
  28  *
  29  * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
  30  * these Appropriate Legal Notices must retain the display of the "Powered by
  31  * SugarCRM" logo. If the display of the logo is not reasonably feasible for
  32  * technical reasons, the Appropriate Legal Notices must display the words
  33  * "Powered by SugarCRM".
  34  ********************************************************************************/
  35
  36
  37
  38 SUGAR.tour = function() {
  39 var tourModal;
  40         return {
  41                 init: function(params) {
  42                         var modals = params.modals;
  43
  44                         tourModal = $('<div id="'+params.id+'" class="modal"></div>').modal({backdrop: false}).draggable({handle: ".modal-header"});
  45
  46                         var tourIdSel = "#"+params.id;
  47
  48                         $.ajax({
  49                                 url: params.modalUrl,
  50                                 success: function(data){
  51                                         $(tourIdSel).html(data);
  52
  53                                         $(tourIdSel+'Start a.btn.btn-primary').on("click",function(e){
  54                                                 $(tourIdSel+'Start').css("display","none");
  55                                                 $(tourIdSel+'End').css("display","block");
  56                                                 tourModal.modal("hide");
  57                                                 modalArray[0].modal('show');
  58                         $(modals[0].target).popoverext('show');
  59                                         });
  60                                         $(tourIdSel+'Start a.btn').not('.btn-primary').on("click",function(e){
  61                                                 $(tourIdSel+'Start').css("display","none");
  62                                                 $(tourIdSel+'End').css("display","block");
  63                         centerModal();
  64                                         });
  65                                         $(tourIdSel+' a.close').on("click",function(e){
  66                                                 tourModal.modal("hide");
  67                                                 SUGAR.tour.saveUserPref(params.prefUrl);
  68                                                 params.onTourFinish();
  69                                         });
  70                                         $(tourIdSel+'End a.btn.btn-primary').on("click",function(e){
  71                                                 tourModal.modal("hide");
  72                                                 SUGAR.tour.saveUserPref(params.prefUrl);
  73                                                 params.onTourFinish();
  74                                         });
  75
  76                     centerModal();
  77
  78                     $('<div style="position: absolute;" id="tourArrow">arrow</div>');
  79                     var modalArray = new Array();
  80
  81                                         for(var i=0; i<modals.length; i++) {
  82                         var modalId =  modals[i].target.replace("#","")+"_modal";
  83                         modalArray[i] = $('<div id="'+modalId+'" class="modal '+params.className+'"></div>').modal({backdrop: false}).draggable({handle: ".modal-header"});
  84 //                        modalArray[i].modal('show');
  85                         var modalContent = "<div class=\"modal-header\"><a class=\"close\" data-dismiss=\"modal\">×</a><h3>"+modals[i].title+"</h3></div>";
  86
  87                         modalContent += "<div class=\"modal-body\">"+modals[i].content+"</div>" ;
  88
  89                         modalContent += footerTemplate(i,modals);
  90                         $('#'+modalId).html(modalContent);
  91                         modalArray[i].modal("hide");
  92
  93
  94                                                 $(modals[i].target).ready(function(){
  95
  96                             var direction,bounce;
  97                             if (modals[i].placement == "top right") {
  98                                bounce = "up right";
  99                                direction = "down right"
 100                             } else if (modals[i].placement == "top left") {
 101                                bounce = "up left";
 102                                direction = "down left"
 103                             } else if(modals[i].placement == "top") {
 104                                bounce = "up";
 105                                direction = "down"
 106                             } else if (modals[i].placement == "bottom right") {
 107                                 bounce = "down right";
 108                                 direction = "up right"
 109                             } else if (modals[i].placement == "bottom left") {
 110                                 bounce = "down left";
 111                                 direction = "up left"
 112                             } else {
 113                                 bounce = "down";
 114                                 direction = "right"
 115                             }
 116
 117                                                         $(modals[i].target).popoverext({
 118                                                         title: "",
 119                                                         content: "arrow",
 120                                                         footer: "",
 121                                                         placement: modals[i].placement,
 122                                                         id: true,
 123                                                         fixed: true,
 124                                                         trigger: 'manual',
 125                             template: '<div class="popover arrow"><div class="pointer ' +direction+'"></div></div>',
 126                             onShow:  function(){
 127                                 $('.pointer').css('top','0px');
 128
 129                                 $(".popover .pointer")
 130                                   .effect("custombounce", { times:1000, direction: bounce, distance: 50, gravity: false }, 2000,
 131                                     function(){
 132
 133 //                                    $('.pointer').attr('style','');
 134
 135                                     }
 136                                 );
 137                             },
 138                             leftOffset: modals[i].leftOffset ? modals[i].leftOffset : 0,
 139                             topOffset: modals[i].topOffset ? modals[i].topOffset : 0,
 140                             hideOnBlur: true
 141
 142                                                         });
 143                                                 });
 144                         //empty popover div and insert arrow
 145                         $(modals[i].target+"Popover").empty().html("arrow");
 146
 147                                         }
 148
 149                     $(window).resize(function() {
 150                         centerModal();
 151                     });
 152                     function centerModal() {
 153                         $(tourIdSel).css("left",$(window).width()/2 - $(tourIdSel).width()/2);
 154                         $(tourIdSel).css("margin-top",-$(tourIdSel).height()/2);
 155                     }
 156
 157                     function nextModal (i) {
 158
 159
 160                         if(modals.length - 1 != i) {
 161                             $(modals[i].target).popoverext('hide');
 162                             $(modals[i+1].target).popoverext('show');
 163                             modalArray[i].modal('hide');
 164                             modalArray[i+1].modal('show');
 165                         } else {
 166                             $(modals[i].target).popoverext('hide');
 167                             modalArray[i].modal('hide');
 168                             tourModal.modal("show");
 169                             centerModal();
 170                         }
 171
 172                     }
 173
 174                     function prevModal (i){
 175
 176                         $(modals[i].target).popoverext('hide');
 177                         $(modals[i-1].target).popoverext('show');
 178                         modalArray[i].modal('hide');
 179                         modalArray[i-1].modal('show');
 180                     }
 181
 182
 183                     function skipTour (i) {
 184                         $(modals[i].target).popoverext('hide');
 185                         modalArray[i].modal('hide');
 186                         tourModal.modal("show");
 187                         centerModal();
 188                     }
 189
 190                     function footerTemplate (i,modals) {
 191                         var content = $('<div></div>')
 192                         var footer = $("<div class=\"modal-footer\"></div>");
 193
 194                         var skip = $("<a href=\"#\" class=\"btn btn-invisible\" id=\"skipTour\">"+SUGAR.language.get('app_strings', 'LBL_TOUR_SKIP')+"</a>");
 195                         var next = $('<a class="btn btn-primary" id="nextModal'+i+'" href="#">'+SUGAR.language.get('app_strings', 'LBL_TOUR_NEXT')+' <i class="icon-play icon-xsm"></i></a>');
 196                         content.append(footer);
 197                         footer.append(skip).append(next);
 198
 199                         var back = $('<a class="btn" href="#" id="prevModal'+i+'">'+SUGAR.language.get('app_strings', 'LBL_TOUR_BACK')+'</a>');
 200
 201
 202                         $('#nextModal'+i).live("click", function(){
 203                             nextModal(i);
 204                         });
 205
 206                         $('#prevModal'+i).live("click", function(){
 207                             prevModal(i);
 208                         });
 209
 210                         $('#skipTour').live("click", function(){
 211                             skipTour(i);
 212                         });
 213
 214
 215
 216                         if(i != 0) {
 217                             footer.append(back);
 218                         }
 219
 220                         return content.html();
 221                     }
 222
 223
 224
 225
 226
 227                                 }
 228                         });
 229                 },
 230                 saveUserPref: function(url) {
 231                 $.ajax({
 232                         type: "GET",
 233                         url: url
 234                     });
 235                 }
 236
 237
 238
 239
 240          };
 241 }();