Skip to content

Latest commit

 

History

History
31 lines (26 loc) · 1.67 KB

CONTRIBUTING.md

File metadata and controls

31 lines (26 loc) · 1.67 KB
Raw

Developing

Javascript

  • 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.

  • 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.
  • util.less - A number of utility mixins mostly relating to CSS3 properties.
  • vars.less - All LESS variables in one location.

Compiling

Hopscotch uses Grunt for build and testing. You need to have npm and Grunt CLI installed.

  • Run npm install from the hopscotch directory to load in the dev dependencies
  • Install Grunt CLI by running npm install -g grunt-cli
  • Then run grunt or grunt test to jshint and test code

Testing

Hopscotch tests are written using the Mocha testing framework. The tests can be run either in the browser or via the command line. To run the tests in the browser, simply open up test/index.html. To run the tests in the command line, you can run grunt test.