mirror of
				https://github.com/TriliumNext/Notes.git
				synced 2025-10-31 21:11:30 +08:00 
			
		
		
		
	separated editable code buttons into separate widget which also fixes scrolling issue
This commit is contained in:
		
							parent
							
								
									e8b8198eb8
								
							
						
					
					
						commit
						b091e2222e
					
				| @ -78,6 +78,7 @@ import OptionsDialog from "../widgets/dialogs/options.js"; | ||||
| import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js"; | ||||
| import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js"; | ||||
| import MermaidExportButton from "../widgets/floating_buttons/mermaid_export_button.js"; | ||||
| import EditableCodeButtonsWidget from "../widgets/type_widgets/editable_code_buttons.js"; | ||||
| 
 | ||||
| export default class DesktopLayout { | ||||
|     constructor(customWidgets) { | ||||
| @ -195,6 +196,7 @@ export default class DesktopLayout { | ||||
|                                         .child(new SearchResultWidget()) | ||||
|                                         .child(new SqlResultWidget()) | ||||
|                                 ) | ||||
|                                 .child(new EditableCodeButtonsWidget()) | ||||
|                                 .child(new FindWidget()) | ||||
|                                 .child( | ||||
|                                     ...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC
 | ||||
|  | ||||
| @ -23,26 +23,6 @@ const TPL = ` | ||||
|     </style> | ||||
| 
 | ||||
|     <div class="note-detail-code-editor"></div> | ||||
| 
 | ||||
|     <div style="display: flex; justify-content: space-evenly;"> | ||||
|         <button data-trigger-command="runActiveNote" | ||||
|                 class="no-print execute-button btn btn-sm"> | ||||
|             Execute <kbd data-command="runActiveNote"></kbd> | ||||
|         </button> | ||||
|          | ||||
|         <button class="no-print trilium-api-docs-button btn btn-sm"  | ||||
|             title="Open Trilium API docs"> | ||||
|             <span class="bx bx-help-circle"></span> | ||||
|              | ||||
|             API docs | ||||
|         </button> | ||||
|          | ||||
|         <button class="no-print save-to-note-button btn btn-sm"> | ||||
|              | ||||
|             <span class="bx bx-save"></span> | ||||
|             Save to note</kbd> | ||||
|         </button> | ||||
|     </div> | ||||
| </div>`; | ||||
| 
 | ||||
| export default class EditableCodeTypeWidget extends TypeWidget { | ||||
| @ -50,28 +30,7 @@ export default class EditableCodeTypeWidget extends TypeWidget { | ||||
| 
 | ||||
|     doRender() { | ||||
|         this.$widget = $(TPL); | ||||
|         this.$openTriliumApiDocsButton = this.$widget.find(".trilium-api-docs-button"); | ||||
|         this.$openTriliumApiDocsButton.on("click", () => { | ||||
|             if (this.note.mime.endsWith("frontend")) { | ||||
|                 window.open("https://zadam.github.io/trilium/frontend_api/FrontendScriptApi.html", "_blank"); | ||||
|             } | ||||
|             else { | ||||
|                 window.open("https://zadam.github.io/trilium/backend_api/BackendScriptApi.html", "_blank"); | ||||
|             } | ||||
|         }); | ||||
| 
 | ||||
|         this.$editor = this.$widget.find('.note-detail-code-editor'); | ||||
|         this.$executeButton = this.$widget.find('.execute-button'); | ||||
|         this.$saveToNoteButton = this.$widget.find('.save-to-note-button'); | ||||
|         this.$saveToNoteButton.on('click', async () => { | ||||
|             const {notePath} = await server.post("special-notes/save-sql-console", {sqlConsoleNoteId: this.noteId}); | ||||
| 
 | ||||
|             await ws.waitForMaxKnownEntityChangeId(); | ||||
| 
 | ||||
|             await appContext.tabManager.getActiveContext().setNote(notePath); | ||||
| 
 | ||||
|             toastService.showMessage("SQL Console note has been saved into " + await treeService.getNotePathTitle(notePath)); | ||||
|         }); | ||||
| 
 | ||||
|         keyboardActionService.setupActionsForElement('code-detail', this.$widget, this); | ||||
| 
 | ||||
| @ -115,18 +74,6 @@ export default class EditableCodeTypeWidget extends TypeWidget { | ||||
|     } | ||||
| 
 | ||||
|     async doRefresh(note) { | ||||
|         this.$executeButton.toggle( | ||||
|             note.mime.startsWith('application/javascript') | ||||
|             || note.mime === 'text/x-sqlite;schema=trilium' | ||||
|         ); | ||||
| 
 | ||||
|         this.$saveToNoteButton.toggle( | ||||
|             note.mime === 'text/x-sqlite;schema=trilium' | ||||
|             && !note.getAllNotePaths().find(notePathArr => !notePathArr.includes("hidden")) | ||||
|         ); | ||||
| 
 | ||||
|         this.$openTriliumApiDocsButton.toggle(note.mime.startsWith('application/javascript;env=')); | ||||
| 
 | ||||
|         const noteComplement = await this.noteContext.getNoteComplement(); | ||||
| 
 | ||||
|         await this.spacedUpdate.allowUpdateWithoutChange(() => { | ||||
|  | ||||
							
								
								
									
										90
									
								
								src/public/app/widgets/type_widgets/editable_code_buttons.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										90
									
								
								src/public/app/widgets/type_widgets/editable_code_buttons.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,90 @@ | ||||
| import server from "../../services/server.js"; | ||||
| import ws from "../../services/ws.js"; | ||||
| import appContext from "../../services/app_context.js"; | ||||
| import toastService from "../../services/toast.js"; | ||||
| import treeService from "../../services/tree.js"; | ||||
| import NoteContextAwareWidget from "../note_context_aware_widget.js"; | ||||
| import keyboardActionService from "../../services/keyboard_actions.js"; | ||||
| 
 | ||||
| const TPL = ` | ||||
| <div class="editable-code-buttons-widget"> | ||||
|     <style> | ||||
|     .editable-code-buttons-widget { | ||||
|         display: flex;  | ||||
|         justify-content: space-evenly; | ||||
|         padding: 5px; | ||||
|         height: 45px; | ||||
|     } | ||||
|     </style> | ||||
|      | ||||
|     <button data-trigger-command="runActiveNote" | ||||
|             class="no-print execute-button btn btn-sm"> | ||||
|         <span class="bx bx-run"></span> | ||||
|              | ||||
|         Execute <kbd data-command="runActiveNote"></kbd> | ||||
|     </button> | ||||
|      | ||||
|     <button class="no-print trilium-api-docs-button btn btn-sm"  | ||||
|         title="Open Trilium API docs"> | ||||
|         <span class="bx bx-help-circle"></span> | ||||
|          | ||||
|         API docs | ||||
|     </button> | ||||
|      | ||||
|     <button class="no-print save-to-note-button btn btn-sm"> | ||||
|         <span class="bx bx-save"></span> | ||||
|         Save to note</kbd> | ||||
|     </button> | ||||
| </div>`; | ||||
| 
 | ||||
| export default class EditableCodeButtonsWidget extends NoteContextAwareWidget { | ||||
|     isEnabled() { | ||||
|         return super.isEnabled() | ||||
|             && this.note | ||||
|             && (this.note.mime.startsWith('application/javascript')  || this.note.mime === 'text/x-sqlite;schema=trilium'); | ||||
|     } | ||||
| 
 | ||||
|     doRender() { | ||||
|         this.$widget = $(TPL); | ||||
|         this.$openTriliumApiDocsButton = this.$widget.find(".trilium-api-docs-button"); | ||||
|         this.$openTriliumApiDocsButton.on("click", () => { | ||||
|             if (this.note.mime.endsWith("frontend")) { | ||||
|                 window.open("https://zadam.github.io/trilium/frontend_api/FrontendScriptApi.html", "_blank"); | ||||
|             } | ||||
|             else { | ||||
|                 window.open("https://zadam.github.io/trilium/backend_api/BackendScriptApi.html", "_blank"); | ||||
|             } | ||||
|         }); | ||||
| 
 | ||||
|         this.$executeButton = this.$widget.find('.execute-button'); | ||||
|         this.$saveToNoteButton = this.$widget.find('.save-to-note-button'); | ||||
|         this.$saveToNoteButton.on('click', async () => { | ||||
|             const {notePath} = await server.post("special-notes/save-sql-console", {sqlConsoleNoteId: this.noteId}); | ||||
| 
 | ||||
|             await ws.waitForMaxKnownEntityChangeId(); | ||||
| 
 | ||||
|             await appContext.tabManager.getActiveContext().setNote(notePath); | ||||
| 
 | ||||
|             toastService.showMessage("SQL Console note has been saved into " + await treeService.getNotePathTitle(notePath)); | ||||
|         }); | ||||
| 
 | ||||
|         keyboardActionService.setupActionsForElement('code-detail', this.$widget, this); | ||||
|         keyboardActionService.updateDisplayedShortcuts(this.$widget); | ||||
| 
 | ||||
|         super.doRender(); | ||||
|     } | ||||
| 
 | ||||
|     refreshWithNote(note) { | ||||
|         this.$executeButton.toggle( | ||||
|             note.mime.startsWith('application/javascript') | ||||
|             || note.mime === 'text/x-sqlite;schema=trilium' | ||||
|         ); | ||||
| 
 | ||||
|         this.$saveToNoteButton.toggle( | ||||
|             note.mime === 'text/x-sqlite;schema=trilium' | ||||
|             && !note.getAllNotePaths().find(notePathArr => !notePathArr.includes("hidden")) | ||||
|         ); | ||||
| 
 | ||||
|         this.$openTriliumApiDocsButton.toggle(note.mime.startsWith('application/javascript;env=')); | ||||
|     } | ||||
| } | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 zadam
						zadam