/* Detect-zoom * ----------- * Cross Browser Zoom and Pixel Ratio Detector * Version 1.0.4 | Apr 1 2013 * dual-licensed under the WTFPL and MIT license * Maintained by https://github/tombigel * Original developer https://github.com/yonran */ //AMD and CommonJS initialization copied from https://github.com/zohararad/audio5js (function (root, ns, factory) { "use strict"; if (typeof (module) !== 'undefined' && module.exports) { // CommonJS module.exports = factory(ns, root); } else if (typeof (define) === 'function' && define.amd) { // AMD define("factory", function () { return factory(ns, root); }); } else { root[ns] = factory(ns, root); } }(window, 'detectZoom', function () { /** * Use devicePixelRatio if supported by the browser * @return {Number} * @private */ var devicePixelRatio = function () { return window.devicePixelRatio || 1; }; /** * Fallback function to set default values * @return {Object} * @private */ var fallback = function () { return { zoom: 1, devicePxPerCssPx: 1 }; }; /** * IE 8 and 9: no trick needed! * TODO: Test on IE10 and Windows 8 RT * @return {Object} * @private **/ var ie8 = function () { var zoom = Math.round((screen.deviceXDPI / screen.logicalXDPI) * 100) / 100; return { zoom: zoom, devicePxPerCssPx: zoom * devicePixelRatio() }; }; /** * For IE10 we need to change our technique again... * thanks https://github.com/stefanvanburen * @return {Object} * @private */ var ie10 = function () { var zoom = Math.round((document.documentElement.offsetHeight / window.innerHeight) * 100) / 100; return { zoom: zoom, devicePxPerCssPx: zoom * devicePixelRatio() }; }; /** * Mobile WebKit * the trick: window.innerWIdth is in CSS pixels, while * screen.width and screen.height are in system pixels. * And there are no scrollbars to mess up the measurement. * @return {Object} * @private */ var webkitMobile = function () { var deviceWidth = (Math.abs(window.orientation) == 90) ? screen.height : screen.width; var zoom = deviceWidth / window.innerWidth; return { zoom: zoom, devicePxPerCssPx: zoom * devicePixelRatio() }; }; /** * Desktop Webkit * the trick: an element's clientHeight is in CSS pixels, while you can * set its line-height in system pixels using font-size and * -webkit-text-size-adjust:none. * device-pixel-ratio: http://www.webkit.org/blog/55/high-dpi-web-sites/ * * Previous trick (used before http://trac.webkit.org/changeset/100847): * documentElement.scrollWidth is in CSS pixels, while * document.width was in system pixels. Note that this is the * layout width of the document, which is slightly different from viewport * because document width does not include scrollbars and might be wider * due to big elements. * @return {Object} * @private */ var webkit = function () { var important = function (str) { return str.replace(/;/g, " !important;"); }; var div = document.createElement('div'); div.innerHTML = "1
2
3
4
5
6
7
8
9
0"; div.setAttribute('style', important('font: 100px/1em sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; height: auto; width: 1em; padding: 0; overflow: visible;')); // The container exists so that the div will be laid out in its own flow // while not impacting the layout, viewport size, or display of the // webpage as a whole. // Add !important and relevant CSS rule resets // so that other rules cannot affect the results. var container = document.createElement('div'); container.setAttribute('style', important('width:0; height:0; overflow:hidden; visibility:hidden; position: absolute;')); container.appendChild(div); document.body.appendChild(container); var zoom = 1000 / div.clientHeight; zoom = Math.round(zoom * 100) / 100; document.body.removeChild(container); return{ zoom: zoom, devicePxPerCssPx: zoom * devicePixelRatio() }; }; /** * no real trick; device-pixel-ratio is the ratio of device dpi / css dpi. * (Note that this is a different interpretation than Webkit's device * pixel ratio, which is the ratio device dpi / system dpi). * * Also, for Mozilla, there is no difference between the zoom factor and the device ratio. * * @return {Object} * @private */ var firefox4 = function () { var zoom = mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 10, 20, 0.0001); zoom = Math.round(zoom * 100) / 100; return { zoom: zoom, devicePxPerCssPx: zoom }; }; /** * Firefox 18.x * Mozilla added support for devicePixelRatio to Firefox 18, * but it is affected by the zoom level, so, like in older * Firefox we can't tell if we are in zoom mode or in a device * with a different pixel ratio * @return {Object} * @private */ var firefox18 = function () { return { zoom: firefox4().zoom, devicePxPerCssPx: devicePixelRatio() }; }; /** * works starting Opera 11.11 * the trick: outerWidth is the viewport width including scrollbars in * system px, while innerWidth is the viewport width including scrollbars * in CSS px * @return {Object} * @private */ var opera11 = function () { var zoom = window.top.outerWidth / window.top.innerWidth; zoom = Math.round(zoom * 100) / 100; return { zoom: zoom, devicePxPerCssPx: zoom * devicePixelRatio() }; }; /** * Use a binary search through media queries to find zoom level in Firefox * @param property * @param unit * @param a * @param b * @param maxIter * @param epsilon * @return {Number} */ var mediaQueryBinarySearch = function (property, unit, a, b, maxIter, epsilon) { var matchMedia; var head, style, div; if (window.matchMedia) { matchMedia = window.matchMedia; } else { head = document.getElementsByTagName('head')[0]; style = document.createElement('style'); head.appendChild(style); div = document.createElement('div'); div.className = 'mediaQueryBinarySearch'; div.style.display = 'none'; document.body.appendChild(div); matchMedia = function (query) { style.sheet.insertRule('@media ' + query + '{.mediaQueryBinarySearch ' + '{text-decoration: underline} }', 0); var matched = getComputedStyle(div, null).textDecoration == 'underline'; style.sheet.deleteRule(0); return {matches: matched}; }; } var ratio = binarySearch(a, b, maxIter); if (div) { head.removeChild(style); document.body.removeChild(div); } return ratio; function binarySearch(a, b, maxIter) { var mid = (a + b) / 2; if (maxIter <= 0 || b - a < epsilon) { return mid; } var query = "(" + property + ":" + mid + unit + ")"; if (matchMedia(query).matches) { return binarySearch(mid, b, maxIter - 1); } else { return binarySearch(a, mid, maxIter - 1); } } }; /** * Generate detection function * @private */ var detectFunction = (function () { var func = fallback; //IE8+ if (!isNaN(screen.logicalXDPI) && !isNaN(screen.systemXDPI)) { func = ie8; } // IE10+ / Touch else if (window.navigator.msMaxTouchPoints) { func = ie10; } //Mobile Webkit else if ('orientation' in window && typeof document.body.style.webkitMarquee === 'string') { func = webkitMobile; } //WebKit else if (typeof document.body.style.webkitMarquee === 'string') { func = webkit; } //Opera else if (navigator.userAgent.indexOf('Opera') >= 0) { func = opera11; } //Last one is Firefox //FF 18.x else if (window.devicePixelRatio) { func = firefox18; } //FF 4.0 - 17.x else if (firefox4().zoom > 0.001) { func = firefox4; } return func; }()); return ({ /** * Ratios.zoom shorthand * @return {Number} Zoom level */ zoom: function () { return detectFunction().zoom; }, /** * Ratios.devicePxPerCssPx shorthand * @return {Number} devicePxPerCssPx level */ device: function () { return detectFunction().devicePxPerCssPx; } }); })); var wpcom_img_zoomer = { zoomed: false, timer: null, interval: 1000, // zoom polling interval in millisecond // Should we apply width/height attributes to control the image size? imgNeedsSizeAtts: function( img ) { // Do not overwrite existing width/height attributes. if ( img.getAttribute('width') !== null || img.getAttribute('height') !== null ) return false; // Do not apply the attributes if the image is already constrained by a parent element. if ( img.width < img.naturalWidth || img.height < img.naturalHeight ) return false; return true; }, init: function() { var t = this; try{ t.zoomImages(); t.timer = setInterval( function() { t.zoomImages(); }, t.interval ); } catch(e){ } }, stop: function() { if ( this.timer ) clearInterval( this.timer ); }, getScale: function() { var scale = detectZoom.device(); // Round up to 1.5 or the next integer below the cap. if ( scale <= 1.0 ) scale = 1.0; else if ( scale <= 1.5 ) scale = 1.5; else if ( scale <= 2.0 ) scale = 2.0; else if ( scale <= 3.0 ) scale = 3.0; else if ( scale <= 4.0 ) scale = 4.0; else scale = 5.0; return scale; }, shouldZoom: function( scale ) { var t = this; // Do not operate on hidden frames. if ( "innerWidth" in window && !window.innerWidth ) return false; // Don't do anything until scale > 1 if ( scale == 1.0 && t.zoomed == false ) return false; return true; }, zoomImages: function() { var t = this; var scale = t.getScale(); if ( ! t.shouldZoom( scale ) ){ return; } t.zoomed = true; // Loop through all the elements on the page. var imgs = document.getElementsByTagName("img"); for ( var i = 0; i < imgs.length; i++ ) { // Wait for original images to load if ( "complete" in imgs[i] && ! imgs[i].complete ) continue; // Skip images that have srcset attributes. if ( imgs[i].hasAttribute('srcset') ) { continue; } // Skip images that don't need processing. var imgScale = imgs[i].getAttribute("scale"); if ( imgScale == scale || imgScale == "0" ) continue; // Skip images that have already failed at this scale var scaleFail = imgs[i].getAttribute("scale-fail"); if ( scaleFail && scaleFail <= scale ) continue; // Skip images that have no dimensions yet. if ( ! ( imgs[i].width && imgs[i].height ) ) continue; // Skip images from Lazy Load plugins if ( ! imgScale && imgs[i].getAttribute("data-lazy-src") && (imgs[i].getAttribute("data-lazy-src") !== imgs[i].getAttribute("src"))) continue; if ( t.scaleImage( imgs[i], scale ) ) { // Mark the img as having been processed at this scale. imgs[i].setAttribute("scale", scale); } else { // Set the flag to skip this image. imgs[i].setAttribute("scale", "0"); } } }, scaleImage: function( img, scale ) { var t = this; var newSrc = img.src; // Skip slideshow images if ( img.parentNode.className.match(/slideshow-slide/) ) return false; // Scale gravatars that have ?s= or ?size= if ( img.src.match( /^https?:\/\/([^\/]*\.)?gravatar\.com\/.+[?&](s|size)=/ ) ) { newSrc = img.src.replace( /([?&](s|size)=)(\d+)/, function( $0, $1, $2, $3 ) { // Stash the original size var originalAtt = "originals", originalSize = img.getAttribute(originalAtt); if ( originalSize === null ) { originalSize = $3; img.setAttribute(originalAtt, originalSize); if ( t.imgNeedsSizeAtts( img ) ) { // Fix width and height attributes to rendered dimensions. img.width = img.width; img.height = img.height; } } // Get the width/height of the image in CSS pixels var size = img.clientWidth; // Convert CSS pixels to device pixels var targetSize = Math.ceil(img.clientWidth * scale); // Don't go smaller than the original size targetSize = Math.max( targetSize, originalSize ); // Don't go larger than the service supports targetSize = Math.min( targetSize, 512 ); return $1 + targetSize; }); } // Scale resize queries (*.files.wordpress.com) that have ?w= or ?h= else if ( img.src.match( /^https?:\/\/([^\/]+)\.files\.wordpress\.com\/.+[?&][wh]=/ ) ) { if ( img.src.match( /[?&]crop/ ) ) return false; var changedAttrs = {}; var matches = img.src.match( /([?&]([wh])=)(\d+)/g ); for ( var i = 0; i < matches.length; i++ ) { var lr = matches[i].split( '=' ); var thisAttr = lr[0].replace(/[?&]/g, '' ); var thisVal = lr[1]; // Stash the original size var originalAtt = 'original' + thisAttr, originalSize = img.getAttribute( originalAtt ); if ( originalSize === null ) { originalSize = thisVal; img.setAttribute(originalAtt, originalSize); if ( t.imgNeedsSizeAtts( img ) ) { // Fix width and height attributes to rendered dimensions. img.width = img.width; img.height = img.height; } } // Get the width/height of the image in CSS pixels var size = thisAttr == 'w' ? img.clientWidth : img.clientHeight; var naturalSize = ( thisAttr == 'w' ? img.naturalWidth : img.naturalHeight ); // Convert CSS pixels to device pixels var targetSize = Math.ceil(size * scale); // Don't go smaller than the original size targetSize = Math.max( targetSize, originalSize ); // Don't go bigger unless the current one is actually lacking if ( scale > img.getAttribute("scale") && targetSize <= naturalSize ) targetSize = thisVal; // Don't try to go bigger if the image is already smaller than was requested if ( naturalSize < thisVal ) targetSize = thisVal; if ( targetSize != thisVal ) changedAttrs[ thisAttr ] = targetSize; } var w = changedAttrs.w || false; var h = changedAttrs.h || false; if ( w ) { newSrc = img.src.replace(/([?&])w=\d+/g, function( $0, $1 ) { return $1 + 'w=' + w; }); } if ( h ) { newSrc = newSrc.replace(/([?&])h=\d+/g, function( $0, $1 ) { return $1 + 'h=' + h; }); } } // Scale mshots that have width else if ( img.src.match(/^https?:\/\/([^\/]+\.)*(wordpress|wp)\.com\/mshots\/.+[?&]w=\d+/) ) { newSrc = img.src.replace( /([?&]w=)(\d+)/, function($0, $1, $2) { // Stash the original size var originalAtt = 'originalw', originalSize = img.getAttribute(originalAtt); if ( originalSize === null ) { originalSize = $2; img.setAttribute(originalAtt, originalSize); if ( t.imgNeedsSizeAtts( img ) ) { // Fix width and height attributes to rendered dimensions. img.width = img.width; img.height = img.height; } } // Get the width of the image in CSS pixels var size = img.clientWidth; // Convert CSS pixels to device pixels var targetSize = Math.ceil(size * scale); // Don't go smaller than the original size targetSize = Math.max( targetSize, originalSize ); // Don't go bigger unless the current one is actually lacking if ( scale > img.getAttribute("scale") && targetSize <= img.naturalWidth ) targetSize = $2; if ( $2 != targetSize ) return $1 + targetSize; return $0; }); // Update height attribute to match width newSrc = newSrc.replace( /([?&]h=)(\d+)/, function($0, $1, $2) { if ( newSrc == img.src ) { return $0; } // Stash the original size var originalAtt = 'originalh', originalSize = img.getAttribute(originalAtt); if ( originalSize === null ) { originalSize = $2; img.setAttribute(originalAtt, originalSize); } // Get the height of the image in CSS pixels var size = img.clientHeight; // Convert CSS pixels to device pixels var targetSize = Math.ceil(size * scale); // Don't go smaller than the original size targetSize = Math.max( targetSize, originalSize ); // Don't go bigger unless the current one is actually lacking if ( scale > img.getAttribute("scale") && targetSize <= img.naturalHeight ) targetSize = $2; if ( $2 != targetSize ) return $1 + targetSize; return $0; }); } // Scale simple imgpress queries (s0.wp.com) that only specify w/h/fit else if ( img.src.match(/^https?:\/\/([^\/.]+\.)*(wp|wordpress)\.com\/imgpress\?(.+)/) ) { var imgpressSafeFunctions = ["zoom", "url", "h", "w", "fit", "filter", "brightness", "contrast", "colorize", "smooth", "unsharpmask"]; // Search the query string for unsupported functions. var qs = RegExp.$3.split('&'); for ( var q in qs ) { q = qs[q].split('=')[0]; if ( imgpressSafeFunctions.indexOf(q) == -1 ) { return false; } } // Fix width and height attributes to rendered dimensions. img.width = img.width; img.height = img.height; // Compute new src if ( scale == 1 ) newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?'); else newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?zoom=' + scale + '&'); } // Scale LaTeX images or Photon queries (i#.wp.com) else if ( img.src.match(/^https?:\/\/([^\/.]+\.)*(wp|wordpress)\.com\/latex\.php\?(latex|zoom)=(.+)/) || img.src.match(/^https?:\/\/i[\d]{1}\.wp\.com\/(.+)/) ) { // Fix width and height attributes to rendered dimensions. img.width = img.width; img.height = img.height; // Compute new src if ( scale == 1 ) { newSrc = img.src.replace(/\?(zoom=[^&]+&)?/, '?'); } else { newSrc = img.src; var url_var = newSrc.match( /([?&]w=)(\d+)/ ); if ( url_var !== null && url_var[2] ) { newSrc = newSrc.replace( url_var[0], url_var[1] + img.width ); } url_var = newSrc.match( /([?&]h=)(\d+)/ ); if ( url_var !== null && url_var[2] ) { newSrc = newSrc.replace( url_var[0], url_var[1] + img.height ); } var zoom_arg = '&zoom=2'; if ( !newSrc.match( /\?/ ) ) { zoom_arg = '?zoom=2'; } img.setAttribute( 'srcset', newSrc + zoom_arg + ' ' + scale + 'x' ); } } // Scale static assets that have a name matching *-1x.png or *@1x.png else if ( img.src.match(/^https?:\/\/[^\/]+\/.*[-@]([12])x\.(gif|jpeg|jpg|png)(\?|$)/) ) { // Fix width and height attributes to rendered dimensions. img.width = img.width; img.height = img.height; var currentSize = RegExp.$1, newSize = currentSize; if ( scale <= 1 ) newSize = 1; else newSize = 2; if ( currentSize != newSize ) newSrc = img.src.replace(/([-@])[12]x\.(gif|jpeg|jpg|png)(\?|$)/, '$1'+newSize+'x.$2$3'); } else { return false; } // Don't set img.src unless it has changed. This avoids unnecessary reloads. if ( newSrc != img.src ) { // Store the original img.src var prevSrc, origSrc = img.getAttribute("src-orig"); if ( !origSrc ) { origSrc = img.src; img.setAttribute("src-orig", origSrc); } // In case of error, revert img.src prevSrc = img.src; img.onerror = function(){ img.src = prevSrc; if ( img.getAttribute("scale-fail") < scale ) img.setAttribute("scale-fail", scale); img.onerror = null; }; // Finally load the new image img.src = newSrc; } return true; } }; wpcom_img_zoomer.init(); ; /* global pm, wpcom_reblog */ var jetpackLikesWidgetQueue = []; var jetpackLikesWidgetBatch = []; var jetpackLikesMasterReady = false; function JetpackLikespostMessage( message, target ) { if ( 'string' === typeof message ){ try { message = JSON.parse( message ); } catch(e) { return; } } pm( { target: target, type: 'likesMessage', data: message, origin: '*' } ); } function JetpackLikesBatchHandler() { var requests = []; jQuery( 'div.jetpack-likes-widget-unloaded' ).each( function() { if ( jetpackLikesWidgetBatch.indexOf( this.id ) > -1 ) { return; } jetpackLikesWidgetBatch.push( this.id ); var regex = /like-(post|comment)-wrapper-(\d+)-(\d+)-(\w+)/, match = regex.exec( this.id ), info; if ( ! match || match.length !== 5 ) { return; } info = { blog_id: match[2], width: this.width }; if ( 'post' === match[1] ) { info.post_id = match[3]; } else if ( 'comment' === match[1] ) { info.comment_id = match[3]; } info.obj_id = match[4]; requests.push( info ); }); if ( requests.length > 0 ) { JetpackLikespostMessage( { event: 'initialBatch', requests: requests }, window.frames['likes-master'] ); } } function JetpackLikesMessageListener( event, message ) { var allowedOrigin, $container, $list, offset, rowLength, height, scrollbarWidth; if ( 'undefined' === typeof event.event ) { return; } // We only allow messages from one origin allowedOrigin = window.location.protocol + '//widgets.wp.com'; if ( allowedOrigin !== message.origin ) { return; } if ( 'masterReady' === event.event ) { jQuery( document ).ready( function() { jetpackLikesMasterReady = true; var stylesData = { event: 'injectStyles' }, $sdTextColor = jQuery( '.sd-text-color' ), $sdLinkColor = jQuery( '.sd-link-color' ); if ( jQuery( 'iframe.admin-bar-likes-widget' ).length > 0 ) { JetpackLikespostMessage( { event: 'adminBarEnabled' }, window.frames[ 'likes-master' ] ); stylesData.adminBarStyles = { background: jQuery( '#wpadminbar .quicklinks li#wp-admin-bar-wpl-like > a' ).css( 'background' ), isRtl: ( 'rtl' === jQuery( '#wpadminbar' ).css( 'direction' ) ) }; } if ( ! window.addEventListener ) { jQuery( '#wp-admin-bar-admin-bar-likes-widget' ).hide(); } stylesData.textStyles = { color: $sdTextColor.css( 'color' ), fontFamily: $sdTextColor.css( 'font-family' ), fontSize: $sdTextColor.css( 'font-size' ), direction: $sdTextColor.css( 'direction' ), fontWeight: $sdTextColor.css( 'font-weight' ), fontStyle: $sdTextColor.css( 'font-style' ), textDecoration: $sdTextColor.css('text-decoration') }; stylesData.linkStyles = { color: $sdLinkColor.css('color'), fontFamily: $sdLinkColor.css('font-family'), fontSize: $sdLinkColor.css('font-size'), textDecoration: $sdLinkColor.css('text-decoration'), fontWeight: $sdLinkColor.css( 'font-weight' ), fontStyle: $sdLinkColor.css( 'font-style' ) }; JetpackLikespostMessage( stylesData, window.frames[ 'likes-master' ] ); JetpackLikesBatchHandler(); jQuery( document ).on( 'inview', 'div.jetpack-likes-widget-unloaded', function() { jetpackLikesWidgetQueue.push( this.id ); }); }); } if ( 'showLikeWidget' === event.event ) { jQuery( '#' + event.id + ' .post-likes-widget-placeholder' ).fadeOut( 'fast', function() { jQuery( '#' + event.id + ' .post-likes-widget' ).fadeIn( 'fast', function() { JetpackLikespostMessage( { event: 'likeWidgetDisplayed', blog_id: event.blog_id, post_id: event.post_id, obj_id: event.obj_id }, window.frames['likes-master'] ); }); }); } if ( 'clickReblogFlair' === event.event ) { wpcom_reblog.toggle_reblog_box_flair( event.obj_id ); } if ( 'showOtherGravatars' === event.event ) { $container = jQuery( '#likes-other-gravatars' ); $list = $container.find( 'ul' ); $container.hide(); $list.html( '' ); $container.find( '.likes-text span' ).text( event.total ); jQuery.each( event.likers, function( i, liker ) { var element = jQuery( '
' ); element.addClass( liker.css_class ); element.find( 'a' ). attr({ href: liker.profile_URL, rel: 'nofollow', target: '_parent' }). addClass( 'wpl-liker' ); element.find( 'img' ). attr({ src: liker.avatar_URL, alt: liker.name }). css({ width: '30px', height: '30px', paddingRight: '3px' }); $list.append( element ); } ); offset = jQuery( '[name=\'' + event.parent + '\']' ).offset(); $container.css( 'left', offset.left + event.position.left - 10 + 'px' ); $container.css( 'top', offset.top + event.position.top - 33 + 'px' ); rowLength = Math.floor( event.width / 37 ); height = ( Math.ceil( event.likers.length / rowLength ) * 37 ) + 13; if ( height > 204 ) { height = 204; } $container.css( 'height', height + 'px' ); $container.css( 'width', rowLength * 37 - 7 + 'px' ); $list.css( 'width', rowLength * 37 + 'px' ); $container.fadeIn( 'slow' ); scrollbarWidth = $list[0].offsetWidth - $list[0].clientWidth; if ( scrollbarWidth > 0 ) { $container.width( $container.width() + scrollbarWidth ); $list.width( $list.width() + scrollbarWidth ); } } } pm.bind( 'likesMessage', JetpackLikesMessageListener ); jQuery( document ).click( function( e ) { var $container = jQuery( '#likes-other-gravatars' ); if ( $container.has( e.target ).length === 0 ) { $container.fadeOut( 'slow' ); } }); function JetpackLikesWidgetQueueHandler() { var $wrapper, wrapperID, found; if ( ! jetpackLikesMasterReady ) { setTimeout( JetpackLikesWidgetQueueHandler, 500 ); return; } if ( jetpackLikesWidgetQueue.length > 0 ) { // We may have a widget that needs creating now found = false; while( jetpackLikesWidgetQueue.length > 0 ) { // Grab the first member of the queue that isn't already loading. wrapperID = jetpackLikesWidgetQueue.splice( 0, 1 )[0]; if ( jQuery( '#' + wrapperID ).hasClass( 'jetpack-likes-widget-unloaded' ) ) { found = true; break; } } if ( ! found ) { setTimeout( JetpackLikesWidgetQueueHandler, 500 ); return; } } else if ( jQuery( 'div.jetpack-likes-widget-unloaded' ).length > 0 ) { // Grab any unloaded widgets for a batch request JetpackLikesBatchHandler(); // Get the next unloaded widget wrapperID = jQuery( 'div.jetpack-likes-widget-unloaded' ).first()[0].id; if ( ! wrapperID ) { // Everything is currently loaded setTimeout( JetpackLikesWidgetQueueHandler, 500 ); return; } } if ( 'undefined' === typeof wrapperID ) { setTimeout( JetpackLikesWidgetQueueHandler, 500 ); return; } $wrapper = jQuery( '#' + wrapperID ); $wrapper.find( 'iframe' ).remove(); if ( $wrapper.hasClass( 'slim-likes-widget' ) ) { $wrapper.find( '.post-likes-widget-placeholder' ).after( '
' ); } else { $wrapper.find( '.post-likes-widget-placeholder' ).after( '
' ); } $wrapper.removeClass( 'jetpack-likes-widget-unloaded' ).addClass( 'jetpack-likes-widget-loading' ); $wrapper.find( 'iframe' ).load( function( e ) { var $iframe = jQuery( e.target ); $wrapper.removeClass( 'jetpack-likes-widget-loading' ).addClass( 'jetpack-likes-widget-loaded' ); JetpackLikespostMessage( { event: 'loadLikeWidget', name: $iframe.attr( 'name' ), width: $iframe.width() }, window.frames[ 'likes-master' ] ); if ( $wrapper.hasClass( 'slim-likes-widget' ) ) { $wrapper.find( 'iframe' ).Jetpack( 'resizeable' ); } }); setTimeout( JetpackLikesWidgetQueueHandler, 250 ); } JetpackLikesWidgetQueueHandler(); ; /* * Swipe 2.0 * * Brad Birdsall * Copyright 2013, MIT License * */ function Swipe(container, options) { "use strict"; // utilities var noop = function() {}; // simple no operation function var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution // check browser capabilities var browser = { addEventListener: !!window.addEventListener, touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch, transitions: (function(temp) { var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition']; for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true; return false; })(document.createElement('swipe')) }; // quit if no root element if (!container) return; var element = container.children[0]; var slides, slidePos, width, length; options = options || {}; var index = parseInt(options.startSlide, 10) || 0; var speed = options.speed || 300; options.continuous = options.continuous !== undefined ? options.continuous : true; function setup() { // cache slides slides = element.children; length = slides.length; // set continuous to false if only one slide if (slides.length < 2) options.continuous = false; //special case if two slides if (browser.transitions && options.continuous && slides.length < 3) { element.appendChild(slides[0].cloneNode(true)); element.appendChild(element.children[1].cloneNode(true)); slides = element.children; } // create an array to store current positions of each slide slidePos = new Array(slides.length); // determine width of each slide width = container.getBoundingClientRect().width || container.offsetWidth; element.style.width = (slides.length * width) + 'px'; // stack elements var pos = slides.length; while(pos--) { var slide = slides[pos]; slide.style.width = width + 'px'; slide.setAttribute('data-index', pos); if (browser.transitions) { slide.style.left = (pos * -width) + 'px'; move(pos, index > pos ? -width : (index < pos ? width : 0), 0); } } // reposition elements before and after index if (options.continuous && browser.transitions) { move(circle(index-1), -width, 0); move(circle(index+1), width, 0); } if (!browser.transitions) element.style.left = (index * -width) + 'px'; container.style.visibility = 'visible'; } function prev() { if (options.continuous) slide(index-1); else if (index) slide(index-1); } function next() { if (options.continuous) slide(index+1); else if (index < slides.length - 1) slide(index+1); } function circle(index) { // a simple positive modulo using slides.length return (slides.length + (index % slides.length)) % slides.length; } function slide(to, slideSpeed) { // do nothing if already on requested slide if (index == to) return; if (browser.transitions) { var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward // get the actual position of the slide if (options.continuous) { var natural_direction = direction; direction = -slidePos[circle(to)] / width; // if going forward but to < index, use to = slides.length + to // if going backward but to > index, use to = -slides.length + to if (direction !== natural_direction) to = -direction * slides.length + to; } var diff = Math.abs(index-to) - 1; // move all the slides between index and to in the right direction while (diff--) move( circle((to > index ? to : index) - diff - 1), width * direction, 0); to = circle(to); move(index, width * direction, slideSpeed || speed); move(to, 0, slideSpeed || speed); if (options.continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place } else { to = circle(to); animate(index * -width, to * -width, slideSpeed || speed); //no fallback for a circular continuous if the browser does not accept transitions } index = to; offloadFn(options.callback && options.callback(index, slides[index])); } function move(index, dist, speed) { translate(index, dist, speed); slidePos[index] = dist; } function translate(index, dist, speed) { var slide = slides[index]; var style = slide && slide.style; if (!style) return; style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = speed + 'ms'; style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)'; style.msTransform = style.MozTransform = style.OTransform = 'translateX(' + dist + 'px)'; } function animate(from, to, speed) { // if not an animation, just reposition if (!speed) { element.style.left = to + 'px'; return; } var start = +new Date; var timer = setInterval(function() { var timeElap = +new Date - start; if (timeElap > speed) { element.style.left = to + 'px'; if (delay) begin(); options.transitionEnd && options.transitionEnd.call(event, index, slides[index]); clearInterval(timer); return; } element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px'; }, 4); } // setup auto slideshow var delay = options.auto || 0; var interval; function begin() { interval = setTimeout(next, delay); } function stop() { delay = 0; clearTimeout(interval); } // setup initial vars var start = {}; var delta = {}; var isScrolling; // setup event capturing var events = { handleEvent: function(event) { switch (event.type) { case 'touchstart': this.start(event); break; case 'touchmove': this.move(event); break; case 'touchend': offloadFn(this.end(event)); break; case 'webkitTransitionEnd': case 'msTransitionEnd': case 'oTransitionEnd': case 'otransitionend': case 'transitionend': offloadFn(this.transitionEnd(event)); break; case 'resize': offloadFn(setup.call()); break; } if (options.stopPropagation) event.stopPropagation(); }, start: function(event) { var touches = event.touches[0]; // measure start values start = { // get initial touch coords x: touches.pageX, y: touches.pageY, // store time to determine touch duration time: +new Date }; // used for testing first move event isScrolling = undefined; // reset delta and end measurements delta = {}; // attach touchmove and touchend listeners element.addEventListener('touchmove', this, false); element.addEventListener('touchend', this, false); }, move: function(event) { // ensure swiping with one touch and not pinching if ( event.touches.length > 1 || event.scale && event.scale !== 1) return if (options.disableScroll) event.preventDefault(); var touches = event.touches[0]; // measure change in x and y delta = { x: touches.pageX - start.x, y: touches.pageY - start.y } // determine if scrolling test has run - one time test if ( typeof isScrolling == 'undefined') { isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) ); } // if user is not trying to scroll vertically if (!isScrolling) { // prevent native scrolling event.preventDefault(); // stop slideshow stop(); // increase resistance if first or last slide if (options.continuous) { // we don't add resistance at the end translate(circle(index-1), delta.x + slidePos[circle(index-1)], 0); translate(index, delta.x + slidePos[index], 0); translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0); } else { delta.x = delta.x / ( (!index && delta.x > 0 // if first slide and sliding left || index == slides.length - 1 // or if last slide and sliding right && delta.x < 0 // and if sliding at all ) ? ( Math.abs(delta.x) / width + 1 ) // determine resistance level : 1 ); // no resistance if false // translate 1:1 translate(index-1, delta.x + slidePos[index-1], 0); translate(index, delta.x + slidePos[index], 0); translate(index+1, delta.x + slidePos[index+1], 0); } } }, end: function(event) { // measure duration var duration = +new Date - start.time; // determine if slide attempt triggers next/prev slide var isValidSlide = Number(duration) < 250 // if slide duration is less than 250ms && Math.abs(delta.x) > 20 // and if slide amt is greater than 20px || Math.abs(delta.x) > width/2; // or if slide amt is greater than half the width // determine if slide attempt is past start and end var isPastBounds = !index && delta.x > 0 // if first slide and slide amt is greater than 0 || index == slides.length - 1 && delta.x < 0; // or if last slide and slide amt is less than 0 if (options.continuous) isPastBounds = false; // determine direction of swipe (true:right, false:left) var direction = delta.x < 0; // if not scrolling vertically if (!isScrolling) { if (isValidSlide && !isPastBounds) { if (direction) { if (options.continuous) { // we need to get the next in this direction in place move(circle(index-1), -width, 0); move(circle(index+2), width, 0); } else { move(index-1, -width, 0); } move(index, slidePos[index]-width, speed); move(circle(index+1), slidePos[circle(index+1)]-width, speed); index = circle(index+1); } else { if (options.continuous) { // we need to get the next in this direction in place move(circle(index+1), width, 0); move(circle(index-2), -width, 0); } else { move(index+1, width, 0); } move(index, slidePos[index]+width, speed); move(circle(index-1), slidePos[circle(index-1)]+width, speed); index = circle(index-1); } options.callback && options.callback(index, slides[index]); } else { if (options.continuous) { move(circle(index-1), -width, speed); move(index, 0, speed); move(circle(index+1), width, speed); } else { move(index-1, -width, speed); move(index, 0, speed); move(index+1, width, speed); } } } // kill touchmove and touchend event listeners until touchstart called again element.removeEventListener('touchmove', events, false) element.removeEventListener('touchend', events, false) }, transitionEnd: function(event) { if (parseInt(event.target.getAttribute('data-index'), 10) == index) { if (delay) begin(); options.transitionEnd && options.transitionEnd.call(event, index, slides[index]); } } } // trigger setup setup(); // start auto slideshow if applicable if (delay) begin(); // add event listeners if (browser.addEventListener) { // set touchstart event on element if (browser.touch) element.addEventListener('touchstart', events, false); if (browser.transitions) { element.addEventListener('webkitTransitionEnd', events, false); element.addEventListener('msTransitionEnd', events, false); element.addEventListener('oTransitionEnd', events, false); element.addEventListener('otransitionend', events, false); element.addEventListener('transitionend', events, false); } // set resize event on window window.addEventListener('resize', events, false); } else { window.onresize = function () { setup() }; // to play nice with old IE } // expose the Swipe API return { setup: function() { setup(); }, slide: function(to, speed) { // cancel slideshow stop(); slide(to, speed); }, prev: function() { // cancel slideshow stop(); prev(); }, next: function() { // cancel slideshow stop(); next(); }, getPos: function() { // return current index position return index; }, getNumSlides: function() { // return total number of slides return length; }, kill: function() { // cancel slideshow stop(); // reset element element.style.width = 'auto'; element.style.left = 0; // reset slides var pos = slides.length; while(pos--) { var slide = slides[pos]; slide.style.width = '100%'; slide.style.left = 0; if (browser.transitions) translate(pos, 0, 0); } // removed event listeners if (browser.addEventListener) { // remove current event listeners element.removeEventListener('touchstart', events, false); element.removeEventListener('webkitTransitionEnd', events, false); element.removeEventListener('msTransitionEnd', events, false); element.removeEventListener('oTransitionEnd', events, false); element.removeEventListener('otransitionend', events, false); element.removeEventListener('transitionend', events, false); window.removeEventListener('resize', events, false); } else { window.onresize = null; } } } } if ( window.jQuery || window.Zepto ) { (function($) { $.fn.Swipe = function(params) { return this.each(function() { $(this).data('Swipe', new Swipe($(this)[0], params)); }); } })( window.jQuery || window.Zepto ) } ; /** * Comment Likes - JavaScript * * This handles liking and unliking comments, as well as viewing who has * liked a particular comment. * * @dependency jQuery * @dependency Swipe * * @package Comment_Likes * @subpackage JavaScript */ jQuery( function() { var $ = jQuery; var extWin; var extWinCheck; var commentLikeEvent; // The O2 theme re-injects this script into the DOM when somebody // creates a new thread and the page is already open, but we don't // want to run this script a second time. if ( window.comment_likes_loaded ) return; window.comment_likes_loaded = true; // Client-side cache of who liked a particular comment to avoid // having to hit the server multiple times for the same data. var comment_like_cache = {}; /** * Parse the comment ID from a comment like link. */ var get_comment_id = function( $link ) { var comment_id = $link.attr( 'href' ).split( 'like_comment=' ); return comment_id[1].split( '&_wpnonce=' )[0]; }; /** * Handle an ajax action on the comment like link. */ var handle_link_action = function( $link, action, comment_id, callback ) { var nonce = $link.attr( 'href' ).split( '_wpnonce=' )[1]; $.post( '../wp-admin/admin-ajax.html', { 'action': action, '_wpnonce': nonce, 'like_comment': comment_id, 'blog_id': Number( $link.data( 'blog' ) ) }, callback, 'json' ); }; // Overlay used for displaying comment like info. var overlay = { // Overlay element. $el: $( '
' ) .appendTo( 'body' ) .addClass( 'comment-likes-overlay' ) .hide() .mouseenter( function() { // Don't hide the overlay if the user is mousing over it. overlay.cancel_hide(); } ).mouseleave( function() { overlay.request_hide(); } ), // Inner contents of overlay. $inner: null, // Instance of the Swipe library. swipe: null, // Initialise the overlay for use, removing any old content. clear: function() { // Unload any previous instance of Swipe (to avoid leaking a global // event handler). This is done before clearing the contents of the // overlay because Swipe expects the slides to still be present. if ( this.swipe ) { this.swipe.kill(); this.swipe = null; } this.$el.html( '' ); this.$inner = $( '
' ).addClass( 'inner' ).appendTo( this.$el ); }, /** * Construct a list (

) of user (gravatar, name) details. * * @param data liker data returned from the server * @param klass CSS class to apply to the

element * @param start index of user to start at * @param length number of users to include in the list * * @return HTML for the list */ get_user_bits: function( data, klass, start, length ) { start = start || 0; var last = start + ( length || data.length ); last = ( last > data.length ) ? data.length : last; var html = '

'; for ( var i = start; i < last; ++i ) { var user = data[ i ]; html += '
- '; html += ' ' + user.display_name_esc + ''; html += '
'; } html += '

'; return html; }, /** * Render the display of who has liked this comment. The type of * display depends on how many people have liked the comment. * If more than 10 people have liked the comment, this function * renders navigation controls and sets up the Swipe library for * changing between pages. * * @param link the element over which the user is hovering * @param data the results retrieved from the server */ show_likes: function( $link, data ) { this.clear(); $link.data( 'likeCount', data.length ); if ( 0 === data.length ) { // No likers after all. return this.$el.hide(); } this.$inner.css( 'padding', 12 ); if ( data.length < 6 ) { // Only one column needed. this.$inner.css( 'max-width', 200 ); this.$inner.html( this.get_user_bits( data, 'single' ) ); } else if ( data.length < 11 ) { // Two columns, but only one page. this.$inner.html( this.get_user_bits( data, 'double' ) ); } else { // Multiple pages. this.render_likes_with_pagination( data ); } // Move the overlay into the correct position and then show it. this.set_position( $link ); }, /** * Render multiple pages of likes with pagination controls. * This function is intended to be called by `show_likes` above. * * @param data the results retrieved from the server */ render_likes_with_pagination: function( data ) { var page_count = Math.ceil( data.length / 10 ); // Swipe requires two nested containers. var $swipe = $( '
' ).addClass( 'swipe' ).appendTo( this.$inner ); var $div = $( '
' ).addClass( 'swipe-wrap' ).appendTo( $swipe ); for ( var i = 0; i < page_count; ++i ) { $( this.get_user_bits( data, 'double', i * 10, 10 ) ).appendTo( $div ); } /** Navigation controls. * This is based on the Newdash controls found in * reader/recommendations-templates.php */ var nav_html = '
'; var $nav = $( nav_html ).appendTo( this.$inner ); /** Set up Swipe. **/ // Swipe cannot be set up successfully unless its container // is visible, so we show it now. this.$el.show(); var swipe = this.swipe = new Swipe( $swipe[0], { callback: function( pos ) { // Update the pagination indicators. // // If there are exactly two pages, Swipe has a weird // special case where it duplicates both pages and // can return index 2 and 3 even though those aren't // real pages (see swipe.js, line 47). To deal with // this, we use the expression `pos % page_count`. pos = pos % page_count; $nav.find( 'em' ).each( function() { var page = Number( $( this ).data( 'page' ) ); $( this ).attr( 'class', ( pos === page ) ? 'on' : '' ); } ); } } ); $nav.find( 'em' ).on( 'click', function( $e ) { // Go to the page corresponding to the indicator clicked. swipe.slide( Number( $( this ).data( 'page' ) ) ); $e.preventDefault(); } ); // Previous and next buttons. $nav.find( '.prev' ).on( 'click', function( $e ) { swipe.prev(); $e.preventDefault(); } ); $nav.find( '.next' ).on( 'click', function( $e ) { swipe.next(); $e.preventDefault(); } ); }, /** * Open the overlay and show a loading message. */ show_loading_message: function( $link ) { this.clear(); this.$inner.text( comment_like_text.loading ); this.set_position( $link ); }, /** * Position the overlay near the current comment. * * @param $link element near which to position the overlay */ set_position: function( $link ) { // Prepare a down arrow icon for the bottom of the overlay. var $icon = $( '' ) .appendTo( this.$el ) .addClass( 'icon noticon noticon-downarrow' ) .css( 'text-shadow', '0px 1px 1px rgb(223, 223, 223)' ); var offset = $link.offset(); var left = offset.left - ( this.$el.width() - $link.width() ) / 2; left = left < 5 ? 5 : left; var top = offset.top - this.$el.height() + 5; // Check if the overlay would appear off the screen. if ( top < ( $( window ).scrollTop() + ( $( '#wpadminbar' ).height() || 0 ) ) ) { // We'll display the overlay beneath the link instead. top = offset.top + $link.height(); // Instead of using the down arrow icon, use an up arrow. $icon.remove().prependTo( this.$el ) .removeClass( 'noticon-downarrow') .addClass( 'noticon-uparrow' ) .css( { 'text-shadow': '0px -1px 1px rgb(223, 223, 223)', 'vertical-align': 'bottom' } ); } this.$el.css( { 'left': left, 'top': top } ).show(); $icon.css( { // The height of the arrow icon differs slightly between browsers, // so we compute the margin here to make sure it isn't disjointed // from the overlay. 'margin-top': $icon[0].scrollHeight - 26, 'margin-bottom': 20 - $icon[0].scrollHeight, // Position the arrow to be horizontally centred on the link. 'padding-left': offset.left - left + ( $link.width() - $icon[0].scrollWidth ) / 2 } ); }, /** * Return whether the overlay is visible. */ is_visible: function() { return ( 'none' !== this.$el.css( 'display' ) ); }, // Timeout used for hiding the overlay. hide_timeout: null, /** * Request that the overlay be hidden after a short delay. */ request_hide: function() { if ( null !== this.hide_timeout ) { return; } var self = this; this.hide_timeout = setTimeout( function() { self.$el.hide(); self.clear(); }, 300 ); }, /** * Cancel a request to hide the overlay. */ cancel_hide: function() { if ( null !== this.hide_timeout ) { clearTimeout( this.hide_timeout ); this.hide_timeout = null; } } }; // The most recent comment for which the user has requested to see // who liked it. var relevant_comment; // Precache after this timeout. var precache_timeout = null; /** * Fetch the like data for a particular comment. */ var fetch_like_data = function( $link, comment_id ) { comment_like_cache[ comment_id ] = null; var $star = $link.parent().parent().find( 'a.comment-like-link' ); handle_link_action( $star, 'view_comment_likes', comment_id, function( data ) { // Populate the cache. comment_like_cache[ comment_id ] = data; // Only show the overlay if the user is interested. if ( overlay.is_visible() && ( relevant_comment === comment_id ) ) { overlay.show_likes( $link, data ); } } ); }; function readCookie( c ) { var nameEQ = c + '=', cookieStrings = document.cookie.split( ';' ), i, cookieString, num, chunk, pairs, pair, cookie_data; for ( i = 0; i < cookieStrings.length; i++ ) { cookieString = cookieStrings[ i ]; while ( cookieString.charAt( 0 ) === ' ' ) { cookieString = cookieString.substring( 1, cookieString.length ); } if ( cookieString.indexOf( nameEQ ) === 0 ) { chunk = cookieString.substring( nameEQ.length, cookieString.length ); pairs = chunk.split( '&' ); cookie_data = {}; for ( num = pairs.length - 1; num >= 0; num-- ) { pair = pairs[ num ].split( '=' ); cookie_data[ pair[0] ] = decodeURIComponent( pair[1] ); } return cookie_data; } } return null; } function getServiceData() { var data = readCookie( 'wpc_wpc' ); if ( null === data || 'undefined' === typeof data.access_token || ! data.access_token ) { return false; } return data; } function readMessage( event ) { if ( 'undefined' == typeof event.event ) { return; } if ( 'login' == event.event && event.success ) { extWinCheck = setInterval( function() { if ( ! extWin || extWin.closed ) { clearInterval( extWinCheck ); if ( getServiceData() ) { // Load page in an iframe to get the current comment nonce var nonceIframe = document.createElement( 'iframe' ); nonceIframe.id = 'wp-login-comment-nonce-iframe'; nonceIframe.style.display = 'none'; nonceIframe.src = commentLikeEvent + ''; document.body.appendChild( nonceIframe ); var commentLikeId = ( commentLikeEvent + '' ).split( 'like_comment=' )[1].split( '&_wpnonce=' )[0]; var c = false; // Set a 5 second timeout to redirect to the comment page without doing the Like as a fallback var commentLikeTimeout = setTimeout( function() { window.location = commentLikeEvent; }, 5000 ); // Check for a new nonced redirect and use that if available before timing out var commentLikeCheck = setInterval( function() { c = $( '#wp-login-comment-nonce-iframe' ).contents().find( '#comment-like-' + commentLikeId + ' .comment-like-link' ); if ( 'undefined' !== typeof c && 'undefined' !== typeof c[0] && 'undefined' !== typeof c[0].href ) { clearTimeout( commentLikeTimeout ); clearInterval( commentLikeCheck ); window.location = c[0].href; } }, 100 ); } } }, 100 ); if ( extWin ) { if ( ! extWin.closed ) { extWin.close(); } extWin = false; } $( '#wp-login-polling-iframe' ).remove(); } } if ( 'undefined' != typeof window.pm ) { pm.bind( 'loginMessage', function( e ) { readMessage( e ); } ); } $( 'body' ).on( 'click', 'a.comment-like-link', function( $e ) { if ( $( $e.target ).hasClass( 'needs-login' ) ) { $e.preventDefault(); commentLikeEvent = $e.target; if ( extWin ) { if ( ! extWin.closed ) { extWin.close(); } extWin = false; } $( '#wp-login-polling-iframe' ).remove(); var url = 'https://wordpress.com/public.api/connect/?action=request&service=wordpress'; extWin = window.open( url, 'likeconn', 'status=0,toolbar=0,location=1,menubar=0,directories=0,resizable=1,scrollbars=1,height=560,width=500' ); // Append cookie polling login iframe to this window to wait for user to finish logging in (or cancel) var loginIframe = $( "
" ); loginIframe.attr( "src", "https://wordpress.com/public.api/connect/?iframe=true" ); loginIframe.css( "display", "none" ); $( document.body ).append( loginIframe ); return false; } // Record that the user likes or does not like this comment. var $star = $( this ); var comment_id = get_comment_id( $star ); $star.addClass( 'loading' ); // Determine whether to like or unlike based on whether the comment is // currently liked. var action = ( $( 'p#comment-like-' + comment_id ).data( 'liked' ) === 'comment-liked' ) ? 'unlike_comment' : 'like_comment'; handle_link_action( $star, action, comment_id, function( data ) { // Invalidate the like cache for this comment. delete comment_like_cache[ comment_id ]; $( '#comment-like-count-' + data.context ).html( data.display ); if ( 'like_comment' === action ) { $( 'p#comment-like-' + data.context ).removeClass( 'comment-not-liked' ) .addClass( 'comment-liked' ) .data( 'liked', 'comment-liked' ); } else { $( 'p#comment-like-' + data.context ).removeClass( 'comment-liked' ) .addClass( 'comment-not-liked' ) .data( 'liked', 'comment-not-liked' ); } // Prefetch new data for this comment (if there are likers left). var $link = $star.parent().find( 'a.view-likers' ); if ( 0 !== $link.length ) { fetch_like_data( $link, comment_id ); } $star.removeClass( 'loading' ); } ); $e.preventDefault(); $e.stopPropagation(); } ).on( 'click', 'p.comment-not-liked', function() { // When a comment hasn't been liked, make the text clickable, too $( this ).find( 'a.comment-like-link' ).click(); } ).on( 'mouseenter', 'p.comment-likes a.view-likers', function() { // Show the user a list of who has liked this comment. var $link = $( this ); if ( 0 === Number( $link.data( 'likeCount' ) || 0 ) ) { // No one has liked this comment. return; } // Don't hide the overlay. overlay.cancel_hide(); // Get the comment ID. var $star = $link.parent().parent().find( 'a.comment-like-link' ); var comment_id = relevant_comment = get_comment_id( $star ); // Check if the list of likes for this comment is already in // the cache. if ( comment_id in comment_like_cache ) { var entry = comment_like_cache[ comment_id ]; // Only display the likes if the ajax request is // actually done. if ( null !== entry ) { overlay.show_likes( $link, entry ); } else { // Make sure the overlay is visible (in case // the user moved the mouse away while loading // but then came back before it finished // loading). overlay.show_loading_message( $link ); } return; } // Position the "Loading..." overlay. overlay.show_loading_message( $link ); // Fetch the data. fetch_like_data( $link, comment_id ); } ).on( 'mouseleave', 'p.comment-likes a.view-likers', function() { // User has moved cursor away - hide the overlay. overlay.request_hide(); } ).on( 'click', 'p.comment-likes a.view-likers', function( $e ) { // Don't do anything when clicking on the text. $e.preventDefault(); } ).on( 'mouseenter', '.comment:has(a.comment-like-link)', function() { // User is moving over a comment - precache the comment like data. if ( null !== precache_timeout ) { clearTimeout( precache_timeout ); precache_timeout = null; } var $star = $( this ).find( 'a.comment-like-link' ); var $link = $star.parent().find( 'a.view-likers' ); if ( 0 === Number( $link.data( 'likeCount' ) || 0 ) ) { // No likes. return; } var comment_id = get_comment_id( $star ); if ( comment_id in comment_like_cache ) { // Already in cache. return; } precache_timeout = setTimeout( function() { precache_timeout = null; if ( comment_id in comment_like_cache ) { // Was cached in the interim. return; } fetch_like_data( $link, comment_id ); }, 1000 ); } ); } ); ; /** * Handles toggling the navigation menu for small screens. */ ( function() { var nav = document.querySelectorAll( '.wpcom-pages' )[0], button, menu, buttonVisible; if ( ! nav ) { return; } button = nav.getElementsByTagName( 'a' )[0]; menu = nav.getElementsByTagName( 'ul' )[0]; if ( ! button ) { return; } // Open menu when Menu button is clicked. button.onclick = function( e) { if ( -1 !== button.className.indexOf( 'toggled-on' ) ) { button.className = button.className.replace( ' toggled-on', '' ); menu.className = menu.className.replace( ' toggled-on', '' ); } else { button.className += ' toggled-on'; menu.className += ' toggled-on'; } e.preventDefault(); }; // Handle both clicks and touch events. document.body.onclick = function( e ) { closeMenu( e ); }; document.body.ontouchstart = function( e ) { closeMenu( e ); }; // When menu is open, close it with any click away from the menu. var closeMenu = function( e ) { if ( button === e.target ) { return; } // Only continue if menu button is visible. buttonVisible = window.getComputedStyle( button ); if ( 'none' === buttonVisible.getPropertyValue( 'display' ) ) { return; } if ( ! menu.contains( e.target ) ) { button.className = button.className.replace( ' toggled-on', '' ); menu.className = menu.className.replace( ' toggled-on', '' ); } // If the click away from the menu was on something for which we should respond // to a click, return rather than stopping propagation. Else the click doesn't work. // This should run after the toggle code above so that the menu itself does close as expected. if ( [ 'button', 'submit', 'a' ].indexOf( e.target.type ) !== -1 ) { return; } } } )(); ; /*** * Warning: This file is remotely enqueued in Jetpack's Masterbar module. * Changing it will also affect Jetpack sites. */ jQuery( document ).ready( function( $, wpcom ) { var masterbar, menupops = $( 'li#wp-admin-bar-blog.menupop, li#wp-admin-bar-newdash.menupop, li#wp-admin-bar-my-account.menupop' ), newmenu = $( '#wp-admin-bar-new-post-types' ); // Unbind hoverIntent, we want clickable menus. menupops .unbind( 'mouseenter mouseleave' ) .removeProp( 'hoverIntent_t' ) .removeProp( 'hoverIntent_s' ) .on( 'mouseover', function(e) { var li = $(e.target).closest( 'li.menupop' ); menupops.not(li).removeClass( 'ab-hover' ); li.toggleClass( 'ab-hover' ); } ) .on( 'click touchstart', function(e) { var $target = $( e.target ); if ( masterbar.focusSubMenus( $target ) ) { return; } e.preventDefault(); masterbar.toggleMenu( $target ); } ); masterbar = { focusSubMenus: function( $target ) { // Handle selection of menu items if ( ! $target.closest( 'ul' ).hasClass( 'ab-top-menu' ) ) { $target .closest( 'li' ); return true; } return false; }, toggleMenu: function( $target ) { var $li = $target.closest( 'li.menupop' ), $html = $( 'html' ); $( 'body' ).off( 'click.ab-menu' ); $( '#wpadminbar li.menupop' ).not($li).removeClass( 'ab-active wpnt-stayopen wpnt-show' ); if ( $li.hasClass( 'ab-active' ) ) { $li.removeClass( 'ab-active' ); $html.removeClass( 'ab-menu-open' ); } else { $li.addClass( 'ab-active' ); $html.addClass( 'ab-menu-open' ); $( 'body' ).on( 'click.ab-menu', function( e ) { if ( ! $( e.target ).parents( '#wpadminbar' ).length ) { e.preventDefault(); masterbar.toggleMenu( $li ); $( 'body' ).off( 'click.ab-menu' ); } } ); } } }; } );; //fgnass.github.com/spin.js#v1.3 /** * Copyright (c) 2011-2013 Felix Gnass * Licensed under the MIT license */ (function(root, factory) { /* CommonJS */ if (typeof exports == 'object') module.exports = factory() /* AMD module */ else if (typeof define == 'function' && define.amd) define(factory) /* Browser global */ else root.Spinner = factory() } (this, function() { "use strict"; var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */ , animations = {} /* Animation rules keyed by their name */ , useCssAnimations /* Whether to use CSS animations or setTimeout */ /** * Utility function to create elements. If no tag name is given, * a DIV is created. Optionally properties can be passed. */ function createEl(tag, prop) { var el = document.createElement(tag || 'div') , n for(n in prop) el[n] = prop[n] return el } /** * Appends children and returns the parent. */ function ins(parent /* child1, child2, ...*/) { for (var i=1, n=arguments.length; i> 1) : parseInt(o.left, 10) + mid) + 'px', top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + 'px' }) } el.setAttribute('role', 'progressbar') self.lines(el, self.opts) if (!useCssAnimations) { // No CSS animation support, use setTimeout() instead var i = 0 , start = (o.lines - 1) * (1 - o.direction) / 2 , alpha , fps = o.fps , f = fps/o.speed , ostep = (1-o.opacity) / (f*o.trail / 100) , astep = f/o.lines ;(function anim() { i++; for (var j = 0; j < o.lines; j++) { alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity) self.opacity(el, j * o.direction + start, alpha, o) } self.timeout = self.el && setTimeout(anim, ~~(1000/fps)) })() } return self }, /** * Stops and removes the Spinner. */ stop: function() { var el = this.el if (el) { clearTimeout(this.timeout) if (el.parentNode) el.parentNode.removeChild(el) this.el = undefined } return this }, /** * Internal method that draws the individual lines. Will be overwritten * in VML fallback mode below. */ lines: function(el, o) { var i = 0 , start = (o.lines - 1) * (1 - o.direction) / 2 , seg function fill(color, shadow) { return css(createEl(), { position: 'absolute', width: (o.length+o.width) + 'px', height: o.width + 'px', background: color, boxShadow: shadow, transformOrigin: 'left', transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)', borderRadius: (o.corners * o.width>>1) + 'px' }) } for (; i < o.lines; i++) { seg = css(createEl(), { position: 'absolute', top: 1+~(o.width/2) + 'px', transform: o.hwaccel ? 'translate3d(0,0,0)' : '', opacity: o.opacity, animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1/o.speed + 's linear infinite' }) if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'})) ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)'))) } return el }, /** * Internal method that adjusts the opacity of a single line. * Will be overwritten in VML fallback mode below. */ opacity: function(el, i, val) { if (i < el.childNodes.length) el.childNodes[i].style.opacity = val } }) function initVML() { /* Utility function to create a VML tag */ function vml(tag, attr) { return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr) } // No CSS transforms but VML support, add a CSS rule for VML elements: sheet.addRule('.spin-vml', 'behavior:url(#default#VML)') Spinner.prototype.lines = function(el, o) { var r = o.length+o.width , s = 2*r function grp() { return css( vml('group', { coordsize: s + ' ' + s, coordorigin: -r + ' ' + -r }), { width: s, height: s } ) } var margin = -(o.width+o.length)*2 + 'px' , g = css(grp(), {position: 'absolute', top: margin, left: margin}) , i function seg(i, dx, filter) { ins(g, ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}), ins(css(vml('roundrect', {arcsize: o.corners}), { width: r, height: o.width, left: o.radius, top: -o.width>>1, filter: filter }), vml('fill', {color: o.color, opacity: o.opacity}), vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change ) ) ) } if (o.shadow) for (i = 1; i <= o.lines; i++) seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)') for (i = 1; i <= o.lines; i++) seg(i) return ins(el, g) } Spinner.prototype.opacity = function(el, i, val, o) { var c = el.firstChild o = o.shadow && o.lines || 0 if (c && i+o < c.childNodes.length) { c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild if (c) c.opacity = val } } } var probe = css(createEl('group'), {behavior: 'url(#default#VML)'}) if (!vendor(probe, 'transform') && probe.adj) initVML() else useCssAnimations = vendor(probe, 'animation') return Spinner })); ; /** * Copyright (c) 2011-2013 Felix Gnass * Licensed under the MIT license */ /* Basic Usage: ============ $('#el').spin(); // Creates a default Spinner using the text color of #el. $('#el').spin({ ... }); // Creates a Spinner using the provided options. $('#el').spin(false); // Stops and removes the spinner. Using Presets: ============== $('#el').spin('small'); // Creates a 'small' Spinner using the text color of #el. $('#el').spin('large', '#fff'); // Creates a 'large' white Spinner. Adding a custom preset: ======================= $.fn.spin.presets.flower = { lines: 9 length: 10 width: 20 radius: 0 } $('#el').spin('flower', 'red'); */ (function(factory) { if (typeof exports == 'object') { // CommonJS factory(require('jquery'), require('spin')) } else if (typeof define == 'function' && define.amd) { // AMD, register as anonymous module define(['jquery', 'spin'], factory) } else { // Browser globals if (!window.Spinner) throw new Error('Spin.js not present') factory(window.jQuery, window.Spinner) } }(function($, Spinner) { $.fn.spin = function(opts, color) { return this.each(function() { var $this = $(this), data = $this.data(); if (data.spinner) { data.spinner.stop(); delete data.spinner; } if (opts !== false) { opts = $.extend( { color: color || $this.css('color') }, $.fn.spin.presets[opts] || opts ) // Begin WordPress Additions // To use opts.right, you need to have specified a length, width, and radius. if ( typeof opts.right !== 'undefined' && typeof opts.length !== 'undefined' && typeof opts.width !== 'undefined' && typeof opts.radius !== 'undefined' ) { var pad = $this.css( 'padding-left' ); pad = ( typeof pad === 'undefined' ) ? 0 : parseInt( pad, 10 ); opts.left = $this.outerWidth() - ( 2 * ( opts.length + opts.width + opts.radius ) ) - pad - opts.right; delete opts.right; } // End WordPress Additions data.spinner = new Spinner(opts).spin(this) } }) } $.fn.spin.presets = { tiny: { lines: 8, length: 2, width: 2, radius: 3 }, small: { lines: 8, length: 4, width: 3, radius: 5 }, large: { lines: 10, length: 8, width: 4, radius: 8 } } })); // Jetpack Presets Overrides: (function($){ $.fn.spin.presets.wp = { trail: 60, speed: 1.3 }; $.fn.spin.presets.small = $.extend( { lines: 8, length: 2, width: 2, radius: 3 }, $.fn.spin.presets.wp ); $.fn.spin.presets.medium = $.extend( { lines: 8, length: 4, width: 3, radius: 5 }, $.fn.spin.presets.wp ); $.fn.spin.presets.large = $.extend( { lines: 10, length: 6, width: 4, radius: 7 }, $.fn.spin.presets.wp ); $.fn.spin.presets['small-left'] = $.extend( { left: 5 }, $.fn.spin.presets.small ); $.fn.spin.presets['small-right'] = $.extend( { right: 5 }, $.fn.spin.presets.small ); $.fn.spin.presets['medium-left'] = $.extend( { left: 5 }, $.fn.spin.presets.medium ); $.fn.spin.presets['medium-right'] = $.extend( { right: 5 }, $.fn.spin.presets.medium ); $.fn.spin.presets['large-left'] = $.extend( { left: 5 }, $.fn.spin.presets.large ); $.fn.spin.presets['large-right'] = $.extend( { right: 5 }, $.fn.spin.presets.large ); })(jQuery); ; /* jshint sub: true, onevar: false, multistr: true, devel: true, smarttabs: true */ /* global jetpackCarouselStrings, DocumentTouch */ // @start-hide-in-jetpack if (typeof wpcom === 'undefined') { var wpcom = {}; } wpcom.carousel = (function(/*$*/) { var prebuilt_widths = jetpackCarouselStrings.widths; var pageviews_stats_args = jetpackCarouselStrings.stats_query_args; var findFirstLargeEnoughWidth = function(original_w, original_h, dest_w, dest_h) { var inverse_ratio = original_h / original_w; for ( var i = 0; i < prebuilt_widths.length; ++i ) { if ( prebuilt_widths[i] >= dest_w || prebuilt_widths[i] * inverse_ratio >= dest_h ) { return prebuilt_widths[i]; } } return original_w; }; var addWidthToImageURL = function(url, width) { width = parseInt(width, 10); // Give devices with a higher devicePixelRatio higher-res images (Retina display = 2, Android phones = 1.5, etc) if ('undefined' !== typeof window.devicePixelRatio && window.devicePixelRatio > 1) { width = Math.round( width * window.devicePixelRatio ); } url = addArgToURL(url, 'w', width); url = addArgToURL(url, 'h', ''); return url; }; var addArgToURL = function(url, arg, value) { var re = new RegExp(arg+'=[^?&]+'); if ( url.match(re) ) { return url.replace(re, arg + '=' + value); } else { var divider = url.indexOf('?') !== -1 ? '&' : '?'; return url + divider + arg + '=' + value; } }; var stat = function ( names ) { if ( typeof names !== 'string' ) { names = names.join( ',' ); } new Image().src = window.location.protocol + '//pixel.wp.com/g.gif?v=wpcom-no-pv' + '&x_carousel=' + names + '&baba=' + Math.random(); }; var pageview = function ( post_id ) { new Image().src = window.location.protocol + '//pixel.wp.com/g.gif?host=' + encodeURIComponent( window.location.host ) + '&ref=' + encodeURIComponent( document.referrer ) + '&rand=' + Math.random() + '&' + pageviews_stats_args + '&post=' + encodeURIComponent( post_id ); }; return { findFirstLargeEnoughWidth: findFirstLargeEnoughWidth, addWidthToImageURL: addWidthToImageURL, stat: stat, pageview: pageview }; })(jQuery); // @end-hide-in-jetpack jQuery(document).ready(function($) { // gallery faded layer and container elements var overlay, comments, gallery, container, nextButton, previousButton, info, transitionBegin, caption, resizeTimeout, photo_info, close_hint, commentInterval, lastSelectedSlide, screenPadding = 110, originalOverflow = $('body').css('overflow'), originalHOverflow = $('html').css('overflow'), proportion = 85, last_known_location_hash = '', imageMeta, titleAndDescription, commentForm, leftColWrapper, scrollPos; if ( window.innerWidth <= 760 ) { screenPadding = Math.round( ( window.innerWidth / 760 ) * 110 ); if ( screenPadding < 40 && ( ( 'ontouchstart' in window ) || window.DocumentTouch && document instanceof DocumentTouch ) ) { screenPadding = 0; } } // Adding a polyfill for browsers that do not have Date.now if ( 'undefined' === typeof Date.now ) { Date.now = function now() { return new Date().getTime(); }; } var keyListener = function(e){ switch(e.which){ case 38: // up e.preventDefault(); container.scrollTop(container.scrollTop() - 100); break; case 40: // down e.preventDefault(); container.scrollTop(container.scrollTop() + 100); break; case 39: // right e.preventDefault(); gallery.jp_carousel('next'); break; case 37: // left case 8: // backspace e.preventDefault(); gallery.jp_carousel('previous'); break; case 27: // escape e.preventDefault(); container.jp_carousel('close'); break; default: // making jslint happy break; } }; var resizeListener = function(/*e*/){ clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function(){ gallery .jp_carousel('slides') .jp_carousel('fitSlide', true); gallery.jp_carousel('updateSlidePositions', true); gallery.jp_carousel('fitMeta', true); }, 200); }; var prepareGallery = function( /*dataCarouselExtra*/ ){ if (!overlay) { overlay = $('
') .addClass('jp-carousel-overlay') .css({ 'position' : 'absolute', 'top' : 0, 'right' : 0, 'bottom' : 0, 'left' : 0 }); var buttons = '' + jetpackCarouselStrings.comment + ''; if ( 1 === Number( jetpackCarouselStrings.is_logged_in ) ) { // @start-hide-in-jetpack if ( 1 === Number( jetpackCarouselStrings.is_public && 1 === Number( jetpackCarouselStrings.reblog_enabled ) ) ) { buttons += '' + jetpackCarouselStrings.reblog + ''; } // @end-hide-in-jetpack } buttons = $('
' + buttons + '
'); caption = $('

##

'); photo_info = $('
').append(caption); imageMeta = $('
') .addClass('jp-carousel-image-meta') .css({ 'float' : 'right', 'margin-top' : '20px', 'width' : '250px' }); imageMeta .append( buttons ) .append( '

' ) .append( '' ) .append( '
' ); titleAndDescription = $('
') .addClass('jp-carousel-titleanddesc') .css({ 'width' : '100%', 'margin-top' : imageMeta.css('margin-top') }); var commentFormMarkup = '
'; if ( jetpackCarouselStrings.local_comments_commenting_as && jetpackCarouselStrings.local_comments_commenting_as.length ) { // Comments not enabled, fallback to local comments if ( 1 !== Number( jetpackCarouselStrings.is_logged_in ) && 1 === Number( jetpackCarouselStrings.comment_registration ) ) { commentFormMarkup += '
' + jetpackCarouselStrings.local_comments_commenting_as + '
'; } else { commentFormMarkup += ''; commentFormMarkup += ''; commentFormMarkup += '
'; commentFormMarkup += '
' + jetpackCarouselStrings.local_comments_commenting_as + '
'; commentFormMarkup += ''; commentFormMarkup += ' '; commentFormMarkup += '
'; commentFormMarkup += '
'; commentFormMarkup += ''; } } commentFormMarkup += '
'; commentForm = $(commentFormMarkup) .css({ 'width' : '100%', 'margin-top' : '20px', 'color' : '#999' }); comments = $('
') .addClass('jp-carousel-comments') .css({ 'width' : '100%', 'bottom' : '10px', 'margin-top' : '20px' }); var commentsLoading = $('
'+jetpackCarouselStrings.loading_comments+'
') .css({ 'width' : '100%', 'bottom' : '10px', 'margin-top' : '20px' }); var leftWidth = ( $(window).width() - ( screenPadding * 2 ) ) - (imageMeta.width() + 40); leftWidth += 'px'; leftColWrapper = $('
') .addClass('jp-carousel-left-column-wrapper') .css({ 'width' : Math.floor( leftWidth ) }) .append(titleAndDescription) .append(commentForm) .append(comments) .append(commentsLoading); var fadeaway = $('
') .addClass('jp-carousel-fadeaway'); info = $('
') .addClass('jp-carousel-info') .css({ 'top' : Math.floor( ($(window).height() / 100) * proportion ), 'left' : screenPadding, 'right' : screenPadding }) .append(photo_info) .append(imageMeta); if ( window.innerWidth <= 760 ) { photo_info.remove().insertAfter( titleAndDescription ); info.prepend( leftColWrapper ); } else { info.append( leftColWrapper ); } var targetBottomPos = ( $(window).height() - parseInt( info.css('top'), 10 ) ) + 'px'; nextButton = $('
') .addClass('jp-carousel-next-button') .css({ 'right' : '15px' }) .hide(); previousButton = $('
') .addClass('jp-carousel-previous-button') .css({ 'left' : 0 }) .hide(); nextButton.add( previousButton ).css( { 'position' : 'fixed', 'top' : '40px', 'bottom' : targetBottomPos, 'width' : screenPadding } ); gallery = $('
') .addClass('jp-carousel') .css({ 'position' : 'absolute', 'top' : 0, 'bottom' : targetBottomPos, 'left' : 0, 'right' : 0 }); close_hint = $('
×
') .css({ position : 'fixed' }); container = $('
') .addClass('jp-carousel-wrap') .addClass( 'jp-carousel-transitions' ); if ( 'white' === jetpackCarouselStrings.background_color ) { container.addClass('jp-carousel-light'); } container.attr('itemscope', ''); container.attr('itemtype', 'https://schema.org/ImageGallery'); container.css({ 'position' : 'fixed', 'top' : 0, 'right' : 0, 'bottom' : 0, 'left' : 0, 'z-index' : 2147483647, 'overflow-x' : 'hidden', 'overflow-y' : 'auto', 'direction' : 'ltr' }) .hide() .append(overlay) .append(gallery) .append(fadeaway) .append(info) .append(nextButton) .append(previousButton) .append(close_hint) .appendTo($('body')) .click(function(e){ var target = $(e.target), wrap = target.parents('div.jp-carousel-wrap'), data = wrap.data('carousel-extra'), slide = wrap.find('div.selected'), attachment_id = slide.data('attachment-id'); data = data || []; if ( target.is(gallery) || target.parents().add(target).is(close_hint) ) { container.jp_carousel('close'); // @start-hide-in-jetpack } else if ( target.hasClass('jp-carousel-reblog') ) { e.preventDefault(); e.stopPropagation(); if ( !target.hasClass('reblogged') ) { target.jp_carousel('show_reblog_box'); wpcom.carousel.stat('reblog_show_box'); } } else if ( target.parents('#carousel-reblog-box').length ) { if ( target.is('a.cancel') ) { e.preventDefault(); e.stopPropagation(); target.jp_carousel('hide_reblog_box'); wpcom.carousel.stat('reblog_cancel'); } else if ( target.is( 'input[type="submit"]' ) ) { e.preventDefault(); e.stopPropagation(); var note = $('#carousel-reblog-box textarea').val(); if ( jetpackCarouselStrings.reblog_add_thoughts === note ) { note = ''; } $('#carousel-reblog-submit').val( jetpackCarouselStrings.reblogging ); $('#carousel-reblog-submit').prop('disabled', true); $( '#carousel-reblog-box div.submit span.canceltext' ).spin( 'small' ); $.post( jetpackCarouselStrings.ajaxurl, { 'action': 'post_reblog', 'reblog_source': 'carousel', 'original_blog_id': $('#carousel-reblog-box input#carousel-reblog-blog-id').val(), 'original_post_id': $('.jp-carousel div.selected').data('attachment-id'), 'blog_id': $('#carousel-reblog-box select').val(), 'blog_url': $('#carousel-reblog-box input#carousel-reblog-blog-url').val(), 'blog_title': $('#carousel-reblog-box input#carousel-reblog-blog-title').val(), 'post_url': $('#carousel-reblog-box input#carousel-reblog-post-url').val(), 'post_title': slide.data( 'caption' ) || $('#carousel-reblog-box input#carousel-reblog-post-title').val(), 'note': note, '_wpnonce': $('#carousel-reblog-box #_wpnonce').val() }, function(/*result*/) { $('#carousel-reblog-box').css({ 'height': $('#carousel-reblog-box').height() + 'px' }).slideUp('fast'); $('a.jp-carousel-reblog').html( jetpackCarouselStrings.reblogged ).removeClass( 'reblog' ).addClass( 'reblogged' ); $( '#carousel-reblog-box div.submit span.canceltext' ).spin( false ); $('#carousel-reblog-submit').val( jetpackCarouselStrings.post_reblog ); $('div.jp-carousel-info').children().not('#carousel-reblog-box').fadeIn('fast'); slide.data('reblogged', 1); $('div.gallery').find('img[data-attachment-id="' + slide.data('attachment-id') + '"]').data('reblogged', 1); }, 'json' ); wpcom.carousel.stat('reblog_submit'); } } else if ( target.hasClass( 'jp-carousel-image-download' ) ) { wpcom.carousel.stat( 'download_original_click' ); // @end-hide-in-jetpack } else if ( target.hasClass('jp-carousel-commentlink') ) { e.preventDefault(); e.stopPropagation(); $(window).unbind('keydown', keyListener); container.animate({scrollTop: parseInt(info.position()['top'], 10)}, 'fast'); $('#jp-carousel-comment-form-submit-and-info-wrapper').slideDown('fast'); $('#jp-carousel-comment-form-comment-field').focus(); } else if ( target.hasClass('jp-carousel-comment-login') ) { var url = jetpackCarouselStrings.login_url + '%23jp-carousel-' + attachment_id; window.location.href = url; } else if ( target.parents('#jp-carousel-comment-form-container').length ) { var textarea = $('#jp-carousel-comment-form-comment-field') .blur(function(){ $(window).bind('keydown', keyListener); }) .focus(function(){ $(window).unbind('keydown', keyListener); }); var emailField = $('#jp-carousel-comment-form-email-field') .blur(function(){ $(window).bind('keydown', keyListener); }) .focus(function(){ $(window).unbind('keydown', keyListener); }); var authorField = $('#jp-carousel-comment-form-author-field') .blur(function(){ $(window).bind('keydown', keyListener); }) .focus(function(){ $(window).unbind('keydown', keyListener); }); var urlField = $('#jp-carousel-comment-form-url-field') .blur(function(){ $(window).bind('keydown', keyListener); }) .focus(function(){ $(window).unbind('keydown', keyListener); }); if ( textarea && textarea.attr('id') === target.attr('id')) { // For first page load $(window).unbind('keydown', keyListener); $('#jp-carousel-comment-form-submit-and-info-wrapper').slideDown('fast'); } else if ( target.is( 'input[type="submit"]' ) ) { e.preventDefault(); e.stopPropagation(); $('#jp-carousel-comment-form-spinner').spin('small', 'white'); var ajaxData = { action: 'post_attachment_comment', nonce: jetpackCarouselStrings.nonce, blog_id: data['blog_id'], id: attachment_id, comment: textarea.val() }; if ( ! ajaxData['comment'].length ) { gallery.jp_carousel('postCommentError', {'field': 'jp-carousel-comment-form-comment-field', 'error': jetpackCarouselStrings.no_comment_text}); return; } if ( 1 !== Number( jetpackCarouselStrings.is_logged_in ) ) { ajaxData['email'] = emailField.val(); ajaxData['author'] = authorField.val(); ajaxData['url'] = urlField.val(); if ( 1 === Number( jetpackCarouselStrings.require_name_email ) ) { if ( ! ajaxData['email'].length || ! ajaxData['email'].match('@') ) { gallery.jp_carousel('postCommentError', {'field': 'jp-carousel-comment-form-email-field', 'error': jetpackCarouselStrings.no_comment_email}); return; } else if ( ! ajaxData['author'].length ) { gallery.jp_carousel('postCommentError', {'field': 'jp-carousel-comment-form-author-field', 'error': jetpackCarouselStrings.no_comment_author}); return; } } } $.ajax({ type: 'POST', url: jetpackCarouselStrings.ajaxurl, data: ajaxData, dataType: 'json', success: function(response/*, status, xhr*/) { if ( 'approved' === response.comment_status ) { $('#jp-carousel-comment-post-results').slideUp('fast').html('' + jetpackCarouselStrings.comment_approved + '').slideDown('fast'); } else if ( 'unapproved' === response.comment_status ) { $('#jp-carousel-comment-post-results').slideUp('fast').html('' + jetpackCarouselStrings.comment_unapproved + '').slideDown('fast'); } else { // 'deleted', 'spam', false $('#jp-carousel-comment-post-results').slideUp('fast').html('' + jetpackCarouselStrings.comment_post_error + '').slideDown('fast'); } gallery.jp_carousel('clearCommentTextAreaValue'); gallery.jp_carousel('getComments', {attachment_id: attachment_id, offset: 0, clear: true}); $('#jp-carousel-comment-form-button-submit').val(jetpackCarouselStrings.post_comment); $('#jp-carousel-comment-form-spinner').spin(false); }, error: function(/*xhr, status, error*/) { // TODO: Add error handling and display here gallery.jp_carousel('postCommentError', {'field': 'jp-carousel-comment-form-comment-field', 'error': jetpackCarouselStrings.comment_post_error}); return; } }); } } else if ( ! target.parents( '.jp-carousel-info' ).length ) { container.jp_carousel('next'); } }) .bind('jp_carousel.afterOpen', function(){ $(window).bind('keydown', keyListener); $(window).bind('resize', resizeListener); gallery.opened = true; resizeListener(); }) .bind('jp_carousel.beforeClose', function(){ var scroll = $(window).scrollTop(); $(window).unbind('keydown', keyListener); $(window).unbind('resize', resizeListener); $(window).scrollTop(scroll); gallery.jp_carousel( 'hide_reblog_box' ); // @hide-in-jetpack }) .bind('jp_carousel.afterClose', function(){ if ( window.location.hash && history.back ) { history.back(); } last_known_location_hash = ''; gallery.opened = false; }) .on( 'transitionend.jp-carousel ', '.jp-carousel-slide', function ( e ) { // If the movement transitions take more than twice the allotted time, disable them. // There is some wiggle room in the 2x, since some of that time is taken up in // JavaScript, setting up the transition and calling the events. if ( 'transform' === e.originalEvent.propertyName ) { var transitionMultiplier = ( ( Date.now() - transitionBegin ) / 1000 ) / e.originalEvent.elapsedTime; container.off( 'transitionend.jp-carousel' ); if ( transitionMultiplier >= 2 ) { $( '.jp-carousel-transitions' ).removeClass( 'jp-carousel-transitions' ); } } } ); $( '.jp-carousel-wrap' ).touchwipe( { wipeLeft : function ( e ) { e.preventDefault(); gallery.jp_carousel( 'next' ); }, wipeRight : function ( e ) { e.preventDefault(); gallery.jp_carousel( 'previous' ); }, preventDefaultEvents : false } ); nextButton.add(previousButton).click(function(e){ e.preventDefault(); e.stopPropagation(); if ( nextButton.is(this) ) { gallery.jp_carousel('next'); } else { gallery.jp_carousel('previous'); } }); } }; var methods = { testForData: function(gallery) { gallery = $( gallery ); // make sure we have it as a jQuery object. return !( ! gallery.length || ! gallery.data( 'carousel-extra' ) ); }, testIfOpened: function() { return !!( 'undefined' !== typeof(gallery) && 'undefined' !== typeof(gallery.opened) && gallery.opened ); }, openOrSelectSlide: function( index ) { // The `open` method triggers an asynchronous effect, so we will get an // error if we try to use `open` then `selectSlideAtIndex` immediately // after it. We can only use `selectSlideAtIndex` if the carousel is // already open. if ( ! $( this ).jp_carousel( 'testIfOpened' ) ) { // The `open` method selects the correct slide during the // initialization. $( this ).jp_carousel( 'open', { start_index: index } ); } else { gallery.jp_carousel( 'selectSlideAtIndex', index ); } }, open: function(options) { var settings = { 'items_selector' : '.gallery-item [data-attachment-id], .tiled-gallery-item [data-attachment-id], img[data-attachment-id]', 'start_index': 0 }, data = $(this).data('carousel-extra'); if ( !data ) { return; // don't run if the default gallery functions weren't used } prepareGallery( data ); if ( gallery.jp_carousel( 'testIfOpened' ) ) { return; // don't open if already opened } // make sure to stop the page from scrolling behind the carousel overlay, so we don't trigger // infiniscroll for it when enabled (Reader, theme infiniscroll, etc). originalOverflow = $('body').css('overflow'); $('body').css('overflow', 'hidden'); // prevent html from overflowing on some of the new themes. originalHOverflow = $('html').css('overflow'); $('html').css('overflow', 'hidden'); scrollPos = $( window ).scrollTop(); container.data('carousel-extra', data); // @start-hide-in-jetpack wpcom.carousel.stat( ['open', 'view_image'] ); // @end-hide-in-jetpack return this.each(function() { // If options exist, lets merge them // with our default settings var $this = $(this); if ( options ) { $.extend( settings, options ); } if ( -1 === settings.start_index ) { settings.start_index = 0; //-1 returned if can't find index, so start from beginning } container.trigger('jp_carousel.beforeOpen').fadeIn('fast',function(){ container.trigger('jp_carousel.afterOpen'); gallery .jp_carousel('initSlides', $this.find(settings.items_selector), settings.start_index) .jp_carousel('selectSlideAtIndex', settings.start_index); }); gallery.html(''); }); }, selectSlideAtIndex : function(index){ var slides = this.jp_carousel('slides'), selected = slides.eq(index); if ( 0 === selected.length ) { selected = slides.eq(0); } gallery.jp_carousel('selectSlide', selected, false); return this; }, close : function(){ // make sure to let the page scroll again $('body').css('overflow', originalOverflow); $('html').css('overflow', originalHOverflow); this.jp_carousel( 'clearCommentTextAreaValue' ); return container .trigger('jp_carousel.beforeClose') .fadeOut('fast', function(){ container.trigger('jp_carousel.afterClose'); $( window ).scrollTop( scrollPos ); }); }, next : function(){ var slide = gallery.jp_carousel( 'nextSlide' ); container.animate({scrollTop:0}, 'fast'); gallery.jp_carousel( 'hide_reblog_box' ); // @hide-in-jetpack if ( slide ) { this.jp_carousel('selectSlide', slide); wpcom.carousel.stat( ['next', 'view_image'] ); // @hide-in-jetpack } }, previous : function(){ var slide = gallery.jp_carousel( 'prevSlide' ); container.animate({scrollTop:0}, 'fast'); gallery.jp_carousel( 'hide_reblog_box' ); // @hide-in-jetpack if ( slide ) { this.jp_carousel('selectSlide', slide); wpcom.carousel.stat( ['previous', 'view_image'] ); // @hide-in-jetpack } }, // @start-hide-in-jetpack resetButtons : function(current) { if ( current.data( 'reblogged' ) ) { $('.jp-carousel-buttons a.jp-carousel-reblog').addClass( 'reblogged' ).text( jetpackCarouselStrings.reblogged ); } else { $('.jp-carousel-buttons a.jp-carousel-reblog').removeClass( 'reblogged' ).text( jetpackCarouselStrings.reblog ); } // Must also take care of reblog/reblogged here }, // @end-hide-in-jetpack selectedSlide : function(){ return this.find('.selected'); }, setSlidePosition : function(x) { transitionBegin = Date.now(); return this.css({ '-webkit-transform':'translate3d(' + x + 'px,0,0)', '-moz-transform':'translate3d(' + x + 'px,0,0)', '-ms-transform':'translate(' + x + 'px,0)', '-o-transform':'translate(' + x + 'px,0)', 'transform':'translate3d(' + x + 'px,0,0)' }); }, updateSlidePositions : function(animate) { var current = this.jp_carousel( 'selectedSlide' ), galleryWidth = gallery.width(), currentWidth = current.width(), previous = gallery.jp_carousel( 'prevSlide' ), next = gallery.jp_carousel( 'nextSlide' ), previousPrevious = previous.prev(), nextNext = next.next(), left = Math.floor( ( galleryWidth - currentWidth ) * 0.5 ); current.jp_carousel( 'setSlidePosition', left ).show(); // minimum width gallery.jp_carousel( 'fitInfo', animate ); // prep the slides var direction = lastSelectedSlide.is( current.prevAll() ) ? 1 : -1; // Since we preload the `previousPrevious` and `nextNext` slides, we need // to make sure they technically visible in the DOM, but invisible to the // user. To hide them from the user, we position them outside the edges // of the window. // // This section of code only applies when there are more than three // slides. Otherwise, the `previousPrevious` and `nextNext` slides will // overlap with the `previous` and `next` slides which must be visible // regardless. if ( 1 === direction ) { if ( ! nextNext.is( previous ) ) { nextNext.jp_carousel( 'setSlidePosition', galleryWidth + next.width() ).show(); } if ( ! previousPrevious.is( next ) ) { previousPrevious.jp_carousel( 'setSlidePosition', -previousPrevious.width() - currentWidth ).show(); } } else { if ( ! nextNext.is( previous ) ) { nextNext.jp_carousel( 'setSlidePosition', galleryWidth + currentWidth ).show(); } } previous.jp_carousel( 'setSlidePosition', Math.floor( -previous.width() + ( screenPadding * 0.75 ) ) ).show(); next.jp_carousel( 'setSlidePosition', Math.ceil( galleryWidth - ( screenPadding * 0.75 ) ) ).show(); }, selectSlide : function(slide, animate){ lastSelectedSlide = this.find( '.selected' ).removeClass( 'selected' ); var slides = gallery.jp_carousel( 'slides' ).css({ 'position': 'fixed' }), current = $( slide ).addClass( 'selected' ).css({ 'position': 'relative' }), attachmentId = current.data( 'attachment-id' ), previous = gallery.jp_carousel( 'prevSlide' ), next = gallery.jp_carousel( 'nextSlide' ), previousPrevious = previous.prev(), nextNext = next.next(), animated, captionHtml; // center the main image gallery.jp_carousel( 'loadFullImage', current ); caption.hide(); if ( next.length === 0 && slides.length <= 2 ) { $( '.jp-carousel-next-button' ).hide(); } else { $( '.jp-carousel-next-button' ).show(); } if ( previous.length === 0 && slides.length <= 2 ) { $( '.jp-carousel-previous-button' ).hide(); } else { $( '.jp-carousel-previous-button' ).show(); } animated = current .add( previous ) .add( previousPrevious ) .add( next ) .add( nextNext ) .jp_carousel( 'loadSlide' ); // slide the whole view to the x we want slides.not( animated ).hide(); gallery.jp_carousel( 'updateSlidePositions', animate ); gallery.jp_carousel( 'resetButtons', current ); // @hide-in-jetpack container.trigger( 'jp_carousel.selectSlide', [current] ); gallery.jp_carousel( 'getTitleDesc', { title: current.data( 'title' ), desc: current.data( 'desc' ) }); var imageMeta = current.data( 'image-meta' ); gallery.jp_carousel( 'updateExif', imageMeta ); gallery.jp_carousel( 'updateFullSizeLink', current ); gallery.jp_carousel( 'updateMap', imageMeta ); gallery.jp_carousel( 'testCommentsOpened', current.data( 'comments-opened' ) ); gallery.jp_carousel( 'getComments', { 'attachment_id': attachmentId, 'offset': 0, 'clear': true }); $( '#jp-carousel-comment-post-results' ).slideUp(); // $('
').text(sometext).html() is a trick to go to HTML to plain // text (including HTML entities decode, etc) if ( current.data( 'caption' ) ) { captionHtml = $( '
' ).text( current.data( 'caption' ) ).html(); if ( captionHtml === $( '
' ).text( current.data( 'title' ) ).html() ) { $( '.jp-carousel-titleanddesc-title' ).fadeOut( 'fast' ).empty(); } if ( captionHtml === $( '
' ).text( current.data( 'desc' ) ).html() ) { $( '.jp-carousel-titleanddesc-desc' ).fadeOut( 'fast' ).empty(); } caption.html( current.data( 'caption' ) ).fadeIn( 'slow' ); } else { caption.fadeOut( 'fast' ).empty(); } wpcom.carousel.pageview( attachmentId ); // @hide-in-jetpack // Load the images for the next and previous slides. $( next ).add( previous ).each( function() { gallery.jp_carousel( 'loadFullImage', $( this ) ); }); window.location.hash = last_known_location_hash = '#jp-carousel-' + attachmentId; }, slides : function(){ return this.find('.jp-carousel-slide'); }, slideDimensions : function(){ return { width: $(window).width() - (screenPadding * 2), height: Math.floor( $(window).height() / 100 * proportion - 60 ) }; }, loadSlide : function() { return this.each(function(){ var slide = $(this); slide.find('img') .one('load', function(){ // set the width/height of the image if it's too big slide .jp_carousel('fitSlide',false); }); }); }, bestFit : function(){ var max = gallery.jp_carousel('slideDimensions'), orig = this.jp_carousel('originalDimensions'), orig_ratio = orig.width / orig.height, w_ratio = 1, h_ratio = 1, width, height; if ( orig.width > max.width ) { w_ratio = max.width / orig.width; } if ( orig.height > max.height ) { h_ratio = max.height / orig.height; } if ( w_ratio < h_ratio ) { width = max.width; height = Math.floor( width / orig_ratio ); } else if ( h_ratio < w_ratio ) { height = max.height; width = Math.floor( height * orig_ratio ); } else { width = orig.width; height = orig.height; } return { width: width, height: height }; }, fitInfo : function(/*animated*/){ var current = this.jp_carousel('selectedSlide'), size = current.jp_carousel('bestFit'); photo_info.css({ 'left' : Math.floor( (info.width() - size.width) * 0.5 ), 'width' : Math.floor( size.width ) }); return this; }, fitMeta : function(animated){ var newInfoTop = { top: Math.floor( $(window).height() / 100 * proportion + 5 ) + 'px' }; var newLeftWidth = { width: ( info.width() - (imageMeta.width() + 80) ) + 'px' }; if (animated) { info.animate(newInfoTop); leftColWrapper.animate(newLeftWidth); } else { info.animate(newInfoTop); leftColWrapper.css(newLeftWidth); } }, fitSlide : function(/*animated*/){ return this.each(function(){ var $this = $(this), dimensions = $this.jp_carousel('bestFit'), method = 'css', max = gallery.jp_carousel('slideDimensions'); dimensions.left = 0; dimensions.top = Math.floor( (max.height - dimensions.height) * 0.5 ) + 40; $this[method](dimensions); }); }, texturize : function(text) { text = '' + text; // make sure we get a string. Title "1" came in as int 1, for example, which did not support .replace(). text = text.replace(/'/g, '’').replace(/'/g, '’').replace(/[\u2019]/g, '’'); text = text.replace(/"/g, '”').replace(/"/g, '”').replace(/"/g, '”').replace(/[\u201D]/g, '”'); text = text.replace(/([\w]+)=&#[\d]+;(.+?)&#[\d]+;/g, '$1="$2"'); // untexturize allowed HTML tags params double-quotes return $.trim(text); }, initSlides : function(items, start_index){ if ( items.length < 2 ) { $( '.jp-carousel-next-button, .jp-carousel-previous-button' ).hide(); } else { $( '.jp-carousel-next-button, .jp-carousel-previous-button' ).show(); } // Calculate the new src. items.each(function(/*i*/){ var src_item = $(this), orig_size = src_item.data('orig-size') || '', max = gallery.jp_carousel('slideDimensions'), parts = orig_size.split(','), medium_file = src_item.data('medium-file') || '', large_file = src_item.data('large-file') || '', src; orig_size = {width: parseInt(parts[0], 10), height: parseInt(parts[1], 10)}; // @start-hide-in-jetpack if ( 'undefined' !== typeof wpcom ) { src = src_item.attr('src') || src_item.attr('original') || src_item.data('original') || src_item.data('lazy-src'); if (src.indexOf('imgpress') !== -1) { src = src_item.data('orig-file'); } src = wpcom.carousel.addWidthToImageURL( src, wpcom.carousel.findFirstLargeEnoughWidth( orig_size.width, orig_size.height, max.width, max.height ) ); } else { // @end-hide-in-jetpack src = src_item.data('orig-file'); src = gallery.jp_carousel('selectBestImageSize', { orig_file : src, orig_width : orig_size.width, orig_height : orig_size.height, max_width : max.width, max_height : max.height, medium_file : medium_file, large_file : large_file }); // @start-hide-in-jetpack } // end else of if ( 'undefined' != typeof wpcom ) // @end-hide-in-jetpack // Set the final src $(this).data( 'gallery-src', src ); }); // If the start_index is not 0 then preload the clicked image first. if ( 0 !== start_index ) { $('')[0].src = $(items[start_index]).data('gallery-src'); } var useInPageThumbnails = items.first().closest( '.tiled-gallery.type-rectangular' ).length > 0; // create the 'slide' items.each(function(i){ var src_item = $(this), reblogged = src_item.data( 'reblogged' ) || 0, // @hide-in-jetpack attachment_id = src_item.data('attachment-id') || 0, comments_opened = src_item.data('comments-opened') || 0, image_meta = src_item.data('image-meta') || {}, orig_size = src_item.data('orig-size') || '', thumb_size = { width : src_item[0].naturalWidth, height : src_item[0].naturalHeight }, title = src_item.data('image-title') || '', description = src_item.data('image-description') || '', caption = src_item.parents('.gallery-item').find('.gallery-caption').html() || '', src = src_item.data('gallery-src') || '', medium_file = src_item.data('medium-file') || '', large_file = src_item.data('large-file') || '', orig_file = src_item.data('orig-file') || ''; var tiledCaption = src_item.parents('div.tiled-gallery-item').find('div.tiled-gallery-caption').html(); if ( tiledCaption ) { caption = tiledCaption; } if ( attachment_id && orig_size.length ) { title = gallery.jp_carousel('texturize', title); description = gallery.jp_carousel('texturize', description); caption = gallery.jp_carousel('texturize', caption); // Initially, the image is a 1x1 transparent gif. The preview is shown as a background image on the slide itself. var image = $( '' ) .attr( 'src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' ) .css( 'width', '100%' ) .css( 'height', '100%' ); var slide = $('
') .hide() .css({ //'position' : 'fixed', 'left' : i < start_index ? -1000 : gallery.width() }) .append( image ) .appendTo(gallery) .data('src', src ) .data('title', title) .data('desc', description) .data('caption', caption) .data('attachment-id', attachment_id) .data('permalink', src_item.parents('a').attr('href')) .data('orig-size', orig_size) .data('comments-opened', comments_opened) .data('image-meta', image_meta) .data('medium-file', medium_file) .data('large-file', large_file) .data('orig-file', orig_file) .data('thumb-size', thumb_size) .data( 'reblogged', reblogged ) // @hide-in-jetpack ; if ( useInPageThumbnails ) { // Use the image already loaded in the gallery as a preview. slide .data( 'preview-image', src_item.attr( 'src' ) ) .css( { 'background-image' : 'url("' + src_item.attr( 'src' ) + '")', 'background-size' : '100% 100%', 'background-position' : 'center center' } ); } slide.jp_carousel( 'fitSlide', false ); } }); return this; }, selectBestImageSize: function(args) { if ( 'object' !== typeof args ) { args = {}; } if ( 'undefined' === typeof args.orig_file ) { return ''; } if ( 'undefined' === typeof args.orig_width || 'undefined' === typeof args.max_width ) { return args.orig_file; } if ( 'undefined' === typeof args.medium_file || 'undefined' === typeof args.large_file ) { return args.orig_file; } // Check if the image is being served by Photon (using a regular expression on the hostname). var imageLinkParser = document.createElement( 'a' ); imageLinkParser.href = args.large_file; var isPhotonUrl = ( imageLinkParser.hostname.match( /^i[\d]{1}.wp.com$/i ) != null ); var medium_size_parts = gallery.jp_carousel( 'getImageSizeParts', args.medium_file, args.orig_width, isPhotonUrl ); var large_size_parts = gallery.jp_carousel( 'getImageSizeParts', args.large_file, args.orig_width, isPhotonUrl ); var large_width = parseInt( large_size_parts[0], 10 ), large_height = parseInt( large_size_parts[1], 10 ), medium_width = parseInt( medium_size_parts[0], 10 ), medium_height = parseInt( medium_size_parts[1], 10 ); // Assign max width and height. args.orig_max_width = args.max_width; args.orig_max_height = args.max_height; // Give devices with a higher devicePixelRatio higher-res images (Retina display = 2, Android phones = 1.5, etc) if ( 'undefined' !== typeof window.devicePixelRatio && window.devicePixelRatio > 1 ) { args.max_width = args.max_width * window.devicePixelRatio; args.max_height = args.max_height * window.devicePixelRatio; } if ( large_width >= args.max_width || large_height >= args.max_height ) { return args.large_file; } if ( medium_width >= args.max_width || medium_height >= args.max_height ) { return args.medium_file; } return args.orig_file; }, // @start-hide-in-jetpack show_reblog_box: function() { $('#carousel-reblog-box textarea').val(jetpackCarouselStrings.reblog_add_thoughts); //t.addClass('selected'); $('#carousel-reblog-box p.response').remove(); $('#carousel-reblog-box div.submit, #carousel-reblog-box div.submit span.canceltext').show(); $('#carousel-reblog-box div.submit input[type=submit]').prop('disabled', false); var current = $('.jp-carousel div.selected'); $('#carousel-reblog-box input#carousel-reblog-post-url').val( current.data('permalink') ); $('#carousel-reblog-box input#carousel-reblog-post-title').val( $('div.jp-carousel-info').children('h2').text() ); $('div.jp-carousel-info').append( $('#carousel-reblog-box') ).children().fadeOut('fast'); $('#carousel-reblog-box').fadeIn('fast'); }, hide_reblog_box: function () { $( 'div.jp-carousel-info' ).children().not( '#carousel-reblog-box' ).fadeIn( 'fast' ); $( '#carousel-reblog-box' ).fadeOut( 'fast' ); }, // @end-hide-in-jetpack originalDimensions: function() { var splitted = $(this).data('orig-size').split(','); return {width: parseInt(splitted[0], 10), height: parseInt(splitted[1], 10)}; }, format: function( args ) { if ( 'object' !== typeof args ) { args = {}; } if ( ! args.text || 'undefined' === typeof args.text ) { return; } if ( ! args.replacements || 'undefined' === typeof args.replacements ) { return args.text; } return args.text.replace(/{(\d+)}/g, function( match, number ) { return typeof args.replacements[number] !== 'undefined' ? args.replacements[number] : match; }); }, /** * Returns a number in a fraction format that represents the shutter speed. * @param Number speed * @return String */ shutterSpeed: function( speed ) { var denominator; // round to one decimal if value > 1s by multiplying it by 10, rounding, then dividing by 10 again if ( speed >= 1 ) { return Math.round( speed * 10 ) / 10 + 's'; } // If the speed is less than one, we find the denominator by inverting // the number. Since cameras usually use rational numbers as shutter // speeds, we should get a nice round number. Or close to one in cases // like 1/30. So we round it. denominator = Math.round( 1 / speed ); return '1/' + denominator + 's'; }, parseTitleDesc: function( value ) { if ( !value.match(' ') && value.match('_') ) { return ''; } // Prefix list originally based on http://commons.wikimedia.org/wiki/MediaWiki:Filename-prefix-blacklist $([ 'CIMG', // Casio 'DSC_', // Nikon 'DSCF', // Fuji 'DSCN', // Nikon 'DUW', // some mobile phones 'GEDC', // GE 'IMG', // generic 'JD', // Jenoptik 'MGP', // Pentax 'PICT', // misc. 'Imagen', // misc. 'Foto', // misc. 'DSC', // misc. 'Scan', // Scanners 'SANY', // Sanyo 'SAM', // Samsung 'Screen Shot [0-9]+' // Mac screenshots ]) .each(function(key, val){ var regex = new RegExp('^' + val); if ( regex.test(value) ) { value = ''; return; } }); return value; }, getTitleDesc: function( data ) { var title ='', desc = '', markup = '', target; target = $( 'div.jp-carousel-titleanddesc', 'div.jp-carousel-wrap' ); target.hide(); title = gallery.jp_carousel('parseTitleDesc', data.title) || ''; desc = gallery.jp_carousel('parseTitleDesc', data.desc) || ''; if ( title.length || desc.length ) { // Convert from HTML to plain text (including HTML entities decode, etc) if ( $('
').html( title ).text() === $('
').html( desc ).text() ) { title = ''; } markup = ( title.length ) ? '
' + title + '
' : ''; markup += ( desc.length ) ? '
' + desc + '
' : ''; target.html( markup ).fadeIn('slow'); } $( 'div#jp-carousel-comment-form-container' ).css('margin-top', '20px'); $( 'div#jp-carousel-comments-loading' ).css('margin-top', '20px'); }, // updateExif updates the contents of the exif UL (.jp-carousel-image-exif) updateExif: function( meta ) { if ( !meta || 1 !== Number( jetpackCarouselStrings.display_exif ) ) { return false; } var $ul = $( '

' ); $.each( meta, function( key, val ) { if ( 0 === parseFloat(val) || !val.length || -1 === $.inArray( key, [ 'camera', 'aperture', 'shutter_speed', 'focal_length' ] ) ) { return; } switch( key ) { case 'focal_length': val = val + 'mm'; break; case 'shutter_speed': val = gallery.jp_carousel('shutterSpeed', val); break; case 'aperture': val = 'f/' + val; break; } $ul.append( '

- ##### ' + jetpackCarouselStrings[key] + '

  ' + val + '
' ); }); // Update (replace) the content of the ul $( 'div.jp-carousel-image-meta ul.jp-carousel-image-exif' ).replaceWith( $ul ); }, // updateFullSizeLink updates the contents of the jp-carousel-image-download link updateFullSizeLink: function(current) { if(!current || !current.data) { return false; } var original, origSize = current.data('orig-size').split(',' ), imageLinkParser = document.createElement( 'a' ); imageLinkParser.href = current.data( 'src' ).replace( /\?.+$/, '' ); // Is this a Photon URL? if ( imageLinkParser.hostname.match( /^i[\d]{1}.wp.com$/i ) !== null ) { original = imageLinkParser.href; } else { original = current.data('orig-file').replace(/\?.+$/, ''); } var permalink = $( ''+gallery.jp_carousel('format', {'text': jetpackCarouselStrings.download_original, 'replacements': origSize})+'' ) .addClass( 'jp-carousel-image-download' ) .attr( 'href', original ) .attr( 'target', '_blank' ); // Update (replace) the content of the anchor $( 'div.jp-carousel-image-meta a.jp-carousel-image-download' ).replaceWith( permalink ); }, updateMap: function( meta ) { if ( !meta.latitude || !meta.longitude || 1 !== Number( jetpackCarouselStrings.display_geo ) ) { return; } var latitude = meta.latitude, longitude = meta.longitude, $metabox = $( 'div.jp-carousel-image-meta', 'div.jp-carousel-wrap' ), $mapbox = $( '
' ), style = '&scale=2&style=feature:all|element:all|invert_lightness:true|hue:0x0077FF|saturation:-50|lightness:-5|gamma:0.91'; $mapbox .addClass( 'jp-carousel-image-map' ) .html( '\ \
\ \ ' ) .prependTo( $metabox ); }, testCommentsOpened: function( opened ) { if ( 1 === parseInt( opened, 10 ) ) { // @start-hide-in-jetpack if ( 1 === Number( jetpackCarouselStrings.is_logged_in ) ) { $('.jp-carousel-commentlink').fadeIn('fast'); } else { // @end-hide-in-jetpack $('.jp-carousel-buttons').fadeIn('fast'); // @start-hide-in-jetpack } // @end-hide-in-jetpack commentForm.fadeIn('fast'); } else { // @start-hide-in-jetpack if ( 1 === Number( jetpackCarouselStrings.is_logged_in ) ) { $('.jp-carousel-commentlink').fadeOut('fast'); } else { // @end-hide-in-jetpack $('.jp-carousel-buttons').fadeOut('fast'); // @start-hide-in-jetpack } // @end-hide-in-jetpack commentForm.fadeOut('fast'); } }, getComments: function( args ) { clearInterval( commentInterval ); if ( 'object' !== typeof args ) { return; } if ( 'undefined' === typeof args.attachment_id || ! args.attachment_id ) { return; } if ( ! args.offset || 'undefined' === typeof args.offset || args.offset < 1 ) { args.offset = 0; } var comments = $('.jp-carousel-comments'), commentsLoading = $('#jp-carousel-comments-loading').show(); if ( args.clear ) { comments.hide().empty(); } $.ajax({ type: 'GET', url: jetpackCarouselStrings.ajaxurl, dataType: 'json', data: { action: 'get_attachment_comments', nonce: jetpackCarouselStrings.nonce, id: args.attachment_id, offset: args.offset }, success: function(data/*, status, xhr*/) { if ( args.clear ) { comments.fadeOut('fast').empty(); } $( data ).each(function(){ var comment = $('
') .addClass('jp-carousel-comment') .attr('id', 'jp-carousel-comment-' + this['id']) .html( '
' + this['gravatar_markup'] + '
' + '
' + this['author_markup'] + '
' + '
' + this['date_gmt'] + '
' + '
' + this['content'] + '
' ); comments.append(comment); // Set the interval to check for a new page of comments. clearInterval( commentInterval ); commentInterval = setInterval( function() { if ( ( $('.jp-carousel-overlay').height() - 150 ) < $('.jp-carousel-wrap').scrollTop() + $(window).height() ) { gallery.jp_carousel('getComments',{ attachment_id: args.attachment_id, offset: args.offset + 10, clear: false }); clearInterval( commentInterval ); } }, 300 ); }); // Verify (late) that the user didn't repeatldy click the arrows really fast, in which case the requested // attachment id might no longer match the current attachment id by the time we get the data back or a now // registered infiniscroll event kicks in, so we don't ever display comments for the wrong image by mistake. var current = $('.jp-carousel div.selected'); if ( current && current.data && current.data('attachment-id') != args.attachment_id ) { // jshint ignore:line comments.fadeOut('fast'); comments.empty(); return; } // Increase the height of the background, semi-transparent overlay to match the new length of the comments list. $('.jp-carousel-overlay').height( $(window).height() + titleAndDescription.height() + commentForm.height() + ( (comments.height() > 0) ? comments.height() : imageMeta.height() ) + 200 ); comments.show(); commentsLoading.hide(); }, error: function(xhr, status, error) { // TODO: proper error handling console.log( 'Comment get fail...', xhr, status, error ); comments.fadeIn('fast'); commentsLoading.fadeOut('fast'); } }); }, postCommentError: function(args) { if ( 'object' !== typeof args ) { args = {}; } if ( ! args.field || 'undefined' === typeof args.field || ! args.error || 'undefined' === typeof args.error ) { return; } $('#jp-carousel-comment-post-results').slideUp('fast').html(''+args.error+'').slideDown('fast'); $('#jp-carousel-comment-form-spinner').spin(false); }, setCommentIframeSrc: function(attachment_id) { var iframe = $('#jp-carousel-comment-iframe'); // Set the proper irame src for the current attachment id if (iframe && iframe.length) { iframe.attr('src', iframe.attr('src').replace(/(postid=)\d+/, '$1'+attachment_id) ); iframe.attr('src', iframe.attr('src').replace(/(%23.+)?$/, '%23jp-carousel-'+attachment_id) ); } }, clearCommentTextAreaValue: function() { var commentTextArea = $('#jp-carousel-comment-form-comment-field'); if ( commentTextArea ) { commentTextArea.val(''); } }, nextSlide : function () { var slides = this.jp_carousel( 'slides' ); var selected = this.jp_carousel( 'selectedSlide' ); if ( selected.length === 0 || ( slides.length > 2 && selected.is( slides.last() ) ) ) { return slides.first(); } return selected.next(); }, prevSlide : function () { var slides = this.jp_carousel( 'slides' ); var selected = this.jp_carousel( 'selectedSlide' ); if ( selected.length === 0 || ( slides.length > 2 && selected.is( slides.first() ) ) ) { return slides.last(); } return selected.prev(); }, loadFullImage : function ( slide ) { var image = slide.find( 'img:first' ); if ( ! image.data( 'loaded' ) ) { // If the width of the slide is smaller than the width of the "thumbnail" we're already using, // don't load the full image. image.on( 'load.jetpack', function () { image.off( 'load.jetpack' ); $( this ).closest( '.jp-carousel-slide' ).css( 'background-image', '' ); } ); if ( ! slide.data( 'preview-image' ) || ( slide.data( 'thumb-size' ) && slide.width() > slide.data( 'thumb-size' ).width ) ) { image.attr( 'src', image.closest( '.jp-carousel-slide' ).data( 'src' ) ).attr('itemprop', 'image'); } else { image.attr( 'src', slide.data( 'preview-image' ) ).attr('itemprop', 'image'); } image.data( 'loaded', 1 ); } }, hasMultipleImages : function () { return gallery.jp_carousel('slides').length > 1; } }; $.fn.jp_carousel = function(method){ // ask for the HTML of the gallery // Method calling logic if ( methods[method] ) { return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.open.apply( this, arguments ); } else { $.error( 'Method ' + method + ' does not exist on jQuery.jp_carousel' ); } }; // register the event listener for starting the gallery $( document.body ).on( 'click.jp-carousel', 'div.gallery,div.tiled-gallery, a.single-image-gallery', function(e) { if ( ! $(this).jp_carousel( 'testForData', e.currentTarget ) ) { return; } if ( $(e.target).parent().hasClass('gallery-caption') ) { return; } e.preventDefault(); // Stopping propagation in case there are parent elements // with .gallery or .tiled-gallery class e.stopPropagation(); $(this).jp_carousel('open', {start_index: $(this).find('.gallery-item, .tiled-gallery-item').index($(e.target).parents('.gallery-item, .tiled-gallery-item'))}); }); // handle lightbox (single image gallery) for images linking to 'Attachment Page' if ( 1 === Number( jetpackCarouselStrings.single_image_gallery ) ) { // process links that contain img tag with attribute data-attachment-id $( 'a img[data-attachment-id]' ).each(function() { var container = $( this ).parent(); // skip if image was already added to gallery by shortcode if( container.parent( '.gallery-icon' ).length ) { return; } var valid = false; // if link points to 'Media File' and flag is set allow it if ( $( container ).attr( 'href' ) === $( this ).attr( 'data-orig-file' ) && 1 === Number( jetpackCarouselStrings.single_image_gallery_media_file ) ) { valid = true; } // if link points to 'Attachment Page' allow it if( $( container ).attr( 'href' ) === $( this ).attr( 'data-permalink' ) ) { valid = true; } // links to 'Custom URL' or 'Media File' when flag not set are not valid if( ! valid ) { return; } // make this node a gallery recognizable by event listener above $( container ).addClass( 'single-image-gallery' ) ; // blog_id is needed to allow posting comments to correct blog $( container ).data( 'carousel-extra', { blog_id: Number( jetpackCarouselStrings.blog_id ) } ); }); } // Makes carousel work on page load and when back button leads to same URL with carousel hash (ie: no actual document.ready trigger) $( window ).on( 'hashchange.jp-carousel', function () { var hashRegExp = /jp-carousel-(\d+)/, matches, attachmentId, galleries, selectedThumbnail; if ( ! window.location.hash || ! hashRegExp.test( window.location.hash ) ) { if ( gallery && gallery.opened ) { container.jp_carousel( 'close' ); } return; } if ( ( window.location.hash === last_known_location_hash ) && gallery.opened ) { return; } if ( window.location.hash && gallery && !gallery.opened && history.back) { history.back(); return; } last_known_location_hash = window.location.hash; matches = window.location.hash.match( hashRegExp ); attachmentId = parseInt( matches[1], 10 ); galleries = $( 'div.gallery, div.tiled-gallery, a.single-image-gallery' ); // Find the first thumbnail that matches the attachment ID in the location // hash, then open the gallery that contains it. galleries.each( function( _, galleryEl ) { $( galleryEl ).find('img').each( function( imageIndex, imageEl ) { if ( $( imageEl ).data( 'attachment-id' ) === parseInt( attachmentId, 10 ) ) { selectedThumbnail = { index: imageIndex, gallery: galleryEl }; return false; } }); if ( selectedThumbnail ) { $( selectedThumbnail.gallery ) .jp_carousel( 'openOrSelectSlide', selectedThumbnail.index ); return false; } }); }); if ( window.location.hash ) { $( window ).trigger( 'hashchange' ); } }); /** * jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!) * Common usage: wipe images (left and right to show the previous or next image) * * @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de) * Version 1.1.1, modified to pass the touchmove event to the callbacks. */ (function($) { $.fn.touchwipe = function(settings) { var config = { min_move_x: 20, min_move_y: 20, wipeLeft: function(/*e*/) { }, wipeRight: function(/*e*/) { }, wipeUp: function(/*e*/) { }, wipeDown: function(/*e*/) { }, preventDefaultEvents: true }; if (settings) { $.extend(config, settings); } this.each(function() { var startX; var startY; var isMoving = false; function cancelTouch() { this.removeEventListener('touchmove', onTouchMove); startX = null; isMoving = false; } function onTouchMove(e) { if(config.preventDefaultEvents) { e.preventDefault(); } if(isMoving) { var x = e.touches[0].pageX; var y = e.touches[0].pageY; var dx = startX - x; var dy = startY - y; if(Math.abs(dx) >= config.min_move_x) { cancelTouch(); if(dx > 0) { config.wipeLeft(e); } else { config.wipeRight(e); } } else if(Math.abs(dy) >= config.min_move_y) { cancelTouch(); if(dy > 0) { config.wipeDown(e); } else { config.wipeUp(e); } } } } function onTouchStart(e) { if (e.touches.length === 1) { startX = e.touches[0].pageX; startY = e.touches[0].pageY; isMoving = true; this.addEventListener('touchmove', onTouchMove, false); } } if ('ontouchstart' in document.documentElement) { this.addEventListener('touchstart', onTouchStart, false); } }); return this; }; })(jQuery); ;