git.roojs.org Git - roojs1/blob - Roo/util/TextMetrics.js

   1 /*
   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  * <script type="text/javascript">
  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  * @singleton
  18  */
  19 Roo.util.TextMetrics = function(){
  20     var shared;
  21     return {
  22         /**
  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         measure : function(el, text, fixedWidth){
  32             if(!shared){
  33                 shared = Roo.util.TextMetrics.Instance(el, fixedWidth);
  34             }
  35             shared.bind(el);
  36             shared.setFixedWidth(fixedWidth || 'auto');
  37             return shared.getSize(text);
  38         },
  39
  40         /**
  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         createInstance : function(el, fixedWidth){
  49             return Roo.util.TextMetrics.Instance(el, fixedWidth);
  50         }
  51     };
  52 }();
  53
  54
  55
  56 Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth){
  57     var ml = new Roo.Element(document.createElement('div'));
  58     document.body.appendChild(ml.dom);
  59     ml.position('absolute');
  60     ml.setLeftTop(-1000, -1000);
  61     ml.hide();
  62
  63     if(fixedWidth){
  64         ml.setWidth(fixedWidth);
  65     }
  66
  67     var instance = {
  68         /**
  69          * Returns the size of the specified text based on the internal element's style and width properties
  70          * @memberOf Roo.util.TextMetrics.Instance#
  71          * @param {String} text The text to measure
  72          * @return {Object} An object containing the text's size {width: (width), height: (height)}
  73          */
  74         getSize : function(text){
  75             ml.update(text);
  76             var s = ml.getSize();
  77             ml.update('');
  78             return s;
  79         },
  80
  81         /**
  82          * Binds this TextMetrics instance to an element from which to copy existing CSS styles
  83          * that can affect the size of the rendered text
  84          * @memberOf Roo.util.TextMetrics.Instance#
  85          * @param {String/HTMLElement} el The element, dom node or id
  86          */
  87         bind : function(el){
  88             ml.setStyle(
  89                 Roo.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height')
  90             );
  91         },
  92
  93         /**
  94          * Sets a fixed width on the internal measurement element.  If the text will be multiline, you have
  95          * to set a fixed width in order to accurately measure the text height.
  96          * @memberOf Roo.util.TextMetrics.Instance#
  97          * @param {Number} width The width to set on the element
  98          */
  99         setFixedWidth : function(width){
 100             ml.setWidth(width);
 101         },
 102
 103         /**
 104          * Returns the measured width of the specified text
 105          * @memberOf Roo.util.TextMetrics.Instance#
 106          * @param {String} text The text to measure
 107          * @return {Number} width The width in pixels
 108          */
 109         getWidth : function(text){
 110             ml.dom.style.width = 'auto';
 111             return this.getSize(text).width;
 112         },
 113
 114         /**
 115          * Returns the measured height of the specified text.  For multiline text, be sure to call
 116          * {@link #setFixedWidth} if necessary.
 117          * @memberOf Roo.util.TextMetrics.Instance#
 118          * @param {String} text The text to measure
 119          * @return {Number} height The height in pixels
 120          */
 121         getHeight : function(text){
 122             return this.getSize(text).height;
 123         }
 124     };
 125
 126     instance.bind(bindTo);
 127
 128     return instance;
 129 };
 130
 131 // backwards compat
 132 Roo.Element.measureText = Roo.util.TextMetrics.measure;