|
((jsincss, elementQueryAtRule) => { |
|
document.documentElement.appendChild( |
|
document.createElement('style') |
|
).textContent = `body style { |
|
display: block; |
|
width: 100%; |
|
padding: 1em; |
|
margin: 1em 0 2em 0; |
|
border-radius: 3px; |
|
font-size: 12pt; |
|
font-family: monospace; |
|
word-break: break-word; |
|
white-space: pre-wrap; |
|
font-kerning: auto; |
|
color: rgba(0, 0, 0, 0.7); |
|
background: transparent; |
|
border: 1px solid rgba(0, 0, 0, 0.3); |
|
} |
|
* { |
|
box-sizing: border-box; |
|
text-rendering: optimizeLegibility; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
font-kerning: auto; |
|
} |
|
body { |
|
margin: 1em; |
|
font-family: sans-serif; |
|
} |
|
[data-button] { |
|
display: block; |
|
margin: 1em 0; |
|
} |
|
div { |
|
display: inline-block; |
|
border-radius: 0.2em; |
|
padding: 1.5em; |
|
color: #555; |
|
font-size: 12pt; |
|
line-height: 1.4; |
|
background: #eee; |
|
border: 4px solid #ccc; |
|
} |
|
input, |
|
textarea { |
|
display: block; |
|
min-width: 250px; |
|
border-radius: 0.2em; |
|
margin: 1em; |
|
padding: 0.5em; |
|
color: #555; |
|
font-size: 12pt; |
|
background: white; |
|
border: 4px solid #ccc; |
|
} |
|
section { |
|
height: 300px; |
|
display: inline-block; |
|
border: 4px dotted lightskyblue; |
|
padding: 1em; |
|
} |
|
img { |
|
max-width: 50px; |
|
box-shadow: rgba(0, 0, 0, 0.1) 0 0.2em 0.5em; |
|
} |
|
img + img { |
|
margin-left: 1em; |
|
} |
|
p { |
|
font-size: 10pt; |
|
color: #555; |
|
} |
|
[class*='-scroll-x'] { |
|
overflow-x: scroll; |
|
} |
|
[class*='-scroll-x'] p { |
|
width: 200%; |
|
} |
|
[class*='-scroll-y'] { |
|
height: 100px; |
|
overflow-y: scroll; |
|
} |
|
[data-drag] { |
|
overflow: auto; |
|
} |
|
[data-drag='horizontal'] { |
|
resize: horizontal; |
|
} |
|
[data-drag='vertical'] { |
|
resize: vertical; |
|
} |
|
[data-drag='both'] { |
|
resize: both; |
|
} |
|
`; |
|
|
|
jsincss(event => |
|
[ |
|
elementQueryAtRule( |
|
'.minwidth', |
|
{ minWidth: 300 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.maxwidth', |
|
{ maxWidth: 300 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.minheight', |
|
{ minHeight: 200 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.maxheight', |
|
{ maxHeight: 200 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.mincharacters', |
|
{ minCharacters: 35 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.mincharacters-input', |
|
{ minCharacters: 35 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.mincharacters-textarea', |
|
{ minCharacters: 35 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.characters', |
|
{ characters: 5 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.characters-input', |
|
{ characters: 5 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.characters-textarea', |
|
{ characters: 5 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.maxcharacters', |
|
{ maxCharacters: 35 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.maxcharacters-input', |
|
{ maxCharacters: 35 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.maxcharacters-textarea', |
|
{ maxCharacters: 35 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.minchildren', |
|
{ minChildren: 5 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.children', |
|
{ children: 5 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.maxchildren', |
|
{ maxChildren: 5 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.min-scroll-y', |
|
{ minScrollY: 50 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.max-scroll-y', |
|
{ maxScrollY: 50 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.min-scroll-x', |
|
{ minScrollX: 50 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.max-scroll-x', |
|
{ maxScrollX: 50 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.orientation', |
|
{ orientation: 'square' }, |
|
`[--self] { border-color: darkorchid;background: orchid }` |
|
), |
|
elementQueryAtRule( |
|
'.orientation', |
|
{ orientation: 'portrait' }, |
|
`[--self] { border-color: teal;background: darkturquoise }` |
|
), |
|
elementQueryAtRule( |
|
'.orientation', |
|
{ orientation: 'landscape' }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.minaspectratio', |
|
{ minAspectRatio: 1.777 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
elementQueryAtRule( |
|
'.maxaspectratio', |
|
{ maxAspectRatio: 1.777 }, |
|
`[--self] { border-color: limegreen;background: greenyellow }` |
|
), |
|
].join('\n') |
|
); |
|
window.dispatchEvent(new CustomEvent('reprocess')); |
|
})( |
|
function( |
|
stylesheet = event => '', |
|
selector = window, |
|
events = ['load', 'resize', 'input', 'click', 'reprocess'] |
|
) { |
|
function registerEvent(target, event, id, stylesheet) { |
|
return target.addEventListener(event, e => |
|
populateStylesheet(id, stylesheet, e) |
|
); |
|
} |
|
|
|
function populateStylesheet(id, stylesheet, e) { |
|
let tag = document.querySelector(`#jsincss-${id}`); |
|
|
|
if (!tag) { |
|
tag = document.createElement('style'); |
|
tag.id = `jsincss-${id}`; |
|
document.head.appendChild(tag); |
|
} |
|
|
|
const currentStyles = tag.textContent; |
|
const generatedStyles = stylesheet(e); |
|
|
|
if (!currentStyles || generatedStyles !== currentStyles) { |
|
return (tag.textContent = generatedStyles); |
|
} |
|
} |
|
|
|
let id = Date.now() + Math.floor(Math.random() * 100); |
|
|
|
if (selector === window) { |
|
return events.forEach(event => |
|
registerEvent(window, event, id, stylesheet) |
|
); |
|
} else { |
|
return document |
|
.querySelectorAll(selector) |
|
.forEach(tag => |
|
events.forEach(event => registerEvent(tag, event, id, stylesheet)) |
|
); |
|
} |
|
}, |
|
(selector, conditions, stylesheet) => { |
|
const attr = ( |
|
selector + |
|
Object.keys(conditions) + |
|
Object.values(conditions) |
|
).replace(/\W/g, ''); |
|
const features = { |
|
minWidth: (el, number) => number <= el.offsetWidth, |
|
maxWidth: (el, number) => number >= el.offsetWidth, |
|
minHeight: (el, number) => number <= el.offsetHeight, |
|
maxHeight: (el, number) => number >= el.offsetHeight, |
|
minChildren: (el, number) => number <= el.children.length, |
|
children: (el, number) => number === el.children.length, |
|
maxChildren: (el, number) => number >= el.children.length, |
|
minCharacters: (el, number) => |
|
number <= (el.value ? el.value.length : el.textContent.length), |
|
characters: (el, number) => |
|
number === (el.value ? el.value.length : el.textContent.length), |
|
maxCharacters: (el, number) => |
|
number >= (el.value ? el.value.length : el.textContent.length), |
|
minScrollX: (el, number) => number <= el.scrollLeft, |
|
maxScrollX: (el, number) => number >= el.scrollLeft, |
|
minScrollY: (el, number) => number <= el.scrollTop, |
|
maxScrollY: (el, number) => number >= el.scrollTop, |
|
minAspectRatio: (el, number) => |
|
number <= el.offsetWidth / el.offsetHeight, |
|
maxAspectRatio: (el, number) => |
|
number >= el.offsetWidth / el.offsetHeight, |
|
orientation: (el, string) => |
|
({ |
|
portrait: el => el.offsetWidth < el.offsetHeight, |
|
square: el => el.offsetWidth === el.offsetHeight, |
|
landscape: el => el.offsetHeight < el.offsetWidth, |
|
}[string](el)), |
|
}; |
|
const result = Array.from(document.querySelectorAll(selector)).reduce( |
|
(output, tag, count) => { |
|
if ( |
|
Object.entries(conditions).every(test => |
|
features[test[0]](tag, test[1]) |
|
) |
|
) { |
|
output.add.push({ tag: tag, count: count }); |
|
output.styles.push( |
|
stylesheet.replace( |
|
/:self|\$this|\[--self\]/g, |
|
`[data-element-${attr}="${count}"]` |
|
) |
|
); |
|
} else { |
|
output.remove.push(tag); |
|
} |
|
return output; |
|
}, |
|
{ add: [], remove: [], styles: [] } |
|
); |
|
result.add.forEach(tag => |
|
tag.tag.setAttribute(`data-element-${attr}`, tag.count) |
|
); |
|
result.remove.forEach(tag => tag.setAttribute(`data-element-${attr}`, '')); |
|
return result.styles.join('\n'); |
|
} |
|
); |
|
|