sidebar.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. ( function( $ ) {
  2. $( window ).load( function() {
  3. var widgets_area = $( '.widgets-area' );
  4. $( '#secondary' ).on( 'click', '.widgets-trigger', function( event ) {
  5. event.preventDefault();
  6. $( this ).toggleClass( 'active' );
  7. // Remove mejs players from sidebar
  8. $( '#secondary .mejs-container' ).each( function( i, el ) {
  9. if ( mejs.players[ el.id ] ) {
  10. mejs.players[ el.id ].remove();
  11. }
  12. } );
  13. if( $( this ).hasClass( 'active' ) ) {
  14. $( '.widgets-wrapper' ).slideDown( 250 );
  15. // Trigger resize to make sure widgets fit prefectly.
  16. $( this ).trigger( 'resize' );
  17. // Masonry blocks
  18. widgets_area.imagesLoaded( function() {
  19. if ( $( 'body' ).hasClass( 'rtl' ) ) {
  20. widgets_area.masonry( {
  21. columnWidth: 1,
  22. itemSelector: '.widget',
  23. transitionDuration: 0,
  24. isOriginLeft: false
  25. } );
  26. } else {
  27. widgets_area.masonry( {
  28. columnWidth: 1,
  29. itemSelector: '.widget',
  30. transitionDuration: 0
  31. } );
  32. }
  33. // Show the widgets
  34. widgets_area.children( '.widget' ).animate( {
  35. 'opacity' : 1
  36. }, 250 );
  37. } );
  38. // Re-initialize mediaelement players.
  39. setTimeout( function() {
  40. if ( window.wp && window.wp.mediaelement ) {
  41. window.wp.mediaelement.initialize();
  42. }
  43. } );
  44. // Trigger resize event to display VideoPress player.
  45. setTimeout( function(){
  46. if ( typeof( Event ) === 'function' ) {
  47. window.dispatchEvent( new Event( 'resize' ) );
  48. } else {
  49. var event = window.document.createEvent( 'UIEvents' );
  50. event.initUIEvent( 'resize', true, false, window, 0 );
  51. window.dispatchEvent( event );
  52. }
  53. } );
  54. } else {
  55. $( '.widgets-wrapper' ).slideUp( 250 );
  56. // Make sure the widgets are hidden
  57. widgets_area.children( '.widget' ).animate( {
  58. 'opacity' : 0
  59. }, 250 );
  60. }
  61. } );
  62. $( '#secondary' ).on( 'mouseenter mouseleave', '.widgets-trigger', function() {
  63. $( '#secondary' ).toggleClass( 'hover' );
  64. } );
  65. $( window ).resize( function () {
  66. // Force layout correction after 1500 milliseconds
  67. setTimeout( function () {
  68. widgets_area.masonry();
  69. }, 1500 );
  70. } );
  71. } );
  72. } )( jQuery );