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
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)