Vue

by morphcast

HTML

<div id="app">
  <span><b>License:</b></span>
  <input v-model="licenseKey" size="44em" placeholder="insert-here-your-license-key" />
  
  <br /><br />
  
  <h2>Modules:</h2>
  <ol>
    <li v-for="module in modules">
      <label>
        <input type="checkbox"
          v-on:change="toggleSelected(module)"
          v-bind:checked="module.selected">
        <span>{{ module.text }}</span>
      </label>
    </li>
  </ol>
  
  <br /><br />
  
  <h2>Listeners:</h2>
  <ol>
    <li v-for="listener in listeners">
      <label>
        <input type="radio"
          v-on:change="toggleSelected(listener)"
          v-bind:checked="listener.selected">
        <span>{{ listener.text }}</span>
      </label>
    </li>
  </ol>
  
  <br /><br />
  
  <!--span><b>Aggregate data over time:</b></span>
  <input type="checkbox"
          v-on:change="toggleSelected(mphTools)"
          v-bind:checked="mphTools.selected">
          
  <br /><br /-->
  
  <span><b>Include MphTools:</b></span>
  <input type="checkbox"
          v-on:change="toggleSelected(mphTools)"
          v-bind:checked="mphTools.selected">
                  
  <br /><br />
  
  <span><b>Full JavaScript without HTML tags:</b></span>
  <input type="checkbox"
          v-on:change="toggleSelected(onlyJS)"
          v-bind:checked="onlyJS.selected">
                  
  <br /><br />
  
  <h2>Generated code:</h2>
  <span v-if="showCopyMsg">Snippet copied to clipboard!</span>
  <span v-else>&nbsp;</span>
  <div><textarea v-model="generatedCode" rows="50" cols="100" @click="copyTextArea($event)" readonly></textarea></div>
  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const CodeGenerator = {
	_AI_SDK_SRC: () => "https://ai-sdk.morphcast.com/v1.16/ai-sdk.js",
	_MPH_TOOLS_SRC: () => "https://sdk.morphcast.com/mphtools/v1.0/mphtools.js",
	_MPH_TOOLS_META: () => `%3Cmeta name="mphtools-feature" content="compatibilityUI, cameraPrivacyPopup, compatibilityAutoCheck"%3E`,
  _MPH_TOOLS_TAG: () => `%3Cscript src="${CodeGenerator._MPH_TOOLS_SRC()}"%3E%3C/script%3E`,
  _AI_SDK_TAG: () => `%3Cscript src="${CodeGenerator._AI_SDK_SRC()}"%3E%3C/script%3E`,
  _MODULE: (a) => `.addModule(CY.modules().${a}.name, {})`,
  _LICENSE_KEY: (a = 'insert-here-your-license-key') => `.licenseKey("${a}")`,
  _EVENT_LISTNER: (a, indent=``) => indent + `window.addEventListener(CY.modules().${a}.eventName, (evt) => {` + "\n" +
    indent + `  console.log('${a} result', evt.detail);` + "\n" +
    indent + `});` + "\n",
  getHTML: (selectedModules, key, hasMphtools, selectedListeners) => unescape(
  	(hasMphtools ? ( 
  		`%3Chead%3E` + "\n" +
    	`  ` + CodeGenerator._MPH_TOOLS_META() + "\n" +
  		`%3C/head%3E` + "\n"
      ) 
      : '') +
  	`%3Cbody%3E` + "\n" +
    (hasMphtools ? ( CodeGenerator._MPH_TOOLS_TAG() + "\n" ) : '') +
    `%3Cscript%3E` + "\n" +
    `CY.loader()` + "\n" +
    `  ` + CodeGenerator._LICENSE_KEY(key) + "\n" +
    		selectedModules.map(m => `  ` + CodeGenerator._MODULE(m) + "\n").join('') +
    `  .load()` + "\n" +
    `  .then(({ start, stop }) => start());` + "\n" +
    `` + "\n" +
    selectedListeners.map(m => `` + CodeGenerator._EVENT_LISTNER(m) + "\n").join('') + "\n" +
    `%3C/script%3E` + "\n" +
    `%3C/body%3E` + "\n"),
  getJS: (selectedModules, key, hasMphtools, selectedListeners) => 
  	`class ScriptLoader {` + "\n" +
    `    static loadScript(url) {` + "\n" +
    `      return new Promise(resolve => {` + "\n" +
    `        const script = document.createElement("script");` + "\n" +
    `        script.type = "text/javascript";` + "\n" +
    `        if (script.readyState) {  //IE` + "\n" +
    `         ...