| 1 |
/* global isRtl, widget_conditions_parent_pages, widget_conditions_data */ |
| 2 |
|
| 3 |
jQuery( function ( $ ) { |
| 4 |
// Gutenberg 'widgets.php' screen. |
| 5 |
var widgets_shell = $( '#widgets-editor' ); |
| 6 |
|
| 7 |
if ( 0 === widgets_shell.length ) { |
| 8 |
// Legacy 'widgets.php' screen + customizer. |
| 9 |
widgets_shell = $( 'div#widgets-right' ); |
| 10 |
|
| 11 |
// For backwards compatibility |
| 12 |
if ( 0 === widgets_shell.length ) { |
| 13 |
widgets_shell = $( 'form#customize-controls' ); |
| 14 |
} |
| 15 |
} |
| 16 |
|
| 17 |
function setWidgetMargin( $widget ) { |
| 18 |
var currentWidth, extra; |
| 19 |
|
| 20 |
if ( $( 'body' ).hasClass( 'wp-customizer' ) ) { |
| 21 |
// set the inside widget 2 top this way we can see the widget settings |
| 22 |
$widget.find( '.widget-inside' ).css( 'top', 0 ); |
| 23 |
|
| 24 |
return; |
| 25 |
} |
| 26 |
|
| 27 |
if ( $widget.hasClass( 'expanded' ) ) { |
| 28 |
// The expanded widget must be at least 400px wide in order to |
| 29 |
// contain the visibility settings. IE wasn't handling the |
| 30 |
// margin-left value properly. |
| 31 |
|
| 32 |
if ( $widget.attr( 'style' ) ) { |
| 33 |
$widget.data( 'original-style', $widget.attr( 'style' ) ); |
| 34 |
} |
| 35 |
|
| 36 |
currentWidth = $widget.width(); |
| 37 |
|
| 38 |
if ( currentWidth < 400 ) { |
| 39 |
extra = 400 - currentWidth; |
| 40 |
if ( isRtl ) { |
| 41 |
$widget |
| 42 |
.css( 'position', 'relative' ) |
| 43 |
.css( 'right', '-' + extra + 'px' ) |
| 44 |
.css( 'width', '400px' ); |
| 45 |
} else { |
| 46 |
$widget |
| 47 |
.css( 'position', 'relative' ) |
| 48 |
.css( 'left', '-' + extra + 'px' ) |
| 49 |
.css( 'width', '400px' ); |
| 50 |
} |
| 51 |
} |
| 52 |
} else if ( $widget.data( 'original-style' ) ) { |
| 53 |
// Restore any original inline styles when visibility is toggled off. |
| 54 |
$widget.attr( 'style', $widget.data( 'original-style' ) ).data( 'original-style', null ); |
| 55 |
} else { |
| 56 |
$widget.removeAttr( 'style' ); |
| 57 |
} |
| 58 |
} |
| 59 |
|
| 60 |
function moveWidgetVisibilityButton( $widget ) { |
| 61 |
var $displayOptionsButton = $widget.find( 'a.display-options' ).first(), |
| 62 |
$relativeWidget = $widget.find( 'input.widget-control-save' ); |
| 63 |
|
| 64 |
if ( 0 === $relativeWidget.length ) { |
| 65 |
// The save button doesn't exist in gutenberg widget editor, the conditional HTML ought to be displayed |
| 66 |
// last inside the widget options, so display the button before that. |
| 67 |
$relativeWidget = $widget.find( 'div.widget-conditional' ); |
| 68 |
} |
| 69 |
$displayOptionsButton.insertBefore( $relativeWidget ); |
| 70 |
|
| 71 |
// Widgets with no configurable options don't show the Save button's container. |
| 72 |
$displayOptionsButton |
| 73 |
.parent() |
| 74 |
.removeClass( 'widget-control-noform' ) |
| 75 |
.find( '.spinner' ) |
| 76 |
.remove() |
| 77 |
.css( 'float', 'left' ) |
| 78 |
.prependTo( $displayOptionsButton.parent() ); |
| 79 |
} |
| 80 |
|
| 81 |
$( '.widget' ).each( function () { |
| 82 |
moveWidgetVisibilityButton( $( this ) ); |
| 83 |
} ); |
| 84 |
|
| 85 |
$( document ).on( 'widget-added', function ( e, $widget ) { |
| 86 |
if ( $widget.find( 'div.widget-control-actions a.display-options' ).length === 0 ) { |
| 87 |
moveWidgetVisibilityButton( $widget ); |
| 88 |
} |
| 89 |
} ); |
| 90 |
|
| 91 |
widgets_shell.on( 'click.widgetconditions', 'a.add-condition', function ( e ) { |
| 92 |
var $condition = $( this ).closest( 'div.condition' ), |
| 93 |
$conditionClone = $condition |
| 94 |
.clone() |
| 95 |
.data( 'rule-major', '' ) |
| 96 |
.data( 'rule-minor', '' ) |
| 97 |
.data( 'has-children', '' ) |
| 98 |
.insertAfter( $condition ); |
| 99 |
|
| 100 |
e.preventDefault(); |
| 101 |
|
| 102 |
$conditionClone.find( 'select.conditions-rule-major' ).val( '' ); |
| 103 |
$conditionClone.find( 'select.conditions-rule-minor' ).html( '' ).attr( 'disabled' ); |
| 104 |
$conditionClone |
| 105 |
.find( 'span.conditions-rule-has-children' ) |
| 106 |
.hide() |
| 107 |
.find( 'input[type="checkbox"]' ) |
| 108 |
.removeAttr( 'checked' ); |
| 109 |
|
| 110 |
resetRuleIndexes( $conditionClone.closest( '.conditions' ) ); |
| 111 |
} ); |
| 112 |
|
| 113 |
widgets_shell.on( 'click.widgetconditions', 'a.display-options', function ( e ) { |
| 114 |
var $displayOptionsButton = $( this ), |
| 115 |
$widget = $displayOptionsButton.closest( 'div.widget' ); |
| 116 |
|
| 117 |
e.preventDefault(); |
| 118 |
|
| 119 |
$widget.find( 'div.widget-conditional' ).toggleClass( 'widget-conditional-hide' ); |
| 120 |
$( this ).toggleClass( 'active' ); |
| 121 |
$widget.toggleClass( 'expanded' ); |
| 122 |
setWidgetMargin( $widget ); |
| 123 |
|
| 124 |
if ( $( this ).hasClass( 'active' ) ) { |
| 125 |
$widget.find( 'input[name=widget-conditions-visible]' ).val( '1' ); |
| 126 |
$widget.find( '.condition' ).each( function () { |
| 127 |
buildMinorConditions( $( this ) ); |
| 128 |
} ); |
| 129 |
} else { |
| 130 |
$widget.find( 'input[name=widget-conditions-visible]' ).val( '0' ); |
| 131 |
} |
| 132 |
} ); |
| 133 |
|
| 134 |
widgets_shell.on( 'click.widgetconditions', 'a.delete-condition', function ( e ) { |
| 135 |
var $condition = $( this ).closest( 'div.condition' ); |
| 136 |
|
| 137 |
e.preventDefault(); |
| 138 |
|
| 139 |
if ( $condition.is( ':first-child' ) && $condition.is( ':last-child' ) ) { |
| 140 |
$( this ).closest( 'div.widget' ).find( 'a.display-options' ).click(); |
| 141 |
$condition.find( 'select.conditions-rule-major' ).val( '' ).change(); |
| 142 |
} else { |
| 143 |
$condition.find( 'select.conditions-rule-major' ).change(); |
| 144 |
$condition.detach(); |
| 145 |
} |
| 146 |
|
| 147 |
resetRuleIndexes( $condition.closest( '.conditions' ) ); |
| 148 |
} ); |
| 149 |
|
| 150 |
widgets_shell.on( 'click.widgetconditions', 'div.widget-top', function () { |
| 151 |
var $widget = $( this ).closest( 'div.widget' ), |
| 152 |
$displayOptionsButton = $widget.find( 'a.display-options' ); |
| 153 |
|
| 154 |
if ( $displayOptionsButton.hasClass( 'active' ) ) { |
| 155 |
$displayOptionsButton.attr( 'opened', 'true' ); |
| 156 |
} |
| 157 |
|
| 158 |
if ( $displayOptionsButton.attr( 'opened' ) ) { |
| 159 |
$displayOptionsButton.removeAttr( 'opened' ); |
| 160 |
$widget.toggleClass( 'expanded' ); |
| 161 |
setWidgetMargin( $widget ); |
| 162 |
} |
| 163 |
} ); |
| 164 |
|
| 165 |
widgets_shell.on( 'change.widgetconditions', 'input.conditions-match-all', function () { |
| 166 |
$( this ) |
| 167 |
.parents( '.widget-conditional' ) |
| 168 |
.toggleClass( 'conjunction' ) |
| 169 |
.toggleClass( 'intersection' ); |
| 170 |
} ); |
| 171 |
|
| 172 |
$( document ).on( 'change.widgetconditions', 'select.conditions-rule-major', function () { |
| 173 |
var $conditionsRuleMajor = $( this ), |
| 174 |
$conditionsRuleMinor = $conditionsRuleMajor.siblings( 'select.conditions-rule-minor:first' ), |
| 175 |
$conditionsRuleHasChildren = $conditionsRuleMajor.siblings( |
| 176 |
'span.conditions-rule-has-children' |
| 177 |
), |
| 178 |
$condition = $conditionsRuleMinor.closest( '.condition' ); |
| 179 |
|
| 180 |
$condition.data( 'rule-minor', '' ).data( 'rule-major', $conditionsRuleMajor.val() ); |
| 181 |
|
| 182 |
if ( $conditionsRuleMajor.val() ) { |
| 183 |
buildMinorConditions( $condition ); |
| 184 |
} else { |
| 185 |
$conditionsRuleMajor |
| 186 |
.siblings( 'select.conditions-rule-minor' ) |
| 187 |
.attr( 'disabled', 'disabled' ) |
| 188 |
.html( '' ); |
| 189 |
$conditionsRuleHasChildren.hide().find( 'input[type="checkbox"]' ).removeAttr( 'checked' ); |
| 190 |
} |
| 191 |
} ); |
| 192 |
|
| 193 |
$( document ).on( 'change.widgetconditions', 'select.conditions-rule-minor', function () { |
| 194 |
var $conditionsRuleMinor = $( this ), |
| 195 |
$conditionsRuleMajor = $conditionsRuleMinor.siblings( 'select.conditions-rule-major' ), |
| 196 |
$conditionsRuleHasChildren = $conditionsRuleMinor.siblings( |
| 197 |
'span.conditions-rule-has-children' |
| 198 |
), |
| 199 |
$condition = $conditionsRuleMinor.closest( '.condition' ); |
| 200 |
|
| 201 |
$condition.data( 'rule-minor', $conditionsRuleMinor.val() ); |
| 202 |
|
| 203 |
if ( $conditionsRuleMajor.val() === 'page' ) { |
| 204 |
if ( $conditionsRuleMinor.val() in widget_conditions_parent_pages ) { |
| 205 |
$conditionsRuleHasChildren.show(); |
| 206 |
} else { |
| 207 |
$conditionsRuleHasChildren.hide().find( 'input[type="checkbox"]' ).removeAttr( 'checked' ); |
| 208 |
} |
| 209 |
} else { |
| 210 |
$conditionsRuleHasChildren.hide().find( 'input[type="checkbox"]' ).removeAttr( 'checked' ); |
| 211 |
} |
| 212 |
} ); |
| 213 |
|
| 214 |
$( document ).on( 'widget-updated widget-synced', function ( e, widget ) { |
| 215 |
widget.find( '.condition' ).each( function () { |
| 216 |
buildMinorConditions( $( this ) ); |
| 217 |
} ); |
| 218 |
} ); |
| 219 |
|
| 220 |
function buildMinorConditions( condition ) { |
| 221 |
var minor, |
| 222 |
hasChildren, |
| 223 |
majorData, |
| 224 |
i, |
| 225 |
j, |
| 226 |
key, |
| 227 |
val, |
| 228 |
_len, |
| 229 |
_jlen, |
| 230 |
subkey, |
| 231 |
subval, |
| 232 |
optgroup, |
| 233 |
select = condition.find( '.conditions-rule-minor' ).html( '' ), |
| 234 |
major = condition.data( 'rule-major' ); |
| 235 |
|
| 236 |
// Disable the select, if major rule is empty or if it's a `post_type`. |
| 237 |
// "Post Type" rule has been removed in Jetpack 4.7, and |
| 238 |
// because it breaks all other rules we should `return`. |
| 239 |
if ( ! major || 'post_type' === major ) { |
| 240 |
select.attr( 'disabled', 'disabled' ); |
| 241 |
return; |
| 242 |
} |
| 243 |
|
| 244 |
minor = condition.data( 'rule-minor' ); |
| 245 |
hasChildren = condition.data( 'rule-has-children' ); |
| 246 |
majorData = widget_conditions_data[ major ]; |
| 247 |
|
| 248 |
for ( i = 0, _len = majorData.length; i < _len; i++ ) { |
| 249 |
key = majorData[ i ][ 0 ]; |
| 250 |
val = majorData[ i ][ 1 ]; |
| 251 |
|
| 252 |
if ( typeof val === 'object' ) { |
| 253 |
optgroup = $( '<optgroup/>' ).attr( 'label', key ); |
| 254 |
|
| 255 |
for ( j = 0, _jlen = val.length; j < _jlen; j++ ) { |
| 256 |
subkey = majorData[ i ][ 1 ][ j ][ 0 ]; |
| 257 |
subval = majorData[ i ][ 1 ][ j ][ 1 ]; |
| 258 |
|
| 259 |
optgroup.append( |
| 260 |
$( '<option/>' ) |
| 261 |
.val( subkey ) |
| 262 |
.text( decodeEntities( subval.replace( / /g, '\xA0' ) ) ) |
| 263 |
); |
| 264 |
} |
| 265 |
|
| 266 |
select.append( optgroup ); |
| 267 |
} else { |
| 268 |
select.append( |
| 269 |
$( '<option/>' ) |
| 270 |
.val( key ) |
| 271 |
.text( decodeEntities( val.replace( / /g, '\xA0' ) ) ) |
| 272 |
); |
| 273 |
} |
| 274 |
} |
| 275 |
|
| 276 |
select.removeAttr( 'disabled' ); |
| 277 |
select.val( minor ); |
| 278 |
|
| 279 |
if ( 'page' === major && minor in widget_conditions_parent_pages ) { |
| 280 |
select.siblings( 'span.conditions-rule-has-children' ).show(); |
| 281 |
|
| 282 |
if ( hasChildren ) { |
| 283 |
select |
| 284 |
.siblings( 'span.conditions-rule-has-children' ) |
| 285 |
.find( 'input[type="checkbox"]' ) |
| 286 |
.attr( 'checked', 'checked' ); |
| 287 |
} |
| 288 |
} else { |
| 289 |
select |
| 290 |
.siblings( 'span.conditions-rule-has-children' ) |
| 291 |
.hide() |
| 292 |
.find( 'input[type="checkbox"]' ) |
| 293 |
.removeAttr( 'checked' ); |
| 294 |
} |
| 295 |
} |
| 296 |
|
| 297 |
function resetRuleIndexes( widget ) { |
| 298 |
var index = 0; |
| 299 |
widget |
| 300 |
.find( 'span.conditions-rule-has-children' ) |
| 301 |
.find( 'input[type="checkbox"]' ) |
| 302 |
.each( function () { |
| 303 |
$( this ).attr( 'name', 'conditions[page_children][' + index + ']' ); |
| 304 |
index++; |
| 305 |
} ); |
| 306 |
} |
| 307 |
|
| 308 |
function decodeEntities( encodedString ) { |
| 309 |
var textarea = document.createElement( 'textarea' ); |
| 310 |
textarea.innerHTML = encodedString; |
| 311 |
return textarea.value; |
| 312 |
} |
| 313 |
} ); |
| 314 |
|
