First working version

master
Boris Kubiak 2020-02-13 16:02:17 +01:00
parent 621ca266d4
commit ec60a0bd00
6 changed files with 603 additions and 0 deletions

46
index.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paste</title>
<script src="https://cdn.jsdelivr.net/combine/
npm/codeflask@1.4.1/build/codeflask.min.js,
npm/prismjs@1.14.0/components/prism-markup-templating.min.js,
npm/lzma@2.3.2/src/lzma.min.js,
npm/slim-select@1.25.0/dist/slimselect.min.js,
npm/clipboard@2/dist/clipboard.min.js
"></script>
<script src="languages.js"></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/slim-select@1.25.0/dist/slimselect.min.css"
/>
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="styles.css" />
<style></style>
</head>
<body>
<div id="editor"></div>
<div id="footer">
<div class="select-wrapper d-inline-block">
<select id="language"></select>
</div>
<div class="d-inline-block">
<button onclick="generateLink()" type="button">Generate link</button>
</div>
</div>
<div id="copy" style="display: none">
<input type="text" value="copy me" id="copy-link" />
<button class="clipboard" data-clipboard-target="#copy-link" type="button">Copy</button>
<button onclick="copyElement.style.display = 'none'" type="button">Cancel</button>
</div>
</body>
<script src="index.js"></script>
</html>

104
index.js Normal file
View File

@ -0,0 +1,104 @@
let copyElement = document.getElementById('copy');
const flask = new CodeFlask('#editor', { language: 'javascript', lineNumbers: true, defaultTheme: false });
const lzma = new LZMA('lzma.min.js');
let select;
function init() {
initLangSelector();
initCode();
const clipboard = new ClipboardJS('.clipboard');
clipboard.on('success', function() {
copyElement.style.display = 'none';
});
}
function initLangSelector() {
select = new SlimSelect({
select: '#language',
data: Object.entries(languages).map(([value, text]) => ({ text, value })),
showContent: 'up',
onChange: () => {
updateLanguage();
}
});
const urlParams = new URLSearchParams(window.location.search);
select.set(Object.keys(languages).indexOf(urlParams.get('lang')) === -1 ? 'javascript' : urlParams.get('lang'));
updateLanguage();
}
function initCode() {
const base64 = location.hash.substr(1);
if (base64.length === 0) {
return;
}
if (!fetch) {
alert('Your browser does not support this page. Sorry! :(');
return;
}
fetch('data:application/octet-stream;base64,' + base64)
.then(r => r.blob())
.then(function(blob) {
const reader = new FileReader();
reader.onload = function() {
lzma.decompress(Array.from(new Uint8Array(reader.result)), function(plaintext, error) {
if (error) {
alert('Failed to decompress data: ' + error);
return;
}
flask.updateCode(plaintext);
});
};
reader.readAsArrayBuffer(blob);
});
}
function updateLanguage() {
const lang = select.selected();
if (!Prism.languages.hasOwnProperty(lang)) {
addLanguage(lang);
return;
}
flask.updateLanguage(lang);
}
function addLanguage(lang) {
// Add a setter to detect when a language is available
Object.defineProperty(Prism.languages, lang, {
set: function(val) {
Prism.languages['_custom_' + lang] = val;
flask.updateLanguage(lang);
},
get: function() {
return Prism.languages['_custom_' + lang];
}
});
const script = document.createElement('script');
script.setAttribute('src', `https://cdn.jsdelivr.net/npm/prismjs@1.14.0/components/prism-${lang}.min.js`);
document.getElementsByTagName('head')[0].appendChild(script);
}
function generateLink() {
const code = flask.getCode();
lzma.compress(code, 1, function(compressed, error) {
if (error) {
alert('Failed to compress data: ' + error);
return;
}
const reader = new FileReader();
reader.onload = function() {
const base64 = reader.result.substr(reader.result.indexOf(',') + 1);
const url = `${location.protocol}//${location.host}${
location.pathname
}?lang=${select.selected()}#${base64}`;
document.getElementById('copy-link').value = url;
copyElement.style.display = 'block';
};
reader.readAsDataURL(new Blob([new Uint8Array(compressed)]));
});
}
init();

204
languages.js Normal file
View File

