git.roojs.org Git - roojs1/blob - docs/src/Roo_util_TextMetrics.js.html

   1 <html><head><title>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">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12
  13 /**
  14  * @class Roo.util.TextMetrics
  15  * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
  16  * wide, in pixels, a given block of text will be.
  17  * @static
  18  */
  19 </span><span class="jsdoc-var">Roo.util.TextMetrics </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  20     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">shared</span><span class="jsdoc-syntax">;
  21     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
  22         </span><span class="jsdoc-comment">/**
  23          * Measures the size of the specified text
  24          * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
  25          * that can affect the size of the rendered text
  26          * @param {String} text The text to measure
  27          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
  28          * in order to accurately measure the text height
  29          * @return {Object} An object containing the text's size {width: (width), height: (height)}
  30          */
  31         </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">){
  32             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">shared</span><span class="jsdoc-syntax">){
  33                 </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">);
  34             }
  35             </span><span class="jsdoc-var">shared.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
  36             </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">);
  37             </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">);
  38         },
  39
  40         </span><span class="jsdoc-comment">/**
  41          * Return a unique TextMetrics instance that can be bound directly to an element and reused.  This reduces
  42          * the overhead of multiple calls to initialize the style properties on each measurement.
  43          * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
  44          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
  45          * in order to accurately measure the text height
  46          * @return {Roo.util.TextMetrics.Instance} instance The new instance
  47          */
  48         </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">){
  49             </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">);
  50         }
  51     };
  52 }();
  53
  54 </span><span class="jsdoc-comment">/**
  55  * @class Roo.util.TextMetrics.Instance
  56  * Instance of  TextMetrics Calcuation
  57  * @constructor
  58  * Create a new TextMetrics Instance
  59  * @param {Object} bindto
  60  * @param {Boolean} fixedWidth
  61  */
  62
  63 </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">)
  64 {
  65     </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">));
  66     </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">);
  67     </span><span class="jsdoc-var">ml.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
  68     </span><span class="jsdoc-var">ml.setLeftTop</span><span class="jsdoc-syntax">(-1000, -1000);
  69     </span><span class="jsdoc-var">ml.hide</span><span class="jsdoc-syntax">();
  70
  71     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">){
  72         </span><span class="jsdoc-var">ml.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">);
  73     }
  74
  75     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">instance </span><span class="jsdoc-syntax">= {
  76         </span><span class="jsdoc-comment">/**
  77          * Returns the size of the specified text based on the internal element's style and width properties
  78          * @param {String} text The text to measure
  79          * @return {Object} An object containing the text's size {width: (width), height: (height)}
  80          */
  81         </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">){
  82             </span><span class="jsdoc-var">ml.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
  83             </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">();
  84             </span><span class="jsdoc-var">ml.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
  85             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
  86         },
  87
  88         </span><span class="jsdoc-comment">/**
  89          * Binds this TextMetrics instance to an element from which to copy existing CSS styles
  90          * that can affect the size of the rendered text
  91          * @param {String/HTMLElement} el The element, dom node or id
  92          */
  93         </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">){
  94             </span><span class="jsdoc-var">ml.setStyle</span><span class="jsdoc-syntax">(
  95                 </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">)
  96             );
  97         },
  98
  99         </span><span class="jsdoc-comment">/**
 100          * Sets a fixed width on the internal measurement element.  If the text will be multiline, you have
 101          * to set a fixed width in order to accurately measure the text height.
 102          * @param {Number} width The width to set on the element
 103          */
 104         </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">){
 105             </span><span class="jsdoc-var">ml.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
 106         },
 107
 108         </span><span class="jsdoc-comment">/**
 109          * Returns the measured width of the specified text
 110          * @param {String} text The text to measure
 111          * @return {Number} width The width in pixels
 112          */
 113         </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">){
 114             </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">;
 115             </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">;
 116         },
 117
 118         </span><span class="jsdoc-comment">/**
 119          * Returns the measured height of the specified text.  For multiline text, be sure to call
 120          * {@link #setFixedWidth} if necessary.
 121          * @param {String} text The text to measure
 122          * @return {Number} height The height in pixels
 123          */
 124         </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">){
 125             </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">;
 126         }
 127     };
 128
 129     </span><span class="jsdoc-var">instance.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bindTo</span><span class="jsdoc-syntax">);
 130
 131     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">instance</span><span class="jsdoc-syntax">;
 132 };
 133
 134 </span><span class="jsdoc-comment">// backwards compat
 135 </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>