edeustace/demo-player-w-config-panel.html

## demo-player-w-config-panel.html
<!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>

## demo-player.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>
	<!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>