customize-styles.js
1 day ago
exclude-self-prompt.js
1 day ago
intlTelInput-vanilla.js
1 day ago
policies-hash-state.js
1 day ago
save-policies-new.js
1 day ago
save-settings-new.js
1 day ago
settings-design-logic.js
1 day ago
settings-hash-state.js
1 day ago
test-email-new.js
1 day ago
wizard-new.js
1 day ago
customize-styles.js
105 lines
| 1 | /* global wp, jQuery */ |
| 2 | /** |
| 3 | * Customize Styles – admin JS for the "Edit styles" tab on the Customize 2FA |
| 4 | * code page settings screen. |
| 5 | * |
| 6 | * Responsibilities: |
| 7 | * - Boot WP native color-picker on every .wp2fa-color-picker input. |
| 8 | * - Open the WP media library when a .wp2fa-media-upload button is clicked. |
| 9 | * - Handle image removal via .wp2fa-media-remove. |
| 10 | * - Apply the selected font-family to the font-select preview. |
| 11 | * |
| 12 | * NOTE: jQuery is only used here because wp-color-picker ships as a jQuery |
| 13 | * plugin. No jQuery is used in the PHP Settings_Builder class itself. |
| 14 | * |
| 15 | * @package wp-2fa |
| 16 | * @since latest |
| 17 | */ |
| 18 | |
| 19 | ( function ( $ ) { |
| 20 | 'use strict'; |
| 21 | |
| 22 | /* ------------------------------------------------------------------ */ |
| 23 | /* Color pickers */ |
| 24 | /* ------------------------------------------------------------------ */ |
| 25 | |
| 26 | function initColorPickers() { |
| 27 | $( '.wp2fa-color-picker' ).each( function () { |
| 28 | $( this ).wpColorPicker(); |
| 29 | } ); |
| 30 | } |
| 31 | |
| 32 | /* ------------------------------------------------------------------ */ |
| 33 | /* Image / logo selectors */ |
| 34 | /* ------------------------------------------------------------------ */ |
| 35 | |
| 36 | function initImageSelectors() { |
| 37 | $( document ).on( 'click', '.wp2fa-media-upload', function ( e ) { |
| 38 | e.preventDefault(); |
| 39 | |
| 40 | var $btn = $( this ); |
| 41 | var targetId = $btn.data( 'target' ); |
| 42 | var $wrap = $btn.closest( '.wp2fa-image-select-wrap' ); |
| 43 | var $hidden = $wrap.find( 'input[type="hidden"]' ); |
| 44 | var $preview = $wrap.find( '.wp2fa-image-preview' ); |
| 45 | var $img = $preview.find( 'img' ); |
| 46 | |
| 47 | var frame = wp.media( { |
| 48 | title : wp2faCustomizeStyles.selectMediaTitle, |
| 49 | library : { type: 'image' }, |
| 50 | button : { text: wp2faCustomizeStyles.selectMediaButton }, |
| 51 | multiple : false, |
| 52 | } ); |
| 53 | |
| 54 | frame.on( 'select', function () { |
| 55 | var attachment = frame.state().get( 'selection' ).first().toJSON(); |
| 56 | $hidden.val( attachment.url ).trigger( 'change' ); |
| 57 | $img.attr( 'src', attachment.url ); |
| 58 | $preview.removeClass( 'hidden' ); |
| 59 | } ); |
| 60 | |
| 61 | frame.open(); |
| 62 | } ); |
| 63 | |
| 64 | $( document ).on( 'click', '.wp2fa-media-remove', function ( e ) { |
| 65 | e.preventDefault(); |
| 66 | |
| 67 | var $wrap = $( this ).closest( '.wp2fa-image-select-wrap' ); |
| 68 | $wrap.find( 'input[type="hidden"]' ).val( '' ).trigger( 'change' ); |
| 69 | $wrap.find( '.wp2fa-image-preview img' ).attr( 'src', '' ); |
| 70 | $wrap.find( '.wp2fa-image-preview' ).addClass( 'hidden' ); |
| 71 | } ); |
| 72 | } |
| 73 | |
| 74 | /* ------------------------------------------------------------------ */ |
| 75 | /* Font select preview */ |
| 76 | /* ------------------------------------------------------------------ */ |
| 77 | |
| 78 | function initFontSelects() { |
| 79 | $( '.wp2fa-font-select' ).each( function () { |
| 80 | applyFontPreview( $( this ) ); |
| 81 | } ); |
| 82 | |
| 83 | $( document ).on( 'change', '.wp2fa-font-select', function () { |
| 84 | applyFontPreview( $( this ) ); |
| 85 | } ); |
| 86 | } |
| 87 | |
| 88 | function applyFontPreview( $select ) { |
| 89 | var fontFamily = $select.val(); |
| 90 | // Show the selected font in the select element itself. |
| 91 | $select.css( 'font-family', fontFamily ); |
| 92 | } |
| 93 | |
| 94 | /* ------------------------------------------------------------------ */ |
| 95 | /* Init */ |
| 96 | /* ------------------------------------------------------------------ */ |
| 97 | |
| 98 | $( document ).ready( function () { |
| 99 | initColorPickers(); |
| 100 | initImageSelectors(); |
| 101 | initFontSelects(); |
| 102 | } ); |
| 103 | |
| 104 | } )( jQuery ); |
| 105 |