summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'plugins/jetpack/modules/sharedaddy/admin-sharing.js')
-rw-r--r--plugins/jetpack/modules/sharedaddy/admin-sharing.js532
1 files changed, 532 insertions, 0 deletions
diff --git a/plugins/jetpack/modules/sharedaddy/admin-sharing.js b/plugins/jetpack/modules/sharedaddy/admin-sharing.js
new file mode 100644
index 00000000..741931d1
--- /dev/null
+++ b/plugins/jetpack/modules/sharedaddy/admin-sharing.js
@@ -0,0 +1,532 @@
+/* jshint onevar: false, smarttabs: true */
+/* global sharing_loading_icon */
+
+( function( $ ) {
+ $( document ).ready( function() {
+ function enable_share_button() {
+ $( '.preview a.sharing-anchor' )
+ .unbind( 'mouseenter mouseenter' )
+ .hover(
+ function() {
+ if ( $( this ).data( 'hasappeared' ) !== true ) {
+ var item = $( '.sharing-hidden .inner' );
+ var original = $( this ).parents( 'li' );
+
+ // Create a timer to make the area appear if the mouse hovers for a period
+ var timer = setTimeout( function() {
+ $( item )
+ .css( {
+ left: $( original ).position().left + 'px',
+ top: $( original ).position().top + $( original ).height() + 3 + 'px',
+ } )
+ .slideDown( 200, function() {
+ // Mark the item as have being appeared by the hover
+ $( original )
+ .data( 'hasappeared', true )
+ .data( 'hasoriginal', true )
+ .data( 'hasitem', false );
+
+ // Remove all special handlers
+ $( item )
+ .mouseleave( handler_item_leave )
+ .mouseenter( handler_item_enter );
+ $( original )
+ .mouseleave( handler_original_leave )
+ .mouseenter( handler_original_enter );
+
+ // Add a special handler to quickly close the item
+ $( original ).click( close_it );
+ } );
+
+ // The following handlers take care of the mouseenter/mouseleave for the share button and the share area - if both are left then we close the share area
+ var handler_item_leave = function() {
+ $( original ).data( 'hasitem', false );
+
+ if ( $( original ).data( 'hasoriginal' ) === false ) {
+ var timer = setTimeout( close_it, 800 );
+ $( original ).data( 'timer2', timer );
+ }
+ };
+
+ var handler_item_enter = function() {
+ $( original ).data( 'hasitem', true );
+ clearTimeout( $( original ).data( 'timer2' ) );
+ };
+
+ var handler_original_leave = function() {
+ $( original ).data( 'hasoriginal', false );
+
+ if ( $( original ).data( 'hasitem' ) === false ) {
+ var timer = setTimeout( close_it, 800 );
+ $( original ).data( 'timer2', timer );
+ }
+ };
+
+ var handler_original_enter = function() {
+ $( original ).data( 'hasoriginal', true );
+ clearTimeout( $( original ).data( 'timer2' ) );
+ };
+
+ var close_it = function() {
+ item.slideUp( 200 );
+
+ // Clear all hooks
+ $( original )
+ .unbind( 'mouseleave', handler_original_leave )
+ .unbind( 'mouseenter', handler_original_enter );
+ $( item )
+ .unbind( 'mouseleave', handler_item_leave )
+ .unbind( 'mouseenter', handler_item_leave );
+ $( original ).data( 'hasappeared', false );
+ $( original ).unbind( 'click', close_it );
+ return false;
+ };
+ }, 200 );
+
+ // Remember the timer so we can detect it on the mouseout
+ $( this ).data( 'timer', timer );
+ }
+ },
+ function() {
+ // Mouse out - remove any timer
+ clearTimeout( $( this ).data( 'timer' ) );
+ $( this ).data( 'timer', false );
+ }
+ );
+ }
+
+ function update_preview() {
+ var button_style = $( '#button_style' ).val();
+
+ // Clear the live preview
+ $( '#live-preview ul.preview li' ).remove();
+
+ // Add label
+ if (
+ $( '#save-enabled-shares input[name=visible]' ).val() ||
+ $( '#save-enabled-shares input[name=hidden]' ).val()
+ ) {
+ $( '#live-preview ul.preview' ).append(
+ $( '#live-preview ul.archive .sharing-label' ).clone()
+ );
+ }
+
+ // Re-insert all the enabled items
+ $( 'ul.services-enabled li' ).each( function() {
+ if ( $( this ).hasClass( 'service' ) ) {
+ var service = $( this ).attr( 'id' );
+ $( '#live-preview ul.preview' ).append(
+ $( '#live-preview ul.archive li.preview-' + service ).clone()
+ );
+ }
+ } );
+
+ // Add any hidden items
+ if ( $( '#save-enabled-shares input[name=hidden]' ).val() ) {
+ // Add share button
+ $( '#live-preview ul.preview' ).append(
+ $( '#live-preview ul.archive .share-more' )
+ .parent()
+ .clone()
+ );
+
+ $( '.sharing-hidden ul li' ).remove();
+
+ // Add hidden items into the inner panel
+ $( 'ul.services-hidden li' ).each( function(/*pos, item*/) {
+ if ( $( this ).hasClass( 'service' ) ) {
+ var service = $( this ).attr( 'id' );
+ $( '.sharing-hidden .inner ul' ).append(
+ $( '#live-preview ul.archive .preview-' + service ).clone()
+ );
+ }
+ } );
+
+ enable_share_button();
+ }
+
+ $( '#live-preview div.sharedaddy' ).removeClass( 'sd-social-icon' );
+ $( '#live-preview li.advanced' ).removeClass( 'no-icon' );
+
+ // Button style
+ if ( 'icon' === button_style ) {
+ $( '#live-preview ul.preview div span, .sharing-hidden .inner ul div span' )
+ .html( ' ' )
+ .parent()
+ .addClass( 'no-text' );
+ $( '#live-preview div.sharedaddy' ).addClass( 'sd-social-icon' );
+ } else if ( 'official' === button_style ) {
+ $( '#live-preview ul.preview .advanced, .sharing-hidden .inner ul .advanced' ).each(
+ function(/*i*/) {
+ if (
+ ! $( this ).hasClass( 'preview-press-this' ) &&
+ ! $( this ).hasClass( 'preview-email' ) &&
+ ! $( this ).hasClass( 'preview-print' ) &&
+ ! $( this ).hasClass( 'preview-telegram' ) &&
+ ! $( this ).hasClass( 'preview-jetpack-whatsapp' ) &&
+ ! $( this ).hasClass( 'share-custom' ) &&
+ ! $( this ).hasClass( 'share-deprecated' )
+ ) {
+ $( this )
+ .find( '.option a span' )
+ .html( '' )
+ .parent()
+ .removeClass( 'sd-button' )
+ .parent()
+ .attr( 'class', 'option option-smart-on' );
+ }
+ }
+ );
+ } else if ( 'text' === button_style ) {
+ $( '#live-preview li.advanced' ).addClass( 'no-icon' );
+ }
+ }
+
+ window.sharing_option_changed = function() {
+ var item = this;
+
+ // Loading icon
+ $( this )
+ .parents( 'li:first' )
+ .css( 'backgroundImage', 'url("' + sharing_loading_icon + '")' );
+
+ // Save
+ $( this )
+ .parents( 'form' )
+ .ajaxSubmit( function( response ) {
+ if ( response.indexOf( '<!---' ) >= 0 ) {
+ var button = response.substring( 0, response.indexOf( '<!--->' ) );
+ var preview = response.substring( response.indexOf( '<!--->' ) + 6 );
+
+ if ( $( item ).is( ':submit' ) === true ) {
+ // Update the DOM using a bit of cut/paste technology
+
+ $( item )
+ .parents( 'li:first' )
+ .replaceWith( button );
+ }
+
+ $(
+ '#live-preview ul.archive li.preview-' +
+ $( item )
+ .parents( 'form' )
+ .find( 'input[name=service]' )
+ .val()
+ ).replaceWith( preview );
+ }
+
+ // Update preview
+ update_preview();
+
+ // Restore the icon
+ $( item )
+ .parents( 'li:first' )
+ .removeAttr( 'style' );
+ } );
+
+ if ( $( item ).is( ':submit' ) === true ) {
+ return false;
+ }
+ return true;
+ };
+
+ function showExtraOptions( service ) {
+ jQuery( '.' + service + '-extra-options' )
+ .css( { backgroundColor: '#ffffcc' } )
+ .fadeIn();
+ }
+
+ function hideExtraOptions( service ) {
+ jQuery( '.' + service + '-extra-options' ).fadeOut( 'slow' );
+ }
+
+ function save_services() {
+ $( '#enabled-services h3 img' ).show();
+
+ // Toggle various dividers/help texts
+ if ( $( '#enabled-services ul.services-enabled li.service' ).length > 0 ) {
+ $( '#drag-instructions' ).hide();
+ } else {
+ $( '#drag-instructions' ).show();
+ }
+
+ if ( $( '#enabled-services li.service' ).length > 0 ) {
+ $( '#live-preview .services h2' ).hide();
+ } else {
+ $( '#live-preview .services h2' ).show();
+ }
+
+ // Gather the modules
+ var visible = [],
+ hidden = [];
+
+ $( 'ul.services-enabled li' ).each( function() {
+ if ( $( this ).hasClass( 'service' ) ) {
+ // Ready for saving
+ visible[ visible.length ] = $( this ).attr( 'id' );
+ showExtraOptions( $( this ).attr( 'id' ) );
+ }
+ } );
+
+ $( 'ul.services-available li' ).each( function() {
+ if ( $( this ).hasClass( 'service' ) ) {
+ hideExtraOptions( $( this ).attr( 'id' ) );
+ }
+ } );
+
+ $( 'ul.services-hidden li' ).each( function() {
+ if ( $( this ).hasClass( 'service' ) ) {
+ // Ready for saving
+ hidden[ hidden.length ] = $( this ).attr( 'id' );
+ showExtraOptions( $( this ).attr( 'id' ) );
+ }
+ } );
+
+ // Set the hidden element values
+ $( '#save-enabled-shares input[name=visible]' ).val( visible.join( ',' ) );
+ $( '#save-enabled-shares input[name=hidden]' ).val( hidden.join( ',' ) );
+
+ update_preview();
+
+ // Save it
+ $( '#save-enabled-shares' ).ajaxSubmit( function() {
+ $( '#enabled-services h3 img' ).hide();
+ } );
+ }
+
+ $( '#enabled-services .services ul' ).sortable( {
+ receive: function(/*event, ui*/) {
+ save_services();
+ },
+ stop: function() {
+ save_services();
+ $( 'li.service' ).enableSelection(); // Fixes a problem with Chrome
+ },
+ over: function(/*event, ui*/) {
+ $( this )
+ .find( 'ul' )
+ .addClass( 'dropping' );
+
+ // Ensure the 'end-fix' is at the end
+ $( '#enabled-services li.end-fix' ).remove();
+ $( '#enabled-services ul' ).append( '<li class="end-fix"></li>' );
+ },
+ out: function(/*event, ui*/) {
+ $( this )
+ .find( 'ul' )
+ .removeClass( 'dropping' );
+
+ // Ensure the 'end-fix' is at the end
+ $( '#enabled-services li.end-fix' ).remove();
+ $( '#enabled-services ul' ).append( '<li class="end-fix"></li>' );
+ },
+ helper: function( event, ui ) {
+ ui.find( '.advanced-form' ).hide();
+
+ return ui.clone();
+ },
+ start: function(/*event, ui*/) {
+ // Make sure that the advanced section is closed
+ $( '.advanced-form' ).hide();
+ $( 'li.service' ).disableSelection(); // Fixes a problem with Chrome
+ },
+ placeholder: 'dropzone',
+ opacity: 0.8,
+ delay: 150,
+ forcePlaceholderSize: true,
+ items: 'li',
+ connectWith: '#available-services ul, #enabled-services .services ul',
+ cancel: '.advanced-form',
+ } );
+
+ $( '#available-services ul' ).sortable( {
+ opacity: 0.8,
+ delay: 150,
+ cursor: 'move',
+ connectWith: '#enabled-services .services ul',
+ placeholder: 'dropzone',
+ forcePlaceholderSize: true,
+ start: function() {
+ $( '.advanced-form' ).hide();
+ },
+ } );
+
+ // Accessibility keyboard shortcurts
+ $( '.service' ).on( 'keydown', function( e ) {
+ // Reposition if one of the directional keys is pressed
+ switch ( e.keyCode ) {
+ case 13:
+ keyboardDragDrop( $( this ) );
+ break; // Enter
+ case 32:
+ keyboardDragDrop( $( this ) );
+ break; // Space
+ case 37:
+ keyboardChangeOrder( $( this ), 'left' );
+ break; // Left
+ case 39:
+ keyboardChangeOrder( $( this ), 'right' );
+ break; // Right
+ default:
+ return true; // Exit and bubble
+ }
+
+ e.preventDefault();
+ } );
+
+ function keyboardChangeOrder( $this, dir ) {
+ var thisParent = $this.parent(),
+ thisParentsChildren = thisParent.find( 'li' ),
+ thisPosition = thisParentsChildren.index( $this ) + 1,
+ totalChildren = thisParentsChildren.length - 1,
+ thisService;
+
+ // No need to be able to sort order for the "Available Services" section
+ if ( thisParent.hasClass( 'services-available' ) ) {
+ return;
+ }
+
+ if ( 'left' === dir ) {
+ if ( 1 === thisPosition ) {
+ return;
+ }
+
+ // Find service to left
+ var prevSibling = $this.prev();
+
+ // Detach this service from DOM
+ thisService = $this.detach();
+
+ // Move it to the appropriate area and add focus back to service
+ prevSibling.before( thisService );
+
+ // Add focus
+ prevSibling.prev().focus();
+ }
+
+ if ( 'right' === dir ) {
+ if ( thisPosition === totalChildren ) {
+ return;
+ }
+
+ // Find service to left
+ var nextSibling = $this.next();
+
+ // Detach this service from DOM
+ thisService = $this.detach();
+
+ // Move it to the appropriate area and add focus back to service
+ nextSibling.after( thisService );
+
+ // Add focus
+ nextSibling.next().focus();
+ }
+
+ //Save changes
+ save_services();
+ }
+
+ function keyboardDragDrop( $this ) {
+ var dropzone,
+ thisParent = $this.parent();
+
+ // Rotate through 3 available dropzones
+ if ( thisParent.hasClass( 'services-available' ) ) {
+ dropzone = 'services-enabled';
+ } else if ( thisParent.hasClass( 'services-enabled' ) ) {
+ dropzone = 'services-hidden';
+ } else {
+ dropzone = 'services-available';
+ }
+
+ // Detach this service from DOM
+ var thisService = $this.detach();
+
+ // Move it to the appropriate area and add focus back to service
+ $( '.' + dropzone )
+ .prepend( thisService )
+ .find( 'li:first-child' )
+ .focus();
+
+ //Save changes
+ save_services();
+ }
+
+ // Live preview 'hidden' button
+ $( '.preview-hidden a' ).click( function() {
+ $( this )
+ .parent()
+ .find( '.preview' )
+ .toggle();
+ return false;
+ } );
+
+ // Add service
+ $( '#new-service form' ).ajaxForm( {
+ beforeSubmit: function() {
+ $( '#new-service-form .error' ).hide();
+ $( '#new-service-form img' ).show();
+ $( '#new-service-form input[type=submit]' ).prop( 'disabled', true );
+ },
+ success: function( response ) {
+ $( '#new-service-form img' ).hide();
+
+ if ( '' + response === '1' ) {
+ $( '#new-service-form .inerror' )
+ .removeClass( 'inerror' )
+ .addClass( 'error' );
+ $( '#new-service-form .error' ).show();
+ $( '#new-service-form input[type=submit]' ).prop( 'disabled', false );
+ } else {
+ document.location.reload();
+ }
+ },
+ } );
+
+ function init_handlers() {
+ $( '#services-config a.remove' )
+ .unbind( 'click' )
+ .click( function() {
+ var form = $( this )
+ .parent()
+ .next();
+
+ // Loading icon
+ $( this )
+ .parents( 'li:first' )
+ .css( 'backgroundImage', 'url("' + sharing_loading_icon + '")' );
+
+ // Save
+ form.ajaxSubmit( function(/*response*/) {
+ // Remove the item
+ form.parents( 'li:first' ).fadeOut( function() {
+ $( this ).remove();
+
+ // Update preview
+ update_preview();
+ } );
+ } );
+
+ return false;
+ } );
+ }
+
+ $( '#button_style' )
+ .change( function() {
+ update_preview();
+ return true;
+ } )
+ .change();
+
+ $( 'input[name=sharing_label]' ).blur( function() {
+ $( '#live-preview h3.sd-title' ).text(
+ $( '<div/>' )
+ .text( $( this ).val() )
+ .html()
+ );
+ } );
+
+ init_handlers();
+ enable_share_button();
+ } );
+} )( jQuery );