mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 00:50:28 +00:00
This widget allows the user to set multiple variables in one go.
It thereby reduces code complexity that would arise when setting many variables using "<$set>". ``` \define helloworld() Hello world! <$vars greeting="Hi" me={{!!title}} sentence=<<helloworld>>> <<greeting>>! I am <<me>> and I say: <<sentence>> </$vars> ``` How this Widget differs from the set widget: * Variables may be created by using the "key=value" notation that you already know from widgets like action-setfield. * You cannot specify a fallback ("emptyValue") * You cannot use a filter to produce a conditional variable assignement Original discussion that led to the creation of this widget: https://github.com/Jermolene/TiddlyWiki5/issues/1610
This commit is contained in:
parent
afb250cef3
commit
740627795f
75
core/modules/widgets/vars.js
Normal file
75
core/modules/widgets/vars.js
Normal file
@ -0,0 +1,75 @@
|
||||
/*\
|
||||
title: $:/core/modules/widgets/vars.js
|
||||
type: application/javascript
|
||||
module-type: widget
|
||||
|
||||
This widget allows the user to set multiple variables in one go.
|
||||
|
||||
```
|
||||
\define helloworld() Hello world!
|
||||
<$vars greeting="Hi" me={{!!title}} sentence=<<helloworld>>>
|
||||
<<greeting>>! I am <<me>> and I say: <<sentence>>
|
||||
</$vars>
|
||||
```
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
var Widget = require("$:/core/modules/widgets/widget.js").widget;
|
||||
|
||||
var VarsWidget = function(parseTreeNode,options) {
|
||||
// Call the constructor
|
||||
Widget.call(this);
|
||||
// Initialise
|
||||
this.initialise(parseTreeNode,options);
|
||||
};
|
||||
|
||||
/*
|
||||
Inherit from the base widget class
|
||||
*/
|
||||
VarsWidget.prototype = Object.create(Widget.prototype);
|
||||
|
||||
/*
|
||||
Render this widget into the DOM
|
||||
*/
|
||||
VarsWidget.prototype.render = function(parent,nextSibling) {
|
||||
this.parentDomNode = parent;
|
||||
this.computeAttributes();
|
||||
this.execute();
|
||||
this.renderChildren(parent,nextSibling);
|
||||
};
|
||||
|
||||
/*
|
||||
Compute the internal state of the widget
|
||||
*/
|
||||
VarsWidget.prototype.execute = function() {
|
||||
// Parse variables
|
||||
var self = this;
|
||||
$tw.utils.each(this.attributes,function(val,key) {
|
||||
if(key.charAt(0) !== "$") {
|
||||
self.setVariable(key,val);
|
||||
}
|
||||
});
|
||||
// Construct the child widgets
|
||||
this.makeChildWidgets();
|
||||
};
|
||||
|
||||
/*
|
||||
Refresh the widget by ensuring our attributes are up to date
|
||||
*/
|
||||
VarsWidget.prototype.refresh = function(changedTiddlers) {
|
||||
var changedAttributes = this.computeAttributes();
|
||||
if(Object.keys(changedAttributes).length) {
|
||||
this.refreshSelf();
|
||||
return true;
|
||||
}
|
||||
return this.refreshChildren(changedTiddlers);
|
||||
};
|
||||
|
||||
exports["vars"] = VarsWidget;
|
||||
|
||||
})();
|
52
editions/prerelease/tiddlers/VarsWidget.tid
Normal file
52
editions/prerelease/tiddlers/VarsWidget.tid
Normal file
@ -0,0 +1,52 @@
|
||||
title: VarsWidget
|
||||
created: 20150426115958020
|
||||
modified: 20150426115958020
|
||||
tags: Widgets
|
||||
caption: vars
|
||||
|
||||
! Introduction
|
||||
|
||||
The ''vars'' widget allows you to set multiple variables in one go. It thereby reduces code complexity that would arise when setting
|
||||
many variables using the [[SetWidget]].
|
||||
|
||||
! Content and Attributes
|
||||
|
||||
The content of the `<$vars>` widget is the scope for the value assigned to the variable.
|
||||
|
||||
|!Attribute |!Description |
|
||||
|//{attributes not starting with $}// |Each attribute name specifies a variable name. The attribute value is used as variable assignement |
|
||||
|
||||
! Examples
|
||||
|
||||
Consider a case where you need to set multiple variables.
|
||||
|
||||
Using the `<$vars>` widget, this situation may be handled in the following way:
|
||||
|
||||
```
|
||||
\define helloworld() Hello world!
|
||||
|
||||
<$vars greeting="Hi" me={{!!title}} sentence=<<helloworld>>>
|
||||
<<greeting>>! I am <<me>> and I say: <<sentence>>
|
||||
</$vars>
|
||||
```
|
||||
|
||||
In contrast, here is the same example, but using the `<$set>` widget instead:
|
||||
|
||||
```
|
||||
<$set name="greeting" value="Hi" />
|
||||
<$set name="me" value={{!!title}} />
|
||||
<$set name="sentence" value=<<helloworld>> />
|
||||
<<greeting>>! I am <<me>> and I say: <<sentence>>
|
||||
</$set>
|
||||
</$set>
|
||||
</$set>
|
||||
```
|
||||
|
||||
|
||||
! Remarks
|
||||
|
||||
It should be noted that this widget differs from the set widget in the following ways:
|
||||
|
||||
* You cannot specify a fallback (also known as "emptyValue")
|
||||
* You cannot use a filter to produce a conditional variable assignement
|
||||
|
Loading…
Reference in New Issue
Block a user