From e151398d9491ca8dd333aa2cd0a8d2f15e68f8cd Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Thu, 8 Sep 2011 17:11:49 +0000 Subject: [PATCH] Add read-only implementation of date-duration --- etemplate/js/et2_widget_date.js | 120 +++++++++++++++++++++++++++----- 1 file changed, 104 insertions(+), 16 deletions(-) diff --git a/etemplate/js/et2_widget_date.js b/etemplate/js/et2_widget_date.js index c89942b1f8..1412c0c4ea 100644 --- a/etemplate/js/et2_widget_date.js +++ b/etemplate/js/et2_widget_date.js @@ -308,6 +308,8 @@ var et2_date_duration = et2_date.extend({ legacyOptions: ["data_format","display_format", "hours_per_day", "empty_not_0", "short_labels"], + time_formats: {"d":"d","h":"h","m":"m"}, + init: function() { this._super.apply(this, arguments); @@ -319,6 +321,13 @@ var et2_date_duration = et2_date.extend({ this.options.percent_allowed = true; this.options.display_format = this.options.display_format.replace("%",""); } + + // Get translations + this.time_formats = { + "d": this.options.short_labels ? egw.lang("m") : egw.lang("Days"), + "h": this.options.short_labels ? egw.lang("h") : egw.lang("Hours"), + "m": this.options.short_labels ? egw.lang("m") : egw.lang("Minutes") + }, this.createInputWidget(); }, @@ -328,22 +337,16 @@ var et2_date_duration = et2_date.extend({ this.duration = $j(document.createElement("input")).attr("size", "2"); this.node.append(this.duration); - // Time format labels - var time_formats = { - "d": this.options.short_labels ? egw.lang("m") : egw.lang("Days"), - "h": this.options.short_labels ? egw.lang("h") : egw.lang("Hours"), - "m": this.options.short_labels ? egw.lang("m") : egw.lang("Minutes") - }; if(this.options.display_format.length > 1) { this.format = $j(document.createElement("select")); this.node.append(this.format); for(var i = 0; i < this.options.display_format.length; i++) { - this.format.append(""); + this.format.append(""); } } else { - this.node.append(time_formats[this.options.display_format]); + this.format = $j(document.createElement(""+this.time_formats[this.options.display_format])+"").appendTo(this.node); } }, attachToDOM: function() { @@ -384,6 +387,40 @@ var et2_date_duration = et2_date.extend({ }, set_value: function(_value) { this.options.value = _value; + + var display = this._convert_to_display(_value); + + // Set display + if(this.duration[0].nodeName == "INPUT") + { + this.duration.val(display.value); + } + else + { + this.duration.text(display.value + " "); + } + + // Set unit as figured for display + if(display.unit != this.options.display_format) + { + if(this.format.children().length > 1) { + $j("option[value='"+display.unit+"']",this.format).attr('selected','selected'); + } + else + { + this.format.text(this.time_formats[display.unit]); + } + } + }, + + /** + * Converts the value in data format into value in display format. + * + * @param _value int/float Data in data format + * + * @return Object {value: Value in display format, unit: unit for display} + */ + _convert_to_display: function(_value) { if (_value) { // Put value into minutes for further processing @@ -419,14 +456,7 @@ var et2_date_duration = et2_date.extend({ _value = _value.replace('.',sep); } - // Set unit as figured above - if(_unit != this.options.display_format && this.format) - { - $j("option[value='"+_unit+"']",this.format).attr('selected','selected'); - } - - // Set display - this.duration.val(_value); + return {value: _value, unit:_unit}; }, /** @@ -462,6 +492,64 @@ var et2_date_duration = et2_date.extend({ }); et2_register_widget(et2_date_duration, ["date-duration"]); + +var et2_date_duration_ro = et2_date_duration.extend({ + createInputWidget: function() { + + this.node = $j(document.createElement("span")); + var display = this._convert_to_display(this.options.value); + this.duration = $j(document.createElement("span")).appendTo(this.node); + this.format = $j(document.createElement("span")).appendTo(this.node); + }, + + /** + * Code for implementing et2_IDetachedDOM + * Fast-clonable read-only widget that only deals with DOM nodes, not the widget tree + */ + + /** + * Build a list of attributes which can be set when working in the + * "detached" mode in the _attrs array which is provided + * by the calling code. + */ + getDetachedAttributes: function(_attrs) { + _attrs.push("value"); + }, + + /** + * Returns an array of DOM nodes. The (relativly) same DOM-Nodes have to be + * passed to the "setDetachedAttributes" function in the same order. + */ + getDetachedNodes: function() { + return [this.duration[0], this.format[0]]; + }, + + /** + * Sets the given associative attribute->value array and applies the + * attributes to the given DOM-Node. + * + * @param _nodes is an array of nodes which has to be in the same order as + * the nodes returned by "getDetachedNodes" + * @param _values is an associative array which contains a subset of attributes + * returned by the "getDetachedAttributes" function and sets them to the + * given values. + */ + setDetachedAttributes: function(_nodes, _values) { + for(var i = 0; i < _nodes.length; i++) { + // Clear the node + for (var i = _node.childNodes.length - 1; i >= 0; i--) + { + _node.removeChild(_node.childNodes[i]); + } + } + var display = this._convert_to_display(_values.value); + _nodes[0].appendChild(document.createTextNode(display.value)); + _nodes[1].appendChild(document.createTextNode(display.unit)); + } + +}); +et2_register_widget(et2_date_duration_ro, ["date-duration_ro"]); + /** * et2_date_ro is the readonly implementation of some date widget. */