182 lines
7.6 KiB
JavaScript
182 lines
7.6 KiB
JavaScript
|
|
(function ($) {
|
|
if (!window.mainwpPopup) {
|
|
window.mainwpPopup = function (selector) {
|
|
let popup = mainwpListPopups.getItem(selector);
|
|
if (popup === null) {
|
|
popup = new Mainwp_InstancePopup();
|
|
popup.initWrapper(selector);
|
|
mainwpListPopups.pushItem(popup);
|
|
}
|
|
return popup;
|
|
};
|
|
let mainwpListPopups = {
|
|
popupsQueue: [],
|
|
pushItem: function (popup) {
|
|
if ('object' !== typeof popup)
|
|
return false;
|
|
if (null === this.getItem(popup.overlayId)) {
|
|
this.popupsQueue.push(popup);
|
|
return popup;
|
|
}
|
|
return false;
|
|
},
|
|
getItem: function (id) {
|
|
let values = $.grep(this.popupsQueue, function (val) {
|
|
return val.overlayId == id;
|
|
});
|
|
let val = null;
|
|
if (values.length > 0)
|
|
val = values[0];
|
|
return val;
|
|
}
|
|
};
|
|
let Mainwp_InstancePopup = function () {
|
|
let _instancePopup = {
|
|
overlayId: null,
|
|
$overlayElementId: null,
|
|
actionsCloseCallback: null,
|
|
title: '',
|
|
totalSites: 0,
|
|
progressMax: 0, // length of process bar.
|
|
progressInit: 0, // init value of process bar.
|
|
statusText: '',
|
|
hideStatusText: false,
|
|
doCloseCallback: null,
|
|
init: function (data) {
|
|
data = data || {};
|
|
// convert property.
|
|
if (data.callback) {
|
|
this.actionsCloseCallback = data.callback;
|
|
delete data.callback;
|
|
}
|
|
let defaultVal = {
|
|
totalSites: 0,
|
|
progressMax: 0,
|
|
progressInit: 0,
|
|
statusText: 'synced'
|
|
};
|
|
this.doCloseCallback = true; // default is yes.
|
|
$.extend(this, defaultVal, data);
|
|
if (0 == this.totalSites) {
|
|
this.totalSites = this.progressMax;
|
|
}
|
|
this.initProgress();
|
|
this.render();
|
|
this.bindEvents();
|
|
},
|
|
initWrapper: function (el) { // may be call this very first to set custom wrapper.
|
|
this.overlayId = el;
|
|
this.$overlayElementId = $(this.overlayId);
|
|
},
|
|
initProgress: function () {
|
|
let pData = {
|
|
value: this.progressInit,
|
|
total: this.progressMax,
|
|
};
|
|
|
|
if (typeof pMax !== 'undefined') {
|
|
pData.total = pMax;
|
|
}
|
|
|
|
if (!this.hideStatusText) {
|
|
this.setStatusText('0 / ' + this.totalSites + ' ' + this.statusText);
|
|
}
|
|
this.$overlayElementId.find('.mainwp-modal-progress').progress(pData);
|
|
},
|
|
render: function () {
|
|
if (this.title) {
|
|
this.$overlayElementId.find('.header').html(this.title);
|
|
}
|
|
|
|
if (!this.progressMax)
|
|
this.$overlayElementId.find('.mainwp-modal-progress').hide(); // hide status and progress.
|
|
else
|
|
this.$overlayElementId.find('.mainwp-modal-progress').show();
|
|
let self = this;
|
|
this.$overlayElementId.modal({
|
|
onHide: function () {
|
|
self.onHideModal();
|
|
},
|
|
allowMultiple: this.allowMultiple ?? false
|
|
}).modal('setting', 'closable', false).modal('show').modal('set active'); // trick to fix diplay issue.
|
|
},
|
|
onHideModal: function () {
|
|
if (this.doCloseCallback) {
|
|
// do call back when clicking on close button or clicking on dimmer.
|
|
typeof this.actionsCloseCallback === 'function' && this.actionsCloseCallback();
|
|
}
|
|
},
|
|
bindEvents: function () {
|
|
let self = this;
|
|
let closebuttonEl = this.$overlayElementId.find('.mainwp-modal-close');
|
|
if (closebuttonEl.length > 0) {
|
|
$(closebuttonEl).on('click', function () {
|
|
self.close(true);
|
|
});
|
|
}
|
|
|
|
},
|
|
setTitle: function (title) {
|
|
this.$overlayElementId.find('.header').html(title);
|
|
},
|
|
setStatusText: function (label) {
|
|
this.$overlayElementId.find('.mainwp-modal-progress').find('.label').html(label);
|
|
},
|
|
getProgressValue: function () {
|
|
return this.$overlayElementId.find('.mainwp-modal-progress').progress('get value');
|
|
},
|
|
setProgressValue: function (value) {
|
|
this.$overlayElementId.find('.mainwp-modal-progress').progress('set progress', value);
|
|
},
|
|
setProgressSite: function (value) {
|
|
// progress label.
|
|
let lb = value + ' / ' + this.totalSites + ' ' + this.statusText;
|
|
this.setStatusText(lb);
|
|
let pVal = this.getProgressValue();
|
|
pVal += 1;
|
|
this.setProgressValue(pVal);
|
|
},
|
|
appendItemsList: function (left, right) {
|
|
if (this.$overlayElementId == null)
|
|
return;
|
|
|
|
let row = '<div class="item">';
|
|
row += '<div class="right floated content">';
|
|
row += right;
|
|
row += '</div>';
|
|
row += '<div class="content">';
|
|
row += left;
|
|
row += '</div>';
|
|
row += '</div>';
|
|
|
|
this.$overlayElementId.find('#sync-sites-status').append(row);
|
|
},
|
|
clearList: function () {
|
|
this.$overlayElementId.find('#sync-sites-status').empty();
|
|
},
|
|
setActionButtons: function (html) {
|
|
this.$overlayElementId.find('.mainwp-modal-actions').html(html);
|
|
},
|
|
getContentEl: function () {
|
|
return this.$overlayElementId.find('.mainwp-modal-content');
|
|
},
|
|
setElementsZIndex: function (val) {
|
|
this.$overlayElementId.find('.mainwp-popup-wrap').css('z-index', val);
|
|
this.$overlayElementId.find('.mainwp-popup-backdrop').css('z-index', val);
|
|
},
|
|
// close modal with executing callback or not executing callback.
|
|
close: function (execCallback) {
|
|
this.doCloseCallback = typeof execCallback !== 'undefined' && execCallback; // do not do callback.
|
|
this.closePopup();
|
|
},
|
|
closePopup: function () {
|
|
this.$overlayElementId.modal('hide');
|
|
return false;
|
|
}
|
|
};
|
|
return _instancePopup;
|
|
};
|
|
}
|
|
})(jQuery);
|