FileMaster

Edit File: ninjaModal.js

/**
 * Definition of the NinjaModal class.
 * 
 * @param data (object) The default data to be passed into the class.
 *   data.width (int) The width of the modal.
 *   data.class (string) The class to be applied to the modal.
 *   data.closeOnClick (string/bool) The click options to close the modal.
 *   data.closeOnEsc (bool) Whether or not to close the modal on escape.
 *   data.title (string) The title of the modal.
 *   data.content (string) The content of the modal.
 *   data.btnPrimary (object) Information about the primary button of the modal.
 *     btnPrimary.text (string) The text content of the button.
 *     btnPrimary.class (string) The class to be added to the button.
 *     btnPrimary.callback (function) The function to be called when the button is clicked.
 *   data.btnSecondary (object) Information about the secondary button of the modal.
 *     btnSecondary.text (string) The text content of the button.
 *     btnSecondary.class (string) The class to be added to the button.
 *     btnSecondary.callback (function) The function to be called when the button is clicked.
 *   data.useProgressBar (bool) Whether or not this modal needs the progress bar.
 *   data.loadingText (string) The text to be shown while the progress bar is visible.
 */
function NinjaModal ( data ) {
    // Setup our modal settings.
    this.settings = {
        width: ( 'undefined' != typeof data.width ? data.width : 400 ),
        class: ( 'undefined' != typeof data.class ? data.class : 'dashboard-modal' ),
        closeOnClick: ( 'undefined' != typeof data.closeOnClick ? data.closeOnClick : 'body' ),
        closeOnEsc: ( 'undefined' != typeof data.closeOnEsc ? data.closeOnEsc : true )
    }
    // Setup our title.
    this.title = ( 'undefined' != typeof data.title ? data.title : '' );
    // Setup our content.
    this.content = ( 'undefined' != typeof data.content ? data.content : '' );
    // See if we need buttons.
    this.buttons = {};
    this.buttons.primary = {};
    this.buttons.secondary = {};
    this.buttons.primary.data = ( 'undefined' != typeof data.btnPrimary ? data.btnPrimary : false );
    this.buttons.secondary.data = ( 'undefined' != typeof data.btnSecondary ? data.btnSecondary : false );
    this.onOpenCallback = ( 'undefined' != typeof data.onOpenCallback ? data.onOpenCallback : false );
    // See if we need the progress bar.
    this.useProgressBar = ( 'undefined' !=  typeof data.useProgressBar ? data.useProgressBar : false );
    if ( this.useProgressBar ) {
        // TODO: translate
        this.loadingText = ( 'undefined' != typeof data.loadingText ? data.loadingText : 'Loading...' );
    }
    // Declare our popup item.
    this.popup;
    // Declare our button booleans.
    this.hasPrimary = false;
    this.hasSecondary = false;
    // Initialize the popup.
    this.initModal();
    // Show the popup.
    this.toggleModal( true );
}

/**
 * Function to destory the modal.
 */
NinjaModal.prototype.destroy = function () {
    this.popup.destroy();
}

/**
 * Function to increment the progress bar.
 * 
 * @param max (int) The maximum percentage of complete the progress bar can be.
 */
NinjaModal.prototype.incrementProgress = function ( max ) {
    var progressBar = document.getElementById( 'nf-progress-bar-slider-' + this.popup.dataId );
    // Get our current progress.
    var currentProgress = progressBar.offsetWidth / progressBar.parentElement.offsetWidth * 100;
    // If we've not already passed the max value...
    if ( max > currentProgress ) {
        // Increase the progress by 1 step.
        currentProgress = Number( currentProgress ) + 1;
        this.setProgress( currentProgress );
    }
}

/**
 * Function to initialize the buttons.
 */
