123 lines
3.8 KiB
JavaScript
123 lines
3.8 KiB
JavaScript
( function ( $ ) {
|
|
var timeout = null;
|
|
|
|
// Make the list of items sortable.
|
|
function initWidget( widget ) {
|
|
widget.find( '.jetpack-social-icons-widget-list' ).sortable( {
|
|
items: '> .jetpack-social-icons-widget-item',
|
|
handle: '.handle',
|
|
cursor: 'move',
|
|
placeholder: 'jetpack-social-icons-widget-item ui-state-placeholder',
|
|
containment: widget,
|
|
forcePlaceholderSize: true,
|
|
update: function () {
|
|
livePreviewUpdate( $( this ).parents( '.form' ).find( '.widget-control-save' ) );
|
|
},
|
|
} );
|
|
}
|
|
|
|
// Live preview update.
|
|
function livePreviewUpdate( button ) {
|
|
if ( ! $( document.body ).hasClass( 'wp-customizer' ) || ! button.length ) {
|
|
return;
|
|
}
|
|
|
|
button.trigger( 'click' ).hide();
|
|
}
|
|
|
|
$( document ).ready( function () {
|
|
// Add an item.
|
|
$( document ).on(
|
|
'click',
|
|
'.jetpack-social-icons-widget.add-button button',
|
|
function ( event ) {
|
|
event.preventDefault();
|
|
|
|
var template, widgetContent, widgetList, widgetLastItem, urlId, urlName;
|
|
|
|
template = $( $.trim( $( '#tmpl-jetpack-widget-social-icons-template' ).html() ) );
|
|
widgetContent = $( this ).parents( '.widget-content' );
|
|
widgetList = widgetContent.find( '.jetpack-social-icons-widget-list' );
|
|
urlId = widgetList.data( 'url-icon-id' );
|
|
urlName = widgetList.data( 'url-icon-name' );
|
|
|
|
template
|
|
.find( '.jetpack-widget-social-icons-url input' )
|
|
.attr( 'id', urlId )
|
|
.attr( 'name', urlName + '[]' );
|
|
|
|
widgetList.append( template );
|
|
|
|
widgetLastItem = widgetContent.find( '.jetpack-social-icons-widget-item:last' );
|
|
widgetLastItem.find( 'input:first' ).trigger( 'focus' );
|
|
}
|
|
);
|
|
|
|
// Remove an item.
|
|
$( document ).on(
|
|
'click',
|
|
'.jetpack-widget-social-icons-remove-item-button',
|
|
function ( event ) {
|
|
event.preventDefault();
|
|
var widgetItem = $( this ).parents( '.jetpack-social-icons-widget-item' );
|
|
widgetItem.find( 'input' ).change();
|
|
widgetItem.remove();
|
|
}
|
|
);
|
|
|
|
// Event handler for widget open button.
|
|
$( document ).on(
|
|
'click',
|
|
'div.widget[id*="jetpack_widget_social_icons"] .widget-title, div.widget[id*="jetpack_widget_social_icons"] .widget-action',
|
|
function () {
|
|
if ( $( this ).parents( '#available-widgets' ).length ) {
|
|
return;
|
|
}
|
|
|
|
initWidget( $( this ).parents( '.widget[id*="jetpack_widget_social_icons"]' ) );
|
|
}
|
|
);
|
|
|
|
// Event handler for widget added.
|
|
$( document ).on( 'widget-added', function ( event, widget ) {
|
|
if ( widget.is( '[id*="jetpack_widget_social_icons"]' ) ) {
|
|
event.preventDefault();
|
|
initWidget( widget );
|
|
}
|
|
} );
|
|
|
|
// Event handler for widget updated.
|
|
$( document ).on( 'widget-updated', function ( event, widget ) {
|
|
if ( widget.is( '[id*="jetpack_widget_social_icons"]' ) ) {
|
|
event.preventDefault();
|
|
initWidget( widget );
|
|
}
|
|
} );
|
|
|
|
// Live preview update on input focus out.
|
|
$( document ).on( 'focusout', 'input[name*="jetpack_widget_social_icons"]', function () {
|
|
livePreviewUpdate( $( this ).parents( '.form' ).find( '.widget-control-save' ) );
|
|
} );
|
|
|
|
// Live preview update on input enter key.
|
|
$( document ).on( 'keydown', 'input[name*="jetpack_widget_social_icons"]', function ( event ) {
|
|
if ( event.keyCode === 13 ) {
|
|
livePreviewUpdate( $( this ).parents( '.form' ).find( '.widget-control-save' ) );
|
|
}
|
|
} );
|
|
|
|
// Live preview update on input key up 1s.
|
|
$( document ).on( 'keyup', 'input[name*="jetpack_widget_social_icons"]', function () {
|
|
clearTimeout( timeout );
|
|
|
|
timeout = setTimeout( function () {
|
|
livePreviewUpdate( $( this ).parents( '.form' ).find( '.widget-control-save' ) );
|
|
}, 1000 );
|
|
} );
|
|
|
|
// Live preview update on select change.
|
|
$( document ).on( 'change', 'select[name*="jetpack_widget_social_icons"]', function () {
|
|
livePreviewUpdate( $( this ).parents( '.form' ).find( '.widget-control-save' ) );
|
|
} );
|
|
} );
|
|
} )( jQuery );
|