var
content = document.getElementById('content'),
refreshContainer = document.getElementById('refresh-container'),
dragY, dragD, dragDeltaY, dragDir, dragTargetD = 100, dragMaxD = 300, dragThreshold = 10, dragResistance = 0.6, ptrStatus = false,
touchActive = false,
skeletonTL, fleshTL, readyTL, timer,
refreshStatusText = document.querySelector('.refresh-status'),
refreshRefreshingText = document.querySelector('.refresh-refreshing'),
refreshMessage1 = "Pull to Re-flesh!",
refreshMessage2 = "Release to Re-flesh!",
refreshMessage3 = "Re-fleshing",
refreshTextTL,
shoulderPath2 = "M119.8,123c0,0-23.1,0-55,0s-55,0-55,0",
shoulder = document.querySelector('.shoulder'),
head = document.querySelector('.head'),
jaw = document.querySelector('.jaw'),
teethBottom = document.querySelectorAll('.tooth-bottom'),
toothTop1 = document.querySelector('.tooth-top-1'), toothTop2 = document.querySelector('.tooth-top-2'), toothTop3 = document.querySelector('.tooth-top-3'), toothTop4 = document.querySelector('.tooth-top-4'), teethTopBG = document.querySelector('teeth-top-bg'),
eyeL = document.querySelector('.eye-L'), eyeR = document.querySelector('.eye-R'), nose = document.querySelector('.nose'),
footL = document.querySelector('.leg-L .foot'), footR = document.querySelector('.leg-R .foot'),
ribs = document.querySelector('.ribs'),
armL = document.querySelector('.arm-L'), armR = document.querySelector('.arm-R'),
legL = document.querySelector('.leg-L'), legR = document.querySelector('.leg-R'),
fleshArmL = document.querySelector('.flesh-arm-L'), fleshArmR = document.querySelector('.flesh-arm-R'),
fleshLegL = document.querySelector('.flesh-leg-L'), fleshLegR = document.querySelector('.flesh-leg-R'),
fleshBody = document.querySelector('.flesh-body'), fleshHead = document.querySelector('.flesh-head'),
fleshColors = {
primary: ['#CF9E76', '#F0D0B4', '#8E572A', '#4A3222'],
secondary: ['#BA8E6A', '#ECC19C', '#7D4921', '#38251A'],
hair: ['#42210B', '#EAE54E', '#631809', '#000000']
},
hairElements = ['.flesh-hair-1', '.flesh-hair-2', '.flesh-hair-3', '.flesh-hair-4']
;
$(document).ready(function() {
TweenLite.defaultEase = Linear.easeNone;
TweenMax.set(head, {y: 0});
TweenMax.set(teethBottom, {y: 10});
TweenMax.set([jaw, '#mouth-clip-path'], {y: -27});
TweenMax.set([toothTop1, toothTop4], {y: 5});
TweenMax.set([eyeL, eyeR, nose], {y: 20, scaleY: .6, transformOrigin: "center center"});
TweenMax.set(footL, {rotation: -40, transformOrigin: "right center"});
TweenMax.set(footR, {rotation: 40, transformOrigin: "left center"});
TweenMax.set([armR,armL], {transformOrigin: "10px 5px"});
TweenMax.set(legL, {transformOrigin: "25px 5px"});
TweenMax.set(legR, {transformOrigin: "10.1px 5px"});
TweenMax.set('.guide-arm-L', {rotation: 115, x: -17, y: -35, opacity: .15, transformOrigin: "10px 5px"});
TweenMax.set('.guide-arm-R', {rotation: -115, x: 17, y: -35, opacity: .15, transformOrigin: "10px 5px"});
TweenMax.set('.guide-leg-L', {rotation: 45, opacity: .15, transformOrigin: "25px 5px"});
TweenMax.set('.guide-leg-R', {rotation: -45, opacity: .15, transformOrigin: "10.1px 5px"});
TweenMax.set('.guides', {visibility: "visible"});
TweenMax.set(fleshArmL, {rotation: 115, x: -7, y: -45, visibility: "hidden", transformOrigin: "18.6px 15px"});
TweenMax.set(fleshArmR, {rotation: -115, x: 7, y: -45, visibility: "hidden", transformOrigin: "18.6px 15px"});
TweenMax.set(['.flesh-arm-L .hand', '.flesh-arm-R .hand'], {transformOrigin: "center center", scaleX: 0, scaleY: 0});
TweenMax.set(['.flesh-arm-L .arm', '.flesh-arm-R .arm'], {drawSVG: "0 0"});
TweenMax.set(fleshLegL, {rotation: 45, x: -7, y: 0, visibility: "hidden", transformOrigin: "38.3px 15px"});
TweenMax.set(fleshLegR, {rotation: -45, x: 7, y: 0, visibility: "hidden", transformOrigin: "15.18px 15px"});
TweenMax.set(['.flesh-leg-L .foot', '.flesh-leg-R .foot'], {scaleX: 0, scaleY: 0, transformOrigin: "center center"});
TweenMax.set(['.flesh-leg-L .leg', '.flesh-leg-R .leg'], {drawSVG: "0 0"});
TweenMax.set(fleshBody, {y: -10, scaleX: 0, scaleY: 0, visibility: "hidden", transformOrigin: "center center"});
TweenMax.set('.flesh-neck', {drawSVG: "0 0"});
TweenMax.set(fleshHead, {y: -15});
TweenMax.set('.flesh-ear-L', {x: 18});
TweenMax.set('.flesh-ear-R', {x: -18});
//TweenMax.set('.flesh-hair', {y: 30});
TweenMax.set('.flesh-mouth', {scaleX: 0, scaleY: 0, transformOrigin: "center center"});
TweenMax.set('.flesh-face', {scaleX: 0, scaleY: 0, transformOrigin: "center center"});
TweenMax.set('.flesh-nose', {scaleX: 0, scaleY: 0, transformOrigin: "center center"});
TweenMax.set('.flesh-eye', {scaleX: 0, scaleY: 0, transformOrigin: "center center"})
TweenMax.set(refreshRefreshingText, {x: (content.getBoundingClientRect().width - refreshRefreshingText.getBoundingClientRect().width)/2, y: -7});
var skeletonTimeStart = 2;
skeletonTL = new TimelineMax({paused: true});
skeletonTL
.addCallback(function() {}, "0")
.to(shoulder, 1, {morphSVG: shoulderPath2}, skeletonTimeStart)
.to(head, 1, {y: -40}, skeletonTimeStart)
.to([jaw, '#mouth-clip-path'], 1, {y: 0}, skeletonTimeStart)
.to(teethBottom, 1, {y: 0}, skeletonTimeStart)
.to([toothTop1, toothTop4], 1, {y: 0}, skeletonTimeStart)
.to([eyeL, eyeR, nose], 1, {y: 0, scaleY: 1}, skeletonTimeStart)
.to(ribs, 1, {y: -10}, skeletonTimeStart)
.to(armL, 1, {rotation: 115, x: -17, y: -35}, skeletonTimeStart)
.to(armR, 1, {rotation: -115, x: 17, y: -35}, skeletonTimeStart)
.to(legL, 1, {rotation: 45, x: 0, y: 0}, skeletonTimeStart)
.to(legR, 1, {rotation: -45, x: 0, y: 0}, skeletonTimeStart)
.to([footL, footR], 1, {rotation: 0}, skeletonTimeStart)
.to(refreshStatusText, 1, {x: "-50%", y: -7}, skeletonTimeStart)
;
var fleshTimeStart = 0;
fleshTL = new TimelineMax({paused: true});
fleshTL
//.to(refreshStatusText, .5, {opacity: 0}, fleshTimeStart)
//.to('#svg-wrapper div svg', .5, {y: 0, ease: Quad.easeOut}, fleshTimeStart)
.set([fleshArmL, fleshArmR, fleshLegL, fleshLegR], {autoAlpha: 1}, fleshTimeStart)
.to('.flesh-arm-L .arm', .25, {drawSVG: "0 100%", ease: Quad.easeOut}, fleshTimeStart + .1)
.to('.flesh-arm-L .hand', .3, {scaleX: 1, scaleY: 1, ease: Back.easeOut.config(4)}, fleshTimeStart + .45)
.to('.flesh-arm-R .arm', .25, {drawSVG: "0 100%", ease: Quad.easeOut}, fleshTimeStart + .2)
.to('.flesh-arm-R .hand', .3, {scaleX: 1, scaleY: 1, ease: Back.easeOut.config(4)}, fleshTimeStart + .55)
.to('.flesh-leg-R .leg', .25, {drawSVG: "0 100%", ease: Quad.easeOut}, fleshTimeStart + .3)
.to('.flesh-leg-R .foot', .3, {scaleX: 1, scaleY: 1, ease: Back.easeOut.config(4)}, fleshTimeStart + .65)
.to('.flesh-leg-L .leg', .25, {drawSVG: "0 100%", ease: Quad.easeOut}, fleshTimeStart + .4)
.to('.flesh-leg-L .foot', .3, {scaleX: 1, scaleY: 1, ease: Back.easeOut.config(4)}, fleshTimeStart + .75)
.to('.flesh-neck', .3, {drawSVG: "0 100%", ease: Quad.easeOut}, fleshTimeStart + .5)
.to(fleshBody, .4, {autoAlpha: 1, scaleX: 1, scaleY: 1, ease: Back.easeOut.config(4)}, fleshTimeStart)
.set([legL, legR, armL, armR], {visibility: "hidden"}, fleshTimeStart + 1)
.to('.flesh-face', .4, {autoAlpha: 1, scaleX: 1, scaleY: 1, ease: Back.easeOut.config(3)}, fleshTimeStart + .25)
.to(['.flesh-ear-L', '.flesh-ear-R'], .25, {autoAlpha: 1, x: 0, ease: Quad.easeOut}, fleshTimeStart + .5)
.to('.flesh-hair', .4, {y: 0, ease: Quad.easeOut, opacity: 1}, fleshTimeStart + .6)
.to('.flesh-eye', .25, {scaleX: 1, scaleY: 1, ease: Back.easeOut, autoAlpha: 1}, fleshTimeStart + .6)
.to('.flesh-nose', .25, {scaleX: 1, scaleY: 1, ease: Back.easeOut, autoAlpha: 1}, fleshTimeStart + .6)
.to('.flesh-mouth', .4, {scaleX: 1, scaleY: 1, ease: Back.easeOut, autoAlpha: 1}, fleshTimeStart + .6)
;
readyTL = new TimelineMax({paused: true, repeat: 0, yoyo: false});
readyTL
.to([armL, '.flesh-arm-L'], .1, {rotation: 125}, "0")
.to([armL, '.flesh-arm-L'], .2, {rotation: 105, repeat: -1, yoyo: true}, ".1")
.to([armR, '.flesh-arm-R'], .1, {rotation: -125}, "0")
.to([armR, '.flesh-arm-R'], .2, {rotation: -105, repeat: -1, yoyo: true}, ".1")
.to([legL, '.flesh-leg-L'], .1, {rotation: 55}, "0")
.to([legL, '.flesh-leg-L'], .2, {rotation: 35, repeat: -1, yoyo: true}, ".1")
.to([legR, '.flesh-leg-R'], .1, {rotation: -55}, "0")
.to([legR, '.flesh-leg-R'], .2, {rotation: -35, repeat: -1, yoyo: true}, ".1")
;
readyTL.timeScale(1.5);
var svgBounds = document.querySelector('#svg-wrapper').getBoundingClientRect();
dragTargetD = svgBounds.height + 45;
dragMaxD = dragTargetD + 70;
refreshStatusText.textContent = refreshMessage1;
changeFleshColor();
$(document).on('mousedown touchstart', content, function(e) {
var startY = e.pageY || e.originalEvent.touches[0].pageY;
dragDeltaY = 0;
if($('main').scrollTop() == 0) {
$(document).on('mousemove touchmove', _.throttle(function(e) {
e.preventDefault();
var y = e.pageY || e.originalEvent.touches[0].pageY;
dragDeltaY = (y - startY);
if (dragDeltaY < 0) dragDeltaY = 0;
if (dragDeltaY > dragTargetD) {
refreshStatusText.textContent = refreshMessage2;
ptrStatus = true;
readyTL.play();
} else {
refreshStatusText.textContent = refreshMessage1;
ptrStatus = false;
readyTL.pause();
readyTL.seek(0);
}
if(dragDeltaY >= dragMaxD) {
dragDeltaY = dragMaxD;
console.log("reached max drag, trigger ptr automatically");
refreshContainer.style.maxHeight = dragMaxD + 'px';
if(e.type == 'touchmove') {
$(this).trigger('touchend');
} else if(e.type == 'mousemove') {
$(this).trigger('mouseup');
}
return;
}
var p = dragDeltaY / dragTargetD;
p < 0 ? 0 : p;
TweenMax.killTweensOf(skeletonTL);
TweenMax.to(skeletonTL, .25, {progress: p, ease: Power2.easeOut});
refreshContainer.style.maxHeight = dragDeltaY + 'px';
}, 100, {trailing: false}));
$(document).on('mouseup touchend', function() {
$(document).off('mousemove touchmove mouseup touchend');
if (!dragDeltaY) return;
if (dragDeltaY >= dragTargetD) {
console.log("pull to refresh has happened");
refreshContainer.style.maxHeight = dragTargetD + 'px';
refreshTextTL = new TimelineMax({paused: true, repeat: -1, repeatDelay: .5});
refreshTextTL
.set(refreshStatusText, {autoAlpha: 0}, "0")
.set(refreshRefreshingText, {autoAlpha: 1}, "0")
.set(refreshRefreshingText, {text: refreshMessage3 + "."}, "0")
.set(refreshRefreshingText, {text: refreshMessage3 + ".."}, ".5")
.set(refreshRefreshingText, {text: refreshMessage3 + "..."}, "1")
;
refreshTextTL.play();
TweenMax.killTweensOf(skeletonTL);
TweenMax.to(skeletonTL, .1, {progress: 1, ease: Power2.easeOut});
fleshTL.play();
timer = setTimeout(resetPTR, (fleshTL.duration() * 1000) + parseInt(getRandomInRange(250, 1500, 0)));
} else {
console.log("no pull to refresh");
refreshContainer.style.maxHeight = '0px';
TweenMax.killTweensOf(skeletonTL);
TweenMax.to(skeletonTL, 1.25, {progress: 0, ease: Power2.easeOut});
}
});
}
});
});
function resetPTR() {
console.log("resetPTR");
clearInterval(timer);
refreshContainer.style.maxHeight = 0 + "px";
timer = setTimeout(function() {
refreshTextTL.pause();
TweenMax.killTweensOf(refreshTextTL);
refreshTextTL = null;
TweenMax.set(refreshStatusText, {autoAlpha: 1});
TweenMax.set(refreshRefreshingText, {autoAlpha: 0});
fleshTL.paused(true);
fleshTL.seek(0);
skeletonTL.paused(true);
skeletonTL.seek(0);
changeFleshColor();
//content.addEventListener('mousedown', onPress);
//content.addEventListener('mouseup', onRelease);
}, 500);
}
function changeFleshColor() {
var num1 = getRandomInRange(0, 3, 0);
var num2 = getRandomInRange(0, 3, 0);
var num3 = getRandomInRange(0, 3, 0);
TweenMax.set('.flesh-fill', {fill: fleshColors.primary[num1]});
TweenMax.set('.flesh-stroke', {stroke: fleshColors.primary[num1]});
TweenMax.set('.flesh-ear', {fill: fleshColors.secondary[num1]});
TweenMax.set('.flesh-nose', {stroke: fleshColors.secondary[num1]});
TweenMax.set('.flesh-hair path', {fill: fleshColors.hair[num2]});
TweenMax.set('.flesh-hair', {visibility: 'hidden', opacity: 0});
TweenMax.set(hairElements[num3], {visibility: 'visible'})
TweenMax.set('.flesh-bra', {autoAlpha: getRandomInRange(0,1,0)})
}
console.clear();
/* ========= UTILITIES =========== */
function getRandomInRange(min, max, precision) {
min = min === undefined ? 0 : min;
max = max === undefined ? 9007199254740992 : max;
precision = precision === undefined ? 0 : precision;
var random = Math.random() * (max - min) + min;
return random.toFixed(precision);
}
!
