rehabstudio / rehab-saucyjack

Scroll position detection and triggering module, for simple scroll-triggered CSS animations and transitions.

SaucyJack

What is it?

SaucyJack is a scroll position detection & triggering module. Example available to view here.

Usage

// require SausyJack module
var SaucyJack = require('../path/to/saucy-jack.js');

// Optional options
var options = {
    DEBUG: false,
    TRIGGER_LINE_POS: 0.85,
    ENTITY_SELECTOR: '.saucy-el',
    ACTIVE_CLASS: 'saucy-active',
    INVERT_BEHAVIOUR: false,
}

saucyJack = new SaucyJack.SaucyJack(options);

Methods

saucyJack.addElement(el)

Adds an element that triggers the event when this element enters the trigger zone.

Compiling

Install requirements using the following from the terminal in the project root directory:

npm install

SaucyJack is build using ES2015. To compile to ES5 compatible code use the following from the :

npm run compile

This will create both a /dist/build.js and /dist/build.min.js file, an un compressed file for development and a minified and uglified version for production.

Example

An example file is available in /example/index.html. To compile the latest version of the module code use:

npm run compile-example

To compile /src/saucy-jack.js for both the example and development/production use:

npm run compile-all

Testing

SaucyJack come with complete unit testing and code coverage. Tests are created in the /tests/spec.js file. To run the test use:

npm test

This will create a basic report in the terminal showing if any tests have failed and the total code coverage. To view the full coverage report open /tests/test-results/html/index.html

rehab-saucyjack's Issues

Reformat options object & reduce code duplication in constructor

The options are formatted constant-style e.g. ENTITY_SELECTOR, when they should really be camelCased e.g. entitySelector. Probably worth renaming them too.

Also the code that applies the passed options or the defaults in the constructor is too repetitive. Need to clean this up.

README needs intro, installation & parameter instructions

Need a paragraph on what the lib actually does and its use cases.

Also need instructions on actually installing / integrating the lib.

Lastly, need to explain what all of the parameters mean and what they do.

Add option to trigger from center or bottom edge of elements

The current behaviour reads the top edge position of affected elements. Would like an option to allow triggering to happen from the bottom edge or the center of elements instead.

The option should be global and affect the behaviour of the library for all elements. We can look at allowing this to be specified per-element later.

Nicer example page

Needs a more involved and sexy-looking example than what we currently have. :)

Add inline styles to debug element

The 'debug line' has no styling applied by default so it doesn't behave as expected.

Need to add some inline styling when the debug line is created in order for it to be seen.

Build.min.js producing an Uncaught ReferenceError.

The dist build files are producing 'Uncaught ReferenceError: exports is not defined' within the browsers console.

[API design] Per-element options

Want to be able to specify things like trigger point and other options on a per-element basis.

Potential options:

• trigger point ('top' [default], 'center', 'bottom', percentile, or pixel value)
• class to add/remove
• multiple trigger point logic e.g. 'add class X when top edge passed, remove it when bottom edge passed'
• single-use triggers vs re-triggerable
• callbacks/events to fire when trigger points are hit

Implementation ideas:

• data- params on DOM elements
• Additional param to addElement passing in extra options
• Additional methods to manipulate element options after registration

Ideas wanted!