NinjaModal.prototype.initButtons = function () {
    // If we have data for a primary button...
    if ( this.buttons.primary.data ) {
        // Create the button.
        var primary = document.createElement( 'div' );
        primary.id = 'nf-button-primary-' + this.popup.dataId;
        primary.classList.add( 'nf-button', 'primary', 'pull-right' );
        // If we have a class...
        if ( this.buttons.primary.data.class ) {
            // Add it to the class list.
            primary.classList.add( this.buttons.primary.data.class );
        }
        // If we were given button text...
        if ( 'undefined' != typeof this.buttons.primary.data.text ) {
            // Use it.
            primary.innerHTML = this.buttons.primary.data.text;
        } // Otherwise... (We were not given text.)
        else {
            // Use default text.
            // TODO: translate
            primary.innerHTML = 'Confirm';
        }
        this.buttons.primary.dom = primary;
        // Attach the callback.
        this.buttons.primary.callback = this.buttons.primary.data.callback;
        // Record that we have a primary button.
        this.hasPrimary = true;
        // Garbage collection...
        delete this.buttons.primary.data;
    }
    // If we have data for a secondary button...
    if ( this.buttons.secondary.data ) {
        // Create the button.
        var secondary = document.createElement( 'div' );
        secondary.id = 'nf-button-secondary-' + this.popup.dataId;
        secondary.classList.add( 'nf-button', 'secondary' );
        // If we have a class...
        if ( this.buttons.secondary.data.class ) {
            // Add it to the class list.
            secondary.classList.add( this.buttons.secondary.data.class );
        }
        // If we were given button text...
        if ( 'undefined' != typeof this.buttons.secondary.data.text ) {
            // Use it.
            secondary.innerHTML = this.buttons.secondary.data.text;
        } // Otherwise... (We were not given text.)
        else {
            // Use default text.
            // TODO: translate
            secondary.innerHTML = 'Cancel';
        }
        this.buttons.secondary.dom = secondary;
        // Attach the callback.
        this.buttons.secondary.callback = this.buttons.secondary.data.callback;
        // Record that we have a secondary button.
        this.hasSecondary = true;
        // Garbage collection...
        delete this.buttons.secondary.data;
    }
}

/**
 * Function to initialize the popup modal.
 */
NinjaModal.prototype.initModal = function () {
    // Save the context of this for callbacks.
    var that = this;
    // Setup our popup.
    this.popup = new jBox( 'Modal', {
        width: this.settings.width,
        addClass: this.settings.class,
        overlay: true,
        closeOnClick: this.settings.closeOnClick,
        closeOnEsc: this.settings.closeOnEsc,
        onOpen: function() {
            // If we have a primary button...
            if ( that.hasPrimary ) {
                // Attach the callback.
                jQuery( this.content ).find( '#nf-button-primary-' + this.dataId ).click( that.buttons.primary.callback );
            }
            // If we have a secondary button...
            if ( that.hasSecondary ) {
                // Attach the callback.
                jQuery( this.content ).find( '#nf-button-secondary-' + this.dataId ).click( that.buttons.secondary.callback );
            }

if ( that.onOpenCallback ) {
                that.onOpenCallback();
            }
        },
    } );
    // Setup our data id to keep the DOM ids unique.
    this.popup.dataId = this.popup.id.replace( 'jBoxID', '' );
    // Render the title.
    this.renderTitle();
    // Initialize the buttons (if they exist).
    this.initButtons();
    // Render the content.
    this.renderContent();
}

/**
 * Function to toggle the display of the action block.
 * 
 * @param show (bool) Whether to show the block.
 */
NinjaModal.prototype.maybeShowActions = function ( show ) {
    if ( this.hasPrimary || this.hasSecondary ) {
        if ( show ) {
            document.getElementById( 'nf-action-block-' + this.popup.dataId ).style.display = 'block';
        }
        else {
            document.getElementById( 'nf-action-block-' + this.popup.dataId ).style.display = 'none';
        }
    }
}

/**
 * Function to toggle the display of the progress block.
 * 
 * @param show (bool) Whether to show the block.
 */
NinjaModal.prototype.maybeShowProgress = function ( show ) {
    if ( this.useProgressBar ) {
        if ( show ) {
            document.getElementById( 'nf-progress-block-' + this.popup.dataId ).style.display = 'block';
        }
        else {
            document.getElementById( 'nf-progress-block-' + this.popup.dataId ).style.display = 'none';
        }
    }
}

