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