sabox-admin.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. ( function( $ ) {
  2. 'use strict';
  3. var context = $( '#sabox-container' );
  4. context.find( '.saboxfield' ).on( 'change', function() {
  5. var value = getElementValue( $( this ) );
  6. var elements = context.find( '.show_if_' + $( this ).attr( 'id' ) );
  7. if ( value && '0' != value ) {
  8. elements.show( 300 );
  9. } else {
  10. elements.hide( 250 );
  11. }
  12. });
  13. function getElementValue( $element ) {
  14. var type = $element.attr( 'type' );
  15. var name = $element.attr( 'name' );
  16. if ( 'checkbox' === type ) {
  17. if ( $element.is( ':checked' ) ) {
  18. return 1;
  19. } else {
  20. return 0;
  21. }
  22. } else {
  23. return $element.val();
  24. }
  25. }
  26. /**
  27. * Handle UI tab switching via jQuery instead of relying on CSS only
  28. */
  29. function adminTabSwitching() {
  30. var navTabSelector = '.nav-tab-wrapper .epfw-tab:not( .epfw-tab-link )',
  31. initialTabHref,
  32. initialTabID,
  33. url;
  34. // Get the current tab
  35. if ( '' !== window.location.hash && $( window.location.hash + '-tab.epfw-turn-into-tab' ).length > 0 ) {
  36. initialTabHref = window.location.hash;
  37. } else {
  38. initialTabHref = $( navTabSelector + ':first' ).attr( 'href' );
  39. }
  40. initialTabID = initialTabHref + '-tab';
  41. /**
  42. * Default tab handling
  43. */
  44. // Make the first tab active by default
  45. $( navTabSelector + '[href="' + initialTabHref + '"]' ).addClass( 'nav-tab-active' );
  46. // Make all the tabs, except the first one hidden
  47. $( '.epfw-turn-into-tab' ).each( function( index, value ) {
  48. if ( '#' + $( this ).attr( 'id' ) !== initialTabID ) {
  49. $( this ).hide();
  50. }
  51. });
  52. /**
  53. * Listen for click events on nav-tab links
  54. */
  55. $( navTabSelector ).click( function( event ) {
  56. var clickedTab = $( this ).attr( 'href' ) + '-tab';
  57. $( navTabSelector ).removeClass( 'nav-tab-active' ); // Remove class from previous selector
  58. $( this ).addClass( 'nav-tab-active' ).blur(); // Add class to currently clicked selector
  59. $( '.epfw-turn-into-tab' ).each( function( index, value ) {
  60. if ( '#' + $( this ).attr( 'id' ) !== clickedTab ) {
  61. $( this ).hide();
  62. }
  63. $( clickedTab ).fadeIn();
  64. });
  65. });
  66. }
  67. $( document ).ready( function() {
  68. var elements = context.find( '.saboxfield' ),
  69. sliders = context.find( '.sabox-slider' ),
  70. colorpickers = context.find( '.sabox-color' );
  71. elements.each( function( $index, $element ) {
  72. var element = $( $element ),
  73. value = getElementValue( element ),
  74. elements = context.find( '.show_if_' + element.attr( 'id' ) );
  75. if ( value && '0' !== value ) {
  76. elements.removeClass( 'hide' );
  77. } else {
  78. elements.addClass( 'hide' );
  79. }
  80. });
  81. if ( sliders.length > 0 ) {
  82. sliders.each( function( $index, $slider ) {
  83. var input = $( $slider ).parent().find( '.saboxfield' ),
  84. max = input.data( 'max' ),
  85. min = input.data( 'min' ),
  86. step = input.data( 'step' ),
  87. value = parseInt( input.val(), 10 );
  88. $( $slider ).slider({
  89. value: value,
  90. min: min,
  91. max: max,
  92. step: step,
  93. slide: function( event, ui ) {
  94. input.val( ui.value + 'px' ).trigger( 'change' );
  95. }
  96. });
  97. });
  98. }
  99. if ( colorpickers.length > 0 ) {
  100. colorpickers.each( function( $index, $colorpicker ) {
  101. $( $colorpicker ).wpColorPicker({
  102. change : function( event, ui ){
  103. jQuery( event.target ).val( ui.color.toString() ).trigger( 'change' );
  104. }
  105. });
  106. });
  107. }
  108. adminTabSwitching();
  109. });
  110. })( jQuery );