An AngularJS directive for inflating web type
npm install ng-fittextThis is a rework of the original jQuery plugin which can be found here: https://github.com/davatron5000/FitText.js.
Grab it with Bower: bower install ngFitText
Include it in your AngularJS application
``javascript`
var myApp = angular.module('myApp', ['ngFitText']);
`htmlFitText
Single
line of text
spans 100% width
$3
Because MODULARIZATION, this module doesn't come with debounce functionality included. Instead you will need to specify the functionality in the
fitTextConfigProvider:`javascript
module.config(['fitTextConfigProvider', function(fitTextConfigProvider) {
fitTextConfigProvider.config = {
debounce: _.debounce, // include a vender function like underscore or lodash
debounce: function(a,b,c) { // OR specify your own function
var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}
},
delay: 1000, // debounce delay
loadDelay: 10, // global default delay before initial calculation
compressor: 1, // global default calculation multiplier
min: 0, // global default min
min: 'inherit', // OR inherit CSS values globally
max: Number.POSITIVE_INFINITY // global default max
max: 'inherit' // OR inherit CSS values globally
};
}]);
`$3
#### v4.2.0
+ Globally
inherit CSS values with min and max parameters in fitTextConfigProvider
#### v4.1.0
+ Replace
'initial' value with more semantic 'inherit'
+ Both data-fittext-min and data-fittext-max can use the inherited CSS value by using 'inherit'#### v4.0.0
+
data-fittext-max can now take 'initial' as a value to use inherited CSS value. This allows for PX, EM or REM to be used.
+ Line heights are preserved
+ Display property is now preserved
+ New lines no longer need to be specified with an attribute
+ ng-model was mistakenly used for ng-bind - No longer need to use both ng-model and {{}} for dynamic values
+ Minified version now delivered via Bower
+ Config provider namespaced to avoid conflicts#### v3.0.0
+ Element now defaults to 100% width
+ Compressor now fine tunes from this point
+ Debounce functionality now needs to be passed in via fitTextConfigProvider
#### < v2.4.0
+ Specifying a value for data-fittext allows you to fine tune the text size. Defaults to 1. Increasing this number (ie 1.5) will resize the text more aggressively. Decreasing this number (ie 0.5) will reduce the aggressiveness of resize. data-fittext-min and data-fittext-max allow you to set upper and lower limits.
+ The element needs to either be a block element or an inline-block element with a width specified (% or px).
+ Font sizes can be limited with
data-fittext-max and data-fittext-max`