1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-16 10:29:54 +00:00

Added disabled attribute to input widgets (#5014)

* checkbox widget: added disabled attribute

* Range widget: added disabled attribute

* Radio widget: added disabled attribute

* EditText widget: added disabled attribute
This commit is contained in:
saqimtiaz 2020-11-09 19:28:12 +01:00 committed by GitHub
parent 445c15e719
commit 09f7ad84b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 32 additions and 8 deletions

View File

@ -74,6 +74,9 @@ function FramedEngine(options) {
if(this.widget.editTabIndex) {
this.iframeNode.setAttribute("tabindex",this.widget.editTabIndex);
}
if(this.widget.isDisabled === "yes") {
this.domNode.setAttribute("disabled",true);
}
// Copy the styles from the dummy textarea
this.copyStyles();
// Add event listeners

View File

@ -52,6 +52,9 @@ function SimpleEngine(options) {
if(this.widget.editTabIndex) {
this.domNode.setAttribute("tabindex",this.widget.editTabIndex);
}
if(this.widget.isDisabled === "yes") {
this.domNode.setAttribute("disabled",true);
}
// Add an input event handler
$tw.utils.addEventListeners(this.domNode,[
{name: "focus", handlerObject: this, handlerMethod: "handleFocusEvent"},

View File

@ -180,6 +180,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
this.editCancelPopups = this.getAttribute("cancelPopups","") === "yes";
this.editInputActions = this.getAttribute("inputActions");
this.editRefreshTitle = this.getAttribute("refreshTitle");
this.isDisabled = this.getAttribute("disabled","no");
// Get the default editor element tag and type
var tag,type;
if(this.editField === "text") {
@ -211,7 +212,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
EditTextWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes();
// Completely rerender if any of our attributes have changed
if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup || changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE]) {
if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup || changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedAttributes.disabled) {
this.refreshSelf();
return true;
} else if (changedTiddlers[this.editRefreshTitle]) {

View File

@ -41,6 +41,9 @@ CheckboxWidget.prototype.render = function(parent,nextSibling) {
if(this.getValue()) {
this.inputDomNode.setAttribute("checked","true");
}
if(this.isDisabled === "yes") {
this.inputDomNode.setAttribute("disabled",true);
}
this.labelDomNode.appendChild(this.inputDomNode);
this.spanDomNode = this.document.createElement("span");
this.labelDomNode.appendChild(this.spanDomNode);
@ -181,6 +184,7 @@ CheckboxWidget.prototype.execute = function() {
this.checkboxDefault = this.getAttribute("default");
this.checkboxClass = this.getAttribute("class","");
this.checkboxInvertTag = this.getAttribute("invertTag","");
this.isDisabled = this.getAttribute("disabled","no");
// Make the child widgets
this.makeChildWidgets();
};
@ -190,7 +194,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
*/
CheckboxWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes();
if(changedAttributes.tiddler || changedAttributes.tag || changedAttributes.invertTag || changedAttributes.field || changedAttributes.index || changedAttributes.checked || changedAttributes.unchecked || changedAttributes["default"] || changedAttributes["class"]) {
if(changedAttributes.tiddler || changedAttributes.tag || changedAttributes.invertTag || changedAttributes.field || changedAttributes.index || changedAttributes.checked || changedAttributes.unchecked || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.disabled) {
this.refreshSelf();
return true;
} else {

View File

@ -44,6 +44,9 @@ RadioWidget.prototype.render = function(parent,nextSibling) {
if(isChecked) {
this.inputDomNode.setAttribute("checked","true");
}
if(this.isDisabled === "yes") {
this.inputDomNode.setAttribute("disabled",true);
}
this.labelDomNode.appendChild(this.inputDomNode);
this.spanDomNode = this.document.createElement("span");
this.labelDomNode.appendChild(this.spanDomNode);
@ -95,6 +98,7 @@ RadioWidget.prototype.execute = function() {
this.radioIndex = this.getAttribute("index");
this.radioValue = this.getAttribute("value");
this.radioClass = this.getAttribute("class","");
this.isDisabled = this.getAttribute("disabled","no");
// Make the child widgets
this.makeChildWidgets();
};
@ -104,7 +108,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
*/
RadioWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes();
if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.value || changedAttributes["class"]) {
if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.value || changedAttributes["class"] || changedAttributes.disabled) {
this.refreshSelf();
return true;
} else {

View File

@ -46,6 +46,9 @@ RangeWidget.prototype.render = function(parent,nextSibling) {
if(this.increment){
this.inputDomNode.setAttribute("step", this.increment);
}
if(this.isDisabled === "yes") {
this.inputDomNode.setAttribute("disabled",true);
}
this.inputDomNode.value = this.getValue();
// Add a click event handler
$tw.utils.addEventListeners(this.inputDomNode,[
@ -98,6 +101,7 @@ RangeWidget.prototype.execute = function() {
this.increment = this.getAttribute("increment");
this.defaultValue = this.getAttribute("default");
this.elementClass = this.getAttribute("class","");
this.isDisabled = this.getAttribute("disabled","no");
// Make the child widgets
this.makeChildWidgets();
};
@ -107,7 +111,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
*/
RangeWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes();
if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes['min'] || changedAttributes['max'] || changedAttributes['increment'] || changedAttributes["default"] || changedAttributes["class"]) {
if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes['min'] || changedAttributes['max'] || changedAttributes['increment'] || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.disabled) {
this.refreshSelf();
return true;
} else {

View File

@ -1,6 +1,6 @@
caption: checkbox
created: 20131024141900000
modified: 20190714134002652
modified: 20201109090732190
tags: Widgets
title: CheckboxWidget
type: text/vnd.tiddlywiki
@ -29,6 +29,7 @@ The content of the `<$checkbox>` widget is displayed within an HTML `<label>` el
|actions |<<.from-version "5.1.14">> A string containing ActionWidgets to be triggered when the status of the checkbox changes (whether it is checked or unchecked) |
|uncheckactions |<<.from-version "5.1.16">> A string containing ActionWidgets to be triggered when the checkbox is unchecked |
|checkactions |<<.from-version "5.1.20">> A string containing ActionWidgets to be triggered when the checkbox is checked |
|disabled|<<.from-version "5.1.23">> Optional, disables the checkbox if set to "yes". Defaults to "no"|
!! Tag Mode

View File

@ -1,6 +1,6 @@
caption: edit-text
created: 20131024141900000
modified: 20151224143914772
modified: 20201109093034856
tags: Widgets
title: EditTextWidget
type: text/vnd.tiddlywiki
@ -34,6 +34,7 @@ The content of the `<$edit-text>` widget is ignored.
|cancelPopups |<<.from-version "5.1.23">> if set to "yes", cancels all popups when the input gets focus |
|inputActions |<<.from-version 5.1.23>> Optional actions that are triggered every time an input event occurs within the input field or textarea |
|refreshTitle |<<.from-version 5.1.23>> An optional tiddler title that makes the input field update whenever the specified tiddler changes |
|disabled|<<.from-version "5.1.23">> Optional, disables the text input if set to "yes". Defaults to "no"|
! Notes

View File

@ -1,6 +1,6 @@
caption: radio
created: 20131212195353929
modified: 20170115095809695
modified: 20201109091807432
tags: Widgets
title: RadioWidget
type: text/vnd.tiddlywiki
@ -19,6 +19,8 @@ The content of the `<$radio>` widget is displayed within an HTML `<label>` eleme
|index|<<.from-version "5.1.14">> The index of the //tiddler// being [[DataTiddler|DataTiddlers]] bound to the radio button<<.tip "takes precedence over //field//">>|
|value |The value for the //field// or //index// of the //tiddler//|
|class |The CSS classes assigned to the label around the radio button<$macrocall $name=".tip" _="""<<.from-version "5.1.14">> `tc-radio` is always applied by default, as well as `tc-radio-selected` when selected"""/>|
|disabled|<<.from-version "5.1.23">> Optional, disables the radio input if set to "yes". Defaults to "no"|
!! Field Mode

View File

@ -1,6 +1,6 @@
caption: range
created: 20171102134825376
modified: 20191104185454972
modified: 20201109091723430
tags: Widgets
title: RangeWidget
type: text/vnd.tiddlywiki
@ -22,6 +22,7 @@ The content of the `<$range>` widget is ignored.
|increment |The minimum amount by which a value may be changed. Defaults to 1 |
|default |If the field is missing or empty this is the default position for the widget handle relative to the min and max values.|
|class |CSS classes to be assigned to the label around the range slider |
|disabled|<<.from-version "5.1.23">> Optional, disables the range input if set to "yes". Defaults to "no"|
! Examples