shape-poly/dist/shapepoly.min.js

Make CSS Polygon Shape

/*
Copyright (c) 2018 Daybrush
license: MIT
author: Daybrush
repository: https://github.com/daybrush/shape-poly
@version 0.0.9
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.ShapePoly=e()}(this,function(){"use strict";var t,B="top",D="bottom",G="left",J="right",K=((t={})[B]=D,t[D]=B,t[G]=J,t[J]=G,t),w="__shape-poly",x=w+"-side",N="position:absolute;",F=N+"width:100%;height:100%;border-radius:inherit;\nbackground-color:inherit;transform-origin:inherit;";function j(t,e,i){return void 0===i&&(i=""),'<div class="'+x+t+'" style="'+e+'">'+i+"</div>"}function Q(t){return Math.sin(Math.floor(t/2)*Math.PI/t)}function U(t){return Math.cos(Math.PI/t)}function s(t,e){return t.getAttribute("data-"+e)||void 0}function A(t){var e,i,r,o,n,a,s,d,u,c,l,h,v=t.strokeWidth,f=void 0===v?0:v,p=t.side,k=void 0===p?3:p,g=t.split,M=void 0===g?1:g,m=t.starRadius,y=void 0===m?100:m,b=t.stroke,I=void 0===b?"black":b,P=t.direction,R=void 0===P?D:P,S=M*(100===y?1:2),W=function(t){var e=/^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(t);if(!e)return{unit:"",value:NaN};var i=e[2];return{unit:e[3],value:parseFloat(i)}}(""+f),w=W.unit,x=W.value,N=""+x/2+w,F=K[R],j=R===B||R===D,A=j?G:B,C=j?B:G,E=function(t,e,i){if(t%4==0)return"100%";var r=U(t),o=0;if(t%2==0)o=i?r:1/r;else{var n=Q(t);o=i?.5/n*(1+r):2/(1+r)*n}return"calc(100% * "+o+" + "+e+" * "+(1-o)+")"}(k,f,j),T=R===B||R===J?-1:1,q=100===y?0:(i=y,100*(r=U(e=k))<=i?0:Math.atan((r-i/100)/Math.sin(Math.PI/e))/Math.PI*180),_=function(t,e,i,r){var o=i?1/Math.cos(i*Math.PI/180):1,n=1/e;if(4<t){var a=Math.sin(Math.PI/t),s=Math.cos(Math.PI/t);n*=t%4==0?a/s:t%2==0?a:a/Q(t)}else if(1===e)return"100%";return"calc(100% * "+(n*=o)+" - "+r+" * "+n+" + "+r+")"}(k,S,q,f),H=j?_:f,L=j?f:_,O=360/k+2*q,V=(o=S,n=T*q,a=x,s=w,d=j?"X":"Y",u=Math.cos(n*Math.PI/180),(c=[]).push("translate"+d+"(-"+50*u*o+"%)"),1<o&&c.push("translate"+d+"("+a/2*(u*o-1)+s+")"),0!==n&&c.push("rotate("+n+"deg)"),"transform:"+c.join(" ")+";"),X=[];X.push(F+":0;\n  "+C+":auto;\n  "+A+":50%;"+V+(l=N,"transform-origin:"+((h=j)?l:"50%")+" "+(h?"50%":l)+";")+"\n  width:"+H+";height:"+L+";border-radius:"+N+";background:"+I+";");for(var Y=0;Y<k;++Y)for(var $=0;$<S;++$){if(0!==Y*S+$){var z=0===$?"transform:rotate("+T*O+"deg)":q&&$===S/2?"transform:rotate("+2*-T*q+"deg)":"transform:none;";X.push(C+":auto;"+A+": calc(100% - "+f+");"+z)}}return{sides:X,percent:"padding-top:"+E}}function d(t){for(var e,i,r,o,n=t.className,a=void 0===n?w:n,s=t.strokeWidth,d=void 0===s?0:s,u=t.side,c=void 0===u?3:u,l=t.split,h=void 0===l?1:l,v=t.starRadius,f=void 0===v?100:v,p=t.stroke,k=void 0===p?"black":p,g=t.direction,M=void 0===g?D:g,m=t.container,y=void 0===m?(e="div",i=a,(r=document.createElement(e)).className=i,r):m,b=A({strokeWidth:d,side:c,split:h,starRadius:f,stroke:k,direction:M}),I=b.sides,P=b.percent,R=I.length-1;1<=R;--R)o=j(" "+x+R,F+I[R],o);o=j(" "+x+"0",N+"display:inline-block;"+I[0],o);var S=j("-percent","position:relative;width:100%;"+P),W=getComputedStyle(y).position;return W&&"static"!==W||(y.style.position="relative"),y.insertAdjacentHTML("beforeend",o+S),y}return{dom:function(t){var e=s(t,"stroke-width"),i=s(t,"stroke"),r=s(t,"direction"),o=s(t,"side"),n=s(t,"split"),a=s(t,"star-radius");return o&&(o=parseFloat(o)),n&&(n=parseFloat(n)),a&&(a=parseFloat(a)),d({side:o,split:n,starRadius:a,strokeWidth:e,direction:r,stroke:i,container:t})},css:A,be:function(t,e){var i=e.strokeWidth,r=void 0===i?0:i,o=e.side,n=void 0===o?3:o,a=e.starRadius,s=void 0===a?100:a,d=e.stroke,u=e.direction,c=void 0===u?D:u,l=t.querySelectorAll("."+x),h=l.length,v=h/(n*(100!==s?2:1));if(h&&!(v%1)){var f=getComputedStyle(l[0]),p=r||c===B||c===D?f.height:f.width,k=d||f.backgroundColor,g=t.querySelector("."+x+"-percent"),M=A({strokeWidth:p,side:n,split:v,starRadius:s,stroke:k,direction:c}),m=M.sides,y=M.percent;m.forEach(function(t,e){l[e].style.cssText+=t}),g.style.cssText+=y}},poly:d,VERSION:"0.0.9"}});
//# sourceMappingURL=shapepoly.min.js.map