PHP Classes

File: assets/js/app/ui.js

Recommend this page to a friend!
  Classes of Ahmad Mustapha  >  Utility Web PHP API  >  assets/js/app/ui.js  >  Download  
File: assets/js/app/ui.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Utility Web PHP API
API to retrieve movie details and other resources
Author: By
Last change:
Date: 1 year ago
Size: 11,142 bytes
 

Contents

Class file image Download
window.APP = {};
/**
 * User interface helper
 * Core ui
 * Modal
 */
(function(ns){
	let obj = ns.UI = {};


	let animatedDotInterval = [];

	let buttonLoadings = {};


    function faFactory(type, iconName, size)
    {
        size = size ? ' fa-'+size+'x' : '';
        return '<i class="'+type+' fa-'+iconName+size+'"></i>';
    }


    obj.fa = function(iconName, size)
    {
        return faFactory('fa', iconName, size);
    };


    obj.fas = function(iconName, size)
    {
        return faFactory('fas', iconName, size);
    };


    obj.alert = function(type, message, closeable = false)
    {
        let openTag = '<div class="alert alert-' + type + '" role="alert">';
        let closeTag = '</div>';
        if(closeable){
            openTag = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">';
            closeTag = '<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>';
        }
        return openTag + message + closeTag;
    };


    obj.submitForm = function(form, options)
    {
        let button = form.querySelector('button[type="submit"]');
        obj.waitButton(button, options);

        return obj;
    };


    obj.waitButton = function(button, options)
    {
        if(typeof button == 'string'){
            button = document.getElementById(button);
        }
        let willShow = true;
        if(options.required){
            for(let i=0; i<options.required.length; i++){
                if($(options.required[i]).val() === ''){
                    willShow = false;
                    break;
                }
            }
        }
        if(willShow){
            button.setAttribute('class', button.getAttribute('class') + ' disabled');
            button.setAttribute('disabled', 'disabled');
            obj.animDots(button, options);
        }

        return obj;
    };


    obj.showButtonLoader = function(button, text = '', faClass = '')
    {
        let $button = ns.UI.El.getJQ(button);
        //save current state
        let buttonId = $button.attr('id')
        if(buttonId){
            buttonId = buttonId.replaceAll('-', '');
            buttonLoadings[buttonId] = $button.html();
        }

        $button.addClass('disabled')
            .html(obj.fa('spinner fa-pulse '+faClass) +' '+ text)
            .attr('disabled', 'disabled');

        return obj;
    };


    obj.hideButtonLoader = function(button, text)
    {
        let $button = ns.UI.El.getJQ(button);
        $button.removeClass('disabled')
        //get stored text, if any
        let oldText;
        if(! text){
            let buttonId = $button.attr('id').replaceAll('-', '');
            oldText = buttonLoadings[buttonId];
        }
        $button.html(oldText || text);
        $button.removeAttr('disabled');
        $button.find('.waves-ripple').remove();

        return obj;
    };


    obj.animDots = function (el, options)
    {
    	let waitMsg = '';
        if(typeof el == 'string'){
            el = document.getElementById(el);
        }
        //if message is provided in second param instead of options
        if(typeof options == 'string'){
            waitMsg = options;
        }
        let numberOfDots = options.dots || 3;
        let timeInterval = options.interval || 200;
        if(options.text !== false){
	        waitMsg = options.text || waitMsg;
	        waitMsg = waitMsg || 'please wait';
        }
        let dotClass = options.dotclass || 'text-warning';
        let textClass = options.textclass || 'text-white';

        //clear the element value
        if (el.hasChildNodes()) {
            el.innerHTML = null;
        }

        //Running animated dots
        let el_running = document.createElement("i");
        el_running.id = "running-animated-dots";

        //Run the dots
        let dotsCount = 0;
        let dot = '<b class="'+dotClass+'">.</b>';
        let text = '<i id="animated-dots-wait" class="'+textClass+'">' + waitMsg + '</i>';

        el_running.innerHTML = text;
        //if we don't need waiting message
        if(options.text === false){
            el_running.innerHTML += dot;
            //we will use dot as default value instead
            text = dot;
        }

        //Set the child elements
        el.appendChild(el_running);

        animatedDotInterval[el.id] = setInterval(function () {
            if (dotsCount === numberOfDots) {
                dotsCount = -1;
                el_running.innerHTML = text;
            } else {
                el_running.innerHTML += dot;
            }
            dotsCount++;
        }, timeInterval);


    };//animatedDots


    obj.stopAnimDots = function (elementId) {
        clearInterval(animatedDotInterval[elementId]);
        document.getElementById(elementId).innerHTML = '';
    };
})(window.APP);


/**
 * Form
 */
(function(ns){
    let obj = ns.Form = {};

    let formLoadingButton = {};
    let formLoadingButtonText = {};


    obj.submit = ns.submitForm;

    obj.showLoader = function(form, text = 'Submitting')
    {
        if(typeof form == 'string'){
            form = document.getElementById(form)
        }

        let button = form.querySelector('[type="submit"]');

        //save state
        let formId = form.id.replaceAll('-', '');
        formLoadingButton[formId] = button;
        formLoadingButtonText[formId] = button.innerHTML;

        ns.showButtonLoader(button, text)

        return obj;
    };


    obj.hideLoader = function(formId, text)
    {
        if(typeof form != 'string'){
            formId = formId.getAttribute('id');
        }

        formId = formId.replaceAll('-', '');
        let button = formLoadingButton[formId];

        let buttonText = formLoadingButtonText[formId];

        ns.hideButtonLoader(button, buttonText);

        return obj;
    }
})(window.APP.UI);


