rtl
9 years ago
widget-conditions-rtl.css
7 months ago
widget-conditions-rtl.min.css
1 month ago
widget-conditions.css
7 months ago
widget-conditions.js
4 years ago
widget-conditions.min.css
1 month ago
widget-conditions.js
314 lines
| 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 |