Fossil SCM

Added fileedit-preview-updated event, for use in hooking up 3rd-party syntax highlighting to the preview. (Tested locally with highlightjs.)

stephan 2020-05-14 04:32 fileedit-ajaxify
Commit 8e293f959ab5c0fcee97734eb83c64dd38acb4cec308b52b6f93d957cc4ec283
Parent 4619c9a772bb23e…
1 file changed +11 -10
~ src/fossil.page.fileedit.js
M src/fossil.page.fileedit.js
+11 -10
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -4,12 +4,12 @@
44
 Code for the /filepage app. Requires that the fossil JS
55
 bootstrapping is complete and fossil.fetch() has been installed.
66
77
 Custom events, handled via fossil.page.addEventListener():
88
9
- - 'fileedit-file-loaded': passes on information when it loads a
10
- file, in the form of an object:
9
+ - Event 'fileedit-file-loaded': passes on information when it
10
+ loads a file, in the form of an object:
1111
1212
 {
1313
 filename: string,
1414
 checkin: UUID string,
1515
 isExe: bool,
@@ -21,10 +21,13 @@
2121
 skin-level JS in order to use a custom 3rd-party editing widget
2222
 in place of the built-in textarea, but that is as yet untested.
2323
 In order to do so the client would need to replace DOM element
2424
 #fileedit-content-editor with their custom widget.
2525
26
+ - Event 'fileedit-preview-updated': when the preview is refreshed
27
+ from the server, this event passes on the DOM element which
28
+ contains the content preview.
2629
 */
2730
 const E = (s)=>document.querySelector(s),
2831
 D = F.dom,
2932
 P = F.page;
3033
@@ -212,10 +215,11 @@
212215
 selectPreviewMode: E('#select-preview-mode select'),
213216
 selectHtmlEmsWrap: E('#select-preview-html-ems'),
214217
 selectEolWrap: E('#select-preview-html-ems'),
215218
 cbLineNumbersWrap: E('#cb-line-numbers'),
216219
 cbAutoPreview: E('#cb-preview-autoupdate > input[type=checkbox]'),
220
+ previewTarget: E('#fileedit-tab-preview-wrapper'),
217221
 cbIsExe: E('input[type=checkbox][name=exec_bit]'),
218222
 fsFileVersionDetails: E('#file-version-details'),
219223
 tabs:{
220224
 content: E('#fileedit-tab-content'),
221225
 preview: E('#fileedit-tab-preview'),
@@ -536,19 +540,15 @@
536540
537541
 Returns this object, noting that the operation is async.
538542
 */
539543
 P.preview = function f(switchToTab){
540544
 if(!affirmHasFile()) return this;
541
- if(!f.target){
542
- f.target = this.e.tabs.preview.querySelector(
543
- '#fileedit-tab-preview-wrapper'
544
- );
545
- }
546
- const self = this;
545
+ const target = this.e.previewTarget,
546
+ self = this;
547547
 const updateView = function(c){
548
- D.clearElement(f.target);
549
- if('string'===typeof c) f.target.innerHTML = c;
548
+ D.clearElement(target);
549
+ if('string'===typeof c) target.innerHTML = c;
550550
 if(switchToTab) self.tabs.switchToTab(self.e.tabs.preview);
551551
 };
552552
 return this._postPreview(this.value(), updateView);
553553
 };
554554
@@ -577,10 +577,11 @@
577577
 P.selectPreviewMode(P.previewModes[header]);
578578
 if('wiki'===header) P.baseHrefForFile();
579579
 else P.baseHrefRestore();
580580
 callback(r);
581581
 F.message('Updated preview.');
582
+ P.dispatchEvent('fileedit-preview-updated',P.e.previewTarget);
582583
 },
583584
 onerror: (e)=>{
584585
 fossil.fetch.onerror(e);
585586
 callback("Error fetching preview: "+e);
586587
 }
587588
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -4,12 +4,12 @@
4 Code for the /filepage app. Requires that the fossil JS
5 bootstrapping is complete and fossil.fetch() has been installed.
6
7 Custom events, handled via fossil.page.addEventListener():
8
9 - 'fileedit-file-loaded': passes on information when it loads a
10 file, in the form of an object:
11
12 {
13 filename: string,
14 checkin: UUID string,
15 isExe: bool,
@@ -21,10 +21,13 @@
21 skin-level JS in order to use a custom 3rd-party editing widget
22 in place of the built-in textarea, but that is as yet untested.
23 In order to do so the client would need to replace DOM element
24 #fileedit-content-editor with their custom widget.
25
 
 
 
26 */
27 const E = (s)=>document.querySelector(s),
28 D = F.dom,
29 P = F.page;
30
@@ -212,10 +215,11 @@
212 selectPreviewMode: E('#select-preview-mode select'),
213 selectHtmlEmsWrap: E('#select-preview-html-ems'),
214 selectEolWrap: E('#select-preview-html-ems'),
215 cbLineNumbersWrap: E('#cb-line-numbers'),
216 cbAutoPreview: E('#cb-preview-autoupdate > input[type=checkbox]'),
 
217 cbIsExe: E('input[type=checkbox][name=exec_bit]'),
218 fsFileVersionDetails: E('#file-version-details'),
219 tabs:{
220 content: E('#fileedit-tab-content'),
221 preview: E('#fileedit-tab-preview'),
@@ -536,19 +540,15 @@
536
537 Returns this object, noting that the operation is async.
538 */
539 P.preview = function f(switchToTab){
540 if(!affirmHasFile()) return this;
541 if(!f.target){
542 f.target = this.e.tabs.preview.querySelector(
543 '#fileedit-tab-preview-wrapper'
544 );
545 }
546 const self = this;
547 const updateView = function(c){
548 D.clearElement(f.target);
549 if('string'===typeof c) f.target.innerHTML = c;
550 if(switchToTab) self.tabs.switchToTab(self.e.tabs.preview);
551 };
552 return this._postPreview(this.value(), updateView);
553 };
554
@@ -577,10 +577,11 @@
577 P.selectPreviewMode(P.previewModes[header]);
578 if('wiki'===header) P.baseHrefForFile();
579 else P.baseHrefRestore();
580 callback(r);
581 F.message('Updated preview.');
 
582 },
583 onerror: (e)=>{
584 fossil.fetch.onerror(e);
585 callback("Error fetching preview: "+e);
586 }
587
--- src/fossil.page.fileedit.js
+++ src/fossil.page.fileedit.js
@@ -4,12 +4,12 @@
4 Code for the /filepage app. Requires that the fossil JS
5 bootstrapping is complete and fossil.fetch() has been installed.
6
7 Custom events, handled via fossil.page.addEventListener():
8
9 - Event 'fileedit-file-loaded': passes on information when it
10 loads a file, in the form of an object:
11
12 {
13 filename: string,
14 checkin: UUID string,
15 isExe: bool,
@@ -21,10 +21,13 @@
21 skin-level JS in order to use a custom 3rd-party editing widget
22 in place of the built-in textarea, but that is as yet untested.
23 In order to do so the client would need to replace DOM element
24 #fileedit-content-editor with their custom widget.
25
26 - Event 'fileedit-preview-updated': when the preview is refreshed
27 from the server, this event passes on the DOM element which
28 contains the content preview.
29 */
30 const E = (s)=>document.querySelector(s),
31 D = F.dom,
32 P = F.page;
33
@@ -212,10 +215,11 @@
215 selectPreviewMode: E('#select-preview-mode select'),
216 selectHtmlEmsWrap: E('#select-preview-html-ems'),
217 selectEolWrap: E('#select-preview-html-ems'),
218 cbLineNumbersWrap: E('#cb-line-numbers'),
219 cbAutoPreview: E('#cb-preview-autoupdate > input[type=checkbox]'),
220 previewTarget: E('#fileedit-tab-preview-wrapper'),
221 cbIsExe: E('input[type=checkbox][name=exec_bit]'),
222 fsFileVersionDetails: E('#file-version-details'),
223 tabs:{
224 content: E('#fileedit-tab-content'),
225 preview: E('#fileedit-tab-preview'),
@@ -536,19 +540,15 @@
540
541 Returns this object, noting that the operation is async.
542 */
543 P.preview = function f(switchToTab){
544 if(!affirmHasFile()) return this;
545 const target = this.e.previewTarget,
546 self = this;
 
 
 
 
547 const updateView = function(c){
548 D.clearElement(target);
549 if('string'===typeof c) target.innerHTML = c;
550 if(switchToTab) self.tabs.switchToTab(self.e.tabs.preview);
551 };
552 return this._postPreview(this.value(), updateView);
553 };
554
@@ -577,10 +577,11 @@
577 P.selectPreviewMode(P.previewModes[header]);
578 if('wiki'===header) P.baseHrefForFile();
579 else P.baseHrefRestore();
580 callback(r);
581 F.message('Updated preview.');
582 P.dispatchEvent('fileedit-preview-updated',P.e.previewTarget);
583 },
584 onerror: (e)=>{
585 fossil.fetch.onerror(e);
586 callback("Error fetching preview: "+e);
587 }
588

Keyboard Shortcuts

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