diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css index ab6e019ac..4170dce77 100644 --- a/docs/assets/css/style.css +++ b/docs/assets/css/style.css @@ -36,6 +36,10 @@ img { vertical-align: top; } +input[type="file"] { + cursor: pointer; +} + ::-webkit-scrollbar { width: 5px; height: 5px; @@ -179,19 +183,41 @@ img { } .main .part-left .libs { - height: 55px; + display: flex; + height: 50px; + border-bottom: 1px solid rgb(17, 21, 24); +} + +.main .part-left .upload { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 0 15px; + height: 100%; + font-size: 13px; + color: #f1fa8c; + border-right: 1px solid rgb(17, 21, 24); + background-color: rgb(39, 41, 54); +} + +.main .part-left #file { + opacity: 0; + position: absolute; + inset: 0; + width: 100%; + height: 100%; } .main .part-left .libsInput { height: 100%; - width: 100%; + flex: 1; padding: 10px; outline: none; resize: none; border: none; font-size: 13px; color: #ccc; - border-bottom: 1px solid rgb(17, 21, 24); background-color: rgb(28, 32, 34); } diff --git a/docs/assets/js/common.js b/docs/assets/js/common.js index b6f0bf963..128b60660 100644 --- a/docs/assets/js/common.js +++ b/docs/assets/js/common.js @@ -11,6 +11,7 @@ var $popups = document.querySelector('.popups'); var $console = document.querySelector('.console'); var $typeScript = document.querySelector('#typeScript'); + var $file = document.querySelector('#file'); var loadedLibs = []; window['consoleLog']($console); @@ -199,6 +200,14 @@ initApp(); } + function readFile(file) { + return new Promise((resolve) => { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result); + reader.readAsText(file); + }) + } + $run.addEventListener('click', function () { restart(); }); @@ -214,6 +223,29 @@ window.location.reload(); }); + $file.addEventListener('change', async function () { + for (let index = 0; index < $file.files.length; index++) { + const file = $file.files[index]; + const name = file.name.toLowerCase().trim() + if (name.endsWith('.css')) { + const text = await readFile(file); + const $style = document.createElement('style'); + $style.textContent = text; + document.body.appendChild($style); + $lib.value = `\n[${name}]`; + $lib.value = $lib.value.trim(); + } + if (name.endsWith('.js')) { + const text = await readFile(file); + const $script = document.createElement('script'); + $script.textContent = text; + document.body.appendChild($script); + $lib.value = `\n[${name}]`; + $lib.value = $lib.value.trim(); + } + } + }); + window.addEventListener('error', function (err) { console.error(err); }); diff --git a/docs/index.html b/docs/index.html index cc387bcf5..d85d7decb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -77,6 +77,10 @@