diff --git a/core/modules/utils/dom/popup.js b/core/modules/utils/dom/popup.js index da207d921..c29ad5400 100644 --- a/core/modules/utils/dom/popup.js +++ b/core/modules/utils/dom/popup.js @@ -19,40 +19,7 @@ Creates a Popup object with these options: var Popup = function(options) { options = options || {}; this.rootElement = options.rootElement || document.body; -}; - -Popup.prototype.show = function(options) { - this.cancel(); - this.title = options.title; - this.wiki = options.wiki; - this.anchorDomNode = options.domNode; - $tw.utils.addClass(this.anchorDomNode,"tc-popup"); - this.rootElement.addEventListener("click",this,false); -}; - -Popup.prototype.handleEvent = function(event) { - // Dismiss the popup if we get a click on an element that doesn't have .tc-popup class - if(event.type === "click") { - var node = event.target; - while(node && !$tw.utils.hasClass(node,"tc-popup")) { - node = node.parentNode; - } - if(!node) { - this.cancel(); - } - } -}; - -Popup.prototype.cancel = function() { - if(this.anchorDomNode) { - $tw.utils.removeClass(this.anchorDomNode,"tc-popup"); - this.anchorDomNode = null; - } - this.rootElement.removeEventListener("click",this,false); - if(this.title) { - this.wiki.deleteTiddler(this.title); - this.title = null; - } + this.popups = []; // Array of {title:,wiki:,domNode:} objects }; /* @@ -60,38 +27,134 @@ Trigger a popup open or closed. Parameters are in a hashmap: title: title of the tiddler where the popup details are stored domNode: dom node to which the popup will be positioned wiki: wiki - force: if specified, forces the popup state to true or false + force: if specified, forces the popup state to true or false (instead of toggling it) */ Popup.prototype.triggerPopup = function(options) { - // Get the current popup state tiddler - var value = options.wiki.getTextReference(options.title,""); - // Check if the popup is open by checking whether it matches "(,)" - var state = !this.readPopupState(options.title,value); - if("force" in options) { +console.log("triggerPopup",options) + // Check if this popup is already active + var index = -1; + for(var t=0; t 0) { +console.log("Adding click handler") + this.rootElement.addEventListener("click",this,true); + } +}; + +/* +Cancel all popups at or above a specified level or DOM node +level: popup level to cancel (0 cancels all popups) +*/ +Popup.prototype.cancel = function(level) { +console.log("cancel",level) + var numPopups = this.popups.length; + level = Math.max(0,Math.min(level,numPopups)); + for(var t=level; t <$button popup=<> tooltip={{$:/language/Buttons/Language/Hint}} aria-label={{$:/language/Buttons/Language/Caption}} class=<> selectedClass="tc-selected"> <$list filter="[prefix[yes]]"> @@ -18,6 +19,7 @@ $(languagePluginTitle)$/icon <$text text={{$:/language/Buttons/Language/Caption}}/> + <$reveal state=<> type="popup" position="below" animate="yes">
<$linkcatcher to="$:/language"> diff --git a/core/ui/PageControls/storyview.tid b/core/ui/PageControls/storyview.tid index 0b8c43c52..f81e5b84b 100644 --- a/core/ui/PageControls/storyview.tid +++ b/core/ui/PageControls/storyview.tid @@ -6,6 +6,7 @@ description: {{$:/language/Buttons/StoryView/Hint}} \define icon() $:/core/images/storyview-$(storyview)$ \end + <$button popup=<> tooltip={{$:/language/Buttons/StoryView/Hint}} aria-label={{$:/language/Buttons/StoryView/Caption}} class=<> selectedClass="tc-selected"> <$list filter="[prefix[yes]]"> <$set name="storyview" value={{$:/view}}> @@ -16,6 +17,7 @@ $:/core/images/storyview-$(storyview)$ <$text text={{$:/language/Buttons/StoryView/Caption}}/> + <$reveal state=<> type="popup" position="below" animate="yes">
<$linkcatcher to="$:/view"> diff --git a/core/ui/PageControls/theme.tid b/core/ui/PageControls/theme.tid index c14ffba77..91a92c561 100644 --- a/core/ui/PageControls/theme.tid +++ b/core/ui/PageControls/theme.tid @@ -3,6 +3,7 @@ tags: $:/tags/PageControls caption: {{$:/core/images/theme-button}} {{$:/language/Buttons/Theme/Caption}} description: {{$:/language/Buttons/Theme/Hint}} + <$button popup=<> tooltip={{$:/language/Buttons/Theme/Hint}} aria-label={{$:/language/Buttons/Theme/Caption}} class=<> selectedClass="tc-selected"> <$list filter="[prefix[yes]]"> {{$:/core/images/theme-button}} @@ -11,6 +12,7 @@ description: {{$:/language/Buttons/Theme/Hint}} <$text text={{$:/language/Buttons/Theme/Caption}}/> + <$reveal state=<> type="popup" position="below" animate="yes">
<$linkcatcher to="$:/theme"> diff --git a/core/ui/ViewTemplate/title.tid b/core/ui/ViewTemplate/title.tid index 88e1c532d..adfb752f5 100644 --- a/core/ui/ViewTemplate/title.tid +++ b/core/ui/ViewTemplate/title.tid @@ -29,7 +29,7 @@ $:/config/ViewToolbarButtons/Visibility/$(listItem)$
-<$reveal type="nomatch" text="" default="" state=<> class="tc-tiddler-info tc-popup" animate="yes" retain="yes"> +<$reveal type="nomatch" text="" default="" state=<> class="tc-tiddler-info tc-popup-keep" animate="yes" retain="yes"> <$transclude tiddler="$:/core/ui/TiddlerInfo"/> diff --git a/core/wiki/macros/export.tid b/core/wiki/macros/export.tid index 10a32b5a0..9c5721f2a 100644 --- a/core/wiki/macros/export.tid +++ b/core/wiki/macros/export.tid @@ -2,6 +2,7 @@ title: $:/core/macros/export tags: $:/tags/Macro \define exportButton(exportFilter:"[!is[system]sort[title]]",lingoBase) + <$button popup=<> tooltip={{$lingoBase$Hint}} aria-label={{$lingoBase$Caption}} class=<> selectedClass="tc-selected"> <$list filter="[prefix[yes]]"> {{$:/core/images/export-button}} @@ -10,6 +11,7 @@ tags: $:/tags/Macro <$text text={{$lingoBase$Caption}}/> + <$reveal state=<> type="popup" position="below" animate="yes">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Exporter]]"> diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 7abe17862..f6ff8a8ba 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -651,6 +651,10 @@ button.tc-untagged-label { font-size: 0.6em; } +.tc-tiddler-controls .tc-drop-down .tc-drop-down { + font-size: 1em; +} + .tc-tiddler-controls button { vertical-align: baseline; } @@ -917,6 +921,10 @@ canvas.tc-edit-bitmapeditor { line-height: 1.4; } +.tc-drop-down .tc-drop-down { + margin-left: 14px; +} + .tc-drop-down button svg, .tc-drop-down a svg { fill: <>; }