Skip to content

Commit 3029cab

Browse files
ReadieFurReadieFur
committed
Allow the user to change the editor background
1 parent 25801f6 commit 3029cab

File tree

4 files changed

+137
-1
lines changed

4 files changed

+137
-1
lines changed

Diff for: ‎src/.todo

+1
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ Done:
114114
✔ I may need to defer the scripts to make sure that they are loaded after the page is loaded. @done(21-07-23 01:01)
115115
✔ Elements are not loaded in the correct order. (Partially complete). @done(21-07-23 16:29)
116116
✔ Fix an issue with some overlays causing the thumbnail rendering to fail which in turn causes the overlay to not save. @done(21-09-18 15:28)
117+
✔ Allow the user to change the editor background. @done(21-09-19 20:10)
117118

118119
Cancelled:
119120
✘ fix @use on element stylesheets. @cancelled(21-05-15 21:23) replaced with variables set in ui.ts.

Diff for: ‎src/edit/editor.scss

+34-1
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,11 @@ body
213213
{
214214
position: absolute;
215215
width: 800px;
216-
height: 350px;
216+
// height: 350px;
217+
height: max-content;
218+
max-height: 550px;
219+
overflow-x: hidden;
220+
overflow-y: auto;
217221
top: 50%;
218222
left: 50%;
219223
transform: translate(-50%, -50%);
@@ -235,6 +239,34 @@ body
235239
margin-left: 10px;
236240
}
237241

