(function( $ ) {
'use strict';
class AIOVGLikeButtonElement extends HTMLElement {
/**
* Element created.
*/
constructor() {
super();
// Set references to the DOM elements used by the component
this._likeButtonEl = null;
this._dislikeButtonEl = null;
// Set references to the private properties used by the component
this._isRendered = false;
this._isLoading = false;
this._options = {};
this._params = {};
// Bind the event handlers to ensure the reference remains stable
this._toggleLikes = this._toggleLikes.bind( this );
this._toggleDislikes = this._toggleDislikes.bind( this );
}
/**
* Browser calls this method when the element is added to the document.
* (can be called many times if an element is repeatedly added/removed)
*/
connectedCallback() {
if ( this._isRendered ) return false;
this._isRendered = true;
if ( this.postId == 0 ) return false;
this._options = window.aiovg_likes || window.aiovg_public;
if ( ! this.hasLikeButton && ! this.hasDislikeButton ) {
return false;
}
this._params = {
'likes': parseInt( this.getAttribute( 'likes' ) || 0 ),
'dislikes': parseInt( this.getAttribute( 'dislikes' ) || 0 ),
'liked': this.hasAttribute( 'liked' ),
'disliked': this.hasAttribute( 'disliked' )
};
// Likes Button
if ( this.hasLikeButton ) {
this._likeButtonEl = document.createElement( 'button' );
this._likeButtonEl.type = 'button';
this._likeButtonEl.className = 'aiovg-button-like';
this._updateLikeButton();
this.appendChild( this._likeButtonEl );
this._likeButtonEl.addEventListener( 'click', this._toggleLikes );
}
// Dislikes Button
if ( this.hasDislikeButton ) {
this._dislikeButtonEl = document.createElement( 'button' );
this._dislikeButtonEl.type = 'button';
this._dislikeButtonEl.className = 'aiovg-button-dislike';
this._updateDislikeButton();
this.appendChild( this._dislikeButtonEl );
this._dislikeButtonEl.addEventListener( 'click', this._toggleDislikes );
}
this._load();
}
/**
* Browser calls this method when the element is removed from the document.
* (can be called many times if an element is repeatedly added/removed)
*/
disconnectedCallback() {
// TODO
}
/**
* Define getters and setters for attributes.
*/
get postId() {
return parseInt( this.getAttribute( 'post_id' ) || 0 );
}
get hasLikeButton() {
return parseInt( this._options.show_like_button ) || 0;
}
get hasDislikeButton() {
return parseInt( this._options.show_dislike_button ) || 0;
}
get userId() {
return parseInt( this._options.user_id );
}
get loginRequired() {
return parseInt( this._options.login_required_to_vote ) || 0;
}
get isLoaded() {
return this.hasAttribute( 'loaded' );
}
set isLoaded( value ) {
return this.setAttribute( 'loaded', value );
}
/**
* Define private methods.
*/
_load() {
if ( this.isLoaded ) {
return false;
}
let data = {
'action': 'aiovg_get_likes_dislikes_info',
'user_id': this.userId,
'post_id': this.postId,
'security': this._options.ajax_nonce
};
this._fetch( data, ( response ) => {
this.isLoaded = true;
if ( response.status == 'success' ) {
this._params = response;
this._updateLikeButton();
this._updateDislikeButton();
}
});
}
_toggleLikes() {
if ( this.loginRequired && this.userId === 0 ) {
alert( this._options.i18n.alert_login_required );
return false;
}
if ( this._isLoading ) {
return false;
}
// Store
let data = {
'action': 'aiovg_toggle_likes',
'user_id': this.userId,
'post_id': this.postId,
'context': ( this._params.liked ? 'remove_from_likes' : 'add_to_likes' ),
'security': this._options.ajax_nonce
};
this._isLoading = true;
this._likeButtonEl.querySelector( 'svg' ).classList.add( 'aiovg-animate-rotate' );
this._fetch( data, ( response ) => {
this._isLoading = false;
if ( response.status == 'success' ) {
this._params = response;
}
this._updateLikeButton();
this._updateDislikeButton();
});
}
_toggleDislikes() {
if ( this.loginRequired && this.userId === 0 ) {
alert( this._options.i18n.alert_login_required );
return false;
}
if ( this._isLoading ) {
return false;
}
// Store
let data = {
'action': 'aiovg_toggle_dislikes',
'user_id': this.userId,
'post_id': this.postId,
'context': ( this._params.disliked ? 'remove_from_dislikes' : 'add_to_dislikes' ),
'security': this._options.ajax_nonce
};
this._isLoading = true;
this._dislikeButtonEl.querySelector( 'svg' ).classList.add( 'aiovg-animate-rotate' );
this._fetch( data, ( response ) => {
this._isLoading = false;
if ( response.status == 'success' ) {
this._params = response;
}
this._updateLikeButton();
this._updateDislikeButton();
});
}
_updateLikeButton() {
if ( ! this._likeButtonEl ) {
return false;
}
let html = '';
if ( this._params.liked ) {
html += '';
} else {
html += '';
}
html += '';
html += '' + this._params.likes + '';
html += '' + this._options.i18n.likes + '';
html += '';
this._likeButtonEl.innerHTML = html;
}
_updateDislikeButton() {
if ( ! this._dislikeButtonEl ) {
return false;
}
let html = '';
if ( this._params.disliked ) {
html += '';
} else {
html += '';
}
html += '';
html += '' + this._params.dislikes + '';
html += '' + this._options.i18n.dislikes + '';
html += '';
this._dislikeButtonEl.innerHTML = html;
}
_fetch( data, callback ) {
$.post( this._options.ajax_url, data, callback, 'json' );
}
}
/**
* Called when the page has loaded.
*/
$(function() {
// Register custom element
if ( ! customElements.get( 'aiovg-like-button' ) ) {
customElements.define( 'aiovg-like-button', AIOVGLikeButtonElement );
}
});
})( jQuery );