Skip to content

Commit

Permalink
BIG: Clientside spaces -> tabs, popup style improvements, login-signu…
Browse files Browse the repository at this point in the history 
…p spawn fix, close button & port to dialog, editor document new format work, Server bump dependencies
  • Loading branch information
@Zekiah-A
Zekiah-A committed Sep 10, 2024
1 parent ee0f2b0 commit e2b9ad8
Show file tree
Hide file tree
Showing 41 changed files with 7,033 additions and 9,875 deletions.
244 changes: 122 additions & 122 deletions Other/admin-panel-frame.html
View file
Original file line number Diff line number Diff line change
@@ -1,143 +1,143 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../styles.css">
<script src="../account.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../styles.css">
<script src="../account.js"></script>
</head>
<body class="headered-body">
<div style="height: fit-content; width: 40%;" class="popup">
<h2>Admin controls:</h2>
<p>No functions here will work if you are not an admin on subliminal. However, feel free to snoop around and see how we keep the site based!</p>
<div style="display: grid; grid-template-rows: auto auto auto; grid-template-columns: auto auto; grid-gap: 8px;">
<button class="popup-button" onclick="
viewPurgatoryReports()
">View purgatory reports</button>
<button class="popup-button" onclick="
prompt('Enter poem GUID')
prompt('Enter deletion reason')
confirm('Are you sure you want to delete {NAME} for {REASON}?')
">Remove purgatory poem</button>
<button class="popup-button" onclick="
prompt('Enter account GUID')
prompt('Enter termination reason')
confirm('Are you sure you want to terminate {NAME} for {REASON}?')
">Terminate account</button>
<button class="popup-button" onclick="
prompt('Enter account GUID')
prompt('Award or revoke')
prompt(`Enter badge name (${Object.keys(badgeType).join(', ')})`)
">Award or revoke badge</button>
<button class="popup-button" onclick="
viewPurgatoryPicks()
">View purgatory picks</button>
<button class="popup-button" onclick="
optionContent.animate([
{ maxHeight: '500' },
{ maxHeight: '0' }
], {
duration: 200,
iterations: 1
})
<div style="height: fit-content; width: 40%;" class="popup">
<h2>Admin controls:</h2>
<p>No functions here will work if you are not an admin on subliminal. However, feel free to snoop around and see how we keep the site based!</p>
<div style="display: grid; grid-template-rows: auto auto auto; grid-template-columns: auto auto; grid-gap: 8px;">
<button class="popup-button" onclick="
viewPurgatoryReports()
">View purgatory reports</button>
<button class="popup-button" onclick="
prompt('Enter poem GUID')
prompt('Enter deletion reason')
confirm('Are you sure you want to delete {NAME} for {REASON}?')
">Remove purgatory poem</button>
<button class="popup-button" onclick="
prompt('Enter account GUID')
prompt('Enter termination reason')
confirm('Are you sure you want to terminate {NAME} for {REASON}?')
">Terminate account</button>
<button class="popup-button" onclick="
prompt('Enter account GUID')
prompt('Award or revoke')
prompt(`Enter badge name (${Object.keys(badgeType).join(', ')})`)
">Award or revoke badge</button>
<button class="popup-button" onclick="
viewPurgatoryPicks()
">View purgatory picks</button>
<button class="popup-button" onclick="
optionContent.animate([
{ maxHeight: '500' },
{ maxHeight: '0' }
], {
duration: 200,
iterations: 1
})
setTimeout(() => {
while (optionContent.firstChild) {
optionContent.removeChild(optionContent.firstChild)
}
}, 200)
">Collapse</button>
</div>
<br>
<div id="optionContent" style="overflow-y: scroll; max-height: 500px;"></div>
<button class="popup-button">Done</button>
<p style="opacity:0.6;">Be responsible, always be impartial.</p>
</div>
setTimeout(() => {
while (optionContent.firstChild) {
optionContent.removeChild(optionContent.firstChild)
}
}, 200)
">Collapse</button>
</div>
<br>
<div id="optionContent" style="overflow-y: scroll; max-height: 500px;"></div>
<button class="popup-button">Done</button>
<p style="opacity:0.6;">Be responsible, always be impartial.</p>
</div>
</body>
<script>
function viewPurgatoryReports() {
while (optionContent.firstChild) {
optionContent.removeChild(optionContent.firstChild)
}
function viewPurgatoryReports() {
while (optionContent.firstChild) {
optionContent.removeChild(optionContent.firstChild)
}

optionContent.animate([
{ maxHeight: '0' },
{ maxHeight: '500' }
], {
duration: 200,
iterations: 1
})
optionContent.animate([
{ maxHeight: '0' },
{ maxHeight: '500' }
], {
duration: 200,
iterations: 1
})

for (let i = 0; i < 10; i++)
{
let url = "poemanthology.org/"
let reason = "Lorem ipsum dolor sit amet"
for (let i = 0; i < 10; i++)
{
let url = "poemanthology.org/"
let reason = "Lorem ipsum dolor sit amet"

let el = document.createElement("div")
el.style.background = randomColour()
el.style.marginBottom = "4px"
el.style.borderRadius = "8px"
el.style.padding = "8px"
el.innerHTML = `
<a href=''>View reporter</a>
<a href="${url}">View reported poem</a>
<p style="text-decoration: underline">"{NAME}" reported {GUID} with reason</p>
<p>${reason}</p>
<input type="button" value="Delete report">
`
let el = document.createElement("div")
el.style.background = randomColour()
el.style.marginBottom = "4px"
el.style.borderRadius = "8px"
el.style.padding = "8px"
el.innerHTML = `
<a href=''>View reporter</a>
<a href="${url}">View reported poem</a>
<p style="text-decoration: underline">"{NAME}" reported {GUID} with reason</p>
<p>${reason}</p>
<input type="button" value="Delete report">
`

optionContent.appendChild(el)
}
}
optionContent.appendChild(el)
}
}

