Skip to content
This repository has been archived by the owner on Feb 17, 2021. It is now read-only.

Commit

Permalink
update CONTRIBUTING.md with LESS file info
Browse files Browse the repository at this point in the history
  • Loading branch information
Gordon Koo committed May 22, 2013
1 parent d65e536 commit 7caa02d
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 4 deletions.
12 changes: 12 additions & 0 deletions CONTRIBUTING.md
@@ -1,13 +1,25 @@
Developing
==========

Javascript
----------

All code is contained in hopscotch-X.X.X.js, where X.X.X denotes the version number.

* `Hopscotch` - controls tour state and contains the exposed API methods such as `startTour()`, `endTour()`, `showStep()`, and so on. You can think of it as the controller.
* `HopscotchBubble` - represents the tour step callout bubble that appears next to target elements. It is responsible for rendering, updating step content, and setting its position. You can think of it as the view.
* `HopscotchCalloutManager` - manages the creation and destruction of single callouts.

LESS
----
CSS is compiled using [LESS](http://lesscss.org/).

* `hopscotch.less` - The top-level LESS file. Contains most style definitions for the Hopscotch bubble.
* `buttons.less` - Everything related to buttons
* `fade.less` - Everything related to the fade transition animation. The styles here are adopted from Dan Eden's [animate.css](http://daneden.me/animate/).
* `util.less` - A number of utility mixins mostly relating to CSS3 properties.
* `vars.less` - All LESS variables in one location.

Compiling
=========
Use the [Google Closure Compiler](https://developers.google.com/closure/compiler/) to compile hopscotch-X.X.X.js to hopscotch-X.X.X.min.js.
Expand Down
8 changes: 4 additions & 4 deletions README.md
Expand Up @@ -114,7 +114,7 @@ This is an example of a tour defined with only basic steps.
}
```

**IMPORTANT** -- title and content are set using element.innerHTML. This allows the inclusion of very basic markup like links and lists. However, it also allows the inclusion of malicious script injections when used improperly. It is highly recommended to never show user-generated content in a Hopscotch tour. If it is absolutely necessary, you must properly escape the input, as always.
**IMPORTANT** -- title and content are set using `element.innerHTML`. This allows the inclusion of very basic markup like links and lists. However, it also allows the inclusion of malicious script injections when used improperly. It is highly recommended to never show user-generated content in a Hopscotch tour. If it is absolutely necessary, you must properly escape the input, as always.

All step options
----------------
Expand Down Expand Up @@ -227,21 +227,21 @@ API Methods

The Hopscotch framework comes with a simple set of API calls with which you can run and manage tours:

* `hopscotch.startTour(tour, stepNum)` - Actually starts the tour. Optional stepNum argument specifies what step to start at.
* `hopscotch.startTour(tour[, stepNum])` - Actually starts the tour. Optional stepNum argument specifies what step to start at.

* `hopscotch.showStep(idx)` - Skips to a given step in the tour

* `hopscotch.prevStep()` - Goes back one step in the tour

* `hopscotch.nextStep()` - Goes forward one step in the tour

* `hopscotch.endTour([clearCookie])` - Ends the current tour. If clearCookie is set to false, the tour state is preserved. Otherwise, if clearCookie is set to true or is not provided, the tour state is cleared.
* `hopscotch.endTour([clearState])` - Ends the current tour. If clearState is set to false, the tour state is preserved. Otherwise, the tour state is cleared by default.

* `hopscotch.configure(options)` - Sets options for running the tour. Note: if this method is called after loading a tour, the options specified will override the options defined in the tour. See above section "Setting tour options" for a list of configuration options.

* `hopscotch.getCurrTour()` - Returns the currently running tour.

* `hopscotch.getCurrStepNum()` - Returns the current zero-based step number.
* `hopscotch.getCurrStepNum()` - Returns the zero-based step number of the currently running tour.

* `hopscotch.getState()` - Checks for tour state saved in sessionStorage/cookies and returns the state if it exists. Use this method to determine whether or not you should resume a tour.

Expand Down

0 comments on commit 7caa02d

Please sign in to comment.