[Laszlo-checkins] r10095 - openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml
max@openlaszlo.org
max at openlaszlo.org
Fri Jun 27 17:37:42 PDT 2008
Author: max
Date: 2008-06-27 17:37:29 -0700 (Fri, 27 Jun 2008)
New Revision: 10095
Modified:
openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzInputTextSprite.js
openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js
openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzTextSprite.js
Log:
Change 20080627-maxcarlson-F by maxcarlson at Roboto on 2008-06-27 16:47:45 PDT
in /Users/maxcarlson/openlaszlo/trunk-clean
for http://svn.openlaszlo.org/openlaszlo/trunk
Summary: Make dhtml text metrics consistent between dhtml and swf
Bugs Fixed: LPP-6451 - SWF and DHTML: Text entered into the weather app and edittext component is not vertically centered (too high)
Technical Reviewer: ptw
QA Reviewer: promanik
Details: LzSprite.js - Adjust padding, lineHeight for swfinputtext proto stylesheets. Add inputtext_size_includes_margin quirk for IE. Add regexp to change <br/> -> \r for inputtext. Only turn on safari_textarea_subtract_scrollbar_height and invisible_parent_image_sizing_fix quirks for Safari < 3.1.1. Adjust line height of swfinputtext proto styles in firefox 2. Adjust padding and margins if safari_avoid_clip_position_input_text, text_height_includes_margins and inputtext_size_includes_margin quirks are on.
LzTextSprite.js - Change getTextSize() so if text argument is null it automatically measures a single line. Include line height and character spacing in text size measurement divs. Translate <br/> -> \r for inputtext. Go back to using scrollHeight for measurements
Tests: test/lztest/lztest-textheight.lzx?debug=true&lzt=testboth runs consistently across Safari, Firefox 2, Firefox 3, IE 7 dhtml. There are still errors, but they're consistent!
Modified: openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzInputTextSprite.js
===================================================================
--- openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzInputTextSprite.js 2008-06-28 00:15:15 UTC (rev 10094)
+++ openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzInputTextSprite.js 2008-06-28 00:37:29 UTC (rev 10095)
@@ -38,7 +38,7 @@
// Should reflect CSS defaults in LzSprite.js
LzInputTextSprite.prototype.____hpadding = 2;
-LzInputTextSprite.prototype.____wpadding = 2;
+LzInputTextSprite.prototype.____wpadding = 4;
LzInputTextSprite.prototype.____crregexp = new RegExp('\\r\\n', 'g');
LzInputTextSprite.prototype.__createInputText = function(t) {
@@ -92,6 +92,11 @@
this.__LZclickdiv.appendChild(this.__LZinputclickdiv);
}
this.__LZdiv.appendChild(this.__LzInputDiv);
+
+ if (this.quirks['inputtext_size_includes_margin']) {
+ this.____hpadding = 0;
+ }
+
//Debug.write(this.__LzInputDiv.style);
this.__setTextEvents(true);
}
@@ -275,9 +280,14 @@
LzInputTextSprite.prototype.setText = function(t) {
if (t == null) return;
+ if (t.indexOf('<br/>') != -1) {
+ t = t.replace(this.br_to_newline_re, '\r')
+ //Debug.write('new text %w', t)
+ }
this.text = t;
this.__createInputText(t);
this.__LzInputDiv.value = t;
+ this.fieldHeight = null;
}
LzInputTextSprite.prototype.__setTextEvents = function(c) {
@@ -895,7 +905,7 @@
LzInputTextSprite.prototype.getTextfieldHeight = function () {
if (this._styledirty != true && this.fieldHeight != null) return this.fieldHeight
if (this.text == null || this.text == '') {
- this.fieldHeight = this.getTextSize('Yq_gy').height;
+ this.fieldHeight = this.getTextSize(null).height;
// Debug.debug('getTextfieldHeight: 0');
return this.fieldHeight;
}
@@ -906,7 +916,7 @@
oldheight = this.__LzInputDiv.style.height;
this.__LzInputDiv.style.height = 'auto';
}
- var h = this.__LzInputDiv.clientHeight;
+ var h = this.__LzInputDiv.scrollHeight;
if (h == 0 || h == null) {
h = this.getTextSize(this.text).height;
if (h > 0 && this.quirks.emulate_flash_font_metrics) {
@@ -925,7 +935,7 @@
this.__LzInputDiv.style.height = oldheight;
}
} else {
- var h = this.getTextSize('Yq_gy').height;
+ var h = this.getTextSize(null).height;
if (h != 0) {
this.fieldHeight = h;
}
Modified: openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js
===================================================================
--- openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js 2008-06-28 00:15:15 UTC (rev 10094)
+++ openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js 2008-06-28 00:37:29 UTC (rev 10095)
@@ -200,8 +200,9 @@
height: '100%',
borderWidth: 0,
backgroundColor: 'transparent',
- marginTop: '1px',
- marginLeft: '2px'
+ paddingTop: '1px',
+ paddingLeft: '1px',
+ lineHeight: '120%'
},
lzswfinputtextmultiline: {
fontFamily: 'Verdana,Vera,sans-serif',
@@ -212,8 +213,9 @@
height: '100%',
borderWidth: 0,
backgroundColor: 'transparent',
- marginTop: '2px',
- marginLeft: '2px'
+ paddingTop: '2px',
+ paddingLeft: '1px',
+ lineHeight: '120%'
},
writeCSS: function() {
var css = '';
@@ -306,6 +308,7 @@
,activate_on_mouseover: true
,ie6_improve_memory_performance: false
,text_height_includes_margins: false
+ ,inputtext_size_includes_margin: false
}
LzSprite.prototype.capabilities = {
@@ -334,6 +337,7 @@
LzSprite.prototype.inner_html_strips_newlines_re = RegExp('$', 'mg');
}
+ LzSprite.prototype.br_to_newline_re = RegExp('<br/>', 'mg');
// Divs intercept clicks if physically placed on top of an element
// that's not a parent. See LPP-2680.
// off for now
@@ -394,17 +398,12 @@
quirks['ie_mouse_events'] = true;
// workaround for IE not supporting clickable resources in views containing inputtext - see LPP-5435
quirks['fix_inputtext_with_parent_resource'] = true;
+ // IE already includes margins for inputtexts
+ quirks['inputtext_size_includes_margin'] = true;
} else if (browser.isSafari) {
- // Fix bug in where if any parent of an image is hidden the size is 0
- // TODO: Tucker claims this is fixed in the latest version of webkit
- quirks['invisible_parent_image_sizing_fix'] = true;
-
// Remap alt/option key also sends control since control-click shows context menu (see LPP-2584 - Lzpix: problem with multi-selecting images in Safari 2.0.4, dhtml)
quirks['alt_key_sends_control'] = true;
- // Safari scrollHeight needs to subtract scrollbar height
- quirks['safari_textarea_subtract_scrollbar_height'] = true;
-
// Safari doesn't like clipped or placed input text fields.
quirks['safari_avoid_clip_position_input_text'] = true;
// Safari won't show canvas tags whose parent is display: none
@@ -413,6 +412,10 @@
if (browser.version < 525.18) {
//Seems to work fine in Safari 3.1.1
quirks['canvas_div_cannot_be_clipped'] = true;
+ // Fix bug in where if any parent of an image is hidden the size is 0
+ quirks['invisible_parent_image_sizing_fix'] = true;
+ // Safari scrollHeight needs to subtract scrollbar height
+ quirks['safari_textarea_subtract_scrollbar_height'] = true;
}
quirks['document_size_use_offsetheight'] = true;
if (browser.version > 523.10) {
@@ -441,21 +444,34 @@
} else if (browser.version < 3) {
// Firefox 2.0.14 doesn't work with the correct line height of 120%
LzSprite.prototype.__defaultStyles.lzswftext.lineHeight = '119%';
+ LzSprite.prototype.__defaultStyles.lzswfinputtext.lineHeight = '119%';
+ LzSprite.prototype.__defaultStyles.lzswfinputtextmultiline.lineHeight = '119%';
} else if (browser.version < 4) {
- // Firefox 3.0 doesn't work with the correct line height of 120%
- LzSprite.prototype.__defaultStyles.lzswftext.lineHeight = '118%';
// Firefox 3.0 does not need padding added onto field height measurements
quirks['text_height_includes_margins'] = true;
}
}
if (quirks['safari_avoid_clip_position_input_text']) {
- LzSprite.prototype.__defaultStyles.lzswfinputtext.marginTop = '-2px';
- LzSprite.prototype.__defaultStyles.lzswfinputtext.marginLeft = '-2px';
- LzSprite.prototype.__defaultStyles.lzswfinputtextmultiline.marginTop = '-2px';
- LzSprite.prototype.__defaultStyles.lzswfinputtextmultiline.marginLeft = '-2px';
+ LzSprite.prototype.__defaultStyles.lzswfinputtext.paddingTop = '-1px';
+ LzSprite.prototype.__defaultStyles.lzswfinputtext.paddingLeft = '-1px';
+ LzSprite.prototype.__defaultStyles.lzswfinputtextmultiline.paddingTop = '2px';
+ LzSprite.prototype.__defaultStyles.lzswfinputtextmultiline.paddingLeft = '0px';
}
+ if (this.quirks['text_height_includes_margins']) {
+ LzSprite.prototype.__defaultStyles.lzswfinputtext.paddingTop = '0px';
+ LzSprite.prototype.__defaultStyles.lzswfinputtext.letterSpacing = '.2px';
+ LzSprite.prototype.__defaultStyles.lzswfinputtextmultiline.paddingTop = '0px';
+ LzSprite.prototype.__defaultStyles.lzswfinputtextmultiline.letterSpacing = '.2px';
+ LzSprite.prototype.__defaultStyles.lzswftext.letterSpacing = '.2px';
+ }
+ if (quirks['inputtext_size_includes_margin']) {
+ LzSprite.prototype.__defaultStyles.lzswftext.paddingTop = '0px';
+ LzSprite.prototype.__defaultStyles.lzswfinputtext.paddingTop = '0px';
+ LzSprite.prototype.__defaultStyles.lzswfinputtextmultiline.paddingTop = '0px';
+ }
+
if (quirks['css_hide_canvas_during_init']) {
if (quirks['safari_visibility_instead_of_display']) {
LzSprite.prototype.__defaultStyles.lzcanvasdiv.visibility = 'hidden';
Modified: openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzTextSprite.js
===================================================================
--- openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzTextSprite.js 2008-06-28 00:15:15 UTC (rev 10094)
+++ openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzTextSprite.js 2008-06-28 00:37:29 UTC (rev 10095)
@@ -39,9 +39,6 @@
this.__sprites[this.uid] = this;
}
//Debug.debug('new LzTextSprite', this.__LZdiv, this.owner);
- if (this.quirks['text_height_includes_margins']) {
- this.__hpadding = 2;
- }
}
LzTextSprite.prototype = new LzSprite(null);
@@ -62,6 +59,7 @@
LzTextSprite.prototype.__hpadding = 4;
LzTextSprite.prototype.__sizecacheupperbound = 1000;
LzTextSprite.prototype.selectable = true;
+LzTextSprite.prototype.resize = true;
LzTextSprite.prototype.setFontSize = function (fsize) {
if (fsize == null || fsize < 0) return;
@@ -125,12 +123,12 @@
// like to use pre-line, but that appears not to work for any
// browser. As a compromise, if the content contains newlines, we
// use 'pre' The alternative would be `t.replace(RegExp('$',
- // 'mg'), '<br />')`.
+ // 'mg'), '<br/>')`.
// TODO: [2006-10-02 ptw] Use 'pre-line' when supported.
// [max 1-23-2007] Actually, t.replace(...) gives the desired behavior...
if (this.multiline && t && (t.indexOf("\n") >= 0)) {
if (this.quirks['inner_html_strips_newlines']) {
- t = t.replace(this.inner_html_strips_newlines_re, '<br />');
+ t = t.replace(this.inner_html_strips_newlines_re, '<br/>');
}
}
if (t && this.quirks['inner_html_no_entity_apos']) {
@@ -161,6 +159,9 @@
}
this.__LZdiv.style.overflow = 'hidden';
}
+ if (this.quirks['text_height_includes_margins']) {
+ this.__hpadding = m ? 3 : 4;
+ }
// To update height
this.setText(this.text, true);
}
@@ -179,9 +180,11 @@
}
LzTextSprite.prototype.getTextHeight = function () {
- var h = this.getTextSize('Yq_gy', true).height;
- if (h > 0 && (! this.multiline) && this.quirks.emulate_flash_font_metrics) {
- h -= this.__hpadding;
+ var h = this.getTextSize(null, true).height;
+ if (h > 0 && this.quirks.emulate_flash_font_metrics) {
+ if (! this.multiline) {
+ h -= this.__hpadding;
+ }
}
return h;
}
@@ -189,8 +192,8 @@
LzTextSprite.prototype.getTextfieldHeight = function () {
if (this._styledirty != true && this.fieldHeight != null) return this.fieldHeight
if (this.text == null || this.text == '') {
- this.fieldHeight = this.getTextSize('Yq_gy').height;
-// Debug.debug('getTextfieldHeight: 0');
+ this.fieldHeight = this.getTextSize(null).height;
+ //Debug.debug('getTextfieldHeight: 0', this.fieldHeight);
return this.fieldHeight;
}
@@ -203,12 +206,12 @@
var h = this.__LZdiv.clientHeight;
if (h == 0 || h == null) {
h = this.getTextSize(this.text).height;
- if (h > 0 && this.quirks.emulate_flash_font_metrics && this.quirks.text_height_includes_margins != true) {
+ if (h > 0 && this.quirks.emulate_flash_font_metrics) {
h += this.__hpadding;
}
} else {
if (h == 2) h = this.getTextSize(this.text).height;
- if (h > 0 && this.quirks.emulate_flash_font_metrics && this.quirks.text_height_includes_margins != true) {
+ if (h > 0 && this.quirks.emulate_flash_font_metrics) {
h += this.__hpadding;
}
this.fieldHeight = h;
@@ -218,7 +221,7 @@
this.__LZdiv.style.height = oldheight;
}
} else {
- var h = this.getTextSize('Yq_gy').height;
+ var h = this.getTextSize(null).height;
if (h != 0) {
this.fieldHeight = h;
}
@@ -236,6 +239,8 @@
}
LzTextSprite.prototype._styledirty = true;
LzTextSprite.prototype.getTextSize = function (string, ignorewidth) {
+ // Measure a single line
+ if (string == null || string == '') string = 'Yq_gy"9;';
if (this._styledirty != true) {
var style = this._stylecache;
} else {
@@ -245,28 +250,22 @@
style += ';font-style: ' + this._fontStyle;
style += ';font-weight: ' + this._fontWeight;
style += ';font-family: ' + this._fontFamily;
+ style += ';line-height: ' + LzSprite.prototype.__defaultStyles.lzswftext.lineHeight;
+ if (this.quirks['text_height_includes_margins']) {
+ style += ';letter-spacing: .2px';
+ }
if (this.multiline && ignorewidth != true) {
if (this.width) style += ';width: ' + this.width + 'px';
}
- if (this.quirks['text_measurement_use_insertadjacenthtml']) {
- if (this.__LzInputDiv != null) {
- style += ';white-space: pre';
- } else {
- style += ';white-space: ' + this._whiteSpace;
- }
- } else {
- if (this.__LzInputDiv != null) {
- style += ';white-space: pre';
- } else {
- style += ';white-space: ' + this._whiteSpace;
- }
- }
+ style += ';white-space: ' + this._whiteSpace;
this._stylecache = style;
this._styledirty = false;
}
+ //Debug.write('getTextSize', this._stylecache, this.dirty);
+
var root = document.getElementById('lzTextSizeCache');
if (LzTextSprite.prototype._sizecache.counter > 0 && LzTextSprite.prototype._sizecache.counter % LzTextSprite.prototype.__sizecacheupperbound == 0) {
@@ -298,7 +297,7 @@
if (this.quirks['text_measurement_use_insertadjacenthtml']) {
if (this.multiline && string && this.quirks['inner_html_strips_newlines']) {
- string = string.replace(this.inner_html_strips_newlines_re, '<br />');
+ string = string.replace(this.inner_html_strips_newlines_re, '<br/>');
}
var tagname = 'span';
var mdiv = _textsizecache['lzdiv~~~' + tagname];
@@ -315,7 +314,7 @@
} else {
if (this.__LzInputDiv == null) {
if (this.multiline && string && this.quirks['inner_html_strips_newlines']) {
- string = string.replace(this.inner_html_strips_newlines_re, '<br />');
+ string = string.replace(this.inner_html_strips_newlines_re, '<br/>');
}
}
var tagname = this.multiline ? 'div' : 'span';
More information about the Laszlo-checkins
mailing list