React

by gion_13

HTML

<div id="app"></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;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class App extends React.Component {
	componentDidMount() {
    const script = document.getElementById('mytime-1529566549742-initiator').innerHTML;
    window.eval(script);
  }
  
  getScriptHTML() {
  	return "<script id='mytime-1529566549742-initiator'> !function(document, data) { var config = {}; var scriptId = 'mytime-widget-script'; /* if it's the first time a button is embedded in this page, add the \"widget API script\" (if it doesn't already exist) */ var existingWidgetApiScript = document.getElementById(scriptId); if (!existingWidgetApiScript) { js = document.createElement('script'); js.scriptId = scriptId; js.src = (('https:' === document.location.protocol ? 'https:' : 'http:') + \"//dbr8gblg5rhpr.cloudfront.net/assets/my_client/booking_widget_embed.js\"); document.body.appendChild(js); } /* create button */ var button = document.createElement('div'); button.style.display = 'inline-block'; button.style.cursor = 'pointer'; button.setAttribute('class', 'mytime-widget-button-wrapper'); button.setAttribute('widget-data', JSON.stringify(data)); button.innerHTML = data.button_html; var initialScriptEl = document.getElementById('mytime-1529566549742-initiator'); initialScriptEl.parentNode.insertBefore(button, initialScriptEl); /* attach the data to the button html */ document.querySelectorAll('.mytime-widget-button-wrapper') .forEach(function (buttonWrapper) { buttonWrapper.onclick = function () { var data = buttonWrapper.getAttribute('widget-data'); myTimeWidget.open(JSON.parse(data)); }; buttonWrapper.querySelectorAll('a') .forEach(function (link) { link.onClick = null; }); }); }(document, {\"company_id\":94514,\"top_bar_color\":\"#319fb5\",\"header_type\":1,\"selected_theme\":\"default\",\"button_html\":\"<a href=\\\"javascript:void(0);\\\" style=\\\"background-color: #081e72; color: #fff; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 21px; line-height: 50px; padding: 0px 30px; display: inline-block; border-radius:...