From 9cb1abc3c0d6ea72da4270db800b64c34136e4e0 Mon Sep 17 00:00:00 2001 From: nathangray Date: Thu, 13 Feb 2020 11:56:52 -0700 Subject: [PATCH] Fix readonly bug, reduce DOM changes when setting format --- api/js/etemplate/et2_widget_date.js | 26 ++++++++++++++------ api/js/etemplate/et2_widget_date.ts | 37 +++++++++++++++++++---------- 2 files changed, 44 insertions(+), 19 deletions(-) diff --git a/api/js/etemplate/et2_widget_date.js b/api/js/etemplate/et2_widget_date.js index 7eda1e0c5a..f60caf6528 100644 --- a/api/js/etemplate/et2_widget_date.js +++ b/api/js/etemplate/et2_widget_date.js @@ -588,6 +588,7 @@ var et2_date_duration = /** @class */ (function (_super) { // Call the inherited constructor _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.format = null; // Legacy option put percent in with display format if (_this.options.display_format.indexOf("%") != -1) { _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) { if (format.length <= 1) { this.node.remove('select.et2_date_duration'); + this.format = null; } this.options.display_format = format; - if (this.format) { - this.format.remove(); + if ((this.format == null || this.format.is('select')) && (this.options.display_format.length <= 1 || this.options.readonly)) { + 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) { - this.format = jQuery(document.createElement("select")) - .addClass('et2_date_duration'); - this.node.append(this.format); + 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'); + this.node.append(this.format); + } + this.format.empty(); for (var i = 0; i < this.options.display_format.length; i++) { this.format.append(""); } } else if (this.time_formats[this.options.display_format]) { - this.format = jQuery("" + this.time_formats[this.options.display_format] + "").appendTo(this.node); + this.format.text(this.time_formats[this.options.display_format]); } else { - this.format = jQuery("" + this.time_formats["m"] + "").appendTo(this.node); + this.format.text(this.time_formats["m"]); } }; /** diff --git a/api/js/etemplate/et2_widget_date.ts b/api/js/etemplate/et2_widget_date.ts index 36d15f0c20..85d93ae0bc 100644 --- a/api/js/etemplate/et2_widget_date.ts +++ b/api/js/etemplate/et2_widget_date.ts @@ -18,11 +18,11 @@ */ import './et2_core_common'; -import { ClassWithAttributes } from "./et2_core_inheritance"; -import { et2_widget, et2_createWidget, et2_register_widget, WidgetConfig } from "./et2_core_widget"; -import { et2_valueWidget } from './et2_core_valueWidget' -import { et2_inputWidget } from './et2_core_inputWidget' -import { et2_selectbox } from './et2_widget_selectbox' +import {ClassWithAttributes} from "./et2_core_inheritance"; +import {et2_createWidget, et2_register_widget, et2_widget, WidgetConfig} from "./et2_core_widget"; +import {et2_valueWidget} from './et2_core_valueWidget' +import {et2_inputWidget} from './et2_core_inputWidget' +import {et2_selectbox} from './et2_widget_selectbox' import './et2_types'; 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 node: JQuery; duration: JQuery; - format: JQuery; + format: JQuery = null; /** * Constructor @@ -862,29 +862,42 @@ export class et2_date_duration extends et2_date if (format.length <= 1) { this.node.remove('select.et2_date_duration'); + this.format = null; } 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) { - 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'); - this.node.append(this.format); + this.node.append(this.format); + } + this.format.empty(); for(var i = 0; i < this.options.display_format.length; i++) { this.format.append(""); } } else if (this.time_formats[this.options.display_format]) { - this.format = jQuery(""+this.time_formats[this.options.display_format]+"").appendTo(this.node); + this.format.text(this.time_formats[this.options.display_format]); } else { - this.format = jQuery(""+this.time_formats["m"]+"").appendTo(this.node); + this.format.text(this.time_formats["m"]); } }