1/** 2* Gumby FitText 3* 4* Adapted from the awesome FitText jQuery plugin 5* brought to you by Paravel - http://paravelinc.com/ 6*/ 7!function() { 8 9 'use strict'; 10 11 function FitText($el) { 12 13 Gumby.debug('Initializing FitText', $el); 14 15 this.$el = $el; 16 17 this.rate = 0; 18 this.fontSizes = {}; 19 this.debugDelay = 0; 20 21 // set up module based on attributes 22 this.setup(); 23 24 var scope = this; 25 26 // re-initialize module 27 this.$el.on('gumby.initialize', function() { 28 Gumby.debug('Re-initializing FitText', scope.$el); 29 scope.setup(); 30 scope.resize(); 31 }); 32 33 // lets go 34 $(window).on('load resize orientationchange', function() { 35 scope.resize(); 36 }); 37 38 this.resize(); 39 } 40 41 // set up module based on attributes 42 FitText.prototype.setup = function() { 43 // optional compressor rate 44 this.rate = Number(Gumby.selectAttr.apply(this.$el, ['rate'])) || 1; 45 // optional font sizes (min|max) 46 this.fontSizes = this.parseSizes(Gumby.selectAttr.apply(this.$el, ['sizes'])); 47 }; 48 49 // apply the resizing 50 FitText.prototype.resize = function() { 51 var size = this.calculateSize(), 52 scope = this; 53 54 this.$el.css('font-size', size); 55 56 // wrap debug in timeout so not printing on every resize event 57 clearTimeout(this.debugDelay); 58 this.debugDelay = setTimeout(function() { 59 Gumby.debug('Updated font size to '+size+'px', scope.$el); 60 }, 200); 61 }; 62 63 // calculate the font size 64 FitText.prototype.calculateSize = function() { 65 return Math.max(Math.min(this.$el.width() / (this.rate*10), parseFloat(this.fontSizes.max)), parseFloat(this.fontSizes.min)); 66 }; 67 68 // parse size attributes with min|max syntax 69 FitText.prototype.parseSizes = function(attrStr) { 70 var sizes = { 71 min: Number.NEGATIVE_INFINITY, 72 max: Number.POSITIVE_INFINITY 73 }; 74 75 // attribute is optional 76 if(!attrStr) { return sizes; } 77 78 // min and/or max specified 79 if(attrStr.indexOf('|') > -1) { 80 attrStr = attrStr.split('|'); 81 82 // both are optional 83 sizes.min = Number(attrStr[0]) || sizes.min; 84 sizes.max = Number(attrStr[1]) || sizes.max; 85 } 86 87 // only one value specific without | so use as min 88 sizes.min = Number(attrStr) || sizes.min; 89 90 return sizes; 91 }; 92 93 // add initialisation 94 Gumby.addInitalisation('fittext', function(all) { 95 $('.fittext').each(function() { 96 var $this = $(this); 97 98 // this element has already been initialized 99 // and we're only initializing new modules 100 if($this.data('isFittext') && !all) { 101 return true; 102 103 // this element has already been initialized 104 // and we need to reinitialize it 105 } else if($this.data('isFittext') && all) { 106 $this.trigger('gumby.initialize'); 107 return true; 108 } 109 110 // mark element as initialized 111 $this.data('isFittext', true); 112 new FitText($this); 113 }); 114 }); 115 116 // register UI module 117 Gumby.UIModule({ 118 module: 'fittext', 119 events: ['initialize'], 120 init: function() { 121 Gumby.initialize('fittext'); 122 } 123 }); 124}(); 125