https://www.robocore.net/js/jquery.textfill.js

1/**
2 * @preserve  textfill
3 * @name      jquery.textfill.js
4 * @author    Russ Painter
5 * @author    Yu-Jie Lin
6 * @version   0.3.5
7 * @date      2013-05-08
8 * @copyright (c) 2012-2013 Yu-Jie Lin
9 * @copyright (c) 2009 Russ Painter
10 * @license   MIT License
11 * @homepage  https://github.com/jquery-textfill/jquery-textfill
12 * @example   http://jquery-textfill.github.io/jquery-textfill/index.html
13*/
14; (function($) {
15  /**
16  * Resizes an inner element's font so that the inner element completely fills the outer element.
17  * @param {Object} Options which are maxFontPixels (default=40), innerTag (default='span')
18  * @return All outer elements processed
19  */
20  $.fn.textfill = function(options) {
21    var defaults = {
22      debug: false,
23      maxFontPixels: 40,
24      minFontPixels: 4,
25      innerTag: 'span',
26      widthOnly: false,
27      callback: null,
28      complete: null,
29      explicitWidth: null,
30      explicitHeight: null
31    };
32    var Opts = $.extend(defaults, options);
33
34    function _debug() {
35      if (!Opts.debug
36      ||  typeof console == 'undefined'
37      ||  typeof console.debug == 'undefined') {
38        return;
39      }
40
41      console.debug.apply(console, arguments);
42    }
43
44    function _debug_sizing(prefix, ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels) {
45      function _m(v1, v2) {
46        var marker = ' / ';
47        if (v1 > v2) {
48          marker = ' > ';
49        } else if (v1 == v2) {
50          marker = ' = ';
51        }
52        return marker;
53      }
54
55      _debug(
56        prefix +
57        'font: ' + ourText.css('font-size') +
58        ', H: ' + ourText.height() + _m(ourText.height(), maxHeight) + maxHeight +
59        ', W: ' + ourText.width()  + _m(ourText.width() , maxWidth)  + maxWidth +
60        ', minFontPixels: ' + minFontPixels +
61        ', maxFontPixels: ' + maxFontPixels
62      );
63    }
64
65    function _sizing(prefix, ourText, func, max, maxHeight, maxWidth, minFontPixels, maxFontPixels) {
66      _debug_sizing(prefix + ': ', ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels);
67      while (minFontPixels < maxFontPixels - 1) {
68        var fontSize = Math.floor((minFontPixels + maxFontPixels) / 2)
69        ourText.css('font-size', fontSize);
70        if (func.call(ourText) <= max) {
71          minFontPixels = fontSize;
72          if (func.call(ourText) == max) {
73            break;
74          }
75        } else {
76          maxFontPixels = fontSize;
77        }
78        _debug_sizing(prefix + ': ', ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels);
79      }
80      ourText.css('font-size', maxFontPixels);
81      if (func.call(ourText) <= max) {
82        minFontPixels = maxFontPixels;
83        _debug_sizing(prefix + '* ', ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels);
84      }
85      return minFontPixels;
86    }
87
88    this.each(function() {
89      var ourText = $(Opts.innerTag + ':visible:first', this);
90      // Use explicit dimensions when specified
91      var maxHeight = Opts.explicitHeight || $(this).height();
92      var maxWidth = Opts.explicitWidth || $(this).width();
93      var oldFontSize = ourText.css('font-size');
94      var fontSize;
95
96      _debug('Opts: ', Opts);
97      _debug('Vars:' +
98        ' maxHeight: ' + maxHeight +
99        ', maxWidth: ' + maxWidth
100      );
101
102      var minFontPixels = Opts.minFontPixels;
103      var maxFontPixels = Opts.maxFontPixels <= 0 ? maxHeight : Opts.maxFontPixels;
104      var HfontSize = undefined;
105      if (!Opts.widthOnly) {
106        HfontSize = _sizing('H', ourText, $.fn.height, maxHeight, maxHeight, maxWidth, minFontPixels, maxFontPixels);
107      }
108      var WfontSize = _sizing('W', ourText, $.fn.width, maxWidth, maxHeight, maxWidth, minFontPixels, maxFontPixels);
109
110      if (Opts.widthOnly) {
111        ourText.css('font-size', WfontSize);
112      } else {
113        ourText.css('font-size', Math.min(HfontSize, WfontSize));
114      }
115      _debug('Final: ' + ourText.css('font-size'));
116
117      if (ourText.width() > maxWidth || ourText.height() > maxHeight) {
118        ourText.css('font-size', oldFontSize);
119      }
120      // call callback on each result
121      if (Opts.callback) Opts.callback(this);
122    });

123
124    // call complete when all is complete
125    if (Opts.complete) Opts.complete(this);
126
127    return this;
128  };
129})(window.jQuery);