mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-27 09:24:45 +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:
parent
445c15e719
commit
09f7ad84b2
@ -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
|
||||
|
@ -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"},
|
||||
|
@ -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]) {
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user