1 line
11 KiB
JavaScript
1 line
11 KiB
JavaScript
!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,PI:z}=Math,k=z/180;function L(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=k*(e.start||0),o=e.deg?e.deg*k:z/(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 T(){return'circle(49.5%)'}function H(e = 3){return L({split:f(e,3,12)})}function M(){return L({split:3,start:-90})}function S(){return H(4)}function j(){return L({split:5,start:54})}function A(){return L({split:6,start:30})}function W(){return L({split:5,start:54,deg:144})}function C(){return'polygon(50% 5%, 80% 50%, 50% 95%, 20% 50%)'}function R(){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 q(e = 3){e=f(e,3,5);e==4&&(e=2);return L({split:240},t=>[b(e*t)*b(t),b(e*t)*v(t)])}function B(e = 3){e=f(e,3,6);var t=1-e;return L({scale:1/e},e=>[t*b(e)+b(t*(e-z)),t*v(e)+v(t*(e-z))])}function E(){return B(4)}var O=Object.freeze({circle:T,siogon:H,triangle:M,rhombus:S,pentagon:j,hexgon:A,star:W,diamond:C,cross:R,clover:q,hypocycloid:B,astroid:E});function P(e,t,n){return e=>n}function D(e,t,n){return t=>e}function F(e,t,n){return e=>t}function G(){return function(...e){return d.apply(null,e)}}function I(){return G.apply(null,arguments)}function J(){return function(...e){return d(m('range',g(y)).apply(null,e))}}function K(e,t,n){return function(e,...t){if(e){e=e.trim();if(O[e]){return O[e].apply(null,t)}}}}var N=Object.freeze({index:P,row:D,col:F,any:G,pick:I,rand:J,shape:K});class Q{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=N[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=N[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 U(e,t){var n=new Q(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 V={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:[]}}},X={'(':')','[':']','{':'}'},Y={white_space(e){return /[\s\n\t]/.test(e)},open_bracket(e){return X.hasOwnProperty(e)},close_bracket_of(e){var t=X[e];return e=>e==t},number(e){return!isNaN(e)}};function Z(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 $(e,{col:t,line:n}){throw new Error(`(at line ${n}, column ${t}) ${e}`)}function ee(e){if(e.trim().length){return Y.number(+e)?+e:e.trim()}else{return e}}function te(e){var[t,n]=[e.curr(),e.curr()],r=Y.close_bracket_of(n);e.next();while(!e.end()){if(r(n=e.curr())){t+=n;break}else Y.open_bracket(n)?(t+=te(e)):(t+=n);e.next()}return t}function ne(e,t ={}){var n=V.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 re(e){var t='',n;while(!e.end()){if((n=e.curr())==':')break;else /[a-zA-Z\-]/.test(n)?Y.white_space(n)||(t+=n):$('Syntax error:Bad property name.',e.info());e.next()}return t}function ue(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 oe(e){var t=[],n=[],r='',u;while(!e.end()){if(Y.open_bracket(u=e.curr()))r+=te(e);else if(/['"]/.test(u))r+=ue(e,u);else if(u=='@')n.length||(r=r.trimLeft()),r.length&&(n.push(V.text(r)),r=''),n.push(ce(e));else if(/[,)]/.test(u)){r.length&&(n.length?(r=r.trimRight(),r.length&&n.push(V.text(r))):n.push(V.text(ee(r))));t.push(n.slice());[n,r]=[[],''];if(u==')')break}else r+=u;e.next()}return t}function ce(e){var t=V.func(),n='',r;while(!e.end()){if((r=e.curr())==')')break;if(r=='('){e.next();t.name=n;t.arguments=oe(e);break}else n+=r;e.next()}return t}function se(e){var t=V.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=V.text();break}else n=='@'?(t.value.length&&r.push(t),t=V.text(),r.push(ce(e))):(!Y.white_space(n)||!Y.white_space(e.curr(-1)))&&(n==':'&&$('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 ie(e){var t='',n;while(!e.end()){if((n=e.curr())=='{')break;else Y.white_space(n)||(t+=n);e.next()}return t}function le(e){var t={name:'',arguments:[]},n;while(!e.end()){if((n=e.curr())=='(')e.next(),t.arguments=oe(e);else if(/[){]/.test(n))break;else Y.white_space(n)||(t.name+=n);e.next()}return t}function ae(e){var t=V.psudo(),n;while(!e.end()){if((n=e.curr())=='}')break;if(Y.white_space(n)){e.next();continue}else t.selector?t.styles.push(pe(e)):(t.selector=ie(e));e.next()}return t}function pe(e){var t=V.rule(),n;while(!e.end()){if((n=e.curr())==';')break;else if(!t.property.length)t.property=re(e);else{t.value=se(e);break}e.next()}return t}function fe(e){var t=V.cond(),n;while(!e.end()){if((n=e.curr())=='}')break;else if(!t.name.length)Object.assign(t,le(e));else if(n==':'){var r=ae(e);r.selector&&t.styles.push(r)}else if(n=='@')t.styles.push(fe(e));else if(!Y.white_space(n)){var u=pe(e);u.property&&t.styles.push(u)}e.next()}return t}function he(e){let t=Z(e),n=[];while(!t.end()){var r=t.curr();if(Y.white_space(r)){t.next();continue}else if(r=='/'&&t.curr(1)=='*')n.push(ne(t));else if(r=='#'||r=='/'&&t.curr(1)=='/')n.push(ne(t,{inline:!0}));else if(r==':'){var u=ae(t);u.selector&&n.push(u)}else if(r=='@'){var o=fe(t);o.name.length&&n.push(o)}else if(!Y.white_space(r)){var c=pe(t);c.property&&n.push(c)}t.next()}return n}function me(e,t){return U(he(e),t)}let de=1,ye=16;function ge(e){let[t,n]=(e+'').replace(/\s+/g,'').replace(/[,，xX]+/,'x').split('x').map(Number),r={x:f(t||de,1,ye),y:f(n||t||de,1,ye)};return Object.assign({},r,{count:r.x*r.y})}let xe="\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 _e extends HTMLElement{constructor(){super();this.doodle=this.attachShadow({mode:'open'})}connectedCallback(){setTimeout(()=>{if(!this.innerHTML.trim()){return!1}let e;try{e=me(this.innerHTML,this.size=ge(this.getAttribute('grid')))}catch(e){this.innerHTML='';throw new Error(e)};let{has_transition:t}=e.props;this.doodle.innerHTML=`<style>${xe}</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=ge(this.getAttribute('grid')));let t=me(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',_e)})) |