1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-29 12:59:56 +00:00

Add floating popup to Dynannotate (#7790)

This commit is contained in:
Guang Li 2023-10-17 01:21:26 +08:00 committed by GitHub
parent e521ee2133
commit c6604c0c56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 27 deletions

View File

@ -23,6 +23,7 @@ The `<$dynannotate>` widget uses the selection tracker to support a popup that d
|filter |Filter identifying the annotation tiddlers applying to this content (see below) | |filter |Filter identifying the annotation tiddlers applying to this content (see below) |
|actions |Action string to be executed when an annotation is clicked. The variable `annotationTiddler` contains the title of the tiddler corresponding to the annotation that was clicked, and the variable `modifierKey` contains "ctrl", "shift", "ctrl-shift", "normal" according to which modifier keys were pressed | |actions |Action string to be executed when an annotation is clicked. The variable `annotationTiddler` contains the title of the tiddler corresponding to the annotation that was clicked, and the variable `modifierKey` contains "ctrl", "shift", "ctrl-shift", "normal" according to which modifier keys were pressed |
|popup |Popup state tiddler to be used to trigger a popup when an annotation is clicked | |popup |Popup state tiddler to be used to trigger a popup when an annotation is clicked |
|floating |Setting to `yes` makes the popup need to be closed explicitly. |
|search |Search text to be highlighted within the widget | |search |Search text to be highlighted within the widget |
|searchDisplay |"overlay" or "snippet" (see below) | |searchDisplay |"overlay" or "snippet" (see below) |
|searchMode |"literal" (default), "regexp", "whitespace", "words" or "some" (see below) | |searchMode |"literal" (default), "regexp", "whitespace", "words" or "some" (see below) |

View File

@ -65,7 +65,7 @@ DynannotateWidget.prototype.render = function(parent,nextSibling) {
this.domNodes.push(this.domWrapper); this.domNodes.push(this.domWrapper);
// Apply the selection tracker data to the DOM // Apply the selection tracker data to the DOM
if(!isSnippetMode) { if(!isSnippetMode) {
this.applySelectionTrackerData(); this.applySelectionTrackerData();
} }
// Render our child widgets // Render our child widgets
this.renderChildren(this.domContent,null); this.renderChildren(this.domContent,null);
@ -79,7 +79,7 @@ DynannotateWidget.prototype.render = function(parent,nextSibling) {
// Apply annotations // Apply annotations
this.applyAnnotations(); this.applyAnnotations();
// Apply search overlays // Apply search overlays
this.applySearch(); this.applySearch();
} }
} }
// Save the width of the wrapper so that we can tell when it changes // Save the width of the wrapper so that we can tell when it changes
@ -205,10 +205,11 @@ DynannotateWidget.prototype.applyAnnotations = function() {
if(self.hasAttribute("popup")) { if(self.hasAttribute("popup")) {
$tw.popup.triggerPopup({ $tw.popup.triggerPopup({
domNode: domOverlay, domNode: domOverlay,
title: self.getAttribute("popup"), title: self.getAttribute("popup"),
floating: self.getAttribute("floating"),
wiki: self.wiki wiki: self.wiki
}); });
} }
}; };
}; };
// Draw the overlay for the "target" attribute // Draw the overlay for the "target" attribute
@ -224,7 +225,7 @@ DynannotateWidget.prototype.applyAnnotations = function() {
className: "tc-dynannotation-annotation-overlay", className: "tc-dynannotation-annotation-overlay",
onclick: clickHandlerFn(null) onclick: clickHandlerFn(null)
}); });
} }
} }
// Draw the overlays for each annotation tiddler // Draw the overlays for each annotation tiddler
$tw.utils.each(this.annotationTiddlers,function(title) { $tw.utils.each(this.annotationTiddlers,function(title) {
@ -361,7 +362,7 @@ DynannotateWidget.prototype.applySnippets = function() {
if(!merged) { if(!merged) {
container = null; container = null;
} }
}); });
} }
}; };
@ -382,7 +383,7 @@ DynannotateWidget.prototype.refresh = function(changedTiddlers) {
var childrenDidRefresh = this.refreshChildren(changedTiddlers); var childrenDidRefresh = this.refreshChildren(changedTiddlers);
// Reapply the selection tracker data to the DOM // Reapply the selection tracker data to the DOM
if(changedAttributes.selection || changedAttributes.selectionPrefix || changedAttributes.selectionSuffix || changedAttributes.selectionPopup) { if(changedAttributes.selection || changedAttributes.selectionPrefix || changedAttributes.selectionSuffix || changedAttributes.selectionPopup) {
this.applySelectionTrackerData(); this.applySelectionTrackerData();
} }
// Reapply the annotations if the children refreshed or the main wrapper resized // Reapply the annotations if the children refreshed or the main wrapper resized
var wrapperWidth = this.domWrapper.offsetWidth, var wrapperWidth = this.domWrapper.offsetWidth,
@ -390,14 +391,14 @@ DynannotateWidget.prototype.refresh = function(changedTiddlers) {
oldAnnotationTiddlers = this.annotationTiddlers; oldAnnotationTiddlers = this.annotationTiddlers;
this.getAnnotationTiddlers(); this.getAnnotationTiddlers();
if(!isSnippetMode && ( if(!isSnippetMode && (
childrenDidRefresh || childrenDidRefresh ||
hasResized || hasResized ||
changedAttributes.target || changedAttributes.target ||
changedAttributes.targetPrefix || changedAttributes.targetPrefix ||
changedAttributes.targetSuffix || changedAttributes.targetSuffix ||
changedAttributes.filter || changedAttributes.filter ||
changedAttributes.actions || changedAttributes.actions ||
changedAttributes.popup || changedAttributes.popup ||
!$tw.utils.isArrayEqual(oldAnnotationTiddlers,this.annotationTiddlers) || !$tw.utils.isArrayEqual(oldAnnotationTiddlers,this.annotationTiddlers) ||
this.annotationTiddlers.find(function(title) { this.annotationTiddlers.find(function(title) {
return changedTiddlers[title]; return changedTiddlers[title];
@ -406,23 +407,23 @@ DynannotateWidget.prototype.refresh = function(changedTiddlers) {
this.applyAnnotations(); this.applyAnnotations();
} }
if(!isSnippetMode && ( if(!isSnippetMode && (
childrenDidRefresh || childrenDidRefresh ||
hasResized || hasResized ||
changedAttributes.search || changedAttributes.search ||
changedAttributes.searchMinLength || changedAttributes.searchMinLength ||
changedAttributes.searchClass || changedAttributes.searchClass ||
changedAttributes.searchMode || changedAttributes.searchMode ||
changedAttributes.searchCaseSensitive changedAttributes.searchCaseSensitive
)) { )) {
this.applySearch(); this.applySearch();
} }
if(isSnippetMode && ( if(isSnippetMode && (
childrenDidRefresh || childrenDidRefresh ||
hasResized || hasResized ||
changedAttributes.search || changedAttributes.search ||
changedAttributes.searchMinLength || changedAttributes.searchMinLength ||
changedAttributes.searchClass || changedAttributes.searchClass ||
changedAttributes.searchMode || changedAttributes.searchMode ||
changedAttributes.searchCaseSensitive changedAttributes.searchCaseSensitive
)) { )) {
this.applySnippets(); this.applySnippets();