From 575bfb4bc709ed99c651ca5607bb1aec92a40fb8 Mon Sep 17 00:00:00 2001 From: Misode Date: Wed, 3 Jun 2020 17:22:35 +0200 Subject: [PATCH] Add source controls with copy and download --- public/index.html | 23 ++++++++++++--- public/styles/global.css | 64 +++++++++++++++++++++++++--------------- src/app/app.ts | 41 +++++++++++++++++++++++-- 3 files changed, 98 insertions(+), 30 deletions(-) diff --git a/public/index.html b/public/index.html index 9d3d98a4..512d0eb3 100644 --- a/public/index.html +++ b/public/index.html @@ -3,14 +3,14 @@ - Document + Minecraft Generators
- @@ -21,9 +21,24 @@
- + +
- +
+ + +
+
diff --git a/public/styles/global.css b/public/styles/global.css index b6b83ca5..c6c443bb 100644 --- a/public/styles/global.css +++ b/public/styles/global.css @@ -30,8 +30,8 @@ .source textarea { width: 100%; - height: calc(100vh - 56px - 30px - 13px); - padding: 0.4rem; + height: calc(100vh - 56px); + padding: 1.3rem 0.4rem; border: none; white-space: pre; overflow-wrap: normal; @@ -48,9 +48,31 @@ } .source-controls { - padding: 0.4rem; display: flex; flex-direction: row-reverse; + position: absolute; + right: 17px; + top: 56px; + padding: 5px; +} + +.source-controls .btn:not(:first-child) { + margin-right: 5px; +} + +.source-controls-more { + display: flex; + visibility: hidden; + flex-direction: column; + position: absolute; + right: 17px; + top: 91px; + padding: 5px; +} + +.source-controls .btn, +.source-controls-more .btn { + background: #1f2020a6; } .gutter.gutter-horizontal { @@ -59,34 +81,28 @@ cursor: ew-resize; } - .btn { - display: inline; + display: flex; + align-items: center; border: none; color: #ffffff; - background: #5c615f; - padding: 7px 20px; + fill: #ffffff; + background-color: #1f2020a6; + padding: 7px 11px; cursor: pointer; outline: none; transition: background-color 0.2s; } +.btn.check { + fill: #97fa55; + color: #97fa55; +} + +.btn svg:not(:last-child) { + margin-right: 5px; +} + .btn:hover { - background: #787c7b; -} - -.dropdown { - display: inline; - border: none; - color: #ffffff; - background: #5c615f; - padding: 7px 7px; - cursor: pointer; - outline: none; - font-size: 1rem; - transition: background-color 0.2s; -} - -.dropdown:hover { - background: #787c7b; + background-color: #5d5f5fa6; } diff --git a/src/app/app.ts b/src/app/app.ts index a8f42666..648df52f 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -23,8 +23,9 @@ const models: { let model = models["loot-table"] -let treeViewEl = document.getElementById('tree-view')! -let sourceviewEl = document.getElementById('source-view')! +const treeViewEl = document.getElementById('tree-view')! +const sourceviewEl = document.getElementById('source-view')! +const sourceviewOut = document.getElementById('source-view-output')! Split([treeViewEl, sourceviewEl], { sizes: [66, 34] }) @@ -45,6 +46,42 @@ modelSelector.addEventListener('change', evt => { model.invalidate() }) +const sourceControlsToggle = document.getElementById('source-controls-toggle')! +const sourceControlsMenu = document.getElementById('source-controls-menu')! +sourceControlsToggle.addEventListener('click', evt => { + sourceControlsMenu.style.visibility = 'visible' + + document.body.addEventListener('click', evt => { + sourceControlsMenu.style.visibility = 'hidden' + }, { capture: true, once: true }) +}) + +const sourceControlsCopy = document.getElementById('source-controls-copy')! +const sourceControlsDownload = document.getElementById('source-controls-download')! +const sourceControlsShare = document.getElementById('source-controls-share')! + +const addChecked = (el: HTMLElement) => { + el.classList.add('check') + setTimeout(() => { + el.classList.remove('check') + }, 2000) +} + +sourceControlsCopy.addEventListener('click', evt => { + (sourceviewOut as HTMLTextAreaElement).select() + document.execCommand('copy'); + addChecked(sourceControlsCopy) +}) + +sourceControlsDownload.addEventListener('click', evt => { + const fileContents = encodeURIComponent(JSON.stringify(model.data, null, 2) + "\n") + const dataString = "data:text/json;charset=utf-8," + fileContents + const downloadAnchor = document.getElementById('source-controls-download-anchor')! + downloadAnchor.setAttribute("href", dataString) + downloadAnchor.setAttribute("download", "data.json") + downloadAnchor.click() +}) + setTimeout(() => { window.scroll(0, 0) }, 1000)