css-doodle/css-doodle.min.js

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