function viewPurgatoryPicks() {
while (optionContent.firstChild) {
optionContent.removeChild(optionContent.firstChild)
}
function viewPurgatoryPicks() {
while (optionContent.firstChild) {
optionContent.removeChild(optionContent.firstChild)
}

optionContent.animate([
{ maxHeight: '0' },
{ maxHeight: '500' }
], {
duration: 200,
iterations: 1
})
optionContent.animate([
{ maxHeight: '0' },
{ maxHeight: '500' }
], {
duration: 200,
iterations: 1
})

for (let i = 0; i < 10; i++)
{
let url = "poemanthology.org/"
let reason = "Lorem ipsum dolor sit amet"
for (let i = 0; i < 10; i++)
{
let url = "poemanthology.org/"
let reason = "Lorem ipsum dolor sit amet"

let el = document.createElement("div")
el.style.background = randomColour()
el.style.marginBottom = "4px"
el.style.borderRadius = "8px"
el.style.padding = "8px"
el.innerHTML = `
<a href=''>View pick poem</a>
<span>{TITLE} by {AUTHOR}</span>
<input type="button" value="Remove pick">
`
let el = document.createElement("div")
el.style.background = randomColour()
el.style.marginBottom = "4px"
el.style.borderRadius = "8px"
el.style.padding = "8px"
el.innerHTML = `
<a href=''>View pick poem</a>
<span>{TITLE} by {AUTHOR}</span>
<input type="button" value="Remove pick">
`

optionContent.appendChild(el)
}
optionContent.appendChild(el)
}

let el = document.createElement("div")
el.style.borderRadius = "8px"
el.style.padding = "8px"
el.innerHTML = `
<span>Add another pick</span>
<input type="text" placeholder="Enter pick GUID">
<input type="button" value="Add">
`

optionContent.appendChild(el)
}
let el = document.createElement("div")
el.style.borderRadius = "8px"
el.style.padding = "8px"
el.innerHTML = `
<span>Add another pick</span>
<input type="text" placeholder="Enter pick GUID">
<input type="button" value="Add">
`

function randomColour() {
return "hsl(" + 360 * Math.random() + ',' +
(25 + 70 * Math.random()) + '%,' +
(85 + 10 * Math.random()) + '%)'
}
optionContent.appendChild(el)
}

function randomColour() {
return "hsl(" + 360 * Math.random() + ',' +
(25 + 70 * Math.random()) + '%,' +
(85 + 10 * Math.random()) + '%)'
}
</script>
</html>
72 changes: 25 additions & 47 deletions Other/component-registrar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,15 @@
* @returns
*/
function createFromData(name, data = null) {
let element = document.createElement(name)
if (data) {
for (const [key, value] of Object.entries(data)) {
element.setAttribute(key, value.toString())
}
}
element.connectedCallback()
return element
}

/**
* Will instance a singleton of the given element, if an instance of the element
* already exists, it will be updated with the new data.
* @param {HTMLElement} element Element singleton to be instanced
* @param {object} data Data attributes that element will be instanced with
* @returns {HTMLElement|null} Element if a new element is created, otherwise null
*/
function createOrUpdateFromData(name, data = null) {
let existing = document.querySelector(name)
if (existing) {
if (data) {
for (const [key, value] of Object.entries(data)) {
existing.setAttribute(key, value.toString())
}
}
existing.shadowRoot.innerHTML = ""
existing.connectedCallback()
return null
}

return createFromData(name, data)
let element = document.createElement(name)
if (data) {
for (const [key, value] of Object.entries(data)) {
element.setAttribute(key, value.toString())
}
}
// TODO: This causes issues with some nodes wanting to be IN the dom before methods can be used on them
//element.connectedCallback()
return element
}

/**
Expand All @@ -46,28 +24,28 @@ function createOrUpdateFromData(name, data = null) {
* @param {*} element The shadow root element used to locate all elements with IDs
*/
function defineAndInject(_this, element) {
element.parentDocument = document
element.shadowThis = _this
if (element.id) _this[element.id] = element
element.parentDocument = document
element.shadowThis = _this
if (element.id) _this[element.id] = element

element = element.firstElementChild
while (element) {
defineAndInject(_this, element)
element = element.nextElementSibling
}
element = element.firstElementChild
while (element) {
defineAndInject(_this, element)
element = element.nextElementSibling
}
}

function html(strings, ...values) {
return strings.reduce((result, string, i) => {
const value = values[i] !== undefined ? values[i] : ""
return result + string + value
}, "")
return strings.reduce((result, string, i) => {
const value = values[i] !== undefined ? values[i] : ""
return result + string + value
}, "")
}

// Custom implementation of the css function
function css(strings, ...values) {
return strings.reduce((result, string, i) => {
const value = values[i] !== undefined ? values[i] : ""
return result + string + value
}, "")
return strings.reduce((result, string, i) => {
const value = values[i] !== undefined ? values[i] : ""
return result + string + value
}, "")
}
Loading

0 comments on commit e2b9ad8

Please sign in to comment.