extend-customizer.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. /**
  2. * Extend Customizer Panel
  3. *
  4. * @package Astra
  5. */
  6. ( function( $ ) {
  7. var api = wp.customize;
  8. api.bind( 'pane-contents-reflowed', function() {
  9. // Reflow sections
  10. var sections = [];
  11. api.section.each( function( section ) {
  12. if (
  13. 'ast_section' !== section.params.type ||
  14. 'undefined' === typeof section.params.section
  15. ) {
  16. return;
  17. }
  18. sections.push( section );
  19. });
  20. sections.sort( api.utils.prioritySort ).reverse();
  21. $.each( sections, function( i, section ) {
  22. var parentContainer = $( '#sub-accordion-section-' + section.params.section );
  23. parentContainer.children( '.section-meta' ).after( section.headContainer );
  24. });
  25. // Reflow panels
  26. var panels = [];
  27. api.panel.each( function( panel ) {
  28. if (
  29. 'ast_panel' !== panel.params.type ||
  30. 'undefined' === typeof panel.params.panel
  31. ) {
  32. return;
  33. }
  34. panels.push( panel );
  35. });
  36. panels.sort( api.utils.prioritySort ).reverse();
  37. $.each( panels, function( i, panel ) {
  38. var parentContainer = $( '#sub-accordion-panel-' + panel.params.panel );
  39. parentContainer.children( '.panel-meta' ).after( panel.headContainer );
  40. });
  41. });
  42. // Extend Panel
  43. var _panelEmbed = wp.customize.Panel.prototype.embed;
  44. var _panelIsContextuallyActive = wp.customize.Panel.prototype.isContextuallyActive;
  45. var _panelAttachEvents = wp.customize.Panel.prototype.attachEvents;
  46. wp.customize.Panel = wp.customize.Panel.extend({
  47. attachEvents: function() {
  48. if (
  49. 'ast_panel' !== this.params.type ||
  50. 'undefined' === typeof this.params.panel
  51. ) {
  52. _panelAttachEvents.call( this );
  53. return;
  54. }
  55. _panelAttachEvents.call( this );
  56. var panel = this;
  57. panel.expanded.bind( function( expanded ) {
  58. var parent = api.panel( panel.params.panel );
  59. if ( expanded ) {
  60. parent.contentContainer.addClass( 'current-panel-parent' );
  61. } else {
  62. parent.contentContainer.removeClass( 'current-panel-parent' );
  63. }
  64. });
  65. panel.container.find( '.customize-panel-back' )
  66. .off( 'click keydown' )
  67. .on( 'click keydown', function( event ) {
  68. if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
  69. return;
  70. }
  71. event.preventDefault(); // Keep this AFTER the key filter above
  72. if ( panel.expanded() ) {
  73. api.panel( panel.params.panel ).expand();
  74. }
  75. });
  76. },
  77. embed: function() {
  78. if (
  79. 'ast_panel' !== this.params.type ||
  80. 'undefined' === typeof this.params.panel
  81. ) {
  82. _panelEmbed.call( this );
  83. return;
  84. }
  85. _panelEmbed.call( this );
  86. var panel = this;
  87. var parentContainer = $( '#sub-accordion-panel-' + this.params.panel );
  88. parentContainer.append( panel.headContainer );
  89. },
  90. isContextuallyActive: function() {
  91. if (
  92. 'ast_panel' !== this.params.type
  93. ) {
  94. return _panelIsContextuallyActive.call( this );
  95. }
  96. var panel = this;
  97. var children = this._children( 'panel', 'section' );
  98. api.panel.each( function( child ) {
  99. if ( ! child.params.panel ) {
  100. return;
  101. }
  102. if ( child.params.panel !== panel.id ) {
  103. return;
  104. }
  105. children.push( child );
  106. });
  107. children.sort( api.utils.prioritySort );
  108. var activeCount = 0;
  109. _( children ).each( function ( child ) {
  110. if ( child.active() && child.isContextuallyActive() ) {
  111. activeCount += 1;
  112. }
  113. });
  114. return ( activeCount !== 0 );
  115. }
  116. });
  117. // Extend Section
  118. var _sectionEmbed = wp.customize.Section.prototype.embed;
  119. var _sectionIsContextuallyActive = wp.customize.Section.prototype.isContextuallyActive;
  120. var _sectionAttachEvents = wp.customize.Section.prototype.attachEvents;
  121. wp.customize.Section = wp.customize.Section.extend({
  122. attachEvents: function() {
  123. if (
  124. 'ast_section' !== this.params.type ||
  125. 'undefined' === typeof this.params.section
  126. ) {
  127. _sectionAttachEvents.call( this );
  128. return;
  129. }
  130. _sectionAttachEvents.call( this );
  131. var section = this;
  132. section.expanded.bind( function( expanded ) {
  133. var parent = api.section( section.params.section );
  134. if ( expanded ) {
  135. parent.contentContainer.addClass( 'current-section-parent' );
  136. } else {
  137. parent.contentContainer.removeClass( 'current-section-parent' );
  138. }
  139. });
  140. section.container.find( '.customize-section-back' )
  141. .off( 'click keydown' )
  142. .on( 'click keydown', function( event ) {
  143. if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
  144. return;
  145. }
  146. event.preventDefault(); // Keep this AFTER the key filter above
  147. if ( section.expanded() ) {
  148. api.section( section.params.section ).expand();
  149. }
  150. });
  151. },
  152. embed: function() {
  153. if (
  154. 'ast_section' !== this.params.type ||
  155. 'undefined' === typeof this.params.section
  156. ) {
  157. _sectionEmbed.call( this );
  158. return;
  159. }
  160. _sectionEmbed.call( this );
  161. var section = this;
  162. var parentContainer = $( '#sub-accordion-section-' + this.params.section );
  163. parentContainer.append( section.headContainer );
  164. },
  165. isContextuallyActive: function() {
  166. if (
  167. 'ast_section' !== this.params.type
  168. ) {
  169. return _sectionIsContextuallyActive.call( this );
  170. }
  171. var section = this;
  172. var children = this._children( 'section', 'control' );
  173. api.section.each( function( child ) {
  174. if ( ! child.params.section ) {
  175. return;
  176. }
  177. if ( child.params.section !== section.id ) {
  178. return;
  179. }
  180. children.push( child );
  181. });
  182. children.sort( api.utils.prioritySort );
  183. var activeCount = 0;
  184. _( children ).each( function ( child ) {
  185. if ( 'undefined' !== typeof child.isContextuallyActive ) {
  186. if ( child.active() && child.isContextuallyActive() ) {
  187. activeCount += 1;
  188. }
  189. } else {
  190. if ( child.active() ) {
  191. activeCount += 1;
  192. }
  193. }
  194. });
  195. return ( activeCount !== 0 );
  196. }
  197. });
  198. })( jQuery );