+++ /dev/null
-<html><head><title>/home/alan/gitlive/roojs1/Roo/util/TextMetrics.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-/**
- * @class Roo.util.TextMetrics
- * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
- * wide, in pixels, a given block of text will be.
- * @singleton
- */
-</span><span class="jsdoc-var">Roo.util.TextMetrics </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">shared</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
- </span><span class="jsdoc-comment">/**
- * Measures the size of the specified text
- * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
- * that can affect the size of the rendered text
- * @param {String} text The text to measure
- * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
- * in order to accurately measure the text height
- * @return {Object} An object containing the text's size {width: (width), height: (height)}
- */
- </span><span class="jsdoc-var">measure </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">shared</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">shared </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.util.TextMetrics.Instance</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">);
- }
- </span><span class="jsdoc-var">shared.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">shared.setFixedWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fixedWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">shared.getSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
- },
-
- </span><span class="jsdoc-comment">/**
- * Return a unique TextMetrics instance that can be bound directly to an element and reused. This reduces
- * the overhead of multiple calls to initialize the style properties on each measurement.
- * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
- * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
- * in order to accurately measure the text height
- * @return {Roo.util.TextMetrics.Instance} instance The new instance
- */
- </span><span class="jsdoc-var">createInstance </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.util.TextMetrics.Instance</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">);
- }
- };
-}();
-
-
-
-</span><span class="jsdoc-var">Roo.util.TextMetrics.Instance </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bindTo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ml </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Element</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">));
- </span><span class="jsdoc-var">document.body.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ml.dom</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">ml.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">ml.setLeftTop</span><span class="jsdoc-syntax">(-1000, -1000);
- </span><span class="jsdoc-var">ml.hide</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">ml.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">);
- }
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">instance </span><span class="jsdoc-syntax">= {
- </span><span class="jsdoc-comment">/**
- * Returns the size of the specified text based on the internal element's style and width properties
- * @memberOf Roo.util.TextMetrics.Instance#
- * @param {String} text The text to measure
- * @return {Object} An object containing the text's size {width: (width), height: (height)}
- */
- </span><span class="jsdoc-var">getSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">ml.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ml.getSize</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">ml.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Binds this TextMetrics instance to an element from which to copy existing CSS styles
- * that can affect the size of the rendered text
- * @memberOf Roo.util.TextMetrics.Instance#
- * @param {String/HTMLElement} el The element, dom node or id
- */
- </span><span class="jsdoc-var">bind </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">ml.setStyle</span><span class="jsdoc-syntax">(
- </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'font-size'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'font-style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'font-weight'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'font-family'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'line-height'</span><span class="jsdoc-syntax">)
- );
- },
-
- </span><span class="jsdoc-comment">/**
- * Sets a fixed width on the internal measurement element. If the text will be multiline, you have
- * to set a fixed width in order to accurately measure the text height.
- * @memberOf Roo.util.TextMetrics.Instance#
- * @param {Number} width The width to set on the element
- */
- </span><span class="jsdoc-var">setFixedWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">ml.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
- },
-
- </span><span class="jsdoc-comment">/**
- * Returns the measured width of the specified text
- * @memberOf Roo.util.TextMetrics.Instance#
- * @param {String} text The text to measure
- * @return {Number} width The width in pixels
- */
- </span><span class="jsdoc-var">getWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">ml.dom.style.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.width</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Returns the measured height of the specified text. For multiline text, be sure to call
- * {@link #setFixedWidth} if necessary.
- * @memberOf Roo.util.TextMetrics.Instance#
- * @param {String} text The text to measure
- * @return {Number} height The height in pixels
- */
- </span><span class="jsdoc-var">getHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.height</span><span class="jsdoc-syntax">;
- }
- };
-
- </span><span class="jsdoc-var">instance.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bindTo</span><span class="jsdoc-syntax">);
-
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">instance</span><span class="jsdoc-syntax">;
-};
-
-</span><span class="jsdoc-comment">// backwards compat
-</span><span class="jsdoc-var">Roo.Element.measureText </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.util.TextMetrics.measure</span><span class="jsdoc-syntax">;</span></code></body></html>
\ No newline at end of file
projects / roojs1 / blobdiff