TiddlyWiki5/core/modules/widgets/button.js

/*\
title: $:/core/modules/widgets/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.generate();
};

ButtonWidget.prototype.generate = 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");
	this.selectedClass = this.renderer.getAttribute("selectedClass");
	// Compose the button
	var classes = ["tw-button"];
	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"});
	}
	if(this.set && this.setTo && this.selectedClass) {
		if(this.isSelected()) {
			classes.push(this.selectedClass);
		}
	}
	// Set the return element
	this.tag = "button";
	this.attributes ={"class": classes.join(" ")};
	this.children = this.renderer.renderTree.createRenderers(this.renderer,this.renderer.parseTreeNode.children);
	this.events = events;
};

ButtonWidget.prototype.dispatchMessage = function(event) {
	$tw.utils.dispatchCustomEvent(event.target,this.message,{
		param: this.param,
		tiddlerTitle: this.renderer.tiddlerTitle
	});
};

ButtonWidget.prototype.triggerPopup = function(event) {
	var title = this.popup;
	if(this.qualifyTiddlerTitles) {
		title =  title + "-" + this.renderer.renderTree.getContextScopeId(this.renderer.parentRenderer);
	}
	$tw.popup.triggerPopup({
		domNode: this.renderer.domNode,
		title: title,
		wiki: this.renderer.renderTree.wiki
	});
};

ButtonWidget.prototype.isSelected = function() {
	var title = this.set;
	if(this.qualifyTiddlerTitles) {
		title =  title + "-" + this.renderer.renderTree.getContextScopeId(this.renderer.parentRenderer);
	}
	var tiddler = this.renderer.renderTree.wiki.getTiddler(title);
	return tiddler ? tiddler.fields.text === this.setTo : false;
};

ButtonWidget.prototype.setTiddler = function() {
	var title = this.set;
	if(this.qualifyTiddlerTitles) {
		title =  title + "-" + this.renderer.renderTree.getContextScopeId(this.renderer.parentRenderer);
	}
	var tiddler = this.renderer.renderTree.wiki.getTiddler(title);
	this.renderer.renderTree.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: title, text: this.setTo}));
};

ButtonWidget.prototype.handleClickEvent = function(event) {
	var handled = false;
	if(this.message) {
		this.dispatchMessage(event);
		handled = true;
	}
	if(this.popup) {
		this.triggerPopup(event);
		handled = true;
	}
	if(this.set) {
		this.setTiddler();
		handled = true;
	}
	event.stopPropagation();
	event.preventDefault();
	return handled;
};

ButtonWidget.prototype.handleMouseOverOrOutEvent = function(event) {
	if(this.popup) {
		this.triggerPopup(event);
	}
	event.preventDefault();
	return false;
};

ButtonWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers) {
	var setTitle = this.set,
		popupTitle = this.popup;
	if(this.qualifyTiddlerTitles) {
		var scopeId = this.renderer.renderTree.getContextScopeId(this.renderer.parentRenderer);
		if(setTitle) {
			setTitle =  setTitle + "-" + scopeId;
		}
		if(popupTitle) {
			popupTitle =  popupTitle + "-" + scopeId;
		}
	}
	// 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"] || (setTitle && changedTiddlers[setTitle]) || (popupTitle && changedTiddlers[popupTitle])) {
		// Regenerate and rerender the widget and replace the existing DOM node
		this.generate();
		var oldDomNode = this.renderer.domNode,
			newDomNode = this.renderer.renderInDom();
		oldDomNode.parentNode.replaceChild(newDomNode,oldDomNode);
	} 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;

})();