File: /home/clinicamaciel/www/wp-content/plugins/vc-extensions-bundle/sticker/js/sticker.js
/**
* Sticker.js: A Javascript library that allows you to create a Sticker Effect
*
* @project-site http://stickerjs.cmiscm.com/
* @repository https://github.com/cmiscm/stickerjs
* @author Jongmin Kim - cmiscm.com
* @version 1.0 (2014/02/05)
* @license MIT License
*/
(function () {
var _direction, _savePos = null,
_prefixes = ['webkit', 'Moz', 'ms', 'O'],
_aniTrans = 'all 0.6s cubic-bezier(.23,1,.32,1)',
_setTrans = 'all 0s',
newStyle = document.createElement('style');
newStyle.appendChild(document.createTextNode("\
.shadowL {background: -moz-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.01) 1%, rgba(0,0,0,0.7) 100%);background: -webkit-gradient(linear, right top, left top, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.7)));background: -webkit-linear-gradient(right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: -o-linear-gradient(right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: -ms-linear-gradient(right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);}\
.shadowR {background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.01) 1%, rgba(0,0,0,0.7) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.7)));background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);}\
.shadowB {background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.01) 1%, rgba(0,0,0,0.7) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.7)));background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);}\
.shadowT {background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.01) 1%, rgba(0,0,0,0.7) 100%);background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.7)));background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);background: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);}"));
document.head.appendChild(newStyle);
function vendor(el, prop) {
var s = el.style, pp, i;
prop = prop.charAt(0).toUpperCase() + prop.slice(1);
for(i=0; i<_prefixes.length; i++) {
pp = _prefixes[i]+prop;
if(s[pp] !== undefined) return pp;
}
if(s[prop] !== undefined) return prop;
}
function css(el, prop) {
for (var n in prop) el.style[vendor(el, n)||n] = prop[n];
}
function createEl(tag, prop) {
var el = document.createElement(tag || 'div');
css(el, prop);
return el;
}
function checkDerection(e, pos, sizeQ) {
var fx = pos.x, fy = pos.y, tx = e.pageX - fx, ty = e.pageY - fy, direction;
if (tx < sizeQ) direction = 0; // left
else if (tx > sizeQ * 3) direction = 1; // right
else if (ty < sizeQ) direction = 2; // top
else direction = 3; // bottom
return direction;
}
function checkPos(e, pos, size) {
var fx = pos.x, fy = pos.y, tx = e.pageX - fx, ty = e.pageY - fy, value,
a = size - tx, b = size - ty, c = tx >> 1, d = ty >> 1, e = a >> 1, f = b >> 1;
if (_direction == 0) value = {bx:-size, by:0, sx:-1, sy:1, bs:'shadowL', bmx:-size + tx, bmy:0, bsw:tx, bsh:size, bsx:a, bsy:0, cw:size - c, ch:size, cx:c, cy:0, dw:c, dh:size, dx:c - (c >> 1), dy:0}; // left
else if (_direction == 1) value = {bx:size, by:0, sx:-1, sy:1, bs:'shadowR', bmx:tx, bmy:0, bsw:a, bsh:size, bsx:0, bsy:0, cw:size - e, ch:size, cx:0, cy:0, dw:e, dh:size, dx:size - a + (e >> 1), dy:0}; // right
else if (_direction == 2) value = {bx:0, by:-size, sx:1, sy:-1, bs:'shadowT', bmx:0, bmy:-size + ty, bsw:size, bsh:ty, bsx:0, bsy:b, cw:size, ch:size - d, cx:0, cy:d, dw:size, dh:d, dx:0, dy:d - (d >> 1)}; // top
else value = {bx:0, by:size, sx:1, sy:-1, bs:'shadowB', bmx:0, bmy:ty, bsw:size, bsh:b, bsx:0, bsy:0, cw:size, ch:size - f, cx:0, cy:0, dw:size, dh:f, dx:0, dy:size - b + (f >> 1)}; // bottom
return value;
}
function onEnter(e, value) {
var cpos = value.container.getBoundingClientRect(),
mpos = {x:cpos.left + window.pageXOffset, y:cpos.top + window.pageYOffset};
_direction = checkDerection(e, mpos, value.sizeQ);
_savePos = checkPos(e, mpos, value.size);
_savePos.pos = mpos;
var bx = _savePos.bx, by = _savePos.by, sx = _savePos.sx, sy = _savePos.sy, bs = _savePos.bs;
value.backShadow.className = value.depth.className = 'sticker-shadow ' + bs;
css(value.mask, {
transition: _setTrans,
width: value.size + 'px',
height: value.size + 'px',
transform: 'translate(' + 0 + 'px, ' + 0 + 'px)'
});
css(value.move, {
transition: _setTrans,
transform: 'translate(' + 0 + 'px, ' + 0 + 'px)'
});
css(value.back, {
transition: _setTrans,
transform: 'translate(' + bx + 'px, ' + by + 'px)'
});
css(value.backImg, {
transform: 'scaleX(' + sx + ') scaleY(' + sy + ')'
});
css(value.depth, {
transform: 'translate(' + -10000 + 'px, ' + -10000 + 'px)'
});
}
function onLeave(e, value) {
if (_savePos == null) return;
var bx = _savePos.bx, by = _savePos.by;
css(value.mask, {
transition: _aniTrans,
width: value.size + 'px',
height: value.size + 'px',
transform: 'translate(' + 0 + 'px, ' + 0 + 'px)'
});
css(value.move, {
transition: _aniTrans,
transform: 'translate(' + 0 + 'px, ' + 0 + 'px)'
});
css(value.back, {
transition: _aniTrans,
transform: 'translate(' + bx + 'px, ' + by + 'px)'
});
css(value.depth, {
transform: 'translate(' + -10000 + 'px, ' + -10000 + 'px)'
});
_savePos = null;
}
function onMove(e, value) {
if (_savePos == null) {
onEnter(e, value);
window.document.addEventListener('mouseup', function (e) {
this.removeEventListener('mouseup', arguments.callee, false);
onLeave(e, value);
}, false);
}
var pos = checkPos(e, _savePos.pos, value.size),
bmx = pos.bmx, bmy = pos.bmy,
bsw = pos.bsw, bsh = pos.bsh, bsx = pos.bsx, bsy = pos.bsy,
cw = pos.cw, ch = pos.ch, cx = pos.cx, cy = pos.cy,
dw = pos.dw, dh = pos.dh, dx = pos.dx, dy = pos.dy;
css(value.mask, {
width: cw + 'px',
height: ch + 'px',
transform: 'translate(' + cx + 'px, ' + cy + 'px)'
});
css(value.move, {
transform: 'translate(' + -cx + 'px, ' + -cy + 'px)'
});
css(value.back, {
transform: 'translate(' + bmx + 'px, ' + bmy + 'px)'
});
css(value.backShadow, {
width: bsw + 'px',
height: bsh + 'px',
transform: 'translate(' + bsx + 'px, ' + bsy + 'px)'
});
css(value.depth, {
width: dw + 'px',
height: dh + 'px',
transform: 'translate(' + dx + 'px, ' + dy + 'px)'
});
}
var sticker = {
init: function init(dom) {
if (typeof dom === 'string') {
var item = document.querySelectorAll(dom), i, total = item.length;
for (i=0; i<total; i++) init(item[i]);
return;
}
var value,
pos = dom.getBoundingClientRect(),
size = pos.width,
sizeQ = size >> 2,
container = createEl('div', {
position: 'relative',
width: size + 'px',
height: size + 'px',
overflow: 'hidden'
}),
mask = createEl('div', {
position: 'relative',
width: size + 'px',
height: size + 'px',
overflow: 'hidden'
}),
move = createEl('div', {
position: 'relative',
borderRadius: '50%',
width: size + 'px',
height: size + 'px',
overflow: 'hidden'
}),
front = createEl('div', {
position: 'relative',
borderRadius: '50%',
width: size + 'px',
height: size + 'px',
zIndex: 1
}),
back = createEl('div', {
position: 'absolute',
borderRadius: '50%',
width: size + 'px',
height: size + 'px',
left: '0',
top: '0',
zIndex: 3,
backgroundColor: '#ffffff',
transform: 'translate(' + size + 'px, ' + 0 + 'px)',
overflow: 'hidden'
}),
backImg = createEl('div', {
position: 'relative',
borderRadius: '50%',
width: size + 'px',
height: size + 'px',
opacity: '0.4'
}),
backShadow = createEl('div', {
position: 'absolute',
width: size + 'px',
height: size + 'px',
left: '0',
top: '0',
zIndex: 4
}),
depth = createEl('div', {
position: 'absolute',
width: size + 'px',
height: size + 'px',
left: '0',
top: '0',
zIndex: 1
});
front.className = 'sticker-img sticker-front';
backImg.className = 'sticker-img sticker-back';
backShadow.className = depth.className = 'sticker-shadow';
dom.appendChild(container);
container.appendChild(mask);
mask.appendChild(move);
move.appendChild(front);
move.appendChild(depth);
move.appendChild(back);
back.appendChild(backImg);
back.appendChild(backShadow);
value = {container:container, size:size, sizeQ:sizeQ, mask:mask, move:move, depth:depth, back:back, backImg:backImg, backShadow:backShadow};
dom.addEventListener('mouseenter', function(e) {
onEnter(e, value);
}, false);
dom.addEventListener('mouseleave', function(e) {
onLeave(e, value);
}, false);
dom.addEventListener('mousemove', function(e) {
onMove(e, value);
}, false);
return this;
}
}
/* CommonJS */
if (typeof exports == 'object') module.exports = sticker;
/* AMD module */
else if (typeof define == 'function' && define.amd) define(function(){ return sticker });
/* Browser global */
else this.Sticker = sticker;
})();