Edit File by line
/home/barbar84/public_h.../wp-conte.../plugins/ninja-fo.../assets/js/lib
File: ninjaModal.js
/**
[0] Fix | Delete
* Definition of the NinjaModal class.
[1] Fix | Delete
*
[2] Fix | Delete
* @param data (object) The default data to be passed into the class.
[3] Fix | Delete
* data.width (int) The width of the modal.
[4] Fix | Delete
* data.class (string) The class to be applied to the modal.
[5] Fix | Delete
* data.closeOnClick (string/bool) The click options to close the modal.
[6] Fix | Delete
* data.closeOnEsc (bool) Whether or not to close the modal on escape.
[7] Fix | Delete
* data.title (string) The title of the modal.
[8] Fix | Delete
* data.content (string) The content of the modal.
[9] Fix | Delete
* data.btnPrimary (object) Information about the primary button of the modal.
[10] Fix | Delete
* btnPrimary.text (string) The text content of the button.
[11] Fix | Delete
* btnPrimary.class (string) The class to be added to the button.
[12] Fix | Delete
* btnPrimary.callback (function) The function to be called when the button is clicked.
[13] Fix | Delete
* data.btnSecondary (object) Information about the secondary button of the modal.
[14] Fix | Delete
* btnSecondary.text (string) The text content of the button.
[15] Fix | Delete
* btnSecondary.class (string) The class to be added to the button.
[16] Fix | Delete
* btnSecondary.callback (function) The function to be called when the button is clicked.
[17] Fix | Delete
* data.useProgressBar (bool) Whether or not this modal needs the progress bar.
[18] Fix | Delete
* data.loadingText (string) The text to be shown while the progress bar is visible.
[19] Fix | Delete
*/
[20] Fix | Delete
function NinjaModal ( data ) {
[21] Fix | Delete
// Setup our modal settings.
[22] Fix | Delete
this.settings = {
[23] Fix | Delete
width: ( 'undefined' != typeof data.width ? data.width : 400 ),
[24] Fix | Delete
class: ( 'undefined' != typeof data.class ? data.class : 'dashboard-modal' ),
[25] Fix | Delete
closeOnClick: ( 'undefined' != typeof data.closeOnClick ? data.closeOnClick : 'body' ),
[26] Fix | Delete
closeOnEsc: ( 'undefined' != typeof data.closeOnEsc ? data.closeOnEsc : true )
[27] Fix | Delete
}
[28] Fix | Delete
// Setup our title.
[29] Fix | Delete
this.title = ( 'undefined' != typeof data.title ? data.title : '' );
[30] Fix | Delete
// Setup our content.
[31] Fix | Delete
this.content = ( 'undefined' != typeof data.content ? data.content : '' );
[32] Fix | Delete
// See if we need buttons.
[33] Fix | Delete
this.buttons = {};
[34] Fix | Delete
this.buttons.primary = {};
[35] Fix | Delete
this.buttons.secondary = {};
[36] Fix | Delete
this.buttons.primary.data = ( 'undefined' != typeof data.btnPrimary ? data.btnPrimary : false );
[37] Fix | Delete
this.buttons.secondary.data = ( 'undefined' != typeof data.btnSecondary ? data.btnSecondary : false );
[38] Fix | Delete
this.onOpenCallback = ( 'undefined' != typeof data.onOpenCallback ? data.onOpenCallback : false );
[39] Fix | Delete
// See if we need the progress bar.
[40] Fix | Delete
this.useProgressBar = ( 'undefined' != typeof data.useProgressBar ? data.useProgressBar : false );
[41] Fix | Delete
if ( this.useProgressBar ) {
[42] Fix | Delete
// TODO: translate
[43] Fix | Delete
this.loadingText = ( 'undefined' != typeof data.loadingText ? data.loadingText : 'Loading...' );
[44] Fix | Delete
}
[45] Fix | Delete
// Declare our popup item.
[46] Fix | Delete
this.popup;
[47] Fix | Delete
// Declare our button booleans.
[48] Fix | Delete
this.hasPrimary = false;
[49] Fix | Delete
this.hasSecondary = false;
[50] Fix | Delete
// Initialize the popup.
[51] Fix | Delete
this.initModal();
[52] Fix | Delete
// Show the popup.
[53] Fix | Delete
this.toggleModal( true );
[54] Fix | Delete
}
[55] Fix | Delete
[56] Fix | Delete
[57] Fix | Delete
/**
[58] Fix | Delete
* Function to destory the modal.
[59] Fix | Delete
*/
[60] Fix | Delete
NinjaModal.prototype.destroy = function () {
[61] Fix | Delete
this.popup.destroy();
[62] Fix | Delete
}
[63] Fix | Delete
[64] Fix | Delete
[65] Fix | Delete
/**
[66] Fix | Delete
* Function to increment the progress bar.
[67] Fix | Delete
*
[68] Fix | Delete
* @param max (int) The maximum percentage of complete the progress bar can be.
[69] Fix | Delete
*/
[70] Fix | Delete
NinjaModal.prototype.incrementProgress = function ( max ) {
[71] Fix | Delete
var progressBar = document.getElementById( 'nf-progress-bar-slider-' + this.popup.dataId );
[72] Fix | Delete
// Get our current progress.
[73] Fix | Delete
var currentProgress = progressBar.offsetWidth / progressBar.parentElement.offsetWidth * 100;
[74] Fix | Delete
// If we've not already passed the max value...
[75] Fix | Delete
if ( max > currentProgress ) {
[76] Fix | Delete
// Increase the progress by 1 step.
[77] Fix | Delete
currentProgress = Number( currentProgress ) + 1;
[78] Fix | Delete
this.setProgress( currentProgress );
[79] Fix | Delete
}
[80] Fix | Delete
}
[81] Fix | Delete
[82] Fix | Delete
[83] Fix | Delete
/**
[84] Fix | Delete
* Function to initialize the buttons.
[85] Fix | Delete
*/
[86] Fix | Delete
NinjaModal.prototype.initButtons = function () {
[87] Fix | Delete
// If we have data for a primary button...
[88] Fix | Delete
if ( this.buttons.primary.data ) {
[89] Fix | Delete
// Create the button.
[90] Fix | Delete
var primary = document.createElement( 'div' );
[91] Fix | Delete
primary.id = 'nf-button-primary-' + this.popup.dataId;
[92] Fix | Delete
primary.classList.add( 'nf-button', 'primary', 'pull-right' );
[93] Fix | Delete
// If we have a class...
[94] Fix | Delete
if ( this.buttons.primary.data.class ) {
[95] Fix | Delete
// Add it to the class list.
[96] Fix | Delete
primary.classList.add( this.buttons.primary.data.class );
[97] Fix | Delete
}
[98] Fix | Delete
// If we were given button text...
[99] Fix | Delete
if ( 'undefined' != typeof this.buttons.primary.data.text ) {
[100] Fix | Delete
// Use it.
[101] Fix | Delete
primary.innerHTML = this.buttons.primary.data.text;
[102] Fix | Delete
} // Otherwise... (We were not given text.)
[103] Fix | Delete
else {
[104] Fix | Delete
// Use default text.
[105] Fix | Delete
// TODO: translate
[106] Fix | Delete
primary.innerHTML = 'Confirm';
[107] Fix | Delete
}
[108] Fix | Delete
this.buttons.primary.dom = primary;
[109] Fix | Delete
// Attach the callback.
[110] Fix | Delete
this.buttons.primary.callback = this.buttons.primary.data.callback;
[111] Fix | Delete
// Record that we have a primary button.
[112] Fix | Delete
this.hasPrimary = true;
[113] Fix | Delete
// Garbage collection...
[114] Fix | Delete
delete this.buttons.primary.data;
[115] Fix | Delete
}
[116] Fix | Delete
// If we have data for a secondary button...
[117] Fix | Delete
if ( this.buttons.secondary.data ) {
[118] Fix | Delete
// Create the button.
[119] Fix | Delete
var secondary = document.createElement( 'div' );
[120] Fix | Delete
secondary.id = 'nf-button-secondary-' + this.popup.dataId;
[121] Fix | Delete
secondary.classList.add( 'nf-button', 'secondary' );
[122] Fix | Delete
// If we have a class...
[123] Fix | Delete
if ( this.buttons.secondary.data.class ) {
[124] Fix | Delete
// Add it to the class list.
[125] Fix | Delete
secondary.classList.add( this.buttons.secondary.data.class );
[126] Fix | Delete
}
[127] Fix | Delete
// If we were given button text...
[128] Fix | Delete
if ( 'undefined' != typeof this.buttons.secondary.data.text ) {
[129] Fix | Delete
// Use it.
[130] Fix | Delete
secondary.innerHTML = this.buttons.secondary.data.text;
[131] Fix | Delete
} // Otherwise... (We were not given text.)
[132] Fix | Delete
else {
[133] Fix | Delete
// Use default text.
[134] Fix | Delete
// TODO: translate
[135] Fix | Delete
secondary.innerHTML = 'Cancel';
[136] Fix | Delete
}
[137] Fix | Delete
this.buttons.secondary.dom = secondary;
[138] Fix | Delete
// Attach the callback.
[139] Fix | Delete
this.buttons.secondary.callback = this.buttons.secondary.data.callback;
[140] Fix | Delete
// Record that we have a secondary button.
[141] Fix | Delete
this.hasSecondary = true;
[142] Fix | Delete
// Garbage collection...
[143] Fix | Delete
delete this.buttons.secondary.data;
[144] Fix | Delete
}
[145] Fix | Delete
}
[146] Fix | Delete
[147] Fix | Delete
[148] Fix | Delete
/**
[149] Fix | Delete
* Function to initialize the popup modal.
[150] Fix | Delete
*/
[151] Fix | Delete
NinjaModal.prototype.initModal = function () {
[152] Fix | Delete
// Save the context of this for callbacks.
[153] Fix | Delete
var that = this;
[154] Fix | Delete
// Setup our popup.
[155] Fix | Delete
this.popup = new jBox( 'Modal', {
[156] Fix | Delete
width: this.settings.width,
[157] Fix | Delete
addClass: this.settings.class,
[158] Fix | Delete
overlay: true,
[159] Fix | Delete
closeOnClick: this.settings.closeOnClick,
[160] Fix | Delete
closeOnEsc: this.settings.closeOnEsc,
[161] Fix | Delete
onOpen: function() {
[162] Fix | Delete
// If we have a primary button...
[163] Fix | Delete
if ( that.hasPrimary ) {
[164] Fix | Delete
// Attach the callback.
[165] Fix | Delete
jQuery( this.content ).find( '#nf-button-primary-' + this.dataId ).click( that.buttons.primary.callback );
[166] Fix | Delete
}
[167] Fix | Delete
// If we have a secondary button...
[168] Fix | Delete
if ( that.hasSecondary ) {
[169] Fix | Delete
// Attach the callback.
[170] Fix | Delete
jQuery( this.content ).find( '#nf-button-secondary-' + this.dataId ).click( that.buttons.secondary.callback );
[171] Fix | Delete
}
[172] Fix | Delete
[173] Fix | Delete
if ( that.onOpenCallback ) {
[174] Fix | Delete
that.onOpenCallback();
[175] Fix | Delete
}
[176] Fix | Delete
},
[177] Fix | Delete
} );
[178] Fix | Delete
// Setup our data id to keep the DOM ids unique.
[179] Fix | Delete
this.popup.dataId = this.popup.id.replace( 'jBoxID', '' );
[180] Fix | Delete
// Render the title.
[181] Fix | Delete
this.renderTitle();
[182] Fix | Delete
// Initialize the buttons (if they exist).
[183] Fix | Delete
this.initButtons();
[184] Fix | Delete
// Render the content.
[185] Fix | Delete
this.renderContent();
[186] Fix | Delete
}
[187] Fix | Delete
[188] Fix | Delete
[189] Fix | Delete
/**
[190] Fix | Delete
* Function to toggle the display of the action block.
[191] Fix | Delete
*
[192] Fix | Delete
* @param show (bool) Whether to show the block.
[193] Fix | Delete
*/
[194] Fix | Delete
NinjaModal.prototype.maybeShowActions = function ( show ) {
[195] Fix | Delete
if ( this.hasPrimary || this.hasSecondary ) {
[196] Fix | Delete
if ( show ) {
[197] Fix | Delete
document.getElementById( 'nf-action-block-' + this.popup.dataId ).style.display = 'block';
[198] Fix | Delete
}
[199] Fix | Delete
else {
[200] Fix | Delete
document.getElementById( 'nf-action-block-' + this.popup.dataId ).style.display = 'none';
[201] Fix | Delete
}
[202] Fix | Delete
}
[203] Fix | Delete
}
[204] Fix | Delete
[205] Fix | Delete
[206] Fix | Delete
/**
[207] Fix | Delete
* Function to toggle the display of the progress block.
[208] Fix | Delete
*
[209] Fix | Delete
* @param show (bool) Whether to show the block.
[210] Fix | Delete
*/
[211] Fix | Delete
NinjaModal.prototype.maybeShowProgress = function ( show ) {
[212] Fix | Delete
if ( this.useProgressBar ) {
[213] Fix | Delete
if ( show ) {
[214] Fix | Delete
document.getElementById( 'nf-progress-block-' + this.popup.dataId ).style.display = 'block';
[215] Fix | Delete
}
[216] Fix | Delete
else {
[217] Fix | Delete
document.getElementById( 'nf-progress-block-' + this.popup.dataId ).style.display = 'none';
[218] Fix | Delete
}
[219] Fix | Delete
}
[220] Fix | Delete
}
[221] Fix | Delete
[222] Fix | Delete
[223] Fix | Delete
/**
[224] Fix | Delete
* Function to append the content to the popup.
[225] Fix | Delete
*/
[226] Fix | Delete
NinjaModal.prototype.renderContent = function () {
[227] Fix | Delete
// Delcare our template.
[228] Fix | Delete
var contentBox = document.createElement( 'div' );
[229] Fix | Delete
contentBox.classList.add( 'message' );
[230] Fix | Delete
contentBox.style.padding = '0px 20px 20px 20px';
[231] Fix | Delete
// Import our content.
[232] Fix | Delete
contentBox.innerHTML = this.content;
[233] Fix | Delete
[234] Fix | Delete
// If we were told to use the progress bar...
[235] Fix | Delete
if ( this.useProgressBar ) {
[236] Fix | Delete
// Define our progress block.
[237] Fix | Delete
var progressBlock = document.createElement( 'div' );
[238] Fix | Delete
progressBlock.id = 'nf-progress-block-' + this.popup.dataId;
[239] Fix | Delete
progressBlock.style.display = 'none';
[240] Fix | Delete
// Define our progress bar.
[241] Fix | Delete
var progressBar = document.createElement( 'div' );
[242] Fix | Delete
progressBar.classList.add( 'nf-progress-bar' );
[243] Fix | Delete
var progressSlider = document.createElement( 'div' );
[244] Fix | Delete
progressSlider.id = 'nf-progress-bar-slider-' + this.popup.dataId;
[245] Fix | Delete
progressSlider.classList.add( 'nf-progress-bar-slider' );
[246] Fix | Delete
progressBar.appendChild( progressSlider );
[247] Fix | Delete
progressBlock.appendChild( progressBar );
[248] Fix | Delete
// Define our loading text.
[249] Fix | Delete
var loadingText = document.createElement( 'p' );
[250] Fix | Delete
loadingText.style.color = '#1ea9ea';
[251] Fix | Delete
loadingText.style.fontWeight = 'bold';
[252] Fix | Delete
loadingText.innerHTML = this.loadingText;
[253] Fix | Delete
progressBlock.appendChild( loadingText );
[254] Fix | Delete
// Append it to the content box.
[255] Fix | Delete
contentBox.appendChild( progressBlock );
[256] Fix | Delete
}
[257] Fix | Delete
// If we have buttons...
[258] Fix | Delete
if ( this.hasPrimary || this.hasSecondary ) {
[259] Fix | Delete
// Define our action block.
[260] Fix | Delete
var actionBlock = document.createElement( 'div' );
[261] Fix | Delete
actionBlock.id = 'nf-action-block-' + this.popup.dataId;
[262] Fix | Delete
actionBlock.classList.add( 'buttons' );
[263] Fix | Delete
// Insert the primary button, if one exists.
[264] Fix | Delete
if ( this.hasPrimary ) actionBlock.appendChild( this.buttons.primary.dom );
[265] Fix | Delete
// Insert the secondary button, if one exists.
[266] Fix | Delete
if ( this.hasSecondary ) actionBlock.appendChild( this.buttons.secondary.dom );
[267] Fix | Delete
// Append it to the content box.
[268] Fix | Delete
contentBox.appendChild( actionBlock );
[269] Fix | Delete
this.popup.onOpen = function() {
[270] Fix | Delete
this.buttons.primary.dom.onclick = this.buttons.primary.callback;
[271] Fix | Delete
this.buttons.secondary.dom.onclick = this.buttons.secondary.callback;
[272] Fix | Delete
}
[273] Fix | Delete
}
[274] Fix | Delete
[275] Fix | Delete
// Set our content.
[276] Fix | Delete
this.popup.setContent( document.createElement( 'div' ).appendChild( contentBox ).parentElement.innerHTML );
[277] Fix | Delete
}
[278] Fix | Delete
[279] Fix | Delete
[280] Fix | Delete
/**
[281] Fix | Delete
* Function to append the title to the popup.
[282] Fix | Delete
*/
[283] Fix | Delete
NinjaModal.prototype.renderTitle = function () {
[284] Fix | Delete
// If we have a title...
[285] Fix | Delete
if ( '' != this.title ) {
[286] Fix | Delete
// Set our title.
[287] Fix | Delete
this.popup.setTitle( this.title );
[288] Fix | Delete
}
[289] Fix | Delete
}
[290] Fix | Delete
[291] Fix | Delete
[292] Fix | Delete
/**
[293] Fix | Delete
* Function to set the value of the progress bar.
[294] Fix | Delete
*
[295] Fix | Delete
* @param percent (int) The value to set the progress bar to.
[296] Fix | Delete
*/
[297] Fix | Delete
NinjaModal.prototype.setProgress = function ( percent ) {
[298] Fix | Delete
// Update the width of the element as a percentage.
[299] Fix | Delete
var progressBar = document.getElementById( 'nf-progress-bar-slider-' + this.popup.dataId );
[300] Fix | Delete
progressBar.style.width = percent + '%';
[301] Fix | Delete
}
[302] Fix | Delete
[303] Fix | Delete
[304] Fix | Delete
/**
[305] Fix | Delete
* Function to toggle the visibility of the popup.
[306] Fix | Delete
*
[307] Fix | Delete
* @param show (bool) Whether or not to show the popup.
[308] Fix | Delete
*/
[309] Fix | Delete
NinjaModal.prototype.toggleModal = function ( show ) {
[310] Fix | Delete
// If we were told to show the modal...
[311] Fix | Delete
if ( show ) {
[312] Fix | Delete
// Open it.
[313] Fix | Delete
this.popup.open();
[314] Fix | Delete
} // Otherwise... (We were told to hide it.)
[315] Fix | Delete
else {
[316] Fix | Delete
// Close it.
[317] Fix | Delete
this.popup.close();
[318] Fix | Delete
}
[319] Fix | Delete
}
[320] Fix | Delete
[321] Fix | Delete
[322] Fix | Delete
/**
[323] Fix | Delete
* Function to update the content of the popup.
[324] Fix | Delete
*
[325] Fix | Delete
* @param content (string) The new content.
[326] Fix | Delete
*/
[327] Fix | Delete
NinjaModal.prototype.updateContent = function ( content ) {
[328] Fix | Delete
// Set the new content.
[329] Fix | Delete
this.content = content;
[330] Fix | Delete
// Re-render.
[331] Fix | Delete
this.renderContent();
[332] Fix | Delete
}
[333] Fix | Delete
[334] Fix | Delete
[335] Fix | Delete
[336] Fix | Delete
/**
[337] Fix | Delete
* Function to update the title of the popup.
[338] Fix | Delete
*
[339] Fix | Delete
* @param title (string) The new title.
[340] Fix | Delete
*/
[341] Fix | Delete
NinjaModal.prototype.updateTitle = function ( title ) {
[342] Fix | Delete
// Set the new title.
[343] Fix | Delete
this.title = title;
[344] Fix | Delete
// Re-render.
[345] Fix | Delete
this.renderTitle();
[346] Fix | Delete
}
[347] Fix | Delete
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
Function