simplification of triggering events from links

This commit is contained in:
zadam 2020-01-21 22:08:41 +01:00
parent 55d1f9e9f0
commit af5c623671
8 changed files with 45 additions and 51 deletions

View File

@ -50,7 +50,7 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, tabConte
*/
this.activateNote = async (notePath, noteLoadedListener) => {
await treeService.activateNote(notePath, async () => {
await appContext.getMainNoteTree().scrollToActiveNote();
await appContext.getMainNoteTree().scrollToActiveNoteListener();
if (noteLoadedListener) {
noteLoadedListener();

View File

@ -556,8 +556,6 @@ keyboardActionService.setGlobalActionHandler('CutIntoNote', () => createNoteInto
keyboardActionService.setGlobalActionHandler('CreateNoteInto', createNoteInto);
keyboardActionService.setGlobalActionHandler('ScrollToActiveNote', () => appContext.getMainNoteTree().scrollToActiveNote());
$(window).bind('hashchange', async function() {
if (isNotePathInAddress()) {
const [notePath, tabId] = getHashValueFromAddress();

View File

@ -7,6 +7,12 @@ class BasicWidget extends Component {
keyboardActionsService.updateDisplayedShortcuts($widget);
$widget.find("[data-trigger-event]").on('click', e => {
const eventName = $(e.target).attr('data-trigger-event');
this.appContext.trigger(eventName);
});
return $widget;
}

View File

@ -14,31 +14,30 @@ const WIDGET_TPL = `
</style>
<div class="global-buttons">
<a title="Create new top level note" class="create-top-level-note-button icon-action bx bx-folder-plus"></a>
<a data-trigger-event="createTopLevelNote"
title="Create new top level note"
class="icon-action bx bx-folder-plus"></a>
<a title="Collapse note tree" data-kb-action="CollapseTree" class="collapse-tree-button icon-action bx bx-layer-minus"></a>
<a data-trigger-event="collapseTree"
title="Collapse note tree"
data-kb-action="CollapseTree"
class="icon-action bx bx-layer-minus"></a>
<a title="Scroll to active note" data-kb-action="ScrollToActiveNote" class="scroll-to-active-note-button icon-action bx bx-crosshair"></a>
<a data-trigger-event="scrollToActiveNote"
title="Scroll to active note"
data-kb-action="ScrollToActiveNote"
class="icon-action bx bx-crosshair"></a>
<a title="Search in notes" data-kb-action="SearchNotes" class="toggle-search-button icon-action bx bx-search"></a>
<a data-trigger-event="searchNotes"
title="Search in notes"
data-kb-action="SearchNotes"
class="icon-action bx bx-search"></a>
</div>
`;
class GlobalButtonsWidget extends BasicWidget {
doRender($widget) {
$widget = $(WIDGET_TPL);
const $createTopLevelNoteButton = $widget.find(".create-top-level-note-button");
const $collapseTreeButton = $widget.find(".collapse-tree-button");
const $scrollToActiveNoteButton = $widget.find(".scroll-to-active-note-button");
const $toggleSearchButton = $widget.find(".toggle-search-button");
$createTopLevelNoteButton.on('click', () => this.trigger('createTopLevelNote'));
$collapseTreeButton.on('click', () => this.trigger('collapseTree'));
$scrollToActiveNoteButton.on('click', () => appContext.getMainNoteTree().scrollToActiveNote());
$toggleSearchButton.on('click', () => this.trigger('toggleSearch'));
return $widget;
return $(WIDGET_TPL);
}
}

View File

@ -1,7 +1,4 @@
import TabAwareWidget from "./tab_aware_widget.js";
import appContext from "../services/app_context.js";
import libraryLoader from "../services/library_loader.js";
import keyboardActionService from "../services/keyboard_actions.js";
const TPL = `
<div class="dropdown note-actions">
@ -10,14 +7,14 @@ const TPL = `
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item show-note-revisions-button">Revisions</a>
<a class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
<a class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
<a class="dropdown-item show-source-button"><kbd data-kb-action="ShowNoteSource"></kbd> Note source</a>
<a data-trigger-event="showNoteRevisions" class="dropdown-item show-note-revisions-button">Revisions</a>
<a data-trigger-event="showAttributes" class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
<a data-trigger-event="showLinkMap" class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
<a data-trigger-event="showNoteSource" class="dropdown-item show-source-button"><kbd data-kb-action="ShowNoteSource"></kbd> Note source</a>
<a class="dropdown-item import-files-button">Import files</a>
<a class="dropdown-item export-note-button">Export note</a>
<a class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
<a class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
<a data-trigger-event="printActiveNote" class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
<a data-trigger-event="showNoteInfo" class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
</div>
</div>`;
@ -25,23 +22,7 @@ export default class NoteActionsWidget extends TabAwareWidget {
doRender() {
this.$widget = $(TPL);
this.$showRevisionsButton = this.$widget.find('.show-note-revisions-button');
this.$showRevisionsButton.on('click', e => this.triggerEvent(e, 'showNoteRevisions'));
this.$showAttributesButton = this.$widget.find('.show-attributes-button');
this.$showAttributesButton.on('click', e => this.triggerEvent(e, 'showAttributes'));
this.$showLinkMapButton = this.$widget.find('.show-link-map-button');
this.$showLinkMapButton.on('click', e => this.triggerEvent(e, 'showLinkMap'));
this.$showSourceButton = this.$widget.find('.show-source-button');
this.$showSourceButton.on('click', e => this.triggerEvent(e, 'showNoteSource'));
this.$showNoteInfoButton = this.$widget.find('.show-note-info-button');
this.$showNoteInfoButton.on('click', e => this.triggerEvent(e, 'showNoteInfo'));
this.$printNoteButton = this.$widget.find('.print-note-button');
this.$printNoteButton.on('click', e => this.triggerEvent(e, 'printActiveNote'));
this.$exportNoteButton = this.$widget.find('.export-note-button');
this.$exportNoteButton.on("click", () => {

View File

@ -1,7 +1,18 @@
import StandardWidget from "./standard_widget.js";
const TPL = `
<table class="note-info-table" style="table-layout: fixed; width: 100%;">
<table class="note-info-widget-table">
<style>
.note-info-widget-table {
table-layout: fixed;
width: 100%;
}
.note-info-widget-table td, .note-info-widget-table th {
padding: 5px;
}
</style>
<tr>
<th nowrap>Note ID:</th>
<td nowrap colspan="3" class="note-info-note-id"></td>

View File

@ -251,7 +251,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
if (!node) {
const hoistedNoteId = await hoistedNoteService.getHoistedNoteId();
node = getNodesByNoteId(hoistedNoteId)[0];
node = this.getNodesByNoteId(hoistedNoteId)[0];
}
node.setExpanded(false);
@ -281,8 +281,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
}
}
// FIXME since this operates on note details tab context it seems it does not really belong here
async scrollToActiveNote() {
async scrollToActiveNoteListener() {
const activeContext = appContext.getActiveTabContext();
if (activeContext && activeContext.notePath) {

View File

@ -124,8 +124,8 @@ body {
background-color: inherit;
}
.widget .note-info-table td, .widget .note-info-table th {
padding: 5px;
#note-info-table td, #note-info-table th {
padding: 15px;
}
[data-toggle="tooltip"] span {