Skip to content

Instantly share code, notes, and snippets.

@johanbrook
Created January 28, 2016 00:20
Show Gist options
  • Save johanbrook/ed228430579630c29843 to your computer and use it in GitHub Desktop.
Save johanbrook/ed228430579630c29843 to your computer and use it in GitHub Desktop.
Horizontal scroller. "Kinda" reactive.
const store = {
_state: 0,
max: Infinity,
min: 0,
_listeners: [],
set listeners(fn) {
this._listeners.push(fn);
},
get current() {
return this._state;
},
set current(n) {
if (n <= this.max && n >= this.min) {
this._state = n;
this.dispatch();
}
},
dispatch() {
this._listeners.forEach(fn => fn(this._state));
}
};
const increment = (state) => state + 1;
const decrement = (state) => state - 1;
window.App = {
run(listener) {
if (typeof listener === 'function') {
store.listeners = listener;
}
store.max = 3;
},
next() {
store.current = increment(store.current);
return store.current;
},
previous() {
store.current = decrement(store.current);
return store.current;
},
current() {
return store.current;
}
};
const scroll = (steps) => `translate(-${steps * 100}vw, 0)`;
const init = () => {
const $container = $('.scroller');
window.App.run((state) => {
$container.css({
transform: scroll(state)
});
});
};
document.addEventListener('DOMContentLoaded', init, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment