'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 = {};
}
/**
* 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;
}
if ( this.postId == 0 ) {
return false;
}
this._options = window.aiovg_likes;
if ( ! this.hasLikeButton && ! this.hasDislikeButton ) {
return false;
}
this._isRendered = true;
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', ( event ) => this._toggleLikes( event ) );
}
// 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', ( event ) => this._toggleDislikes( event ) );
}
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() {
if ( this._likeButtonEl ) {
this._likeButtonEl.removeEventListener( 'click', ( event ) => this._toggleLikes( event ) );
}
if ( this._dislikeButtonEl ) {
this._dislikeButtonEl.removeEventListener( 'click', ( event ) => this._toggleDislikes( event ) );
}
}
/**
* 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 ) {
jQuery.post( this._options.ajax_url, data, callback, 'json' );
}
}
// Register custom element.
document.addEventListener( 'DOMContentLoaded', function() {
customElements.define( 'aiovg-like-button', AIOVGLikeButtonElement );
});