1 /** 2 * Web Site Tour Builder for Wordpress 3 * 4 * @package websitetourbuilder 5 * @author JoomlaForce Team [joomlaforce.com] 6 * @license GNU General Public License version 2 or later; see LICENSE.txt 7 * @link http://joomlaforce.com 8 * @copyright Copyright © 2014 JoomlaForce 9 */ 10 11var current_step = 0; 12 13;(function (gQuery, window, document, undefined) { 14 15 /** 16 * GLOBAR VAR 17 */ 18 19 var _globalWalkthrough = {}, 20 _elements = [], 21 _activeWalkthrough, 22 _activeId, 23 _counter = 0, 24 _isCookieLoad, 25 _firstTimeLoad = true, 26 _onLoad = true, 27 _index = 0, 28 _isWalkthroughActive = true, 29 $jpwOverlay = gQuery('<div id="jpwOverlay"></div>'), 30 $jpWalkthrough = gQuery('<div id="jpWalkthrough"></div>'), 31 $jpwTooltip = gQuery('<div id="jpwTooltip"></div>'); 32 33 /** 34 * PUBLIC METHOD 35 */ 36 37 var methods = { 38 39 isPageWalkthroughActive: function () { 40 if (_isWalkthroughActive) { 41 return true; 42 } 43 return false; 44 45 }, 46 47 currIndex: function () { 48 return _index; 49 }, 50 51 //init method 52 init: function (options) { 53 54 var options = gQuery.extend({}, gQuery.fn.pagewalkthrough.options, options); 55 56 57 return this.each(function () { 58 var $this = gQuery(this), 59 elementId = $this.attr('id'); 60 61 options = options || {}; 62 options.elementID = elementId; 63 64 _globalWalkthrough[elementId] = options; 65 _elements.push(elementId); 66 67 //check if onLoad and this is first time load 68 if (options.onLoad) { 69 _counter++; 70 } 71 72 //get first onload = true 73 if (_counter == 1 && _onLoad) { 74 _activeId = elementId; 75 _activeWalkthrough = _globalWalkthrough[_activeId]; 76 _onLoad = false; 77 } 78 79 //set the _index from cookie if needed 80 if(typeof(redirectCookie)!="undefined" && redirectCookie!="undefined" && redirectCookie!='' && !isNaN(redirectCookie) && typeof(_activeWalkthrough)!="undefined" && options.walkthroughCookieKey!="") 81 { 82 var lastStepNo = getCookie(options.walkthroughCookieKey); 83 if(typeof(lastStepNo)!=="undefined" && !isNaN(lastStepNo)&& typeof(_activeWalkthrough.steps[_index])!=="undefined") 84 { 85 _index = parseInt(lastStepNo); 86 } 87 } 88 89 //read remember me cookie 90 91 92 // when user scroll the page, scroll it back to keep walkthought on user view 93 gQuery(window).scroll(function () { 94 if (typeof(_isWalkthroughActive)!="undefined" && _isWalkthroughActive && _activeWalkthrough.steps[_index].stayFocus) { 95 clearTimeout(gQuery.data(this, 'scrollTimer')); 96 gQuery.data(this, 'scrollTimer', setTimeout(function () { 97 scrollToTarget(_activeWalkthrough); 98 }, 250)); 99 } 100 101 return false; 102 103 }); 104 105 106 if(options.enableKeyboard) 107 { 108 gQuery(document).bind('keydown.fb', function (e) { 109 var code = e.which || e.keyCode, 110 target = e.target || e.srcElement; 111 if (code === 27) { 112 // 113 if(gQuery('#jpwClose').length > 0) 114 { 115 methods.close(); 116 } 117 return false; 118 } 119 if (!e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && !(target && (target.type || gQuery(target).is('[contenteditable]')))) 120 { 121 122 if((code == 39 || code == 40) && (gQuery('a.next-step','#tooltipInner').length > 0) )//next button 123 { 124 //gQuery('a.next-step','#tooltipInner').click(); 125 gQuery.pagewalkthrough('next',e); 126 } 127 if((code == 37 || code== 38) && (gQuery('a.prev-step','#tooltipInner').length > 0) )//next button 128 { 129 gQuery.pagewalkthrough('prev',e); 130 //gQuery('a.prev-step','#tooltipInner').click(); 131 } 132 } 133 }); 134 } 135 136 }); 137 138 }, 139 140 renderOverlay: function () { 141 142 //if each walkthrough has onLoad = true, throw warning message to the console 143 if (_counter > 1) { 144 debug('Warning: Only first walkthrough will be shown onLoad as default'); 145 } 146 147 //get cookie load
148 _isCookieLoad = getCookie('_walkthrough-' + _activeId); 149 150 //check if first time walkthrough 151 if (_isCookieLoad == undefined) { 152 _isWalkthroughActive = true; 153 buildWalkthrough(); 154 showCloseButton(); 155 156 scrollToTarget(); 157 158 setTimeout(function () { 159 //call onAfterShow callback 160 if (_index == 0 && _firstTimeLoad) { 161 if (!onAfterShow()) return; 162 } 163 }, 100); 164 } else {//check when user used to close the walkthrough to call the onCookieLoad callback 165 onCookieLoad(_globalWalkthrough); 166 } 167 }, 168 169 restart: function (e) { 170 if (_index == 0) return; 171 172 _index = 0; 173 if(!(onRestart(e)))return; 174 if(!(onEnter(e)))return; 175 buildWalkthrough(); 176 177 scrollToTarget(); 178 179 }, 180 181 close: function (target) { 182 183 _index = 0; 184 _firstTimeLoad = true; 185 186 _isWalkthroughActive = false; 187 188 if (target) { 189 //set cookie to false 190 setCookie('_walkthrough-' + target, 0, 365); 191 _isCookieLoad = getCookie('_walkthrough-' + target); 192 } else { 193 //set cookie to false 194 setCookie('_walkthrough-' + _activeId, 0, 365); 195 _isCookieLoad = getCookie('_walkthrough-' + _activeId); 196 } 197 198 if (gQuery('#jpwOverlay').length) { 199 $jpwOverlay.fadeOut('slow', function () { 200 gQuery(this).remove(); 201 }); 202 } 203 204 if (gQuery('#jpWalkthrough').length) { 205 $jpWalkthrough.fadeOut('slow', function () { 206 gQuery(this).html('').remove(); 207 }); 208 } 209 210 if (gQuery('#jpwClose').length) { 211 gQuery('#jpwClose').fadeOut('slow', function () { 212 gQuery(this).html('').remove(); 213 }); 214 } 215 216 //added by sam 217 var opt = _activeWalkthrough; 218 219 if(typeof(opt)!="undefined" && typeof(opt.enableTimer)!="undefined" && opt.enableTimer && websiteTourTimer) 220 { 221 gQuery('#time_progress','#tooltipInner').chrony('set', { destroy: true }); 222 } 223 224 //added by sam, reset the interval if exist 225 //clearInterval(websiteTourTimer); 226 //websiteTourTime = 0; 227 }, 228 229 show: function (target) { 230 _isWalkthroughActive = true; 231 _firstTimeLoad = true; 232 _activeId = target; 233 _activeWalkthrough = _globalWalkthrough[target]; 234 235 current_step = _index; 236 237 buildWalkthrough(); 238 showCloseButton(); 239 240 scrollToTarget(); 241 242 //call onAfterShow callback 243 if (_index == 0 && _firstTimeLoad) { 244 if (!onAfterShow()) return; 245 } 246 247 }, 248 249 responsiveshow: function (target, indexid) { 250 _isWalkthroughActive = true; 251 _firstTimeLoad = false; 252 _activeId = target; 253 _activeWalkthrough = _globalWalkthrough[target]; 254 _index = indexid; 255 256 buildWalkthrough(); 257 258 scrollToTarget(); 259 260 //call onAfterShow callback 261 if (_index == 0 && _firstTimeLoad) { 262 if (!onAfterShow()) return; 263 } 264 265 }, 266 267 next: function (e) { 268 269 _firstTimeLoad = false; 270 if (_index == (_activeWalkthrough.steps.length - 1)) return; 271 if(!onLeave(e))return; 272 _index = parseInt(_index) + 1; 273 274 current_step = _index; 275 //console.log(rokon+'next'); 276 277 if(!onEnter(e))return; 278 buildWalkthrough(); 279 280 scrollToTarget(); 281 //added by sam to save step no. at cookie 282 283 284 if(typeof(_activeWalkthrough)!=="undefined" && _activeWalkthrough.walkthroughCookieKey!="") 285 {
286 setCookie(_activeWalkthrough.walkthroughCookieKey, _index, _activeWalkthrough.cookie_expire_day); 287 } 288 289 if(typeof(_activeWalkthrough)!=="undefined" && 290 typeof(_activeWalkthrough.steps[_index-1])!="undefined" && typeof(_activeWalkthrough.steps[_index-1].redirect_to)!="undefined") 291 { 292 //must be loadWalkthroughFromCookie enabled 293 setCookie('redirect_pending', _index, 1); 294 //put redirect tracker 295 setCookie('redirect_tracker_'+_index,window.location.href); 296 297 //redirect 298 window.location.href = _activeWalkthrough.steps[_index-1].redirect_to; 299 //close the tour 300 methods.close(); 301 } 302 else 303 { 304 //alert(123); 305 setCookie('redirect_pending', "", -1); 306 } 307 }, 308 309 prev: function (e) { 310 311 if (_index == 0) return; 312 var lastIndex = _index;//added by sam 313 if(!onLeave(e))return; 314 _index = parseInt(_index) - 1; 315 316 current_step = _index; 317 318 //console.log(rokon+'prev'); 319 320 if(!onEnter(e))return; 321 buildWalkthrough(); 322 323 scrollToTarget(); 324 //added by sam to save step no. at cookie 325 326 if(typeof(_activeWalkthrough)!=="undefined" && _activeWalkthrough.walkthroughCookieKey!="") 327 { 328 setCookie(_activeWalkthrough.walkthroughCookieKey, _index, _activeWalkthrough.cookie_expire_day); 329 } 330 if(typeof(_activeWalkthrough)!=="undefined" && 331 typeof(_activeWalkthrough.steps[lastIndex])!="undefined") 332 { 333 var redirectHistory = getCookie('redirect_tracker_'+lastIndex); 334 if(typeof(redirectHistory)!="undefined" && redirectHistory!="undefined" && redirectHistory!="") 335 { 336 setCookie('redirect_tracker_'+lastIndex,"",-1); 337 //must be loadWalkthroughFromCookie enabled 338 setCookie('redirect_pending', _index, 1); 339 window.location.href = redirectHistory; 340 //close the tour 341 methods.close(); 342 } 343 else 344 { 345 setCookie('redirect_pending', "", -1); 346 } 347 } 348 }, 349 350 getOptions: function (activeWalkthrough) { 351 var _wtObj; 352 353 //get only current active walkthrough 354 if (activeWalkthrough) { 355 _wtObj = {}; 356 _wtObj = _activeWalkthrough; 357 //get all walkthrough 358 } else { 359 _wtObj = []; 360 for (var wt in _globalWalkthrough) { 361 _wtObj.push(_globalWalkthrough[wt]); 362 } 363 } 364 365 return _wtObj; 366 } 367 368 369 };//end public method 370 371 372 373 /* 374 * BUILD OVERLAY 375 */ 376 function buildWalkthrough() { 377 378 var opt = _activeWalkthrough; 379 380 //call onBeforeShow callback 381 if (_index == 0 && _firstTimeLoad) { 382 if (!onBeforeShow()) return; 383 } 384 385 if (typeof(opt)!=="undefined" && opt.steps[_index].popup.type != 'modal' && opt.steps[_index].popup.type != 'nohighlight') { 386 387 $jpWalkthrough.html(''); 388 389 390 //// custom added by rokon 391 var viewportwidth_mob; 392 var viewportheight_mob; 393 394 if (typeof window.innerWidth != "undefined") 395 { 396 viewportwidth_mob = window.innerWidth, 397 viewportheight_mob = window.innerHeight 398 } 399 else if (typeof document.documentElement != "undefined" 400 && typeof document.documentElement.clientWidth != 401 "undefined" && document.documentElement.clientWidth != 0) 402 { 403 viewportwidth_mob = document.documentElement.clientWidth, 404 viewportheight_mob = document.documentElement.clientHeight 405 } 406 else 407 { 408 viewportwidth_mob = document.getElementsByTagName("body")[0].clientWidth, 409 viewportheight_mob = document.getElementsByTagName("body")[0].clientHeight 410 } 411 412 if(viewportwidth_mob < 956) 413 { 414 opt.steps[_index].popup.position = 'bottom'; 415 }
416 ////////////////// 417 418 //check if wrapper is not empty or undefined 419 420 if (opt.steps[_index].wrapper == '' || opt.steps[_index].wrapper == undefined) { 421 alert('Your walkthrough position is: "' + opt.steps[_index].popup.type + '" but wrapper is empty or undefined. Please check your "' + _activeId + '" wrapper parameter.'); 422 return; 423 } 424 //added by sam start 425 //check the wrapper is really exist 426 if(gQuery(opt.steps[_index].wrapper).length == 0) 427 { 428 return; 429 } 430 //added by sam end 431 var topOffset = cleanValue(gQuery(opt.steps[_index].wrapper).offset().top); 432 var leftOffset = cleanValue(gQuery(opt.steps[_index].wrapper).offset().left); 433 var transparentWidth = cleanValue(gQuery(opt.steps[_index].wrapper).innerWidth()) || cleanValue(gQuery(opt.steps[_index].wrapper).width()); 434 var transparentHeight = cleanValue(gQuery(opt.steps[_index].wrapper).innerHeight()) || cleanValue(gQuery(opt.steps[_index].wrapper).height()); 435 436 //get all margin and make it gorgeous with the 'px', if it has no px, IE will get angry !! 437 var marginTop = cssSyntax(opt.steps[_index].margin, 'top'), 438 marginRight = cssSyntax(opt.steps[_index].margin, 'right'), 439 marginBottom = cssSyntax(opt.steps[_index].margin, 'bottom'), 440 marginLeft = cssSyntax(opt.steps[_index].margin, 'left'), 441 roundedCorner = 30, 442 overlayClass = '', 443 killOverlay = ''; 444 445 var overlayTopStyle = { 446 'height': cleanValue(parseInt(topOffset) - (parseInt(marginTop) + (roundedCorner))) 447 } 448 449 var overlayLeftStyle = { 450 'top': overlayTopStyle.height, 451 'width': cleanValue(parseInt(leftOffset) - (parseInt(marginLeft) + roundedCorner)), 452 'height': cleanValue(parseInt(transparentHeight) + (roundedCorner * 2) + parseInt(marginTop) + parseInt(marginBottom)) 453 } 454 455 456 //check if use overlay 457 if (opt.steps[_index].overlay == undefined || opt.steps[_index].overlay) { 458 overlayClass = 'overlay'; 459 } else { 460 overlayClass = 'noOverlay'; 461 killOverlay = 'killOverlay'; 462 } 463 464 var overlayTop = gQuery('<div id="overlayTop" class="' + overlayClass + '"></div>').css(overlayTopStyle).appendTo($jpWalkthrough); 465 var overlayLeft = gQuery('<div id="overlayLeft" class="' + overlayClass + '"></div>').css(overlayLeftStyle).appendTo($jpWalkthrough); 466 467 468 if (!opt.steps[_index].accessable) { 469 470 471 //alert(cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight))); 472 473 // modified date oct 07 474 if(viewportwidth < 620) 475 { 476 477 if(wp_version_var.replace(".", "") <= '43') 478 { 479 var middle_right_height = cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)); 480 } else { 481 482 //alert(viewportwidth+'--'+cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom))); 483 if((parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight)) > 284) 484 { 485 var middle_right_height = cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)); 486 } else { 487 var middle_right_height = cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)); 488 } 489 490 } 491 } else { 492 var middle_right_height = cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)); 493 } 494 // modified date oct 07 495 496 497 //if(wp_version_var.replace(".", "") <= '43') 498 //{ 499 var topCenterWidthCus = cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight) - 10); 500 var middleCenterWidthCus = cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight) - 10); 501 var bottomCenterWidthCus = cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight) - 10); 502 /*} else { 503 var topCenterWidthCus = cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight)); 504 var middleCenterWidthCus = cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight)); 505 var bottomCenterWidthCus = cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight)); 506 }*/ 507 508 var highlightedAreaStyle = { 509 'top': overlayTopStyle.height, 510 'left': overlayLeftStyle.width, 511 'topCenter': { 512 'width': topCenterWidthCus 513 }, 514 'middleLeft': { 515 'height': cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)) 516 }, 517 'middleCenter': { 518 'width': middleCenterWidthCus, 519 'height': cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)) 520 }, 521 'middleRight': { 522 'height': middle_right_height //// modified date oct 07 523 }, 524 'bottomCenter': { 525 'width': bottomCenterWidthCus 526 } 527 } 528 529 //alert(viewportwidth); 530 531 var highlightedArea = gQuery('<div id="highlightedArea"></div>').css(highlightedAreaStyle).appendTo($jpWalkthrough); 532 533 highlightedArea.html('<div>' + 534 '<div id="topLeft" class="' + killOverlay + '"></div>' + 535 '<div id="topCenter" class="' + killOverlay + '" style="width:' + highlightedAreaStyle.topCenter.width + ';"></div>' + 536 '<div id="topRight" class="' + killOverlay + '"></div>' + 537 '</div>' + 538 539 '<div style="clear: left;">' + 540 '<div id="middleLeft" class="' + killOverlay + '" style="height:' + highlightedAreaStyle.middleLeft.height + ';"></div>' + 541 '<div id="middleCenter" class="' + killOverlay + '" style="width:' + highlightedAreaStyle.middleCenter.width + ';height:' + highlightedAreaStyle.middleCenter.height + '"> </div>' + 542 '<div id="middleRight" class="' + killOverlay + '" style="height:' + highlightedAreaStyle.middleRight.height + ';"></div>' + 543 '</div>' + 544 545 '<div style="clear: left;">' + 546 '<div id="bottomLeft" class="' + killOverlay + '"></div>' + 547 '<div id="bottomCenter" class="' + killOverlay + '" style="width:' + highlightedAreaStyle.bottomCenter.width + ';"></div>' + 548 '<div id="bottomRight" class="' + killOverlay + '"></div>' + 549 '</div>'); 550 } else { 551 552 //if accessable 553 var highlightedAreaStyle = { 554 'top': overlayTopStyle.height, 555 'left': overlayLeftStyle.width, 556 'topCenter': { 557 'width': cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight)) 558 } 559 } 560 561 var accessableStyle = { 562 563 'topAccessable': { 564 'position': 'absolute', 565 'top': overlayTopStyle.height, 566 'left': overlayLeftStyle.width, 567 'topCenter': { 568 'width': cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight)) 569 } 570 },
571 'middleAccessable': { 572 'position': 'absolute', 573 'top': cleanValue(parseInt(overlayTopStyle.height) + roundedCorner), 574 'left': overlayLeftStyle.width, 575 'middleLeft': { 576 'height': cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)) 577 }, 578 'middleRight': { 579 'height': cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)), 580 'right': cleanValue(parseInt(transparentWidth) + roundedCorner + parseInt(marginRight) + parseInt(marginLeft)) 581 } 582 }, 583 'bottomAccessable': { 584 'left': overlayLeftStyle.width, 585 'top': cleanValue(parseInt(overlayTopStyle.height) + roundedCorner + parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)), 586 'bottomCenter': { 587 'width': cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight)) 588 } 589 } 590 } 591 592 var highlightedArea = gQuery('<div id="topAccessable" style="position:' + accessableStyle.topAccessable.position + '; top:' + accessableStyle.topAccessable.top + ';left:' + accessableStyle.topAccessable.left + '">' + 593 '<div id="topLeft" class="' + killOverlay + '"></div>' + 594 '<div id="topCenter" class="' + killOverlay + '" style="width:' + accessableStyle.topAccessable.topCenter.width + '"></div>' + 595 '<div id="topRight" class="' + killOverlay + '"></div>' + 596 '</div>' + 597 598 '<div id="middleAccessable" class="' + killOverlay + '" style="clear: left;position:' + accessableStyle.middleAccessable.position + '; top:' + accessableStyle.middleAccessable.top + ';left:' + accessableStyle.middleAccessable.left + ';">' + 599 '<div id="middleLeft" class="' + killOverlay + '" style="height:' + accessableStyle.middleAccessable.middleLeft.height + ';"></div>' + 600 '<div id="middleRight" class="' + killOverlay + '" style="position:absolute;right:-' + accessableStyle.middleAccessable.middleRight.right + ';height:' + accessableStyle.middleAccessable.middleRight.height + ';"></div>' + 601 '</div>' + 602 603 '<div id="bottomAccessable" style="clear: left;position:absolute;left:' + accessableStyle.bottomAccessable.left + ';top:' + accessableStyle.bottomAccessable.top + ';">' + 604 '<div id="bottomLeft" class="' + killOverlay + '"></div>' + 605 '<div id="bottomCenter" class="' + killOverlay + '" style="width:' + accessableStyle.bottomAccessable.bottomCenter.width + ';"></div>' + 606 '<div id="bottomRight" class="' + killOverlay + '"></div>' + 607 '</div>').appendTo($jpWalkthrough); 608 609 } //end checking accessable 610 611 var highlightedAreaWidth = (opt.steps[_index].accessable) ? parseInt(accessableStyle.topAccessable.topCenter.width) + (roundedCorner * 2) : (parseInt(highlightedAreaStyle.topCenter.width) + (roundedCorner * 2)); 612 613 614 var overlayRightStyle = { 615 'left': cleanValue(parseInt(overlayLeftStyle.width) + highlightedAreaWidth), 616 'height': overlayLeftStyle.height, 617 'top': overlayLeftStyle.top, 618 'width': cleanValue(windowWidth() - (parseInt(overlayLeftStyle.width) + highlightedAreaWidth)) 619 } 620 621 var overlayRight = gQuery('<div id="overlayRight" class="' + overlayClass + '"></div>').css(overlayRightStyle).appendTo($jpWalkthrough); 622 623 // modified date oct 07 624 /*if(viewportwidth < 400) 625 { 626 var overlayBottom_top = cleanValue(parseInt(overlayTopStyle.height) + parseInt(overlayLeftStyle.height) + 20); 627 } else */ 628 if(viewportwidth < 620) 629 { 630 if(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom) <= 31) 631 { 632 var overlayBottom_top = cleanValue(parseInt(overlayTopStyle.height) + parseInt(overlayLeftStyle.height)); 633 //alert(overlayBottom_top); 634 } else { 635 if(wp_version_var.replace(".", "") <= '43') 636 { 637 var overlayBottom_top = cleanValue(parseInt(overlayTopStyle.height) + parseInt(overlayLeftStyle.height)); 638 } else { 639 var overlayBottom_top = cleanValue(parseInt(overlayTopStyle.height) + parseInt(overlayLeftStyle.height) + 30); 640 } 641 642 } 643 } else { 644 var overlayBottom_top = cleanValue(parseInt(overlayTopStyle.height) + parseInt(overlayLeftStyle.height)); 645 } 646 // modified date oct 07 647 648 var overlayBottomStyle = { 649 'height': cleanValue(gQuery(document).height() - (parseInt(overlayTopStyle.height) + parseInt(overlayLeftStyle.height))), 650 'top': overlayBottom_top 651 } 652 653 //alert(parseInt(gQuery(document).height())); 654 655 var overlayBottom = gQuery('<div id="overlayBottom" class="' + overlayClass + '"></div>').css(overlayBottomStyle).appendTo($jpWalkthrough); 656 657 658 if (gQuery('#jpWalkthrough').length) { 659 gQuery('#jpWalkthrough').remove(); 660 } 661 662 $jpWalkthrough.appendTo('body').show(); 663 664 if (opt.steps[_index].accessable) { 665 showTooltip(true); 666 } else { 667 showTooltip(false); 668 } 669 670 671 } else if(typeof(opt)!=="undefined" && opt.steps[_index].popup.type == 'modal'){ 672 673 if (gQuery('#jpWalkthrough').length) { 674 gQuery('#jpWalkthrough').remove(); 675 } 676
677 if (opt.steps[_index].overlay == undefined || opt.steps[_index].overlay) { 678 showModal(true); 679 } else { 680 showModal(false); 681 } 682 683 }else{ 684 if (gQuery('#jpWalkthrough').length) { 685 gQuery('#jpWalkthrough').remove(); 686 } 687 688 689 if (typeof(opt)!=="undefined" && (opt.steps[_index].overlay == undefined || opt.steps[_index].overlay)) { 690 noHighlight(true); 691 } else { 692 noHighlight(false); 693 } 694 } 695 } 696 697 /* 698 * SHOW MODAL 699 */ 700 function showModal(isOverlay) { 701 var opt = _activeWalkthrough, overlayClass = ''; 702 703 if (isOverlay) { 704 $jpwOverlay.appendTo('body').show(); 705 } else { 706 if (gQuery('#jpwOverlay').length) { 707 gQuery('#jpwOverlay').remove(); 708 } 709 } 710 711 var textRotation = setRotation(parseInt(opt.steps[_index].popup.contentRotation)); 712 713 $jpwTooltip.css({ 'position': 'absolute', 'left': '50%', 'top': '50%', 'margin-left': -(parseInt(opt.steps[_index].popup.width) + 60) / 2 + 'px','z-index':'9999'}); 714 715 var tooltipSlide = gQuery('<div id="tooltipTop">' + 716 '<div id="topLeft"></div>' + 717 '<div id="topRight"></div>' + 718 '</div>' + 719 720 '<div id="tooltipInner">' + 721 '</div>' + 722 723 '<div id="tooltipBottom">' + 724 '<div id="bottomLeft"></div>' + 725 '<div id="bottomRight"></div>' + 726 '</div>'); 727 728 $jpWalkthrough.html(''); 729 $jpwTooltip.html('').append(tooltipSlide) 730 .wrapInner('<div id="tooltipWrapper" style="width:'+cleanValue(parseInt(opt.steps[_index].popup.width) + 30)+'"></div>') 731 .append('<div id="bottom-scratch"></div>') 732 .appendTo($jpWalkthrough); 733 734 $jpWalkthrough.appendTo('body'); 735 736 gQuery('#tooltipWrapper').css(textRotation); 737 738 gQuery(opt.steps[_index].popup.content).clone().appendTo('#tooltipInner').show(); 739 740 //added by sam start for setting timer 741 if(typeof(opt.enableTimer)!="undefined" && opt.enableTimer && typeof(opt.steps[_index])!="undefined" && typeof(opt.steps[_index].hault_time)!="undefined" 742 && !isNaN(opt.steps[_index].hault_time) && opt.steps[_index].hault_time > 0 && (gQuery('a.next-step','#tooltipInner').length > 0)) 743 { 744 websiteTourTimer = true; 745 gQuery('#time_progress','#tooltipInner').chrony({ 746 seconds : opt.steps[_index].hault_time, 747 finish : function() { 748 websiteTourTimer = false; 749 gQuery('a.next-step','#tooltipInner').click(); 750 } 751 }); 752 } 753 //added by sam start for setting timer 754 $jpwTooltip.css('margin-top', -(($jpwTooltip.height()) / 2)+ 'px'); 755 $jpWalkthrough.show(); 756 757 758 } 759 760 761 /* 762 * SHOW TOOLTIP 763 */ 764 function showTooltip(isAccessable) { 765 766 var opt = _activeWalkthrough; 767 768 var tooltipWidth = (opt.steps[_index].popup.width == '') ? 300 : opt.steps[_index].popup.width, 769 top, left, arrowTop, arrowLeft, 770 roundedCorner = 30, 771 overlayHoleWidth = (isAccessable) ? (gQuery('#topAccessable').innerWidth() + (roundedCorner * 2)) || (gQuery('#topAccessable').width() + (roundedCorner * 2)) : gQuery('#highlightedArea').innerWidth() || gQuery('#highlightedArea').width(), 772 overlayHoleHeight = (isAccessable) ? gQuery('#middleAccessable').innerHeight() + (roundedCorner * 2) || gQuery('#middleAccessable').height() + (roundedCorner * 2) : gQuery('#highlightedArea').innerHeight() || gQuery('#highlightedArea').height(), 773 overlayHoleTop = (isAccessable) ? gQuery('#topAccessable').offset().top : gQuery('#highlightedArea').offset().top, 774 overlayHoleLeft = (isAccessable) ? gQuery('#topAccessable').offset().left : gQuery('#highlightedArea').offset().left, 775 arrow = 30, 776 draggable = ''; 777 778 var textRotation = (opt.steps[_index].popup.contentRotation == undefined || parseInt(opt.steps[_index].popup.contentRotation) == 0) ? clearRotation() : setRotation(parseInt(opt.steps[_index].popup.contentRotation)); 779 780 781 //delete jwOverlay if any 782 if (gQuery('#jpwOverlay').length) { 783 gQuery('#jpwOverlay').remove(); 784 } 785 786 var tooltipSlide = gQuery('<div id="tooltipTop">' + 787 '<div id="topLeft"></div>' + 788 '<div id="topRight"></div>' + 789 '</div>' + 790 '<div id="tooltipInner">' + '</div>' + 791 '<div id="tooltipBottom">' + 792 '<div id="bottomLeft"></div>' + 793 '<div id="bottomRight"></div>' + 794 '</div>'); 795
796 $jpwTooltip.html('').css({ 'marginLeft': '0', 'margin-top': '0', 'position': 'absolute','z-index':'9999'}) 797 .append(tooltipSlide) 798 .wrapInner('<div id="tooltipWrapper" style="width:'+cleanValue(parseInt(opt.steps[_index].popup.width) + 30)+'"></div>') 799 .appendTo($jpWalkthrough); 800 801 if (opt.steps[_index].popup.draggable) { 802 $jpwTooltip.append('<div id="drag-area" class="draggable-area"></div>'); 803 } 804 805 $jpWalkthrough.appendTo('body').show(); 806 807 gQuery('#tooltipWrapper').css(textRotation); 808 809 gQuery(opt.steps[_index].popup.content).clone().appendTo('#tooltipInner').show(); 810 811 $jpwTooltip.append('<span class="' + opt.steps[_index].popup.position + '"> </span>'); 812 813 814 //added by sam start for setting timer 815 816 if(typeof(opt.enableTimer)!="undefined" && opt.enableTimer && typeof(opt.steps[_index])!="undefined" && typeof(opt.steps[_index].hault_time)!="undefined" 817 && !isNaN(opt.steps[_index].hault_time) && opt.steps[_index].hault_time > 0 && (gQuery('a.next-step','#tooltipInner').length > 0)) 818 { 819 websiteTourTimer = true; 820 gQuery('#time_progress','#tooltipInner').chrony({ 821 seconds : opt.steps[_index].hault_time, 822 finish : function() { 823 websiteTourTimer = false; 824 gQuery('a.next-step','#tooltipInner').click(); 825 } 826 }); 827 } 828 //added by sam start for setting timer 829 830 switch (opt.steps[_index].popup.position) { 831 832 case 'top': 833 top = overlayHoleTop - ($jpwTooltip.height() + (arrow / 2)) + parseInt(opt.steps[_index].popup.offsetVertical) - 86; 834 if (isAccessable) { 835 left = (overlayHoleLeft + (overlayHoleWidth / 2)) - ($jpwTooltip.width() / 2) - 40 + parseInt(opt.steps[_index].popup.offsetHorizontal); 836 } else { 837 left = (overlayHoleLeft + (overlayHoleWidth / 2)) - ($jpwTooltip.width() / 2) - 5 + parseInt(opt.steps[_index].popup.offsetHorizontal); 838 } 839 arrowLeft = ($jpwTooltip.width() / 2) - arrow; 840 arrowTop = ''; 841 break; 842 case 'right': 843 top = overlayHoleTop - (arrow / 2) + parseInt(opt.steps[_index].popup.offsetVertical); 844 left = overlayHoleLeft + overlayHoleWidth + (arrow / 2) + parseInt(opt.steps[_index].popup.offsetHorizontal) + 105; 845 arrowTop = arrow; 846 arrowLeft = ''; 847 break; 848 case 'bottom': 849 850 if (isAccessable) { 851 top = (overlayHoleTop + overlayHoleHeight) + parseInt(opt.steps[_index].popup.offsetVertical) + 86; 852 left = (overlayHoleLeft + (overlayHoleWidth / 2)) - ($jpwTooltip.width() / 2) - 40 + parseInt(opt.steps[_index].popup.offsetHorizontal); 853 } else { 854 top = overlayHoleTop + overlayHoleHeight + parseInt(opt.steps[_index].popup.offsetVertical) + 86; 855 left = (overlayHoleLeft + (overlayHoleWidth / 2)) - ($jpwTooltip.width() / 2) - 5 + parseInt(opt.steps[_index].popup.offsetHorizontal); 856 } 857 858 arrowLeft = ($jpwTooltip.width() / 2) - arrow; 859 arrowTop = ''; 860 break; 861 case 'left': 862 top = overlayHoleTop - (arrow / 2) + parseInt(opt.steps[_index].popup.offsetVertical); 863 left = overlayHoleLeft - $jpwTooltip.width() - (arrow) + parseInt(opt.steps[_index].popup.offsetHorizontal) - 105; 864 arrowTop = arrow; 865 arrowLeft = ''; 866 break; 867 } 868 869 gQuery('#jpwTooltip span.' + opt.steps[_index].popup.position).css({ 'left': cleanValue(arrowLeft) }); 870 871 $jpwTooltip.css({ 'top': cleanValue(top), 'left': cleanValue(left) }); 872 $jpWalkthrough.show(); 873 } 874 875 /** 876 * POPUP NO HIGHLIGHT 877 */ 878 879 function noHighlight(isOverlay){ 880 var opt = _activeWalkthrough, overlayClass = ''; 881 if(typeof(opt)==="undefined") 882 return; 883 var wrapperTop = gQuery(opt.steps[_index].wrapper).offset().top, 884 wrapperLeft = gQuery(opt.steps[_index].wrapper).offset().left,
885 wrapperWidth = gQuery(opt.steps[_index].wrapper).width(), 886 wrapperHeight = gQuery(opt.steps[_index].wrapper).height(), 887 arrow = 30, 888 draggable = '', 889 top, left, arrowTop, arrowLeft; 890 891 if (isOverlay) { 892 $jpwOverlay.appendTo('body').show(); 893 } else { 894 if (gQuery('#jpwOverlay').length) { 895 gQuery('#jpwOverlay').remove(); 896 } 897 } 898 899 $jpwTooltip.css(clearRotation()); 900 901 var textRotation = (opt.steps[_index].popup.contentRotation == 'undefined' || opt.steps[_index].popup.contentRotation == 0) ? '' : setRotation(parseInt(opt.steps[_index].popup.contentRotation)); 902 903 $jpwTooltip.css({ 'position': 'absolute','margin-left': '0px','margin-top':'0px','z-index':'9999'}); 904 905 var tooltipSlide = gQuery('<div id="tooltipTop">' + 906 '<div id="topLeft"></div>' + 907 '<div id="topRight"></div>' + 908 '</div>' + 909 910 '<div id="tooltipInner">' + 911 '</div>' + 912 913 '<div id="tooltipBottom">' + 914 '<div id="bottomLeft"></div>' + 915 '<div id="bottomRight"></div>' + 916 '</div>'); 917 918 $jpWalkthrough.html(''); 919 $jpwTooltip.html('').append(tooltipSlide) 920 .wrapInner('<div id="tooltipWrapper" style="width:'+cleanValue(parseInt(opt.steps[_index].popup.width) + 30)+'"></div>') 921 .appendTo($jpWalkthrough); 922 923 if (opt.steps[_index].popup.draggable) { 924 $jpwTooltip.append('<div id="drag-area" class="draggable-area"></div>'); 925 } 926 927 $jpWalkthrough.appendTo('body'); 928 929 gQuery('#tooltipWrapper').css(textRotation); 930 931 gQuery(opt.steps[_index].popup.content).clone().appendTo('#tooltipInner').show(); 932 933 //added by sam start for setting timer 934 935 if(typeof(opt.enableTimer)!="undefined" && opt.enableTimer && typeof(opt.steps[_index])!="undefined" && typeof(opt.steps[_index].hault_time)!="undefined" 936 && !isNaN(opt.steps[_index].hault_time) && opt.steps[_index].hault_time > 0 && (gQuery('a.next-step','#tooltipInner').length > 0)) 937 { 938 websiteTourTimer = true; 939 gQuery('#time_progress','#tooltipInner').chrony({ 940 seconds : opt.steps[_index].hault_time, 941 finish : function() { 942 websiteTourTimer = false; 943 gQuery('a.next-step','#tooltipInner').click(); 944 } 945 }); 946 } 947 //added by sam start for setting timer 948 949 950 $jpwTooltip.append('<span class="' + opt.steps[_index].popup.position + '"> </span>'); 951 952 switch (opt.steps[_index].popup.position) { 953 954 case 'top': 955 top = wrapperTop - ($jpwTooltip.height() + (arrow / 2)) + parseInt(opt.steps[_index].popup.offsetVertical) - 86; 956 left = (wrapperLeft + (wrapperWidth / 2)) - ($jpwTooltip.width() / 2) - 5 + parseInt(opt.steps[_index].popup.offsetHorizontal); 957 arrowLeft = ($jpwTooltip.width() / 2) - arrow; 958 arrowTop = ''; 959 break; 960 case 'right': 961 top = wrapperTop - (arrow / 2) + parseInt(opt.steps[_index].popup.offsetVertical); 962 left = wrapperLeft + wrapperWidth + (arrow / 2) + parseInt(opt.steps[_index].popup.offsetHorizontal) + 105; 963 arrowTop = arrow; 964 arrowLeft = ''; 965 break; 966 case 'bottom': 967 top = wrapperTop + wrapperHeight + parseInt(opt.steps[_index].popup.offsetVertical) + 86; 968 left = (wrapperLeft + (wrapperWidth / 2)) - ($jpwTooltip.width() / 2) - 5 + parseInt(opt.steps[_index].popup.offsetHorizontal); 969 arrowLeft = ($jpwTooltip.width() / 2) - arrow; 970 arrowTop = ''; 971 break; 972 case 'left': 973 top = wrapperTop - (arrow / 2) + parseInt(opt.steps[_index].popup.offsetVertical); 974 left = wrapperLeft - $jpwTooltip.width() - (arrow) + parseInt(opt.steps[_index].popup.offsetHorizontal) - 105; 975 arrowTop = arrow; 976 arrowLeft = ''; 977 break; 978 } 979 980 gQuery('#jpwTooltip span.' + opt.steps[_index].popup.position).css({ 'left': cleanValue(arrowLeft) }); 981 982 $jpwTooltip.css({ 'top': cleanValue(top), 'left': cleanValue(left) }); 983 $jpWalkthrough.show(); 984 985 986 } 987 988 /* 989 * SCROLL TO TARGET 990 */ 991 function scrollToTarget() { 992 993 var options = _activeWalkthrough; 994 if(typeof(options)==="undefined") 995 return; 996 if (options.steps[_index].autoScroll || options.steps[_index].autoScroll == undefined) { 997 if (options.steps[_index].popup.position != 'modal') { 998 999 var windowHeight = gQuery(window).height() || gQuery(window).innerHeight(), 1000 targetOffsetTop = $jpwTooltip.offset().top, 1001 targetHeight = $jpwTooltip.height() || $jpwTooltip.innerHeight(), 1002 overlayTop = gQuery('#overlayTop').height(); 1003 1004 gQuery('html,body').animate({scrollTop: (targetOffsetTop + (targetHeight/2) - (windowHeight/2))}, options.steps[_index].scrollSpeed); 1005 1006 } else { 1007 gQuery('html,body').animate({ scrollTop: 0 }, options.steps[_index].scrollSpeed); 1008 } 1009 1010 } 1011 } 1012 1013 1014 /** 1015 * SHOW CLOSE BUTTON 1016 */ 1017 function showCloseButton(){ 1018 1019 if(!gQuery('jpwClose').length){ 1020 gQuery('body').append('<div id="jpwClose"><a href="javascript:;"><span></span><br>'+step_close+'</a></div>'); // modified date oct 07 1021 } 1022 } 1023 1024 1025 1026 1027 /** 1028 /* CALLBACK 1029 /*/ 1030 1031 //callback for onLoadHidden cookie
1032 function onCookieLoad(options) { 1033 1034 for (i = 0; i < _elements.length; i++) { 1035 if (typeof (options[_elements[i]].onCookieLoad) === "function") { 1036 options[_elements[i]].onCookieLoad.call(this); 1037 } 1038 } 1039 1040 return false; 1041 } 1042 1043 function onLeave(e) { 1044 var options = _activeWalkthrough; 1045 1046 if (typeof options.steps[_index].onLeave === "function") { 1047 if (!options.steps[_index].onLeave.call(this, e, _index)) { 1048 return false; 1049 } 1050 } 1051 1052 return true; 1053 1054 } 1055 1056 //callback for onEnter step 1057 function onEnter(e) { 1058 1059 var options = _activeWalkthrough; 1060 if (typeof options.steps[_index].onEnter === "function") { 1061 if (!options.steps[_index].onEnter.call(this, e, _index)) { 1062 return false; 1063 } 1064 } 1065 1066 return true; 1067 } 1068 1069 //callback for onClose help 1070 function onClose() { 1071 var options = _activeWalkthrough; 1072 if (typeof options.onClose === "function") { 1073 if (!options.onClose.call(this)) { 1074 return false; 1075 } 1076 } 1077 1078 1079 1080 //set help mode to false 1081 //_isWalkthroughActive = false; 1082 methods.close(); 1083 1084 return true; 1085 } 1086 1087 //callback for onRestart help 1088 function onRestart(e) { 1089 var options = _activeWalkthrough; 1090 //set help mode to true 1091 _isWalkthroughActive = true; 1092 methods.restart(e); 1093 1094 //auto scroll to target 1095 scrollToTarget(); 1096 1097 if (typeof(options)!=="undefined" && typeof options.onRestart === "function") { 1098 if (!options.onRestart.call(this)) { 1099 return false; 1100 } 1101 } 1102 1103 return true; 1104 } 1105 1106 //callback for before all first walkthrough element loaded 1107 function onBeforeShow() { 1108 var options = _activeWalkthrough; 1109 _index = 0; 1110 1111 if (typeof(options)!=="undefined" && typeof (options.onBeforeShow) === "function") { 1112 if (!options.onBeforeShow.call(this)) { 1113 return false; 1114 } 1115 } 1116 1117 return true; 1118 } 1119 1120 //callback for after all first walkthrough element loaded 1121 function onAfterShow() { 1122 var options = _activeWalkthrough; 1123 _index = 0; 1124 1125 if (typeof(options)!=="undefined" && typeof (options.onAfterShow) === "function") { 1126 if (!options.onAfterShow.call(this)) { 1127 return false; 1128 } 1129 } 1130 1131 return true; 1132 } 1133 1134 1135 1136 /** 1137 * HELPERS 1138 */ 1139 1140 function windowWidth() { 1141 return gQuery(window).innerWidth() || gQuery(window).width(); 1142 } 1143 1144 function debug(message) { 1145 if (window.console && window.console.log) 1146 window.console.log(message); 1147 } 1148 1149 function clearRotation(){ 1150 var rotationStyle = { 1151 '-webkit-transform': 'none', //safari 1152 '-moz-transform':'none', //firefox 1153 '-ms-transform': 'none', //IE9+ 1154 '-o-transform': 'none', //opera 1155 'filter':'none', //IE7 1156 '-ms-transform' : 'none' //IE8 1157 } 1158 1159 return rotationStyle; 1160 } 1161 1162 function setRotation(angle){ 1163 1164 //for IE7 & IE8 1165 var M11, M12, M21, M22, deg2rad, rad; 1166 1167 //degree to radian 1168 deg2rad = Math.PI * 2 / 360; 1169 rad = angle * deg2rad; 1170 1171 M11 = Math.cos(rad); 1172 M12 = Math.sin(rad); 1173 M21 = Math.sin(rad); 1174 M22 = Math.cos(rad); 1175 1176 var rotationStyle = { 1177 '-webkit-transform': 'rotate('+parseInt(angle)+'deg)', //safari 1178 '-moz-transform':'rotate('+parseInt(angle)+'deg)', //firefox 1179 '-ms-transform': 'rotate('+parseInt(angle)+'deg)', //IE9+ 1180 '-o-transform': 'rotate('+parseInt(angle)+'deg)', //opera 1181 'filter':'progid:DXImageTransform.Microsoft.Matrix(M11 = '+M11+',M12 = -'+M12+',M21 = '+M21+',M22 = '+M22+',sizingMethod = "auto expand");', //IE7 1182 '-ms-transform' : 'progid:DXImageTransform.Microsoft.Matrix(M11 = '+M11+',M12 = -'+M12+',M21 = '+M21+',M22 = '+M22+',SizingMethod = "auto expand");' //IE8 1183 } 1184 1185 return rotationStyle; 1186 1187 } 1188 1189 function cleanValue(value) { 1190 if (typeof value === "string") { 1191 if (value.toLowerCase().indexOf('px') == -1) { 1192 return value + 'px'; 1193 } else { 1194 return value; 1195 } 1196 } else { 1197 return value + 'px'; 1198 } 1199 } 1200 1201 function cleanSyntax(val) { 1202 1203 if (val.indexOf('px') != -1) { 1204 return true; 1205 } else if(parseInt(val) == 0){ 1206 return true; 1207 } 1208 return false;
1209 } 1210 1211 function cssSyntax(val, position) { 1212 var value = val, 1213 arrVal = value.split(' '), 1214 counter = 0, 1215 top, right, bottom, left, returnVal; 1216 1217 for (i = 0; i < arrVal.length; i++) { 1218 //check if syntax is clean with value and 'px' 1219 if (cleanSyntax(arrVal[i])) { 1220 counter++; 1221 } 1222 } 1223 1224 //all syntax are clean 1225 if (counter == arrVal.length) { 1226 1227 for (i = 0; i < arrVal.length; i++) { 1228 1229 switch (i) { 1230 case 0: 1231 top = arrVal[i]; 1232 break; 1233 case 1: 1234 right = arrVal[i]; 1235 break; 1236 case 2: 1237 bottom = arrVal[i]; 1238 break; 1239 case 3: 1240 left = arrVal[i]; 1241 break; 1242 } 1243 1244 } 1245 1246 switch (arrVal.length) { 1247 case 1: 1248 right = bottom = left = top; 1249 break; 1250 case 2: 1251 bottom = top; 1252 left = right; 1253 break; 1254 case 3: 1255 left = right; 1256 break; 1257 } 1258 1259 if (position == 'undefined' || position == '' || position == null) { 1260 console.log('Please define margin position (top, right, bottom, left)'); 1261 return false; 1262 } else { 1263 1264 switch (position) { 1265 case 'top': 1266 returnVal = top; 1267 break; 1268 case 'right': 1269 returnVal = right; 1270 break; 1271 case 'bottom': 1272 returnVal = bottom; 1273 break; 1274 case 'left': 1275 returnVal = left; 1276 break; 1277 } 1278 1279 } 1280 1281 return returnVal; 1282 1283 } else { 1284 console.log('Please check your margin syntax..'); 1285 return false; 1286 } 1287 } 1288 1289 1290 1291 /** 1292 * BUTTON CLOSE CLICK 1293 */ 1294 gQuery('#jpwClose a').live('click', onClose); 1295 1296 1297 /** 1298 * DRAG & DROP 1299 */ 1300 1301 gQuery('#jpwTooltip #drag-area').live('mousedown', function (e) { 1302 1303 if (!gQuery(this).hasClass('draggable-area')) { 1304 return; 1305 } 1306 if (!gQuery(this).hasClass('draggable')) { 1307 gQuery(this).addClass('draggable').css('cursor','move'); 1308 } 1309 1310 var z_idx = gQuery(this).css('z-index'), 1311 drg_h = gQuery(this).outerHeight(), 1312 drg_w = gQuery(this).outerWidth(), 1313 pos_y = gQuery(this).offset().top + (drg_h*2) - e.pageY -10, 1314 pos_x = (e.pageX - gQuery(this).offset().left + drg_w) - (gQuery(this).parent().outerWidth() + drg_w) +20; 1315 1316 gQuery(document).on("mousemove", function (e) { 1317 1318 gQuery('.draggable').parent().offset({ 1319 top: e.pageY + pos_y - drg_h, 1320 left: e.pageX + pos_x - drg_w 1321 }).on("mouseup", function () { 1322 gQuery(this).children('#tooltipWrapper').removeClass('draggable').css({'z-index':z_idx,'cursor':'default'}); 1323 }); 1324 }); 1325 e.preventDefault(); // disable selection 1326 }).live("mouseup", function () { 1327 gQuery(this).removeClass('draggable').css('cursor','default'); 1328 }); 1329 1330 1331 1332 /** 1333 * MAIN PLUGIN 1334 */ 1335 gQuery.pagewalkthrough = gQuery.fn.pagewalkthrough = function (method) { 1336 1337 if (methods[method]) { 1338 1339 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 1340 1341 } else if (typeof method === 'object' || !method) { 1342 1343 methods.init.apply(this, arguments); 1344 1345 } else { 1346 1347 gQuery.error('Method ' + method + ' does not exist on jQuery.pagewalkthrough'); 1348 1349 } 1350 1351 } 1352 1353 /*setTimeout(function () { 1354 methods.renderOverlay(); 1355 }, 500); 1356 */ 1357 gQuery.fn.pagewalkthrough.options = { 1358 1359 steps: [ 1360 1361 { 1362 wrapper: '', //an ID of page element HTML that you want to highlight 1363 margin: 0, //margin for highlighted area, may use CSS syntax i,e: '10px 20px 5px 30px' 1364 popup: 1365 { 1366 content: '', //ID content of the walkthrough 1367 type: 'modal', //tooltip, modal, nohighlight 1368 position:'top',//position for tooltip and nohighlight type only: to
1368p, right, bottom, left 1369 offsetHorizontal: 0, //horizontal offset for the walkthrough 1370 offsetVertical: 0, //vertical offset for the walkthrough 1371 width: '320', //default width for each step, 1372 draggable: false, // set true to set walkthrough draggable, 1373 contentRotation: 0 //content rotation : i.e: 0, 90, 180, 270 or whatever value you add. minus sign (-) will be CCW direction 1374 }, 1375 overlay:true, 1376 accessable: false, //if true - you can access html element such as form input field, button etc 1377 autoScroll: true, //is true - this will autoscroll to the arror/content every step 1378 scrollSpeed: 1000, //scroll speed 1379 stayFocus: false, //if true - when user scroll down/up to the page, it will scroll back the position it belongs 1380 onLeave: null, // callback when leaving the step 1381 onEnter: null // callback when entering the step 1382 } 1383 1384 ], 1385 name: '', 1386 onLoad: true, //load the walkthrough at first time page loaded 1387 onBeforeShow: null, //callback before page walkthrough loaded 1388 onAfterShow: null, // callback after page walkthrough loaded 1389 onRestart: null, //callback for onRestart walkthrough 1390 onClose: null, //callback page walkthrough closed 1391 onCookieLoad: null, //when walkthrough closed, it will set cookie and use callback if you want to create link to trigger to reopen the walkthrough 1392 //rest of the parameters have been added by sam 1393 enableKeyboard: null, //keyboard handler 1394 loadWalkthroughFromCookie:false,//remember last step from cookie 1395 walkthroughCookieKey: "", 1396 cookie_expire_day: 365, 1397 enableTimer:false 1398 }; 1399 1400} (gQuery, window, document)); 1401 1402function setCookie(c_name, value, exdays) { 1403 var exdate = new Date(); 1404 exdate.setDate(exdate.getDate() + exdays); 1405 var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()+'; path=/'); 1406 document.cookie = c_name + "=" + c_value; 1407} 1408 1409function getCookie(c_name) { 1410 var i, x, y, ARRcookies = document.cookie.split(";"); 1411 for (i = 0; i < ARRcookies.length; i++) { 1412 x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); 1413 y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); 1414 x = x.replace(/^\s+|\s+$/g, ""); 1415 if (x == c_name) { 1416 return unescape(y); 1417 } 1418 } 1419}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.