| 1 |
|
| 2 |
(function ($) { |
| 3 |
if (!globalThis.mainwpPopup) { |
| 4 |
globalThis.mainwpPopup = function (selector) { |
| 5 |
let popup = mainwpListPopups.getItem(selector); |
| 6 |
if (popup === null) { |
| 7 |
popup = new Mainwp_InstancePopup(); |
| 8 |
popup.initWrapper(selector); |
| 9 |
popup.initElements(); |
| 10 |
mainwpListPopups.pushItem(popup); |
| 11 |
} |
| 12 |
return popup; |
| 13 |
}; |
| 14 |
let mainwpListPopups = { |
| 15 |
popupsQueue: [], |
| 16 |
pushItem: function (popup) { |
| 17 |
if ('object' !== typeof popup) |
| 18 |
return false; |
| 19 |
if (null === this.getItem(popup.overlayId)) { |
| 20 |
this.popupsQueue.push(popup); |
| 21 |
return popup; |
| 22 |
} |
| 23 |
return false; |
| 24 |
}, |
| 25 |
getItem: function (id) { |
| 26 |
let values = $.grep(this.popupsQueue, function (val) { |
| 27 |
return val.overlayId == id; |
| 28 |
}); |
| 29 |
let val = null; |
| 30 |
if (values.length > 0) |
| 31 |
val = values[0]; |
| 32 |
return val; |
| 33 |
} |
| 34 |
}; |
| 35 |
let Mainwp_InstancePopup = function () { |
| 36 |
let _instancePopup = { |
| 37 |
overlayId: null, |
| 38 |
$overlayElementId: null, |
| 39 |
actionsCloseCallback: null, |
| 40 |
title: '', |
| 41 |
totalSites: 0, |
| 42 |
progressMax: 0, // length of process bar. |
| 43 |
progressInit: 0, // init value of process bar. |
| 44 |
hideProgress: false, |
| 45 |
statusText: '', |
| 46 |
contentMsg: '', |
| 47 |
initVisibleContentMsg: false, |
| 48 |
clearListItems: false, |
| 49 |
hideStatusText: false, |
| 50 |
doCloseCallback: null, |
| 51 |
init: function (data) { |
| 52 |
data = data || {}; |
| 53 |
// convert property. |
| 54 |
if (data.callback) { |
| 55 |
this.actionsCloseCallback = data.callback; |
| 56 |
delete data.callback; |
| 57 |
} |
| 58 |
// default init values. |
| 59 |
let defaultVal = { |
| 60 |
totalSites: 0, |
| 61 |
progressMax: 0, |
| 62 |
progressInit: 0, |
| 63 |
statusText: 'synced', |
| 64 |
initVisibleContentMsg: false, |
| 65 |
hideProgress: false, |
| 66 |
clearListItems: false |
| 67 |
}; |
| 68 |
this.doCloseCallback = true; // default is yes. |
| 69 |
$.extend(this, defaultVal, data); |
| 70 |
if (0 == this.totalSites) { |
| 71 |
this.totalSites = this.progressMax; |
| 72 |
} |
| 73 |
this.initProgress(); |
| 74 |
this.render(); |
| 75 |
this.bindEvents(); |
| 76 |
|
| 77 |
if (this.clearListItems) { |
| 78 |
this.clearList(); |
| 79 |
} |
| 80 |
|
| 81 |
}, |
| 82 |
initWrapper: function (el) { // may be call this very first to set custom wrapper. |
| 83 |
this.overlayId = el; |
| 84 |
this.$overlayElementId = $(this.overlayId); |
| 85 |
}, |
| 86 |
initProgress: function () { |
| 87 |
let pData = { |
| 88 |
value: this.progressInit, |
| 89 |
total: this.progressMax, |
| 90 |
}; |
| 91 |
|
| 92 |
if (typeof pMax !== 'undefined') { |
| 93 |
pData.total = pMax; |
| 94 |
} |
| 95 |
|
| 96 |
if (!this.hideStatusText) { |
| 97 |
this.setStatusText('0 / ' + this.totalSites + ' ' + this.statusText); |
| 98 |
} |
| 99 |
this.$progress = this.$overlayElementId.find('.mainwp-modal-progress'); |
| 100 |
this.$progress.progress(pData); |
| 101 |
}, |
| 102 |
initElements: function () { |
| 103 |
if (!this.$overlayElementId) return; |
| 104 |
|
| 105 |
this.$header = this.$overlayElementId.find('.header'); |
| 106 |
this.$progress = this.$overlayElementId.find('.mainwp-modal-progress'); |
| 107 |
this.$label = this.$progress.find('.label'); |
| 108 |
this.$contentMsg = this.$overlayElementId.find('.sync-sites-content-massage'); |
| 109 |
this.$list = this.$overlayElementId.find('#sync-sites-status'); |
| 110 |
this.$actions = this.$overlayElementId.find('.mainwp-modal-actions'); |
| 111 |
this.$content = this.$overlayElementId.find('.mainwp-modal-content'); |
| 112 |
this.$wrap = this.$overlayElementId.find('.mainwp-popup-wrap'); |
| 113 |
this.$backdrop = this.$overlayElementId.find('.mainwp-popup-backdrop'); |
| 114 |
this.$closeBtn = this.$overlayElementId.find('.mainwp-modal-close'); |
| 115 |
}, |
| 116 |
render: function () { |
| 117 |
if (!this.$overlayElementId) return; |
| 118 |
|
| 119 |
this.initProgressBatch(); |
| 120 |
|
| 121 |
if (this.title) { |
| 122 |
this.$header.html(this.title); |
| 123 |
} |
| 124 |
|
| 125 |
if (this.hideProgress) { |
| 126 |
this.$progress.hide(); |
| 127 |
} else { |
| 128 |
this.$progress.show(); |
| 129 |
} |
| 130 |
|
| 131 |
if (this.initVisibleContentMsg && this.contentMsg) { |
| 132 |
this.$contentMsg.html(this.contentMsg).show(); |
| 133 |
} else { |
| 134 |
this.contentMsg = ''; // clear caching msg. |
| 135 |
this.$contentMsg.html('').hide(); |
| 136 |
} |
| 137 |
|
| 138 |
this.$overlayElementId |
| 139 |
.modal({ |
| 140 |
onHide: () => this.onHideModal(), |
| 141 |
allowMultiple: this.allowMultiple ?? false, |
| 142 |
closable: false |
| 143 |
}) |
| 144 |
.modal('show') |
| 145 |
.modal('set active'); // keep if still needed for your UI bug |
| 146 |
}, |
| 147 |
bindEvents: function () { |
| 148 |
if (this.$closeBtn?.length) { |
| 149 |
this.$closeBtn.off('click.mainwp').on('click.mainwp', () => this.close(true)); |
| 150 |
} |
| 151 |
}, |
| 152 |
setTitle: function (title) { |
| 153 |
this.$header?.html(title); |
| 154 |
}, |
| 155 |
setStatusText: function (label) { |
| 156 |
this.$label?.html(label); |
| 157 |
}, |
| 158 |
clearList: function () { |
| 159 |
this.$list?.empty(); |
| 160 |
}, |
| 161 |
setActionButtons: function (html) { |
| 162 |
this.$actions?.html(html); |
| 163 |
}, |
| 164 |
getContentEl: function () { |
| 165 |
return this.$content; |
| 166 |
}, |
| 167 |
setElementsZIndex: function (val) { |
| 168 |
this.$wrap?.css('z-index', val); |
| 169 |
this.$backdrop?.css('z-index', val); |
| 170 |
}, |
| 171 |
onHideModal: function () { |
| 172 |
if (this.doCloseCallback) { |
| 173 |
// do call back when clicking on close button or clicking on dimmer. |
| 174 |
typeof this.actionsCloseCallback === 'function' && this.actionsCloseCallback(); |
| 175 |
} |
| 176 |
}, |
| 177 |
showProgress: function () { |
| 178 |
this.$progress.show(); |
| 179 |
}, |
| 180 |
getContentMsgEl: function () { |
| 181 |
return this.$contentMsg; |
| 182 |
}, |
| 183 |
initProgressBatch: function () { |
| 184 |
this._pendingCount = 0; |
| 185 |
this._lastValue = 0; |
| 186 |
this._flushTimer = null; |
| 187 |
}, |
| 188 |
updateStatusLabel: function (text) { |
| 189 |
this.statusText = text; |
| 190 |
this.setStatusText( |
| 191 |
`${this._lastValue} / ${this.totalSites} ${this.statusText}` |
| 192 |
); |
| 193 |
}, |
| 194 |
setProgressSite: function (value) { |
| 195 |
if (!this.$progress) return; |
| 196 |
|
| 197 |
this._pendingCount = (this._pendingCount || 0) + 1; |
| 198 |
this._lastValue = value; |
| 199 |
|
| 200 |
if (this._rafScheduled) return; |
| 201 |
|
| 202 |
this._rafScheduled = true; |
| 203 |
|
| 204 |
requestAnimationFrame(() => { |
| 205 |
this.flushProgress(); |
| 206 |
this._rafScheduled = false; |
| 207 |
}); |
| 208 |
}, |
| 209 |
flushProgress: function () { |
| 210 |
if (!this.$progress) return; |
| 211 |
|
| 212 |
// update label once |
| 213 |
this.setStatusText( |
| 214 |
`${this._lastValue} / ${this.totalSites} ${this.statusText}` |
| 215 |
); |
| 216 |
|
| 217 |
// batch increment |
| 218 |
const current = this.$progress.progress('get value') || 0; |
| 219 |
this.$progress.progress('set progress', current + this._pendingCount); |
| 220 |
|
| 221 |
// reset |
| 222 |
this._pendingCount = 0; |
| 223 |
this._flushTimer = null; |
| 224 |
}, |
| 225 |
getProgressValue: function () { |
| 226 |
return this.$progress |
| 227 |
? this.$progress.progress('get value') |
| 228 |
: 0; |
| 229 |
}, |
| 230 |
setProgressValue: function (value) { |
| 231 |
if (this.$progress) { |
| 232 |
this.$progress.progress('set progress', value); |
| 233 |
} |
| 234 |
}, |
| 235 |
appendItemsList: function (left, right, { allowHtml = true } = {}) { |
| 236 |
if (!this.$overlayElementId) return; |
| 237 |
|
| 238 |
const $list = this.$list || ( |
| 239 |
this.$list = this.$overlayElementId.find('#sync-sites-status') |
| 240 |
); |
| 241 |
|
| 242 |
const $row = $('<div>', { class: 'item' }); |
| 243 |
|
| 244 |
const $right = $('<div>', { class: 'right floated content' }); |
| 245 |
const $left = $('<div>', { class: 'content' }); |
| 246 |
|
| 247 |
if (allowHtml) { |
| 248 |
$right.html(right); |
| 249 |
$left.html(left); |
| 250 |
} else { |
| 251 |
$right.text(right); |
| 252 |
$left.text(left); |
| 253 |
} |
| 254 |
|
| 255 |
$row.append($right, $left); |
| 256 |
$list.append($row); |
| 257 |
}, |
| 258 |
// close modal with executing callback or not executing callback. |
| 259 |
close: function (execCallback) { |
| 260 |
this.doCloseCallback = execCallback !== undefined && execCallback; // do not do callback. |
| 261 |
this.closePopup(); |
| 262 |
}, |
| 263 |
closePopup: function () { |
| 264 |
this.$overlayElementId.modal('hide'); |
| 265 |
return false; |
| 266 |
} |
| 267 |
}; |
| 268 |
return _instancePopup; |
| 269 |
}; |
| 270 |
} |
| 271 |
})(jQuery); |
| 272 |
|
