Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by XState Viz: https://xstate.js.org/viz
const wrapper = document.createElement('div');
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
const fetchMachine = Machine({
id: 'carousel',
initial: 'idle',
context: {
retries: 0
},
states: {
idle: {
on: {
mousedown: 'dragging'
}
},
dragging: {
on: {
mouseup: 'seeking',
}
},
seeking: {
on: {
arrive: 'idle',
mousedown: 'dragging'
}
}
// failure: {
// on: {
// RETRY: {
// target: 'loading',
// actions: assign({
// retries: (context, event) => context.retries + 1
// })
// }
// }
// }
}
});
const createWrapper = () => {
let el = document
.createElement('div');
el
.setAttribute(
'style',
'display:block; idth: 100px; height: 100px; background-color: blue;'
);
el.setAttribute('id', 'car')
return el;
}
const createItem = num => {
const item = document.createElement('div');
item.setAttribute(
'style',
'width: 10px; height: 10px; background-color: green;'
)
return item;
}
const carousel = document.getElementById('car') || createWrapper();
carousel.innerHTML = '';
const items = [1,2].map(createItem);
items.forEach(item => {
carousel.appendChild(item);
})
document.body.appendChild(carousel)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment