/* stash Modal Version: 1.5 Development http://stashthemes.com */ (function($) { $window = $(window); manualState = true; clickDisabled = false; stashContent = $(".stash-container .stash-content"); stashControls = $(".stash-controls"); stashCaption = $('.stash-caption'); stashCaptionInner = $('.stash-caption .inner'); noMorePosts = false; load = new TimelineMax(); $(window).load(function() { var History = window.History, State = History.getState(); }); document.onmousemove = function(e) { e = e || window.event; if ( $('html').hasClass('modal-open') ) { var windowWidth = $(window).width(), newWindowWidth = windowWidth - 120, windowHeight = $(window).height(), thisImg = $('.stash-content img'); // thisImgWidth = thisImg.width(), // thisImgHeight = thisImg.height(), // range = { // X: ((thisImgWidth - newWindowWidth) / newWindowWidth), // Y: ((thisImgHeight - windowHeight) / windowHeight) // }, // cursor = { // X: thisImgWidth > newWindowWidth ? e.pageX * range.X : 0, // Y: thisImgHeight > windowHeight ? e.clientY * range.Y : 0 // }; // if ( thisImg.width() > windowWidth ) { // stashContent.addClass('big-width'); // } else { // stashContent.removeClass('big-width'); // } // if ( thisImg.height() > windowHeight ) { // stashContent.addClass('big-height'); // } else { // stashContent.removeClass('big-height'); // } // TweenLite.to( thisImg, 3, { y: -Math.abs(cursor.Y), ease: Expo.easeOut }); } } $(document).on('click', '.post-photo .media > a, .open-modal, .photoset-count', function(e){ if (clickDisabled) return; e.preventDefault(); var thisID = $(this).attr('data-id'), thisPostType = $('#ant-' + thisID).attr('data-pt'); postRequest(thisID, 1); nextPost(thisID, true, thisPostType); manualState = false; clickDisabled = true; setTimeout(function(){clickDisabled = false;}, 500); }); $('.stash-back-btn, .close, .go-back, .close-modal, .close-mobile-modal, .progress-indicator').on('click', function(e){ if (clickDisabled) return; var History = window.History, State = History.getState(), thisID = State.data.id, stateData = { id:2, state: 0 }, title = TUMBLR_TITLE, url = TUMBLR_URL; closeModal(thisID); History.pushState(stateData, title, url); manualState = false; clickDisabled = true; setTimeout(function(){clickDisabled = false;}, 500); }); $('.stash-navigation .stash-next-btn, .stash-navigation .stash-prev-btn').on('click', function(e){ if (clickDisabled) return; var History = window.History, State = History.getState(), thisID = $(this).attr('post-id'), thisPostType = $(this).attr('data-pt'), currID = State.data.id; $('.stash-caption').removeClass('visible'); $('.stash-caption .inner').empty(); $('#ant-' + currID).removeClass('modal-active'); postRequest(thisID, 2); nextPost(thisID, false, thisPostType); manualState = false; clickDisabled = true; setTimeout(function(){clickDisabled = false;}, 500); }); $('body, .stash-overlay').click(function(e) { if (!$(e.target).closest('.photo-inner img, .stash-post-meta, .stash-back-btn, .stash-navigation').length && $('html').hasClass( "modal-open" )){ if (clickDisabled) return; var History = window.History, State = History.getState(), thisID = State.data.id, stateData = { id:2, state: 0 }, title = TUMBLR_TITLE, url = TUMBLR_URL; closeModal(thisID); History.pushState(stateData, title, url); manualState = false; clickDisabled = true; setTimeout(function(){clickDisabled = false;}, 500); } }); function openCaption() { disablePostScrolling(); $('.stash-post-meta .post-meta').addClass('active'); } function closeCaption() { if (isCaptionOpen) return; enablePostScrolling(); load.to( stashCaption, 1, { left: -Math.abs($('.stash-caption').outerWidth()), ease: Expo.easeInOut }) .to($('.stash-post-meta .post-meta'), 1, { ease:Linear.easeNone }); $('.stash-post-meta .post-meta').removeClass('active'); } function modalPostScrollAmount() { // Project Loading Indicator var $prog2 = $('.progress-indicator-2'); function updateProgress(perc){ $prog2.css({width : perc*100 + '%'}); } (function(){ var $w = $('.stash-overlay'); var $circ = $('.animated-circle'); var $progCount = $('.progress-count'); var $prog2 = $('.progress-indicator-2'); var wh = $w.height(); var h = $('.stash-container').outerHeight(); var sHeight = h - wh; $w.on('scroll', function(){ var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight)); updateProgress(perc); }); function updateProgress(perc){ var circle_offset = 126 * perc; $circ.css({ "stroke-dashoffset" : 126 - circle_offset }); $progCount.html(Math.round(perc * 100) + "%"); $prog2.css({width : perc*100 + '%'}); } }()); } // $('body').click(function(e) { // if (!$(e.target).closest(stashCaption).length && $('.stash-post-meta .post-meta').hasClass('active')){ // function removeActive(){ // $('.stash-post-meta .post-meta').removeClass('active'); // } // load.to( stashCaption, 1, { left: -Math.abs($('.stash-caption').outerWidth()), ease: Expo.easeInOut }) // .to($('.stash-post-meta .post-meta'), .4, { ease:Linear.easeNone, onComplete: removeActive }); // } // }); $(document).keyup(function(e) { if (clickDisabled) return; var History = window.History, State = History.getState(), thisID = State.data.id, prevPostType = $('.stash-navigation .stash-prev-btn').attr('data-pt'), prevID = $('.stash-navigation .stash-prev-btn').attr('post-id'), nextPostType = $('.stash-navigation .stash-next-btn').attr('data-pt'), nextID = $('.stash-navigation .stash-next-btn').attr('post-id'), stateData = { id:2, state: 0 }, title = TUMBLR_TITLE, url = TUMBLR_URL; if ( $('html').hasClass('modal-open') ) { if (e.keyCode == 27 ) { // ESC closeModal(thisID); History.pushState(stateData, title, url); } if (e.keyCode == 37 || e.keyCode == 38) { // LEFT - UP $('.stash-caption').removeClass('visible'); $('.stash-caption .inner').empty(); $('#ant-' + thisID).removeClass('modal-active'); postRequest(prevID, 2); nextPost(prevID, false, prevPostType); } if (e.keyCode == 39 || e.keyCode == 40) { // RIGHT - DOWN $('.stash-caption').removeClass('visible'); $('.stash-caption .inner').empty(); $('#ant-' + thisID).removeClass('modal-active'); postRequest(nextID, 2); nextPost(nextID, false, nextPostType); } manualState = false; clickDisabled = true; setTimeout(function(){clickDisabled = false;}, 700); } }); function postRequest(postID, dataState) { var History = window.History, State = History.getState(); $.ajax({ type: 'GET', url: "https://api.tumblr.com/v2/blog/" + TUMBLR_HOSTNAME + "/posts?api_key=" + TUMBLR_API_KEY + "¬es_info=true&id=" + postID, dataType: 'jsonp' }).done(function(data) { var thisID = data.response.posts[0].id, postURL = TUMBLR_URL + "post/" + thisID + "/" + data.response.posts[0].slug, postTitle = TUMBLR_TITLE + " - " + data.response.posts[0].summary, thisPostType = data.response.posts[0].type, contentLoad = new TimelineMax(); if ( thisPostType == "photo" ) { if ( data.response.posts[0].photoset_layout ) thisPostType = "photoset"; } var stateData = { id:thisID, state: dataState, postType: thisPostType }; stashCaptionInner.append("
"); // Caption if ( data.response.posts[0].caption != "" && typeof data.response.posts[0].caption != "undefined" ) { stashCaptionInner.find('.caption').append( data.response.posts[0].caption); } stashCaptionInner.append( " " ); // Post date / note count stashCaption.find('.post-meta .meta').append(""); var rawDate = data.response.posts[0].date.slice(0,10), postDate = $.datepicker.formatDate('d MM yy', new Date( rawDate )); var postDateHTML = "Posted on: " + postDate + " "; stashCaption.find('.meta-date').append( postDateHTML ); // var postNotesHTML = " " + data.response.posts[0].note_count + " notes" + ""; // stashCaption.find('.meta-date').append( postNotesHTML ); $('.more-note-count').text(data.response.posts[0].note_count + ' notes'); if(SHOW_POST_NOTES == true) { // Notes stashCaptionInner.append(''); $('.post-notes').load(postURL + ' #post-notes-url', function(s, si, j){ j.done(function(){ ntsURL = $('#post-notes-url').val(); }); }); setTimeout(function(){ $('.post-notes').load(ntsURL); },1000); } modalPostScrollAmount(); // Share var shareBtns = $('#ant-' + thisID + ' .post-meta .share').clone(); $('.stash-post-meta .post-meta .inner').append(shareBtns); $('.stash-navigation .stash-show-share').remove(); var modalShareBtns = $('#ant-' + thisID + ' .stash-show-share').clone(); $('.stash-navigation').append(modalShareBtns); // // Exif // if ( thisPostType == "photo" && data.response.posts[0].photos[0].exif ) { // $('.stash-border-right .tum-meta .exif').addClass('active'); // $('.stash-border-right .tum-meta .exif .iso p').html(data.response.posts[0].photos[0].exif.ISO); // $('.stash-border-right .tum-meta .exif .aperture p').html(data.response.posts[0].photos[0].exif.Aperture); // $('.stash-border-right .tum-meta .exif .exposure p').html(data.response.posts[0].photos[0].exif.Exposure); // } else { // $('.stash-border-right .tum-meta .exif').removeClass('active'); // } // // Container fixes // setTimeout(function(){ // if ( thisPostType == "photo" || thisPostType == "photoset" ) { // var windowWidth = ($(window).width() - 240), // imgWidth = data.response.posts[0].photos[0].original_size.width, // imgHeight = data.response.posts[0].photos[0].original_size.height; // if ( $(window).width() < 425 ) { // windowWidth = ($(window).width() - 60); // } // stashContent.width(imgWidth); // if ( imgWidth > windowWidth ) { // stashContent.width(windowWidth); // stashContent.addClass('big-width'); // } else { // stashContent.removeClass('big-width'); // } // if ( imgHeight > ($(window).height() - 20) ) { // stashContent.addClass('big-height'); // } else { // stashContent.removeClass('big-height'); // } // } // }, 500); History.pushState(stateData, postTitle, postURL); }); } function closeModal(thisID) { var load = new TimelineMax(); $('html').removeClass('modal-open'); TweenLite.to($('.stash-overlay'), 0.7, {y:'100%', ease:Power3.easeInOut, force3D:true, onComplete: completeClose}); TweenLite.to($('.dark-overlay'), 0.7, {opacity:0, ease:Power2.easeOut, onComplete:closeDarkOverlay}); function closeDarkOverlay() { $('.dark-overlay').css('visibility', ''); } function completeClose() { $('.more-note-count').empty(); $('.stash-overlay').attr('class', 'stash-overlay'); $('#ant-' + thisID).removeClass('modal-active'); $('.stash-caption, .stash-content').removeClass('visible'); $('.stash-caption .inner, .stash-content').empty(); $('.stash-container').removeAttr('style'); } // load // .to( $('.stash-post-meta .close, .stash-post-meta .post-meta'), 1, { opacity: 0, ease: Expo.easeInOut }); // TweenLite.to($('.stash-overlay'), 0.5, {y:'100%', opacity:0, force3D:true, ease:Power3.easeInOut}); enablePostScrolling(); } function nextPost(thisID,open,thisPostType) { disablePostScrolling(); var scrollTop = $window.scrollTop(), stashContainer = $(".stash-container"), nextIDS = $('article#ant-' + thisID).nextAll().slice(0, 3), prevIDS = $('article#ant-' + thisID).prevAll().slice(0, 3), nextID, prevID, nextPostType, prevPostType, windowCentDiv = $('#ant-' + thisID).offset().top - 80; if ( nextIDS.length <= 1 ) { if (!noMorePosts) { $("#stash-post-loader").trigger("click"); } } else if ( nextIDS.length == 0 ) { noMorePosts = true; } $.each(nextIDS, function(i,v){ if ( i === 0 && v.localName == 'article' ) { nextID = v.attributes["data-id"].value; nextPostType = v.attributes["data-pt"].value; return (i !== 0); } else if ( i === 1 && v.localName == 'article' ) { nextID = v.attributes["data-id"].value; if (v.attributes["data-pt"]) { nextPostType = v.attributes["data-pt"].value; } } }); $.each(prevIDS, function(i,v){ if ( i === 0 && v.localName == 'article' ) { prevID = v.attributes["data-id"].value; prevPostType = v.attributes["data-pt"].value; return (i !== 0); } else if ( i === 1 && v.localName == 'article') { prevID = v.attributes["data-id"].value; if (v.attributes["data-pt"]) { prevPostType = v.attributes["data-pt"].value; } } }); $('html').addClass('modal-open'); $('#ant-' + thisID).addClass('modal-active'); // caption fixes $(".stash-post-meta .post-meta").removeClass('active'); // $('.stash-caption').empty(); windowHeight = $window.height(); $('.stash-navigation .stash-prev-btn').attr({ 'post-id': prevID, 'data-pt': prevPostType }); $('.stash-navigation .stash-next-btn').attr({ 'post-id': nextID, 'data-pt': nextPostType }); mainTrans(open, thisPostType, thisID); // setTimeout(function(){ // TweenLite.to( window, .3, {scrollTo:{y: windowCentDiv-20 }, ease:Power2.easeOut}); // }, 1400); } function mainTrans(open, thisPostType, thisID) { if ( open == true ) { stashContent.empty().append(""); $('.stash-overlay').addClass(thisPostType); $('.stash-overlay').addClass('visible'); TweenLite.to($('.stash-overlay'), 0.7, {y:'0%', delay:0.4, force3D:true, ease:Power3.easeOut}); TweenLite.to($('.dark-overlay'), 0.7, {opacity:1, delay:0.2, visibility:'visible', ease:Power2.easeOut}); setTimeout(function(){ load // .to( $('.stash-overlay'), 0.7, { opacity: 1, ease:Linear.easeNone }) .to( $('.stash-post-meta .close, .stash-post-meta .post-meta'), 1, { opacity: 1, ease: Linear.easeNone }); }, 0); postTypes(thisPostType, thisID); } else { function completeAni() { $('.stash-content .coverlay').next().wrap(""); function deletes(){ stashContent.attr('style', ''); stashContent.find('.ol').remove(); postTypes(thisPostType, thisID); } load.to( stashContent.find('.ol'), .3, { opacity: 0, ease:Expo.easeInOut, onComplete: deletes }); } $('.stash-overlay').attr('class', 'stash-overlay visible ' + thisPostType ); load.to( stashContent, .3, { opacity: 0, ease:Expo.easeInOut, onComplete: completeAni }); } } function postTypes(thisPostType, thisID) { var thisDiv = $('#ant-' + thisID), thisA = $('#ant-' + thisID + ' a'), thisImgSrc = $('#ant-' + thisID + ' a img').attr('src'); hqImage = $('#ant-' + thisID + ' a img').attr('data-img-hq'); if (thisPostType == "photo") { stashContent.append("