in the event |target|
root.addEventListener('keydown', e => !e.altKey && !e.metaKey && e.stopPropagation(), true);
}
function initRules(config) {
const rules = UI.rules;
rules.addEventListener('input', checkRule);
if (!isFF) rules.addEventListener('focusin', focusRule);
if (!isFF) rules.addEventListener('paste', focusRule);
blankRuleElement =
setup.blankRuleElement =
setup.blankRuleElement || rules.firstElementChild.cloneNode();
for (const rule of config.hosts || []) {
const el = blankRuleElement.cloneNode();
el.value = typeof rule === 'string' ? rule : Ruler.format(rule);
rules.appendChild(el);
checkRule({target: el});
}
const search = UI.search;
search.oninput = () => {
setup.search = search.value;
const s = search.value.toLowerCase();
for (const el of rules.children)
el.hidden = s && !el.value.toLowerCase().includes(s);
};
search.value = setup.search || '';
if (search.value)
search.oninput();
}
function renderCustomScales(config) {
UI.scales.value = config.scales.join(' ').trim() || Config.DEFAULTS.scales.join(' ');
}
function renderValues(config) {
for (const el of $$('input[id], select[id], textarea[id]', root))
if (el.id in config)
el[el.type === 'checkbox' ? 'checked' : 'value'] = config[el.id];
for (const el of $$('input[type="range"]', root))
el.oninput();
for (const el of $$('a[href^="http"]', root))
Object.assign(el, {target: '_blank', rel: 'noreferrer noopener external'});
UI.delay.value = config.delay / 1000;
}
}
async function setupRuleInstaller(e) {
dropEvent(e);
const parent = this.parentElement;
parent.children.installLoading.hidden = false;
this.remove();
let rules;
try {
rules = extractRules(await Remoting.getDoc(this.href));
const selector = $create('select', {
size: 8,
style: 'width: 100%',
ondblclick: e => e.target !== selector && maybeSetup(e),
onkeyup: e => e.key === 'Enter' && maybeSetup(e),
});
selector.append(...rules.map(renderRule));
selector.selectedIndex = findMatchingRuleIndex();
// remove "name" since the installed rules don't need it
for (const r of rules)
delete r.name;
parent.children.installLoading.remove();
parent.children.installHint.hidden = false;
parent.appendChild(selector);
requestAnimationFrame(() => {
const optY = selector.selectedOptions[0].offsetTop - selector.offsetTop;
selector.scrollTo(0, optY - selector.offsetHeight / 2);
});
} catch (e) {
parent.textContent = 'Error loading rules: ' + (e.message || e);
}
function extractRules({doc}) {
const code = $('script', doc).textContent;
// sort by name
return JSON.parse(code.match(/var\s+rules\s*=\s*(\[.+]);?[\r\n]/)[1])
.filter(r => !r.d || hostname.includes(r.d))
.sort((a, b) =>
(a = a.name.toLowerCase()) < (b = b.name.toLowerCase()) ? -1 :
a > b ? 1 :
0);
}
function findMatchingRuleIndex() {
const dottedHost = `.${hostname}.`;
const weighParts = (n, part) => n + (dottedHost.includes(`.${part}.`) && part.length);
const weighName = name => name.toLowerCase().split(/[^a-z\d.-]+/i).reduce(weighParts, 0);
return rules.reduce((max, {d, name}, index) => {
const count = !!(d && hostname.includes(d)) * 10 + weighName(name);
return count > max.count ? {count, index} : max;
}, {count: 0, index: 0}).index;
}
function renderRule(r) {
const {name, ...copy} = r;
return $create('option', {
textContent: name,
title: Ruler.format(copy, {expand: true})
.replace(/^{|\s*}$/g, '')
.split('\n')
.slice(0, 12)
.map(renderTitleLine)
.filter(Boolean)
.join('\n'),
});
}
function renderTitleLine(line, i, arr) {
return (
// show ... on 10th line if there are more lines
i === 9 && arr.length > 10 ? '...' :
i > 10 ? '' :
// truncate to 100 chars
(line.length > 100 ? line.slice(0, 100) + '...' : line)
// strip the leading space
.replace(/^\s/, ''));
}
function maybeSetup(e) {
if (!modKeyPressed(e))
setup({rule: rules[e.currentTarget.selectedIndex]});
}
}
function createConfigHtml() {
const MPIV_BASE_URL = 'https://w9p.co/userscripts/mpiv/';
const scalesHint = 'Leave it empty and click Apply or Save to restore the default values.';
const trimLeft = s => s.trim().replace(/\n\s+/g, '\r');
return flattenHtml(`
${GM_info.script.name}
x
Copied to clipboard.
`);
}
function createGlobalStyle() {
App.globalStyle = /*language=CSS*/ (String.raw`
#\mpiv-bar {
position: fixed;
z-index: 2147483647;
top: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity 1s ease .25s;
text-align: center;
font-family: sans-serif;
font-size: 15px;
font-weight: bold;
background: #0005;
color: white;
padding: 4px 10px;
text-shadow: .5px .5px 2px #000;
}
#\mpiv-bar.\mpiv-show {
opacity: 1;
}
#\mpiv-bar[data-zoom]::after {
content: " (" attr(data-zoom) ")";
opacity: .8;
}
#\mpiv-popup.\mpiv-show {
display: inline;
}
#\mpiv-popup {
display: none;
cursor: none;
animation: .2s \mpiv-fadein both;
transition: box-shadow .25s, background-color .25s;
${App.popupStyleBase = `
border: none;
box-sizing: border-box;
position: fixed;
z-index: 2147483647;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: auto;
height: auto;
transform-origin: top left;
max-width: none;
max-height: none;
`}
}
#\mpiv-popup.\mpiv-show {
${cfg.uiBorder ? `border: ${cfg.uiBorder}px solid ${Util.color('Border')};` : ''}
${cfg.uiPadding ? `padding: ${cfg.uiPadding}px;` : ''}
${cfg.uiMargin ? `margin: ${cfg.uiMargin}px;` : ''}
box-shadow: ${cfg.uiShadow ? `2px 4px ${cfg.uiShadow}px 4px transparent` : 'none'};
}
#\mpiv-popup.\mpiv-show[loaded] {
background-color: ${Util.color('Background')};
${cfg.uiShadow ? `box-shadow: 2px 4px ${cfg.uiShadow}px 4px ${Util.color('Shadow')};` : ''}
}
#\mpiv-popup.\mpiv-zoom-max {
image-rendering: pixelated;
}
@keyframes \mpiv-fadein {
from {
opacity: 0;
border-color: transparent;
}
to {
opacity: 1;
}
}
` + (cfg.globalStatus ? String.raw`
.\mpiv-loading:not(.\mpiv-preloading) * {
cursor: progress !important;
}
.\mpiv-edge #\mpiv-popup {
cursor: default;
}
.\mpiv-error * {
cursor: not-allowed !important;
}
.\mpiv-ready *, .\mpiv-large * {
cursor: zoom-in !important;
}
.\mpiv-shift * {
cursor: default !important;
}
` : String.raw`
[\mpiv-status~="loading"]:not([\mpiv-status~="preloading"]) {
cursor: progress !important;
}
#\mpiv-popup[\mpiv-status~="edge"] {
cursor: default !important;
}
[\mpiv-status~="error"] {
cursor: not-allowed !important;
}
[\mpiv-status~="ready"],
[\mpiv-status~="large"] {
cursor: zoom-in !important;
}
[\mpiv-status~="shift"] {
cursor: default !important;
}
`)).replace(/\\mpiv-status/g, STATUS_ATTR).replace(/\\mpiv-/g, PREFIX);
App.popupStyleBase = App.popupStyleBase.replace(/;/g, '!important;');
return App.globalStyle;
}
//#region Global utilities
const clamp = (v, min, max) => v < min ? min : v > max ? max : v;
const compareNumbers = (a, b) => a - b;
const flattenHtml = str => str.trim().replace(/\n\s*/g, '').replace(/\x20?([:>])\x20/g, '$1');
const dropEvent = e => (e.preventDefault(), e.stopPropagation());
const ensureArray = v => Array.isArray(v) ? v : [v];
const modKeyPressed = e => e.altKey || e.shiftKey || e.ctrlKey || e.metaKey;
const now = () => performance.now();
const sumProps = (...props) => props.reduce((sum, v) => sum + (parseFloat(v) || 0), 0);
const tryCatch = function (fn, ...args) {
try {
return fn.apply(this, args);
} catch (e) {}
};
const $ = (sel, node = doc) => node.querySelector(sel) || false;
const $$ = (sel, node = doc) => node.querySelectorAll(sel);
const $create = (tag, props) => Object.assign(document.createElement(tag), props);
const $css = (el, props) => Object.entries(props).forEach(([k, v]) =>
el.style.setProperty(k, v, 'important'));
const $many = (q, doc) => q && ensureArray(q).reduce((el, sel) => el || $(sel, doc), null);
const $prop = (sel, prop, node = doc) => (node = $(sel, node)) && node[prop] || '';
const $propUp = (node, prop) => (node = node.closest(`[${prop}]`)) &&
(prop.startsWith('data-') ? node.getAttribute(prop) : node[prop]) || '';
const $remove = node => node && node.remove();
const isFF = CSS.supports('-moz-appearance', 'none');
//#endregion
//#region Init
cfg = new Config({save: true});
App.enabled = true;
(cb => doc.body ? cb() : document.addEventListener('DOMContentLoaded', cb, {once: true}))(() => {
const el = doc.body.firstElementChild;
App.isImageTab = el && el === doc.body.lastElementChild && el.matches('img, video');
App.enabled = cfg.imgtab || !App.isImageTab;
});
GM_registerMenuCommand('MPIV: configure', setup);
doc.addEventListener('mouseover', Events.onMouseOver, {passive: true});
if (['greasyfork.org', 'w9p.co', 'github.com'].includes(hostname)) {
doc.addEventListener('click', e => {
const el = e.target.closest('blockquote, code, pre');
const text = el && el.textContent.trim() || '';
let rule;
if (!e.button && !modKeyPressed(e) &&
text.startsWith('{') && text.endsWith('}') &&
/[{,]\s*"[degqrsu]"\s*:\s*"/.test(text) &&
(rule = tryCatch(JSON.parse, text)) &&
Object.keys(rule).some(k => /^[degqrsu]$/.test(k))) {
setup({rule});
dropEvent(e);
}
});
}
window.addEventListener('message', App.onMessage);
//#endregion