mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-08-26 03:26:45 +00:00
![Jeremy Ruston](/assets/img/avatar_default.png)
This arrangement takes better advantage of the similarities between the now deleted widget renderer and the element renderer. It also obviates the need for wrapper elements around every widget.
116 lines
3.6 KiB
JavaScript
116 lines
3.6 KiB
JavaScript
/*\
|
|
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.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");
|
|
// 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"});
|
|
}
|
|
// Set the return element
|
|
this.tag = "button";
|
|
this.attributes ={"class": classes.join(" ")};
|
|
this.children = this.renderer.renderTree.createRenderers(this.renderer.renderContext,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.getContextTiddlerTitle()
|
|
});
|
|
};
|
|
|
|
ButtonWidget.prototype.triggerPopup = function(event) {
|
|
var title = this.popup;
|
|
if(this.qualifyTiddlerTitles) {
|
|
title = title + "-" + this.renderer.getContextScopeId();
|
|
}
|
|
$tw.popup.triggerPopup({
|
|
domNode: this.renderer.domNode,
|
|
title: title,
|
|
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])) {
|
|
// 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;
|
|
|
|
})();
|