help buttons and existing custom HTML attribute refactoring to data-*

src/public/javascripts/dialogs/branch_prefix.js

@@ -15,7 +15,7 @@ async function showDialog() {
 
     await $dialog.dialog({
         modal: true,
-        width: 500
+        width: 600
     });
 
     const currentNode = treeService.getCurrentNode();

src/public/javascripts/dialogs/note_revisions.js

@@ -63,10 +63,10 @@ $list.on('change', () => {
     }
 });
 
-$(document).on('click', "a[action='note-revision']", event => {
+$(document).on('click', "a[data-action='note-revision']", event => {
     const linkEl = $(event.target);
-    const noteId = linkEl.attr('note-path');
-    const noteRevisionId = linkEl.attr('note-revision-id');
+    const noteId = linkEl.attr('data-note-path');
+    const noteRevisionId = linkEl.attr('data-note-revision-id');
 
     showNoteRevisionsDialog(noteId, noteRevisionId);
 

src/public/javascripts/dialogs/recent_changes.js

@@ -30,9 +30,9 @@ async function showDialog() {
             const revLink = $("<a>", {
                 href: 'javascript:',
                 text: 'rev'
-            }).attr('action', 'note-revision')
-                .attr('note-path', change.noteId)
-                .attr('note-revision-id', change.noteRevisionId);
+            }).attr('data-action', 'note-revision')
+                .attr('data-note-path', change.noteId)
+                .attr('data-note-revision-id', change.noteRevisionId);
 
             let noteLink;
 

src/public/javascripts/services/bootstrap.js

@@ -71,6 +71,14 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
     return false;
 };
 
+const wikiBaseUrl = "https://github.com/zadam/trilium/wiki/";
+
+$(document).on("click", "button[data-help-page]", e => {
+    const $button = $(e.target);
+
+    window.open(wikiBaseUrl + $button.attr("data-help-page"), '_blank');
+});
+
 $("#logout-button").toggle(!utils.isElectron());
 
 if (utils.isElectron()) {

src/public/javascripts/services/link.js

@@ -33,8 +33,8 @@ async function createNoteLink(notePath, noteTitle = null) {
     const noteLink = $("<a>", {
         href: 'javascript:',
         text: noteTitle
-    }).attr('action', 'note')
-        .attr('note-path', notePath);
+    }).attr('data-action', 'note')
+        .attr('data-note-path', notePath);
 
     return noteLink;
 }
@@ -43,10 +43,10 @@ function goToLink(e) {
     e.preventDefault();
 
     const $link = $(e.target);
-    let notePath = $link.attr("note-path");
+    let notePath = $link.attr("data-note-path");
 
     if (!notePath) {
-        const address = $link.attr("note-path") ? $link.attr("note-path") : $link.attr('href');
+        const address = $link.attr("data-note-path") ? $link.attr("data-note-path") : $link.attr('href');
 
         if (!address) {
             return;
@@ -104,7 +104,7 @@ ko.bindingHandlers.noteLink = {
 
 // when click on link popup, in case of internal link, just go the the referenced note instead of default behavior
 // of opening the link in new window/tab
-$(document).on('click', "a[action='note']", goToLink);
+$(document).on('click', "a[data-action='note']", goToLink);
 $(document).on('click', 'div.popover-content a, div.ui-tooltip-content a', goToLink);
 $(document).on('dblclick', '#note-detail-text a', goToLink);
 

src/public/javascripts/services/note_detail.js

@@ -209,7 +209,7 @@ async function showChildrenOverview(hideChildrenOverview) {
         const link = $('<a>', {
             href: 'javascript:',
             text: await treeUtils.getNoteTitle(childBranch.noteId, childBranch.parentNoteId)
-        }).attr('action', 'note').attr('note-path', notePath + '/' + childBranch.noteId);
+        }).attr('data-action', 'note').attr('data-note-path', notePath + '/' + childBranch.noteId);
 
         const childEl = $('<div class="child-overview">').html(link);
         $childrenOverview.append(childEl);

src/public/javascripts/services/search_notes.js

@@ -58,7 +58,7 @@ async function doSearch(searchText) {
         const link = $('<a>', {
             href: 'javascript:',
             text: result.title
-        }).attr('action', 'note').attr('note-path', result.path);
+        }).attr('data-action', 'note').attr('data-note-path', result.path);
 
         const $result = $('<li>').append(link);
 

src/public/javascripts/services/tooltip.js

@@ -9,7 +9,7 @@ function setupTooltip() {
             let notePath = linkService.getNotePathFromLink($(this).attr("href"));
 
             if (!notePath) {
-                notePath = $(this).attr("note-path");
+                notePath = $(this).attr("data-note-path");
             }
 
             if (notePath) {

src/views/index.ejs

@@ -220,7 +220,9 @@
                   <code>@abc @def some search string</code> - same combination</li>
               </ul>
 
-              <a target="_blank" href="https://github.com/zadam/trilium/wiki/Search">Documentation on search</a>
+              <button class="btn btn-sm" type="button" data-help-page="Search">
+                <i class="glyphicon glyphicon-info-sign"></i> Complete help on search
+              </button>
             </p>
           </div>
 
@@ -301,11 +303,13 @@
           <input id="clone-prefix" class="form-control" style="width: 100%;">
         </div>
 
-        <button class="btn btn-primary">Add note link <kbd>enter</kbd></button>
+        <div style="display: flex; justify-content: space-between">
+          <button class="btn btn-primary">Add note link <kbd>enter</kbd></button>
 
-        &nbsp; &nbsp; &nbsp; &nbsp;
-
-        <a target="_blank" href="https://github.com/zadam/trilium/wiki/Links">Documentation on links</a>
+          <button class="btn btn-sm" type="button" data-help-page="Links">
+            <i class="glyphicon glyphicon-info-sign"></i> Help
+          </button>
+        </div>
       </form>
     </div>
 
@@ -396,7 +400,13 @@
               <input class="form-control" id="protected-session-timeout-in-seconds" type="number">
             </div>
 
-            <button class="btn btn-sm">Save</button>
+            <div style="display: flex; justify-content: space-between;">
+              <button class="btn btn-sm">Save</button>
+
+              <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
+                <i class="glyphicon glyphicon-info-sign"></i> Help
+              </button>
+            </div>
           </form>
         </div>
         <div id="note-revision-snapshot-time-interval">
@@ -408,7 +418,13 @@
               <input class="form-control" id="note-revision-snapshot-time-interval-in-seconds" type="number">
             </div>
 
-            <button class="btn btn-sm">Save</button>
+            <div style="display: flex; justify-content: space-between;">
+              <button class="btn btn-sm">Save</button>
+
+              <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
+                <i class="glyphicon glyphicon-info-sign"></i> Help
+              </button>
+            </div>
           </form>
         </div>
         <div id="sync-setup">
@@ -430,7 +446,13 @@
               <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
             </div>
 
-            <button class="btn btn-sm">Save</button>
+            <div style="display: flex; justify-content: space-between;">
+              <button class="btn btn-sm">Save</button>
+
+              <button class="btn btn-sm" type="button" data-help-page="Synchronization">
+                <i class="glyphicon glyphicon-info-sign"></i> Help
+              </button>
+            </div>
           </form>
 
           <h4>Sync test</h4>
@@ -509,7 +531,15 @@
         </select>
 
         <div id="note-revision-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
-          <h3 id="note-revision-title" style="margin: 3px;"></h3>
+          <div style="display: flex">
+            <h3 id="note-revision-title" style="margin: 3px; flex-grow: 100;"></h3>
+
+            <div>
+              <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
+                <i class="glyphicon glyphicon-info-sign"></i> Help
+              </button>
+            </div>
+          </div>
 
           <div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
         </div>
@@ -526,11 +556,17 @@
     <div id="edit-tree-prefix-dialog" title="Edit tree prefix" style="display: none; padding: 20px;">
       <form id="edit-tree-prefix-form">
         <div class="form-group">
-          <label for="tree-prefix-input">Prefix</label>
+          <label for="tree-prefix-input">Prefix: </label> &nbsp;
           <input id="tree-prefix-input" style="width: 20em;"> - <span id="tree-prefix-note-title"></span>
         </div>
 
-        <button name="action" class="btn btn-sm">Save</button>
+        <div style="display: flex; justify-content: space-between;">
+          <button class="btn btn-sm">Save</button>
+
+          <button class="btn btn-sm" type="button" data-help-page="Prefix">
+            <i class="glyphicon glyphicon-info-sign"></i> Help
+          </button>
+        </div>
       </form>
     </div>
 
@@ -553,12 +589,12 @@
 
     <div id="attributes-dialog" title="Note attributes" style="display: none; padding: 20px;">
       <form data-bind="submit: save">
-        <div style="text-align: center">
+        <div style="display: flex; justify-content: space-between;">
           <button class="btn btn-large" style="width: 200px;" id="save-attributes-button" type="submit">Save changes <kbd>enter</kbd></button>
 
-          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
-
-          <a target="_blank" href="https://github.com/zadam/trilium/wiki/Attributes">Documentation on attributes</a>
+          <button class="btn btn-sm" type="button" data-help-page="Attributes">
+            <i class="glyphicon glyphicon-info-sign"></i> Help
+          </button>
         </div>
 
         <div style="height: 97%; overflow: auto">