From 40a32e6826ba6303b77bb1108f2c9e722aefc5b6 Mon Sep 17 00:00:00 2001 From: azivner Date: Sat, 26 May 2018 19:27:47 -0400 Subject: [PATCH] render notes can be edited and can contain HTML markup --- db/migrations/0095__mime_type_for_render.sql | 1 + src/entities/note.js | 2 +- .../javascripts/services/note_detail_code.js | 37 ++++++++-------- .../services/note_detail_render.js | 43 ++++++++++++++++++- src/public/javascripts/services/note_type.js | 8 +++- src/public/stylesheets/style.css | 4 ++ src/services/app_info.js | 2 +- src/services/script.js | 2 +- src/views/index.ejs | 8 ++++ 9 files changed, 85 insertions(+), 22 deletions(-) create mode 100644 db/migrations/0095__mime_type_for_render.sql diff --git a/db/migrations/0095__mime_type_for_render.sql b/db/migrations/0095__mime_type_for_render.sql new file mode 100644 index 000000000..f23e43c12 --- /dev/null +++ b/db/migrations/0095__mime_type_for_render.sql @@ -0,0 +1 @@ +UPDATE notes SET mime = 'text/html' WHERE type = 'render'; \ No newline at end of file diff --git a/src/entities/note.js b/src/entities/note.js index ee5cc8367..fc4983d6a 100644 --- a/src/entities/note.js +++ b/src/entities/note.js @@ -40,7 +40,7 @@ class Note extends Entity { } isHtml() { - return (this.type === "code" || this.type === "file") && this.mime === "text/html"; + return (this.type === "code" || this.type === "file" || this.type === "render") && this.mime === "text/html"; } getScriptEnv() { diff --git a/src/public/javascripts/services/note_detail_code.js b/src/public/javascripts/services/note_detail_code.js index ee779f272..00ed4ca6b 100644 --- a/src/public/javascripts/services/note_detail_code.js +++ b/src/public/javascripts/services/note_detail_code.js @@ -64,24 +64,27 @@ function focus() { } async function executeCurrentNote() { - if (noteDetailService.getCurrentNoteType() === 'code') { - // make sure note is saved so we load latest changes - await noteDetailService.saveNoteIfChanged(); - - const currentNote = noteDetailService.getCurrentNote(); - - if (currentNote.mime.endsWith("env=frontend")) { - const bundle = await server.get('script/bundle/' + noteDetailService.getCurrentNoteId()); - - bundleService.executeBundle(bundle); - } - - if (currentNote.mime.endsWith("env=backend")) { - await server.post('script/run/' + noteDetailService.getCurrentNoteId()); - } - - infoService.showMessage("Note executed"); + // ctrl+enter is also used elsewhere so make sure we're running only when appropriate + if (noteDetailService.getCurrentNoteType() !== 'code') { + return; } + + // make sure note is saved so we load latest changes + await noteDetailService.saveNoteIfChanged(); + + const currentNote = noteDetailService.getCurrentNote(); + + if (currentNote.mime.endsWith("env=frontend")) { + const bundle = await server.get('script/bundle/' + noteDetailService.getCurrentNoteId()); + + bundleService.executeBundle(bundle); + } + + if (currentNote.mime.endsWith("env=backend")) { + await server.post('script/run/' + noteDetailService.getCurrentNoteId()); + } + + infoService.showMessage("Note executed"); } $(document).bind('keydown', "ctrl+return", executeCurrentNote); diff --git a/src/public/javascripts/services/note_detail_render.js b/src/public/javascripts/services/note_detail_render.js index 75b001875..9d997eeb6 100644 --- a/src/public/javascripts/services/note_detail_render.js +++ b/src/public/javascripts/services/note_detail_render.js @@ -1,12 +1,51 @@ import bundleService from "./bundle.js"; import server from "./server.js"; import noteDetailService from "./note_detail.js"; +import noteDetailCodeService from "./note_detail_code.js"; +const $noteDetailCode = $('#note-detail-code'); const $noteDetailRender = $('#note-detail-render'); +const $toggleEditButton = $('#toggle-edit-button'); +const $renderButton = $('#render-button'); + +let codeEditorInitialized; async function show() { + codeEditorInitialized = false; + $noteDetailRender.show(); + await render(); +} + +$toggleEditButton.click(() => { + if ($noteDetailCode.is(":visible")) { + $noteDetailCode.hide(); + } + else { + if (!codeEditorInitialized) { + noteDetailCodeService.show(); + + codeEditorInitialized = true; + } + else { + $noteDetailCode.show(); + } + } +}); + +$renderButton.click(render); + +async function render() { + // ctrl+enter is also used elsewhere so make sure we're running only when appropriate + if (noteDetailService.getCurrentNoteType() !== 'render') { + return; + } + + if (codeEditorInitialized) { + await noteDetailService.saveNoteIfChanged(); + } + const bundle = await server.get('script/bundle/' + noteDetailService.getCurrentNoteId()); $noteDetailRender.html(bundle.html); @@ -14,8 +53,10 @@ async function show() { await bundleService.executeBundle(bundle); } +$(document).bind('keydown', "ctrl+return", render); + export default { show, - getContent: () => null, + getContent: noteDetailCodeService.getContent, focus: () => null } \ No newline at end of file diff --git a/src/public/javascripts/services/note_type.js b/src/public/javascripts/services/note_type.js index 34922c2c9..d5de6b31d 100644 --- a/src/public/javascripts/services/note_type.js +++ b/src/public/javascripts/services/note_type.js @@ -4,6 +4,9 @@ import server from './server.js'; import infoService from "./info.js"; const $executeScriptButton = $("#execute-script-button"); +const $toggleEditButton = $('#toggle-edit-button'); +const $renderButton = $('#render-button'); + const noteTypeModel = new NoteTypeModel(); function NoteTypeModel() { @@ -107,7 +110,7 @@ function NoteTypeModel() { this.selectRender = function() { self.type('render'); - self.mime(''); + self.mime('text/html'); save(); }; @@ -128,6 +131,9 @@ function NoteTypeModel() { this.updateExecuteScriptButtonVisibility = function() { $executeScriptButton.toggle(self.mime().startsWith('application/javascript')); + + $toggleEditButton.toggle(self.type() === 'render'); + $renderButton.toggle(self.type() === 'render'); } } diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index e85b15f8a..1921b151d 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -279,6 +279,10 @@ div.ui-tooltip { min-height: 200px; } +#note-detail-render { + min-height: 200px; +} + .CodeMirror { font-family: "Liberation Mono", "Lucida Console", monospace; height: auto; diff --git a/src/services/app_info.js b/src/services/app_info.js index d0692660e..33d9f74f5 100644 --- a/src/services/app_info.js +++ b/src/services/app_info.js @@ -3,7 +3,7 @@ const build = require('./build'); const packageJson = require('../../package'); -const APP_DB_VERSION = 94; +const APP_DB_VERSION = 95; module.exports = { appVersion: packageJson.version, diff --git a/src/services/script.js b/src/services/script.js index c2759ec1c..1e737c2bc 100644 --- a/src/services/script.js +++ b/src/services/script.js @@ -73,7 +73,7 @@ function getParams(params) { } async function getScriptBundle(note, root = true, scriptEnv = null, includedNoteIds = []) { - if (!note.isJavaScript() && !note.isHtml() && note.type !== 'render') { + if (!note.isJavaScript() && !note.isHtml()) { return; } diff --git a/src/views/index.ejs b/src/views/index.ejs index 9df679da6..c6bd928fd 100644 --- a/src/views/index.ejs +++ b/src/views/index.ejs @@ -95,6 +95,14 @@ + + + +