/*\ title: $:/core/modules/widget/button.js type: application/javascript module-type: widget Implements the button widget. \*/ (function(){ /*jslint node: true, browser: true */ /*global $tw: false */ "use strict"; var ButtonWidget = function(renderer) { // Save state this.renderer = renderer; // Generate child nodes this.generateChildNodes(); }; ButtonWidget.prototype.generateChildNodes = function() { // Get the parameters from the attributes this.message = this.renderer.getAttribute("message"); this.param = this.renderer.getAttribute("param"); this.set = this.renderer.getAttribute("set"); this.setTo = this.renderer.getAttribute("setTo"); this.popup = this.renderer.getAttribute("popup"); this.hover = this.renderer.getAttribute("hover"); this.qualifyTiddlerTitles = this.renderer.getAttribute("qualifyTiddlerTitles"); this["class"] = this.renderer.getAttribute("class"); // Compose the button var classes = ["tw-tiddlybutton"]; if(this.classes) { $tw.utils.pushTop(classes,this.classes); } if(this["class"]) { $tw.utils.pushTop(classes,this["class"]); } var events = [{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"}]; if(this.hover === "yes") { events.push({name: "mouseover", handlerObject: this, handlerMethod: "handleMouseOverOrOutEvent"}); events.push({name: "mouseout", handlerObject: this, handlerMethod: "handleMouseOverOrOutEvent"}); } this.children = this.renderer.renderTree.createRenderers(this.renderer.renderContext,[{ type: "element", tag: "button", attributes: { "class": {type: "string", value: classes.join(" ")} }, children: this.renderer.parseTreeNode.children, events: events }]); }; ButtonWidget.prototype.render = function(type) { var output = []; $tw.utils.each(this.children,function(node) { if(node.render) { output.push(node.render(type)); } }); return output.join(""); }; ButtonWidget.prototype.renderInDom = function(parentElement) { this.parentElement = parentElement; // Render any child nodes $tw.utils.each(this.children,function(node) { if(node.renderInDom) { parentElement.appendChild(node.renderInDom()); } }); }; ButtonWidget.prototype.dispatchMessage = function(event) { $tw.utils.dispatchCustomEvent(event.target,this.message,{ param: this.param, tiddlerTitle: this.renderer.getContextTiddlerTitle() }); }; ButtonWidget.prototype.triggerPopup = function(event) { $tw.popup.triggerPopup({ textRef: this.popup, domNode: this.renderer.domNode, qualifyTiddlerTitles: this.qualifyTiddlerTitles, renderContext: this.renderer.renderContext, wiki: this.renderer.renderTree.wiki }); }; ButtonWidget.prototype.setTiddler = function() { var tiddler = this.renderer.renderTree.wiki.getTiddler(this.set); this.renderer.renderTree.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: this.set, text: this.setTo})); }; ButtonWidget.prototype.handleClickEvent = function(event) { if(this.message) { this.dispatchMessage(event); } if(this.popup) { this.triggerPopup(event); } if(this.set && this.setTo) { this.setTiddler(); } event.preventDefault(); return false; }; ButtonWidget.prototype.handleMouseOverOrOutEvent = function(event) { if(this.popup) { this.triggerPopup(event); } event.preventDefault(); return false; }; ButtonWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers) { // Check if any of our attributes have changed, or if a tiddler we're interested in has changed if(changedAttributes.message || changedAttributes.param || changedAttributes.set || changedAttributes.setTo || changedAttributes.popup || changedAttributes.hover || changedAttributes.qualifyTiddlerTitles || changedAttributes["class"] || (this.set && changedTiddlers[this.set]) || (this.popup && changedTiddlers[this.popup])) { // Remove old child nodes $tw.utils.removeChildren(this.parentElement); // Regenerate and render children this.generateChildNodes(); var self = this; $tw.utils.each(this.children,function(node) { if(node.renderInDom) { self.parentElement.appendChild(node.renderInDom()); } }); } else { // We don't need to refresh ourselves, so just refresh any child nodes $tw.utils.each(this.children,function(node) { if(node.refreshInDom) { node.refreshInDom(changedTiddlers); } }); } }; exports.button = ButtonWidget; })();