devbug/app/views/dash_v1/snippet.pug

127 lines
5.1 KiB
Plaintext
Raw Normal View History

2019-07-24 21:34:23 +00:00
extends ./editor_template
block header
.inject
if errors
each error in errors
p(style='color: red; font-weight: bold;') #{error}
form#snippet_form(method='post' enctype='multipart/form-data')
label(for='snippet_name') Snippet Title:
input#snippet_name(type='text' name='title' placeholder='required' value=snippet ? snippet.name : '' autofocus required readonly=!!readonly)
label(for='snippet_mode' style='margin-left: 10px;') Language:
select#snippet_mode(name='mode' onchange='selectonchange()' required disabled=!!readonly)
option(value='ace/mode/c_cpp') C/C++
option(value='ace/mode/css') CSS
option(value='ace/mode/gitignore') .gitignore
option(value='ace/mode/go') Go
option(value='ace/mode/html') HTML
option(value='ace/mode/java') Java
option(value='ace/mode/javascript') JavaScript
option(value='ace/mode/json') JSON
option(value='ace/mode/mysql') MySQL
option(value='ace/mode/perl') Perl
option(value='ace/mode/pgsql') Postgres
option(value='ace/mode/php') PHP
option(value='ace/mode/python') Python
option(value='ace/mode/ruby') Ruby
option(value='ace/mode/rust') Rust
option(value='ace/mode/sql') SQL
option(value='ace/mode/text') Text
option(value='ace/mode/typescript') TypeScript
option(value='ace/mode/apache_conf') Apache Configuration
option(value='ace/mode/asl') ASL
option(value='ace/mode/assembly_x86') Assembly (x86)
option(value='ace/mode/autohotkey') AutoHotKey
option(value='ace/mode/crystal') Crystal
option(value='ace/mode/clojure') Clojure
option(value='ace/mode/cobol') COBOL
option(value='ace/mode/coffee') CoffeeScript
option(value='ace/mode/csharp') C#
option(value='ace/mode/d') D
option(value='ace/mode/django') django
option(value='ace/mode/dockerfile') Dockerfile
option(value='ace/mode/ejs') EJS
option(value='ace/mode/elixir') Elixir
option(value='ace/mode/fortran') Fortran
option(value='ace/mode/haml') HAML
option(value='ace/mode/handlebars') Handlebars
option(value='ace/mode/html_elixir') HTML (Elixir)
option(value='ace/mode/html_ruby') HTML (Ruby)
option(value='ace/mode/ini') INI
option(value='ace/mode/jade') Jade
option(value='ace/mode/julia') Julia
option(value='ace/mode/kotlin') Kotlin
option(value='ace/mode/latex') LaTeX
option(value='ace/mode/less') Less
option(value='ace/mode/lisp') Lisp
option(value='ace/mode/lua') Lua
option(value='ace/mode/makefile') Makefile
option(value='ace/mode/markdown') Markdown
option(value='ace/mode/matlab') MATLAB
option(value='ace/mode/nginx') NGINX
option(value='ace/mode/objectivec') Objective-C
option(value='ace/mode/pascal') Pascal
option(value='ace/mode/perl6') Perl 6
option(value='ace/mode/php_laravel_blade') PHP (blade template)
option(value='ace/mode/puppet') Puppet
option(value='ace/mode/powershell') PowerShell
option(value='ace/mode/r') R
option(value='ace/mode/sass') SASS
option(value='ace/mode/scala') Scala
option(value='ace/mode/scss') SCSS
option(value='ace/mode/sh') /bin/sh
option(value='ace/mode/slim') Slim
option(value='ace/mode/snippets') Snippets
option(value='ace/mode/sqlserver') SQL Server
option(value='ace/mode/svg') SVG
option(value='ace/mode/swift') Swift
option(value='ace/mode/tcl') TCL
option(value='ace/mode/tex') Tex
option(value='ace/mode/vbscript') VBScript
option(value='ace/mode/xml') XML
option(value='ace/mode/yaml') YAML
input#snippet_value(type='hidden' name='data' required)
if snippet && user && is_owner && readonly
a.btn(href='/dash/v1/snippet/share/'+snippet.id style='margin-left: 20px') Share Snippet
a.btn(href='/dash/v1/project/snippet/'+project.id+'/edit/'+snippet.uuid style='margin-left: 10px') Edit
2019-07-23 21:44:40 +00:00
block content
pre#editor #{ snippet ? snippet.data : '' }
2019-07-24 21:34:23 +00:00
input#preset_mode(type='hidden' value=snippet ? snippet.mode : 'ace/mode/javascript')
block footer
2019-07-23 21:44:40 +00:00
if (!readonly)
2019-07-24 20:30:51 +00:00
button.btn(onclick='submitSnippet()') #{ snippet ? 'Update Snippet' : 'Create Snippet' }
2019-07-23 21:44:40 +00:00
block scripts
script(src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js")
script.
2019-07-24 14:52:58 +00:00
const readonly = #{!!readonly}
const preset_mode = document.getElementById('preset_mode').value
2019-07-23 21:44:40 +00:00
const editor = ace.edit('editor');
editor.setTheme('ace/theme/cobalt');
2019-07-24 14:52:58 +00:00
console.log('preset mode: ', preset_mode);
editor.session.setMode(preset_mode);
document.getElementById('snippet_mode').value = preset_mode
if ( readonly ){
editor.setOption('readOnly', true)
}
2019-07-23 21:44:40 +00:00
function trim(s){
return ( s || '' ).replace( /^\s+|\s+$/g, '' );
}
function submitSnippet(){
const form = document.getElementById('snippet_form');
const value = document.getElementById('snippet_value');
const name = document.getElementById('snippet_name');
2019-07-24 14:52:58 +00:00
const mode = document.getElementById('snippet_mode');
2019-07-23 21:44:40 +00:00
value.value = editor.getValue();
2019-07-24 14:52:58 +00:00
if ( trim(value.value) && trim(name.value) && trim(mode.value) ) form.submit();
}
function selectonchange() {
const mode = document.getElementById('snippet_mode');
console.log('set mode: ', mode.value);
editor.session.setMode(mode.value);
2019-07-23 21:44:40 +00:00
}