Export - enterprise exporter

by Eugene Trounev

HTML

<link rel="stylesheet" href="https://appcdn2.docsie.io/js/manager/staging/css/manager.css">
<div class="pure docsie docsie-blue">
  <div class="react-responsive-modal-overlay" data-testid="overlay" style="animation: 150ms ease 0s 1 normal none running react-responsive-modal-fadeIn;">
    <div class="react-responsive-modal-modal docsie-dialog docsie-preview-pane" role="dialog" aria-modal="true" data-testid="modal">
      <div class="docsie-dialog-body">
        <div class="docsie-border-bottom docsie-border-2x" style="display: flex; height: 48px; padding: 0px 8px;">
          <nav class="docsie-menu docsie-menu-horizontal">
            <ul class="docsie-menu-list menu-spacer">
              <li class="docsie-menu-item"><strong>Custom style editor</strong></li>
            </ul>
            <ul class="docsie-menu-list">
              <li class="docsie-form"><label>Style name:</label>&nbsp;<input label="Config name" value="default">&nbsp;&nbsp;</li>
              <li class="docsie-menu-item"><button class="docsie-button   docsie-button-primary"><span class="docsie-ellipsis ">Save changes</span></button></li>&nbsp;
              <li class="docsie-menu-item"><button class="docsie-button docsie-button-ghost "><span class="docsie-ellipsis ">Cancel</span></button>&nbsp;&nbsp;</li>
            </ul>
          </nav>
        </div>
        <div class="docsie-editor-enterprise-export docsie-g  docsie-g-nowrap">
          <div class="box" style="width:390px">
            <div class="docsie-tab-container">
              <div class="docsie-tab-head docsie-g docsie-g-align-center docsie-txt-center">
                <div class="docsie-u docsie-button-group docsie-txt-small"><button id="1" onClick="selectTab('1')" class="docsie-button docsie-button-small  docsie-button-selected"><span class="docsie-ellipsis ">Fonts</span></button><button id="2" onClick="selectTab('2')" class="docsie-button docsie-button-small "><span class="docsie-ellipsis ">Colors</span></button><button id="3"...

SCSS

.docsie {
.docsie-project {
	[class*="docsie-project-state-"] {
    font-weight: 600;
		border: none;
    color: white;
	}
	.docsie-project-state-none {
		background-color: #dfe6ec;
    color: black;
	}
	.docsie-project-state-red {
		background-color: #c12d2d;
	}
	.docsie-project-state-yellow {
		background-color: #d36300;
	}
	.docsie-project-state-green {
		background-color: #2dc189;
	}
	.docsie-project-state-blue {
		background-color: #2d78c1;
	}
}
}

JavaScript

fetch(new Request("https://appcdn2.docsie.io/images/icons.svg"), {
  headers: {
    "Content-Type": "text/plain",
  },
}).then((response) => response.text()).then((assets) => {
  const asset = document.createElement("div");
  asset.style.display = "none";
  asset.innerHTML = assets;
  document.body.append(asset);
});

function selectTab(id) {
	document.querySelector(".docsie-tab-head .docsie-button-selected").classList.remove("docsie-button-selected");
	document.getElementById(id).classList.add("docsie-button-selected");
	document.querySelectorAll(".docsie-tab-body").forEach(tab => tab.style.display = "none");
	document.getElementById("tab" + id).style.display = "block";
}
selectTab('1')
function SendDataToIframe() {
	var iframe = document.getElementById("PreviewFrame");
	iframe.contentWindow.postMessage({"--docsie-link-color":"--docsie-color-primary","--docsie-background-color":"--docsie-color-contrast-lowest"}, "*");
}