forked from simplefocus/FlowType.JS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
flowtype.js
108 lines (92 loc) · 3.78 KB
/
flowtype.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/*
* FlowType.JS with/without jQuery/Zepto.
* Adapted by Christian Dannie Storgaard (Cybolic). Based on:
*
* FlowType.JS 1.0
* Copyright (c) 2013, Simple Focus http://simplefocus.com/
*
* FlowType.JS by Simple Focus (http://simplefocus.com/)
* is licensed under the MIT License. Read a copy of the
* license in the LICENSE.txt file or at
* http://choosealicense.com/licenses/mit
*
* Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
*/
(function(global) {
var addEvent = null,
getWidth = null,
setFontSize = null,
setLineHeight = null,
flowtype = null
;
if ( global.$ && global.$.css ) {
addEvent = function(element, eventName, callback) { $( element ).bind( eventName, callback ); };
getWidth = function(element) { return $(element).width(); };
setFontSize = function(element, size) { $(element).css('font-size', size); };
setLineHeight = function(element, height) { $(element).css('line-height', height); };
} else {
addEvent = function(element, eventName, callback) {
if ( element.addEventListener ) {
element.addEventListener( eventName, callback, false );
} else if ( element.attachEvent ) {
element.attachEvent( 'on'+eventName, callback );
} else {
element['on'+eventName] = callback;
}
};
getWidth = function(element) { return element.clientWidth; };
setFontSize = function(element, size) { element.style.fontSize = size; };
setLineHeight = function(element, height) { element.style.lineHeight = height; };
}
flowtype = function(element, options) {
options = options || {};
// Establish default settings/variables
// ====================================
options.maximum = options.maximum || 9999;
options.minimum = options.minimum || 1;
options.maxFont = options.maxFont || 9999;
options.minFont = options.minFont || 1;
options.fontRatio = options.fontRatio || 35;
options.lineRatio = options.lineRatio || 1.45;
// Do the magic math
// =================
changes = function(el) {
var elw = getWidth(el),
width = elw > options.maximum ? options.maximum : elw < options.minimum ? options.minimum : elw,
fontBase = width / options.fontRatio,
fontSize = fontBase > options.maxFont ? options.maxFont : fontBase < options.minFont ? options.minFont : fontBase
;
setFontSize(el, fontSize + 'px');
setLineHeight(el, fontSize * options.lineRatio + 'px');
};
// Make the magic visible
// ======================
if ( global.$ && global.$.fn ) {
return this.each(function() {
// Context for resize callback
var that = this;
// Attach the update method the DOM element
element[0].updateFlowType = function(){changes(that);};
// Make changes upon resize
$(window).resize(function(){changes(that);});
// Set changes on load
changes(this);
});
} else {
// Attach the update method the DOM element
element.updateFlowType = function(){changes(element);};
// Make changes upon resize
addEvent( global, 'resize', element.updateFlowType );
// Set changes on load
element.updateFlowType();
}
};
// Add jQuery/Zepto plugin if either is available
if ( global.$ && global.$.fn ) {
$.fn.flowtype = function(settings) {
flowtype.call(this, this, settings);
}
} else {
global.flowtype = flowtype;
}
}(window));