Skip to content

Commit

Permalink
Create basic renderer for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@LordRalex
LordRalex committed Nov 29, 2023
1 parent d002fda commit be8b7cc
Showing 1 changed file with 179 additions and 143 deletions.
322 changes: 179 additions & 143 deletions paste.html
View file
Original file line number Diff line number Diff line change
@@ -1,173 +1,209 @@
<!DOCTYPE html>
<html>
<head>
<title>Discord CDN Preview Wrapper</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<style>
.me {
height: 90vh;
overflow: hidden;
}

body {
margin: 0;
padding: 0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}

/* Light mode */
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
</style>

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/fontawesome.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/solid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js"></script>
<title>Discord CDN Preview Wrapper</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<style>
.me {
height: 90vh;
overflow: hidden;
}

body {
margin: 0;
padding: 0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}

/* Light mode */
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
</style>

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/fontawesome.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/solid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js"></script>
</head>
<body>
<h1 id="filename">Previewer</h1>
<div style="display: none" id="contents">
<div class="toggles">
<input type="checkbox" id="toggleDarkTheme" onclick="toggleTheme(this)">
<label for="toggleDarkTheme">Use Dark Theme</label>

<input type="checkbox" id="toggleLineWrap" onclick="toggleLineWrap(this)">
<label for="toggleLineWrap">Wrap lines</label>
</div>
<br>
<div class="me" id="container"></div>
<div class="toggles">
<input type="checkbox" id="toggleDarkTheme" onclick="toggleTheme(this)">
<label for="toggleDarkTheme">Use Dark Theme</label>

<input type="checkbox" id="toggleLineWrap" onclick="toggleLineWrap(this)">
<label for="toggleLineWrap">Wrap lines</label>

<input type="checkbox" id="toggleRenderer" onclick="toggleRenderer(this)">
<label for="toggleRenderer">Use Basic Render</label>
</div>
<br>
<div class="me" id="container"></div>
<div class="me" id="basicrender">
<label for="basicrenderbox"></label><textarea style="width: 90%;height: 90%" readonly
id="basicrenderbox"></textarea>
</div>
</div>

<div id="spinner">
<i class="fa-solid fa-spinner fa-2xl fa-spin"></i>
<i class="fa-solid fa-spinner fa-2xl fa-spin"></i>
</div>

<script>
const container = document.getElementById('container');
let editor = undefined;

let url = "/cdn" + window.location.pathname;

const lightTheme = "vs";
const darkTheme = "vs-dark";