@ -0,0 +1,204 @@
const languages = {
markup: 'Markup (HTML, XML, SVG)',
css: 'CSS',
clike: 'C-like',
javascript: 'JavaScript',
abap: 'ABAP',
abnf: 'Augmented BackusNaur form',
actionscript: 'ActionScript',
ada: 'Ada',
antlr4: 'ANTLR4',
apacheconf: 'Apache Configuration',
apl: 'APL',
applescript: 'AppleScript',
aql: 'AQL',
arduino: 'Arduino',
arff: 'ARFF',
asciidoc: 'AsciiDoc',
asm6502: '6502 Assembly',
aspnet: 'ASP.NET (C#)',
autohotkey: 'AutoHotkey',
autoit: 'AutoIt',
bash: 'Bash',
basic: 'BASIC',
batch: 'Batch',
bbcode: 'BBcode',
bison: 'Bison',
bnf: 'BackusNaur form',
brainfuck: 'Brainfuck',
brightscript: 'BrightScript',
bro: 'Bro',
c: 'C',
csharp: 'C#',
cpp: 'C++',
cil: 'CIL',
coffeescript: 'CoffeeScript',
cmake: 'CMake',
clojure: 'Clojure',
crystal: 'Crystal',
csp: 'Content-Security-Policy',
'css-extras': 'CSS Extras',
d: 'D',
dart: 'Dart',
diff: 'Diff',
django: 'Django/Jinja2',
'dns-zone-file': 'DNS zone file',
docker: 'Docker',
ebnf: 'Extended BackusNaur form',
eiffel: 'Eiffel',
ejs: 'EJS',
elixir: 'Elixir',
elm: 'Elm',
etlua: 'Embedded Lua templating',
erb: 'ERB',
erlang: 'Erlang',
fsharp: 'F#',
'firestore-security-rules': 'Firestore security rules',
flow: 'Flow',
fortran: 'Fortran',
ftl: 'FreeMarker Template Language',
gcode: 'G-code',
gdscript: 'GDScript',
gedcom: 'GEDCOM',
gherkin: 'Gherkin',
git: 'Git',
glsl: 'GLSL',
gml: 'GameMaker Language',
go: 'Go',
graphql: 'GraphQL',
groovy: 'Groovy',
haml: 'Haml',
handlebars: 'Handlebars',
haskell: 'Haskell',
haxe: 'Haxe',
hcl: 'HCL',
http: 'HTTP',
hpkp: 'HTTP Public-Key-Pins',
hsts: 'HTTP Strict-Transport-Security',
ichigojam: 'IchigoJam',
icon: 'Icon',
inform7: 'Inform 7',
ini: 'Ini',
io: 'Io',
j: 'J',
java: 'Java',
javadoc: 'JavaDoc',
javadoclike: 'JavaDoc-like',
javastacktrace: 'Java stack trace',
jolie: 'Jolie',
jq: 'JQ',
jsdoc: 'JSDoc',
'js-extras': 'JS Extras',
'js-templates': 'JS Templates',
json: 'JSON',
jsonp: 'JSONP',
json5: 'JSON5',
julia: 'Julia',
keyman: 'Keyman',
kotlin: 'Kotlin',
latex: 'LaTeX',
latte: 'Latte',
less: 'Less',
lilypond: 'LilyPond',
liquid: 'Liquid',
lisp: 'Lisp',
livescript: 'LiveScript',
lolcode: 'LOLCODE',
lua: 'Lua',
makefile: 'Makefile',
markdown: 'Markdown',
'markup-templating': 'Markup templating',
matlab: 'MATLAB',
mel: 'MEL',
mizar: 'Mizar',
monkey: 'Monkey',
moonscript: 'MoonScript',
n1ql: 'N1QL',
n4js: 'N4JS',
'nand2tetris-hdl': 'Nand To Tetris HDL',
nasm: 'NASM',
neon: 'NEON',
nginx: 'nginx',
nim: 'Nim',
nix: 'Nix',
nsis: 'NSIS',
objectivec: 'Objective-C',
ocaml: 'OCaml',
opencl: 'OpenCL',
oz: 'Oz',
parigp: 'PARI/GP',
parser: 'Parser',
pascal: 'Pascal',
pascaligo: 'Pascaligo',
pcaxis: 'PC-Axis',
perl: 'Perl',
php: 'PHP',
phpdoc: 'PHPDoc',
'php-extras': 'PHP Extras',
plsql: 'PL/SQL',
powershell: 'PowerShell',
processing: 'Processing',
prolog: 'Prolog',
properties: '.properties',
protobuf: 'Protocol Buffers',
pug: 'Pug',
puppet: 'Puppet',
pure: 'Pure',
python: 'Python',
q: 'Q (kdb+ database)',
qml: 'QML',
qore: 'Qore',
r: 'R',
jsx: 'React JSX',
tsx: 'React TSX',
renpy: "Ren'py",
reason: 'Reason',
regex: 'Regex',
rest: 'reST (reStructuredText)',
rip: 'Rip',
roboconf: 'Roboconf',
robotframework: 'Robot Framework',
ruby: 'Ruby',
rust: 'Rust',
sas: 'SAS',
sass: 'Sass (Sass)',
scss: 'Sass (Scss)',
scala: 'Scala',
scheme: 'Scheme',
'shell-session': 'Shell session',
smalltalk: 'Smalltalk',
smarty: 'Smarty',
solidity: 'Solidity (Ethereum)',
soy: 'Soy (Closure Template)',
sparql: 'SPARQL',
'splunk-spl': 'Splunk SPL',
sqf: 'SQF: Status Quo Function (Arma 3)',
sql: 'SQL',
stylus: 'Stylus',
swift: 'Swift',
tap: 'TAP',
tcl: 'Tcl',
textile: 'Textile',
toml: 'TOML',
tt2: 'Template Toolkit 2',
turtle: 'Turtle',
twig: 'Twig',
typescript: 'TypeScript',
't4-cs': 'T4 Text Templates (C#)',
't4-vb': 'T4 Text Templates (VB)',
't4-templating': 'T4 templating',
vala: 'Vala',
vbnet: 'VB.Net',
velocity: 'Velocity',
verilog: 'Verilog',
vhdl: 'VHDL',
vim: 'vim',
'visual-basic': 'Visual Basic',
wasm: 'WebAssembly',
wiki: 'Wiki markup',
xeora: 'Xeora',
xojo: 'Xojo (REALbasic)',
xquery: 'XQuery',
yaml: 'YAML',
zig: 'Zig'
};

