← All changes | modules/widget-visibility/widget-conditions/widget-conditions.js +313 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,313 @@
	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( /&nbsp;/g, '\xA0' ) ) )
	263	+ );
	264	+ }
	265	+
	266	+ select.append( optgroup );
	267	+ } else {
	268	+ select.append(
	269	+ $( '<option/>' )
	270	+ .val( key )
	271	+ .text( decodeEntities( val.replace( /&nbsp;/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	+} );