242+
&.editorBackgroundOptions
243+
{
244+
> form
245+
{
246+
> table
247+
{
248+
vertical-align: top;
249+
250+
#customBackgroundRadio
251+
{
252+
margin-top: 0;
253+
margin-bottom: 0;
254+
margin-left: 7px;
255+
256+
p
257+
{
258+
margin-top: 0;
259+
}
260+
}
261+
262+
input
263+
{
264+
border-bottom: none !important;
265+
}
266+
}
267+
}
268+
}
269+
238270
> #sampleDataRadio
239271
{
240272
> span
@@ -259,6 +291,7 @@ body
259291
#gameDataRadio
260292
{
261293
margin-top: 0;
294+
262295
p
263296
{
264297
margin-top: 0;

Diff for: ‎src/edit/editor.ts

+60
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,23 @@ class Editor
3939
container: HTMLDivElement,
4040
data:
4141
{
42+
// editorSize:
43+
// {
44+
// autoLabel: HTMLLabelElement,
45+
// manual:
46+
// {
47+
// label: HTMLLabelElement,
48+
// widthInput: HTMLInputElement,
49+
// heightInput: HTMLInputElement
50+
// }
51+
// },
52+
editorBackground:
53+
{
54+
defaultBackground: HTMLLabelElement,
55+
customBackground: HTMLLabelElement,
56+
customBackgroundRadio: HTMLInputElement,
57+
customBackgroundInput: HTMLInputElement
58+
},
4259
placeholderData: HTMLLabelElement,
4360
sampleData: HTMLLabelElement,
4461
gameData: HTMLLabelElement,
@@ -146,6 +163,23 @@ class Editor
146163
container: Main.ThrowIfNullOrUndefined(document.querySelector("#optionsMenuContainer")),
147164
data:
148165
{
166+
// editorSize:
167+
// {
168+
// autoLabel: Main.ThrowIfNullOrUndefined(document.querySelector("#autoSizeRadio")),
169+
// manual:
170+
// {
171+
// label: Main.ThrowIfNullOrUndefined(document.querySelector("#manualSizeRadio")),
172+
// widthInput: Main.ThrowIfNullOrUndefined(document.querySelector("#manualSizeWidthInput")),
173+
// heightInput: Main.ThrowIfNullOrUndefined(document.querySelector("#manualSizeHeightInput"))
174+
// }
175+
// },
176+
editorBackground:
177+
{
178+
defaultBackground: Main.ThrowIfNullOrUndefined(document.querySelector("#defaultBackgroundRadio")),
179+
customBackground: Main.ThrowIfNullOrUndefined(document.querySelector("#customBackgroundRadio")),
180+
customBackgroundRadio: Main.ThrowIfNullOrUndefined(document.querySelector("#customBackgroundRadio > input[type='radio']")),
181+
customBackgroundInput: Main.ThrowIfNullOrUndefined(document.querySelector("#customBackgroundInput"))
182+
},
149183
placeholderData: Main.ThrowIfNullOrUndefined(document.querySelector("#placeholderDataRadio")),
150184
sampleData: Main.ThrowIfNullOrUndefined(document.querySelector("#sampleDataRadio")),
151185
gameData: Main.ThrowIfNullOrUndefined(document.querySelector("#gameDataRadio")),
@@ -304,6 +338,32 @@ class Editor
304338
{ if ((<HTMLInputElement>this.optionsMenu.data.gameData.querySelector("input[type=radio]")).checked) { this.ToggleDataSet(3); } });
305339
(<HTMLFormElement>Main.ThrowIfNullOrUndefined(document.querySelector("#ipForm"))).addEventListener("submit", (e) => { e.preventDefault(); });
306340
this.optionsMenu.data.gameIP.addEventListener("change", () => { if (this.dataSet == 3) { this.ToggleDataSet(3); } });
341+
this.optionsMenu.data.editorBackground.defaultBackground.addEventListener("click", () =>
342+
{
343+
this.ui.overlay.style.backgroundImage = `url("${Main.WEB_ROOT}/assets/images/beat-saber.jpg")`;
344+
this.optionsMenu.data.editorBackground.customBackgroundInput.disabled = true;
345+
this.optionsMenu.data.editorBackground.customBackgroundInput.value = "";
346+
});
347+
this.optionsMenu.data.editorBackground.defaultBackground.click();
348+
this.optionsMenu.data.editorBackground.customBackground.addEventListener("click", () =>
349+
{ this.optionsMenu.data.editorBackground.customBackgroundInput.disabled = false; });
350+
this.optionsMenu.data.editorBackground.customBackgroundInput.addEventListener("input", (e) =>
351+
{
352+
if (
353+
!this.optionsMenu.data.editorBackground.customBackgroundRadio.checked &&
354+
this.optionsMenu.data.editorBackground.customBackgroundInput.files !== null &&
355+
this.optionsMenu.data.editorBackground.customBackgroundInput.files[0] !== undefined &&
356+
this.optionsMenu.data.editorBackground.customBackgroundInput.files[0].type.startsWith("image/")
357+
) { return; }
358+
359+
const reader = new FileReader();
360+
reader.onloadend = (file) =>
361+
{
362+
if (file.target == null) { return; }
363+
this.ui.overlay.style.backgroundImage = `url("${file.target.result}")`;
364+
};
365+
reader.readAsDataURL(this.optionsMenu.data.editorBackground.customBackgroundInput.files![0]);
366+
});
307367

308368
Main.ThrowIfNullOrUndefined(document.querySelector("#walkthroughButton")).addEventListener("click", () => { this.ShowWalkthroughContainer(); });
309369
Main.ThrowIfNullOrUndefined(this.walkthroughContainer.querySelector(".background")).addEventListener("click", () =>

Diff for: ‎src/edit/index.php

+42
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,47 @@
8989
<h4>Help</h4>
9090
<button id="walkthroughButton" class="light">Show Walkthrough</button>
9191
</div>
92+
<!-- <div>
93+
<h4>Editor size</h4>
94+
<form>
95+
<label class="radioButtonContainer" id="autoSizeRadio">
96+
<span><p>Auto Size</p></span>
97+
<input type="radio" name="radio">
98+
<span class="radioButton"></span>
99+
</label>
100+
<label class="radioButtonContainer" id="manualSizeRadio">
101+
<span><p>Manual Size</p></span>
102+
<input type="radio" name="radio">
103+
<span class="radioButton"></span>
104+
</label>
105+
</form>
106+
</div> -->
107+
<div class="editorBackgroundOptions">
108+
<h4>Editor background</h4>
109+
<form>
110+
<label class="radioButtonContainer" id="defaultBackgroundRadio">
111+
<span><p>Default Background</p></span>
112+
<input type="radio" name="radio">
113+
<span class="radioButton"></span>
114+
</label>
115+
<table>
116+
<tbody>
117+
<tr>
118+
<td>
119+
<label class="radioButtonContainer" id="customBackgroundRadio">
120+
<span><p>Custom Background</p></span>
121+
<input type="radio" name="radio">
122+
<span class="radioButton"></span>
123+
</label>
124+
</td>
125+
<td>
126+
<input type="file" id="customBackgroundInput" accept="image/*">
127+
</td>
128+
</tr>
129+
</tbody>
130+
</table>
131+
</form>
132+
</div>
92133
<div>
93134
<h4>Data</h4>
94135
<label class="radioButtonContainer" id="placeholderDataRadio">
@@ -374,6 +415,7 @@
374415
</table>
375416
</td>
376417
<td class="overlayContainer">
418+
<!-- <div id="overlaySizeContainer"></div> -->
377419
<div id="overlay"></div>
378420
</td>
379421
</tr>

0 commit comments

Comments
 (0)