150 lines
4.8 KiB
JavaScript
150 lines
4.8 KiB
JavaScript
/*
|
|
* CircleType 0.34
|
|
* Peter Hrynkow
|
|
* Copyright 2013, Licensed GPL & MIT
|
|
*
|
|
*/
|
|
|
|
$.fn.circleType = function (options) {
|
|
|
|
var settings = {
|
|
dir: 1,
|
|
position: 'relative'
|
|
};
|
|
if (typeof ($.fn.lettering) !== 'function') {
|
|
console.log('Lettering.js is required');
|
|
return;
|
|
}
|
|
return this.each(function () {
|
|
|
|
if (options) {
|
|
$.extend(settings, options);
|
|
}
|
|
var elem = this,
|
|
delta = (180 / Math.PI),
|
|
ch = parseInt($(elem).css('line-height'), 10),
|
|
fs = parseInt($(elem).css('font-size'), 10),
|
|
txt = elem.innerHTML.replace(/^\s+|\s+$/g, '').replace(/\s/g, ' '),
|
|
letters,
|
|
center;
|
|
|
|
elem.innerHTML = txt
|
|
$(elem).lettering();
|
|
|
|
elem.style.position = settings.position;
|
|
|
|
letters = elem.getElementsByTagName('span');
|
|
center = Math.floor(letters.length / 2)
|
|
|
|
var layout = function () {
|
|
var tw = 0,
|
|
i,
|
|
offset = 0,
|
|
minRadius,
|
|
origin,
|
|
innerRadius,
|
|
l, style, r, transform;
|
|
|
|
for (i = 0; i < letters.length; i++) {
|
|
tw += letters[i].offsetWidth;
|
|
}
|
|
minRadius = (tw / Math.PI) / 2 + ch;
|
|
|
|
if (settings.fluid && !settings.fitText) {
|
|
settings.radius = Math.max(elem.offsetWidth / 2, minRadius);
|
|
} else if (!settings.radius) {
|
|
settings.radius = minRadius;
|
|
}
|
|
|
|
if (settings.dir === -1) {
|
|
origin = 'center ' + (-settings.radius + ch) / fs + 'em';
|
|
} else {
|
|
origin = 'center ' + settings.radius / fs + 'em';
|
|
}
|
|
|
|
innerRadius = settings.radius - ch;
|
|
|
|
for (i = 0; i < letters.length; i++) {
|
|
l = letters[i];
|
|
offset += l.offsetWidth / 2 / innerRadius * delta;
|
|
l.rot = offset;
|
|
offset += l.offsetWidth / 2 / innerRadius * delta;
|
|
}
|
|
for (i = 0; i < letters.length; i++) {
|
|
l = letters[i]
|
|
style = l.style
|
|
r = (-offset * settings.dir / 2) + l.rot * settings.dir
|
|
transform = 'rotate(' + r + 'deg)';
|
|
|
|
style.position = 'absolute';
|
|
style.left = '50%';
|
|
style.marginLeft = -(l.offsetWidth / 2) / fs + 'em';
|
|
|
|
style.webkitTransform = transform;
|
|
style.MozTransform = transform;
|
|
style.OTransform = transform;
|
|
style.msTransform = transform;
|
|
style.transform = transform;
|
|
|
|
style.webkitTransformOrigin = origin;
|
|
style.MozTransformOrigin = origin;
|
|
style.OTransformOrigin = origin;
|
|
style.msTransformOrigin = origin;
|
|
style.transformOrigin = origin;
|
|
if (settings.dir === -1) {
|
|
style.bottom = 0;
|
|
}
|
|
}
|
|
|
|
if (settings.fitText) {
|
|
if (typeof ($.fn.fitText) !== 'function') {
|
|
console.log('FitText.js is required when using the fitText option');
|
|
} else {
|
|
$(elem).fitText();
|
|
$(window).resize(function () {
|
|
updateHeight();
|
|
});
|
|
}
|
|
}
|
|
updateHeight();
|
|
};
|
|
|
|
var getBounds = function (elem) {
|
|
var docElem = document.documentElement,
|
|
box = elem.getBoundingClientRect();
|
|
return {
|
|
top: box.top + window.pageYOffset - docElem.clientTop,
|
|
left: box.left + window.pageXOffset - docElem.clientLeft,
|
|
height: box.height
|
|
};
|
|
};
|
|
|
|
var updateHeight = function () {
|
|
var mid = getBounds(letters[center]),
|
|
first = getBounds(letters[0]),
|
|
h;
|
|
if (mid.top < first.top) {
|
|
h = first.top - mid.top + first.height;
|
|
} else {
|
|
h = mid.top - first.top + first.height;
|
|
}
|
|
elem.style.height = h + 'px';
|
|
}
|
|
|
|
if (settings.fluid && !settings.fitText) {
|
|
$(window).resize(function () {
|
|
layout();
|
|
});
|
|
}
|
|
|
|
if (document.readyState !== "complete") {
|
|
elem.style.visibility = 'hidden';
|
|
$(window).load(function () {
|
|
elem.style.visibility = 'visible';
|
|
layout();
|
|
});
|
|
} else {
|
|
layout();
|
|
}
|
|
});
|
|
}; |