2
lzma.min.js vendored Normal file

File diff suppressed because one or more lines are too long

38
styles.css Normal file
View File

@ -0,0 +1,38 @@
/* General app style */
#editor,
#footer,
#copy {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
#editor {
top: 0;
bottom: 36px;
}
#footer,
#copy {
height: 36px;
padding: 4px 20px 0 50px;
background-color: #3b3b47;
}
.d-inline-block {
display: inline-block;
}
.select-wrapper {
width: 300px;
font-size: 14px;
font-family: sans-serif;
}
.select-wrapper .ss-main .ss-single-selected {
height: 28px;
}
button {
cursor: pointer;
}

209
theme.css Normal file
View File

@ -0,0 +1,209 @@
/* Code editor style */
.codeflask {
color: #ccc;
background: #282936;
}
.codeflask textarea {
color: #282936;
caret-color: rgba(241, 250, 140, 1);
}
.codeflask .codeflask__flatten {
font-size: 15px;
}
.codeflask textarea::-moz-selection,
.codeflask textarea ::-moz-selection {
text-shadow: none;
background-color: #5a5f80;
color: #5a5f80;
}
.codeflask textarea::selection,
.codeflask textarea ::selection {
text-shadow: none;
background-color: #5a5f80;
color: #5a5f80;
}
.codeflask__lines {
background: #3b3b47;
}
.token.comment {
color: rgba(98, 114, 164, 1);
}
.token.prolog {
color: rgba(207, 207, 194, 1);
}
.token.tag {
color: rgba(220, 104, 170, 1);
}
.token.entity {
color: rgba(139, 233, 253, 1);
}
.token.atrule {
color: rgba(98, 239, 117, 1);
}
.token.url {
color: rgba(102, 217, 239, 1);
}
.token.selector {
color: rgba(207, 207, 194, 1);
}
.token.string {
color: rgba(241, 250, 140, 1);
}
.token.property {
color: rgba(255, 184, 108, 1);
}
.token.important {
color: rgba(255, 121, 198, 1);
font-weight: bold;
}
.token.punctuation {
color: white;
}
.token.number {
color: rgba(189, 147, 249, 1);
}
.token.function {
color: rgba(80, 250, 123, 1);
}
.token.class-name {
color: rgba(255, 184, 108, 1);
}
.token.keyword {
color: rgba(255, 121, 198, 1);
}
.token.boolean {
color: rgba(255, 184, 108, 1);
}
.token.operator {
color: rgba(139, 233, 253, 1);
}
.token.char {
color: rgba(255, 135, 157, 1);
}
.token.regex {
color: rgba(80, 250, 123, 1);
}
.token.variable {
color: rgba(80, 250, 123, 1);
}
.token.constant {
color: rgba(255, 184, 108, 1);
}
.token.symbol {
color: rgba(255, 184, 108, 1);
}
.token.builtin {
color: rgba(255, 121, 198, 1);
}
.token.attr-value {
color: #7ec699;
}
.token.deleted {
color: #e2777a;
}
.token.namespace {
color: #e2777a;
}
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token {
color: #ff79c6;
}
.language-cpp .token.string {
color: #8be9fd;
}
.language-c .token.string {
color: #8be9fd;
}
.language-css .token.selector {
color: rgba(80, 250, 123, 1);
}
.language-css .token.property {
color: rgba(255, 184, 108, 1);
}
.language-java span.token.class-name {
color: #8be9fd;
}
.language-java .token.class-name {
color: #8be9fd;
}
.language-markup .token.attr-value {
color: rgba(102, 217, 239, 1);
}
.language-markup .token.tag {
color: rgba(80, 250, 123, 1);
}
.language-objectivec .token.property {
color: #66d9ef;
}
.language-objectivec .token.string {
color: #50fa7b;
}
.language-php .token.boolean {
color: #8be9fd;
}
.language-php .token.function {
color: #ff79c6;
}
.language-php .token.keyword {
color: #66d9ef;
}
.language-ruby .token.symbol {
color: #8be9fd;
}
.language-ruby .token.class-name {
color: #cfcfc2;
}