// ==================================================================
// ============== Section Content Javascript v00.53.56 ==============
// ==================================================================
"use strict";
// Modal Vars =============================================================================
var vw = $(window).width();
var vh = $(window).height();
var body = $("body");
var boxFrame = $(".boxFrame");
var boxFrameOuter = $(".boxFrameOuter");
var closeModal = $("#closeModal");
var overlay = $("<div class='overlay updatable-w-djax'></div>");
var overlayDiv = $(".overlay");
var clone = null;
var target = null;
var currentOriginalLocation = null;
var tlUserSelected = null; // Modal TweenMax Timeline
var cloned1 = $("#cloned1");
var currentSelect = null;
var paddingCalc = null;
var cloneVw = null;
var cloneVwPercent = null;
var rectWidth = null;
var scaleValue = null;
var $this = $(this);
var closeSectionModal = $(".closeSectionModal");
// Click Function for Modal Selection
boxFrame.on("click", function(e) {
if (!e) {
var e = window.event;
}
var ele = e.target || e.srcElement;
// pass the var e value to openTile
openTile(e);
console.log("boxFrameOuter Clicked / Cloned");
}); // END on Click
$(window).resize(resizeModal);
function resizeModal(resizeModal) {
// If there's a timeline, rebuild it
if (tlUserSelected) {
var progress = tlUserSelected.progress();
var reversed = tlUserSelected.reversed();
// tlUserSelected.kill();
tlUserSelected.seek(0).clear();
buildTimelineUserSelected(progress, reversed);
} // END if
}; // END Window Resize
// START - Add media query =================================================================
// Gets passed into tween
var mediaQueryClone = window.matchMedia("(max-width: 40em)");
if (mediaQueryClone.matches) {
paddingCalc = "14%";
cloneVw = ".82";
cloneVwPercent = "82%";
};
var mediaQueryClone = window.matchMedia("(min-width: 40.063em) and (max-width: 90em)");
if (mediaQueryClone.matches) {
paddingCalc = "10%";
cloneVw = ".80";
cloneVwPercent = "80%";
};
var mediaQueryClone = window.matchMedia("(min-width: 90.063em)");
if (mediaQueryClone.matches) {
paddingCalc = "0%";
cloneVw = "1.0";
cloneVwPercent = "100%";
};
// ===========================================================================
// ======== Client Work Selectd by User Modal Timeline and Functions =========
// ===========================================================================
function buildTimelineUserSelected(progress, reversed) {
var vw = $(window).width();
var vh = $(window).height();
var rect = getPosition(target[0]);
var clientLabel = $(".clone").find("span");
var innerFrame1 = $(".clone").find(".innerFrame1");
var innerFrame2 = $(".clone").find(".innerFrame2");
var innerFrame3 = $(".clone").find(".innerFrame3");
var fadeMe = $(".clone").find(".fadeMe");
var boxFrame = $(".clone").find(".boxFrame");
var cloneScale = vw / rectWidth;
// var cloneScale = (vw * cloneVw) / rectWidth;
scaleValue;
if(cloneScale > 3) {
scaleValue = 3;
} else {
scaleValue = scaleValue;
};
var image1b = "url(http://hainis.net/dev/assets/img/" + currentSelect + "1b.jpg)";
var image1c = "url(http://hainis.net/dev/assets/img/" + currentSelect + "1c.jpg)";
TweenMax.set(closeSectionModal, { className: "closeSectionModal", opacity: 1, display: "block" });
TweenMax.set(overlay, { opacity: 0, display: "none" });
TweenMax.set(boxFrame, { cursor: "default" });
TweenMax.set(innerFrame1, { opacity: 1, display: "block" });
TweenMax.set(clientLabel, { opacity: 1, display: "block" });
TweenMax.set(clone, rect, { opacity: 1, display: "block", maxWidth: "100vw", padding: 0 });
tlUserSelected = new TimelineMax({ onReverseComplete: removeClone })
.to(overlay, .75, {
opacity: 1,
display: "block",
onStart: function() {
// Do Something
}, // END onStart
onComplete: function() {
// Do Something
}, // END onComplete
onReverseComplete: function () {
// Remove Clone From DOM
clone.remove();
TweenMax.set(boxFrame, { cursor: "pointer" });
}, // END onReverseComplete
}, 0, "overlay") // END overlay
.to(clone, 1.0, {
opacity: 1,
display:"block",
// Using this CSS code here creates an odd arc path
// I beilieve it is due to the render/calculation order.
// Instead of a direct, straight line, to the final centered position
// it moves left and right before centering properly
left: "50%",
top: "50%",
xPercent: "-50%",
yPercent: "-50%",
transform: "translate(0%, -50%)",
// width: cloneVwPercent,
scale: cloneScale,
height: "auto",
maxWidth: "1150px",
// maxWidth: "1150px",
// padding: paddingCalc,
autoRound: false,
// ease:Power2.easeInOut, // ORIGINAL Ease In/Out
ease:Power0.easeNone,
onComplete: function() {
// Do Something
$('#slide-1').css("padding", paddingCalc );
/*
TweenMax.set(clone, { opacity: 1,
display: "block",
className:"clone clonePadding",
width: "100%",
transform: "translate(0%, -50%)",
xPercent: "-50%",
yPercent: "-50%",
padding: paddingCalc
});
*/
}, // END onComplete
onReverseComplete: function () {
// Remove Clone From DOM
$(".clone").css("display", "none");
$(".clone").remove();
}, // END onReverseComplete
}, .25, "lineArt") // END clone
.to(innerFrame1, 0.25, { opacity: 0, display: "none" }, "overlay-=0.75")
.to(clientLabel, 0.25, { opacity: 0, display: "none" }, "overlay-=0.75")
.to(boxFrame, 0.5, { padding: "0" }, 0)
.to(closeSectionModal, 0.5, { className: "closeSectionModal", opacity: 1, display: "block" }, .25)
.to(innerFrame2, 1.0, { opacity: 1 }, "lineArt+=0.25")
.to(innerFrame3, 1.0, { opacity: 1 }, "-=0.15")
// .to(innerFrame2, .003, { opacity: 0 }, "-=0")
// .to(fadeMe, .003, { opacity: 0 }, "-=0")
.progress(progress || 0)
.reversed(reversed || false);
} // END - buildTimelineUserSelected
function openTile(e) {
// "e" value is passed in from the on click function
target = $(e.target).closest('.boxFrameOuter'); // solved targeting issue by using .closest vs .parent
// redefine currentSelect var on a global level for dynamic URL
// NOTE: by NOT using the keyword var here it will redefine the Global value
// when you use "var" within a function it keeps it local/within the function
currentSelect = $(e.target).closest('.boxFrameOuter').attr('id');
console.log( "currentSelect value = " + currentSelect );
// Set Var number for Clone ID formual
var cloneCount = 1;
// Clone and set Unique ID so it is valid HTML with no conflicts
clone = target.clone(false).prop('id', currentSelect + cloneCount++ ).addClass('clone').css({ "cursor": "default", "padding": "0" });
// (false) is no Deep Clone.
// if you want Deep Clone (which clones styles ID and Class names
// as well as and all child elements) set to (true) and
// IMPORTANT!!! If you use the Deep Clone method make sure ID of the cloned element is unique!
var urlLink = "assets/modals/" + currentSelect + ".html";
body.append(overlay).promise().done(function() {
// Load external HTML page via AJAX method
$.ajax({
async: true,
type:'get',
url: 'https://codepen.io/jh-thank-you/pen/rjqNaY.html',
cache:false,
dataType: 'html',
start: function()
{
}, // END start
success:function(data)
{
$('.overlay').html(data).promise().done(function() {
// Create Clone inside Modal Slide Container
$('#slide-1').append(clone);
}); // END Promise
}, // END success
complete: function() {
// Make Clone Div Unique ID
$(".clone").find(".boxFrame").attr("id", "clone-1");
// Load Script
$.getScript( "https://codepen.io/jh-thank-you/pen/rjqNaY.js" ).promise().done(function() {
// Load Script
console.log( "ScrollToPlugin and Custom Modal JS loaded" );
}); // END Promise
} // END Complete
}); // END AJAX
}); // END Promise Append Overlay
// After the AJAX DOM Elements are created build the timeline and pass the
// currentSelect var (for the dynamic url background images) to the timeline
buildTimelineUserSelected(currentSelect);
if ($('.clone').length > 1) {
clone.css("display", "none");
clone.detach();
clone.remove();
} // END if
} // END openTile
function closeTile() {
// tlUserSelected.reverse();
TweenMax.to(overlay, 0.75, {
opacity: 0,
display: "none",
onComplete: function() {
// Remove Clone From DOM
$(".clone").css("display", "none");
$(".clone").remove();
removeClone();
//kill only tweens, but not delayedCalls or timelines
TweenMax.killAll(false, true, false, false);
//kill only delayedCalls
TweenMax.killAll(false, false, true, false);
}, // END onReverseComplete
}, 0);
console.log("Closed Overlay");
} // END closeTile
function removeClone() {
overlay.detach();
// Due to the way the timelines are redrawn with window resize
// if a user resizes the window and clicks/selects a boxFrame,
// which launches the overlay Modal timeline, it results in
// the clone being created several times. The following
// if/else loop cycles through and clears them out. Also,
// for some reason the reverse onComplete doesn't change back
// the opacity for the labels, it should ve set back to 1 (100%).
if (clone.length > 0) {
clone.css("display", "none");
clone.detach();
clone.remove();
} else {
clone = null;
// clientLabel.css("opacity", "1");
// Clear and Kill Timeline
tlUserSelected.clear();
tlUserSelected.kill();
}
tlUserSelected = null;
target = null;
clone = null;
} // END removeClone
function getPosition(element) {
var body = document.body;
var root = document.documentElement;
var rect = element.getBoundingClientRect();
var scrollTop = window.pageYOffset || root.scrollTop || body.scrollTop || 0;
var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0;
var clientTop = root.clientTop || body.clientTop || 0;
var clientLeft = root.clientLeft || body.clientLeft || 0;
return {
top: Math.round(rect.top + scrollTop - clientTop),
left: Math.round(rect.left + scrollLeft - clientLeft),
height: rect.height,
width: rect.width
};
} // END getPosition
!
