Apple Dip (4 Elements)

---

5 Stars 4 Stars 3 Stars 2 Stars 1 Star

No critiques

• 
  Writer: Sonja Overhiser
• 
  
  Prep Time: 5 minutes
• 
  
  Cook dinner Time: 0 minutes
• 
  
  Complete Time: 5 minutes
• 
  
  Yield: 1 cup

window.trCommon={“minRating”:6,”ajaxurl”:”https://www.acouplecooks.com/wp-admin/admin-ajax.php”,”ratingNonce”:””,”postId”:164835};
window.TastyRecipes = window.TastyRecipes || {};

window.TastyRecipes.smoothScroll = {
init() {
window.addEventListener( ‘click on’, e => {
let anchor = e.goal;
if ( ! anchor.classList.comprises( ‘tasty-recipes-scrollto’ ) ) {
if ( anchor.tagName === ‘A’ ) {
return;
}

anchor = anchor.closest( ‘a’ );
if ( ! anchor || ! anchor.classList.comprises( ‘tasty-recipes-scrollto’ ) ) {
return;
}
}

const elementHref = anchor.getAttribute( ‘href’ );
if ( ! elementHref ) {
return;
}

e.preventDefault();
this.goToSelector( elementHref );
});
},
goToSelector( selector ) {
const component = doc.querySelector( selector );
if ( ! component ) {
return;
}
component.scrollIntoView( { conduct: ‘easy’ } );
historical past.pushState( {}, ”, selector );
}
};

(perform( callback ) {
if ( doc.readyState !== ‘loading’ ) {
callback();
} else {
window.addEventListener( ‘load’, callback );
}
})(() => {
window.TastyRecipes.smoothScroll.init();
});

window.TastyRecipes = window.TastyRecipes || {};
window.TastyRecipes.cookMode = {
wakeLockApi: false,
wakeLock: false,
cookModeSelector: ‘.tasty-recipes-cook-mode’,
init() {
if (“wakeLock” in navigator && “request” in navigator.wakeLock) {
this.wakeLockApi = navigator.wakeLock;
}

const cookModes = doc.querySelectorAll(this.cookModeSelector);

if (cookModes.size > 0) {
for (const cookMode of cookModes) {
if (this.wakeLockApi) {
cookMode.querySelector(‘enter[type=”checkbox”]’).addEventListener(“change”, occasion => {
this.checkboxChange(occasion.goal);
}, false);
} else {
cookMode.fashion.show = “none”;
}
}
}
},
checkboxChange(checkbox) {
if (checkbox.checked) {
this.lock();
} else {
this.unlock();
}
},
setCheckboxesState(state) {
const checkboxes = doc.querySelectorAll(this.cookModeSelector + ‘ enter[type=”checkbox”]’);
for (const checkbox of checkboxes) {
checkbox.checked = state;
}
},
async lock() {
strive {
this.wakeLock = await this.wakeLockApi.request(“display”);
this.wakeLock.addEventListener(“launch”, () => {
this.wakeLock = false;
this.setCheckboxesState(false);
});
this.setCheckboxesState(true);
} catch (error) {
this.setCheckboxesState(false);
}
},
unlock() {
if (this.wakeLock) {
this.wakeLock.launch();
this.wakeLock = false;
}
this.setCheckboxesState(false);
}
};

(perform(callback) {
if (doc.readyState !== “loading”) {
callback();
} else {
doc.addEventListener(“DOMContentLoaded”, callback);
}
})(() => {
window.TastyRecipes.cookMode.init();
});

window.TastyRecipes = window.TastyRecipes || {};

window.TastyRecipes.staticTooltip = {
component: null,
tooltipElement: null,
deleting: false,
init( component ) {
if ( this.deleting ) {
return;
}
this.component = component;
this.buildElements();
},
destroy() {
if ( ! this.tooltipElement || this.deleting ) {
return;
}

this.deleting = true;
this.tooltipElement.classList.take away( ‘opened’ );

setTimeout( () => {
this.tooltipElement.take away();
this.deleting = false;
}, 500 );
},
buildElements() {
const tooltipElement = doc.createElement( ‘div’ );
tooltipElement.classList.add( ‘tasty-recipes-static-tooltip’);
tooltipElement.setAttribute( ‘id’, ‘tasty-recipes-tooltip’ );

const currentTooltipElement = doc.getElementById( ‘tasty-recipes-tooltip’ );
if ( currentTooltipElement ) {
doc.physique.replaceChild( tooltipElement, currentTooltipElement );
} else {
doc.physique.appendChild( tooltipElement );
}

this.tooltipElement = doc.getElementById( ‘tasty-recipes-tooltip’ );
},
present() {
if ( ! this.tooltipElement ) {
return;
}

const tooltipTop = this.component.getBoundingClientRect().prime
+ window.scrollY
– 10 // 10px offset.
– this.tooltipElement.getBoundingClientRect().top;
const tooltipLeft = this.component.getBoundingClientRect().left
– ( this.tooltipElement.getBoundingClientRect().width / 2 )
+ ( this.component.getBoundingClientRect().width / 2 ) – 1;
const posLeft = Math.max( 10, tooltipLeft );
this.maybeRemoveTail( posLeft !== tooltipLeft );

this.tooltipElement.setAttribute( ‘fashion’, ‘prime:’ + tooltipTop + ‘px;left:’ + posLeft + ‘px;’ );
this.tooltipElement.classList.add( ‘opened’ );

},
maybeRemoveTail( removeTail ) {
if ( removeTail ) {
this.tooltipElement.classList.add( ‘tr-hide-tail’ );
} else {
this.tooltipElement.classList.take away( ‘tr-hide-tail’ );
}
},
changeMessage( message ) {
if ( ! this.tooltipElement ) {
return;
}
this.tooltipElement.innerHTML = message;
}
};

window.TastyRecipes.ajax = {
sendPostRequest( url, knowledge, success, failure ) {
const xhr = new XMLHttpRequest();
xhr.open( ‘POST’, url, true );
xhr.ship( this.preparePostData( knowledge ) );

xhr.onreadystatechange = () => {
if ( 4 !== xhr.readyState ) {
return;
}
if ( xhr.standing === 200 ) {
success( JSON.parse( xhr.responseText ) );
return;
}

failure( xhr );
};

xhr.onerror = () => {
failure( xhr );
};
},
preparePostData( knowledge ) {
const formData = new FormData();

for ( const key in knowledge ) {
formData.append( key, knowledge[key] );
}
return formData;
},
};

window.TastyRecipes.scores = {
defaultRating: 0,
currentRatingPercentage: 100,
savingRating: false,
init( minRating ) {
this.minRating = minRating;

this.formWatchRating();
this.closeTooltipWhenClickOutside();
this.addBodyClassBasedOnSelectedRating();
this.backwardCompFormRatingPosition();
},
formWatchRating() {
const scores = doc.querySelectorAll(‘.tasty-recipes-no-ratings-buttons [data-rating]’);
if ( scores.size {
occasion.preventDefault();
this.defaultRating = occasion.goal.closest( ‘.checked’ ).dataset.ranking;
this.setCheckedStar( occasion.goal );
this.maybeSendRating( this.defaultRating, occasion.goal );
this.setRatingInForm( this.defaultRating );
} );
}
},
closeTooltipWhenClickOutside() {
window.addEventListener( ‘click on’, e => {
// Bailout (do not take away the tooltip) when the clicked component is a ranking star, or it is the tooltip itself.
if ( e.goal.closest( ‘.tasty-recipes-rating’ ) || e.goal.classList.comprises( ‘tasty-recipes-static-tooltip’ ) ) {
return;
}

window.TastyRecipes.staticTooltip.destroy();
} );
},
setRatingInForm( ranking ) {
const ratingInput = doc.querySelector( ‘#reply .tasty-recipes-rating[value=”‘ + rating + ‘”]’ );
if ( ! ratingInput ) {
return;
}
ratingInput.click on();
},
addBodyClassBasedOnSelectedRating() {
const ratingInputs = doc.querySelectorAll( ‘enter.tasty-recipes-rating’ );
if ( ! ratingInputs ) {
return;
}
for ( const ratingInput of ratingInputs ) {
ratingInput.addEventListener( ‘click on’, currentEvent => {
const selectedRating = currentEvent.goal.getAttribute( ‘worth’ );
this.handleBodyClassByRating( selectedRating );
this.toggleCommentTextareaRequired( selectedRating );
} );
}
},
handleBodyClassByRating( ranking ) {
if ( ranking < this.minRating ) {
doc.physique.classList.take away( 'tasty-recipes-selected-minimum-rating' );
return;
}
doc.physique.classList.add( 'tasty-recipes-selected-minimum-rating' );
},
toggleCommentTextareaRequired( ranking ) {
const commentTextarea = doc.getElementById( 'remark' );
if ( ! commentTextarea ) {
return;
}

if ( ranking {
window.TastyRecipes.staticTooltip.changeMessage( response.knowledge.message );
window.TastyRecipes.staticTooltip.present();
this.updateAverageText( response.knowledge, recipeCardElement );
this.maybeFillCommentForm( response.knowledge );

// Conceal the tooltip after 5 seconds.
setTimeout( () => {
this.maybeResetTooltip( recipeCardElement, response.knowledge, ranking );
}, 5000 );
},
() => {
this.resetTooltip( recipeCardElement );
}
);
},
updateAverageText( knowledge, recipeCardElement ) {
if ( ! knowledge.common ) {
return;
}
this.setRatingPercent( knowledge );

if ( ! knowledge.rely ) {
return;
}

const quickLink = doc.querySelector( ‘.tasty-recipes-rating-link’ );
if ( quickLink ) {
this.setTextInContainer( quickLink, knowledge );
this.setPartialStar( quickLink );
}

const cardStars = recipeCardElement.querySelector( ‘.tasty-recipes-ratings-buttons’ );
cardStars.dataset.trDefaultRating = knowledge.common;
this.setTextInContainer( recipeCardElement.querySelector( ‘.tasty-recipes-rating’ ), knowledge );
},
setTextInContainer( container, knowledge ) {
if ( ! container ) {
return;
}

if ( knowledge.label ) {
const ratingLabelElement = container.querySelector( ‘.rating-label’ );
if ( ratingLabelElement ) {
ratingLabelElement.innerHTML = knowledge.label;
}
return;
}

const averageElement = container.querySelector( ‘.common’ );
if ( averageElement ) {
averageElement.textContent = knowledge.common;
}

const countElement = container.querySelector( ‘.rely’ );
if ( countElement ) {
countElement.textContent = knowledge.rely;
}
},
setPartialStar( container ) {
const highestStar = container.querySelector( ‘[data-rating=”‘ + Math.ceil( this.defaultRating ) + ‘”]’ );
if ( highestStar ) {
highestStar.dataset.trClip = this.currentRatingPercentage;
}
},
setRatingPercent( knowledge ) {
this.defaultRating = knowledge.common.toFixed( 1 );
const components = knowledge.common.toFixed( 2 ).toString().break up( ‘.’ );
this.currentRatingPercentage = components[1] ? components[1] : 100;
if ( this.currentRatingPercentage === ’00’ ) {
this.currentRatingPercentage = 100;
}
},
setCheckedStar( goal ) {
const cardRatingContainer = goal.closest( ‘.tasty-recipes-ratings-buttons’ );
const selectedRatingElement = cardRatingContainer.querySelector( ‘[data-tr-checked]’ );
if ( selectedRatingElement ) {
delete selectedRatingElement.dataset.trChecked;
}

const thisStar = goal.closest( ‘.tasty-recipes-rating’ );
thisStar.dataset.trChecked = 1;
thisStar.querySelector( ‘[data-tr-clip]’ ).dataset.trClip = 100;
},
maybeFillCommentForm( knowledge ) {
if ( ! knowledge.remark || ! knowledge.remark.content material ) {
return;
}

const commentForm = doc.querySelector( ‘#commentform’ );
if ( ! commentForm ) {
return;
}

const commentBox = commentForm.querySelector( ‘[name=comment]’ );
if ( ! commentBox || commentBox.worth ) {
return;
}

// Add remark particulars for modifying.
commentBox.innerHTML = knowledge.remark.content material;
if ( knowledge.remark.title ) {
commentForm.querySelector( ‘[name=author]’ ).worth = knowledge.remark.title;
commentForm.querySelector( ‘[name=email]’ ).worth = knowledge.remark.e-mail;
}
},
maybeResetTooltip( recipeCardElement, knowledge, ranking ) {
if ( this.savingRating === ranking ) {
this.resetTooltip( recipeCardElement, knowledge );
}
},
resetTooltip( recipeCardElement, knowledge ) {
window.TastyRecipes.staticTooltip.destroy();
this.savingRating = false;

// Reset the default ranking.
const cardRatingContainer = recipeCardElement.querySelector( ‘.tasty-recipes-ratings-buttons’ );
if ( cardRatingContainer ) {
this.defaultRating = ( knowledge && knowledge.common ) ? knowledge.common.toFixed(1) : cardRatingContainer.dataset.trDefaultRating;
cardRatingContainer.dataset.trDefaultRating = this.defaultRating;

this.resetSelectedStar( cardRatingContainer, knowledge );
}
},
resetSelectedStar( cardRatingContainer ) {
const selectedRatingElement = cardRatingContainer.querySelector( ‘[data-rating=”‘ + Math.ceil( this.defaultRating ) + ‘”]’ );
if ( selectedRatingElement ) {
selectedRatingElement.querySelector( ‘[data-tr-clip]’ ).dataset.trClip = this.currentRatingPercentage;
selectedRatingElement.parentNode.dataset.trChecked = 1;
}

const previousSelectedElement= cardRatingContainer.querySelector( ‘[data-tr-checked]’ );
if ( previousSelectedElement ) {
const currentSelectedRating = previousSelectedElement.querySelector(‘[data-rating]’);
if ( currentSelectedRating !== selectedRatingElement ) {
delete previousSelectedElement.dataset.trChecked;
}
}
},
backwardCompFormRatingPosition() {
const ratingsButtons = doc.querySelector( ‘#reply .tasty-recipes-ratings-buttons, #tasty-recipes-comment-rating .tasty-recipes-ratings-buttons’ );
if ( ! ratingsButtons ) {
return;
}
const ratingsButtonsStyles = window.getComputedStyle(ratingsButtons);
if ( ! ratingsButtonsStyles.show.contains( ‘flex’ ) ) {
ratingsButtons.fashion.path = ‘rtl’;
}

if ( typeof tastyRecipesRating !== ‘undefined’ ) {
// Choose the ranking that was beforehand chosen in admin.
ratingsButtons.querySelector( ‘.tasty-recipes-rating[value=”‘ + tastyRecipesRating + ‘”]’ ).checked = true;
}

const ratingSpans = ratingsButtons.querySelectorAll( ‘.tasty-recipes-rating’ );
for (const ratingSpan of ratingSpans) {
ratingSpan.addEventListener( ‘click on’, occasion => {
if ( ratingSpan === occasion.goal ) {
return;
}
ratingSpan.previousElementSibling.click on();
} );
}
}
};

(perform(callback) {
if (doc.readyState !== “loading”) {
callback();
} else {
window.addEventListener( ‘load’, callback );
}
})(() => {
window.TastyRecipes.scores.init( window.trCommon ? window.trCommon.minRating : 4 );
});