{"title":"$:/plugins/tiddlywiki/dynannotate","name":"Dynannotate","description":"Dynamic content annotation","author":"JeremyRuston","core-version":">=5.0.0","list":"readme examples","dependents":"$:/plugins/tiddlywiki/dynaview","version":"5.1.22","plugin-type":"plugin","type":"application/json","tiddlers":{"$:/plugins/tiddlywiki/dynannotate/readme":{"title":"$:/plugins/tiddlywiki/dynannotate/readme","text":"The ''Dynannotate'' plugin allows annotations on textual content to be created and displayed. It has three components:\n\n* The dynannotate widget overlays clickable textual annotations, search highlights and search snippets on the content that it contains\n* The selection tracker displays a popup that tracks the selection, and keeps track of the selected text. It also tracks a prefix and suffix that can be used to disambiguate the selected text within the container\n* The `<$action-popup>` widget is used for some specialised popup switching in the demo\n\n''Note that the TiddlyWiki core plugin __Dynaview__ is required for correct operation of __Dynannotate__''\n\n!! Dynannotate Widget\n\nThe attributes of the `<$dynannotate>` widget describe annotations to be overlaid over the text contained within its child widgets. A single annotation can be directly applied using the attributes or multiple annotations can be applied by providing a filter identifying the \"annotation tiddlers\" that specify each annotation.\n\nThe content of the  `<$dynannotate>` widget should not contain HTML `<input>` or `<textarea>` text editing elements (and therefore should not contain TiddlyWiki's `<$edit-text>` widget)\n\nThe `<$dynannotate>` widget uses the selection tracker to support a popup that dynamically tracks selected text within it.\n\n!!! Attributes\n\n|!Attribute |!Description |\n|target |Optional text to be annotated |\n|targetPrefix |Optional prefix text to disambiguate the target |\n|targetSuffix |Optional suffix text to disambiguate the target |\n|filter |Filter identifying the annotation tiddlers applying to this content (see below) |\n|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 |\n|popup |Popup state tiddler to be used to trigger a popup when an annotation is clicked |\n|search |Search text to be highlighted within the widget |\n|searchDisplay |\"overlay\" or \"snippet\" (see below) |\n|searchMode |\"normal\" (default), \"regexp\" or \"whitespace\" (see below) |\n|searchMinLength |Optional minimum length of search string |\n|searchCaseSensitive |\"no\" (default) for a case insensitive search, or \"yes\" for a case sensitive search |\n|searchClass |Optional CSS class to be added to search overlays |\n|snippetContextLength |Optional length of search result contextual prefix/suffix |\n|selection |Tiddler to which the currently selected text should be dynamically saved |\n|selectionPrefix |Tiddler to which up to 50 characters preceding the currently selected text should be dynamically saved |\n|selectionSuffix |Tiddler to which up to 50 characters succeeding the currently selected text should be dynamically saved |\n|selectionPopup |Popup state tiddler to be used to trigger a popup when text is selected |\n\nThe values supported by the `searchDisplay` attribute are:\n\n* `overlay` - display search results as overlays over the contained text\n* `snippet` - display search results as a sequence of highlighted snippets, and the original text is hidden. Selecting this option therefore disables the annotation functionality\n\nThe search modes supported by the `searchMode` attribute are:\n\n* `normal` - a literal string of plain text to match\n* `regexp` - a JavaScript-style regular expression (without the quoting backslashes and flags)\n* `whitespace` - a literal string to match while normalising runs of whitespace. This allows `a. b` to match `a.  b`\n\nWhen the selection popup is triggered, the currently selected text can be found in the tiddler named in the `selection` attribute, with the disambiguating prefix and suffix in the tiddlers named in the `selectionPrefix` and `selectionPopup` tiddlers. Note that the selection text will be an empty string if the selection popup was triggered in response to a click (ie zero width selection).\n\nHere's a simple example that highlights the first occurrence of the word \"ut\" within the text contained within it:\n\n```\n<$dynannotate target=\"ut\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum\n</$dynannotate>\n```\n\nA prefix and/or suffix can be specified to disambiguate the annotation. For example, here we target the second occurrence of the word \"ut\":\n\n```\n<$dynannotate target=\"ut\" targetPrefix=\"ullamco laboris nisi \" targetSuffix=\" aliquip ex ea commodo consequat\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum\n</$dynannotate>\n```\n\nThe widget works by scanning the rendered text of its content, so it works even if the text is built dynamically:\n\n```\n<$dynannotate target=\"HelloThere\">\n<<list-links \"[tag[Work]]\">>\n</$dynannotate>\n```\n\n!!! Annotation Tiddlers\n\nAn annotation tiddler is a tiddler describing an annotation to be overlaid over another tiddler. Their fields are used as follows:\n\n|!Field |!Description |\n|title |By convention the prefix `$:/annotations/<username>/` is used, but any title can be used |\n|text |The text of the annotation |\n|created, creator, modified, modifier |As per TiddlyWiki normal behaviour |\n|annotate-tiddler |The title of the target tiddler being annotated (optional, see below) |\n|annotate-text |The text being annotated in the target tiddler |\n|annotate-prefix |Optional prefix to disambiguate the target annotation |\n|annotate-suffix |Optional suffix to disambiguate the target annotation |\n|annotate-colour |CSS colour for the annotation (defaults to `rgba(255,255,0,0.3)`) |\n|annotate-blend-mode |CSS [[mix blend mode|https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode]] for the annotation (defaults to `multiply`) |\n\nNote that using the `annotate-tiddler` field to associate an annotation with the annotated tiddler is a lightweight convention employed by the examples; it isn't actually required by any of the JavaScript code. Thus authors can experiment with other techniques for recording the association.\n\n!! Selection Tracker\n\nThe selection tracker is incorporated within the `<$dynannotate>` widget, but it can be used independently for specialised applications.\n\nEach selection container is marked with the class `tc-dynannotate-selection-container`, and should contain the following attributes:\n\n* `data-annotation-selection-save`: title of tiddler to which the selected text should be saved\n* `data-annotation-selection-prefix-save`: title of tiddler to which up to 50 characters preceding the currently selected text should be dynamically saved\n* `data-annotation-selection-suffix-save`: title of tiddler to which up to 50 characters succeeding the currently selected text should be dynamically saved\n* `data-annotation-selection-popup`: title of state tiddler used to trigger the selection popup\n\nNotes:\n\n* The selection popup will disappear if the selection is cancelled; this will happen if the user clicks on any other element apart than a button. Thus it is not possible to have any interactive controls within the popup apart from buttons\n\n"},"$:/plugins/tiddlywiki/dynannotate/examples/combined":{"title":"$:/plugins/tiddlywiki/dynannotate/examples/combined","tags":"$:/tags/dynannotateExamples","caption":"Combined","text":"\\define click-annotation-actions()\n<$action-setfield $tiddler=\"$:/temp/dynannotate/demo/annotation-title\" $value=<<annotationTiddler>>/>\n\\end\n\n\\define create-annotation-actions()\n<$action-createtiddler\n\t$basetitle=\"$:/plugins/tiddlywiki/dynannotate/demo-annotation\"\n\t$savetitle={{{ [<chunk>addprefix[$:/state/dynannotate/temp-save-title/]] }}}\n\tannotate-tiddler=<<chunk>>\n\tannotate-text=<<text>>\n\tannotate-prefix=<<prefix>>\n\tannotate-suffix=<<suffix>>\n\tannotate-colour=<<colour>>\n/>\n<$set name=\"popup-coords\" value={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]get[text]] }}}>\n<$action-deletetiddler $tiddler={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]] }}}/>\n<$action-setfield $tiddler=\"$:/temp/dynannotate/demo/annotation-title\" $value={{{ [<chunk>addprefix[$:/state/dynannotate/temp-save-title/]get[text]] }}}/>\n<$action-popup $state={{{ [<chunk>addprefix[$:/state/dynannotate/popup-annotation/]] }}} $coords=<<popup-coords>>/>\n</$set>\n\\end\n\n<div class=\"tc-dynannotation-example-info\">\n\nThis example combines many of the features of the dynannotate plugin:\n\n* using annotation tiddlers to store the details of each annotation\n* triggering actions when the annotations are clicked\n* attaching a popup to the annotations\n* tracking the selection with another popup\n\nSee the [[source|$:/plugins/tiddlywiki/dynannotate/examples/combined]] for details\n\n</div>\n\nSearch: <$edit-text tiddler=\"$:/temp/search\" tag=\"input\"/>\n\n<$list filter=\"[all[tiddlers+shadows]tag[DynannotateDemo]sort[title]]\" variable=\"chunk\">\n<div style=\"position:relative;\"><!-- Needed for the popups to work -->\n<$dynannotate\n\tfilter=\"[all[shadows+tiddlers]!has[draft.of]annotate-tiddler<chunk>]\"\n\tactions=<<click-annotation-actions>>\n\tpopup={{{ [<chunk>addprefix[$:/state/dynannotate/popup-annotation/]] }}}\n\tselection={{{ [<chunk>addprefix[$:/state/dynannotate/selection/]] }}}\n\tselectionPrefix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-prefix/]] }}}\n\tselectionSuffix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-suffix/]] }}}\n\tselectionPopup={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]] }}}\n\tsearch={{$:/temp/search}}\n\tsearchClass=\"tc-dynannotation-search-overlay-blurred\"\n\tsearchMinLength={{$:/config/Search/MinLength}}\n>\n<$transclude tiddler=<<chunk>> mode=\"block\"/>\n</$dynannotate>\n<$reveal type=\"popup\" state={{{ [<chunk>addprefix[$:/state/dynannotate/popup-annotation/]] }}} position=\"belowright\" animate=\"yes\" retain=\"yes\" style=\"overflow-y:hidden;\">\n<div class=\"tc-drop-down-wrapper\">\n<div class=\"tc-drop-down tc-popup-keep\" style=\"max-width:550px;white-space: normal;overflow-y:hidden;\">\n<$tiddler tiddler={{$:/temp/dynannotate/demo/annotation-title}}>\n<p>\n<h2>\nThis is an annotation\n</h2>\n</p>\n<p>\nThe annotation is stored in the tiddler:\n</p>\n<p>\n<$link><$view field=\"title\"/></$link>\n</p>\n<p>\nThe annotated text is ''<$view field=\"annotate-text\"/>''.\n</p>\n<p>\nAnnotation Colour:\n<$macrocall $name='colour-picker' actions=\"\"\"\n<$action-setfield $field=\"annotate-colour\" $value=<<colour-picker-value>>/>\n\"\"\"/>\n</p>\n</$tiddler>\n</div>\n</div>\n</$reveal>\n<$reveal type=\"popup\" state={{{ [<chunk>addprefix[$:/state/dynannotate/popup-selection/]] }}} position=\"belowright\" animate=\"yes\" retain=\"yes\" style=\"overflow-y:hidden;\">\n<div class=\"tc-drop-down-wrapper\">\n<div class=\"tc-drop-down tc-popup-keep\" style=\"max-width:550px;white-space:normal;\">\n<$vars\n\ttext={{{ [<chunk>addprefix[$:/state/dynannotate/selection/]get[text]] }}}\n\tprefix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-prefix/]get[text]] }}}\n\tsuffix={{{ [<chunk>addprefix[$:/state/dynannotate/selection-suffix/]get[text]] }}}\n\tcolour={{{ [<chunk>addprefix[$:/state/dynannotate/annotation-colour/]get[text]] }}}\n>\n<$button actions=<<create-annotation-actions>>>\nCreate annotation\n</$button>\n<p>\nText: <$text text=<<text>>/>\n</p>\n<p>\nPrefix: <$text text=<<prefix>>/>\n</p>\n<p>\nSuffix: <$text text=<<suffix>>/>\n</p>\n</$vars>\n</div>\n</div>\n</$reveal>\n</div>\n</$list>\n"},"$:/plugins/tiddlywiki/dynannotate/example-annotation-1":{"title":"$:/plugins/tiddlywiki/dynannotate/example-annotation-1","annotate-tiddler":"$:/plugins/tiddlywiki/dynannotate/example-text-1","annotate-text":"memory is transitory.  Yet the speed of action","annotate-colour":"SkyBlue","annotate-blend-mode":"multiply"},"$:/plugins/tiddlywiki/dynannotate/example-annotation-2":{"title":"$:/plugins/tiddlywiki/dynannotate/example-annotation-2","annotate-tiddler":"$:/plugins/tiddlywiki/dynannotate/example-text-3","annotate-text":"It needs a name, and to coin one at random, \"memex\" will do","annotate-colour":"rgba(255,0,255,0.45)","annotate-blend-mode":"multiply"},"$:/plugins/tiddlywiki/dynannotate/example-annotation-3":{"title":"$:/plugins/tiddlywiki/dynannotate/example-annotation-3","annotate-tiddler":"$:/plugins/tiddlywiki/dynannotate/example-text-5","annotate-text":"it would take him hundreds of years to fill the repository","annotate-colour":"#fff","annotate-blend-mode":"difference"},"$:/plugins/tiddlywiki/dynannotate/example-annotation-4":{"title":"$:/plugins/tiddlywiki/dynannotate/example-annotation-4","annotate-tiddler":"$:/plugins/tiddlywiki/dynannotate/example-text-1","annotate-text":"that","annotate-prefix":"It has other characteristics, of course; trails ","annotate-suffix":" are not frequently followed are prone to fade","annotate-colour":"rgba(255,0,255,0.45)","annotate-blend-mode":"difference","text":"(This tiddler is in .json format so that we can have field values that start with a whitespace"},"$:/plugins/tiddlywiki/dynannotate/example-text-1":{"title":"$:/plugins/tiddlywiki/dynannotate/example-text-1","source":"https://www.w3.org/History/1945/vbush/vbush.txt","tags":"DynannotateDemo","text":"The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain.  It has other characteristics, of course; trails that are not frequently followed are prone to fade, items are not fully permanent, memory is ''transitory''.  Yet the speed of action, the intricacy of trails, the detail of mental pictures, is awe-inspiring beyond all else in nature."},"$:/plugins/tiddlywiki/dynannotate/example-text-2":{"title":"$:/plugins/tiddlywiki/dynannotate/example-text-2","source":"https://www.w3.org/History/1945/vbush/vbush.txt","tags":"DynannotateDemo","text":"Man cannot hope fully to duplicate this mental process artificially, but he certainly ought to be able to learn from it.  In minor ways he may even improve, for his records have relative permanency.  The first idea, however, to be drawn from the analogy concerns selection. Selection by association, rather than by indexing, may yet be mechanized.  One cannot hope thus to equal the speed and flexibility with which the mind follows an associative trail, but it should be possible to beat the mind decisively in regard to the permanence and clarity of the items resurrected from storage."},"$:/plugins/tiddlywiki/dynannotate/example-text-3":{"title":"$:/plugins/tiddlywiki/dynannotate/example-text-3","source":"https://www.w3.org/History/1945/vbush/vbush.txt","tags":"DynannotateDemo","text":"Consider a future device for individual use, which is a sort of mechanized private file and library.  It needs a name, and to coin one at random, \"memex\" will do.  A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility.  It is an enlarged intimate supplement to his memory."},"$:/plugins/tiddlywiki/dynannotate/example-text-4":{"title":"$:/plugins/tiddlywiki/dynannotate/example-text-4","source":"https://www.w3.org/History/1945/vbush/vbush.txt","tags":"DynannotateDemo","text":"It consists of a desk, and while it can presumably be operated from a distance, it is primarily the piece of furniture at which he works. On the top are slanting translucent screens, on which material can be projected for convenient reading.  There is a keyboard, and sets of buttons and levers.  Otherwise it looks like an ordinary desk."},"$:/plugins/tiddlywiki/dynannotate/example-text-5":{"title":"$:/plugins/tiddlywiki/dynannotate/example-text-5","source":"https://www.w3.org/History/1945/vbush/vbush.txt","tags":"DynannotateDemo","text":"In one end is the stored material.  The matter of bulk is well taken care of by improved microfilm.  Only a small part of the interior of the memex is devoted to storage, the rest to mechanism.  Yet if the user inserted 5000 pages of material a day it would take him hundreds of years to fill the repository, so he can be profligate and enter material freely."},"$:/plugins/tiddlywiki/dynannotate/example-text-6":{"title":"$:/plugins/tiddlywiki/dynannotate/example-text-6","source":"https://www.w3.org/History/1945/vbush/vbush.txt","tags":"DynannotateDemo","text":"Most of the memex contents are purchased on microfilm ready for insertion.  Books of all sorts, pictures, current periodicals, newspapers, are thus obtained and dropped into place.  Business correspondence takes the same path.  And there is provision for direct entry.  On the top of the memex is a transparent platen.  On this are placed longhand notes, photographs, memoranda, all sort of things. When one is in place, the depression of a lever causes it to be photographed onto the next blank space in a section of the memex film, dry photography being employed."},"$:/plugins/tiddlywiki/dynannotate/example-text-7":{"title":"$:/plugins/tiddlywiki/dynannotate/example-text-7","source":"https://www.w3.org/History/1945/vbush/vbush.txt","tags":"DynannotateDemo","text":"There is, of course, provision for consultation of the record by the usual scheme of indexing.  If the user wishes to consult a certain book, he taps its code on the keyboard, and the title page of the book promptly appears before him, projected onto one of his viewing positions.  Frequently-used codes are mnemonic, so that he seldom consults his code book; but when he does, a single tap of a key projects it for his use.  Moreover, he has supplemental levers.  On deflecting one of these levers to the right he runs through the book before him, each page in turn being projected at a speed which just allows a recognizing glance at each.  If he deflects it further to the right, he steps through the book 10 pages at a time; still further at 100 pages at a time.  Deflection to the left gives him the same control backwards."},"$:/plugins/tiddlywiki/dynannotate/example-text-8":{"title":"$:/plugins/tiddlywiki/dynannotate/example-text-8","source":"https://www.w3.org/History/1945/vbush/vbush.txt","tags":"DynannotateDemo","text":"A special button transfers him immediately to the first page of the index.  Any given book of his library can thus be called up and consulted with far greater facility than if it were taken from a shelf.  As he has several projection positions, he can leave one item in position while he calls up another.  He can add marginal notes and comments, taking advantage of one possible type of dry photography, and it could even be arranged so that he can do this by a stylus scheme, such as is now employed in the telautograph seen in railroad waiting rooms, just as though he had the physical page before him."},"$:/plugins/tiddlywiki/dynannotate/examples":{"title":"$:/plugins/tiddlywiki/dynannotate/examples","text":"<<tabs \"[all[tiddlers+shadows]tag[$:/tags/dynannotateExamples]!has[draft.of]]\" \"$:/plugins/tiddlywiki/dynannotate/examples/snippets\">>\n\n"},"$:/plugins/tiddlywiki/dynannotate/examples/simple":{"title":"$:/plugins/tiddlywiki/dynannotate/examples/simple","tags":"$:/tags/dynannotateExamples","caption":"Simple","text":"\\define show-example(example)\n<$codeblock code=<<__example__>>/>\n\n//''Displays as:''//\n\n$example$\n\\end\n\n<div class=\"tc-dynannotation-example-info\">\n\n!! Simple annotation\n\nWe use the `target*` attributes to specify a target string for the annotation and optionally a prefix and suffix for disambiguating multiple occurances.\n\n</div>\n\n<<show-example \"\"\"\n<$dynannotate\n\ttarget=\"the\"\n\ttargetPrefix=\"Yet \"\n\ttargetSuffix=\" speed\"\n>\n<$transclude tiddler=\"$:/plugins/tiddlywiki/dynannotate/example-text-1\" mode=\"block\"/>\n</$dynannotate>\n\"\"\">>\n\n<div class=\"tc-dynannotation-example-info\">\n\n!! Plain text searching\n\nWe use the `search` attribute to specify a search string for highlighting:\n\n</div>\n\n<<show-example \"\"\"\n<$dynannotate\n\tsearch=\"the\"\n>\n<$transclude tiddler=\"$:/plugins/tiddlywiki/dynannotate/example-text-1\" mode=\"block\"/>\n</$dynannotate>\n\"\"\">>\n\n<div class=\"tc-dynannotation-example-info\">\n\n!! Regular expression searching\n\nWe use the `mode` attribute set to `regexp` to highlight matches of a regular expression:\n\n</div>\n\n<<show-example \"\"\"\n<$dynannotate\n\tsearch=\"the|an\"\n\tsearchMode=\"regexp\"\n\tsearchClass=\"tc-dynannotation-search-overlay-blurred\"\n>\n<$transclude tiddler=\"$:/plugins/tiddlywiki/dynannotate/example-text-1\" mode=\"block\"/>\n</$dynannotate>\n\"\"\">>\n\n<div class=\"tc-dynannotation-example-info\">\n\n!! Normalised whitespace searching\n\nWe use the `mode` attribute set to `whitespace` to search for a string with whitespace normalised (ie runs of whitespace are collapsed to a single space for matching purposes):\n\n</div>\n\n<<show-example \"\"\"\n<$dynannotate\n\tsearch=\"does  not     work that way.     It operates\"\n\tsearchMode=\"whitespace\"\n\tsearchClass=\"tc-dynannotation-search-overlay-animated\"\n>\n<$transclude tiddler=\"$:/plugins/tiddlywiki/dynannotate/example-text-1\" mode=\"block\"/>\n</$dynannotate>\n\"\"\">>\n\n<div class=\"tc-dynannotation-example-info\">\n\n!! Using annotation tiddlers\n\nAnnotation tiddlers can be used to describe annotations. This example references the following annotation tiddlers:\n\n</div>\n\n<<list-links \"[all[shadows+tiddlers]annotate-tiddler[$:/plugins/tiddlywiki/dynannotate/example-text-1]]\">>\n\n<<show-example \"\"\"\n<$dynannotate\n\tfilter=\"[all[shadows+tiddlers]annotate-tiddler[$:/plugins/tiddlywiki/dynannotate/example-text-1]]\"\n>\n<$transclude tiddler=\"$:/plugins/tiddlywiki/dynannotate/example-text-1\" mode=\"block\"/>\n</$dynannotate>\n\"\"\">>\n\n"},"$:/plugins/tiddlywiki/dynannotate/examples/snippets":{"title":"$:/plugins/tiddlywiki/dynannotate/examples/snippets","tags":"$:/tags/dynannotateExamples","caption":"Snippets","text":"\\define show-example(example)\n<$codeblock code=<<__example__>>/>\n\n//''Displays as:''//\n\n$example$\n\\end\n\n<div class=\"tc-dynannotation-example-info\">\n\n!! Search result snippets\n\nThe `searchDisplay` attribute can be set to `snippet` (instead of the default `overlay`) in order to display contextual snippets around search results. \n\n</div>\n\n<<show-example \"\"\"\n<$dynannotate\n\tsearch=\"the\"\n\tsearchDisplay=\"snippet\"\n><$transclude tiddler=\"$:/plugins/tiddlywiki/dynannotate/example-text-1\" mode=\"block\"/>\n</$dynannotate>\n\"\"\">>\n\n<div class=\"tc-dynannotation-example-info\">\n\n!! Multiple search result snippets\n\nThis example searches across multiple tiddlers and shows snippets for those tiddlers that match.\n\n</div>\n\n<$macrocall $name=\"show-example\" example=\"\"\"\nSearch: <$edit-text tiddler=\"$:/temp/search\" tag=\"input\"/>\n<$list filter=\"[all[tiddlers+shadows]tag[DynannotateDemo]search:text{$:/temp/search}sort[title]]\">\n<dl>\n<dt>\n<$link>\n<$text text=<<currentTiddler>>/>\n</$link>\n</dt>\n<dd>\n<$dynannotate\n\tsearch={{$:/temp/search}}\n\tsearchMode=\"whitespace\"\n\tsearchDisplay=\"snippet\"\n><$transclude tiddler=<<currentTiddler>> mode=\"block\"/>\n</$dynannotate>\n</dd>\n</dl>\n</$list>\n\"\"\"/>\n"},"$:/plugins/tiddlywiki/dynannotate/dynannotate.js":{"title":"$:/plugins/tiddlywiki/dynannotate/dynannotate.js","text":"/*\\\ntitle: $:/plugins/tiddlywiki/dynannotate/dynannotate.js\ntype: application/javascript\nmodule-type: widget\n\nDynannotate widget\n\n\\*/\n(function(){\n\n/*jslint node: true, browser: true */\n/*global $tw: false */\n\"use strict\";\n\nvar TextMap = require(\"$:/plugins/tiddlywiki/dynannotate/textmap.js\").TextMap;\n\nvar Widget = require(\"$:/core/modules/widgets/widget.js\").widget;\n\nvar DynannotateWidget = function(parseTreeNode,options) {\n\tthis.initialise(parseTreeNode,options);\n};\n\n/*\nInherit from the base widget class\n*/\nDynannotateWidget.prototype = new Widget();\n\n/*\nRender this widget into the DOM\n*/\nDynannotateWidget.prototype.render = function(parent,nextSibling) {\n\tvar self = this;\n\tthis.parentDomNode = parent;\n\tthis.computeAttributes();\n\tthis.execute();\n\t// Create our DOM nodes\n\tvar isSnippetMode = this.isSnippetMode();\n\tthis.domContent = $tw.utils.domMaker(\"div\",{\n\t\t\"class\": \"tc-dynannotation-selection-container\"\n\t});\n\tif(isSnippetMode) {\n\t\tthis.domContent.setAttribute(\"hidden\",\"hidden\");\t\t\n\t}\n\tthis.domAnnotations = $tw.utils.domMaker(\"div\",{\n\t\t\"class\": \"tc-dynannotation-annotation-wrapper\"\n\t});\n\tthis.domSnippets = $tw.utils.domMaker(\"div\",{\n\t\t\"class\": \"tc-dynannotation-snippet-wrapper\"\n\t});\n\tthis.domSearches = $tw.utils.domMaker(\"div\",{\n\t\t\"class\": \"tc-dynannotation-search-wrapper\"\n\t});\n\tthis.domWrapper = $tw.utils.domMaker(\"div\",{\n\t\t\"class\": \"tc-dynannotation-wrapper\",\n\t\tchildren: [this.domContent,this.domAnnotations,this.domSnippets,this.domSearches]\n\t})\n\tparent.insertBefore(this.domWrapper,nextSibling);\n\tthis.domNodes.push(this.domWrapper);\n\t// Apply the selection tracker data to the DOM\n\tif(!isSnippetMode) {\n\t\tthis.applySelectionTrackerData();\t\t\n\t}\n\t// Render our child widgets\n\tthis.renderChildren(this.domContent,null);\n\tif(isSnippetMode) {\n\t\t// Apply search snippets\n\t\tthis.applySnippets();\n\t} else {\n\t\t// Get the list of annotation tiddlers\n\t\tthis.getAnnotationTiddlers();\n\t\t// Apply annotations\n\t\tthis.applyAnnotations();\n\t\t// Apply search overlays\n\t\tthis.applySearch();\t\t\n\t}\n\t// Save the width of the wrapper so that we can tell when it changes\n\tthis.wrapperWidth = this.domWrapper.offsetWidth;\n};\n\n/*\nCompute the internal state of the widget\n*/\nDynannotateWidget.prototype.execute = function() {\n\t// Make the child widgets\n\tthis.makeChildWidgets();\n};\n\nDynannotateWidget.prototype.isSnippetMode = function() {\n\treturn this.getAttribute(\"searchDisplay\") === \"snippet\";\n}\n\n/*\nSave the data attributes required by the selection tracker\n*/\nDynannotateWidget.prototype.applySelectionTrackerData = function() {\n\tif(this.hasAttribute(\"selection\")) {\n\t\tthis.domContent.setAttribute(\"data-annotation-selection-save\",this.getAttribute(\"selection\"));\n\t} else {\n\t\tthis.domContent.removeAttribute(\"data-annotation-selection-save\");\n\t}\n\tif(this.hasAttribute(\"selectionPopup\")) {\n\t\tthis.domContent.setAttribute(\"data-annotation-selection-popup\",this.getAttribute(\"selectionPopup\"));\n\t} else {\n\t\tthis.domContent.removeAttribute(\"data-annotation-selection-popup\");\n\t}\n\tif(this.hasAttribute(\"selectionPrefix\")) {\n\t\tthis.domContent.setAttribute(\"data-annotation-selection-prefix-save\",this.getAttribute(\"selectionPrefix\"));\n\t} else {\n\t\tthis.domContent.removeAttribute(\"data-annotation-selection-prefix-save\");\n\t}\n\tif(this.hasAttribute(\"selectionSuffix\")) {\n\t\tthis.domContent.setAttribute(\"data-annotation-selection-suffix-save\",this.getAttribute(\"selectionSuffix\"));\n\t} else {\n\t\tthis.domContent.removeAttribute(\"data-annotation-selection-suffix-save\");\n\t}\n};\n\n/*\nCreate overlay dom elements to cover a specified range\n\noptions include:\n\tstartNode: Start node of range\n\tstartOffset: Start offset of range\n\tendNode: End node of range\n\tendOffset: End offset of range\n\tclassName: Optional classname for the overlay\n\twrapper: Wrapper dom node for the overlays\n\tcolour: Optional CSS colour for the overlay\n\tblendMode: Optional CSS mix blend mode for the overlay\n\tonclick: Optional click event handler for the overlay\n*/\nDynannotateWidget.prototype.createOverlay = function(options) {\n\tvar self = this;\n\t// Create a range covering the text\n\tvar range = this.document.createRange();\n\trange.setStart(options.startNode,options.startOffset);\n\trange.setEnd(options.endNode,options.endOffset);\n\t// Get the position of the range\n\tvar rects = range.getClientRects();\n\tif(rects) {\n\t\t// Paint each rectangle\n\t\tvar parentRect = this.domContent.getBoundingClientRect();\n\t\t$tw.utils.each(rects,function(rect) {\n\t\t\tvar domOverlay = self.document.createElement(\"div\");\n\t\t\tdomOverlay.className = (options.className || \"\") + \" tc-dynaview-request-refresh-on-resize\";\n\t\t\tdomOverlay.style.top = (rect.top - parentRect.top) + \"px\";\n\t\t\tdomOverlay.style.left = (rect.left - parentRect.left) + \"px\";\n\t\t\tdomOverlay.style.width = rect.width + \"px\";\n\t\t\tdomOverlay.style.height = rect.height + \"px\";\n\t\t\tdomOverlay.style.backgroundColor = options.colour;\n\t\t\tdomOverlay.style.mixBlendMode = options.blendMode;\n\t\t\tif(options.onclick) {\n\t\t\t\tdomOverlay.addEventListener(\"click\",function(event) {\n\t\t\t\t\tvar modifierKey = event.ctrlKey && !event.shiftKey ? \"ctrl\" : event.shiftKey && !event.ctrlKey ? \"shift\" : event.ctrlKey && event.shiftKey ? \"ctrl-shift\" : \"normal\";\n\t\t\t\t\toptions.onclick(event,domOverlay,modifierKey);\n\t\t\t\t},false);\n\t\t\t}\n\t\t\toptions.wrapper.appendChild(domOverlay);\n\t\t});\n\t}\n};\n\nDynannotateWidget.prototype.getAnnotationTiddlers = function() {\n\tthis.annotationTiddlers = this.wiki.filterTiddlers(this.getAttribute(\"filter\",\"\"),this);\n};\n\nDynannotateWidget.prototype.removeAnnotations = function() {\n\twhile(this.domAnnotations.hasChildNodes()) {\n\t\tthis.domAnnotations.removeChild(this.domAnnotations.firstChild);\n\t}\n};\n\nDynannotateWidget.prototype.applyAnnotations = function() {\n\tvar self = this;\n\t// Remove any previous annotation overlays\n\tthis.removeAnnotations();\n\t// Don't do anything if there are no annotations to apply\n\tif(this.annotationTiddlers.length === 0 && !this.hasAttribute(\"target\")) {\n\t\treturn;\n\t}\n\t// Build the map of the text content\n\tvar textMap = new TextMap(this.domContent);\n\t// We'll dynamically build the click event handler so that we can reuse it\n\tvar clickHandlerFn = function(title) {\n\t\treturn function(event,domOverlay,modifierKey) {\n\t\t\tself.invokeActionString(self.getAttribute(\"actions\"),self,event,{annotationTiddler: title, modifier: modifierKey});\n\t\t\tif(self.hasAttribute(\"popup\")) {\n\t\t\t\t$tw.popup.triggerPopup({\n\t\t\t\t\tdomNode: domOverlay,\n\t\t\t\t\ttitle: self.getAttribute(\"popup\"),\n\t\t\t\t\twiki: self.wiki\n\t\t\t\t});\n\t\t\t}\t\t\t\n\t\t};\n\t};\n\t// Draw the overlay for the \"target\" attribute\n\tif(this.hasAttribute(\"target\")) {\n\t\tvar result = textMap.findText(this.getAttribute(\"target\"),this.getAttribute(\"targetPrefix\"),this.getAttribute(\"targetSuffix\"));\n\t\tif(result) {\n\t\t\tthis.createOverlay({\n\t\t\t\tstartNode: result.startNode,\n\t\t\t\tstartOffset: result.startOffset,\n\t\t\t\tendNode: result.endNode,\n\t\t\t\tendOffset: result.endOffset,\n\t\t\t\twrapper: self.domAnnotations,\n\t\t\t\tclassName: \"tc-dynannotation-annotation-overlay\",\n\t\t\t\tonclick: clickHandlerFn(null)\n\t\t\t});\n\t\t}\t\t\n\t}\n\t// Draw the overlays for each annotation tiddler\n\t$tw.utils.each(this.annotationTiddlers,function(title) {\n\t\tvar tiddler = self.wiki.getTiddler(title),\n\t\t\tannotateText = tiddler.fields[\"annotate-text\"],\n\t\t\tannotatePrefix = tiddler.fields[\"annotate-prefix\"],\n\t\t\tannotateSuffix = tiddler.fields[\"annotate-suffix\"];\n\t\tif(tiddler && annotateText) {\n\t\t\tvar result = textMap.findText(annotateText,annotatePrefix,annotateSuffix);\n\t\t\tif(result) {\n\t\t\t\tself.createOverlay({\n\t\t\t\t\tstartNode: result.startNode,\n\t\t\t\t\tstartOffset: result.startOffset,\n\t\t\t\t\tendNode: result.endNode,\n\t\t\t\t\tendOffset: result.endOffset,\n\t\t\t\t\twrapper: self.domAnnotations,\n\t\t\t\t\tclassName: \"tc-dynannotation-annotation-overlay\",\n\t\t\t\t\tcolour: tiddler.fields[\"annotate-colour\"],\n\t\t\t\t\tblendMode: tiddler.fields[\"annotate-blend-mode\"],\n\t\t\t\t\tonclick: clickHandlerFn(title)\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t});\n};\n\nDynannotateWidget.prototype.removeSearch = function() {\n\twhile(this.domSearches.hasChildNodes()) {\n\t\tthis.domSearches.removeChild(this.domSearches.firstChild);\n\t}\n};\n\nDynannotateWidget.prototype.applySearch = function() {\n\tvar self = this;\n\t// Remove any previous search overlays\n\tthis.removeSearch();\n\t// Gather parameters\n\tvar searchString = this.getAttribute(\"search\",\"\"),\n\t\tsearchMode = this.getAttribute(\"searchMode\"),\n\t\tsearchCaseSensitive = this.getAttribute(\"searchCaseSensitive\",\"yes\") === \"yes\",\n\t\tsearchMinLength = parseInt(this.getAttribute(\"searchMinLength\",\"1\"),10) || 1;\n\t// Bail if search string too short\n\tif(searchString.length < searchMinLength) {\n\t\treturn;\n\t}\n\t// Build the map of the text content\n\tvar textMap = new TextMap(this.domContent);\n\t// Search for the string\n\tvar matches = textMap.search(this.getAttribute(\"search\",\"\"),{\n\t\tmode: this.getAttribute(\"searchMode\"),\n\t\tcaseSensitive: this.getAttribute(\"searchCaseSensitive\",\"yes\") === \"yes\"\n\t});\n\t// Create overlays for each match\n\t$tw.utils.each(matches,function(match) {\n\t\tself.createOverlay({\n\t\t\tstartNode: match.startNode,\n\t\t\tstartOffset: match.startOffset,\n\t\t\tendNode: match.endNode,\n\t\t\tendOffset: match.endOffset,\n\t\t\twrapper: self.domSearches,\n\t\t\tclassName: \"tc-dynannotation-search-overlay \" + self.getAttribute(\"searchClass\",\"\")\n\t\t});\n\t});\n};\n\nDynannotateWidget.prototype.removeSnippets = function() {\n\twhile(this.domSnippets.hasChildNodes()) {\n\t\tthis.domSnippets.removeChild(this.domSnippets.firstChild);\n\t}\n};\n\nDynannotateWidget.prototype.applySnippets = function() {\n\tvar self = this,\n\t\tcontextLength = parseInt(this.getAttribute(\"snippetContextLength\",\"33\"),10) || 0;\n\t// Build the map of the text content\n\tvar textMap = new TextMap(this.domContent);\n\t// Remove any previous snippets\n\tthis.removeSnippets();\n\t// Gather parameters\n\tvar searchString = this.getAttribute(\"search\",\"\"),\n\t\tsearchMode = this.getAttribute(\"searchMode\"),\n\t\tsearchCaseSensitive = this.getAttribute(\"searchCaseSensitive\",\"yes\") === \"yes\",\n\t\tsearchMinLength = parseInt(this.getAttribute(\"searchMinLength\",\"1\"),10) || 1;\n\t// Build the map of the text content\n\tvar textMap = new TextMap(this.domContent);\n\t// Search for the string\n\tvar matches = textMap.search(this.getAttribute(\"search\",\"\"),{\n\t\tmode: this.getAttribute(\"searchMode\"),\n\t\tcaseSensitive: this.getAttribute(\"searchCaseSensitive\",\"no\") === \"yes\"\n\t});\n\t// Output a snippet for each match\n\tif(matches && matches.length > 0) {\n\t\tvar merged = false, // Keep track of whether the context of the previous match merges into this one\n\t\t\tellipsis = String.fromCharCode(8230),\n\t\t\tcontainer = null; // Track the container so that we can reuse the same container for merged matches\n\t\t$tw.utils.each(matches,function(match,index) {\n\t\t\t// Create a container if we're not reusing it\n\t\t\tif(!container) {\n\t\t\t\tcontainer = $tw.utils.domMaker(\"div\",{\n\t\t\t\t\t\"class\": \"tc-dynannotate-snippet\"\n\t\t\t\t});\n\t\t\t\tself.domSnippets.appendChild(container);\n\t\t\t}\n\t\t\t// Output the preceding context if it wasn't merged into the previous match\n\t\t\tif(!merged) {\n\t\t\t\tcontainer.appendChild($tw.utils.domMaker(\"span\",{\n\t\t\t\t\ttext: (match.startPos < contextLength ? \"\" : ellipsis) +\n\t\t\t\t\t\ttextMap.string.slice(Math.max(match.startPos - contextLength,0),match.startPos),\n\t\t\t\t\t\"class\": \"tc-dynannotate-snippet-context\"\n\t\t\t\t}));\n\t\t\t}\n\t\t\t// Output the match\n\t\t\tcontainer.appendChild($tw.utils.domMaker(\"span\",{\n\t\t\t\ttext: textMap.string.slice(match.startPos,match.endPos),\n\t\t\t\t\"class\": \"tc-dynannotate-snippet-highlight \" + self.getAttribute(\"searchClass\")\n\t\t\t}));\n\t\t\t// Does the context of this match merge into the next?\n\t\t\tmerged = index < matches.length - 1 && matches[index + 1].startPos - match.endPos <= 2 * contextLength;\n\t\t\tif(merged) {\n\t\t\t\t// If they're merged, use the context up until the next match\n\t\t\t\tcontainer.appendChild($tw.utils.domMaker(\"span\",{\n\t\t\t\t\ttext: textMap.string.slice(match.endPos,matches[index + 1].startPos),\n\t\t\t\t\t\"class\": \"tc-dynannotate-snippet-context\"\n\t\t\t\t}));\n\t\t\t} else {\n\t\t\t\t// If they're not merged, use the context up to the end\n\t\t\t\tcontainer.appendChild($tw.utils.domMaker(\"span\",{\n\t\t\t\t\ttext: textMap.string.slice(match.endPos,match.endPos + contextLength) +\n\t\t\t\t\t\t((match.endPos + contextLength) >= textMap.string.length ? \"\" : ellipsis),\n\t\t\t\t\t\"class\": \"tc-dynannotate-snippet-context\"\n\t\t\t\t}));\n\t\t\t}\n\t\t\t// Reuse the next container if we're merged\n\t\t\tif(!merged) {\n\t\t\t\tcontainer = null;\n\t\t\t}\n\t\t});\t\t\n\t}\n};\n\n/*\nSelectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering\n*/\nDynannotateWidget.prototype.refresh = function(changedTiddlers) {\n\t// Get the changed attributes\n\tvar changedAttributes = this.computeAttributes();\n\t// Refresh completely if the \"searchDisplay\" attribute has changed\n\tif(changedAttributes.searchDisplay) {\n\t\tthis.refreshSelf();\n\t\treturn true;\n\t}\n\t// Check whether we're in snippet mode\n\tvar isSnippetMode = this.isSnippetMode();\n\t// Refresh the child widgets\n\tvar childrenDidRefresh = this.refreshChildren(changedTiddlers);\n\t// Reapply the selection tracker data to the DOM\n\tif(changedAttributes.selection || changedAttributes.selectionPrefix || changedAttributes.selectionSuffix || changedAttributes.selectionPopup) {\n\t\tthis.applySelectionTrackerData();\t\t\n\t}\n\t// Reapply the annotations if the children refreshed or the main wrapper resized\n\tvar wrapperWidth = this.domWrapper.offsetWidth,\n\t\thasResized = wrapperWidth !== this.wrapperWidth || changedTiddlers[\"$:/state/DynaView/ViewportDimensions/ResizeCount\"],\n\t\toldAnnotationTiddlers = this.annotationTiddlers;\n\tthis.getAnnotationTiddlers();\n\tif(!isSnippetMode && (\n\t\tchildrenDidRefresh || \n\t\thasResized || \n\t\tchangedAttributes.target || \n\t\tchangedAttributes.targetPrefix || \n\t\tchangedAttributes.targetSuffix || \n\t\tchangedAttributes.filter || \n\t\tchangedAttributes.actions || \n\t\tchangedAttributes.popup || \n\t\t!$tw.utils.isArrayEqual(oldAnnotationTiddlers,this.annotationTiddlers) ||\n\t\tthis.annotationTiddlers.find(function(title) {\n\t\t\treturn changedTiddlers[title];\n\t\t}) !== undefined\n\t)) {\n\t\tthis.applyAnnotations();\n\t}\n\tif(!isSnippetMode && (\n\t\tchildrenDidRefresh || \n\t\thasResized || \n\t\tchangedAttributes.search || \n\t\tchangedAttributes.searchMinLength || \n\t\tchangedAttributes.searchClass || \n\t\tchangedAttributes.searchMode || \n\t\tchangedAttributes.searchCaseSensitive\n\t)) {\n\t\tthis.applySearch();\n\t}\n\tif(isSnippetMode && (\n\t\tchildrenDidRefresh || \n\t\thasResized || \n\t\tchangedAttributes.search || \n\t\tchangedAttributes.searchMinLength || \n\t\tchangedAttributes.searchClass || \n\t\tchangedAttributes.searchMode || \n\t\tchangedAttributes.searchCaseSensitive\n\t)) {\n\t\tthis.applySnippets();\n\t}\n\tthis.wrapperWidth = wrapperWidth;\n\treturn childrenDidRefresh;\n};\n\nexports.dynannotate = DynannotateWidget;\n\n})();\n","type":"application/javascript","module-type":"widget"},"$:/plugins/tiddlywiki/dynannotate/selection-tracker.js":{"title":"$:/plugins/tiddlywiki/dynannotate/selection-tracker.js","text":"/*\\\ntitle: $:/plugins/tiddlywiki/dynannotate/selection-tracker.js\ntype: application/javascript\nmodule-type: startup\n\nDyannotate background daemon to track the selection\n\n\\*/\n(function(){\n\n/*jslint node: true, browser: true */\n/*global $tw: false */\n\"use strict\";\n\n// Export name and synchronous status\nexports.name = \"dyannotate-startup\";\nexports.platforms = [\"browser\"];\nexports.after = [\"render\"];\nexports.synchronous = true;\n\nvar TextMap = require(\"$:/plugins/tiddlywiki/dynannotate/textmap.js\").TextMap;\n\nexports.startup = function() {\n\t$tw.dynannotate = {\n\t\tselectionTracker: new SelectionTracker($tw.wiki,{\n\t\t\tallowBlankSelectionPopup: true\n\t\t})\n\t};\n};\n\nfunction SelectionTracker(wiki,options) {\n\toptions = options || {};\n\tvar self = this;\n\tthis.wiki = wiki;\n\tthis.allowBlankSelectionPopup = options.allowBlankSelectionPopup;\n\tthis.selectionPopupTitle = null;\n\tdocument.addEventListener(\"selectionchange\",function(event) {\n\t\tvar selection = document.getSelection();\n\t\tif(selection && (selection.type === \"Range\" || (self.allowBlankSelectionPopup && !self.selectionPopupTitle))) {\n\t\t\t// Look for the selection containers for each of the two ends of the selection\n\t\t\tvar anchorContainer = self.findSelectionContainer(selection.anchorNode),\n\t\t\t\tfocusContainer = self.findSelectionContainer(selection.focusNode);\n\t\t\t// If either end of the selection then we ignore it\n\t\t\tif(!!anchorContainer || !!focusContainer) {\n\t\t\t\tvar selectionRange = selection.getRangeAt(0);\n\t\t\t\t// Check for the selection spilling outside the starting container\n\t\t\t\tif((anchorContainer !== focusContainer) || (selectionRange.startContainer.nodeType !== Node.TEXT_NODE && selectionRange.endContainer.nodeType !== Node.TEXT_NODE)) {\n\t\t\t\t\tif(self.selectionPopupTitle) {\n\t\t\t\t\t\tself.wiki.deleteTiddler(self.selectionPopupTitle);\n\t\t\t\t\t\tself.selectionPopupTitle = null;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tself.selectionSaveTitle = anchorContainer.getAttribute(\"data-annotation-selection-save\");\n\t\t\t\t\tself.selectionPrefixSaveTitle = anchorContainer.getAttribute(\"data-annotation-selection-prefix-save\");\n\t\t\t\t\tself.selectionSuffixSaveTitle = anchorContainer.getAttribute(\"data-annotation-selection-suffix-save\");\n\t\t\t\t\tself.selectionPopupTitle = anchorContainer.getAttribute(\"data-annotation-selection-popup\");\n\t\t\t\t\t// The selection is a range so we trigger the popup\n\t\t\t\t\tif(self.selectionPopupTitle) {\n\t\t\t\t\t\tvar selectionRectangle = selectionRange.getBoundingClientRect(),\n\t\t\t\t\t\t\ttrackingRectangle = anchorContainer.getBoundingClientRect();\n\t\t\t\t\t\t$tw.popup.triggerPopup({\n\t\t\t\t\t\t\tdomNode: null,\n\t\t\t\t\t\t\tdomNodeRect: {\n\t\t\t\t\t\t\t\tleft: selectionRectangle.left - trackingRectangle.left,\n\t\t\t\t\t\t\t\ttop: selectionRectangle.top - trackingRectangle.top,\n\t\t\t\t\t\t\t\twidth: selectionRectangle.width,\n\t\t\t\t\t\t\t\theight: selectionRectangle.height\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tforce: true,\n\t\t\t\t\t\t\tfloating: true,\n\t\t\t\t\t\t\ttitle: self.selectionPopupTitle,\n\t\t\t\t\t\t\twiki: self.wiki\n\t\t\t\t\t\t});\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\t// Write the selection text to the specified tiddler\n\t\t\t\t\tif(self.selectionSaveTitle) {\n\t\t\t\t\t\t// Note that selection.toString() normalizes whitespace but selection.getRangeAt(0).toString() does not\n\t\t\t\t\t\tvar text = selectionRange.toString();\n\t\t\t\t\t\tself.wiki.addTiddler(new $tw.Tiddler({title: self.selectionSaveTitle, text: text}));\n\t\t\t\t\t\t// Build a textmap of the container so that we can find the prefix and suffix\n\t\t\t\t\t\tvar textMap = new TextMap(anchorContainer);\n\t\t\t\t\t\t// Find the selection start in the text map and hence extract the prefix and suffix\n\t\t\t\t\t\tvar context = textMap.extractContext(selectionRange.startContainer,selectionRange.startOffset,text);\n\t\t\t\t\t\t// Save the prefix and suffix\n\t\t\t\t\t\tif(context) {\n\t\t\t\t\t\t\tif(self.selectionPrefixSaveTitle) {\n\t\t\t\t\t\t\t\tself.wiki.addTiddler(new $tw.Tiddler({title: self.selectionPrefixSaveTitle, text: context.prefix}));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif(self.selectionSuffixSaveTitle) {\n\t\t\t\t\t\t\t\tself.wiki.addTiddler(new $tw.Tiddler({title: self.selectionSuffixSaveTitle, text: context.suffix}));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\t// If the selection is a caret we clear any active popup\n\t\t\tif(self.selectionPopupTitle) {\n\t\t\t\tself.wiki.deleteTiddler(self.selectionPopupTitle);\n\t\t\t\tself.selectionPopupTitle = null;\n\t\t\t}\n\t\t}\n\t});\n}\n\nSelectionTracker.prototype.findSelectionContainer = function findSelectionContainer(domNode) {\n\tif(domNode && domNode.nodeType === Node.ELEMENT_NODE && domNode.classList.contains(\"tc-dynannotation-selection-container\")) {\n\t\treturn domNode;\n\t}\n\tif(domNode && domNode.parentNode) {\n\t\treturn findSelectionContainer(domNode.parentNode);\n\t}\n\treturn null;\n};\n\n})();\n","type":"application/javascript","module-type":"startup"},"$:/plugins/tiddlywiki/dynannotate/textmap.js":{"title":"$:/plugins/tiddlywiki/dynannotate/textmap.js","text":"/*\\\ntitle: $:/plugins/tiddlywiki/dynannotate/textmap.js\ntype: application/javascript\nmodule-type: library\n\nStructure for modelling mapping between a string and its representation in the DOM\n\n\\*/\n(function(){\n\n/*jslint node: true, browser: true */\n/*global $tw: false */\n\"use strict\";\n\nvar PREFIX_SUFFIX_LENGTH = 50;\n\n/*\nBuild a map of the text content of a dom node and its descendents:\n\nstring: concatenation of the text content of child nodes\nmetadata: array of {start,end,domNode} where start and end identify position in the string\n*/\nexports.TextMap = function(domNode) {\n\tvar self = this,\n\t\tstringChunks = [],\n\t\tp = 0;\n\tthis.metadata = [];\n\tvar processNode = function(domNode) {\n\t\t// Check for text nodes\n\t\tif(domNode.nodeType === 3) {\n\t\t\tvar text = domNode.textContent;\n\t\t\tstringChunks.push(text);\n\t\t\tself.metadata.push({\n\t\t\t\tstart: p,\n\t\t\t\tend: p + text.length,\n\t\t\t\tdomNode: domNode\n\t\t\t});\n\t\t\tp += text.length;\n\t\t} else {\n\t\t\t// Otherwise look within the child nodes\n\t\t\tif(domNode.childNodes) {\n\t\t\t\tfor(var t=0; t<domNode.childNodes.length; t++ ) {\n\t\t\t\t\tprocessNode(domNode.childNodes[t]);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\t// Process our text nodes\n\tprocessNode(domNode);\n\tthis.string = stringChunks.join(\"\");\n};\n\n/*\nLocate the metadata record corresponding to a given position in the string\n*/\nexports.TextMap.prototype.locateMetadata = function(position) {\n\treturn this.metadata.find(function(metadata) {\n\t\treturn position >= metadata.start && position < metadata.end;\n\t});\n};\n\n/*\nSearch for the first occurance of a target string within the textmap of a dom node\n\nReturns an object with the following properties:\n\tstartNode: node containing the start of the text\n\tstartOffset: offset of the start of the text within the node\n\tendNode: node containing the end of the text\n\tendOffset: offset of the end of the text within the node\n*/\nexports.TextMap.prototype.findText = function(targetString,targetPrefix,targetSuffix) {\n\tif(!targetString) {\n\t\treturn null;\n\t}\n\ttargetPrefix = targetPrefix || \"\";\n\ttargetSuffix = targetSuffix || \"\";\n\tvar startPos = this.string.indexOf(targetPrefix + targetString + targetSuffix);\n\tif(startPos !== -1) {\n\t\tstartPos += targetPrefix.length;\n\t\tvar startMetadata = this.locateMetadata(startPos),\n\t\t\tendMetadata = this.locateMetadata(startPos + targetString.length);\n\t\tif(startMetadata && endMetadata) {\n\t\t\treturn {\n\t\t\t\tstartNode: startMetadata.domNode,\n\t\t\t\tstartOffset: startPos - startMetadata.start,\n\t\t\t\tendNode: endMetadata.domNode,\n\t\t\t\tendOffset: (startPos + targetString.length) - endMetadata.start\n\t\t\t}\t\t\t\n\t\t}\n\t}\n\treturn null;\n};\n\n/*\nSearch for all occurances of a string within the textmap of a dom node\n\nOptions include:\n\tmode: \"normal\", \"regexp\" or \"whitespace\"\n\tcaseSensitive: true if the search should be case sensitive\n\nReturns an array of objects with the following properties:\n\tstartPos: start position of the match within the string contained by this TextMap\n\tstartNode: node containing the start of the text\n\tstartOffset: offset of the start of the text within the node\n\tendPos: end position of the match within the string contained by this TextMap\n\tendNode: node containing the end of the text\n\tendOffset: offset of the end of the text within the node\n*/\nexports.TextMap.prototype.search = function(searchString,options) {\n\tif(!searchString) {\n\t\treturn [];\n\t}\n\toptions = options || {};\n\t// Compose the regexp\n\tvar regExpString,\n\t\tflags = options.caseSensitive ? \"g\" : \"gi\";\n\tif(options.mode === \"regexp\") {\n\t\tregExpString = \"(\" + searchString + \")\";\n\t} else if(options.mode === \"whitespace\") {\n\t\t// Normalise whitespace\n\t\tregExpString = \"(\" + searchString.split(/\\s+/g).filter(function(word) {\n\t\t\treturn !!word\n\t\t}).map($tw.utils.escapeRegExp).join(\"\\\\s+\") + \")\";\n\t} else {\n\t\t// Normal search\n\t\tregExpString = \"(\" + $tw.utils.escapeRegExp(searchString) + \")\";\n\t}\n\t// Compile the regular expression\n\tvar regExp;\n\ttry {\n\t\tregExp = RegExp(regExpString,flags);\n\t} catch(e) {\n\t}\n\tif(!regExp) {\n\t\treturn [];\n\t}\n\t// Find each match\n\tvar results = [],\n\t\tmatch;\n\tdo {\n\t\tmatch = regExp.exec(this.string);\n\t\tif(match) {\n\t\t\tvar metadataStart = this.locateMetadata(match.index),\n\t\t\t\tmetadataEnd = this.locateMetadata(match.index + match[0].length);\n\t\t\tif(metadataStart && metadataEnd) {\n\t\t\t\tresults.push({\n\t\t\t\t\tstartPos: match.index,\n\t\t\t\t\tstartNode: metadataStart.domNode,\n\t\t\t\t\tstartOffset: match.index - metadataStart.start,\n\t\t\t\t\tendPos: match.index + match[0].length,\n\t\t\t\t\tendNode: metadataEnd.domNode,\n\t\t\t\t\tendOffset: match.index + match[0].length - metadataEnd.start\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t} while(match);\n\treturn results;\n};\n\n/*\nGiven a start container and offset and a search string, return a prefix and suffix to disambiguate the text\n*/\nexports.TextMap.prototype.extractContext = function(startContainer,startOffset,text) {\n\tvar startMetadata = this.metadata.find(function(metadata) {\n\t\t\treturn metadata.domNode === startContainer\n\t\t});\n\tif(!startMetadata) {\n\t\treturn null;\n\t}\n\tvar startPos = startMetadata.start + startOffset;\n\treturn {\n\t\tprefix: this.string.slice(Math.max(startPos - PREFIX_SUFFIX_LENGTH, 0), startPos),\n\t\tsuffix: this.string.slice(startPos + text.length, Math.min(startPos + text.length + PREFIX_SUFFIX_LENGTH, this.string.length))\n\t};\n};\n\n})();\n","type":"application/javascript","module-type":"library"},"$:/plugins/tiddlywiki/dynannotate/styles":{"title":"$:/plugins/tiddlywiki/dynannotate/styles","tags":"[[$:/tags/Stylesheet]]","text":"\\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline\n\n.tc-dynannotation-wrapper {\n\tposition: relative;\n}\n\n.tc-dynannotation-annotation-overlay {\n\tposition: absolute;\n\tbackground: rgba(255,255,0,0.3);\n\tmix-blend-mode: multiply;\n}\n\n.tc-dynannotation-search-overlay {\n\tposition: absolute;\n\tpointer-events: none;\n\tbackground: rgba(255,0,0,0.3);\n}\n\n.tc-dynannotation-search-overlay-blurred {\n\tbackground: rgba(255,0,0,0.3);\n\tmix-blend-mode: multiply;\n\tborder-radius: 4px;\n\tfilter: blur(2px);\n}\n\n@keyframes ta-dynannotation-search-overlay-animated { to { background-position: 100% 100% } }\n\n.tc-dynannotation-search-overlay-animated {\n\tmix-blend-mode: multiply;\n\tbackground: repeating-linear-gradient(-45deg, #ff8 0, #dd8 25%, transparent 0, transparent 50%) 0 / .6em .6em;\n\tanimation: ta-dynannotation-search-overlay-animated 12s linear infinite;\n}\n\n.tc-dynannotate-snippet-highlight {\n\tbackground: #efef53;\n}\n\n.tc-dynannotation-example-info {\n\tbackground: #ffa;\n\tpadding: 1em;\n}\n"}}}