Skip to content

Instantly share code, notes, and snippets.

@edeustace
Last active March 20, 2018 17:52
Show Gist options
  • Save edeustace/0b3ed61219db106e44af86e5445c97c9 to your computer and use it in GitHub Desktop.
Save edeustace/0b3ed61219db106e44af86e5445c97c9 to your computer and use it in GitHub Desktop.
demo-player using assets generated using `pie pack`
<!doctype html>
<html>
<head>
<title>Demo</title>
<style>
body {
font-family: 'Roboto', sans-serif;
}
.note {
padding: 20px;
background-color: lavenderblush;
}
.holder {
display: flex;
}
</style>
</head>
<body>
<p>
This is an example of initializing a pie item using the files generated by pie pack.
<div class="note">
This must be run via a http server, not using the file system.
</div>
</p>
<div class="holder">
<multiple-choice pie-id="1"> </multiple-choice>
<multiple-choice-configure pie-id="1"></multiple-choice-configure>
</div>
<script src="./pie-configure.js"></script>
<script src="./pie-controllers.js"></script>
<script src="./pie-view.js"></script>
<script type="text/javascript">
//have to init this cos config.js will use `module.exports`.
window.module = {};
</script>
<!-- warning only works in modern browsers: https://caniuse.com/#feat=es6-module -->
<script type="module">
/**
* Just loading the local config.js into window.module.exports.
* Could have created it inline or loaded it from a server...
*/
import * as config from './config.js';
const models = window.module.exports.models;
/**
* A demo sessions array
*/
const sessions = [];
/**
* demo env
*/
const env = { mode: 'gather' };
/**
* return a session by id, create it if not present
*/
const getSession = id => {
const s = sessions.find(s => s.id === id);
if (s) {
return s;
}
const newSession = { id };
sessions.push(newSession);
return newSession;
}
/**
* An array of promises for each element in the model
*/
const allDefined = models.map(m => Promise.all([
customElements.whenDefined(m.element),
//wait for *-configure too
customElements.whenDefined(`${m.element}-configure`),
]));
const _updateElement = (element, id) => (model) => {
const controller = window['pie-controller-pie-item'][element];
const session = getSession(id);
const modelPromise = controller ? controller.model(model, session, env) : Promise.resolve(m);
const el = document.querySelector(`${element}[pie-id="${id}"]`);
if (el) {
modelPromise.then(elementModel => {
//set controller processed model
el.model = elementModel;
//set session
el.session = session;
});
}
}
Promise.all(allDefined)
.then(() => {
/**
* The custome elements are ready, start sending in the model/session
*/
models.forEach(m => {
const el = document.querySelector(`${m.element}[pie-id="${m.id}"]`);
const configEl = document.querySelector(`${m.element}-configure[pie-id="${m.id}"]`);
const updateElement = _updateElement(m.element, m.id);
if (el) {
updateElement(m);
}
if (configEl) {
//set the raw model on config - it want's all the info.
configEl.model = m;
configEl.addEventListener('model.updated', e => {
updateElement(e.detail.update)
});
}
});
})
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Demo</title>
<style>
body {
font-family: 'Roboto', sans-serif;
}
.note {
padding: 20px;
background-color: lavenderblush;
}
</style>
</head>
<body>
<p>
This is an example of initializing a pie item using the files generated by pie pack.
<div class="note">
This must be run via a http server, not using the file system.
</div>
</p>
<multiple-choice pie-id="1"> </multiple-choice>
<script src="./pie-controllers.js"></script>
<script src="./pie-view.js"></script>
<script type="text/javascript">
//have to init this cos config.js will use `module.exports`.
window.module = {};
</script>
<!-- warning only works in modern browsers: https://caniuse.com/#feat=es6-module -->
<script type="module">
/**
* Just loading the local config.js into window.module.exports.
* Could have created it inline or loaded it from a server...
*/
import * as config from './config.js';
const models = window.module.exports.models;
/**
* A demo sessions array
*/
const sessions = [];
/**
* demo env
*/
const env = { mode: 'gather' };
/**
* return a session by id, create it if not present
*/
const getSession = id => {
const s = sessions.find(s => s.id === id);
if (s) {
return s;
}
const newSession = { id };
sessions.push(newSession);
return newSession;
}
/**
* An array of promises for each element in the model
*/
const allDefined = models.map(m => customElements.whenDefined(m.element));
Promise.all(allDefined)
.then(() => {
/**
* The custome elements are ready, start sending in the model/session
*/
models.forEach(m => {
const el = document.querySelector(`[pie-id="${m.id}"]`);
if (el) {
//pie-controller.js stores the controllers in this global...
const controller = window['pie-controller-pie-item'][m.element];
const session = getSession(m.id);
const modelPromise = controller ? controller.model(m, session, env) : Promise.resolve(m);
modelPromise.then(elementModel => {
//set model
el.model = elementModel;
//set session
el.session = session;
});
}
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment