Fossil SCM

pikchrshow, wikiedit, and fileedit now all respond to ctrl-enter in their editor to refresh the preview. The latter two, on their preview tabs, respond to ctrl-enter to switch back to the editor and give it focus. It's now possible to edit, preview, and switch back to the same editing position without the mouse :).

stephan 2020-09-16 08:04 trunk
Commit a1838297f9450fce2b27d4054e094cdb82ec42634e371d585b9bc4297c73fc5a
Parent a9c54aad9c5f6e4…
3 files changed +29 +6 +30 -1
~ src/fossil.page.fileedit.js ~ src/fossil.page.pikchrshow.js ~ src/fossil.page.wikiedit.js
M src/fossil.page.fileedit.js
+29
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -688,13 +688,15 @@
688688
 P.e.taComment = P.e.taCommentSmall;
689689
 D.addClass(P.e.taCommentBig, 'hidden');
690690
 }
691691
 D.removeClass(P.e.taComment, 'hidden');
692692
 P.tabs.addCustomWidget( E('#fossil-status-bar') ).addCustomWidget(P.e.editStatus);
693
+ let currentTab/*used for ctrl-enter switch between editor and preview*/;
693694
 P.tabs.addEventListener(
694695
 /* Set up auto-refresh of the preview tab... */
695696
 'before-switch-to', function(ev){
697
+ currentTab = ev.detail;
696698
 if(ev.detail===P.e.tabs.preview){
697699
 P.baseHrefForFile();
698700
 if(P.previewNeedsUpdate && P.e.cbAutoPreview.checked) P.preview();
699701
 }else if(ev.detail===P.e.tabs.diff){
700702
 /* Work around a weird bug where the page gets wider than
@@ -718,10 +720,37 @@
718720
 /* See notes in the before-switch-to handler. */
719721
 D.addClass(P.e.diffTarget, 'hidden');
720722
 }
721723
 }
722724
 );
725
+ ////////////////////////////////////////////////////////////
726
+ // Trigger preview on Ctrl-Enter. This only works on the built-in
727
+ // editor widget, not a client-provided one.
728
+ P.e.taEditor.addEventListener('keydown',function(ev){
729
+ if(ev.ctrlKey && 13 === ev.keyCode){
730
+ ev.preventDefault();
731
+ ev.stopPropagation();
732
+ P.e.taEditor.blur(/*force change event, if needed*/);
733
+ P.tabs.switchToTab(P.e.tabs.preview);
734
+ if(!P.e.cbAutoPreview.checked){/* If NOT in auto-preview mode, trigger an update. */
735
+ P.preview();
736
+ }
737
+ }
738
+ }, false);
739
+ // If we're in the preview tab, have ctrl-enter switch back to the editor.
740
+ document.body.addEventListener('keydown',function(ev){
741
+ if(ev.ctrlKey && 13 === ev.keyCode){
742
+ if(currentTab === P.e.tabs.preview){
743
+ //ev.preventDefault();
744
+ //ev.stopPropagation();
745
+ P.tabs.switchToTab(P.e.tabs.content);
746
+ P.e.taEditor.focus(/*doesn't work for client-supplied editor widget!
747
+ And it's slow as molasses for long docs, as focus()
748
+ forces a document reflow.*/);
749
+ }
750
+ }
751
+ }, true);
723752
724753
 F.connectPagePreviewers(
725754
 P.e.tabs.preview.querySelector(
726755
 '#btn-preview-refresh'
727756
 )
728757
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -688,13 +688,15 @@
688 P.e.taComment = P.e.taCommentSmall;
689 D.addClass(P.e.taCommentBig, 'hidden');
690 }
691 D.removeClass(P.e.taComment, 'hidden');
692 P.tabs.addCustomWidget( E('#fossil-status-bar') ).addCustomWidget(P.e.editStatus);
 
693 P.tabs.addEventListener(
694 /* Set up auto-refresh of the preview tab... */
695 'before-switch-to', function(ev){
 
696 if(ev.detail===P.e.tabs.preview){
697 P.baseHrefForFile();
698 if(P.previewNeedsUpdate && P.e.cbAutoPreview.checked) P.preview();
699 }else if(ev.detail===P.e.tabs.diff){
700 /* Work around a weird bug where the page gets wider than
@@ -718,10 +720,37 @@
718 /* See notes in the before-switch-to handler. */
719 D.addClass(P.e.diffTarget, 'hidden');
720 }
721 }
722 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
723
724 F.connectPagePreviewers(
725 P.e.tabs.preview.querySelector(
726 '#btn-preview-refresh'
727 )
728
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -688,13 +688,15 @@
688 P.e.taComment = P.e.taCommentSmall;
689 D.addClass(P.e.taCommentBig, 'hidden');
690 }
691 D.removeClass(P.e.taComment, 'hidden');
692 P.tabs.addCustomWidget( E('#fossil-status-bar') ).addCustomWidget(P.e.editStatus);
693 let currentTab/*used for ctrl-enter switch between editor and preview*/;
694 P.tabs.addEventListener(
695 /* Set up auto-refresh of the preview tab... */
696 'before-switch-to', function(ev){
697 currentTab = ev.detail;
698 if(ev.detail===P.e.tabs.preview){
699 P.baseHrefForFile();
700 if(P.previewNeedsUpdate && P.e.cbAutoPreview.checked) P.preview();
701 }else if(ev.detail===P.e.tabs.diff){
702 /* Work around a weird bug where the page gets wider than
@@ -718,10 +720,37 @@
720 /* See notes in the before-switch-to handler. */
721 D.addClass(P.e.diffTarget, 'hidden');
722 }
723 }
724 );
725 ////////////////////////////////////////////////////////////
726 // Trigger preview on Ctrl-Enter. This only works on the built-in
727 // editor widget, not a client-provided one.
728 P.e.taEditor.addEventListener('keydown',function(ev){
729 if(ev.ctrlKey && 13 === ev.keyCode){
730 ev.preventDefault();
731 ev.stopPropagation();
732 P.e.taEditor.blur(/*force change event, if needed*/);
733 P.tabs.switchToTab(P.e.tabs.preview);
734 if(!P.e.cbAutoPreview.checked){/* If NOT in auto-preview mode, trigger an update. */
735 P.preview();
736 }
737 }
738 }, false);
739 // If we're in the preview tab, have ctrl-enter switch back to the editor.
740 document.body.addEventListener('keydown',function(ev){
741 if(ev.ctrlKey && 13 === ev.keyCode){
742 if(currentTab === P.e.tabs.preview){
743 //ev.preventDefault();
744 //ev.stopPropagation();
745 P.tabs.switchToTab(P.e.tabs.content);
746 P.e.taEditor.focus(/*doesn't work for client-supplied editor widget!
747 And it's slow as molasses for long docs, as focus()
748 forces a document reflow.*/);
749 }
750 }
751 }, true);
752
753 F.connectPagePreviewers(
754 P.e.tabs.preview.querySelector(
755 '#btn-preview-refresh'
756 )
757
M src/fossil.page.pikchrshow.js
+6
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -78,10 +78,16 @@
7878
 P.e.previewModeToggle,
7979
 '\u00a0',
8080
 P.e.previewCopyButton,
8181
 P.e.previewModeLabel,
8282
 P.e.markupAlignWrapper );
83
+
84
+ ////////////////////////////////////////////////////////////
85
+ // Trigger preview on Ctrl-Enter.
86
+ P.e.taContent.addEventListener('keydown',function(ev){
87
+ if(ev.ctrlKey && 13 === ev.keyCode) P.preview();
88
+ }, false);
8389
8490
 ////////////////////////////////////////////////////////////
8591
 // Setup clipboard-copy of markup/SVG...
8692
 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
8793
 P.e.previewModeLabel.addEventListener('click', ()=>P.e.previewCopyButton.click(), false);
8894
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -78,10 +78,16 @@
78 P.e.previewModeToggle,
79 '\u00a0',
80 P.e.previewCopyButton,
81 P.e.previewModeLabel,
82 P.e.markupAlignWrapper );
 
 
 
 
 
 
83
84 ////////////////////////////////////////////////////////////
85 // Setup clipboard-copy of markup/SVG...
86 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
87 P.e.previewModeLabel.addEventListener('click', ()=>P.e.previewCopyButton.click(), false);
88
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -78,10 +78,16 @@
78 P.e.previewModeToggle,
79 '\u00a0',
80 P.e.previewCopyButton,
81 P.e.previewModeLabel,
82 P.e.markupAlignWrapper );
83
84 ////////////////////////////////////////////////////////////
85 // Trigger preview on Ctrl-Enter.
86 P.e.taContent.addEventListener('keydown',function(ev){
87 if(ev.ctrlKey && 13 === ev.keyCode) P.preview();
88 }, false);
89
90 ////////////////////////////////////////////////////////////
91 // Setup clipboard-copy of markup/SVG...
92 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
93 P.e.previewModeLabel.addEventListener('click', ()=>P.e.previewCopyButton.click(), false);
94
M src/fossil.page.wikiedit.js
+30 -1
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -867,14 +867,15 @@
867867
 P.tabs = new F.TabManager(D.clearElement(P.e.tabContainer));
868868
 /* Move the status bar between the tab buttons and
869869
 tab panels. Seems to be the best fit in terms of
870870
 functionality and visibility. */
871871
 P.tabs.addCustomWidget( E('#fossil-status-bar') ).addCustomWidget(P.e.editStatus);
872
+ let currentTab/*used for ctrl-enter switch between editor and preview*/;
872873
 P.tabs.addEventListener(
873874
 /* Set up some before-switch-to tab event tasks... */
874875
 'before-switch-to', function(ev){
875
- const theTab = ev.detail, btnSlot = theTab.querySelector('.save-button-slot');
876
+ const theTab = currentTab = ev.detail, btnSlot = theTab.querySelector('.save-button-slot');
876877
 if(btnSlot){
877878
 /* Several places make sense for a save button, so we'll
878879
 move that button around to those tabs where it makes sense. */
879880
 btnSlot.parentNode.insertBefore( P.e.btnSave.parentNode, btnSlot );
880881
 btnSlot.parentNode.insertBefore( P.e.btnSaveClose.parentNode, btnSlot );
@@ -906,10 +907,38 @@
906907
 /* See notes in the before-switch-to handler. */
907908
 D.addClass(P.e.diffTarget, 'hidden');
908909
 }
909910
 }
910911
 );
912
+ ////////////////////////////////////////////////////////////
913
+ // Trigger preview on Ctrl-Enter. This only works on the built-in
914
+ // editor widget, not a client-provided one.
915
+ P.e.taEditor.addEventListener('keydown',function(ev){
916
+ if(ev.ctrlKey && 13 === ev.keyCode){
917
+ ev.preventDefault();
918
+ ev.stopPropagation();
919
+ P.e.taEditor.blur(/*force change event, if needed*/);
920
+ P.tabs.switchToTab(P.e.tabs.preview);
921
+ if(!P.e.cbAutoPreview.checked){/* If NOT in auto-preview mode, trigger an update. */
922
+ P.preview();
923
+ }
924
+ }
925
+ }, false);
926
+ // If we're in the preview tab, have ctrl-enter switch back to the editor.
927
+ document.body.addEventListener('keydown',function(ev){
928
+ if(ev.ctrlKey && 13 === ev.keyCode){
929
+ if(currentTab === P.e.tabs.preview){
930
+ //ev.preventDefault();
931
+ //ev.stopPropagation();
932
+ P.tabs.switchToTab(P.e.tabs.content);
933
+ P.e.taEditor.focus(/*doesn't work for client-supplied editor widget!
934
+ And it's slow as molasses for long docs, as focus()
935
+ forces a document reflow. */);
936
+ //console.debug("BODY ctrl-enter");
937
+ }
938
+ }
939
+ }, true);
911940
912941
 F.connectPagePreviewers(
913942
 P.e.tabs.preview.querySelector(
914943
 '#btn-preview-refresh'
915944
 )
916945
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -867,14 +867,15 @@
867 P.tabs = new F.TabManager(D.clearElement(P.e.tabContainer));
868 /* Move the status bar between the tab buttons and
869 tab panels. Seems to be the best fit in terms of
870 functionality and visibility. */
871 P.tabs.addCustomWidget( E('#fossil-status-bar') ).addCustomWidget(P.e.editStatus);
 
872 P.tabs.addEventListener(
873 /* Set up some before-switch-to tab event tasks... */
874 'before-switch-to', function(ev){
875 const theTab = ev.detail, btnSlot = theTab.querySelector('.save-button-slot');
876 if(btnSlot){
877 /* Several places make sense for a save button, so we'll
878 move that button around to those tabs where it makes sense. */
879 btnSlot.parentNode.insertBefore( P.e.btnSave.parentNode, btnSlot );
880 btnSlot.parentNode.insertBefore( P.e.btnSaveClose.parentNode, btnSlot );
@@ -906,10 +907,38 @@
906 /* See notes in the before-switch-to handler. */
907 D.addClass(P.e.diffTarget, 'hidden');
908 }
909 }
910 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
911
912 F.connectPagePreviewers(
913 P.e.tabs.preview.querySelector(
914 '#btn-preview-refresh'
915 )
916
--- src/fossil.page.wikiedit.js
+++ src/fossil.page.wikiedit.js
@@ -867,14 +867,15 @@
867 P.tabs = new F.TabManager(D.clearElement(P.e.tabContainer));
868 /* Move the status bar between the tab buttons and
869 tab panels. Seems to be the best fit in terms of
870 functionality and visibility. */
871 P.tabs.addCustomWidget( E('#fossil-status-bar') ).addCustomWidget(P.e.editStatus);
872 let currentTab/*used for ctrl-enter switch between editor and preview*/;
873 P.tabs.addEventListener(
874 /* Set up some before-switch-to tab event tasks... */
875 'before-switch-to', function(ev){
876 const theTab = currentTab = ev.detail, btnSlot = theTab.querySelector('.save-button-slot');
877 if(btnSlot){
878 /* Several places make sense for a save button, so we'll
879 move that button around to those tabs where it makes sense. */
880 btnSlot.parentNode.insertBefore( P.e.btnSave.parentNode, btnSlot );
881 btnSlot.parentNode.insertBefore( P.e.btnSaveClose.parentNode, btnSlot );
@@ -906,10 +907,38 @@
907 /* See notes in the before-switch-to handler. */
908 D.addClass(P.e.diffTarget, 'hidden');
909 }
910 }
911 );
912 ////////////////////////////////////////////////////////////
913 // Trigger preview on Ctrl-Enter. This only works on the built-in
914 // editor widget, not a client-provided one.
915 P.e.taEditor.addEventListener('keydown',function(ev){
916 if(ev.ctrlKey && 13 === ev.keyCode){
917 ev.preventDefault();
918 ev.stopPropagation();
919 P.e.taEditor.blur(/*force change event, if needed*/);
920 P.tabs.switchToTab(P.e.tabs.preview);
921 if(!P.e.cbAutoPreview.checked){/* If NOT in auto-preview mode, trigger an update. */
922 P.preview();
923 }
924 }
925 }, false);
926 // If we're in the preview tab, have ctrl-enter switch back to the editor.
927 document.body.addEventListener('keydown',function(ev){
928 if(ev.ctrlKey && 13 === ev.keyCode){
929 if(currentTab === P.e.tabs.preview){
930 //ev.preventDefault();
931 //ev.stopPropagation();
932 P.tabs.switchToTab(P.e.tabs.content);
933 P.e.taEditor.focus(/*doesn't work for client-supplied editor widget!
934 And it's slow as molasses for long docs, as focus()
935 forces a document reflow. */);
936 //console.debug("BODY ctrl-enter");
937 }
938 }
939 }, true);
940
941 F.connectPagePreviewers(
942 P.e.tabs.preview.querySelector(
943 '#btn-preview-refresh'
944 )
945

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button