css-doodle/css-doodle.min.js

!function(e,n){typeof exports==='object'&&typeof module!=='undefined'?n():typeof define==='function'&&define.amd?define(n):(n())}(this,(function(){"use strict";var e={even:e=>!!(e%2),odd:e=>!(e%2)};function n(e,n,t){return e=>e==t}function t(e,n){return(t,r)=>e==t&&n==r}function r(n,t,r){return t=>/^(even|odd)$/.test(t)?e[t](n-1):t==n}function u(n,t,r){return n=>/^(even|odd)$/.test(n)?e[n](t-1):n==t}function o(n,t,r){return n=>e.even(r-1)}function c(n,t,r){return n=>e.odd(r-1)}var s=Object.freeze({nth:n,at:t,row:r,col:u,even:o,odd:c});function i(e){if(Array.isArray(e))return e;return Object.keys(e).map(n=>e[n])}function l(e,...n){return n.reduce((e,n)=>e.apply(null,i(n)),e)}function a(e){return(e||[]).join('\n')}function p(e){return Array.isArray(e)?e:[e]}function f(e,n,t){return Math.max(n,Math.min(t,e))}function m(e){return`-webkit-${e}${e}`}let h={};function d(e,n){return function(...t){let r=e+t.join('-');if(h[r])return h[r];return h[r]=n.apply(null,t)}}function y(...e){let n=e.reduce((e,n)=>e.concat(n),[]);return n[Math.floor(Math.random()*n.length)]}function g(e,n,t){let r=0,u=e=>e>0&&e<1?.1:1,o=arguments.length;o==1&&([e,n]=[u(e),e]);o<3&&(t=u(e));let c=[];while(t>0&&e<n||t<0&&e>n){c.push(e);e+=t;if(r++>=1e3)break}return c}function x(e){return function(...n){let t=w(n[0]);if(t){n=n.map(z);return _(e,t).apply(null,n)}return e.apply(null,n)}}function _(e,n){return function(...t){t=t.map(z);let r=e.apply(null,t);n&&(r=r.map(e=>e+n));return r}}function w(e){if(!e)return'';let n=/(%|cm|fr|rem|em|ex|in|mm|pc|pt|px|vh|vw|vmax|vmin|deg|ms|s)$/,t=''.trim.call(e).match(n);return t?t[0]:''}function z(e){let n=w(e);return n?+(e.replace(n,'')):e}let{cos:b,sin:v,sqrt:k,pow:L,PI:T}=Math,H=T/180;function M(e,n){typeof arguments[0]=='function'&&(n=e,e={});n||(n=e=>[b(e),v(e)]);var t=e.split||120,r=e.scale||1,u=H*(e.start||0),o=e.deg?e.deg*H:T/(t/2),c=[];for(var s=0;s<t;++s){var i=u+o*s,[l,a]=n(i);c.push(l*50*r+50+'% '+(a*50*r+50+'%'))}return`polygon(${c.join(',')})`}function S(e,n,t){var r=H*t;return[e*b(r)-n*v(r),n*b(r)+e*v(r)]}function j(){return'circle(49%)'}function A(){return M({split:3,start:-90},e=>[b(e)*1.1,v(e)*1.1+.2])}function W(){return M({split:4})}function C(){return M({split:5,start:54})}function R(){return M({split:6,start:30})}function q(){return M({split:7,start:-90})}function B(){return M({split:8})}function E(){return M({split:5,start:54,deg:144})}function O(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function P(){return"polygon(\n 5% 35%, 35% 35%, 35% 5%, 65% 5%,\n 65% 35%, 95% 35%, 95% 65%, 65% 65%,\n 65% 95%, 35% 95%, 35% 65%, 5% 65%\n )"}function D(e = 3){e=f(e,3,5);e==4&&(e=2);return M({split:240},n=>{var t=b(e*n)*b(n),r=b(e*n)*v(n);e==3&&(t-=.2);e==2&&(t/=1.1,r/=1.1);return[t,r]})}function F(e = 3){e=f(e,3,6);var n=1-e;return M({scale:1/e},t=>{var r=n*b(t)+b(n*(t-T)),u=n*v(t)+v(n*(t-T));e==3&&(r=r*1.1-.6,u*=1.1);return[r,u]})}function G(){return F(4)}function I(){return M(e=>{var n=.7*k(2)*b(e),t=L(v(e),2)+1;return[n/t,n*v(e)/t]})}function J(){return M(e=>{var n=.75*L(v(e),3),t=b(1*e)*.7222222222222222-b(2*e)*.2777777777777778-b(3*e)/18-b(4*e)/18;return S(n*1.2,(t+.2)*1.1,180)})}function K(){return M(e=>{var[n,t]=[L(v(e),3),L(b(e),3)];return S((n+t)*b(e)*1.3-.45,(n+t)*v(e)*1.3-.45,-90)})}function N(){return M(e=>S(b(e),L(v(e),2)/(2+v(e))-.5,180))}function Q(){return M(e=>[v(e),(1+v(e))*b(e)/1.4])}function U(){return M(e=>[b(e)-L(v(e),2)/k(2),v(2*e)/2])}function V(){return M({split:240},e=>{var n=3.4*(L(v(e),2)-.5)*b(e);return S(b(e)*n+.75,v(e)*n*1.2,180)})}function X(e = 3){e=f(e,3,10);return M({split:240},n=>[(1+.2*b(e*n))*b(n)*.8,(1+.2*b(e*n))*v(n)*.8])}var Y=Object.freeze({circle:j,triangle:A,rhombus:W,pentagon:C,hexgon:R,heptagon:q,octagon:B,star:E,diamond:O,cross:P,clover:D,hypocycloid:F,astroid:G,infinity:I,heart:J,bean:K,bicorn:N,pear:Q,fish:U,whale:V,bud:X});function Z(e,n,t){return e=>t}function $(e,n,t){return n=>e}function ee(e,n,t){return e=>n}function ne(){return function(...e){return y.apply(null,e)}}function te(){return ne.apply(null,arguments)}function re(){return function(...e){return y(d('range',x(g)).apply(null,e))}}function ue(e,n,t){return d('shape',function(e,...n){if(e){e=e.trim();if(Y[e]){return Y[e].apply(null,n)}}})}var oe=Object.freeze({index:Z,row:$,col:ee,any:ne,pick:te,rand:re,shape:ue});let ce=/[,，\/\s]+\s*/;var se={['size'](e){var[n,t = n]=e.split(ce);return`width:${n};height:${t};`},['min-size'](e){var[n,t = n]=e.split(ce);return`min-width:${n};min-height:${t};`},['max-size'](e){var[n,t = n]=e.split(ce);return`max-width:${n};max-height:${t};`}};class ie{constructor(e){this.tokens=e;this.rules={};this.props={};this.styles={host:'',cells:''}}add_rule(e,n){var t=this.rules[e];t||(t=this.rules[e]=[]);t.push.apply(t,p(n))}compose_selector(e,n = ''){return`.cell:nth-of-type(${e}) .shape${n}`}compose_argument(e,n){var t=e.map(e=>{if(e.type=='text'){return e.value}else if(e.type=='func'){var t=oe[e.name.substr(1)];if(t){var r=e.arguments.map(e=>{return this.compose_argument(e,n)});return l(t,n,r)}}});return t.length>2?t.join(''):t[0]}compose_value(e,n){return e.reduce((e,t)=>{switch(t.type){case 'text':{e+=t.value;break};case 'func':{var r=oe[t.name.substr(1)];if(r){var u=t.arguments.map(e=>{return this.compose_argument(e,n)});e+=l(r,n,u)}}}return e},'')}compose_rule(e,n){var t=e.property,r=this.compose_value(e.value,n);t=='transition'&&(this.props.has_transition=!0);var u=`${t}:${r};`;t=='clip-path'&&(u=m(u),u+=';overflow:hidden;');se[t]&&(u=se[t](r));return u}compose(e,n){(n||this.tokens).forEach((n,t)=>{if(n.skip)return!1;switch(n.type){case 'rule':this.add_rule(this.compose_selector(e.count),this.compose_rule(n,e));break;case 'psudo':{n.selector.startsWith(':doodle')&&(n.selector=n.selector.replace(/^\:+doodle/,':host'));var c=n.selector.startsWith(':host');c&&(n.skip=!0);var i=n.styles.map(n=>this.compose_rule(n,e)),a=c?n.selector:this.compose_selector(e.count,n.selector);this.add_rule(a,i);break};case 'cond':var o=s[n.name.substr(1)];if(o){var r=n.arguments.map(n=>{return this.compose_argument(n,e)}),u=l(o,e,r);u&&this.compose(e,n.styles)};break}})}output(){Object.keys(this.rules).forEach(e=>{var n=e.startsWith(':host');let t=n?'host':'cells';this.styles[t]+=`${e}{${a(this.rules[e])}}`});return{props:this.props,styles:this.styles}}}function le(e,n){var t=new ie(e);for(var r=1,u=0;r<=n.x;++r){for(var o=1;o<=n.y;++o)t.compose({x:r,y:o,count:++u})}return t.output()}let ae={func(e = ''){return{type:'func',name:e,arguments:[]}},argument(){return{type:'argument',value:[]}},text(e = ''){return{type:'text',value:e}},comment(e){return{type:'comment',value:e}},psudo(e = ''){return{type:'psudo',selector:e,styles:[]}},cond(e = ''){return{type:'cond',name:e,styles:[],arguments:[]}},rule(e = ''){return{type:'rule',property:e,value:[]}}},pe={'(':')','[':']','{':'}'},fe={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return pe.hasOwnProperty(e)},close_bracket_of(e){var n=pe[e];return e=>e==n},number(e){return!isNaN(e)}};function me(e){var n=0,t=1,r=1;return{curr:(t = 0)=>e[n+t],end:()=>e.length<=n,info:()=>({index:n,col:t,line:r}),next:()=>{var u=e[n++];u=='\n'?(r++, t=0):t++;return u}}}function he(e,{col:n,line:t}){throw new Error(`(at line ${t}, column ${n}) ${e}`)}function de(e){if(e.trim().length){return fe.number(+e)?+e:e.trim()}else{return e}}function ye(e){var[n,t]=[e.curr(),e.curr()],r=fe.close_bracket_of(t);e.next();while(!e.end()){if(r(t=e.curr())){n+=t;break}else fe.open_bracket(t)?(n+=ye(e)):(n+=t);e.next()}return n}function ge(e,n ={}){var t=ae.comment(),r=e.curr();r!='#'&&e.next();e.next();while(!e.end()){if((r=e.curr())=='*'&&e.curr(1)=='/')break;else t.value+=r;r=e.curr();if(n.inline){if(r=='\n')return t}else{if(r=='*'&&e.curr(1)=='/')break}t.value+=r;e.next()}e.next();e.next();return t}function xe(e){var n='',t;while(!e.end()){if((t=e.curr())==':')break;else /[a-zA-Z\-]/.test(t)?fe.white_space(t)||(n+=t):he('Syntax error:Bad property name.',e.info());e.next()}return n}function _e(e,n){var t='',r;e.next();while(!e.end()){if((r=e.curr())==n){if(e.curr(-1)!=='\\')break;else t+=r}else t+=r;e.next()}return t}function we(e){var n=[],t=[],r='',u;while(!e.end()){if(fe.open_bracket(u=e.curr()))r+=ye(e);else if(/['"]/.test(u))r+=_e(e,u);else if(u=='@')t.length||(r=r.trimLeft()),r.length&&(t.push(ae.text(r)),r=''),t.push(ze(e));else if(/[,)]/.test(u)){r.length&&(t.length?(r=r.trimRight(),r.length&&t.push(ae.text(r))):t.push(ae.text(de(r))));n.push(t.slice());[t,r]=[[],''];if(u==')')break}else r+=u;e.next()}return n}function ze(e){var n=ae.func(),t='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();n.name=t;n.arguments=we(e);break}else t+=r;e.next()}return n}function be(e){var n=ae.text(),t;let r=[];while(!e.end()){if((t=e.curr())=='\n'){e.next();continue}else if(/[;}]/.test(t)){n.value.length&&r.push(n);n=ae.text();break}else t=='@'?(n.value.length&&r.push(n),n=ae.text(),r.push(ze(e))):(!fe.white_space(t)||!fe.white_space(e.curr(-1)))&&(t==':'&&he('Syntax error:Bad property name.',e.info()),n.value+=t);e.next()}n.value.length&&r.push(n);r.length&&r[0].value&&(r[0].value=r[0].value.trimLeft());return r}function ve(e){var n='',t;while(!e.end()){if((t=e.curr())=='{')break;else fe.white_space(t)||(n+=t);e.next()}return n}function ke(e){var n={name:'',arguments:[]},t;while(!e.end()){if((t=e.curr())=='(')e.next(),n.arguments=we(e);else if(/[){]/.test(t))break;else fe.white_space(t)||(n.name+=t);e.next()}return n}function Le(e){var n=ae.psudo(),t;while(!e.end()){if((t=e.curr())=='}')break;if(fe.white_space(t)){e.next();continue}else n.selector?n.styles.push(Te(e)):(n.selector=ve(e));e.next()}return n}function Te(e){var n=ae.rule(),t;while(!e.end()){if((t=e.curr())==';')break;else if(!n.property.length)n.property=xe(e);else{n.value=be(e);break}e.next()}return n}function He(e){var n=ae.cond(),t;while(!e.end()){if((t=e.curr())=='}')break;else if(!n.name.length)Object.assign(n,ke(e));else if(t==':'){var r=Le(e);r.selector&&n.styles.push(r)}else if(t=='@')n.styles.push(He(e));else if(!fe.white_space(t)){var u=Te(e);u.property&&n.styles.push(u)}e.next()}return n}function Me(e){let n=me(e),t=[];while(!n.end()){var r=n.curr();if(fe.white_space(r)){n.next();continue}else if(r=='/'&&n.curr(1)=='*')t.push(ge(n));else if(r=='#'||r=='/'&&n.curr(1)=='/')t.push(ge(n,{inline:!0}));else if(r==':'){var u=Le(n);u.selector&&t.push(u)}else if(r=='@'){var o=He(n);o.name.length&&t.push(o)}else if(!fe.white_space(r)){var c=Te(n);c.property&&t.push(c)}n.next()}return t}function Se(e,n){return le(Me(e),n)}let je=1,Ae=16;function We(e){let[n,t]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(n||je,1,Ae),y:f(t||n||je,1,Ae)};return Object.assign({},r,{count:r.x*r.y})}let Ce="\n:host{display:block;visibility:visible;width:1em;height:1em;}.container{position:relative;width:100%;height:100%\n}.container:after{content:'';display:block;clear:both;visibility:hidden\n}.cell{position:relative;float:left;line-height:0;box-sizing:border-box\n}.shape{box-sizing:border-box;line-height:0;position:absolute;width:100%;height:100%;transform-origin:center center;z-index:1;display:flex;align-items:center;justify-content:center\n}";class Re extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=Se(this.innerHTML,this.size=We(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:n}=e.props;this.doodle.innerHTML=`<style>${Ce}</style><style class="style-container">${this.style_size()}${e.styles.host}</style><style class="style-cells">${n?'':e.styles.cells}</style><div class="container">${this.html_cells()}</div>`;n&&setTimeout(()=>{this.set_style('.style-cells',e.styles.cells)},50)})}style_size(){return`.cell{width:${100/this.size.y+'%'};height:${100/this.size.x+'%'};}`}html_cells(){let e="\n<div class=\"cell\"><div class=\"shape\"></div></div>";return e.repeat(this.size.count)}set_style(e,n){let t=this.shadowRoot.querySelector(e);t&&(t.styleSheet?(t.styleSheet.cssText=n):(t.innerHTML=n))}update(e){if(!e){return!1}this.size||(this.size=We(this.getAttribute('grid')));let n=Se(e,this.size);this.set_style('.style-container',this.style_size()+n.styles.host);this.set_style('.style-cells',n.styles.cells);this.innerHTML=e}refresh(){this.update(this.innerHTML)}get grid(){return Object.assign({},this.size)}set grid(e){this.setAttribute('grid',e);this.connectedCallback()}static get observedAttributes(){return['grid']}attributeChangedCallback(e,n,t){e=='grid'&&n&&(n!==t&&(this.grid=t))}}customElements.define('css-doodle',Re)}))