| 1 |
/** |
| 2 |
* Adds a flag to the widgets filtered by a language. |
| 3 |
* |
| 4 |
* @package Polylang |
| 5 |
*/ |
| 6 |
|
| 7 |
jQuery( |
| 8 |
function ( $ ) { |
| 9 |
var widgets_container, |
| 10 |
widgets_selector, |
| 11 |
flags, |
| 12 |
isBlockEditor = 'undefined' !== typeof wp.blockEditor; |
| 13 |
|
| 14 |
if ( 'undefined' !== typeof pll_widgets && pll_widgets.hasOwnProperty( 'flags' ) ) { |
| 15 |
flags = pll_widgets.flags; |
| 16 |
} |
| 17 |
|
| 18 |
/** |
| 19 |
* Prepend widget titles with a flag once a language is selected. |
| 20 |
* |
| 21 |
* @param {object} widget The widget element. |
| 22 |
* @return {void} Nothing. |
| 23 |
*/ |
| 24 |
function add_flag( widget ) { |
| 25 |
if ( ! flags ) { |
| 26 |
return; |
| 27 |
} |
| 28 |
widget = $( widget ); |
| 29 |
var title = isBlockEditor ? widget.prev('h3') : $( '.widget-top .widget-title h3', widget ), |
| 30 |
locale = $( '.pll-lang-choice option:selected', widget ).val(), |
| 31 |
// Icon is HTML built and come from server side and is well escaped when necessary |
| 32 |
icon = ( locale && flags.hasOwnProperty( locale ) ) ? flags[ locale ] : null; |
| 33 |
|
| 34 |
if ( icon ) { |
| 35 |
icon += ' '; |
| 36 |
var current = $( '.pll-lang', title ); |
| 37 |
if ( current.length ) { |
| 38 |
current.html( icon ); // phpcs:ignore WordPressVIPMinimum.JS.HTMLExecutingFunctions.html |
| 39 |
} else { |
| 40 |
flag = $( '<span />' ).addClass( 'pll-lang' ).html( icon ); // phpcs:ignore WordPressVIPMinimum.JS.HTMLExecutingFunctions.html |
| 41 |
// See the comment above about the icon which is safe. So it is also safe to prepend flag which uses icon. |
| 42 |
title.prepend( flag ); // phpcs:ignore WordPressVIPMinimum.JS.HTMLExecutingFunctions.prepend |
| 43 |
} |
| 44 |
} else { |
| 45 |
$( '.pll-lang', title ).remove(); |
| 46 |
} |
| 47 |
} |
| 48 |
|
| 49 |
if ( isBlockEditor ) { |
| 50 |
|
| 51 |
widgets_container = $( '.edit-widgets-main-block-list' ); |
| 52 |
widgets_selector = '.widget'; |
| 53 |
|
| 54 |
// Update flags when we click on the legacy widget to display its form. |
| 55 |
widgets_container.on( |
| 56 |
'click', |
| 57 |
'.wp-block-legacy-widget', |
| 58 |
function () { |
| 59 |
add_flag( $( this ).find( '.widget' ) ); |
| 60 |
} |
| 61 |
); |
| 62 |
|
| 63 |
} else { |
| 64 |
if ( 'undefined' !== typeof wp.customize ) { |
| 65 |
|
| 66 |
widgets_container = $( '#customize-controls' ); |
| 67 |
widgets_selector = '.customize-control .widget'; |
| 68 |
|
| 69 |
/** |
| 70 |
* WP Customizer add control listener. |
| 71 |
* |
| 72 |
* @link https://wordpress.stackexchange.com/questions/256536/callback-after-wordpress-customizer-complete-loading |
| 73 |
* |
| 74 |
* @param {object} control The control type. |
| 75 |
* @return {void} Nothing. |
| 76 |
*/ |
| 77 |
function customize_add_flag( control ) { |
| 78 |
if ( ! control.extended( wp.customize.Widgets.WidgetControl ) ) { |
| 79 |
return; |
| 80 |
} |
| 81 |
|
| 82 |
/* |
| 83 |
* Make sure the widget's contents are embedded; normally this is done |
| 84 |
* when the control is expanded, for DOM performance reasons. |
| 85 |
*/ |
| 86 |
control.embedWidgetContent(); |
| 87 |
|
| 88 |
// Now we know for sure the widget is fully embedded. |
| 89 |
add_flag( control.container.find( '.widget' ) ); |
| 90 |
} |
| 91 |
wp.customize.control.each( customize_add_flag ); |
| 92 |
wp.customize.control.bind( 'add', customize_add_flag ); |
| 93 |
|
| 94 |
} else { |
| 95 |
|
| 96 |
widgets_container = $( '#widgets-right' ); |
| 97 |
widgets_selector = '.widget'; |
| 98 |
|
| 99 |
} |
| 100 |
|
| 101 |
// Add flags on load. |
| 102 |
$( widgets_selector, widgets_container ).each( |
| 103 |
function () { |
| 104 |
add_flag( this ); |
| 105 |
} |
| 106 |
); |
| 107 |
} |
| 108 |
|
| 109 |
// Update flags. |
| 110 |
widgets_container.on( |
| 111 |
'change', |
| 112 |
'.pll-lang-choice', |
| 113 |
function () { |
| 114 |
add_flag( $( this ).parents( '.widget' ) ); |
| 115 |
} |
| 116 |
); |
| 117 |
|
| 118 |
function pll_toggle( a, test ) { |
| 119 |
test ? a.show() : a.hide(); |
| 120 |
} |
| 121 |
|
| 122 |
// Remove all options if dropdown is checked. |
| 123 |
$( '.widgets-sortables,.control-section-sidebar,.edit-widgets-main-block-list' ).on( |
| 124 |
'change', |
| 125 |
'.pll-dropdown', |
| 126 |
function () { |
| 127 |
var this_id = $( this ).parent().parent().parent().children( '.widget-id' ).attr( 'value' ); |
| 128 |
pll_toggle( $( '.no-dropdown-' + this_id ), true != $( this ).prop( 'checked' ) ); |
| 129 |
} |
| 130 |
); |
| 131 |
|
| 132 |
// Disallow unchecking both show names and show flags. |
| 133 |
var options = ['-show_flags', '-show_names']; |
| 134 |
$.each( |
| 135 |
options, |
| 136 |
function ( i, v ) { |
| 137 |
$( '.widgets-sortables,.control-section-sidebar,.edit-widgets-main-block-list' ).on( |
| 138 |
'change', |
| 139 |
'.pll' + v, |
| 140 |
function () { |
| 141 |
var this_id = $( this ).parent().parent().parent().children( '.widget-id' ).attr( 'value' ); |
| 142 |
if ( true != $( this ).prop( 'checked' ) ) { |
| 143 |
$( '#widget-' + this_id + options[ 1 - i ] ).prop( 'checked', true ); |
| 144 |
} |
| 145 |
} |
| 146 |
); |
| 147 |
} |
| 148 |
); |
| 149 |
|
| 150 |
} |
| 151 |
); |
| 152 |
|
| 153 |
|
