Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use additions method in wpt

Best JavaScript code snippet using wpt

title.js

Source:title.js

1/**2 * This file holds The SEO Framework plugin's JS code for TSF title fields.3 * Serve JavaScript as an addition, not as an ends or means.4 *5 * @author Sybre Waaijer <https://cyberwire.nl/>6 * @link <https://wordpress.org/plugins/autodescription/>7 */8/**9 * The SEO Framework plugin10 * Copyright (C) 2019 - 2022 Sybre Waaijer, CyberWire B.V. (https://cyberwire.nl/)11 *12 * This program is free software: you can redistribute it and/or modify13 * it under the terms of the GNU General Public License version 3 as published14 * by the Free Software Foundation.15 *16 * This program is distributed in the hope that it will be useful,17 * but WITHOUT ANY WARRANTY; without even the implied warranty of18 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the19 * GNU General Public License for more details.20 *21 * You should have received a copy of the GNU General Public License22 * along with this program. If not, see <http://www.gnu.org/licenses/>.23 */24'use strict';25/**26 * Holds tsfTitle values in an object to avoid polluting global namespace.27 *28 * Only one instance should act on this per window.29 *30 * @since 4.0.031 *32 * @constructor33 */34window.tsfTitle = function() {35	/**36	 * Data property injected by WordPress l10n handler.37	 *38	 * @since 4.0.039	 * @access public40	 * @type {(Object<string, *>)|boolean|null} l10n Localized strings.41	 */42	const l10n = 'undefined' !== typeof tsfTitleL10n && tsfTitleL10n;43	/**44	 * @since 4.0.045	 * @access public46	 * @type {String}47	 */48	const untitledTitle = tsf.escapeString( l10n.params.untitledTitle );49	/**50	 * @since 4.1.051	 * @access public52	 * @type {String}53	 */54	const protectedPrefix = tsf.escapeString( l10n.i18n.protectedTitle );55	/**56	 * @since 4.1.057	 * @access public58	 * @type {String}59	 */60	const privatePrefix = tsf.escapeString( l10n.i18n.privateTitle );61	/**62	 * @since 4.1.063	 * @access public64	 * @type {Boolean}65	 */66	const stripTitleTags = !! l10n.params.stripTitleTags;67	/**68	 * @since 4.1.069	 * @type {(Map<string,Element>)} The input element instances.70	 */71	const titleInputInstances = new Map();72	/**73	 * @since 4.1.074	 * @access private75	 * @type {(Object<string,Object<string,*>)} the query state.76	 */77	const states = {};78	/**79	 * @since 4.1.080	 * @access private81	 * @type {(Map<string,string>)} The input element instances.82	 */83	const additionsStack = new Map();84	/**85	 * @since 4.1.086	 * @access private87	 * @type {(Map<string,string>)} The input element instances.88	 */89	const prefixStack = new Map();90	/**91	 * @since 4.1.092	 * @internal Use getStateOf() instead.93	 * @access private94	 *95	 * @param {String} id96	 * @param {String} value97	 * @return {String} The additions value.98	 */99	const _getAdditionsValue = id => additionsStack.get( id ) || '';100	/**101	 * @since 4.1.0102	 * @internal Use getStateOf() instead.103	 * @access private104	 *105	 * @param {String} id106	 * @param {String} value107	 * @return {String} The prefix value.108	 */109	const _getPrefixValue = id => prefixStack.get( id ) || '';110	/**111	 * @since 4.1.0112	 * @internal Use updateStateOf() instead.113	 * @access private114	 *115	 * @param {String} id116	 * @param {String} value117	 * @return {String} The new value.118	 */119	const _setAdditionsValue = ( id, value ) => additionsStack.set( id, value ) && _getAdditionsValue( id );120	/**121	 * @since 4.1.0122	 * @internal Use updateStateOf() instead.123	 * @access private124	 *125	 * @param {String} id126	 * @param {String} value127	 * @return {String} The new value.128	 */129	const _setPrefixValue = ( id, value ) => prefixStack.set( id, value ) && _getPrefixValue( id );130	/**131	 * @since 4.1.0132	 * @access private133	 * @return {Element}134	 */135	const _getHoverPrefixElement = id => document.getElementById( `tsf-title-placeholder-prefix_${id}` ) || document.createElement( 'span' );136	/**137	 * @since 4.1.0138	 * @access private139	 * @return {Element}140	 */141	const _getHoverAdditionsElement = id => document.getElementById( `tsf-title-placeholder-additions_${id}` ) || document.createElement( 'span' );142	/**143	 * Sets input element for all listeners. Must be called prior interacting with this object.144	 * Resets the state for the input ID.145	 *146	 * @since 4.0.0147	 * @since 4.1.0 Now creates an instance in a map this object, and returns it.148	 * @access public149	 *150	 * @param {Element} element151	 */152	const setInputElement = element => {153		titleInputInstances.set( element.id, element );154		states[ element.id ] = {155			showPrefix:           true,156			allowReferenceChange: true,157			defaultTitle:         '',158			separator:            l10n.states.titleSeparator,159			prefixPlacement:      l10n.states.prefixPlacement,160		}161		_loadTitleActions( element );162		return getInputElement( element.id );163	}164	/**165	 * Gets input element, if exists.166	 *167	 * @since 4.1.0168	 * @access public169	 *170	 * @param {string} id The element ID.171	 * @return {Element}172	 */173	const getInputElement = id => titleInputInstances.get( id );174	/**175	 * Returns state of ID.176	 *177	 * @since 4.1.0178	 * @access public179	 *180	 * @param {string}             id The input element ID.181	 * @param {(string|undefined)} part The part to return. Leave empty to return the whole state.182	 * @return {(Object<string,*>)|*|null}183	 */184	const getStateOf = ( id, part ) => part ? states[ id ]?.[ part ] : states[ id ];185	/**186	 * Updates state of ID.187	 *188	 * There's no need to escape the input, it may be double-escaped if you do so.189	 *190	 * @since 4.1.0191	 * @since 4.2.0 Now remains intert on a non-change.192	 * @access public193	 *194	 * @param {string} id The input element ID.195	 * @param {string} part  The state index to change.196	 * @param {*}      value The value to set the state to.197	 */198	const updateStateOf = ( id, part, value ) => {199		if ( states[ id ][ part ] === value ) return;200		states[ id ][ part ] = value;201		switch ( part ) {202			case 'showPrefix':203			case 'prefixValue':204			case 'prefixPlacement':205				_updatePrefixValue( id );206				enqueueTriggerInput( id );207				break;208			case 'addAdditions':209			case 'separator':210			case 'additionValue':211			case 'additionPlacement':212				_updateAdditionsValue( id );213				enqueueTriggerInput( id );214				break;215			case 'allowReferenceChange':216			case 'defaultTitle':217			default:218				enqueueTriggerInput( id );219				break;220		}221	}222	/**223	 * Updates state of all elements.224	 *225	 * There's no need to escape the input, it may be double-escaped if you do so.226	 *227	 * @since 4.1.0228	 * @since 4.2.0 Added a 3rd parameter, allowing you to exclude updates for certain elements.229	 * @access public230	 *231	 * @param {string}          part   The state index to change.232	 * @param {*}               value  The value to set the state to.233	 * @param {string|string[]} except The input element IDs to exclude from updates.234	 */235	const updateStateAll = ( part, value, except ) => {236		except = Array.isArray( except ) ? except : [ except ];237		titleInputInstances.forEach( element => {238			if ( except.includes( element.id ) ) return;239			updateStateOf( element.id, part, value );240		} );241	}242	/**243	 * Returns title references of ID.244	 *245	 * @since 4.1.0246	 * @access public247	 *248	 * @param {string} id The input element ID.249	 * @return {HTMLElement[]}250	 */251	const _getTitleReferences = id => {252		let references = [ document.getElementById( `tsf-title-reference_${id}` ) ];253		if ( getStateOf( id, 'hasLegacy' ) ) {254			let legacy = document.getElementById( 'tsf-title-reference' );255			legacy && references.unshift( legacy );256		}257		return references;258	}259	/**260	 * Returns title references with no-additions (Na) of ID.261	 *262	 * @since 4.1.0263	 * @access public264	 *265	 * @param {string} id The input element ID.266	 * @return {HTMLElement[]}267	 */268	const _getTitleNaReferences = id => [ document.getElementById( `tsf-title-noadditions-reference_${id}` ) ];269	/**270	 * Updates the title reference.271	 *272	 * Used by the character counters, pixel counters, and social meta inputs.273	 *274	 * @since 4.0.0275	 * @since 4.0.6 Now changes behavior depending on RTL-status.276	 * @since 4.1.0 1. Now also sets references without the additions.277	 *              2. Now supports multiple instances.278	 * @access private279	 *280	 * @function281	 * @param {Event} event282	 * @return {HTMLElement[]}283	 */284	const _setReferenceTitle = event => {285		const references   = _getTitleReferences( event.target.id ),286			  referencesNa = _getTitleNaReferences( event.target.id );287		if ( ! references[0] || ! referencesNa[0] ) return;288		const allowReferenceChange = getStateOf( event.target.id, 'allowReferenceChange' );289		let text   = allowReferenceChange && event.target.value.trim() || getStateOf( event.target.id, 'defaultTitle' ) || '',290			textNa = text;291		if ( text.length && allowReferenceChange ) {292			let prefix    = _getPrefixValue( event.target.id ),293				additions = _getAdditionsValue( event.target.id );294			if ( prefix.length && getStateOf( event.target.id, 'showPrefix' ) ) {295				switch ( getStateOf( event.target.id, 'prefixPlacement' ) ) {296					case 'before':297						if ( window.isRtl ) {298							text = text + prefix;299						} else {300							text = prefix + text;301						}302						break;303					case 'after':304						if ( window.isRtl ) {305							text = prefix + text;306						} else {307							text = text + prefix;308						}309						break;310				}311				textNa = text;312			}313			if ( additions.length ) {314				switch ( getStateOf( event.target.id, 'additionPlacement' ) ) {315					case 'before':316						text = additions + text;317						break;318					case 'after':319						text = text + additions;320						break;321				}322			}323		}324		const referenceValue = tsf.escapeString(325			tsf.decodeEntities(326				tsf.sDoubleSpace(327					tsf.sTabs(328						tsf.sSingleLine(329							text330						).trim()331					)332				)333			) );334		const referenceNaValue = tsf.escapeString(335			tsf.decodeEntities(336				tsf.sDoubleSpace(337					tsf.sTabs(338						tsf.sSingleLine(339							textNa340						).trim()341					)342				)343			) );344		const changeEvent = new Event( 'change' );345		references.forEach( reference => {346			// We require the event below when adjusting some states... Don't uncomment this.347			// if ( reference.innerHTML === referenceValue ) return;348			reference.innerHTML = referenceValue;349			// Fires change event. Defered to another thread.350			setTimeout( () => { reference.dispatchEvent( changeEvent ) }, 0 );351		} );352		referencesNa.forEach( referenceNa => {353			// We require the event below when adjusting some states... Don't uncomment this.354			// if ( referenceNa.innerHTML === referenceNaValue ) return;355			referenceNa.innerHTML = referenceNaValue;356			// Fires change event. Defered to another thread.357			setTimeout( () => { referenceNa.dispatchEvent( changeEvent ) }, 0 );358		} );359	}360	/**361	 * Updates hover additions.362	 *363	 * @since 4.0.0364	 * @since 4.1.0 Now supports multiple instances.365	 * @access private366	 *367	 * @param {string} id The input ID.368	 */369	const _updateAdditionsValue = id => {370		let value          = '',371			additionsValue = '',372			separator      = '';373		if ( getStateOf( id, 'addAdditions' ) ) {374			additionsValue = tsf.escapeString( tsf.decodeEntities( getStateOf( id, 'additionValue' ) ) );375			separator      = getStateOf( id, 'separator' );376		}377		if ( additionsValue ) {378			switch ( getStateOf( id, 'additionPlacement' ) ) {379				case 'before':380					value = `${additionsValue} ${separator} `;381					break;382				case 'after':383					value = ` ${separator} ${additionsValue}`;384					break;385			}386		}387		_getHoverAdditionsElement( id ).innerHTML = _setAdditionsValue( id, value || '' );388	}389	/**390	 * Updates hover prefix.391	 *392	 * @since 4.0.0393	 * @since 4.0.6 Now changes behavior depending on RTL-status.394	 * @since 4.1.0 Now supports multiple instances.395	 * @access private396	 *397	 * @param {string} id The input ID.398	 */399	const _updatePrefixValue = id => {400		let value       = '',401			showPrefix  = getStateOf( id, 'showPrefix' ),402			prefixValue = getStateOf( id, 'prefixValue' );403		if ( showPrefix && prefixValue ) {404			switch ( getStateOf( id, 'prefixPlacement' ) ) {405				case 'before':406					if ( window.isRtl ) {407						value = ` ${prefixValue}`;408					} else {409						value = `${prefixValue} `;410					}411					break;412				case 'after':413					if ( window.isRtl ) {414						value = `${prefixValue} `;415					} else {416						value = ` ${prefixValue}`;417					}418					break;419			}420		}421		_getHoverPrefixElement( id ).innerHTML = _setPrefixValue( id, value || '' );422	}423	/**424	 * Updates the title hover prefix and additions placement.425	 *426	 * @since 4.0.0427	 * @since 4.1.0 Now supports multiple instances.428	 * @since 4.2.0 1. No longer relies on jQuery.429	 *              2. Now supports dynamic border sizes, this means that you can430	 *                 make a skewed-proportioned input element, and the hovers431	 *                 will align properly with the input text.432	 * @access private433	 *434	 * @function435	 * @param {Event} event436	 */437	const _updateHoverPlacement = event => {438		let hoverAdditionsElement = _getHoverAdditionsElement( event.target.id ),439			hoverPrefixElement    = _getHoverPrefixElement( event.target.id );440		if ( ! hoverAdditionsElement && ! hoverPrefixElement )441			return;442		const input      = event.target,443			  inputValue = event.target.value;444		const hasPrefixValue    = _getPrefixValue( event.target.id ).length && getStateOf( event.target.id, 'showPrefix' ),445			  hasAdditionsValue = !! _getAdditionsValue( event.target.id ).length;446		if ( ! hasPrefixValue && hoverPrefixElement )447			hoverPrefixElement.style.display = 'none';448		if ( ! hasAdditionsValue && hoverAdditionsElement )449			hoverAdditionsElement.style.display = 'none';450		if ( ! hasPrefixValue && ! hasAdditionsValue ) {451			//= Both items are emptied through settings.452			input.style.textIndent = 'initial';453			return;454		}455		if ( ! inputValue.length ) {456			//= Input is emptied.457			input.style.textIndent = 'initial';458			if ( hoverPrefixElement ) hoverPrefixElement.style.display = 'none';459			if ( hoverAdditionsElement ) hoverAdditionsElement.style.display = 'none';460			return;461		}462		const inputStyles = getComputedStyle( input ),463			  inputRect   = input.getBoundingClientRect();464		// Quick and dirty.465		const paddingTop    = parseInt( inputStyles.paddingTop ),466			  paddingRight  = parseInt( inputStyles.paddingRight ),467			  paddingBottom = parseInt( inputStyles.paddingBottom ),468			  paddingLeft   = parseInt( inputStyles.paddingLeft ),469			  borderTop     = parseInt( inputStyles.borderTopWidth ),470			  borderRight   = parseInt( inputStyles.borderRightWidth ),471			  borderBottom  = parseInt( inputStyles.borderBottomWidth ),472			  borderLeft    = parseInt( inputStyles.borderTopWidth ),473			  marginTop     = parseInt( inputStyles.marginTop ),474			  marginRight   = parseInt( inputStyles.marginRight ),475			  marginBottom  = parseInt( inputStyles.marginBottom ),476			  marginLeft    = parseInt( inputStyles.marginLeft );477		const offsetPosition = window.isRtl ? 'right' : 'left',478			  leftOffset     = paddingLeft + borderLeft + marginLeft,479			  rightOffset    = paddingRight + borderRight + marginRight;480		let fontStyleCSS = {481			display:           inputStyles.display,482			lineHeight:        inputStyles.lineHeight,483			fontFamily:        inputStyles.fontFamily,484			fontWeight:        inputStyles.fontWeight,485			fontSize:          inputStyles.fontSize,486			letterSpacing:     inputStyles.letterSpacing,487			marginTop:         `${marginTop}px`,488			marginBottom:      `${marginBottom}px`,489			paddingTop:        `${paddingTop}px`,490			paddingBottom:     `${paddingBottom}px`,491			border:            `0 solid transparent`,492			borderTopWidth:    `${borderTop}px`,493			borderBottomWidth: `${borderBottom}px`,494		};495		let additionsMaxWidth = 0,496			additionsOffset   = 0,497			prefixOffset      = 0,498			totalIndent       = 0,499			prefixMaxWidth    = 0;500		if ( hasPrefixValue ) {501			Object.assign(502				hoverPrefixElement.style,503				fontStyleCSS,504				{ maxWidth: 'initial' },505			);506			prefixMaxWidth = hoverPrefixElement.getBoundingClientRect().width;507			prefixOffset  += leftOffset; // rightOffset for RTL? -> difficult to determine?508		}509		if ( hasAdditionsValue ) {510			Object.assign(511				hoverAdditionsElement.style,512				fontStyleCSS,513				{ maxWidth: 'initial' },514			);515			const offsetElement = document.getElementById( `tsf-title-offset_${event.target.id}` );516			offsetElement.textContent = inputValue;517			Object.assign(518				offsetElement.style,519				{520					fontFamily:    fontStyleCSS.fontFamily,521					fontWeight:    fontStyleCSS.fontWeight,522					fontSize:      fontStyleCSS.fontSize,523					letterSpacing: fontStyleCSS.letterSpacing,524				},525			);526			const textWidth = offsetElement.getBoundingClientRect().width;527			const additionsWidth = hoverAdditionsElement.getBoundingClientRect().width;528			switch ( getStateOf( event.target.id, 'additionPlacement' ) ) {529				case 'before':530					additionsMaxWidth = inputRect.width - rightOffset - paddingLeft - borderLeft - textWidth - prefixMaxWidth;531					if ( additionsMaxWidth < 0 ) {532						// Add negative width to the prefix element, so it may stay its size, and hide the additions first.533						prefixMaxWidth   += additionsMaxWidth;534						additionsMaxWidth = 0;535					}536					additionsMaxWidth = additionsMaxWidth < additionsWidth ? additionsMaxWidth : additionsWidth;537					if ( additionsMaxWidth < 0 )538						additionsMaxWidth = 0;539					totalIndent     += additionsMaxWidth;540					prefixOffset    += additionsMaxWidth;541					// "We" write to the right, so we take the leftoffset. TODO RTL?542					additionsOffset += leftOffset;543					break;544				case 'after':545					additionsMaxWidth = inputRect.width - leftOffset - paddingRight - borderRight - textWidth - prefixMaxWidth;546					if ( additionsMaxWidth < 0 ) {547						// Add negative width to the prefix element, so it may stay its size, and hide the additions first.548						prefixMaxWidth   += additionsMaxWidth;549						additionsMaxWidth = 0;550					}551					additionsMaxWidth = additionsMaxWidth < additionsWidth ? additionsMaxWidth : additionsWidth;552					if ( additionsMaxWidth < 0 )553						additionsMaxWidth = 0;554					// "We" write to the right, so we take the leftoffset. TODO RTL?555					additionsOffset += leftOffset + textWidth + prefixMaxWidth;556					break;557			}558		}559		prefixMaxWidth = prefixMaxWidth < 0 ? 0 : prefixMaxWidth;560		if ( hasPrefixValue ) {561			Object.assign(562				hoverPrefixElement.style,563				{564					[offsetPosition]: `${prefixOffset}px`,565					maxWidth:         `${prefixMaxWidth}px`,566				}567			);568			// Only set if there's actually a prefix.569			totalIndent += prefixMaxWidth;570		}571		if ( hasAdditionsValue ) {572			Object.assign(573				hoverAdditionsElement.style,574				{575					[offsetPosition]: `${additionsOffset}px`,576					maxWidth:         `${additionsMaxWidth}px`,577				}578			);579		}580		input.style.textIndent = `${totalIndent}px`;581	}582	/**583	 * Updates the title placeholder.584	 *585	 * @since 4.0.0586	 * @since 4.1.0 Now consistently sets a reliable placeholder.587	 * @access private588	 *589	 * @function590	 * @param {Event} event591	 */592	const _updatePlaceholder = event => {593		event.target.placeholder = _getTitleReferences( event.target.id )[0].textContent;594	}595	/**596	 * Updates the character counter bound to the input.597	 *598	 * @since 4.0.0599	 * @access private600	 *601	 * @function602	 * @param {Event} event603	 */604	const _updateCounter = event => {605		if ( ! ( 'tsfC' in window ) ) return;606		let counter   = document.getElementById( `${event.target.id}_chars` ),607			reference = _getTitleReferences( event.target.id )[0];608		if ( ! counter ) return;609		tsfC.updateCharacterCounter( {610			e:     counter,611			text:  reference.innerHTML,612			field: 'title',613			type:  'search',614		} );615	}616	/**617	 * Updates the pixel counter bound to the input.618	 *619	 * @since 4.0.0620	 * @access private621	 *622	 * @function623	 * @param {Event} event624	 */625	const _updatePixels = event => {626		if ( ! ( 'tsfC' in window ) ) return;627		let pixels    = document.getElementById( `${event.target.id}_pixels` ),628			reference = _getTitleReferences( event.target.id )[0];629		if ( ! pixels ) return;630		tsfC.updatePixelCounter( {631			e:     pixels,632			text:  reference.innerHTML,633			field: 'title',634			type:  'search',635		} );636	}637	/**638	 * Triggers meta title input.639	 *640	 * @since 4.0.0641	 * @since 4.1.0 Now allows for a first parameter to be set.642	 * @access public643	 *644	 * @function645	 * @param {string} id The input id. When not set, all inputs will be triggered.646	 */647	const triggerInput = id => {648		if ( id ) {649			let el = getInputElement( id );650			el && el.dispatchEvent( new Event( 'input' ) );651		} else {652			// We don't want it to loop infinitely. Check element.id value first.653			titleInputInstances.forEach( element => element.id && triggerInput( element.id ) );654		}655	}656	/**657	 * Triggers counter updates.658	 *659	 * @since 4.0.0660	 * @since 4.1.0 Now allows for a first parameter to be set.661	 * @access public662	 *663	 * @function664	 * @param {string} id The input id. When not set, all inputs will be triggered.665	 */666	const triggerCounter = id => {667		if ( id ) {668			let el = getInputElement( id );669			el && el.dispatchEvent( new CustomEvent( 'tsf-update-title-counter' ) );670		} else {671			// We don't want it to loop infinitely. Check element.id value first.672			titleInputInstances.forEach( element => element.id && triggerCounter( element.id ) );673		}674	}675	/**676	 * Updates placements, placeholders and counters.677	 *678	 * @since 4.0.0679	 * @access private680	 * @see triggerInput681	 * @uses _onUpdateCounterTrigger682	 *683	 * @function684	 * @param {Event} event685	 */686	const _onUpdateTitlesTrigger = event => {687		_updateHoverPlacement( event );688		_setReferenceTitle( event );689		_updatePlaceholder( event );690		_onUpdateCounterTrigger( event );691	}692	/**693	 * Updates character counters.694	 *695	 * @since 4.0.0696	 * @access private697	 * @see triggerCounter698	 *699	 * @function700	 * @param {Event} event701	 */702	const _onUpdateCounterTrigger = event => {703		_updateCounter( event );704		_updatePixels( event );705	}706	let _enqueueTriggerInputBuffer = {};707	/**708	 * Triggers meta title input.709	 *710	 * @since 4.0.0711	 * @since 4.1.1 Added first parameter, id.712	 * @access public713	 *714	 * @function715	 * @param {string} id The input ID.716	 */717	const enqueueTriggerInput = id => {718		( id in _enqueueTriggerInputBuffer ) && clearTimeout( _enqueueTriggerInputBuffer[ id ] );719		_enqueueTriggerInputBuffer[ id ] = setTimeout( () => triggerInput( id ), 1000/60 ); // 60 fps720	}721	/**722	 * Triggers meta title update, without affecting tsfAys change listeners.723	 *724	 * @since 4.0.0725	 * @since 4.1.0 Now allows for a first parameter to be set.726	 * @access public727	 *728	 * @function729	 * @param {string} id The input id. When not set, all inputs will be triggered.730	 */731	const triggerUnregisteredInput = id => {732		if ( 'tsfAys' in window ) {733			let wereSettingsChanged = tsfAys.areSettingsChanged();734			triggerInput( id );735			// Only reset if we polluted the change listener, and only if a change wasn't already registered.736			if ( ! wereSettingsChanged && tsfAys.areSettingsChanged() )737				tsfAys.reset();738		} else {739			triggerInput( id );740		}741	}742	let _unregisteredTriggerBuffer = {};743	/**744	 * Enqueues unregistered title input triggers.745	 *746	 * @since 4.0.0747	 * @since 4.1.0 Now allows for a first parameter to be set.748	 * @access public749	 *750	 * @function751	 * @param {string} id The input id. When not set, all inputs will be triggered.752	 */753	const enqueueUnregisteredInputTrigger = id => {754		( id in _unregisteredTriggerBuffer ) && clearTimeout( _unregisteredTriggerBuffer[ id ] );755		_unregisteredTriggerBuffer[ id ] = setTimeout( () => triggerUnregisteredInput( id ), 1000/60 ); // 60 fps756	}757	/**758	 * Makes user click act naturally by selecting the adjacent Title text759	 * input and move cursor all the way to the end.760	 *761	 * @since 4.0.0762	 * @since 4.1.0 Now supports multiple instances.763	 * @TODO can we not just make the floaty mcfloattitle transparent to clicks?764	 * @access private765	 *766	 * @function767	 * @param {Event} event768	 */769	const _focusTitleInput = event => {770		let input = document.getElementById( event.target.dataset.for );771		if ( ! input ) return;772		let type       = event.target.classList.contains( 'tsf-title-placeholder-additions' ) ? 'additions' : 'prefix',773			inputValue = input.value;774		// Make sure the input is focussed, if it wasn't already.775		input.focus();776		switch ( event.detail ) {777			case 3:778				input.setSelectionRange( 0, inputValue.length );779				break;780			case 2:781				let start, end;782				if (783					'additions' === type && 'after' === getStateOf( input.id, 'additionPlacement' )784				||  'prefix' === type && window.isRtl785				) {786					start = inputValue.replace( /(\w+|\s+)$/u, '' ).length;787					end   = inputValue.length;788				} else {789					start = 0;790					end   = inputValue.length - inputValue.replace( /^(\s+|\w+)/u, '' ).length;791				}792				input.setSelectionRange( start, end );793				break;794			case 1:795			default:796				// Set length to end if the placeholder is clicked; to 0 otherwise (prefix clicked).797				let length = 'additions' === type && 'after' === getStateOf( input.id, 'additionPlacement' )798					? inputValue.length799					: 0;800				input.setSelectionRange( length, length );801				break;802		}803	}804	/**805	 * Prevents focus on event.806	 *807	 * @since 4.1.0808	 *809	 * @param {Event} event810	 * @return {void}811	 */812	const _preventFocus = event => event.preventDefault();813	let prevWidth = window.innerWidth;814	/**815	 * Triggers input event for titles in set intervals on window resize.816	 *817	 * This only happens if boundaries are surpassed to reduce CPU usage.818	 * This boundary is 782 pixels, because that forces input fields to change.819	 * in WordPress.820	 *821	 * This happens to all title inputs; as WordPress switches822	 * from Desktop to Mobile view at 782 pixels.823	 *824	 * @since 4.0.0825	 * @access private826	 * @see ...\wp-admin\js\common.js827	 *828	 * @function829	 */830	const _doResize = () => {831		let width = window.innerWidth;832		if ( prevWidth < width ) {833			if ( prevWidth <= 782 && width >= 782 ) {834				triggerUnregisteredInput();835			}836		} else {837			if ( prevWidth >= 782 && width <= 782 ) {838				triggerUnregisteredInput();839			}840		}841		prevWidth = width;842	}843	/**844	 * Initializes the title environment.845	 *846	 * @since 4.1.0847	 * @since 4.1.1 No longer passes the event to the enqueueUnregisteredInputTrigger() callback.848	 * @access private849	 *850	 * @function851	 */852	const _initAllTitleActions = () => {853		// Triggers input changes on resize after hitting thresholds.854		window.addEventListener( 'tsf-resize', _doResize );855		// When counters are updated, trigger an input; which will reassess them.856		window.addEventListener( 'tsf-counter-updated', () => enqueueUnregisteredInputTrigger() );857	}858	/**859	 * Initializes the title input action callbacks.860	 *861	 * @since 4.0.0862	 * @access private863	 *864	 * @function865	 * @param {Element} titleInput866	 */867	const _loadTitleActions = titleInput => {868		if ( ! titleInput instanceof Element ) return;869		titleInput.addEventListener( 'input', _onUpdateTitlesTrigger );870		titleInput.addEventListener( 'tsf-update-title-counter', _onUpdateCounterTrigger );871		let hoverPrefix    = _getHoverPrefixElement( titleInput.id ),872			hoverAdditions = _getHoverAdditionsElement( titleInput.id );873		hoverPrefix.addEventListener( 'click', _focusTitleInput );874		hoverAdditions.addEventListener( 'click', _focusTitleInput );875		// Don't allow focus of the floating elements.876		hoverPrefix.addEventListener( 'mousedown', _preventFocus );877		hoverAdditions.addEventListener( 'mousedown', _preventFocus );878		_updateAdditionsValue( titleInput.id );879		_updatePrefixValue( titleInput.id );880		enqueueUnregisteredInputTrigger( titleInput.id );881	}882	return Object.assign( {883		/**884		 * Initialises all aspects of the scripts.885		 * You shouldn't call this.886		 *887		 * @since 4.0.0888		 * @access protected889		 *890		 * @function891		 */892		load: () => {893			document.body.addEventListener( 'tsf-onload', _initAllTitleActions );894		},895	}, {896		setInputElement,897		getInputElement,898		getStateOf,899		updateStateOf,900		updateStateAll,901		triggerCounter,902		triggerInput,903		enqueueTriggerInput,904		triggerUnregisteredInput,905		enqueueUnregisteredInputTrigger, // this should've been enqueueTriggerUnregisteredInput...906	}, {907		l10n,908		untitledTitle,909		privatePrefix,910		protectedPrefix,911		stripTitleTags,912	} );913}();...

coffee-order.service.ts

Source:coffee-order.service.ts

1import { Injectable } from '@angular/core';2import { BehaviorSubject, Observable, of } from 'rxjs';3import { AdditionTypes, CoffeeAddition, CoffeeAdditionOption, DairyFoam } from '../models/coffee-products';4import { CoffeeOrder } from '../models/coffee-order';5import { demoAdditions, demoCappuccino, demoOrderCappuccino, demoOrderLatte } from '../models/demo-data';6/* Dear Reader: Don't worry about this code too much! We're faking a "coffee products" API here, just know that we're returning observables of coffee orders, and there are a few void functions for adding additions */7@Injectable()8export class CoffeeOrderService {9  private order: BehaviorSubject<CoffeeOrder>;10  public order$: Observable<CoffeeOrder>11  constructor() { 12    this.order = new BehaviorSubject(demoOrderLatte);13    this.order$ = this.order.asObservable() as Observable<CoffeeOrder>;14  }15  public getDemoAdditions(): Observable<CoffeeAddition[]> {16    return of(demoAdditions);17  }18  private getOptionsTotal(options: CoffeeAdditionOption[]): number {19    return options.reduce((total, option)  => {20      total += option.price * option.quantity;21      return total;22    }, 0);23  }24  private getAdditionsTotal(additions: CoffeeAddition[]): number {25    return additions.reduce((total, addition) => {26      total += this.getOptionsTotal(addition.selectedOptions);27      return total;28    }, 0);29  }30  public convertToCappuccinoOrder(order: CoffeeOrder): void {31    const additionsToMap = order.additions.filter(addition => addition.name !== AdditionTypes.FOAM);32    let newOrder = demoOrderCappuccino;33    const updatedDefaultAdditions = newOrder.additions.map((addition) => {34      const existingAddition = additionsToMap.find(currentAddition => currentAddition.id === addition.id);35      return (existingAddition ? existingAddition : addition);36    });37    newOrder.additions = [...updatedDefaultAdditions, ...additionsToMap];38    this.order.next(newOrder);39  }40  public addAddition(order: CoffeeOrder, addition: CoffeeAddition): void {41    const filteredAdditions = order.additions.filter(currentAddition => currentAddition.id !== addition.id);42    const additions = [...filteredAdditions, addition];43    const total = order.product.price + this.getAdditionsTotal(additions);44    this.order.next({...order, additions, total});45  }46  public removeAddition(order: CoffeeOrder, addition: CoffeeAddition): void {47    const additionInstance = order.additions.find(currentAddition => currentAddition.id === addition.id);48    const additions = order.additions.filter((currentAddition) => {49      if (currentAddition.id !== additionInstance.id) {50        return true;51      } else {52        return additionInstance.selectedOptions.map((option) => {53          return (currentAddition.selectedOptions.find(currentOption => currentOption.id === option.id));54        });55      }56    });57    const additionTotal = additions.reduce((total, addition) => {58      total = addition.selectedOptions.reduce((total, option) => {59        total += option.price * option.quantity;60        return total;61      }, 0)62      return total;63    }, 0)64    const total = order.product.price + additionTotal;65    this.order.next({...order, additions, total});66  }67  public addFoam(order: CoffeeOrder, addition: CoffeeAddition, selectedFoam: DairyFoam): void {68    const updatedAddition = {...addition, selectedFoam};69    const additions = [...order.additions, {...updatedAddition}];70    this.order.next({...order, additions});71  }72  public removeFoam(order: CoffeeOrder, addition: CoffeeAddition): void {73    const updatedAddition = {...addition, selectedFoam: null};74    const additions = [...order.additions, {...updatedAddition}];75    this.order.next({...order, additions});76  }...

coffee-order.component.ts

Source:coffee-order.component.ts

1import { Component, Input, OnInit } from '@angular/core';2import { Observable } from 'rxjs';3import { map } from 'rxjs/operators';4import { AdditionTypes, CoffeeAddition } from '../models/coffee-products';5import { CoffeeOrder } from '../models/coffee-order';6import { CoffeeOrderService } from '../services/coffee-order.service';7@Component({8  selector: 'app-coffee-order',9  templateUrl: './coffee-order.component.html',10  styleUrls: ['./coffee-order.component.css']11})12export class CoffeeOrderComponent implements OnInit {13  @Input()14  coffeeOrder: CoffeeOrder;15  allAdditions$: Observable<CoffeeAddition[]>16  standardAdditions$: Observable<CoffeeAddition[]>17  syrupAdditions$: Observable<CoffeeAddition[]>18  dairyAdditions$: Observable<CoffeeAddition[]>19  foamAdditions$: Observable<CoffeeAddition[]>20  constructor(private orderService: CoffeeOrderService) { }21  ngOnInit() {22    this.allAdditions$ = this.orderService.getDemoAdditions();23    this.standardAdditions$ = this.allAdditions$.pipe(24      map(additions => additions.filter(addition => addition.name !== AdditionTypes.SYRUP 25        && addition.name !== AdditionTypes.DAIRY26        && addition.name !== AdditionTypes.FOAM))27    );28    this.syrupAdditions$ = this.allAdditions$.pipe(29      map(additions => additions.filter(addition => addition.name === AdditionTypes.SYRUP))30    );31    this.dairyAdditions$ = this.allAdditions$.pipe(32      map(additions => additions.filter(addition => addition.name === AdditionTypes.DAIRY))33    );34    this.foamAdditions$ = this.allAdditions$.pipe(35      map(additions => additions.filter(addition => addition.name === AdditionTypes.FOAM))36    );37  }...

Using AI Code Generation

1var wpt = require('./wpt.js');2wpt.additions(5, 10, function(err, result) {3    if (err) {4        console.log(err);5    } else {6        console.log(result);7    }8});9var wpt = require('./wpt.js');10wpt.subtractions(5, 10, function(err, result) {11    if (err) {12        console.log(err);13    } else {14        console.log(result);15    }16});17var wpt = require('./wpt.js');18wpt.multiplications(5, 10, function(err, result) {19    if (err) {20        console.log(err);21    } else {22        console.log(result);23    }24});25var wpt = require('./wpt.js');26wpt.divisions(5, 10, function(err, result) {27    if (err) {28        console.log(err);29    } else {30        console.log(result);31    }32});33var wpt = require('./wpt.js');34wpt.modulas(5, 10, function(err, result) {35    if (err) {36        console.log(err);37    } else {38        console.log(result);39    }40});41var wpt = require('./wpt.js');42wpt.squareroots(5, 10, function(err, result) {43    if (err) {44        console.log(err);45    } else {46        console.log(result);47    }48});49var wpt = require('./wpt.js');50wpt.powers(5, 10, function(err, result) {51    if (err) {52        console.log(err);53    } else {54        console.log(result);55    }56});57var wpt = require('./wpt.js');58wpt.factorial(5, 10, function(err, result) {59    if (err) {60        console.log(err);61    } else {62        console.log(result);63    }64});

Using AI Code Generation

1var wptools = require('wptools');2wptools.page('Barack Obama').then(function(page) {3    return page.additions();4}).then(function(result) {5    console.log(result);6});7var wptools = require('wptools');8wptools.page('Barack Obama').then(function(page) {9    return page.additions();10}).then(function(result) {11    console.log(result);12});13var wptools = require('wptools');14wptools.page('Barack Obama').then(function(page) {15    return page.additions();16}).then(function(result) {17    console.log(result);18});19var wptools = require('wptools');20wptools.page('Barack Obama').then(function(page) {21    return page.additions();22}).then(function(result) {23    console.log(result);24});25var wptools = require('wptools');26wptools.page('Barack Obama').then(function(page) {27    return page.additions();28}).then(function(result) {29    console.log(result);30});31var wptools = require('wptools');32wptools.page('Barack Obama').then(function(page) {33    return page.additions();34}).then(function(result) {35    console.log(result);36});37var wptools = require('wptools');38wptools.page('Barack Obama').then(function(page) {39    return page.additions();40}).then(function(result) {41    console.log(result);42});43var wptools = require('wptools');44wptools.page('Barack Obama').then(function(page) {45    return page.additions();46}).then(function(result) {47    console.log(result);48});49var wptools = require('w

Using AI Code Generation

1var wpt = require('./wpt.js');2wpt.additions(1, 2, function(err, result) {3if (err) {4console.log(err);5} else {6console.log(result);7}8});9var wpt = require('./wpt.js');10wpt.additions(1, 2, function(err, result) {11if (err) {12console.log(err);13} else {14console.log(result);15}16});17var wpt = require('./wpt.js');18wpt.additions(1, 2, function(err, result) {19if (err) {20console.log(err);21} else {22console.log(result);23}24});25var wpt = require('./wpt.js');26wpt.additions(1, 2, function(err, result) {27if (err) {28console.log(err);29} else {30console.log(result);31}32});33var wpt = require('./wpt.js');34wpt.additions(1, 2, function(err, result) {35if (err) {36console.log(err);37} else {38console.log(result);39}40});41var wpt = require('./wpt.js');42wpt.additions(1, 2, function(err, result) {43if (err) {44console.log(err);45} else {46console.log(result);47}48});49var wpt = require('./wpt.js');50wpt.additions(1, 2, function(err, result) {51if (err) {52console.log(err);53} else {54console.log(result);55}56});57var wpt = require('./wpt.js');58wpt.additions(1, 2, function(err, result) {59if (err) {60console.log(err);61} else {62console.log(result);63}64});65var wpt = require('./wpt.js');66wpt.additions(1, 2, function(err, result) {67if (err) {68console.log(err);69} else {70console.log(result);71}72});

Using AI Code Generation

1var wptools = require('wptools');2var fs = require('fs');3var path = require('path');4additions.get(function(err, resp) {5  if (err) {6    console.log(err);7  } else {8    console.log(resp);9    fs.writeFile(path.join(__dirname, 'additions.json'), JSON.stringify(resp), function(err) {10      if (err) {11        console.log(err);12      } else {13        console.log("File saved!");14      }15    });16  }17});

Using AI Code Generation

1var wpt = require('wpt');2var wpt = new WebPageTest('www.webpagetest.org', 'A.5f5b5a5e1e8b2f2c2a5a5a5a5a5a5a5a');3  if (err) return console.error(err);4  console.log(data);5});6var wpt = require('wpt');7var wpt = new WebPageTest('www.webpagetest.org', 'A.5f5b5a5e1e8b2f2c2a5a5a5a5a5a5a5a');8  if (err) return console.error(err);9  console.log(data);10});11var wpt = require('wpt');12var wpt = new WebPageTest('www.webpagetest.org', 'A.5f5b5a5e1e8b2f2c2a5a5a5a5a5a5a5a');13  if (err) return console.error(err);14  console.log(data);15});16var wpt = require('wpt');17var wpt = new WebPageTest('www.webpagetest.org', 'A.5f5b5a5e1e8b2f2c2a5a5a5a5a5a5a5a');18  if (err) return console.error(err);19  console.log(data);20});21var wpt = require('wpt');22var wpt = new WebPageTest('www.webpagetest.org', 'A.5f5b5a5e1e8b2f2c2a5a5a5a5a5a5a

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.