Css Parser 2
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"/> <script src="http://topia.wikidot.com/css-parser/code/1"></script> <script src="http://topia.wikidot.com/csssss/code/3"></script> <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js" defer></script> <highlight-setup></highlight-setup> <style>@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');body {margin: 0;-ms-overflow-style: none;scrollbar-width: none;}body::-webkit-scrollbar {display: none;}body * {font-family: 'IBM Plex Mono',monospace;} .wrap {padding: .5em;} .wrap highlight-area {margin: 0;}.pcr-app div.pcr-interaction {display: block;}.pcr-app div.pcr-swatches {display: flex;grid-template-columns: unset;}.pcr-app div.pcr-interaction .pcr-result {display: block;width: 100%;margin: .75em 0 0;}highlight-area textarea:focus + pre code .cursor_before:not(.hljs-attribute), highlight-area textarea:focus + pre code .cursor_after:not(.hljs-attribute) {text-decoration: none;}highlight-area .hljs-comment {color: #8c98af;}.css-parser {padding: .25em;position: relative;}#prop {background: #fff;box-shadow: 1px 1px 3px #aaa;font-family: 'IBM Plex Mono',monospace;font-style: italic;padding: .25em .5em;position: absolute;right: .25em;top: 0;transition: all .25s, height 0s, width 0s;width: 160px;z-index: 2;}#prop.hidden {background: rgba(255,255,255,0);border-radius: 50%;box-shadow: none;width: 3em;height: 3em;overflow: hidden;padding: 0;pointer-events: none;}#prop * {transition: all .25s, letter-spacing 0s;}#prop.hidden * {opacity: 0;}#prop h3 {font-weight: normal;overflow: hidden;text-overflow: ellipsis;margin: 0 0 .5em;white-space: nowrap;width: 100%;}#prop:not(.hidden) h3 {animation: let .5s forwards;}@keyframes let {0%{opacity: 0; letter-spacing: 1em;}100% {opacity: 1; letter-spacing: 0;}}#prop ul {list-style: none;margin: 0;padding: 0 0 .5em 1.5em;}#prop ul li .fa-times-circle:before {color: red}#prop ul li .fa-check-circle:before {color: lightgreen}#prop ul li {display: block;padding: .25em 0;}#prop ul li.n {color: #ccc;}#prop ul li .fa:before {padding: 0 .35em;}ul.box {background: #fff;box-shadow: 1px 1px 3px #aaa;cursor: move; display: inline-block; font-family: 'IBM Plex Mono',monospace; list-style: none;padding: .5em;transition: .25s;}ul.box:before {content: attr(data-sel);display: block;font-style: italic;font-size: 120%;text-align: center;}ul.box > li:nth-child(odd) i {font-size: .75em;}ul.box > li:nth-child(even) {border-left: 7px #901 solid;padding: 0 0 0.5em 0.5em;}#drag {padding: .5em; z-index: 3;}#drag > div {width: 4em; height: 4em; background: #fff; box-shadow: 1px 1px 3px #aaa;pointer-events: none;}#drag ul.avoid {opacity: 0; oveflow: hidden; width: 0; height: 0;}</style> <script nomodule type="text/javascript"> alert("Do not use IE, the evil browser."); </script> <script type="module"> import * as _hl from "../highlight-area/1"; window.onerror = (e) => {window._err = e;} var clr = "rgba(187, 0, 17, 1)"; var btn = document.querySelector("button"); var txt = document.querySelector("#_css textarea"); var box = document.querySelectorAll(".box"); var prop = document.querySelector("#prop"); var drag = document.querySelector("#drag"); var isPC = (()=>{ var agent = navigator.userAgent.toLowerCase(); var touchPoints = ('maxTouchPoints' in navigator) ? navigator.maxTouchPoints : 0; var info = { windows: agent.includes('windows'), mac: agent.includes('macintosh'), touchPoints: touchPoints } return (info.windows || info.mac || info.touchPoints === 0) ? true : false; })(); var update = (id, deco=(r=>r)) => { var a = document.getElementById(id); var t = a.querySelector("textarea"); t.value = deco(t.value); window.dispatchEvent(new Event('hl-all-resize')); } window.addEventListener('hljs-onloaded', (e) => { _hl.init(hljs.highlightBlock, { '_css': '/*\n click "import", drag and drop, or write here directly\n*/' }); _hl.container["_css"].onChange = (e) => { if(e.class=="hljs-attribute") { prop.classList.remove("hidden"); var o = css_prop_base[e.text] || {c:0,f:0,e:0,i:0,a:0}; var r = ""; for(var k in o) { r += `<li class="${o[k] ? "y" : "n"}"><i class="fa ${o[k] ? "fa-check-circle" : "fa-times-circle"}"></i>${({"c": "Chrome", "f": "Firefox", "e": "Edge", "i": "iOS", "a": "Android"}[k])}</li>`; } prop.innerHTML = `<h3><i>${e.text}</i></h3><ul>${r}</ul>`; }else { prop.innerHTML = ""; prop.classList.add("hidden"); } var a = document.querySelector('#_css .cursor'); a.style.display = "inline"; var n = a.getBoundingClientRect().y - a.getBoundingClientRect().height; var n_1 = prop.getBoundingClientRect().height; var n_2 = txt.getBoundingClientRect().height; prop.style.top = ((n+n_1)>n_2 ? (n_2-n_1) : n)+ "px"; a.style.display = "none"; } txt.onblur = () => prop.classList.add("hidden"); var u_css = () => { var css = new _CSS(txt.value); update("_css", ()=>css.string()); } btn.onclick = () => { u_css(); } txt.addEventListener("dragover", (e)=>{ e.preventDefault(); try {e.dataTransfer.dropEffect = "move";}catch(e) {} }); txt.addEventListener("drop", (e)=>{ e.preventDefault(); var data = e.dataTransfer.getData("text/plain"); if(data!=="") { txt.value += data; u_css(); u_css(); } }); for(var b of box) { if(isPC) { b.addEventListener("dragstart", (e)=>{ var fill = {}; var P = e.target; var sel = P.getAttribute("data-sel"); fill[sel] = []; for(var i of P.querySelectorAll("input")) { if(i.value!=="") { var v = i.getAttribute("data-prop") + ": " + i.value + ";"; if(i.getAttribute("data-other")) { fill[i.getAttribute("data-other")] = fill[i.getAttribute("data-other")] || []; fill[i.getAttribute("data-other")].push(v); }else { fill[sel].push(v); } } } var res = ""; for(var k in fill) { if(fill[k].length) res+= k + "{" + fill[k].join("") + "}"; } e.dataTransfer.setData("text/plain", res); }); try {e.dataTransfer.dropEffect = "move";}catch(e) {} } var l = document.createElement("li"); var _ = document.createElement("button"); b.appendChild(l); l.appendChild(_); _.innerHTML = "import"; _.onclick = (e) => { var P = e.target.parentElement.parentElement; var fill = {}; var sel = P.getAttribute("data-sel"); fill[sel] = []; for(var i of P.querySelectorAll("input")) { if(i.value!=="") { var v = i.getAttribute("data-prop") + ": " + i.value + ";"; if(i.getAttribute("data-other")) { fill[i.getAttribute("data-other")] = fill[i.getAttribute("data-other")] || []; fill[i.getAttribute("data-other")].push(v); }else { fill[sel].push(v); } } } var res = ""; for(var k in fill) { if(fill[k].length) res+= k + "{" + fill[k].join("") + "}"; } if(res!=="") { txt.value += res; u_css(); u_css(); } } } }); var pickr = Pickr.create({ el: '.color-picker', theme: 'monolith', default: 'rgba(187, 0, 17, 1)', swatches: ['rgba(244, 67, 54, 1)','rgba(233, 30, 99, 0.95)','rgba(156, 39, 176, 0.9)','rgba(103, 58, 183, 0.85)','rgba(63, 81, 181, 0.8)','rgba(33, 150, 243, 0.75)','rgba(3, 169, 244, 0.7)','rgba(0, 188, 212, 0.7)','rgba(0, 150, 136, 0.75)','rgba(76, 175, 80, 0.8)','rgba(139, 195, 74, 0.85)','rgba(205, 220, 57, 0.9)','rgba(255, 235, 59, 0.95)','rgba(255, 193, 7, 1)'], components: {preview: true,opacity: true,hue: true,interaction: {hex: true,rgba: true,hsva: true,input: true,save: true}} }); pickr.on('save', (color, instance) => { clr = color.toRGBA(); console.log(clr); }) </script> </head> <body> <div style="padding: .5em"> <div class="color-picker"></div> </div> <div id="aa"></div> <div>click "import", or drag and drop (PC only)</div> <div id="drag"> <ul draggable="true" class="box" data-sel="body"> <li><i>background:</i></li> <li><input type="text" data-prop="background"></li> <li><i>color:</i></li> <li><input type="text" data-prop="color" value="#333"></li> <li><i>a (link) color:</i></li> <li><input type="text" data-prop="color" data-other="a" value="#b01"></li> </ul> <ul draggable="true" class="box" data-sel=".side-block"> <li><i>background:</i></li> <li><input type="text" data-prop="background"></li> <li><i>border:</i></li> <li><input type="text" data-prop="border"></li> <li><i>color <i>(.side-block .heading)</i>:</i></li> <li><input type="text" data-prop="color" data-other="#side-bar .side-block .heading, #side-bar .collapsible-block-unfolded-link, #side-bar .collapsible-block-unfolded-link .collapsible-block-link" value="#600"></li> </ul> </div> <button>optimize</button> <div class="css-parser"> <div id="prop" class="hidden"></div> <div class="wrap"> <highlight-area data-type="css" id="_css"></highlight-area> </div> </div> </body> </html>
page revision: 144, last edited: 15 Aug 2020 14:22