JSFiddle - React, Tailwind, and code Playground

by Jowed

HTML

<head>
  <script src="https://static.matterport.com/showcase-sdk/2.0.1-0-g64e7e88/sdk.js"></script>
</head>

<body>
  <div class="container">
    <iframe id="showcase-iframe" width="600" height="400" frameborder="0" allowfullscreen></iframe>
    <p>
      After the model loads, select a tag from the "Mattertag Post" selector, paste an sid from another model in the "Model SID" then click the "INJECT LINK" button.<br/>
      Navigate to the tag, open it, and click the "LINK TO OTHER MODEL" text that was just injected. 
    </p>
    <br />
    <label for='mattertag-selector'>Mattertag Post:</label><select id='mattertag-selector' class='mattertag-selector'>
      <option disabled selected value />
    </select><br />
    <label for='model-sid'>Model SID:</label><input type='text' id='model-sid'><br />
    <button class="btn" id='inject-html'>INJECT LINK</button>
  </div>
</body>

CSS

select {
  width: 150px;
  margin-top: 10px;
}

input[type='text'] {
  width: 150px;
  margin-top: 10px;
}

button {
  width: 200px;
  margin-top: 10px;
}

JavaScript

const key = "6eb9607db19546aebe10dce90aa001fa" // jsfiddle key

const iframe = document.getElementById('showcase-iframe')
function connect() {
  window.MP_SDK.connect(iframe, key, '3.6')
	  .then(loadedShowcaseHandler, console.error);
}
iframe.onload = connect;
iframe.src = 'https://my.matterport.com/show/?m=Lvk6xgJcG6W&play=1';

function loadedShowcaseHandler(mpSdk) {
  console.log('CONNECTED')
  const tagSelector = document.getElementById('mattertag-selector');
  clearSelector(tagSelector);
  populateMattertagSelector(mpSdk, tagSelector);
  
  const newModelSidInput = document.getElementById('model-sid');
  // inject a link to a new model
  document.getElementById('inject-html').addEventListener('click', () => {
    const widgetSource = createWidgetSource(newModelSidInput.value);
	
    mpSdk.Mattertag.injectHTML(tagSelector.value, widgetSource)
      .then((pm) => {
      // The message is received and the iframe window source is changed
        pm.on('open.model', (newModelSid) => {
          iframe.src = `https://my.matterport.com/show/?m=${newModelSid}&play=1`;
        });
      });
  });
}

function populateMattertagSelector(mpSdk, tagSelector) {
  function createOption(tag) {
    const option = document.createElement('option')
    option.value = tag.sid;
    option.text = tag.label;

    return option;
  }

  mpSdk.Mattertag.data.subscribe({
    onAdded(index, tag) {
      tagSelector.appendChild(createOption(tag));
    },
  });
}

function clearSelector(selector) {
  while (selector.lastChild) {
    selector.removeChild(selector.lastChild);
  }
}

// The injected HTML sets a "link" which then sends a message with the new model sid back to the application
function createWidgetSource(newModelSid) {
	return `
			<style>
        span {
          color: white;
          text-decoration: underline;
        }
        span:hover{
        	cursor: pointer;
        }
    	</style>
      <span id='link'>LINK TO OTHER MODEL</span>
      <script>
       ...