From 9096ebae9490833cc2fcb43082e5104874426791 Mon Sep 17 00:00:00 2001 From: Gordon Koo Date: Mon, 19 Nov 2012 14:09:40 -0800 Subject: [PATCH] fixed HopscotchBubble.destroy, updated docs --- docs/files.html | 8 +- docs/index.html | 18 +- docs/symbols/Hopscotch.html | 211 +++++---- docs/symbols/HopscotchBubble.html | 247 +++------- docs/symbols/HopscotchCalloutManager.html | 523 ++++++++++++++++++++++ docs/symbols/_global_.html | 6 +- js/hopscotch-0.0.3.js | 318 ++++++++++--- js/hopscotch-0.0.3.min.js | 61 +-- 8 files changed, 1017 insertions(+), 375 deletions(-) create mode 100644 docs/symbols/HopscotchCalloutManager.html diff --git a/docs/files.html b/docs/files.html index d6279be1..12c0c2bc 100644 --- a/docs/files.html +++ b/docs/files.html @@ -188,6 +188,10 @@

Classes

  • Hopscotch
    • +
  • HopscotchBubble
    • + +
  • HopscotchCalloutManager
    • +
    @@ -197,7 +201,7 @@

    File Index

    -

    /Users/gkoo/Sites/hopscotch/js/hopscotch.js

    +

    /Users/gkoo/Sites/hopscotch/js/hopscotch-0.0.3.js

    @@ -212,7 +216,7 @@

    /User

    - Documentation generated by JsDoc Toolkit 2.4.0 on Tue Sep 11 2012 14:23:31 GMT-0700 (PDT) + Documentation generated by JsDoc Toolkit 2.4.0 on Mon Nov 19 2012 14:07:13 GMT-0800 (PST)
    \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index ba9870c9..7dcd3fd1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -188,6 +188,10 @@

    Classes

  • Hopscotch
    • +
  • HopscotchBubble
    • + +
  • HopscotchCalloutManager
    • +
    @@ -208,11 +212,23 @@

    Hopscotch

    +
    +

    HopscotchBubble

    + The HopscotchBubble class represents the view of a bubble. +
    +
    + +
    +

    HopscotchCalloutManager

    + Manages the creation and destruction of single callouts. +
    +
    +
    - Documentation generated by JsDoc Toolkit 2.4.0 on Tue Sep 11 2012 14:23:31 GMT-0700 (PDT) + Documentation generated by JsDoc Toolkit 2.4.0 on Mon Nov 19 2012 14:07:13 GMT-0800 (PST)
    \ No newline at end of file diff --git a/docs/symbols/Hopscotch.html b/docs/symbols/Hopscotch.html index c764caa1..39c3c2e2 100644 --- a/docs/symbols/Hopscotch.html +++ b/docs/symbols/Hopscotch.html @@ -193,6 +193,10 @@

    Classes

  • Hopscotch
    • +
  • HopscotchBubble
    • + +
  • HopscotchCalloutManager
    • +
    @@ -213,7 +217,7 @@

    Creates the Hopscotch object. Used to manage tour progress and configurations. -
    Defined in: hopscotch.js. +
    Defined in: hopscotch-0.0.3.js.

    @@ -261,34 +265,34 @@

      -
    addCallback(evtType, cb, isTourCb) +
    configure(options)
    -
    addCallback +
    configure -Adds a callback for one of the event types.
    +
    +VALID OPTIONS INCLUDE.
      -
    configure(options) +
    endTour(clearState, doCallbacks)
    -
    configure +
    endTour -
    -VALID OPTIONS INCLUDE.
    +Cancels out of an active tour.
      -
    endTour(clearState, doCallbacks) +
    getCalloutManager()
    -
    endTour +
    getCalloutManager -Cancels out of an active tour.
    +Gets the callout manager.
    @@ -310,6 +314,17 @@

    + +   + +
    listen(evtType, cb, isTourCb) +
    +
    listen + +Adds a callback for one of the event types.
    + + +   @@ -380,7 +395,7 @@

      -
    showStep(stepNum, substepNum) +
    showStep(stepNum)
    showStep @@ -391,7 +406,7 @@

      -
    startTour(tour, stepNum, substepNum) +
    startTour(tour, stepNum)
    startTour @@ -458,64 +473,6 @@

    Method Detail

    - -
    - - {Object} - addCallback(evtType, cb, isTourCb) - -
    -
    - addCallback - -Adds a callback for one of the event types. Valid event types are: - - -
    - - - - -
    -
    Parameters:
    - -
    - {string} evtType - -
    -
    "start", "end", "next", "prev", "show", "close", or "error"
    - -
    - {Function} cb - -
    -
    The callback to add.
    - -
    - {Boolean} isTourCb - -
    -
    Flag indicating callback is from a tour definition. - For internal use only!
    - -
    - - - - - -
    -
    Returns:
    - -
    {Object} Hopscotch
    - -
    - - - - -
    -
    @@ -692,6 +649,40 @@

    +
    + + +
    + + {Object} + getCalloutManager() + +
    +
    + getCalloutManager + +Gets the callout manager. + + +
    + + + + + + + + +
    +
    Returns:
    + +
    {Object} HopscotchCalloutManager
    + +
    + + + +
    @@ -756,6 +747,64 @@

    +
    + + +
    + + {Object} + listen(evtType, cb, isTourCb) + +
    +
    + listen + +Adds a callback for one of the event types. Valid event types are: + + +
    + + + + +
    +
    Parameters:
    + +
    + {string} evtType + +
    +
    "start", "end", "next", "prev", "show", "close", or "error"
    + +
    + {Function} cb + +
    +
    The callback to add.
    + +
    + {Boolean} isTourCb + +
    +
    Flag indicating callback is from a tour definition. + For internal use only!
    + +
    + + + + + +
    +
    Returns:
    + +
    {Object} Hopscotch
    + +
    + + + +
    @@ -911,7 +960,7 @@

    Remove callbacks for a hopscotch event. If tourOnly is set to true, only removes callbacks specified by a tour (callbacks set by external calls -to hopscotch.configure or hopscotch.addCallback will not be removed). +to hopscotch.configure or hopscotch.listen will not be removed).

    @@ -1031,7 +1080,7 @@

    {Object} - showStep(stepNum, substepNum) + showStep(stepNum)
    @@ -1054,12 +1103,6 @@

    -
    - substepNum - -
    -
    - @@ -1082,7 +1125,7 @@

    {Object} - startTour(tour, stepNum, substepNum) + startTour(tour, stepNum)
    @@ -1111,12 +1154,6 @@

    -
    - substepNum - -
    -
    - @@ -1147,7 +1184,7 @@

    - Documentation generated by JsDoc Toolkit 2.4.0 on Tue Sep 11 2012 14:23:31 GMT-0700 (PDT) + Documentation generated by JsDoc Toolkit 2.4.0 on Mon Nov 19 2012 14:07:13 GMT-0800 (PST)
    diff --git a/docs/symbols/HopscotchBubble.html b/docs/symbols/HopscotchBubble.html index 750e5e6d..c1778baa 100644 --- a/docs/symbols/HopscotchBubble.html +++ b/docs/symbols/HopscotchBubble.html @@ -195,6 +195,8 @@

    Classes

  • HopscotchBubble
    • +
  • HopscotchCalloutManager
    • +
    @@ -212,10 +214,10 @@

    - The HopscotchBubble class is a singleton class which manages the properties of the bubble. + The HopscotchBubble class represents the view of a bubble. This class is also used for Hopscotch callouts. -
    Defined in: hopscotch.js. +
    Defined in: hopscotch-0.0.3.js.

    @@ -263,7 +265,7 @@

      -
    getArrowDirection() +
    destroy()
    @@ -281,36 +283,7 @@

      -
    initAnimate() -
    -
    initAnimate -=========== -This function exists due to how Chrome handles initial CSS transitions.
    - - - - -   - -
    initArrow() -
    -
    - - - - -   - -
    initCloseButton() -
    -
    - - - - -   - -
    initNavButtons() +
    init(initOpt)
    @@ -319,25 +292,16 @@

      -
    removeAnimate() +
    render(step, idx, isLast, callback)
    -
    +
    Renders the bubble according to the step JSON.
      -
    renderStep(step, idx, subIdx, isLast, callback) -
    -
    - - - - -   - -
    setArrow(orientation) +
    setContent(contentStr)
    @@ -346,7 +310,7 @@

      -
    setContent(contentStr) +
    setNum(idx)
    @@ -355,9 +319,13 @@

      -
    setNum(idx) +
    setPosition(step)
    -
    +
    setPosition + +Sets the position of the bubble using the bounding rectangle of the +target element and the orientation and offset information specified by +the JSON.
    @@ -465,11 +433,11 @@

    Method Detail

    - +
    - getArrowDirection() + destroy()
    @@ -526,98 +494,11 @@

    - -
    - - - initAnimate() - -
    -
    - initAnimate -=========== -This function exists due to how Chrome handles initial CSS transitions. -Most other browsers will not animate a transition until the element -exists on the page. Chrome treats DOM elements as starting from the -(0, 0) position, and will animate from the upper left corner on creation -of the DOM element. (e.g., if you create a new DOM element using -Javascript and specify CSS top: 100px, left: 50px, then append the -DOM element to the document.body, it will create it at 0, 0 and then -animate it to 50, 100) - -Solution is to add the animate class (which defines our transition) -only after the element is created. - - -
    - - - - - - - - - - - -
    - - -
    - - - initArrow() - -
    -
    - - - -
    - - - - - - - - - - - -
    - - -
    - - - initCloseButton() - -
    -
    - - - -
    - - - - - - - - - - - -
    - - +
    - initNavButtons() + init(initOpt)
    @@ -629,30 +510,16 @@

    - - - - - - - -
    - - -
    - - - removeAnimate() - -
    -
    - - - -
    - - - +
    +
    Parameters:
    + +
    + initOpt + +
    +
    + +
    @@ -663,15 +530,15 @@

    - +
    - renderStep(step, idx, subIdx, isLast, callback) + render(step, idx, isLast, callback)
    - + Renders the bubble according to the step JSON.
    @@ -683,34 +550,28 @@

    Parameters:
    - step + {Object} step
    -
    +
    Information defining how the bubble should look.
    - idx + {Number} idx
    -
    +
    The index of the step in the tour. Not used for callouts.
    - subIdx + {Boolean} isLast
    -
    +
    Flag indicating if the step is the last in the tour. Not used for callouts.
    - isLast + {Function} callback
    -
    - -
    - callback - -
    -
    +
    Function to be invoked after rendering is finished.
    @@ -723,11 +584,11 @@

    - +
    - setArrow(orientation) + setContent(contentStr)
    @@ -743,7 +604,7 @@

    Parameters:
    - orientation + contentStr
    @@ -759,11 +620,11 @@

    - +
    - setContent(contentStr) + setNum(idx)
    @@ -779,7 +640,7 @@

    Parameters:
    - contentStr + idx
    @@ -795,15 +656,19 @@

    - +
    - setNum(idx) + setPosition(step)
    - + setPosition + +Sets the position of the bubble using the bounding rectangle of the +target element and the orientation and offset information specified by +the JSON.
    @@ -815,7 +680,7 @@

    Parameters:
    - idx + step
    @@ -1030,7 +895,7 @@

    - Documentation generated by JsDoc Toolkit 2.4.0 on Tue Sep 11 2012 11:30:46 GMT-0700 (PDT) + Documentation generated by JsDoc Toolkit 2.4.0 on Mon Nov 19 2012 14:07:13 GMT-0800 (PST)
    diff --git a/docs/symbols/HopscotchCalloutManager.html b/docs/symbols/HopscotchCalloutManager.html new file mode 100644 index 00000000..9f9bcc9b --- /dev/null +++ b/docs/symbols/HopscotchCalloutManager.html @@ -0,0 +1,523 @@ + + + + + + + JsDoc Reference - HopscotchCalloutManager + + + + + + + + + + + +
    + + +
    +

    Classes

    + +
    + +
    + +
    + +

    + + Class HopscotchCalloutManager +

    + + +

    + + + + Manages the creation and destruction of single callouts. + + +
    Defined in: hopscotch-0.0.3.js. + +

    + + + + + + + + + + + + + + + + + +
    Class Summary
    Constructor AttributesConstructor Name and Description
      +
    + HopscotchCalloutManager() +
    +
    HopscotchCalloutManager
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Method Summary
    Method AttributesMethod Name and Description
      +
    createCallout(opt) +
    +
    createCallout + +Creates a standalone callout.
    +
      +
    getCallout(id) +
    +
    createCallout + +Returns a callout by its id.
    +
      +
    removeAllCallouts() +
    +
    removeAllCallouts + +Removes all existing callouts.
    +
      +
    removeCallout(id) +
    +
    removeAllCallout + +Removes an existing callout by id.
    +
    + + + + + + + + + +
    +
    + Class Detail +
    + +
    + HopscotchCalloutManager() +
    + +
    + HopscotchCalloutManager + +
    + + + + + + + + + + + + +
    + + + + + + + +
    + Method Detail +
    + + +
    + + + createCallout(opt) + +
    +
    + createCallout + +Creates a standalone callout. This callout has the same API +as a Hopscotch tour bubble. + + +
    + + + + +
    +
    Parameters:
    + +
    + {Object} opt + +
    +
    The options for the callout. For the most +part, these are the same options as you would find in a tour +step.
    + +
    + + + + + + + + +
    + + +
    + + {Object} + getCallout(id) + +
    +
    + createCallout + +Returns a callout by its id. + + +
    + + + + +
    +
    Parameters:
    + +
    + {String} id + +
    +
    The id of the callout to fetch.
    + +
    + + + + + +
    +
    Returns:
    + +
    {Object} HopscotchBubble
    + +
    + + + + +
    + + +
    + + + removeAllCallouts() + +
    +
    + removeAllCallouts + +Removes all existing callouts. + + +
    + + + + + + + + + + + +
    + + +
    + + + removeCallout(id) + +
    +
    + removeAllCallout + +Removes an existing callout by id. + + +
    + + + + +
    +
    Parameters:
    + +
    + {String} id + +
    +
    The id of the callout to remove.
    + +
    + + + + + + + + + + + + + + + +
    +
    + + + +
    + + Documentation generated by JsDoc Toolkit 2.4.0 on Mon Nov 19 2012 14:07:13 GMT-0800 (PST) +
    + + diff --git a/docs/symbols/_global_.html b/docs/symbols/_global_.html index e8758bd5..78897793 100644 --- a/docs/symbols/_global_.html +++ b/docs/symbols/_global_.html @@ -193,6 +193,10 @@

    Classes

  • Hopscotch
    • +
  • HopscotchBubble
    • + +
  • HopscotchCalloutManager
    • +
    @@ -245,7 +249,7 @@

    - Documentation generated by JsDoc Toolkit 2.4.0 on Tue Sep 11 2012 14:23:31 GMT-0700 (PDT) + Documentation generated by JsDoc Toolkit 2.4.0 on Mon Nov 19 2012 14:07:13 GMT-0800 (PST)
    diff --git a/js/hopscotch-0.0.3.js b/js/hopscotch-0.0.3.js index 98f5b39b..6f08ff55 100644 --- a/js/hopscotch-0.0.3.js +++ b/js/hopscotch-0.0.3.js @@ -72,6 +72,8 @@ * ======== * Adds a class to a DOM element. * Note: does not support adding multiple classes at once yet + * + * @private */ addClass: function(domEl, classToAdd) { var domClasses, @@ -97,6 +99,8 @@ * =========== * Remove a class from a DOM element. * Note: this one DOES support removing multiple classes. + * + * @private */ removeClass: function(domEl, classToRemove) { var domClasses, @@ -123,6 +127,9 @@ domEl.className = domClasses.join(' '); }, + /** + * @private + */ getPixelValue: function(val) { var valType = typeof val; if (valType === 'number') { return val; } @@ -130,11 +137,18 @@ return 0; }, - // Inspired by Python... + /** + * Inspired by Python... returns val if it's defined, otherwise returns the default. + * + * @private + */ valOrDefault: function(val, valDefault) { return typeof val !== undefinedStr ? val : valDefault; }, + /** + * @private + */ invokeCallbacks: function(evtType, args) { var cbArr = callbacks[evtType], i = 0, @@ -145,6 +159,9 @@ } }, + /** + * @private + */ getScrollTop: function() { if (typeof window.pageYOffset !== undefinedStr) { return window.pageYOffset; @@ -155,6 +172,9 @@ } }, + /** + * @private + */ getScrollLeft: function() { if (typeof window.pageXOffset !== undefinedStr) { return window.pageXOffset; @@ -165,18 +185,37 @@ } }, + /** + * @private + */ getWindowHeight: function() { return window.innerHeight ? window.innerHeight : document.documentElement.clientHeight; }, + /** + * @private + */ getWindowWidth: function() { return window.innerWidth ? window.innerWidth : document.documentElement.clientWidth; }, + /** + * @private + */ addClickListener: function(el, fn) { return el.addEventListener ? el.addEventListener('click', fn, false) : el.attachEvent('onclick', fn); }, + /** + * @private + */ + removeClickListener: function(el, fn) { + el.removeEventListener ? el.removeEventListener('click', fn, false) : el.detachEvent('click', fn); + }, + + /** + * @private + */ evtPreventDefault: function(evt) { if (evt.preventDefault) { evt.preventDefault(); @@ -186,6 +225,9 @@ } }, + /** + * @private + */ extend: function(obj1, obj2) { var prop; for (prop in obj2) { @@ -195,6 +237,9 @@ } }, + /** + * @private + */ getStepTarget: function(step) { var result; @@ -233,6 +278,9 @@ // The following cookie-related logic is borrowed from: // http://www.quirksmode.org/js/cookies.html + /** + * @private + */ setState: function(name,value,days) { var expires = '', date; @@ -250,6 +298,9 @@ } }, + /** + * @private + */ getState: function(name) { var nameEQ = name + "=", ca = document.cookie.split(';'), @@ -269,6 +320,9 @@ } }, + /** + * @private + */ clearState: function(name) { if (hasSessionStorage) { sessionStorage.removeItem(name); @@ -301,8 +355,7 @@ /** * HopscotchBubble * - * @class The HopscotchBubble class is a singleton class which manages the properties of the bubble. - * @private + * @class The HopscotchBubble class represents the view of a bubble. This class is also used for Hopscotch callouts. */ HopscotchBubble = function(opt) { this.init(opt); @@ -313,7 +366,12 @@ currStep: undefined, - createButton: function(id, text) { + /** + * Helper function for creating buttons in the bubble. + * + * @private + */ + _createButton: function(id, text) { var btnEl = document.createElement('input'); btnEl.id = id; btnEl.type = 'button'; @@ -413,12 +471,15 @@ } }, - initNavButtons: function() { + /** + * @private + */ + _initNavButtons: function() { var buttonsEl = document.createElement('div'); - this.prevBtnEl = this.createButton('hopscotch-prev', HopscotchI18N.prevBtn); - this.nextBtnEl = this.createButton('hopscotch-next', HopscotchI18N.nextBtn); - this.doneBtnEl = this.createButton('hopscotch-done', HopscotchI18N.doneBtn); + this.prevBtnEl = this._createButton('hopscotch-prev', HopscotchI18N.prevBtn); + this.nextBtnEl = this._createButton('hopscotch-next', HopscotchI18N.nextBtn); + this.doneBtnEl = this._createButton('hopscotch-done', HopscotchI18N.doneBtn); utils.addClass(this.doneBtnEl, 'hide'); buttonsEl.appendChild(this.prevBtnEl); @@ -442,9 +503,45 @@ return this; }, + /* + * Define the close button callback here so that we have a handle on it + * for when we want to remove it (see HopscotchBubble.destroy). + * + * @private + */ + _getCloseFn: function() { + var self = this; + + if (!this.closeFn) { + /** + * @private + */ + this.closeFn = function(evt) { + if (self.opt.id && !this.opt.isTourBubble) { + // Remove via the HopscotchCalloutManager. + // removeCallout() calls HopscotchBubble.destroy internally. + winHopscotch.getCalloutManager().removeCallout(self.opt.id); + } + else { + self.destroy(); + } + + if (evt.preventDefault) { + evt.preventDefault(); + } + else if (event) { + event.returnValue = false; + } + }; + } + return this.closeFn; + }, + + /** + * @private + */ initCloseButton: function() { - var closeBtnEl = document.createElement('a'), - self = this; + var closeBtnEl = document.createElement('a'); closeBtnEl.className = 'hopscotch-bubble-close'; closeBtnEl.href = '#'; @@ -470,15 +567,7 @@ }); } else { - utils.addClickListener(closeBtnEl, function(evt) { - utils.addClass(self.element, 'hide'); - if (evt.preventDefault) { - evt.preventDefault(); - } - else if (event) { - event.returnValue = false; - } - }); + utils.addClickListener(closeBtnEl, this._getCloseFn()); } this.closeBtnEl = closeBtnEl; @@ -486,7 +575,10 @@ return this; }, - initArrow: function() { + /** + * @private + */ + _initArrow: function() { var arrowEl, arrowBorderEl; @@ -506,14 +598,30 @@ return this; }, + /** + * Renders the bubble according to the step JSON. + * + * @param {Object} step Information defining how the bubble should look. + * @param {Number} idx The index of the step in the tour. Not used for callouts. + * @param {Boolean} isLast Flag indicating if the step is the last in the tour. Not used for callouts. + * @param {Function} callback Function to be invoked after rendering is finished. + */ render: function(step, idx, isLast, callback) { - var self = this, - showNext = utils.valOrDefault(step.showNextButton, this.opt.showNextButton), - showPrev = utils.valOrDefault(step.showPrevButton, this.opt.showPrevButton), + var self = this, + showNext, + showPrev, bubbleWidth, bubblePadding; - this.currStep = step; + if (step) { + this.currStep = step; + } + else if (this.currStep) { + step = this.currStep; + } + + showNext = utils.valOrDefault(step.showNextButton, this.opt.showNextButton), + showPrev = utils.valOrDefault(step.showPrevButton, this.opt.showPrevButton), this.setTitle(step.title ? step.title : ''); this.setContent(step.content ? step.content : ''); @@ -536,7 +644,7 @@ } } - this.setArrow(step.orientation); + this._setArrow(step.orientation); // Set dimensions bubbleWidth = utils.getPixelValue(step.width) || this.opt.bubbleWidth; @@ -551,9 +659,11 @@ setTimeout(function() { self.setPosition(step); // only want to adjust window scroll for non-fixed elements - if (callback) { - if (!step.fixedElement) { callback(); } - else { self.show(); } + if (callback && !step.fixedElement) { + callback(); + } + else { + self.show(); } }, 5); } @@ -561,9 +671,11 @@ // Don't care about height for the other orientations. this.setPosition(step); // only want to adjust window scroll for non-fixed elements - if (callback) { - if (!step.fixedElement) { callback(); } - else { self.show(); } + if (callback && !step.fixedElement) { + callback(); + } + else { + self.show(); } } @@ -604,7 +716,12 @@ this.numberEl.innerHTML = idx; }, - setArrow: function(orientation) { + /** + * Sets which side the arrow is on. + * + * @private + */ + _setArrow: function(orientation) { utils.removeClass(this.arrowEl, 'down up right left'); // Whatever the orientation is, we want to arrow to appear @@ -624,7 +741,10 @@ } }, - getArrowDirection: function() { + /** + * @private + */ + _getArrowDirection: function() { if (this.orientation === 'top') { return 'down'; } @@ -641,7 +761,7 @@ show: function() { var self = this, - className = 'fade-in-' + this.getArrowDirection(), + className = 'fade-in-' + this._getArrowDirection(), fadeDur = 1000; utils.removeClass(this.element, 'hide'); @@ -687,7 +807,10 @@ return this; }, - showButton: function(btnEl, show, permanent) { + /** + * @private + */ + _showButton: function(btnEl, show, permanent) { var classname = 'hide'; if (permanent) { @@ -703,20 +826,20 @@ }, showPrevButton: function(show, permanent) { - this.showButton(this.prevBtnEl, show, permanent); + this._showButton(this.prevBtnEl, show, permanent); }, showNextButton: function(show, permanent) { - this.showButton(this.nextBtnEl, show, permanent); + this._showButton(this.nextBtnEl, show, permanent); }, showCloseButton: function(show, permanent) { - this.showButton(this.closeBtnEl, show, permanent); + this._showButton(this.closeBtnEl, show, permanent); }, /** - * initAnimate + * _initAnimate * =========== * This function exists due to how Chrome handles initial CSS transitions. * Most other browsers will not animate a transition until the element @@ -729,18 +852,29 @@ * * Solution is to add the animate class (which defines our transition) * only after the element is created. + * + * @private */ - initAnimate: function() { + _initAnimate: function() { var self = this; setTimeout(function() { utils.addClass(self.element, 'animate'); }, 50); }, - removeAnimate: function() { + /** + * @private + */ + _removeAnimate: function() { utils.removeClass(this.element, 'animate'); }, + destroy: function() { + var el = this.element; + el.parentNode.removeChild(el); + utils.removeClickListener(this.closeBtnEl, this._getCloseFn()); + }, + init: function(initOpt) { var el = document.createElement('div'), containerEl = document.createElement('div'), @@ -791,11 +925,11 @@ el.appendChild(containerEl); if (opt.showNavButtons) { - this.initNavButtons(); + this._initNavButtons(); } this.initCloseButton(); - this.initArrow(); + this._initArrow(); /** * Not pretty, but IE doesn't support Function.bind(), so I'm @@ -829,36 +963,78 @@ } }; + /** + * HopscotchCalloutManager + * + * @class Manages the creation and destruction of single callouts. + * @constructor + */ HopscotchCalloutManager = function() { var callouts = {}; - this.createCallout = function(id, opt) { + /** + * createCallout + * + * Creates a standalone callout. This callout has the same API + * as a Hopscotch tour bubble. + * + * @param {Object} opt The options for the callout. For the most + * part, these are the same options as you would find in a tour + * step. + */ + this.createCallout = function(opt) { var callout; - opt.isTourBubble = false; - callout = new HopscotchBubble(opt); - callouts[id] = callout; - if (opt.target) { - if (opt.title) { - callout.setTitle(opt.title); - } - - if (opt.content) { - callout.setContent(opt.content); + if (opt.id) { + opt.isTourBubble = false; + callout = new HopscotchBubble(opt); + callouts[opt.id] = callout; + if (opt.target) { + callout.render(opt); } - - callout.render(opt); - callout.show(); + } + else { + throw "Must specify a callout id."; } }; + /** + * createCallout + * + * Returns a callout by its id. + * + * @param {String} id The id of the callout to fetch. + * @returns {Object} HopscotchBubble + */ this.getCallout = function(id) { return callouts[id]; }; + /** + * removeAllCallouts + * + * Removes all existing callouts. + */ + this.removeAllCallouts = function() { + var calloutId, + callout; + + for (calloutId in callouts) { + this.removeCallout(calloutId); + } + }; + + /** + * removeAllCallout + * + * Removes an existing callout by id. + * + * @param {String} id The id of the callout to remove. + */ this.removeCallout = function(id) { var callout = callouts[id]; + callouts[id] = null; if (!callout) { return; } callout.destroy(); @@ -924,7 +1100,11 @@ return step; }, - // Used for nextOnTargetClick + /** + * Used for nextOnTargetClick + * + * @private + */ targetClickNextFn = function() { self.nextStep(false); }, @@ -1116,7 +1296,11 @@ step = getCurrStep(); origStepNum = currStepNum; - // Callback for goToStepWithTarget + /** + * Callback for goToStepWithTarget + * + * @private + */ changeStepCb = function(stepNum) { if (stepNum === -1) { // Wasn't able to find a step with an existing element. End tour. @@ -1218,6 +1402,14 @@ } }; + /** + * getCalloutManager + * + * Gets the callout manager. + * + * @returns {Object} HopscotchCalloutManager + * + */ this.getCalloutManager = function() { if (typeof calloutMgr === undefinedStr) { calloutMgr = new HopscotchCalloutManager(); @@ -1300,7 +1492,7 @@ this.isActive = true; if (opt.animate) { - bubble.initAnimate(); + bubble._initAnimate(); } if (!utils.getStepTarget(getCurrStep())) { @@ -1396,7 +1588,7 @@ if (step.nextOnTargetClick) { // Detach the listener after we've clicked on the target OR the next button. - targetEl.removeEventListener ? targetEl.removeEventListener('click', targetClickNextFn, false) : targetEl.detachEvent('click', targetClickNextFn); + utils.removeClickListener(targetEl, targetClickNextFn); } changeStep.call(this, doCallbacks, 1); return this; @@ -1587,10 +1779,10 @@ bubble = getBubble(); if (opt.animate) { - bubble.initAnimate(); + bubble._initAnimate(); } else { - bubble.removeAnimate(); + bubble._removeAnimate(); } bubble.showCloseButton(options.showCloseButton, typeof options.showCloseButton !== undefinedStr); diff --git a/js/hopscotch-0.0.3.min.js b/js/hopscotch-0.0.3.min.js index 6f90fa70..0d829b75 100644 --- a/js/hopscotch-0.0.3.min.js +++ b/js/hopscotch-0.0.3.min.js @@ -1,31 +1,32 @@ -(function(t,z){var k,u,A,i,b,p,l=t[z],B=!1,q={animate:!1,smoothScroll:!0,scrollDuration:1E3,scrollTopMargin:200,showCloseButton:!0,showPrevButton:!1,showNextButton:!0,bubbleWidth:280,bubblePadding:15,arrowWidth:20,skipIfNoElement:!0,cookieName:"hopscotch.tour.state"},w="undefined"!==typeof window.jQuery,r="undefined"!==typeof window.sessionStorage;k=document.body.style;var C="undefined"!==typeof k.MozTransition||"undefined"!==typeof k.MsTransition||"undefined"!==typeof k.webkitTransition||"undefined"!== -typeof k.OTransition||"undefined"!==typeof k.transition;l||(k=function(){B&&l.startTour()},window.addEventListener?window.addEventListener("load",k,!1):window.attachEvent&&window.attachEvent("onload",k),b={addClass:function(a,b){var c,d,f;if(0===a.className.length)a.className=b;else{c=a.className.split(/\s+/);d=0;for(f=c.length;dg||g>=h.steps.length?null:h.steps[g]},x=function(){e.nextStep(!1)},y=function(a,d){var c,f;0<=g+a&&g+ad&&e.onPrev)e.onPrev();b.invokeCallbacks(0g?d:g,h=b.getScrollTop(),g=h+b.getWindowHeight(),m=e-f.scrollTopMargin,v,k,l;e>=h&&(e<=h+f.scrollTopMargin||d<=g)?a&&a():f.smoothScroll?"undefined"!==typeof YAHOO&&"undefined"!==typeof YAHOO.env&&"undefined"!==typeof YAHOO.env.ua&&"undefined"!==typeof YAHOO.util&&"undefined"!==typeof YAHOO.util.Scroll?(e=YAHOO.env.ua.webkit?document.body:document.documentElement, -d=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:void 0,e=new YAHOO.util.Scroll(e,{scroll:{to:[0,m]}},f.scrollDuration/1E3,d),e.onComplete.subscribe(a),e.animate()):w?$("body, html").animate({scrollTop:m},f.scrollDuration,a):(0>m&&(m=0),v=h>e?-1:1,k=Math.abs(h-m)/(f.scrollDuration/10),l=setInterval(function(){var c=b.getScrollTop(),d=c+v*k;0=m||0>v&&d<=m?(d=m,clearInterval(l),a&&a(),window.scrollTo(0,d)):(window.scrollTo(0,d),b.getScrollTop()===c&&(clearInterval(l),a&&a()))},10)):(window.scrollTo(0, -m),a&&a());if(c.onShow)c.onShow();c.nextOnTargetClick&&b.addClickListener(j,x)});b.invokeCallbacks("show",[h.id,g]);c.multipage&&(e+=":mp");b.setState(f.cookieName,e,1)},c.delay?c.delay:0);return this};this.prevStep=function(a){t.call(this,a,-1);return this};this.nextStep=function(a){var c=n(),d=b.getStepTarget(c);c.nextOnTargetClick&&(d.removeEventListener?d.removeEventListener("click",x,!1):d.detachEvent("click",x));t.call(this,a,1);return this};this.endTour=function(a,c){var d=s(),a=b.valOrDefault(a, -!0),c=b.valOrDefault(c,!0);g=0;j=void 0;d.hide();a&&b.clearState(f.cookieName);l.isActive=!1;h&&c&&b.invokeCallbacks("end",[h.id]);l.removeCallbacks(!0);h=null;return this};this.getCurrTour=function(){return h};this.getCurrStepNum=function(){return g};this.listen=function(a,b,c){a&&b&&p[a].push({cb:b,fromTour:c});return this};this.removeCallback=function(a,b){var c=p[a],d,e;d=0;for(e=c.length;dg||g>=h.steps.length?null:h.steps[g]},t=function(){e.nextStep(!1)},y=function(a,d){var c,f;0<=g+a&&g+ad&&e.onPrev)e.onPrev();b.invokeCallbacks(0g?d:g,h=b.getScrollTop(),g=h+b.getWindowHeight(),m=e-f.scrollTopMargin,w,k,l;e>=h&&(e<=h+f.scrollTopMargin||d<=g)?a&&a():f.smoothScroll?"undefined"!==typeof YAHOO&&"undefined"!==typeof YAHOO.env&&"undefined"!==typeof YAHOO.env.ua&&"undefined"!==typeof YAHOO.util&&"undefined"!==typeof YAHOO.util.Scroll?(e=YAHOO.env.ua.webkit?document.body:document.documentElement, +d=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:void 0,e=new YAHOO.util.Scroll(e,{scroll:{to:[0,m]}},f.scrollDuration/1E3,d),e.onComplete.subscribe(a),e.animate()):x?$("body, html").animate({scrollTop:m},f.scrollDuration,a):(0>m&&(m=0),w=h>e?-1:1,k=Math.abs(h-m)/(f.scrollDuration/10),l=setInterval(function(){var c=b.getScrollTop(),d=c+w*k;0=m||0>w&&d<=m?(d=m,clearInterval(l),a&&a(),window.scrollTo(0,d)):(window.scrollTo(0,d),b.getScrollTop()===c&&(clearInterval(l),a&&a()))},10)):(window.scrollTo(0, +m),a&&a());if(c.onShow)c.onShow();c.nextOnTargetClick&&b.addClickListener(j,t)});b.invokeCallbacks("show",[h.id,g]);c.multipage&&(e+=":mp");b.setState(f.cookieName,e,1)},c.delay?c.delay:0);return this};this.prevStep=function(a){u.call(this,a,-1);return this};this.nextStep=function(a){var c=n(),d=b.getStepTarget(c);c.nextOnTargetClick&&b.removeClickListener(d,t);u.call(this,a,1);return this};this.endTour=function(a,c){var d=s(),a=b.valOrDefault(a,!0),c=b.valOrDefault(c,!0);g=0;j=void 0;d.hide();a&& +b.clearState(f.cookieName);i.isActive=!1;h&&c&&b.invokeCallbacks("end",[h.id]);i.removeCallbacks(!0);h=null;return this};this.getCurrTour=function(){return h};this.getCurrStepNum=function(){return g};this.listen=function(a,b,c){a&&b&&p[a].push({cb:b,fromTour:c});return this};this.removeCallback=function(a,b){var c=p[a],d,e;d=0;for(e=c.length;d