social-icons-admin.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. ( function( $ ) {
  2. var timeout = null;
  3. // Make the list of items sortable.
  4. function initWidget( widget ) {
  5. widget.find( '.jetpack-social-icons-widget-list' ).sortable( {
  6. items: '> .jetpack-social-icons-widget-item',
  7. handle: '.handle',
  8. cursor: 'move',
  9. placeholder: 'jetpack-social-icons-widget-item ui-state-placeholder',
  10. containment: widget,
  11. forcePlaceholderSize: true,
  12. update: function() {
  13. livePreviewUpdate( $( this ).parents( '.form' ).find( '.widget-control-save' ) );
  14. }
  15. } );
  16. }
  17. // Live preview update.
  18. function livePreviewUpdate( button ) {
  19. if ( ! $( document.body ).hasClass( 'wp-customizer' ) || ! button.length ) {
  20. return;
  21. }
  22. button.trigger( 'click' ).hide();
  23. }
  24. $( document ).ready( function() {
  25. // Add an item.
  26. $( document ).on( 'click', '.jetpack-social-icons-widget.add-button button', function( event ) {
  27. event.preventDefault();
  28. var template, widgetContent, widgetList, widgetLastItem, urlId, urlName;
  29. template = $( $.trim( $( '#tmpl-jetpack-widget-social-icons-template' ).html() ) );
  30. widgetContent = $( this ).parents( '.widget-content' );
  31. widgetList = widgetContent.find( '.jetpack-social-icons-widget-list' );
  32. urlId = widgetList.data( 'url-icon-id');
  33. urlName = widgetList.data( 'url-icon-name' );
  34. template.find( '.jetpack-widget-social-icons-url input' ).attr( 'id', urlId ).attr( 'name', urlName + '[]' );
  35. widgetList.append( template );
  36. widgetLastItem = widgetContent.find( '.jetpack-social-icons-widget-item:last' );
  37. widgetLastItem.find( 'input:first' ).trigger( 'focus' );
  38. } );
  39. // Remove an item.
  40. $( document ).on( 'click', '.jetpack-widget-social-icons-remove-item-button', function( event ) {
  41. event.preventDefault();
  42. var button = $( this ).parents( '.form' ).find( '.widget-control-save' );
  43. $( this ).parents( '.jetpack-social-icons-widget-item' ).remove();
  44. livePreviewUpdate( button );
  45. } );
  46. // Event handler for widget open button.
  47. $( document ).on( 'click', 'div.widget[id*="jetpack_widget_social_icons"] .widget-title, div.widget[id*="jetpack_widget_social_icons"] .widget-action', function() {
  48. if ( $( this ).parents( '#available-widgets' ).length ) {
  49. return;
  50. }
  51. initWidget( $( this ).parents( '.widget[id*="jetpack_widget_social_icons"]' ) );
  52. } );
  53. // Event handler for widget added.
  54. $( document ).on( 'widget-added', function( event, widget ) {
  55. if ( widget.is( '[id*="jetpack_widget_social_icons"]' ) ) {
  56. event.preventDefault();
  57. initWidget( widget );
  58. }
  59. } );
  60. // Event handler for widget updated.
  61. $( document ).on( 'widget-updated', function( event, widget ) {
  62. if ( widget.is( '[id*="jetpack_widget_social_icons"]' ) ) {
  63. event.preventDefault();
  64. initWidget( widget );
  65. }
  66. } );
  67. // Live preview update on input focus out.
  68. $( document ).on( 'focusout', 'input[name*="jetpack_widget_social_icons"]', function() {
  69. livePreviewUpdate( $( this ).parents( '.form' ).find( '.widget-control-save' ) );
  70. } );
  71. // Live preview update on input enter key.
  72. $( document ).on( 'keydown', 'input[name*="jetpack_widget_social_icons"]', function( event ) {
  73. if ( event.keyCode === 13 ) {
  74. livePreviewUpdate( $( this ).parents( '.form' ).find( '.widget-control-save' ) );
  75. }
  76. } );
  77. // Live preview update on input key up 1s.
  78. $( document ).on( 'keyup', 'input[name*="jetpack_widget_social_icons"]', function() {
  79. clearTimeout( timeout );
  80. timeout = setTimeout( function() {
  81. livePreviewUpdate( $( this ).parents( '.form' ).find( '.widget-control-save' ) );
  82. }, 1000 );
  83. } );
  84. // Live preview update on select change.
  85. $( document ).on( 'change', 'select[name*="jetpack_widget_social_icons"]', function() {
  86. livePreviewUpdate( $( this ).parents( '.form' ).find( '.widget-control-save' ) );
  87. } );
  88. } );
  89. } )( jQuery );