/**
 * Modal
 */
(function(ns){


    function Modal(id){
        this.setId(id);
    }


    let proto = Modal.prototype;

    /**
     * Stores modal id
     * @let string
     */
    proto.modalId = null;

    /**
     * Close button id
     * This id will be adjusted,
     * proto.modalId will added at its beginning
     * Example: 'general_header_close_button'
     * @let string
     */
    proto.closeButtonIdentifier = '_header_close_button';
    proto.closeButtonId = null;

    /**
     * Will indicate weather the respected attrs are hidden
     * @let Boolean
     */
    proto.isHeaderHidden = false;

    proto.isFooterHidden = false;

    proto.isShown = false;

    proto.setId = function (mId) {
    	//set modal id
        this.modalId = "#modal_" + mId;
        //set footer id
        this.closeButtonId = this.modalId + this.closeButtonIdentifier;
        //let modal handleUpdate
        $(this.modalId).modal('handleUpdate');

        return this;
    };


    proto.getId = function () {
        return this.modalId;
    };


    proto.useGeneral = function()
    {
    	return new Modal('general');
    };


    proto.on = function(onEvent, callback)
    {
        let obj = this;
        $(this.getId()).on(onEvent+'.bs.modal', function (e) {
            return callback(obj);
        });

        return this;
    };


    proto.one = function(onEvent, callback)
    {
        let obj = this;
        $(this.getId()).one(onEvent+'.bs.modal', function (e) {
            return callback(obj);
        });

        return this;
    };


    proto.off = function(onEvent)
    {
        $(this.getId()).off(onEvent+'.bs.modal');

        return this;
    };


    proto.decideId = function (mId) {
        if (! mId) {
            return this.modalId;
        }
        return mId;
    };


    proto.show = function (modalId = '') {
        $(this.getId()).modal('show');

        this.isShown = true;

        return this;
    };


    proto.hide = function (modalId = '') {
        $(this.getId()).modal('hide');

        return this;
    };


    proto.close = function (modalId = '') {
        $(this.getId()).modal('dispose');

        return this;
    };


    proto.actOnHF = function(element, action)
    {
    	switch(action){
            case false:
            	element.hide();
                break;
            case true:
                element.show();
                break;
        }

        return this;
    };


    proto.showLoader = function(showHeaderAndFooter, willShowFooter)
    {
    	showHeaderAndFooter = showHeaderAndFooter || false;
    	if(! this.modalId){
        	this.useGeneral();
    	}
        //if we'll hide header and footer
        if(willShowFooter !== undefined){
        	this.footer(willShowFooter);
        	if(showHeaderAndFooter){
        		this.header(showHeaderAndFooter);
        	}
        }else{
        	this.header(showHeaderAndFooter).footer(showHeaderAndFooter);
        }

        this.setBody('<div class="text-center"><i class="m-3 fa fa-3x text-info fa-spinner fa-pulse"></i><br/>Loading...</div>');
        this.show();

        return this;
    };


    proto.hideLoader = function(willNotCloseModal)
    {
        this.header(true).footer(true);
        if(willNotCloseModal){
        	this.hide();
        }

        return this;
    };


    proto.closeButton = function(action)
    {
    	if(action === true || action === undefined){
    		this.getCloseButton().show();
    	}else{
    		this.getCloseButton().hide();
    	}

    	return this;
    };


    proto.getHeaderCloseButton = function()
    {
        return $(this.closeButtonId);
    };


    proto.header = function(actionOrHtml)
    {
    	if(typeof actionOrHtml == 'boolean'){
    		this.isHeaderHidden = true;
    		return this.actOnHF($(this.getId()).find('.modal-header'), actionOrHtml);
    	}

        return this.setHeader(actionOrHtml);
    };


    proto.body = function(html)
    {
    	return this.setBody(html);
    };


    proto.footer = function(actionOrHtml)
    {
    	if(typeof actionOrHtml == 'boolean'){
    		this.isFooterHidden = true;
    		return this.actOnHF($(this.getId()).find('.modal-footer'), actionOrHtml);
    	}

        return this.setFooter(actionOrHtml);
    };


    proto.setHeader = function (content)
    {
        $(this.getId()).find('.modal-title').html(content);

        return this;
    };


    proto.setBody = function (content)
    {
        $(this.getId()).find('.modal-body').html(content);

        return this;
    };

    proto.setFooter = function (content)
    {
        $(this.getId()).find('.modal-footer').html(content);

        return this;
    };

    ns.UI.Modal = Modal;
})(window.APP);


(function(ns){
    let obj = ns.UI.El = {};

    obj.getJQ = function(element){
        switch(typeof element){
            case 'string':
                if(element.indexOf('#') > -1){
                    return $(element);
                }

                //we have to put #
                return $('#'+element);
            case 'object':
                if(element instanceof jQuery){
                    return element;
                }
                return $(element);
        }
    }
})(window.APP);
For more information send a message to info at phpclasses dot org.