mirror of https://github.com/shadowfacts/type.git
Toolbar stuff
This commit is contained in:
parent
ce5f66413e
commit
ce86403466
GPG Key ID:
94A5AB95422746E5
15
css/main.css
15
css/main.css
|
|
@ -8,7 +8,7 @@
|
|||
font-family: "Helvetica", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Editor */
|
||||
/* Type */
|
||||
.invalid {
|
||||
background-color: red;
|
||||
color: white !important;
|
||||
|
|
@ -24,6 +24,19 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 7px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
margin-top: 33px;
|
||||
}
|
||||
|
||||
/* Index */
|
||||
.prev-list {
|
||||
padding: 0px;
|
||||
|
|
|
|||
76
js/type.js
76
js/type.js
|
|
@ -5,42 +5,10 @@ var focused = false;
|
|||
let invalids = [];
|
||||
var fileLines;
|
||||
|
||||
// fetch file and setup
|
||||
let hash = window.location.hash.substring(1);
|
||||
let hashBits = hash.split("/");
|
||||
let repo = hashBits.slice(0, 3).join("/");
|
||||
let filePath = hashBits.slice(3, hashBits.length).join("/");
|
||||
$.get({
|
||||
url: `https://raw.githubusercontent.com/${repo}/${filePath}`,
|
||||
success: (code) => {
|
||||
fileLines = code.split("\n");
|
||||
getChunk(code)
|
||||
.then((chunk) => {
|
||||
let lang = getLanguageByExtension(getFileExtension());
|
||||
console.log(`Detected language as ${lang.mime}`);
|
||||
if (Array.isArray(lang.file)) {
|
||||
if (lang.file.length != 0) {
|
||||
var req = req = $.getScript(`https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/mode/${lang.file[0]}/${lang.file[0]}.min.js`);
|
||||
for (var i = 1; i < lang.file.length; i++) {
|
||||
req = req.then($.getScript(`https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/mode/${lang.file[i]}/${lang.file[i]}.min.js`));
|
||||
}
|
||||
req.then(() => {
|
||||
setup(chunk, lang.mime);
|
||||
});
|
||||
} else {
|
||||
setup(chunk, lang.mime);
|
||||
}
|
||||
} else {
|
||||
$.getScript(`https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/mode/${lang.file}/${lang.file}.min.js`, () => {
|
||||
setup(chunk, lang.mime);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
throw e;
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// language selector
|
||||
let langaugeSelector = $("#language");
|
||||
|
|
@ -83,6 +51,44 @@ $("#restart").click(() => {
|
|||
});
|
||||
});
|
||||
|
||||
// back button
|
||||
$("#back").click(() => {
|
||||
window.location.href = `/repo.html#${repo}`;
|
||||
});
|
||||
|
||||
// fetch file and setup
|
||||
$.get({
|
||||
url: `https://raw.githubusercontent.com/${repo}/${filePath}`,
|
||||
success: (code) => {
|
||||
fileLines = code.split("\n");
|
||||
getChunk(code)
|
||||
.then((chunk) => {
|
||||
let lang = getLanguageByExtension(getFileExtension());
|
||||
console.log(`Detected language as ${lang.mime}`);
|
||||
if (Array.isArray(lang.file)) {
|
||||
if (lang.file.length != 0) {
|
||||
var req = req = $.getScript(`https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/mode/${lang.file[0]}/${lang.file[0]}.min.js`);
|
||||
for (var i = 1; i < lang.file.length; i++) {
|
||||
req = req.then($.getScript(`https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/mode/${lang.file[i]}/${lang.file[i]}.min.js`));
|
||||
}
|
||||
req.then(() => {
|
||||
setup(chunk, lang.mime);
|
||||
});
|
||||
} else {
|
||||
setup(chunk, lang.mime);
|
||||
}
|
||||
} else {
|
||||
$.getScript(`https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/mode/${lang.file}/${lang.file}.min.js`, () => {
|
||||
setup(chunk, lang.mime);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
throw e;
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// setup
|
||||
function setup(data, mime) {
|
||||
let el = document.getElementById("editor");
|
||||
|
|
@ -536,3 +542,9 @@ function removeAllInvalids() {
|
|||
invalids = [];
|
||||
});
|
||||
}
|
||||
|
||||
function goToEnd() {
|
||||
editor.setCursor(getEndPos());
|
||||
updateIncompleteMark();
|
||||
save();
|
||||
}
|
||||
|
|
|
|||
109
type.html
109
type.html
|
|
@ -15,59 +15,62 @@
|
|||
<br>
|
||||
</noscript>
|
||||
|
||||
<button id="restart">Restart</button>
|
||||
<select id="language">
|
||||
<option value="auto-detect">Auto-Detect</option>
|
||||
</select>
|
||||
<select id="theme">
|
||||
<option value="default">Default</option>
|
||||
<option value="3024-day">3024 Day</option>
|
||||
<option value="3024-night">3024 Night</option>
|
||||
<option value="abcdef">abcdef</option>
|
||||
<option value="ambiance-mobile">Ambiance Mobile</option>
|
||||
<option value="ambiance">Ambiance</option>
|
||||
<option value="base16-dark">Base16 Dark</option>
|
||||
<option value="base16-light">Base16 Light</option>
|
||||
<option value="bespin">Bespin</option>
|
||||
<option value="blackboard">Blackboard</option>
|
||||
<option value="cobalt">Cobalt</option>
|
||||
<option value="colorforth">Colorforth</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="eclipse">Eclipse</option>
|
||||
<option value="elegant">Elegant</option>
|
||||
<option value="erlang-dark">Erlang Dark</option>
|
||||
<option value="hopscotch">Hopscotch</option>
|
||||
<option value="icecoder">Icecoder</option>
|
||||
<option value="isotope">Isotope</option>
|
||||
<option value="lesser-dark">Lesser Dark</option>
|
||||
<option value="liquibyte">Liquibyte</option>
|
||||
<option value="material">Material</option>
|
||||
<option value="mbo">mbo</option>
|
||||
<option value="mdn-like">MDN Like</option>
|
||||
<option value="midnight">Midnight</option>
|
||||
<option value="monokai">Monokai</option>
|
||||
<option value="neat">Neat</option>
|
||||
<option value="neo">Neo</option>
|
||||
<option value="night">Night</option>
|
||||
<option value="panda-syntax">Panda Syntax</option>
|
||||
<option value="paraiso-dark">Paraiso Dark</option>
|
||||
<option value="paraiso-light">Pairaiso Light</option>
|
||||
<option value="pastel-on-dark">Pastel on Dark</option>
|
||||
<option value="railscasts">Railscasts</option>
|
||||
<option value="rubyblue">Ruby Blue</option>
|
||||
<option value="seti">Seti</option>
|
||||
<option value="solarized">Solarized</option>
|
||||
<option value="the-matrix">The Matrix</option>
|
||||
<option value="tomorrow-night-bright">Tomorrow Night Bright</option>
|
||||
<option value="tomorrow-night-eighties">Tomorrow Night Eighties</option>
|
||||
<option value="ttcn">ttcn</option>
|
||||
<option value="twilight">Twilight</option>
|
||||
<option value="vibrant-ink">Vibrant Ink</option>
|
||||
<option value="xq-dark">XQ Dark</option>
|
||||
<option value="xq-light">XQ Light</option>
|
||||
<option value="yeti">Yeti</option>
|
||||
<option value="zenburn">Zenburn</option>
|
||||
</select>
|
||||
<div id="toolbar">
|
||||
<button id="back">‹ Back</button>
|
||||
<button id="restart">Restart</button>
|
||||
<select id="language">
|
||||
<option value="auto-detect">Auto-Detect</option>
|
||||
</select>
|
||||
<select id="theme">
|
||||
<option value="default">Default</option>
|
||||
<option value="3024-day">3024 Day</option>
|
||||
<option value="3024-night">3024 Night</option>
|
||||
<option value="abcdef">abcdef</option>
|
||||
<option value="ambiance-mobile">Ambiance Mobile</option>
|
||||
<option value="ambiance">Ambiance</option>
|
||||
<option value="base16-dark">Base16 Dark</option>
|
||||
<option value="base16-light">Base16 Light</option>
|
||||
<option value="bespin">Bespin</option>
|
||||
<option value="blackboard">Blackboard</option>
|
||||
<option value="cobalt">Cobalt</option>
|
||||
<option value="colorforth">Colorforth</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="eclipse">Eclipse</option>
|
||||
<option value="elegant">Elegant</option>
|
||||
<option value="erlang-dark">Erlang Dark</option>
|
||||
<option value="hopscotch">Hopscotch</option>
|
||||
<option value="icecoder">Icecoder</option>
|
||||
<option value="isotope">Isotope</option>
|
||||
<option value="lesser-dark">Lesser Dark</option>
|
||||
<option value="liquibyte">Liquibyte</option>
|
||||
<option value="material">Material</option>
|
||||
<option value="mbo">mbo</option>
|
||||
<option value="mdn-like">MDN Like</option>
|
||||
<option value="midnight">Midnight</option>
|
||||
<option value="monokai">Monokai</option>
|
||||
<option value="neat">Neat</option>
|
||||
<option value="neo">Neo</option>
|
||||
<option value="night">Night</option>
|
||||
<option value="panda-syntax">Panda Syntax</option>
|
||||
<option value="paraiso-dark">Paraiso Dark</option>
|
||||
<option value="paraiso-light">Pairaiso Light</option>
|
||||
<option value="pastel-on-dark">Pastel on Dark</option>
|
||||
<option value="railscasts">Railscasts</option>
|
||||
<option value="rubyblue">Ruby Blue</option>
|
||||
<option value="seti">Seti</option>
|
||||
<option value="solarized">Solarized</option>
|
||||
<option value="the-matrix">The Matrix</option>
|
||||
<option value="tomorrow-night-bright">Tomorrow Night Bright</option>
|
||||
<option value="tomorrow-night-eighties">Tomorrow Night Eighties</option>
|
||||
<option value="ttcn">ttcn</option>
|
||||
<option value="twilight">Twilight</option>
|
||||
<option value="vibrant-ink">Vibrant Ink</option>
|
||||
<option value="xq-dark">XQ Dark</option>
|
||||
<option value="xq-light">XQ Light</option>
|
||||
<option value="yeti">Yeti</option>
|
||||
<option value="zenburn">Zenburn</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<textarea id="editor"></textarea>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue