queuehandler.js
| 1 | /* global pm, wpcom_reblog */ |
| 2 | |
| 3 | var jetpackLikesWidgetQueue = []; |
| 4 | var jetpackLikesWidgetBatch = []; |
| 5 | var jetpackLikesMasterReady = false; |
| 6 | |
| 7 | function JetpackLikespostMessage( message, target ) { |
| 8 | if ( 'string' === typeof message ){ |
| 9 | try { |
| 10 | message = JSON.parse( message ); |
| 11 | } catch(e) { |
| 12 | return; |
| 13 | } |
| 14 | } |
| 15 | |
| 16 | pm( { |
| 17 | target: target, |
| 18 | type: 'likesMessage', |
| 19 | data: message, |
| 20 | origin: '*' |
| 21 | } ); |
| 22 | } |
| 23 | |
| 24 | function JetpackLikesBatchHandler() { |
| 25 | var requests = []; |
| 26 | jQuery( 'div.jetpack-likes-widget-unloaded' ).each( function() { |
| 27 | if ( jetpackLikesWidgetBatch.indexOf( this.id ) > -1 ) { |
| 28 | return; |
| 29 | } |
| 30 | jetpackLikesWidgetBatch.push( this.id ); |
| 31 | var regex = /like-(post|comment)-wrapper-(\d+)-(\d+)-(\w+)/, |
| 32 | match = regex.exec( this.id ), |
| 33 | info; |
| 34 | |
| 35 | if ( ! match || match.length !== 5 ) { |
| 36 | return; |
| 37 | } |
| 38 | |
| 39 | info = { |
| 40 | blog_id: match[2], |
| 41 | width: this.width |
| 42 | }; |
| 43 | |
| 44 | if ( 'post' === match[1] ) { |
| 45 | info.post_id = match[3]; |
| 46 | } else if ( 'comment' === match[1] ) { |
| 47 | info.comment_id = match[3]; |
| 48 | } |
| 49 | |
| 50 | info.obj_id = match[4]; |
| 51 | |
| 52 | requests.push( info ); |
| 53 | }); |
| 54 | |
| 55 | if ( requests.length > 0 ) { |
| 56 | JetpackLikespostMessage( { event: 'initialBatch', requests: requests }, window.frames['likes-master'] ); |
| 57 | } |
| 58 | } |
| 59 | |
| 60 | function JetpackLikesMessageListener( event ) { |
| 61 | if ( 'undefined' === typeof event.event ) { |
| 62 | return; |
| 63 | } |
| 64 | |
| 65 | if ( 'masterReady' === event.event ) { |
| 66 | jQuery( document ).ready( function() { |
| 67 | jetpackLikesMasterReady = true; |
| 68 | |
| 69 | var stylesData = { |
| 70 | event: 'injectStyles' |
| 71 | }, |
| 72 | $sdTextColor = jQuery( '.sd-text-color' ), |
| 73 | $sdLinkColor = jQuery( '.sd-link-color' ); |
| 74 | |
| 75 | if ( jQuery( 'iframe.admin-bar-likes-widget' ).length > 0 ) { |
| 76 | JetpackLikespostMessage( { event: 'adminBarEnabled' }, window.frames[ 'likes-master' ] ); |
| 77 | |
| 78 | stylesData.adminBarStyles = { |
| 79 | background: jQuery( '#wpadminbar .quicklinks li#wp-admin-bar-wpl-like > a' ).css( 'background' ), |
| 80 | isRtl: ( 'rtl' === jQuery( '#wpadminbar' ).css( 'direction' ) ) |
| 81 | }; |
| 82 | } |
| 83 | |
| 84 | if ( ! window.addEventListener ) { |
| 85 | jQuery( '#wp-admin-bar-admin-bar-likes-widget' ).hide(); |
| 86 | } |
| 87 | |
| 88 | stylesData.textStyles = { |
| 89 | color: $sdTextColor.css( 'color' ), |
| 90 | fontFamily: $sdTextColor.css( 'font-family' ), |
| 91 | fontSize: $sdTextColor.css( 'font-size' ), |
| 92 | direction: $sdTextColor.css( 'direction' ), |
| 93 | fontWeight: $sdTextColor.css( 'font-weight' ), |
| 94 | fontStyle: $sdTextColor.css( 'font-style' ), |
| 95 | textDecoration: $sdTextColor.css('text-decoration') |
| 96 | }; |
| 97 | |
| 98 | stylesData.linkStyles = { |
| 99 | color: $sdLinkColor.css('color'), |
| 100 | fontFamily: $sdLinkColor.css('font-family'), |
| 101 | fontSize: $sdLinkColor.css('font-size'), |
| 102 | textDecoration: $sdLinkColor.css('text-decoration'), |
| 103 | fontWeight: $sdLinkColor.css( 'font-weight' ), |
| 104 | fontStyle: $sdLinkColor.css( 'font-style' ) |
| 105 | }; |
| 106 | |
| 107 | JetpackLikespostMessage( stylesData, window.frames[ 'likes-master' ] ); |
| 108 | |
| 109 | JetpackLikesBatchHandler(); |
| 110 | |
| 111 | jQuery( document ).on( 'inview', 'div.jetpack-likes-widget-unloaded', function() { |
| 112 | jetpackLikesWidgetQueue.push( this.id ); |
| 113 | }); |
| 114 | }); |
| 115 | } |
| 116 | |
| 117 | if ( 'showLikeWidget' === event.event ) { |
| 118 | jQuery( '#' + event.id + ' .post-likes-widget-placeholder' ).fadeOut( 'fast', function() { |
| 119 | jQuery( '#' + event.id + ' .post-likes-widget' ).fadeIn( 'fast', function() { |
| 120 | JetpackLikespostMessage( { event: 'likeWidgetDisplayed', blog_id: event.blog_id, post_id: event.post_id, obj_id: event.obj_id }, window.frames['likes-master'] ); |
| 121 | }); |
| 122 | }); |
| 123 | } |
| 124 | |
| 125 | if ( 'clickReblogFlair' === event.event ) { |
| 126 | wpcom_reblog.toggle_reblog_box_flair( event.obj_id ); |
| 127 | } |
| 128 | |
| 129 | if ( 'showOtherGravatars' === event.event ) { |
| 130 | var $container = jQuery( '#likes-other-gravatars' ), |
| 131 | $list = $container.find( 'ul' ), |
| 132 | offset, rowLength, height, scrollbarWidth; |
| 133 | |
| 134 | $container.hide(); |
| 135 | $list.html( '' ); |
| 136 | |
| 137 | $container.find( '.likes-text span' ).text( event.total ); |
| 138 | |
| 139 | jQuery.each( event.likers, function( i, liker ) { |
| 140 | $list.append( '<li class="' + liker.css_class + '"><a href="' + liker.profile_URL + '" class="wpl-liker" rel="nofollow" target="_parent"><img src="' + liker.avatar_URL + '" alt="' + liker.name + '" width="30" height="30" style="padding-right: 3px;" /></a></li>'); |
| 141 | } ); |
| 142 | |
| 143 | offset = jQuery( '[name=\'' + event.parent + '\']' ).offset(); |
| 144 | |
| 145 | $container.css( 'left', offset.left + event.position.left - 10 + 'px' ); |
| 146 | $container.css( 'top', offset.top + event.position.top - 33 + 'px' ); |
| 147 | |
| 148 | rowLength = Math.floor( event.width / 37 ); |
| 149 | height = ( Math.ceil( event.likers.length / rowLength ) * 37 ) + 13; |
| 150 | if ( height > 204 ) { |
| 151 | height = 204; |
| 152 | } |
| 153 | |
| 154 | $container.css( 'height', height + 'px' ); |
| 155 | $container.css( 'width', rowLength * 37 - 7 + 'px' ); |
| 156 | |
| 157 | $list.css( 'width', rowLength * 37 + 'px' ); |
| 158 | |
| 159 | $container.fadeIn( 'slow' ); |
| 160 | |
| 161 | scrollbarWidth = $list[0].offsetWidth - $list[0].clientWidth; |
| 162 | if ( scrollbarWidth > 0 ) { |
| 163 | $container.width( $container.width() + scrollbarWidth ); |
| 164 | $list.width( $list.width() + scrollbarWidth ); |
| 165 | } |
| 166 | } |
| 167 | } |
| 168 | |
| 169 | pm.bind( 'likesMessage', function(e) { JetpackLikesMessageListener(e); } ); |
| 170 | |
| 171 | jQuery( document ).click( function( e ) { |
| 172 | var $container = jQuery( '#likes-other-gravatars' ); |
| 173 | |
| 174 | if ( $container.has( e.target ).length === 0 ) { |
| 175 | $container.fadeOut( 'slow' ); |
| 176 | } |
| 177 | }); |
| 178 | |
| 179 | function JetpackLikesWidgetQueueHandler() { |
| 180 | var $wrapper, wrapperID, found; |
| 181 | if ( ! jetpackLikesMasterReady ) { |
| 182 | setTimeout( JetpackLikesWidgetQueueHandler, 500 ); |
| 183 | return; |
| 184 | } |
| 185 | |
| 186 | if ( jetpackLikesWidgetQueue.length > 0 ) { |
| 187 | // We may have a widget that needs creating now |
| 188 | found = false; |
| 189 | while( jetpackLikesWidgetQueue.length > 0 ) { |
| 190 | // Grab the first member of the queue that isn't already loading. |
| 191 | wrapperID = jetpackLikesWidgetQueue.splice( 0, 1 )[0]; |
| 192 | if ( jQuery( '#' + wrapperID ).hasClass( 'jetpack-likes-widget-unloaded' ) ) { |
| 193 | found = true; |
| 194 | break; |
| 195 | } |
| 196 | } |
| 197 | if ( ! found ) { |
| 198 | setTimeout( JetpackLikesWidgetQueueHandler, 500 ); |
| 199 | return; |
| 200 | } |
| 201 | } else if ( jQuery( 'div.jetpack-likes-widget-unloaded' ).length > 0 ) { |
| 202 | // Grab any unloaded widgets for a batch request |
| 203 | JetpackLikesBatchHandler(); |
| 204 | |
| 205 | // Get the next unloaded widget |
| 206 | wrapperID = jQuery( 'div.jetpack-likes-widget-unloaded' ).first()[0].id; |
| 207 | if ( ! wrapperID ) { |
| 208 | // Everything is currently loaded |
| 209 | setTimeout( JetpackLikesWidgetQueueHandler, 500 ); |
| 210 | return; |
| 211 | } |
| 212 | } |
| 213 | |
| 214 | if ( 'undefined' === typeof wrapperID ) { |
| 215 | setTimeout( JetpackLikesWidgetQueueHandler, 500 ); |
| 216 | return; |
| 217 | } |
| 218 | |
| 219 | $wrapper = jQuery( '#' + wrapperID ); |
| 220 | $wrapper.find( 'iframe' ).remove(); |
| 221 | |
| 222 | if ( $wrapper.hasClass( 'slim-likes-widget' ) ) { |
| 223 | $wrapper.find( '.post-likes-widget-placeholder' ).after( '<iframe class="post-likes-widget jetpack-likes-widget" name="' + $wrapper.data( 'name' ) + '" height="22px" width="68px" frameBorder="0" scrolling="no" src="' + $wrapper.data( 'src' ) + '"></iframe>' ); |
| 224 | } else { |
| 225 | $wrapper.find( '.post-likes-widget-placeholder' ).after( '<iframe class="post-likes-widget jetpack-likes-widget" name="' + $wrapper.data( 'name' ) + '" height="55px" width="100%" frameBorder="0" src="' + $wrapper.data( 'src' ) + '"></iframe>' ); |
| 226 | } |
| 227 | |
| 228 | $wrapper.removeClass( 'jetpack-likes-widget-unloaded' ).addClass( 'jetpack-likes-widget-loading' ); |
| 229 | |
| 230 | $wrapper.find( 'iframe' ).load( function( e ) { |
| 231 | var $iframe = jQuery( e.target ); |
| 232 | $wrapper.removeClass( 'jetpack-likes-widget-loading' ).addClass( 'jetpack-likes-widget-loaded' ); |
| 233 | |
| 234 | JetpackLikespostMessage( { event: 'loadLikeWidget', name: $iframe.attr( 'name' ), width: $iframe.width() }, window.frames[ 'likes-master' ] ); |
| 235 | |
| 236 | if ( $wrapper.hasClass( 'slim-likes-widget' ) ) { |
| 237 | $wrapper.find( 'iframe' ).Jetpack( 'resizeable' ); |
| 238 | } |
| 239 | }); |
| 240 | setTimeout( JetpackLikesWidgetQueueHandler, 250 ); |
| 241 | } |
| 242 | JetpackLikesWidgetQueueHandler(); |
| 243 |