linkedin/hopscotch — pull request #70 by zimmi88 (2014-03-14 01:49:01+00:00)
Title: Rendering tour & callout bubbles using compiled templates

Resolves issues #55, #39, #33.

This update greatly refactors the code in `HopscotchBubble` to use compiled templates to render the internals of bubbles. It also creates an API by which end users can set their own render method globally or as part of a tour.

To get a sense of these changes and how to interact with these templates, check out the README file in the /src/tl folder: https://github.com/zimmi88/hopscotch/blob/templates/src/tl/README.md

Summary of changes
---------------------------
- Use template to render tour and callout bubbles. Templates are passed a JSON object containing information on what to render.
- Remove old methods that created and manipulated content DOM elements (for instance, instead of adding a 'hide' class to a button, we just don't render it). Markup that would've been generated by these methods are now included in a default template, bubble-default.jst.
- Update how we handle listeners. Now we only have one click listener tied to the entire Hopscotch bubble. Determining what action to take is handled thru noted class names.
- Create API to set a custom rendering method globally and via tour/callout config.
- New tour configuration option `unsafe` allows flagging to the template that the `title` and `content` should not be trusted.
- Deprecates tour configuration option `bubblePadding` and refactors setPosition() to not rely on this option for its calculations.
- Update Grunt build process to compile and include templates in output using includereplace.
- Add unit tests to verify new features.
- Add sinon.js to testing toolkit.

Testing Done
-----------------
- Verified that all unit tests pass. New tests include...
- setRenderer() should allow setting a global renderer within the hopscotch.templates namespace
- setRenderer() should allow setting a global custom render method
- Should accept a custom renderer in hopscotch.templates set via tour config
- Should accept a custom renderer method set via tour config
- Should accept a custom renderer in hopscotch.templates set via new callout config
- Should accept a custom renderer method set via new callout config
- Render methods should receive custom data from tours
- Render methods should receive custom data from callouts
- Render methods should receive the unsafe flag when set
- Manually tested various tour/callout configurations using the /demo tour page.