/**
 * Function to append the content to the popup.
 */
NinjaModal.prototype.renderContent = function () {
    // Delcare our template.
    var contentBox = document.createElement( 'div' );
    contentBox.classList.add( 'message' );
    contentBox.style.padding = '0px 20px 20px 20px';
    // Import our content.
    contentBox.innerHTML = this.content;

// If we were told to use the progress bar...
    if ( this.useProgressBar ) {
        // Define our progress block.
        var progressBlock = document.createElement( 'div' );
        progressBlock.id = 'nf-progress-block-' + this.popup.dataId;
        progressBlock.style.display = 'none';
        // Define our progress bar.
        var progressBar = document.createElement( 'div' );
        progressBar.classList.add( 'nf-progress-bar' );
        var progressSlider = document.createElement( 'div' );
        progressSlider.id = 'nf-progress-bar-slider-' + this.popup.dataId;
        progressSlider.classList.add( 'nf-progress-bar-slider' );
        progressBar.appendChild( progressSlider );
        progressBlock.appendChild( progressBar );
        // Define our loading text.
        var loadingText = document.createElement( 'p' );
        loadingText.style.color = '#1ea9ea';
        loadingText.style.fontWeight = 'bold';
        loadingText.innerHTML = this.loadingText;
        progressBlock.appendChild( loadingText );
        // Append it to the content box.
        contentBox.appendChild( progressBlock );
    }
    // If we have buttons...
    if ( this.hasPrimary || this.hasSecondary ) {
        // Define our action block.
        var actionBlock = document.createElement( 'div' );
        actionBlock.id = 'nf-action-block-' + this.popup.dataId;
        actionBlock.classList.add( 'buttons' );
        // Insert the primary button, if one exists.
        if ( this.hasPrimary ) actionBlock.appendChild( this.buttons.primary.dom );
        // Insert the secondary button, if one exists.
        if ( this.hasSecondary ) actionBlock.appendChild( this.buttons.secondary.dom );
        // Append it to the content box.
        contentBox.appendChild( actionBlock );
        this.popup.onOpen = function() {
            this.buttons.primary.dom.onclick = this.buttons.primary.callback;
            this.buttons.secondary.dom.onclick = this.buttons.secondary.callback;
        }
    }
    
    // Set our content.
    this.popup.setContent( document.createElement( 'div' ).appendChild( contentBox ).parentElement.innerHTML );
}

/**
 * Function to append the title to the popup.
 */
NinjaModal.prototype.renderTitle = function () {
    // If we have a title...
    if ( '' != this.title ) {
        // Set our title.
        this.popup.setTitle( this.title );
    }
}

/**
 * Function to set the value of the progress bar.
 * 
 * @param percent (int) The value to set the progress bar to.
 */
NinjaModal.prototype.setProgress = function ( percent ) {
    // Update the width of the element as a percentage.
    var progressBar = document.getElementById( 'nf-progress-bar-slider-' + this.popup.dataId );
    progressBar.style.width = percent + '%';
}

/**
 * Function to toggle the visibility of the popup.
 * 
 * @param show (bool) Whether or not to show the popup.
 */
NinjaModal.prototype.toggleModal = function ( show ) {
    // If we were told to show the modal...
    if ( show ) {
        // Open it.
        this.popup.open();
    } // Otherwise... (We were told to hide it.)
    else {
        // Close it.
        this.popup.close();
    }
}

/**
 * Function to update the content of the popup.
 * 
 * @param content (string) The new content.
 */
NinjaModal.prototype.updateContent = function ( content ) {
    // Set the new content.
    this.content = content;
    // Re-render.
    this.renderContent();
}

/**
 * Function to update the title of the popup.
 * 
 * @param title (string) The new title.
 */
NinjaModal.prototype.updateTitle = function ( title ) {
    // Set the new title.
    this.title = title;
    // Re-render.
    this.renderTitle();
}

Back