iamdanfox/anno.js

Interactive step-by-step guides for web apps.

anno.js's Issues

Switch anno.coffee to litcoffee format.

This would make generating a nice annotated source very easy.

Conditional tour steps

It'd be great if you could specify a set of conditions for each tour step, and when the tour reaches that step it effectively pauses until those conditions are met.

eg:

1. You can search like this
2. ** Wait for condition $(".results-panel .result-item").length > 0 **
3. Continue with annotations on results

At the moment this is achieved by splitting up the tour into lots of little tours, and then triggering them from the right places, but it sort of makes my code a bit messy :)

In this way I can write a really clean tour that guides a user through a set of actions on the app, which is useful if they're learning to use it for the first time.

Data-driven Annotations

Rather than writing up my tour annotations separately from my content, it would be great if the annotation content could be co-located with the target elements. This way, if I need to refactor the code in future it'll be more obvious that I also need to change the tour annotations.

Would also need to include tour step order definition as well.

Tour data could then be aggregated and run accordingly.

Submit to npm / bower registries

Would allow a simpler usage section:

npm install annojs

Consider using require or browserify instead of bower

Serious BUG: Clicking fast on next causes anno.js to malfunction

Clicking fast and multiple times on the Next button causes AnnoJs to misbehave (dosn't closes the dialogs) and this error is reported:
Can't hideAnno() for '" + this.target + "' when @_annoElem ") + "is null. Did you call hideAnno() twice?

I managed to reproduce it in the official example click next/back fast / multiple times.

Quick Fix is to remove the transition in .anno {} and to remove the setTimeout to remove an item in hideAnno().

A proper fix would be probably to animate it with JQuery and wait until the transition is done before opening the new one and closing the existing, another to make the steps async or to spend more time timing the animation and the steps but feels kind of hacky because it depends on too many things.

I can do a proper fix if pull requests are still reviewed.

Target's inline styles partially destroyed in mac/Safari

http://iamdanfox.github.io/anno.js/#scrolling-inside-divs

Mention that "anno.js is not intended for mobile usage" when accessed from a phone.

UX of http://iamdanfox.github.io/anno.js/ is currently pretty bad on an iPhone

Resizing the window can place the annotation outside the viewport.

Form submits on NextButton click

When the NextButton is clicked on the annotation, it submits the form if the target's parent is a form. How do I stop this?

Optional 'plinth' to simulate some padding around objects?

Matches intro.js behaviour...

Does not scroll to correct position in vertically scrollable div

When targeting an element within a vertically scrollable div, Anno.js does not scroll to the correct position. Effectively the annotation can not be seen at all in a full webpage.

See fiddle here (here you can scroll to find the annotation):
http://jsfiddle.net/xgn12yzx/2/

CoffeeScript source isn't in repo

There is an anno.js file that indicates it was built by CoffeeScript but no source file can be found in the repo. Is Anno.js coded in CoffeeScript or JavaScript? I don't want to make changes to the anno.js file if it is an output and not the source.

AnnoElem fadein slides from the position origin...

Specify no transition duration for left or top, and just animate margin to provide a nice slide?

Mac/Safari anno slidein animation is wrong

The Anno element fades in as it transitions from top:0,left:0 to whatever the specified position is.

This also degrades the scrolling experience!

switchChainToNext() on $target event

When using anno.js to guide the user through using a web-app interface, it's sometimes preferable to show the next annotation when a certain event occurs on the interface (eg: next when $target element is clicked, keypress occurs, DOMNodeInserted etc)

To achieve this currently, handlers are added in onshow/onhide. Although it's certainly possible to work this way, it does result in a lot of ctrl + c, ctrl + v code

Vanilla eg:

    target: ".confirm"
    position: "top"
    content: "Press <code>confirm</code> to continue"
    buttons: []
    onShow: (anno, $target, $annoElem) ->
        handler = -> 
            anno.switchToChainNext()
        $target.on "click", handler
        return handler
    onHide: (anno, $target, $annoElem, handler) ->
        $target.unbind "click", handler

Complicated eg:

    target: "#attribute-common-class"
    position: "bottom"
    content: "Click the <code>tag token</code> below to continue"
    buttons: []
    onShow: (anno, $target, $annoElem) ->
        handler = -> 
            setTimeout -> #allow angular digest cycle to run first
                anno.switchToChainNext()
            , 10
        $target.find(".tags_token").on "mouseup", handler
        return handler
    onHide: (anno, $target, $annoElem, handler) ->
        $target.find(".tags_token").unbind "mouseup", handler

It'd be great if anno.js had some additional properties to hook into, eg:

    event: "click"
    eventTarget: ".clickTarget" #default to $target if not specified
    eventHandler: -> #default to anno.switchToChainNext() if not specified.
        #in addition to custom handlers, also provide annoEvent.Back(), .Next() and .Close() as pre-configured handlers
        setTimeout ->
            anno.switchToChainNext()
        , 10

NextButton cause jquery validation fired

Hi,

My web page contains some form elements and i want to use Anno.js to guide my visitors.But after first textbox, Anno.js cause form validation.
There is not any event that could be trigger validation.

After this step validation fired

{
            target: '#title', // second block of code
            position: 'bottom',
            content: 'Write your title here',
            buttons: [AnnoButton.NextButton]
        }

Do you have any suggestion?

event.preventDefault() required on default tour button clicks?

Clicking the default tour button fires the click event on containing elements, which isn't ideal.

IE 10 vs IE 11

Hi, the anno.js is working fine in IE 11 but it is not working when I switch IE 10. Is there compatibility limitation?

Usage instructions should mention the minified files available.

v0.2.0 release, downloadable as a zip file.

Mention overall size gzipped and minified (~ 5KB as of writing).

Specifying `position:left` could display an Anno off-screen

... if the target is already on the left of the viewport, (e.g. on iPhones).

Hat tip to WiseWeasel

Users shouldn't specify these off-screen positions, but perhaps we should put a warning/error on the console?

clicking outside doesn't close annojs

In the last step of our tour, we have a custom button that opens up a modal and closes annojs, however if you do not click on that button (i.e. if you click somewhere outside of annojs), annojs remains open. In any other step except for the last one, annojs will close if you click outside of it. Is there something I"m overlooking?

Anno is rendered ~20px above it's clickable position Mac/Safari

http://iamdanfox.github.io/anno.js/ Size&Positioning section

This makes an arbitrary rectangle clickable instead of the button

AnnoElem inherits target parent's line-height...

... this leads to inconsistent overlays.

Overlay doesn't always cover entire screen when there is no :scrollable parent.

Scrolling happens in two jumps.

Replace litera's plugin with this one: https://github.com/Arwid/jQuery.scrollIntoView. This seems to allow multiple targets.

Simultaneous overlay fadeout and anno fadeout causes flickering

Do anno fadeout first, then hide overlay.

Maybe use promises/callbacks?

Unable to set parent element of overlay

For my application I needed to set the parent of the overlay to an element deeper in my tree than body due to some absolute/relative positioning madness messing up my z-indexes. The request is to replace the $('body') call in showOverlay() with a configurable property. Thanks!

position isn't always correct

Evaluate using jQuery UI position...
http://api.jqueryui.com/position/

Multipage tour

Hi,

I'm wondering how to set a tour for a multipage website, do you have any ideas ?

Thanks a lot.

$target changing size leaves anno behind

• Demonstrate a Mutation Observer (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
• Think about whether this should be native (is there a measurable performance hit?)...

Fix: button type should set to button

in AnnoButton.prototype.buttonElem you should do a little fixation:

return $("<button type='button' class='anno-btn'></button>").html(this.textFn(anno)).addClass(this.className).click((function(_this) { return function(evt) { return _this.click.call(anno, anno, evt); }; })(this));

it should be like this, otherwise it submit the form when click next or done

Add usage instructions to README and/or index.html

• provide one minified js file, one compressed css file.
• link to jQuery hosted on Google CDN
• perhaps use rawgithub.com or iamdanfox.github.io as a casual CDN

Link to Docco source from github.io page

example file references don't exist

http://iamdanfox.github.io/anno.js/scrollintoview/jquery.scrollintoview.min.js

Default line heights look weird with Bootstrap

Anno shadows don't appear in Mac/Firefox

Create demo page that includes container div

(to demonstrate the scrollintoview functionality)

Buttons should have `:hover` and `:active` states

Invalid jQuery require

The valid npm package name here is jquery:

module.exports = factory(require("jQuery"));

Otherwise bundlers fail to compile.

Static Backdrop

How to prevent the Anno hide or disssapear when is clicked outside?
I just created an Anno that contain 4 guide dialog. I change some css code when 1st dialog onShow, then set them back when the last dialog onHide.
My problem is, when me (is on second or third dialog) click outside the dialog, Anno will dissapear but my css is not set back yet. how can I prevent anno from hide or dissapear when i click outside the dialog, or maybe u have another good way/ event to change my css when anno dissapear

Event for tour dismissed

I need to know if a tour has been dismissed, rather than just a single anno step being hidden.

Is this possible?

Create github.io page to allow interactive demo

Publish a prominent link on README.md.

Anno slide-in animation is slightly choppy in Chrome

Make it smoother. Maybe use transforms or that translation hack to engage the GPU. (Try to get first click smoother!)

positioning strings don't match CSS conventions.

CSS: 'center top'
Anno: 'center-top'

CSS: 'left top'
Anno: 'top'

Repeatedly calling `show()` on an Anno object causes duplicates

Unable to place border on .anno anno-arrow

I would like to place a border around the anno-inner div and around the anno-arrow so that it's one big anno guide border.

.anno .anno-arrow {
position: absolute;
border: 12px solid white;
}

.anno.anno-target-center-left .anno-arrow,
.anno.anno-target-left .anno-arrow {
right: 100%;
top: 15px;
border-left: none;
border-color: transparent white;
}

CSS changes to $target don't persist after anno.hide()

Static targets are liable to jump...

Background remained transparent in Mac/Firefox