From 777685f5e3b298dcd1435dc036a547af001cf226 Mon Sep 17 00:00:00 2001 From: glmdev Date: Wed, 24 Jul 2019 21:01:59 -0500 Subject: [PATCH] cleanup inline scripts and centralize editor theme --- app/assets/agents/ecma5.js | 4 +-- app/assets/agents/web.js | 52 --------------------------- app/assets/dash_v1.js | 4 ++- app/views/dash_v1/editor_template.pug | 3 +- app/views/dash_v1/out.pug | 2 +- app/views/dash_v1/snippet.pug | 2 +- app/views/dash_v1/use/ecma.pug | 6 ++-- todo.txt | 4 +++ 8 files changed, 16 insertions(+), 61 deletions(-) delete mode 100644 app/assets/agents/web.js create mode 100644 todo.txt diff --git a/app/assets/agents/ecma5.js b/app/assets/agents/ecma5.js index efcf1ce..22536d5 100644 --- a/app/assets/agents/ecma5.js +++ b/app/assets/agents/ecma5.js @@ -40,7 +40,7 @@ const devbug = { json(data){ return JSON.stringify(JSON.rmref(JSON.decycle(data))); }, - breakpoint(name, exception = false){ + breakpoint(except = false, name){ var e = new Error(); this.libs(() => { var s = e.stack.split('at'); var caller = ''; @@ -66,4 +66,4 @@ const devbug = { window.devbug = devbug; window.out = window.devbug.out.bind(window.devbug); -window.breakpoint = window.devbug.breakpoint.bind(window.devbug); \ No newline at end of file +window.breakpoint = window.devbug.breakpoint.bind(window.devbug); diff --git a/app/assets/agents/web.js b/app/assets/agents/web.js deleted file mode 100644 index 6de9c7e..0000000 --- a/app/assets/agents/web.js +++ /dev/null @@ -1,52 +0,0 @@ -// =========================================================== -// DEVBUG INLINE DEBUGGING HELPER - FOR USE WITH DEVBUG SERVER -// TODO: REMOVE BEFORE COMMITTING -let outs = {} -let devbug_url = 'http://localhost:8000/' -let project_api_key = 'CHANGEME' -const out = (key, what, group="") => { - if ( group ){ - if ( Object.keys(outs).includes(group) ) outs[group][key] = what - else outs[group] = {}; outs[group][key] = what - } - else { - outs[key] = what - } -} -const breakpoint = (html = false, name = null) => { - var e = new Error(); - (function() { - // Load better json - var js_decycle = document.createElement("script"); - js_decycle.src = devbug_url+"assets/cycle.js"; - js_decycle.type = 'text/javascript'; - js_decycle.onload = () => { - // Load the script - var script = document.createElement("script"); - script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'; - script.type = 'text/javascript'; - script.onload = () => { - var $ = window.jQuery; - $(() => { - var s = e.stack.split('at'); var caller = ''; - if ( s.length < 3 ) s = e.stack.split('@') - if ( s.length > 2 ) caller = s[2].trim() - else if ( s.length > 1 ) caller = s[1] - else caller = 'Unable to determine stacktrace' - var data = new FormData(); - console.log(JSON.decycle({brief: (name ? name : 'Breakpoint: ')+caller,data: outs})) - data.append('data', JSON.stringify(JSON.rmref(JSON.decycle({brief: (name ? name : 'Breakpoint: ')+caller,data: outs})))) - $.ajax({ - url: devbug_url+'api/v1/out/'+project_api_key, - data: data, cache: false, contentType: false, processData: false, method: 'POST', type: 'POST', - success: (res) => { console.log('DevBug POST Completed'); console.log(res) } - }) - }); - }; - document.getElementsByTagName("head")[0].appendChild(script); - } - document.getElementsByTagName("head")[0].appendChild(js_decycle); - })(); -} -window.out = out; window.breakpoint = breakpoint; -// =========================================================== \ No newline at end of file diff --git a/app/assets/dash_v1.js b/app/assets/dash_v1.js index 0cb8007..ea92c50 100644 --- a/app/assets/dash_v1.js +++ b/app/assets/dash_v1.js @@ -39,4 +39,6 @@ window.onscroll = () => { else { navbar.classList.remove('sticky') } -} \ No newline at end of file +} + +window.devbug_editor_theme = 'ace/theme/idle_fingers' diff --git a/app/views/dash_v1/editor_template.pug b/app/views/dash_v1/editor_template.pug index 2d4c7f1..26b2828 100644 --- a/app/views/dash_v1/editor_template.pug +++ b/app/views/dash_v1/editor_template.pug @@ -29,4 +29,5 @@ html if show_back li.navbar-right a#navbar-back(href='javascript:window.history.back()') Back - block scripts \ No newline at end of file + script(src="/assets/dash_v1.js") + block scripts diff --git a/app/views/dash_v1/out.pug b/app/views/dash_v1/out.pug index bfee98a..dcafbe7 100644 --- a/app/views/dash_v1/out.pug +++ b/app/views/dash_v1/out.pug @@ -6,6 +6,6 @@ block scripts script(src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js") script. const editor = ace.edit('editor'); - editor.setTheme('ace/theme/cobalt'); + editor.setTheme(window.devbug_editor_theme); editor.session.setMode('ace/mode/json'); editor.setOption('readOnly', true); diff --git a/app/views/dash_v1/snippet.pug b/app/views/dash_v1/snippet.pug index ab0e9e0..a85bc0d 100644 --- a/app/views/dash_v1/snippet.pug +++ b/app/views/dash_v1/snippet.pug @@ -96,7 +96,7 @@ block scripts const readonly = #{!!readonly} const preset_mode = document.getElementById('preset_mode').value const editor = ace.edit('editor'); - editor.setTheme('ace/theme/cobalt'); + editor.setTheme(window.devbug_editor_theme); console.log('preset mode: ', preset_mode); editor.session.setMode(preset_mode); document.getElementById('snippet_mode').value = preset_mode diff --git a/app/views/dash_v1/use/ecma.pug b/app/views/dash_v1/use/ecma.pug index b76d46d..0ec555b 100644 --- a/app/views/dash_v1/use/ecma.pug +++ b/app/views/dash_v1/use/ecma.pug @@ -1,11 +1,11 @@ extends ../template block content - h3 DevBug supports ECMAscript on the web. - p To use the client, include the ECMAscript client file in your application, as early as possible. This file is hosted by your local DevBug server, and is available here. Then, set the project API key and server addresses (see the code snippet below). This gives you access to the global out() and breakpoint() functions. Here's how to use them: + h3 DevBug supports ECMAScript on the web. + p To use the client, include the ECMAScript client file in your application, as early as possible. This file is hosted by your local DevBug server, and is available here. Then, set the project API key and server addresses (see the code snippet below). This gives you access to the global out() and breakpoint() functions. Here's how to use them: h4 out(info, data) - output data to DevBug p This function is similar to logging data. It stores data to be outputted to DevBug. The first parameter should be a string with a brief description of the data, and the second is the data to be outputted. Note that the info string should be unique and multiple outputs with the same name will overwrite their predecessors. It's important to note that calling this function doesn't actually send any data to DevBug. Instead, it stores it to be sent. h4 breakpoint(continue = false, name = "") - send the outputted data to DevBug - p This is the magic of the operation. When this function is called, any data that has been passed to the output function will be sent to the DevBug server and stored under the configured project. There are several things you can change about this function. The continue parameter determines whether or not program execution continues, or if the interpreter's exit method is called. The name parameter allows you to change the name of the breakpoint. This can be useful to help distinguish multiple breakpoints in the DevBug dashboard. Note that the continuation parameter is non-functional in browser-based ECMAscript. + p This is the magic of the operation. When this function is called, any data that has been passed to the output function will be sent to the DevBug server and stored under the configured project. There are several things you can change about this function. The continue parameter determines whether or not program execution continues, or if the interpreter's exit method is called. The name parameter allows you to change the name of the breakpoint. This can be useful to help distinguish multiple breakpoints in the DevBug dashboard. Note that the continuation parameter is non-functional in browser-based ECMAScript. Instead, the breakpoint throws an exception. pre#editor.inline // Run the following as early in your application as your can: devbug_url="http://localhost:8000/"; project_api_key="CHANGEME"; block scripts diff --git a/todo.txt b/todo.txt new file mode 100644 index 0000000..1d777e1 --- /dev/null +++ b/todo.txt @@ -0,0 +1,4 @@ +- Standardize inline TypeScript - load dynamically? +- Standardize inline PHP +- Serve jQuery from local server assets +- Use a closer-matching Ace theme