function setButtons() {
const theme = getTheme()
if (theme === darkTheme) {
document.getElementById('toggleDarkTheme').checked = true;
}

if (localStorage.getItem("linewrap") === "true") {
document.getElementById('toggleLineWrap').checked = true;
}
const container = document.getElementById('container')
let editor = undefined

let url = '/cdn' + window.location.pathname

const lightTheme = 'vs'
const darkTheme = 'vs-dark'

function setButtons () {
const theme = getTheme()
if (theme === darkTheme) {
document.getElementById('toggleDarkTheme').checked = true
}

if (localStorage.getItem('linewrap') === 'true') {
document.getElementById('toggleLineWrap').checked = true
}

if (localStorage.getItem('basicrender') === 'true') {
document.getElementById('toggleRenderer').checked = true
}
}

function toggleTheme (btn) {
localStorage.setItem('dark', btn.checked)
switchColorScheme()
}

function toggleLineWrap (btn) {
localStorage.setItem('linewrap', btn.checked)
switchLineWrap()
}

function toggleRenderer (btn) {
localStorage.setItem('basicrender', btn.checked)
switchRender()
}

function switchColorScheme () {
const th = getTheme()
monaco.editor.setTheme(getTheme())
if (th === lightTheme) {
document.getElementById('basicrenderbox').style.backgroundColor = 'white';
document.getElementById('basicrenderbox').style.color = 'black';
} else {
document.getElementById('basicrenderbox').style.backgroundColor = 'black';
document.getElementById('basicrenderbox').style.color = 'white';
}
}

function switchLineWrap () {
try {
if (localStorage.getItem('linewrap') === 'true') {
editor.updateOptions({ wordWrap: 'on' })
} else {
editor.updateOptions({ wordWrap: 'off' })
}

function toggleTheme(btn) {
localStorage.setItem("dark", btn.checked);
switchColorScheme()
}

function toggleLineWrap(btn) {
localStorage.setItem("linewrap", btn.checked);
switchLineWrap();
}

function switchColorScheme() {
monaco.editor.setTheme(getTheme());
}

function switchLineWrap() {
try {
if (localStorage.getItem("linewrap") === "true") {
editor.updateOptions({wordWrap: "on"})
} else {
editor.updateOptions({wordWrap: "off"})
}
} catch (e) {
console.log(e);
}
} catch (e) {
console.log(e)
}
}

function switchRender () {
if (localStorage.getItem('basicrender') === 'true') {
document.getElementById('container').style.display = 'none'
document.getElementById('basicrender').style.display = 'block'
} else {
document.getElementById('basicrender').style.display = 'none'
document.getElementById('container').style.display = 'block'
}
}

function getTheme () {
let theme = lightTheme

let fromStorage = localStorage.getItem('dark')
if (fromStorage !== '') {
if (fromStorage === 'true') {
theme = darkTheme
}

function getTheme() {
let theme = lightTheme

let fromStorage = localStorage.getItem("dark")
if (fromStorage !== "") {
if (fromStorage === "true") {
theme = darkTheme
}
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = darkTheme
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = darkTheme
}

return theme
}

function download (url) {
try {
const req = new XMLHttpRequest()
req.open('GET', url)
req.onload = () => {
if (req.readyState === req.DONE) {
if (req.status === 200) {
transferComplete(req)
}

return theme;
}
}

function download(url) {
try {
const req = new XMLHttpRequest();
req.open("GET", url);
req.onload = () => {
if (req.readyState === req.DONE) {
if (req.status === 200) {
transferComplete(req);
}
}
};

req.send();
} catch (error) {
console.error(error);
//return 'Failed to get file'
}
}
req.send()
} catch (error) {
console.error(error)
//return 'Failed to get file'
}
}

function transferComplete(e) {
require.config({paths: {vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'}});
require(["vs/editor/editor.main"], function () {
editor = monaco.editor.create(container, {
value: 'Loading',
minimap: {enabled: false},
automaticLayout: true,
readOnly: true,
});
function transferComplete (e) {
require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' } })
require(['vs/editor/editor.main'], function () {
editor = monaco.editor.create(container, {
value: 'Loading',
minimap: { enabled: false },
automaticLayout: true,
readOnly: true,
})

monaco.editor.setTheme(getTheme());
monaco.editor.setTheme(getTheme())

const model = monaco.editor.createModel(e.responseText, undefined, monaco.Uri.parse(url));
const model = monaco.editor.createModel(e.responseText, undefined, monaco.Uri.parse(url))
document.getElementById('basicrenderbox').value = e.responseText

editor.setModel(model);
editor.setModel(model)

console.log(`model language was changed to ${editor.getModel().getLanguageId()}`);
console.log(`model language was changed to ${editor.getModel().getLanguageId()}`)

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
switchColorScheme();
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
switchColorScheme()
})

switchColorScheme();
switchLineWrap();
setButtons();
switchColorScheme()
switchLineWrap()
setButtons()
switchRender()

document.getElementById('spinner').style.display = "none";
document.getElementById('contents').style.display = "block";
});
}
document.getElementById('spinner').style.display = 'none'
document.getElementById('contents').style.display = 'block'
})
}

download(url);
download(url)
</script>
</body>
</html>

0 comments on commit be8b7cc

Please sign in to comment.