Fix readonly bug, reduce DOM changes when setting format

This commit is contained in:
nathangray 2020-02-13 11:56:52 -07:00
parent 4ef29c0c1a
commit 9cb1abc3c0
2 changed files with 44 additions and 19 deletions

View File

@ -588,6 +588,7 @@ var et2_date_duration = /** @class */ (function (_super) {
// Call the inherited constructor // Call the inherited constructor
_super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_date_duration._attributes, _child || {})) || this; _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_date_duration._attributes, _child || {})) || this;
_this.legacyOptions = ["data_format", "display_format", "hours_per_day", "empty_not_0", "short_labels"]; _this.legacyOptions = ["data_format", "display_format", "hours_per_day", "empty_not_0", "short_labels"];
_this.format = null;
// Legacy option put percent in with display format // Legacy option put percent in with display format
if (_this.options.display_format.indexOf("%") != -1) { if (_this.options.display_format.indexOf("%") != -1) {
_this.options.percent_allowed = true; _this.options.percent_allowed = true;
@ -696,24 +697,35 @@ var et2_date_duration = /** @class */ (function (_super) {
et2_date_duration.prototype.set_display_format = function (format) { et2_date_duration.prototype.set_display_format = function (format) {
if (format.length <= 1) { if (format.length <= 1) {
this.node.remove('select.et2_date_duration'); this.node.remove('select.et2_date_duration');
this.format = null;
} }
this.options.display_format = format; this.options.display_format = format;
if (this.format) { if ((this.format == null || this.format.is('select')) && (this.options.display_format.length <= 1 || this.options.readonly)) {
this.format.remove(); if (this.format) {
this.format.remove();
}
this.format = jQuery(document.createElement('span')).appendTo(this.node);
} }
if (this.options.display_format.length > 1 && !this.options.readonly) { if (this.options.display_format.length > 1 && !this.options.readonly) {
this.format = jQuery(document.createElement("select")) if (this.format && !this.format.is('select')) {
.addClass('et2_date_duration'); this.format.remove();
this.node.append(this.format); this.format = null;
}
if (!this.format) {
this.format = jQuery(document.createElement("select"))
.addClass('et2_date_duration');
this.node.append(this.format);
}
this.format.empty();
for (var i = 0; i < this.options.display_format.length; i++) { for (var i = 0; i < this.options.display_format.length; i++) {
this.format.append("<option value='" + this.options.display_format[i] + "'>" + this.time_formats[this.options.display_format[i]] + "</option>"); this.format.append("<option value='" + this.options.display_format[i] + "'>" + this.time_formats[this.options.display_format[i]] + "</option>");
} }
} }
else if (this.time_formats[this.options.display_format]) { else if (this.time_formats[this.options.display_format]) {
this.format = jQuery("<span>" + this.time_formats[this.options.display_format] + "</span>").appendTo(this.node); this.format.text(this.time_formats[this.options.display_format]);
} }
else { else {
this.format = jQuery("<span>" + this.time_formats["m"] + "</span>").appendTo(this.node); this.format.text(this.time_formats["m"]);
} }
}; };
/** /**

View File

@ -18,11 +18,11 @@
*/ */
import './et2_core_common'; import './et2_core_common';
import { ClassWithAttributes } from "./et2_core_inheritance"; import {ClassWithAttributes} from "./et2_core_inheritance";
import { et2_widget, et2_createWidget, et2_register_widget, WidgetConfig } from "./et2_core_widget"; import {et2_createWidget, et2_register_widget, et2_widget, WidgetConfig} from "./et2_core_widget";
import { et2_valueWidget } from './et2_core_valueWidget' import {et2_valueWidget} from './et2_core_valueWidget'
import { et2_inputWidget } from './et2_core_inputWidget' import {et2_inputWidget} from './et2_core_inputWidget'
import { et2_selectbox } from './et2_widget_selectbox' import {et2_selectbox} from './et2_widget_selectbox'
import './et2_types'; import './et2_types';
import {et2_DOMWidget} from "./et2_core_DOMWidget"; import {et2_DOMWidget} from "./et2_core_DOMWidget";
@ -710,7 +710,7 @@ export class et2_date_duration extends et2_date
// @ts-ignore baseWidget defines node as HTMLElement // @ts-ignore baseWidget defines node as HTMLElement
node: JQuery; node: JQuery;
duration: JQuery; duration: JQuery;
format: JQuery; format: JQuery = null;
/** /**
* Constructor * Constructor
@ -862,29 +862,42 @@ export class et2_date_duration extends et2_date
if (format.length <= 1) if (format.length <= 1)
{ {
this.node.remove('select.et2_date_duration'); this.node.remove('select.et2_date_duration');
this.format = null;
} }
this.options.display_format = format; this.options.display_format = format;
if(this.format) if((this.format == null || this.format.is('select')) && (this.options.display_format.length <= 1 || this.options.readonly))
{ {
this.format.remove(); if (this.format)
{
this.format.remove();
}
this.format = jQuery(document.createElement('span')).appendTo(this.node);
} }
if(this.options.display_format.length > 1 && !this.options.readonly) if(this.options.display_format.length > 1 && !this.options.readonly)
{ {
this.format = jQuery(document.createElement("select")) if(this.format && !this.format.is('select')) {
this.format.remove();
this.format = null;
}
if(!this.format)
{
this.format = jQuery(document.createElement("select"))
.addClass('et2_date_duration'); .addClass('et2_date_duration');
this.node.append(this.format); this.node.append(this.format);
}
this.format.empty();
for(var i = 0; i < this.options.display_format.length; i++) { for(var i = 0; i < this.options.display_format.length; i++) {
this.format.append("<option value='"+this.options.display_format[i]+"'>"+this.time_formats[this.options.display_format[i]]+"</option>"); this.format.append("<option value='"+this.options.display_format[i]+"'>"+this.time_formats[this.options.display_format[i]]+"</option>");
} }
} }
else if (this.time_formats[this.options.display_format]) else if (this.time_formats[this.options.display_format])
{ {
this.format = jQuery("<span>"+this.time_formats[this.options.display_format]+"</span>").appendTo(this.node); this.format.text(this.time_formats[this.options.display_format]);
} }
else else
{ {
this.format = jQuery("<span>"+this.time_formats["m"]+"</span>").appendTo(this.node); this.format.text(this.time_formats["m"]);
} }
} }