View file File name : widget-conditions.js Content :/* global isRtl, widget_conditions_parent_pages, widget_conditions_data */ jQuery( function ( $ ) { // Gutenberg 'widgets.php' screen. var widgets_shell = $( '#widgets-editor' ); if ( 0 === widgets_shell.length ) { // Legacy 'widgets.php' screen + customizer. widgets_shell = $( 'div#widgets-right' ); // For backwards compatibility if ( 0 === widgets_shell.length ) { widgets_shell = $( 'form#customize-controls' ); } } function setWidgetMargin( $widget ) { var currentWidth, extra; if ( $( 'body' ).hasClass( 'wp-customizer' ) ) { // set the inside widget 2 top this way we can see the widget settings $widget.find( '.widget-inside' ).css( 'top', 0 ); return; } if ( $widget.hasClass( 'expanded' ) ) { // The expanded widget must be at least 400px wide in order to // contain the visibility settings. IE wasn't handling the // margin-left value properly. if ( $widget.attr( 'style' ) ) { $widget.data( 'original-style', $widget.attr( 'style' ) ); } currentWidth = $widget.width(); if ( currentWidth < 400 ) { extra = 400 - currentWidth; if ( isRtl ) { $widget .css( 'position', 'relative' ) .css( 'right', '-' + extra + 'px' ) .css( 'width', '400px' ); } else { $widget .css( 'position', 'relative' ) .css( 'left', '-' + extra + 'px' ) .css( 'width', '400px' ); } } } else if ( $widget.data( 'original-style' ) ) { // Restore any original inline styles when visibility is toggled off. $widget.attr( 'style', $widget.data( 'original-style' ) ).data( 'original-style', null ); } else { $widget.removeAttr( 'style' ); } } function moveWidgetVisibilityButton( $widget ) { var $displayOptionsButton = $widget.find( 'a.display-options' ).first(), $relativeWidget = $widget.find( 'input.widget-control-save' ); if ( 0 === $relativeWidget.length ) { // The save button doesn't exist in gutenberg widget editor, the conditional HTML ought to be displayed // last inside the widget options, so display the button before that. $relativeWidget = $widget.find( 'div.widget-conditional' ); } $displayOptionsButton.insertBefore( $relativeWidget ); // Widgets with no configurable options don't show the Save button's container. $displayOptionsButton .parent() .removeClass( 'widget-control-noform' ) .find( '.spinner' ) .remove() .css( 'float', 'left' ) .prependTo( $displayOptionsButton.parent() ); } $( '.widget' ).each( function () { moveWidgetVisibilityButton( $( this ) ); } ); $( document ).on( 'widget-added', function ( e, $widget ) { if ( $widget.find( 'div.widget-control-actions a.display-options' ).length === 0 ) { moveWidgetVisibilityButton( $widget ); } } ); widgets_shell.on( 'click.widgetconditions', 'a.add-condition', function ( e ) { var $condition = $( this ).closest( 'div.condition' ), $conditionClone = $condition .clone() .data( 'rule-major', '' ) .data( 'rule-minor', '' ) .data( 'has-children', '' ) .insertAfter( $condition ); e.preventDefault(); $conditionClone.find( 'select.conditions-rule-major' ).val( '' ); $conditionClone.find( 'select.conditions-rule-minor' ).html( '' ).attr( 'disabled' ); $conditionClone .find( 'span.conditions-rule-has-children' ) .hide() .find( 'input[type="checkbox"]' ) .removeAttr( 'checked' ); resetRuleIndexes( $conditionClone.closest( '.conditions' ) ); } ); widgets_shell.on( 'click.widgetconditions', 'a.display-options', function ( e ) { var $displayOptionsButton = $( this ), $widget = $displayOptionsButton.closest( 'div.widget' ); e.preventDefault(); $widget.find( 'div.widget-conditional' ).toggleClass( 'widget-conditional-hide' ); $( this ).toggleClass( 'active' ); $widget.toggleClass( 'expanded' ); setWidgetMargin( $widget ); if ( $( this ).hasClass( 'active' ) ) { $widget.find( 'input[name=widget-conditions-visible]' ).val( '1' ); $widget.find( '.condition' ).each( function () { buildMinorConditions( $( this ) ); } ); } else { $widget.find( 'input[name=widget-conditions-visible]' ).val( '0' ); } } ); widgets_shell.on( 'click.widgetconditions', 'a.delete-condition', function ( e ) { var $condition = $( this ).closest( 'div.condition' ); e.preventDefault(); if ( $condition.is( ':first-child' ) && $condition.is( ':last-child' ) ) { $( this ).closest( 'div.widget' ).find( 'a.display-options' ).click(); $condition.find( 'select.conditions-rule-major' ).val( '' ).change(); } else { $condition.find( 'select.conditions-rule-major' ).change(); $condition.detach(); } resetRuleIndexes( $condition.closest( '.conditions' ) ); } ); widgets_shell.on( 'click.widgetconditions', 'div.widget-top', function () { var $widget = $( this ).closest( 'div.widget' ), $displayOptionsButton = $widget.find( 'a.display-options' ); if ( $displayOptionsButton.hasClass( 'active' ) ) { $displayOptionsButton.attr( 'opened', 'true' ); } if ( $displayOptionsButton.attr( 'opened' ) ) { $displayOptionsButton.removeAttr( 'opened' ); $widget.toggleClass( 'expanded' ); setWidgetMargin( $widget ); } } ); widgets_shell.on( 'change.widgetconditions', 'input.conditions-match-all', function () { $( this ) .parents( '.widget-conditional' ) .toggleClass( 'conjunction' ) .toggleClass( 'intersection' ); } ); $( document ).on( 'change.widgetconditions', 'select.conditions-rule-major', function () { var $conditionsRuleMajor = $( this ), $conditionsRuleMinor = $conditionsRuleMajor.siblings( 'select.conditions-rule-minor:first' ), $conditionsRuleHasChildren = $conditionsRuleMajor.siblings( 'span.conditions-rule-has-children' ), $condition = $conditionsRuleMinor.closest( '.condition' ); $condition.data( 'rule-minor', '' ).data( 'rule-major', $conditionsRuleMajor.val() ); if ( $conditionsRuleMajor.val() ) { buildMinorConditions( $condition ); } else { $conditionsRuleMajor .siblings( 'select.conditions-rule-minor' ) .attr( 'disabled', 'disabled' ) .html( '' ); $conditionsRuleHasChildren.hide().find( 'input[type="checkbox"]' ).removeAttr( 'checked' ); } } ); $( document ).on( 'change.widgetconditions', 'select.conditions-rule-minor', function () { var $conditionsRuleMinor = $( this ), $conditionsRuleMajor = $conditionsRuleMinor.siblings( 'select.conditions-rule-major' ), $conditionsRuleHasChildren = $conditionsRuleMinor.siblings( 'span.conditions-rule-has-children' ), $condition = $conditionsRuleMinor.closest( '.condition' ); $condition.data( 'rule-minor', $conditionsRuleMinor.val() ); if ( $conditionsRuleMajor.val() === 'page' ) { if ( $conditionsRuleMinor.val() in widget_conditions_parent_pages ) { $conditionsRuleHasChildren.show(); } else { $conditionsRuleHasChildren.hide().find( 'input[type="checkbox"]' ).removeAttr( 'checked' ); } } else { $conditionsRuleHasChildren.hide().find( 'input[type="checkbox"]' ).removeAttr( 'checked' ); } } ); $( document ).on( 'widget-updated widget-synced', function ( e, widget ) { widget.find( '.condition' ).each( function () { buildMinorConditions( $( this ) ); } ); } ); function buildMinorConditions( condition ) { var minor, hasChildren, majorData, i, j, key, val, _len, _jlen, subkey, subval, optgroup, select = condition.find( '.conditions-rule-minor' ).html( '' ), major = condition.data( 'rule-major' ); // Disable the select, if major rule is empty or if it's a `post_type`. // "Post Type" rule has been removed in Jetpack 4.7, and // because it breaks all other rules we should `return`. if ( ! major || 'post_type' === major ) { select.attr( 'disabled', 'disabled' ); return; } minor = condition.data( 'rule-minor' ); hasChildren = condition.data( 'rule-has-children' ); majorData = widget_conditions_data[ major ]; for ( i = 0, _len = majorData.length; i < _len; i++ ) { key = majorData[ i ][ 0 ]; val = majorData[ i ][ 1 ]; if ( typeof val === 'object' ) { optgroup = $( '<optgroup/>' ).attr( 'label', key ); for ( j = 0, _jlen = val.length; j < _jlen; j++ ) { subkey = majorData[ i ][ 1 ][ j ][ 0 ]; subval = majorData[ i ][ 1 ][ j ][ 1 ]; optgroup.append( $( '<option/>' ) .val( subkey ) .text( decodeEntities( subval.replace( / /g, '\xA0' ) ) ) ); } select.append( optgroup ); } else { select.append( $( '<option/>' ) .val( key ) .text( decodeEntities( val.replace( / /g, '\xA0' ) ) ) ); } } select.removeAttr( 'disabled' ); select.val( minor ); if ( 'page' === major && minor in widget_conditions_parent_pages ) { select.siblings( 'span.conditions-rule-has-children' ).show(); if ( hasChildren ) { select .siblings( 'span.conditions-rule-has-children' ) .find( 'input[type="checkbox"]' ) .attr( 'checked', 'checked' ); } } else { select .siblings( 'span.conditions-rule-has-children' ) .hide() .find( 'input[type="checkbox"]' ) .removeAttr( 'checked' ); } } function resetRuleIndexes( widget ) { var index = 0; widget .find( 'span.conditions-rule-has-children' ) .find( 'input[type="checkbox"]' ) .each( function () { $( this ).attr( 'name', 'conditions[page_children][' + index + ']' ); index++; } ); } function decodeEntities( encodedString ) { var textarea = document.createElement( 'textarea' ); textarea.innerHTML = encodedString; return textarea.value; } } );