280 lines
7.9 KiB
JavaScript
280 lines
7.9 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
var ShortPixelToolTip = function(reserved, processor)
|
||
|
|
{
|
||
|
|
this.strings = '';
|
||
|
|
|
||
|
|
this.Init = function()
|
||
|
|
{
|
||
|
|
|
||
|
|
var paused = localStorage.getItem('tooltipPause'); // string returns, not boolean
|
||
|
|
if (paused == 'true')
|
||
|
|
{
|
||
|
|
console.log('manual paused (tooltip)');
|
||
|
|
processor.PauseProcess();
|
||
|
|
}
|
||
|
|
var control = document.querySelector('.ab-item .controls');
|
||
|
|
if (control)
|
||
|
|
control.addEventListener('click', this.ToggleProcessing.bind(this));
|
||
|
|
|
||
|
|
this.ToggleIcon();
|
||
|
|
|
||
|
|
if (processor.isManualPaused == true)
|
||
|
|
{
|
||
|
|
this.ProcessPause();
|
||
|
|
}
|
||
|
|
|
||
|
|
this.strings = spio_tooltipStrings;
|
||
|
|
|
||
|
|
window.addEventListener('shortpixel.processor.paused', this.ProcessChange.bind(this));
|
||
|
|
}
|
||
|
|
this.GetToolTip = function() // internal function please.
|
||
|
|
{
|
||
|
|
var element = document.querySelector('li.shortpixel-toolbar-processing');
|
||
|
|
if (element === null)
|
||
|
|
{
|
||
|
|
console.error('Tooltip could not be found!');
|
||
|
|
}
|
||
|
|
return element;
|
||
|
|
}
|
||
|
|
this.InitStats = function()
|
||
|
|
{
|
||
|
|
var processData = ShortPixelProcessorData.startData;
|
||
|
|
if (typeof processData !== 'object')
|
||
|
|
{
|
||
|
|
console.error('Tooltip: No start Data found.');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
this.RefreshStats(processData.media.stats, 'media');
|
||
|
|
this.RefreshStats(processData.custom.stats, 'custom');
|
||
|
|
this.RefreshStats(processData.total.stats, 'total');
|
||
|
|
|
||
|
|
// Hide Tooltip is manual paused is true, but there is also nothing to do.
|
||
|
|
if (processor.isManualPaused == true && processData.total.stats.total <= 0)
|
||
|
|
{
|
||
|
|
this.ProcessEnd();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Used to put a 'todo' number in the tooltip when processing
|
||
|
|
this.RefreshStats = function(stats, type)
|
||
|
|
{
|
||
|
|
var neededType;
|
||
|
|
|
||
|
|
if (processor.screen.isMedia == true && processor.screen.isCustom == true)
|
||
|
|
neededType = 'total';
|
||
|
|
else if (processor.screen.isMedia == true && processor.screen.isCustom == false)
|
||
|
|
neededType = 'media';
|
||
|
|
else if (processor.screen.isMedia == false && processor.screen.isCustom == true)
|
||
|
|
neededType = 'custom';
|
||
|
|
|
||
|
|
if (neededType !== type)
|
||
|
|
return;
|
||
|
|
|
||
|
|
var toolTip = this.GetToolTip();
|
||
|
|
if (toolTip === null)
|
||
|
|
return false;
|
||
|
|
|
||
|
|
var statTip = toolTip.querySelector('.stats');
|
||
|
|
|
||
|
|
if (statTip == null)
|
||
|
|
return;
|
||
|
|
|
||
|
|
var inqueue = stats.in_queue;
|
||
|
|
var inprocess = stats.in_process;
|
||
|
|
|
||
|
|
// @todo This needs fixing.
|
||
|
|
var pattern = new RegExp("\\.|\\,", '');
|
||
|
|
|
||
|
|
if (typeof inqueue === 'string' && inqueue)
|
||
|
|
inqueue = inqueue.replace(pattern,''); // remove number formats
|
||
|
|
if (typeof inprocess === 'string' && inprocess)
|
||
|
|
inprocess = inprocess.replace(pattern,''); // remove number formats
|
||
|
|
|
||
|
|
var number = parseInt(inqueue) + parseInt(inprocess);
|
||
|
|
statTip.textContent = this.FormatNumber(number);
|
||
|
|
|
||
|
|
// Updating the titles.
|
||
|
|
|
||
|
|
var itemTitle = statTip.textContent + ' ';
|
||
|
|
itemTitle += (number == 1) ? this.strings.item : this.strings.items;
|
||
|
|
|
||
|
|
if (toolTip.querySelector('#short-pixel-notice-toolbar') !== null)
|
||
|
|
{
|
||
|
|
toolTip.querySelector('#short-pixel-notice-toolbar').title = this.strings.processing + ' ' + itemTitle;
|
||
|
|
}
|
||
|
|
if (toolTip.querySelector('.dashicons.pause') !== null)
|
||
|
|
{
|
||
|
|
toolTip.querySelector('.dashicons.pause').title = itemTitle + '\n\n' + this.strings.pause;
|
||
|
|
}
|
||
|
|
if (toolTip.querySelector('.dashicons.play') !== null)
|
||
|
|
{
|
||
|
|
toolTip.querySelector('.dashicons.play').title = itemTitle + '\n\n' + this.strings.resume;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (statTip.classList.contains('hidden') && number > 0)
|
||
|
|
statTip.classList.remove('hidden');
|
||
|
|
else if (! statTip.classList.contains('hidden') && number == 0)
|
||
|
|
statTip.classList.add('hidden');
|
||
|
|
}
|
||
|
|
|
||
|
|
this.FormatNumber = function(num)
|
||
|
|
{
|
||
|
|
var digits = 1;
|
||
|
|
var si = [
|
||
|
|
{ value: 1E18, symbol: "E" },
|
||
|
|
{ value: 1E15, symbol: "P" },
|
||
|
|
{ value: 1E12, symbol: "T" },
|
||
|
|
{ value: 1E9, symbol: "G" },
|
||
|
|
{ value: 1E6, symbol: "M" },
|
||
|
|
{ value: 1E3, symbol: "k" }
|
||
|
|
], i;
|
||
|
|
for (i = 0; i < si.length; i++) {
|
||
|
|
if (num >= si[i].value) {
|
||
|
|
return (num / si[i].value).toFixed(digits).replace(/\.?0+$/, "") + si[i].symbol;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return num;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.ToggleProcessing = function(event)
|
||
|
|
{
|
||
|
|
event.preventDefault();
|
||
|
|
//event.stopProp
|
||
|
|
|
||
|
|
if (processor.isManualPaused == false)
|
||
|
|
{
|
||
|
|
processor.PauseProcess();
|
||
|
|
localStorage.setItem('tooltipPause','true');
|
||
|
|
this.ProcessPause();
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
processor.ResumeProcess();
|
||
|
|
localStorage.setItem('tooltipPause','false');
|
||
|
|
this.ProcessResume();
|
||
|
|
}
|
||
|
|
|
||
|
|
processor.CheckActive();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
this.ToggleIcon = function()
|
||
|
|
{
|
||
|
|
var controls = document.querySelectorAll('.ab-item .controls > span');
|
||
|
|
|
||
|
|
for(var i = 0; i < controls.length; i++)
|
||
|
|
{
|
||
|
|
var control = controls[i];
|
||
|
|
if (control.classList.contains('pause'))
|
||
|
|
{
|
||
|
|
if (processor.isManualPaused == true)
|
||
|
|
control.classList.add('hidden');
|
||
|
|
else
|
||
|
|
control.classList.remove('hidden');
|
||
|
|
}
|
||
|
|
else if (control.classList.contains('play'))
|
||
|
|
{
|
||
|
|
if (processor.isManualPaused == false)
|
||
|
|
control.classList.add('hidden');
|
||
|
|
else
|
||
|
|
control.classList.remove('hidden');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.DoingProcess = function()
|
||
|
|
{
|
||
|
|
var tooltip = this.GetToolTip();
|
||
|
|
if (tooltip === null)
|
||
|
|
return false;
|
||
|
|
tooltip.classList.remove('shortpixel-hide');
|
||
|
|
tooltip.classList.add('shortpixel-processing');
|
||
|
|
}
|
||
|
|
|
||
|
|
this.AddNotice = function(message)
|
||
|
|
{
|
||
|
|
var tooltip = this.GetToolTip(); // li.shortpixel-toolbar-processing
|
||
|
|
if (tooltip === null)
|
||
|
|
return false;
|
||
|
|
var toolcontent = tooltip.querySelector('.toolbar-notice-wrapper');
|
||
|
|
|
||
|
|
if (toolcontent == null)
|
||
|
|
{
|
||
|
|
var abItem = tooltip.querySelector('.ab-item');
|
||
|
|
var wrapper = document.createElement('div');
|
||
|
|
wrapper.className = 'toolbar-notice-wrapper';
|
||
|
|
abItem.parentNode.insertBefore(wrapper, abItem.nextSibling);
|
||
|
|
var toolcontent = tooltip.querySelector('.toolbar-notice-wrapper');
|
||
|
|
}
|
||
|
|
|
||
|
|
var id = message.replace(/[^a-zA-Z ]/g, "").replace(/ /g, "").slice(0,20);
|
||
|
|
|
||
|
|
var alert = document.createElement('div');
|
||
|
|
alert.dataset.msgid = id;
|
||
|
|
alert.className = 'toolbar-notice toolbar-notice-error';
|
||
|
|
alert.innerHTML = message;
|
||
|
|
|
||
|
|
// Prevent double notices with same message
|
||
|
|
if (toolcontent.querySelector('[data-msgid="' + id + '"]') == null)
|
||
|
|
{
|
||
|
|
var alertChild = toolcontent.appendChild(alert);
|
||
|
|
window.setTimeout (this.RemoveNotice.bind(this), 5000, alertChild);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
this.RemoveNotice = function(notice)
|
||
|
|
{
|
||
|
|
notice.style.opacity = 0;
|
||
|
|
window.setTimeout(function () { notice.remove() }, 2000);
|
||
|
|
|
||
|
|
}
|
||
|
|
this.ProcessResume = function()
|
||
|
|
{
|
||
|
|
var tooltip = this.GetToolTip();
|
||
|
|
if (tooltip === null)
|
||
|
|
return false;
|
||
|
|
tooltip.classList.remove('shortpixel-paused');
|
||
|
|
tooltip.classList.add('shortpixel-processing');
|
||
|
|
this.ToggleIcon();
|
||
|
|
|
||
|
|
}
|
||
|
|
this.ProcessEnd = function()
|
||
|
|
{
|
||
|
|
var tooltip = this.GetToolTip();
|
||
|
|
if (tooltip === null)
|
||
|
|
{
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
tooltip.classList.add('shortpixel-hide');
|
||
|
|
tooltip.classList.remove('shortpixel-processing');
|
||
|
|
}
|
||
|
|
this.ProcessPause = function()
|
||
|
|
{
|
||
|
|
var tooltip = this.GetToolTip();
|
||
|
|
if (tooltip === null)
|
||
|
|
return false;
|
||
|
|
|
||
|
|
tooltip.classList.add('shortpixel-paused');
|
||
|
|
tooltip.classList.remove('shortpixel-processing');
|
||
|
|
tooltip.classList.remove('shortpixel-hide');
|
||
|
|
this.ToggleIcon();
|
||
|
|
|
||
|
|
}
|
||
|
|
this.ProcessChange = function(e)
|
||
|
|
{
|
||
|
|
var detail = e.detail;
|
||
|
|
|
||
|
|
if (detail.paused == false)
|
||
|
|
this.ProcessResume();
|
||
|
|
else
|
||
|
|
this.ProcessPause();
|
||
|
|
}
|
||
|
|
this.HandleError = function()
|
||
|
|
{
|
||
|
|
console.trace('tooltip error');
|
||
|
|
}
|
||
|
|
|
||
|
|
this.Init();
|
||
|
|
} // tooltip.
|