the-glorious-startpage/js/profile-image.js

class ProfileImage {

    constructor() {
        this._profileContainer = document.querySelector('#profileImageContainer')

        this._profileAnimRunning = false;

        // Don't run animation on startup
        this._profileContainer.style.webkitAnimationPlayState = 'paused';

        this.rotateProfile = this.rotateProfile.bind(this);

        this._animationEndEvent = this._animationEndEvent.bind(this);
        this._onClickEvent = this._onClickEvent.bind(this);

        this.getProfileAnimationStatus = this.getProfileAnimationStatus.bind(this);

        this._init();
    }

    _init = () => {
        this._registerAnimationEndEvent();
        this._registerOnClickEvent();
    }

    rotateProfile = () => {
        event.preventDefault;

        // Remove anim class
        this._profileContainer.classList.remove('rotateProfileAnim');

        // Triggering reflow
        void this._profileContainer.offsetWidth;

        // Re-add animation class
        this._profileContainer.classList.add('rotateProfileAnim');

        // Start rotation animation
        this._profileContainer.style.webkitAnimationPlayState = 'running';
        this._profileAnimRunning = true;
    }

    _animationEndEvent = e => {
        this._profileAnimRunning = false;
    }

    // Re-enable animation after death
    _registerAnimationEndEvent = () => {
        this._profileContainer.addEventListener('animationend', this._animationEndEvent);
    }

    _onClickEvent = e => {
        if (this._profileAnimRunning) return;
        searchBoxShow.toggleSearchBox();
    }

    _registerOnClickEvent = () => {
        this._profileContainer.onclick = this._onClickEvent;
    }

    getProfileAnimationStatus = () => {
        return this._profileAnimRunning;
    }

}