From 339508d83167e0f0d7e0342e98d01eaad4db78cc Mon Sep 17 00:00:00 2001 From: thomasrosen Date: Sat, 23 Jan 2021 19:16:29 +0000 Subject: [PATCH] thomasrosen published a site update --- asset-manifest.json | 24 +++++++++---------- index.html | 2 +- ....c5248933.chunk.js => 3.598f4f07.chunk.js} | 4 ++-- ...3.chunk.js.map => 3.598f4f07.chunk.js.map} | 2 +- ....63aa0b5b.chunk.js => 4.00ef0d70.chunk.js} | 4 ++-- ...b.chunk.js.map => 4.00ef0d70.chunk.js.map} | 2 +- static/js/main.148333d5.chunk.js | 2 ++ static/js/main.148333d5.chunk.js.map | 1 + static/js/main.88f0f141.chunk.js | 2 -- static/js/main.88f0f141.chunk.js.map | 1 - ...n.8cfb6fb7.js => runtime-main.86800db0.js} | 4 ++-- ...b7.js.map => runtime-main.86800db0.js.map} | 2 +- static/media/de.6da0d34d.ftl | 1 - static/media/de.e89cdf3a.ftl | 18 ++++++++++++++ static/media/en.0356dc96.ftl | 18 ++++++++++++++ static/media/en.51e1fee2.ftl | 1 - 16 files changed, 61 insertions(+), 27 deletions(-) rename static/js/{3.c5248933.chunk.js => 3.598f4f07.chunk.js} (55%) rename static/js/{3.c5248933.chunk.js.map => 3.598f4f07.chunk.js.map} (54%) rename static/js/{4.63aa0b5b.chunk.js => 4.00ef0d70.chunk.js} (55%) rename static/js/{4.63aa0b5b.chunk.js.map => 4.00ef0d70.chunk.js.map} (54%) create mode 100644 static/js/main.148333d5.chunk.js create mode 100644 static/js/main.148333d5.chunk.js.map delete mode 100644 static/js/main.88f0f141.chunk.js delete mode 100644 static/js/main.88f0f141.chunk.js.map rename static/js/{runtime-main.8cfb6fb7.js => runtime-main.86800db0.js} (95%) rename static/js/{runtime-main.8cfb6fb7.js.map => runtime-main.86800db0.js.map} (99%) delete mode 100644 static/media/de.6da0d34d.ftl create mode 100644 static/media/de.e89cdf3a.ftl create mode 100644 static/media/en.0356dc96.ftl delete mode 100644 static/media/en.51e1fee2.ftl diff --git a/asset-manifest.json b/asset-manifest.json index df2781a..cd9433f 100644 --- a/asset-manifest.json +++ b/asset-manifest.json @@ -1,16 +1,16 @@ { "files": { "main.css": "/static/css/main.645a60aa.chunk.css", - "main.js": "/static/js/main.88f0f141.chunk.js", - "main.js.map": "/static/js/main.88f0f141.chunk.js.map", - "runtime-main.js": "/static/js/runtime-main.8cfb6fb7.js", - "runtime-main.js.map": "/static/js/runtime-main.8cfb6fb7.js.map", + "main.js": "/static/js/main.148333d5.chunk.js", + "main.js.map": "/static/js/main.148333d5.chunk.js.map", + "runtime-main.js": "/static/js/runtime-main.86800db0.js", + "runtime-main.js.map": "/static/js/runtime-main.86800db0.js.map", "static/js/2.834074b5.chunk.js": "/static/js/2.834074b5.chunk.js", "static/js/2.834074b5.chunk.js.map": "/static/js/2.834074b5.chunk.js.map", - "static/js/3.c5248933.chunk.js": "/static/js/3.c5248933.chunk.js", - "static/js/3.c5248933.chunk.js.map": "/static/js/3.c5248933.chunk.js.map", - "static/js/4.63aa0b5b.chunk.js": "/static/js/4.63aa0b5b.chunk.js", - "static/js/4.63aa0b5b.chunk.js.map": "/static/js/4.63aa0b5b.chunk.js.map", + "static/js/3.598f4f07.chunk.js": "/static/js/3.598f4f07.chunk.js", + "static/js/3.598f4f07.chunk.js.map": "/static/js/3.598f4f07.chunk.js.map", + "static/js/4.00ef0d70.chunk.js": "/static/js/4.00ef0d70.chunk.js", + "static/js/4.00ef0d70.chunk.js.map": "/static/js/4.00ef0d70.chunk.js.map", "static/js/5.0e590114.chunk.js": "/static/js/5.0e590114.chunk.js", "static/js/5.0e590114.chunk.js.map": "/static/js/5.0e590114.chunk.js.map", "static/js/6.d7248466.chunk.js": "/static/js/6.d7248466.chunk.js", @@ -61,13 +61,13 @@ "static/media/ProfileFrame Red Bars.png": "/static/media/ProfileFrame Red Bars.b9af36d9.png", "static/media/ProfileFrame White Bars.png": "/static/media/ProfileFrame White Bars.56078c77.png", "static/media/ProfileFrame Yellow Bars.png": "/static/media/ProfileFrame Yellow Bars.d7f8f717.png", - "static/media/de.ftl": "/static/media/de.6da0d34d.ftl", - "static/media/en.ftl": "/static/media/en.51e1fee2.ftl" + "static/media/de.ftl": "/static/media/de.e89cdf3a.ftl", + "static/media/en.ftl": "/static/media/en.0356dc96.ftl" }, "entrypoints": [ - "static/js/runtime-main.8cfb6fb7.js", + "static/js/runtime-main.86800db0.js", "static/js/2.834074b5.chunk.js", "static/css/main.645a60aa.chunk.css", - "static/js/main.88f0f141.chunk.js" + "static/js/main.148333d5.chunk.js" ] } \ No newline at end of file diff --git a/index.html b/index.html index c8442b7..a1154b2 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Volt Social Media Frame Generator
\ No newline at end of file +Volt Social Media Frame Generator
\ No newline at end of file diff --git a/static/js/3.c5248933.chunk.js b/static/js/3.598f4f07.chunk.js similarity index 55% rename from static/js/3.c5248933.chunk.js rename to static/js/3.598f4f07.chunk.js index 511a92c..d57d49a 100644 --- a/static/js/3.c5248933.chunk.js +++ b/static/js/3.598f4f07.chunk.js @@ -1,2 +1,2 @@ -(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[3],{68:function(e,t,i){"use strict";i.r(t),t.default=i.p+"static/media/de.6da0d34d.ftl"}}]); -//# sourceMappingURL=3.c5248933.chunk.js.map \ No newline at end of file +(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[3],{68:function(e,t,i){"use strict";i.r(t),t.default=i.p+"static/media/de.e89cdf3a.ftl"}}]); +//# sourceMappingURL=3.598f4f07.chunk.js.map \ No newline at end of file diff --git a/static/js/3.c5248933.chunk.js.map b/static/js/3.598f4f07.chunk.js.map similarity index 54% rename from static/js/3.c5248933.chunk.js.map rename to static/js/3.598f4f07.chunk.js.map index 5558524..b916a8e 100644 --- a/static/js/3.c5248933.chunk.js.map +++ b/static/js/3.598f4f07.chunk.js.map @@ -1 +1 @@ -{"version":3,"sources":["locales/de.ftl"],"names":[],"mappings":"6IAAA,OAAe,cAA0B","file":"static/js/3.c5248933.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/de.6da0d34d.ftl\";"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["locales/de.ftl"],"names":[],"mappings":"6IAAA,OAAe,cAA0B","file":"static/js/3.598f4f07.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/de.e89cdf3a.ftl\";"],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/4.63aa0b5b.chunk.js b/static/js/4.00ef0d70.chunk.js similarity index 55% rename from static/js/4.63aa0b5b.chunk.js rename to static/js/4.00ef0d70.chunk.js index a50305b..e7a2d3c 100644 --- a/static/js/4.63aa0b5b.chunk.js +++ b/static/js/4.00ef0d70.chunk.js @@ -1,2 +1,2 @@ -(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[4],{69:function(e,t,i){"use strict";i.r(t),t.default=i.p+"static/media/en.51e1fee2.ftl"}}]); -//# sourceMappingURL=4.63aa0b5b.chunk.js.map \ No newline at end of file +(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[4],{69:function(e,t,i){"use strict";i.r(t),t.default=i.p+"static/media/en.0356dc96.ftl"}}]); +//# sourceMappingURL=4.00ef0d70.chunk.js.map \ No newline at end of file diff --git a/static/js/4.63aa0b5b.chunk.js.map b/static/js/4.00ef0d70.chunk.js.map similarity index 54% rename from static/js/4.63aa0b5b.chunk.js.map rename to static/js/4.00ef0d70.chunk.js.map index fe400fd..6f069a4 100644 --- a/static/js/4.63aa0b5b.chunk.js.map +++ b/static/js/4.00ef0d70.chunk.js.map @@ -1 +1 @@ -{"version":3,"sources":["locales/en.ftl"],"names":[],"mappings":"6IAAA,OAAe,cAA0B","file":"static/js/4.63aa0b5b.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/en.51e1fee2.ftl\";"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["locales/en.ftl"],"names":[],"mappings":"6IAAA,OAAe,cAA0B","file":"static/js/4.00ef0d70.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/en.0356dc96.ftl\";"],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/main.148333d5.chunk.js b/static/js/main.148333d5.chunk.js new file mode 100644 index 0000000..64d66d1 --- /dev/null +++ b/static/js/main.148333d5.chunk.js @@ -0,0 +1,2 @@ +(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[0],{37:function(e,t,n){},41:function(e,t,n){var a={"./ProfileFrame Blue Bars.png":[49,6],"./ProfileFrame Green Bars.png":[50,7],"./ProfileFrame Mixed Bars.png":[51,8],"./ProfileFrame Purple.png":[52,9],"./ProfileFrame Red Bars.png":[53,10],"./ProfileFrame White Bars.png":[54,11],"./ProfileFrame Yellow Bars.png":[55,12],"./white-round-bottom-logo.png":[56,13]};function r(e){if(!n.o(a,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=a[e],r=t[0];return n.e(t[1]).then((function(){return n(r)}))}r.keys=function(){return Object.keys(a)},r.id=41,e.exports=r},42:function(e,t,n){var a={"./DeineWahl.png":[57,14],"./Europa.png":[58,15],"./JetztBistDuDran.png":[59,16],"./Volt.png":[60,17],"./Volt21.png":[61,18],"./VoltEuropa.png":[62,19],"./VoltRLP.png":[63,20],"./VoteVolt.png":[64,21],"./paneurop\xe4isch.png":[65,22],"./pragmatisch.png":[66,23],"./progressiv.png":[67,24]};function r(e){if(!n.o(a,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=a[e],r=t[0];return n.e(t[1]).then((function(){return n(r)}))}r.keys=function(){return Object.keys(a)},r.id=42,e.exports=r},47:function(e,t,n){var a={"./de.ftl":[68,3],"./en.ftl":[69,4]};function r(e){if(!n.o(a,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=a[e],r=t[0];return n.e(t[1]).then((function(){return n(r)}))}r.keys=function(){return Object.keys(a)},r.id=47,e.exports=r},48:function(e,t,n){"use strict";n.r(t);var a=n(1),r=n(0),c=n.n(r),o=n(25),s=n.n(o),i=n(8),u=n(17),O=n(2),h=(n(37),n(30)),l=n(27),d=n(4),j=n.n(d),b=n(9);var f=function(e){var t=e.onChange,c=Object(r.useState)([]),o=Object(O.a)(c,2),s=o[0],i=o[1],u=Object(r.useState)(null),h=Object(O.a)(u,2),l=h[0],d=h[1];Object(r.useEffect)((function(){function e(){return(e=Object(b.a)(j.a.mark((function e(){return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:Promise.all(["ProfileFrame Purple","ProfileFrame Mixed Bars","ProfileFrame Yellow Bars","ProfileFrame Red Bars","ProfileFrame Blue Bars","ProfileFrame Green Bars","ProfileFrame White Bars","white-round-bottom-logo"].map(function(){var e=Object(b.a)(j.a.mark((function e(t){return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.t0=t,e.next=3,n(41)("./".concat(t,".png"));case 3:return e.t1=e.sent,e.abrupt("return",{name:e.t0,src:e.t1});case 5:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}())).then((function(e){i(e),d(e[0].src.default)}));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[]);var f=Object(r.useCallback)((function(e){d(e.target.dataset.src)}),[d]);return Object(r.useEffect)((function(){t(l)}),[t,l]),Object(a.jsx)("div",{className:"FrameChooser",children:s.map((function(e){var t=e.src.default,n=l===t;return Object(a.jsx)("img",{alt:e.name,"data-src":t,src:t,className:n?"frame choosen":"frame",onClick:f},t)}))})},p=n(16),g=n(12),w=function(e){return Object(a.jsx)(p.b,Object(i.a)(Object(i.a)({},e),{},{elems:Object(i.a)({br:Object(a.jsx)("br",{})},e.elems),children:Object(a.jsx)(c.a.Fragment,{children:e.children})}),e.id)};function v(e){return function(t){var n=c.a.useContext(g.a);return c.a.createElement(e,Object(i.a)({getString:function(e,t,a){return n.getString(e,t,a||" ")}},t))}}var A=v((function(e){var t=e.onChange,c=e.getString,o=Object(r.useState)([]),s=Object(O.a)(o,2),i=s[0],u=s[1],h=Object(r.useState)(null),l=Object(O.a)(h,2),d=l[0],f=l[1];Object(r.useEffect)((function(){function e(){return(e=Object(b.a)(j.a.mark((function e(){return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:Promise.all(["","DeineWahl","Europa","JetztBistDuDran","paneurop\xe4isch","pragmatisch","progressiv","Volt","Volt21","VoltEuropa","VoltRLP","VoteVolt"].map(function(){var e=Object(b.a)(j.a.mark((function e(t){return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(e.t0=t,""!==t){e.next=5;break}e.t1="",e.next=8;break;case 5:return e.next=7,n(42)("./".concat(t,".png"));case 7:e.t1=e.sent;case 8:return e.t2=e.t1,e.abrupt("return",{name:e.t0,src:e.t2});case 10:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}())).then((function(e){u(e),f(e[0].src.default)}));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[]);var p=Object(r.useCallback)((function(e){f(e.target.dataset.src)}),[f]);return Object(r.useEffect)((function(){t(d)}),[t,d]),Object(a.jsx)("div",{className:"HashtagChooser",children:i.map((function(e){var t=e.src.default,n=d===t;return Object(a.jsx)("button",{"data-src":t,className:n?"hashtag_button choosen":"hashtag_button",onClick:p,children:""===e.name?c("button_no_hashtag"):"#"+e.name},t)}))})})),D=n(28),x=n.n(D),m=n(29),Q=n.n(m);function C(e,t,n){return Math.min(Math.max(t,e),n)}var H=function(e){var t=e.onChange,n=e.backgroundURL,c=e.backgroundRatio,o=e.frameURL,s=e.hashtagURL,i=Object(r.useRef)(null),u=Object(r.useRef)(null),h=Object(r.useState)(!1),l=Object(O.a)(h,2),d=l[0],j=l[1],b=Object(r.useState)(null),f=Object(O.a)(b,2),p=f[0],g=f[1],w=Object(r.useState)(null),v=Object(O.a)(w,2),A=v[0],D=v[1],m=Object(r.useState)(0),H=Object(O.a)(m,2),T=H[0],U=H[1],F=Object(r.useState)(0),N=Object(O.a)(F,2),k=N[0],E=N[1],K=Object(r.useState)(0),B=Object(O.a)(K,2),S=B[0],y=B[1],P=Object(r.useState)(0),_=Object(O.a)(P,2),M=_[0],R=_[1],L=Object(r.useState)(1),I=Object(O.a)(L,2),V=I[0],Y=I[1],z=Object(r.useState)(300),J=Object(O.a)(z,2),X=J[0],G=J[1],W=Object(r.useState)(300),q=Object(O.a)(W,2),Z=q[0],$=q[1],ee=Object(r.useState)(300),te=Object(O.a)(ee,2),ne=te[0],ae=te[1],re=Object(r.useState)(300),ce=Object(O.a)(re,2),oe=ce[0],se=ce[1],ie=Object(r.useState)(0),ue=Object(O.a)(ie,2),Oe=ue[0],he=ue[1],le=Object(r.useState)(0),de=Object(O.a)(le,2),je=de[0],be=de[1],fe=Object(r.useState)(0),pe=Object(O.a)(fe,2),ge=pe[0],we=pe[1],ve=Object(r.useState)(0),Ae=Object(O.a)(ve,2),De=Ae[0],xe=Ae[1];Object(r.useEffect)((function(){t&&t({x:T,y:k,scale:V})}),[t,T,k,V]),Object(r.useEffect)((function(){if(i&&i.current){var e=i.current.offsetWidth,t=i.current.offsetHeight;se(t),ae(e);var n=1,a=1;c<1?n=1/c:c>1&&(a=1*c),G(n),$(a)}}),[c]),Object(r.useEffect)((function(){var e=function(e,t,n,a,r){var c=Math.max(0,e*n-a)/2,o=Math.max(0,t*n-r)/2;return{rangeMaxX:c,rangeMinX:0-c,rangeMaxY:o,rangeMinY:0-o}}(X*ne,Z*oe,V,ne,oe),t=e.rangeMinX,n=e.rangeMinY,a=e.rangeMaxX,r=e.rangeMaxY;he(t),be(n),we(a),xe(r)}),[X,Z,ne,oe,V]),Object(r.useEffect)((function(){U(0),E(0),y(0),R(0),Y(1)}),[n]);var me=Object(r.useCallback)((function(e){var t=1*e.target.dataset.x,n=1*e.target.dataset.y,a=C(t+e.deltaX,Oe,ge),r=C(n+e.deltaY,je,De);e.isFinal?(U(a||0),E(r||0),y(0),R(0)):(y(a-t||0),R(r-n||0))}),[Oe,je,ge,De]),Qe=Object(r.useCallback)((function(e,t,n,a){e.preventDefault();var r=C(1*e.target.dataset.scale+t/200,1,8);Y(r||1);var c=1*e.target.dataset.x,o=1*e.target.dataset.y;U(C(c,Oe,ge)||0),E(C(o,je,De)||0)}),[Oe,je,ge,De]);return Object(r.useEffect)((function(){if(!d&&i&&i.current){var e=i.current;e.addEventListener("mousedown",(function(e){e.preventDefault()}),!1),e.addEventListener("touchstart",(function(e){e.preventDefault()}),!1),e.addEventListener("touchend",(function(e){e.preventDefault()}),!1),e.addEventListener("touchmove",(function(e){e.preventDefault()}),!1),g(new x.a(e,{direction:"DIRECTION_ALL"})),D(Q()(e)),j(!0)}}),[i,d]),Object(r.useEffect)((function(){if(p&&A&&d&&i&&i.current)return p.on("pan",me),A.wheel(Qe),function(){p.off("pan",me),A.unwheel()}}),[i,me,Qe,d,p,A]),Object(a.jsxs)("div",{className:"Editor",ref:i,"data-x":T,"data-y":k,"data-scale":V,children:[Object(a.jsx)("img",{src:n,ref:u,alt:"",className:"background",style:{width:100*X+"%",height:100*Z+"%",transform:"translate3d(calc(-50% + ".concat(T+S,"px), calc(-50% + ").concat(k+M,"px), 0) scale(").concat(V,",").concat(V,")")}}),Object(a.jsx)("img",{src:o,alt:"",className:"foreground"}),Object(a.jsx)("img",{src:s,alt:"",className:"hashtag"})]})},T=n.p+"static/media/HeaderImage.1f39a672.svg",U="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAQ4AgMAAACRfoQcAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURVIreVIreVEreKabc9cAAAADdFJOU//+/Q3dsqEAAATsSURBVHgB7dAxAQAABAAwQtI/ipMCvi3CgiMV6NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NChQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOBTp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQwc6dOjQoUOHDh06dOjQoUOHDh06dOjQgQ4dOnTo0KFDhw4dOnTo0KFDhw4dOnSgQ4cOHTp06NChQ4cOHTp06NChQ4cOHTx06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHTrQoUOHDh06dOjQoUOHDh06dOjQoUOHDnTo0KFDhw4dOnTo0KFDhw4dOnTo0KEDHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4d6NChQ4cOHTp06NChQ4cOHTp06NChQ4cCHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4dxeoB30xd38yzCvgAAAAASUVORK5CYII=",F="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAALSURBVHgBY2BgAAAAAwABjPg5OgAAAABJRU5ErkJggg==",N=(n(43),n(6)),k=n(21),E=n(5),K=n(7),B=n(10),S=n(11),y=n(20),P=n(31),_=["de","en"];function M(e){return R.apply(this,arguments)}function R(){return(R=Object(b.a)(j.a.mark((function e(t){var a,r,c;return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,n(47)("./"+t+".ftl");case 2:return a=e.sent,e.next=5,fetch(a.default);case 5:return r=e.sent,e.next=8,r.text();case 8:return c=e.sent,e.abrupt("return",Object(k.a)({},t,new y.b(c)));case 10:case"end":return e.stop()}}),e)})))).apply(this,arguments)}function L(){var e=new y.a("");return e.addResource(new y.b("")),new p.c([e])}function I(e){return V.apply(this,arguments)}function V(){return(V=Object(b.a)(j.a.mark((function e(t){var n,a;return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,Promise.all(t.map(M));case 2:return n=e.sent,a=n.reduce((function(e,t){return Object.assign(e,t)})),e.abrupt("return",j.a.mark((function e(){var n,r,c,o;return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:n=Object(N.a)(t),e.prev=1,n.s();case 3:if((r=n.n()).done){e.next=11;break}return c=r.value,(o=new y.a(c)).addResource(a[c]),e.next=9,o;case 9:e.next=3;break;case 11:e.next=16;break;case 13:e.prev=13,e.t0=e.catch(1),n.e(e.t0);case 16:return e.prev=16,n.f(),e.finish(16);case 19:case"end":return e.stop()}}),e,null,[[1,13,16,19]])})));case 5:case"end":return e.stop()}}),e)})))).apply(this,arguments)}var Y=function(e){Object(B.a)(n,e);var t=Object(S.a)(n);function n(e){var a;return Object(E.a)(this,n),(a=t.call(this,e)).state={bundles:L()},a}return Object(K.a)(n,[{key:"componentDidMount",value:function(){var e=Object(b.a)(j.a.mark((function e(){var t,n;return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=Object(P.a)(this.props.userLocales,_,{defaultLocale:"en"}),e.next=3,I(t);case 3:n=e.sent,this.setState({bundles:new p.c(n())});case 5:case"end":return e.stop()}}),e,this)})));return function(){return e.apply(this,arguments)}}()},{key:"render",value:function(){var e=this.props.children,t=this.state.bundles;return t?Object(a.jsx)(p.a,{l10n:t,children:e}):Object(a.jsx)("div",{children:"Loading texts\u2026"})}}]),n}(c.a.Component),z=["de"]||!1,J=1080;var X=v((function(e){var t=e.getString,n=Object(r.useState)(null),c=Object(O.a)(n,2),o=c[0],s=c[1],d=Object(r.useState)(null),j=Object(O.a)(d,2),b=j[0],p=j[1],g=Object(r.useState)(null),v=Object(O.a)(g,2),D=v[0],x=v[1],m=Object(r.useState)(1),Q=Object(O.a)(m,2),C=Q[0],N=Q[1],k=Object(r.useState)(null),E=Object(O.a)(k,2),K=E[0],B=E[1],S=Object(r.useState)(0),y=Object(O.a)(S,2),P=y[0],_=y[1],M=Object(r.useState)(0),R=Object(O.a)(M,2),L=R[0],I=R[1],V=Object(r.useState)({x:0,y:0,scale:1}),Y=Object(O.a)(V,2),z=Y[0],X=Y[1],G=Object(r.useCallback)((function(e){s(e)}),[s]),W=Object(r.useCallback)((function(e){p(e)}),[p]),q=Object(r.useCallback)((function(e){var t=e.x,n=e.y,a=e.scale;X({x:t,y:n,scale:a})}),[]),Z=Object(r.useCallback)((function(e){if(e){var t=new FileReader;t.onload=function(t){var n=new Image;n.onload=function(){var a,r;n.width {\n async function loadFrames(){\n Promise.all(\n [\n 'ProfileFrame Purple',\n 'ProfileFrame Mixed Bars',\n 'ProfileFrame Yellow Bars',\n 'ProfileFrame Red Bars',\n 'ProfileFrame Blue Bars',\n 'ProfileFrame Green Bars',\n 'ProfileFrame White Bars',\n 'white-round-bottom-logo',\n ]\n .map(async frame_filename => {\n return {\n name: frame_filename,\n src: await import(`./frames/${frame_filename}.png`),\n }\n })\n )\n .then(new_frames => {\n setFrames(new_frames)\n setChoosenFrame(new_frames[0].src.default)\n })\n }\n loadFrames()\n }, [])\n\n const handleImageChoosing = useCallback(event => {\n setChoosenFrame(event.target.dataset.src)\n }, [setChoosenFrame])\n\n useEffect(() => {\n onChange(choosenFrame)\n }, [onChange, choosenFrame])\n\n return (\n
\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return {frame.name}\n })\n } \n
\n )\n}\n\nexport default FrameChooser\n","import React from 'react'\nimport {\n Localized as LocalizedOriginal,\n // withLocalization,\n} from '@fluent/react'\n\nimport { FluentContext } from '../node_modules/@fluent/react/esm/context.js'\n\nconst Localized = props => (\n ,\n ...props.elems,\n }}\n >\n {props.children}\n \n)\n\n// A custom withLocalization to have an empty fallback.\n// It is nearly identical to the original.\nfunction withLocalization(Inner) {\n function WithLocalization(props) {\n const l10n = React.useContext(FluentContext)\n\n const getString = (id, args, fallback) => l10n.getString(id, args, fallback || ' ')\n\n return React.createElement(Inner, { getString, ...props })\n }\n return WithLocalization\n}\n\nexport {\n withLocalization,\n Localized,\n Localized as default,\n}\n\n/*\n\nimport { Localized, withLocalization } from '../Localized/'\n\n\nexport default withLocalization(componentName)\n\n\nimport Localized from '../Localized/'\n\n\nimport { withLocalization } from '@fluent/react'\nexport default withLocalization(componentName)\n\n*/\n","import { useState, useEffect, useCallback } from 'react'\nimport { withLocalization } from './Localized.js'\n\nfunction HashtagChooser({ onChange, getString }) {\n const [frames, setFrames] = useState([])\n const [choosenFrame, setChoosenFrame] = useState(null)\n\n useEffect(() => {\n async function loadFrames() {\n Promise.all(\n [\n '',\n 'DeineWahl',\n 'Europa',\n 'JetztBistDuDran',\n 'paneuropäisch',\n 'pragmatisch',\n 'progressiv',\n 'Volt',\n 'Volt21',\n 'VoltEuropa',\n 'VoltRLP',\n 'VoteVolt',\n ]\n .map(async frame_filename => {\n return {\n name: frame_filename,\n src: frame_filename === '' ? '' : await import(`./hashtags/${frame_filename}.png`),\n }\n })\n )\n .then(new_frames => {\n setFrames(new_frames)\n setChoosenFrame(new_frames[0].src.default)\n })\n }\n loadFrames()\n }, [])\n\n const handleImageChoosing = useCallback(event => {\n setChoosenFrame(event.target.dataset.src)\n }, [setChoosenFrame])\n\n useEffect(() => {\n onChange(choosenFrame)\n }, [onChange, choosenFrame])\n\n return (\n
\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return \n })\n }\n
\n )\n}\n\nexport default withLocalization(HashtagChooser)\n","import { useEffect, useRef, useState, useCallback } from 'react'\n\nimport Hammer from 'hammerjs'\nimport Hamster from 'hamsterjs'\n\nfunction updateRange(imageWidth, imageHeight, imageScale, containerWidth, containerHeight) {\n\n const rangeX = Math.max(0, (imageWidth * imageScale) - containerWidth)\n const rangeY = Math.max(0, (imageHeight * imageScale) - containerHeight)\n\n const rangeMaxX = (rangeX / 2)\n const rangeMinX = 0 - rangeMaxX\n\n const rangeMaxY = (rangeY / 2)\n const rangeMinY = 0 - rangeMaxY\n\n return {\n rangeMaxX,\n rangeMinX,\n rangeMaxY,\n rangeMinY,\n }\n}\n\nfunction clamp(value, min, max) {\n return Math.min(Math.max(min, value), max)\n}\n\n\n\nlet minScale = 1;\nlet maxScale = 8;\n\n\n\nfunction Editor({ onChange, backgroundURL, backgroundRatio, frameURL, hashtagURL }) {\n const editorRef = useRef(null)\n const backgroundImageRef = useRef(null)\n\n const [hammer_got_init, set_hammer_got_init] = useState(false)\n\n const [hammertime, set_hammertime] = useState(null)\n const [hamster, set_hamster] = useState(null)\n\n const [x, set_x] = useState(0)\n const [y, set_y] = useState(0)\n const [add_x, set_add_x] = useState(0)\n const [add_y, set_add_y] = useState(0)\n const [scale, set_scale] = useState(1)\n // const [add_scale, set_add_scale] = useState(0)\n\n const [photoWidth, setPhotoWidth] = useState(300)\n const [photoHeight, setPhotoHeight] = useState(300)\n const [editorWidth, setEditorWidth] = useState(300)\n const [editorHeight, setEditorHeight] = useState(300)\n\n const [rangeMinX, set_rangeMinX] = useState(0)\n const [rangeMinY, set_rangeMinY] = useState(0)\n const [rangeMaxX, set_rangeMaxX] = useState(0)\n const [rangeMaxY, set_rangeMaxY] = useState(0)\n\n useEffect(() => {\n if (!!onChange) {\n onChange({ x, y, scale})\n }\n }, [onChange, x, y, scale])\n\n useEffect(() => {\n if (!!editorRef && !!editorRef.current) {\n const new_editorWidth = editorRef.current.offsetWidth\n const new_editorHeight = editorRef.current.offsetHeight\n setEditorHeight(new_editorHeight)\n setEditorWidth(new_editorWidth)\n\n let new_photoWidth = 1\n let new_photoHeight = 1\n if (backgroundRatio < 1) {\n new_photoWidth = 1 / backgroundRatio\n } else if (backgroundRatio > 1) {\n new_photoHeight = 1 * backgroundRatio\n }\n\n setPhotoWidth(new_photoWidth)\n setPhotoHeight(new_photoHeight)\n }\n }, [backgroundRatio])\n\n useEffect(() => {\n const {\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n } = updateRange(photoWidth * editorWidth, photoHeight * editorHeight, scale, editorWidth, editorHeight)\n\n set_rangeMinX(rangeMinX)\n set_rangeMinY(rangeMinY)\n set_rangeMaxX(rangeMaxX)\n set_rangeMaxY(rangeMaxY)\n }, [\n photoWidth,\n photoHeight,\n editorWidth,\n editorHeight,\n scale,\n ])\n\n useEffect(() => {\n set_x(0)\n set_y(0)\n set_add_x(0)\n set_add_y(0)\n set_scale(1)\n }, [backgroundURL])\n\n const handleMove = useCallback(event => {\n const prev_x = event.target.dataset.x * 1\n const prev_y = event.target.dataset.y * 1\n\n const new_x = clamp(prev_x + event.deltaX, rangeMinX, rangeMaxX)\n const new_y = clamp(prev_y + event.deltaY, rangeMinY, rangeMaxY)\n\n if (event.isFinal) {\n set_x(new_x || 0)\n set_y(new_y || 0)\n set_add_x(0)\n set_add_y(0)\n }else{\n set_add_x(new_x - prev_x || 0)\n set_add_y(new_y - prev_y || 0)\n }\n }, [\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n ])\n\n const handleScale = useCallback((event, delta, deltaX, deltaY) => {\n event.preventDefault()\n\n const prev_scale = event.target.dataset.scale * 1\n const new_scale = clamp(prev_scale + delta / 200, minScale, maxScale)\n set_scale(new_scale || 1)\n\n const prev_x = event.target.dataset.x * 1\n const prev_y = event.target.dataset.y * 1\n set_x(clamp(prev_x, rangeMinX, rangeMaxX) || 0)\n set_y(clamp(prev_y, rangeMinY, rangeMaxY) || 0)\n }, [\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n ])\n\n useEffect(() => {\n if (!hammer_got_init && !!editorRef && !!editorRef.current) {\n const element = editorRef.current\n\n element.addEventListener('mousedown', event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchstart\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchend\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchmove\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n\n set_hammertime(new Hammer(element, {\n direction: 'DIRECTION_ALL',\n }))\n\n set_hamster(Hamster(element))\n\n set_hammer_got_init(true)\n }\n }, [editorRef, hammer_got_init])\n\n useEffect(() => {\n if (!!hammertime && !!hamster && hammer_got_init && !!editorRef && !!editorRef.current) {\n hammertime.on('pan', handleMove)\n hamster.wheel(handleScale)\n\n return function () {\n hammertime.off('pan', handleMove)\n hamster.unwheel()\n }\n }\n }, [editorRef, handleMove, handleScale, hammer_got_init, hammertime, hamster])\n\n return (\n \n \n \n \n \n )\n}\n\nexport default Editor\n","export default __webpack_public_path__ + \"static/media/HeaderImage.1f39a672.svg\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAQ4AgMAAACRfoQcAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURVIreVIreVEreKabc9cAAAADdFJOU//+/Q3dsqEAAATsSURBVHgB7dAxAQAABAAwQtI/ipMCvi3CgiMV6NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NChQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOBTp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQwc6dOjQoUOHDh06dOjQoUOHDh06dOjQgQ4dOnTo0KFDhw4dOnTo0KFDhw4dOnSgQ4cOHTp06NChQ4cOHTp06NChQ4cOHTx06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHTrQoUOHDh06dOjQoUOHDh06dOjQoUOHDnTo0KFDhw4dOnTo0KFDhw4dOnTo0KEDHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4d6NChQ4cOHTp06NChQ4cOHTp06NChQ4cCHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4dxeoB30xd38yzCvgAAAAASUVORK5CYII=\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAALSURBVHgBY2BgAAAAAwABjPg5OgAAAABJRU5ErkJggg==\"","import React from 'react'\n\n// https://projectfluent.org/play/\n\n// import {LocalizationProvider,Localized} from '@fluent/react' // '@fluent/react/compat'\nimport { ReactLocalization, LocalizationProvider } from '@fluent/react'\nimport { FluentBundle, FluentResource } from '@fluent/bundle'\nimport { negotiateLanguages } from '@fluent/langneg'\n\nconst _supportedLocales_ = [\n 'de',\n 'en',\n]\nconst _defaultLocale_ = 'en'\n\n\nasync function fetchMessages(locale) {\n const path = await import('./locales/' + locale + '.ftl')\n\n const response = await fetch(path.default)\n const messages = await response.text()\n\n return { [locale]: new FluentResource(messages) }\n}\n\nfunction getDefaultBundles() {\n const bundle = new FluentBundle('')\n bundle.addResource(new FluentResource(''))\n return new ReactLocalization([bundle])\n}\n\nasync function createMessagesGenerator(currentLocales) {\n const fetched = await Promise.all(\n currentLocales.map(fetchMessages)\n )\n const messages = fetched.reduce(\n (obj, cur) => Object.assign(obj, cur)\n )\n\n return function* generateBundles() {\n for (const locale of currentLocales) {\n const bundle = new FluentBundle(locale)\n bundle.addResource(messages[locale])\n yield bundle\n }\n }\n}\n\nexport class AppLocalizationProvider extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n bundles: getDefaultBundles(),\n }\n }\n\n async componentDidMount() {\n const currentLocales = negotiateLanguages(\n this.props.userLocales,\n _supportedLocales_,\n { defaultLocale: _defaultLocale_ }\n )\n\n const generateBundles = await createMessagesGenerator(currentLocales)\n this.setState({ bundles: new ReactLocalization(generateBundles()) })\n }\n\n render() {\n const { children } = this.props\n const { bundles } = this.state\n\n if (!bundles) {\n // Show a loader.\n return
Loading texts…
\n }\n\n return (\n \n {children}\n \n )\n }\n}\n","import { useState, useCallback } from 'react'\nimport './App.css'\nimport { useDropzone } from 'react-dropzone'\nimport mergeImages from 'merge-images'\nimport FrameChooser from './FrameChooser.js'\nimport HashtagChooser from './HashtagChooser.js'\nimport Editor from './Editor.js'\nimport HeaderImage from './HeaderImage.svg'\nimport purpleBG from './purpleBG.png'\nimport empty_1x1 from './empty_1x1.png'\n\nimport 'intl-pluralrules'\nimport { AppLocalizationProvider } from './l10n.js'\nimport { withLocalization, Localized } from './Localized.js'\n\nconst userLocales = ['de'] || navigator.languages\n// const userLocales = navigator.languages\n\nconst frameSize = 1080\n\nfunction getOrientation(file, callback) {\n // Source: http://stackoverflow.com/a/32490603\n // (With some modifications: I just made the code fit the style-guide.)\n const reader = new FileReader()\n\n reader.onload = function (event) {\n const view = new DataView(event.target.result)\n\n if (view.getUint16(0, false) !== 0xFFD8) {\n return callback(-2)\n }\n\n const length = view.byteLength\n let offset = 2\n\n while (offset < length) {\n const marker = view.getUint16(offset, false)\n offset += 2\n\n if (marker === 0xFFE1) {\n if (view.getUint32(offset += 2, false) !== 0x45786966) {\n return callback(-1)\n }\n const little = view.getUint16(offset += 6, false) === 0x4949\n offset += view.getUint32(offset + 4, little)\n const tags = view.getUint16(offset, little)\n offset += 2\n\n for (var i = 0; i < tags; i++) {\n if (view.getUint16(offset + (i * 12), little) === 0x0112) {\n return callback(view.getUint16(offset + (i * 12) + 8, little))\n }\n }\n } else if ((marker & 0xFF00) !== 0xFF00) {\n break\n } else {\n offset += view.getUint16(offset, false)\n }\n }\n return callback(-1)\n }\n\n reader.readAsArrayBuffer(file.slice(0, 64 * 1024))\n}\n\nfunction trigger_download(name, data){\n const a = document.createElement('a')\n document.body.appendChild(a)\n // a.target = '_blank'\n a.download = name\n a.href = data\n a.click()\n a.remove()\n}\n\nfunction App({ getString }) { \n const [frameURL, setFrameURL] = useState(null)\n const [hashtagURL, setHashtagURL] = useState(null)\n const [originalPhoto, setOriginalPhoto] = useState(null)\n const [originalPhotoRation, setOriginalPhotoRation] = useState(1)\n const [orientation, set_orientation] = useState(null)\n\n\n // const [combinedImage, set_combinedImage] = useState(null)\n\n const [width, set_width] = useState(0)\n const [height, set_height] = useState(0)\n\n const [cords, setCords] = useState({x:0, y:0, scale:1})\n\n const handleFrameURL = useCallback(newFrameURL => {\n setFrameURL(newFrameURL)\n }, [setFrameURL])\n\n const handleHashtagURL = useCallback(newHashtagURL => {\n setHashtagURL(newHashtagURL)\n }, [setHashtagURL])\n\n const handleCordsChange = useCallback(({x, y, scale}) => {\n setCords({ x, y, scale })\n }, [])\n\n const handleReadFile = useCallback(file => {\n if (!(!!file)) {\n return;\n }\n\n const reader = new FileReader()\n reader.onload = reader_event => {\n const img = new Image()\n img.onload = function () {\n let width, height;\n if (img.width < img.height) {\n height = (img.height / img.width) * frameSize\n width = frameSize\n } else {\n height = frameSize\n width = (img.width / img.height) * frameSize\n }\n\n getOrientation(file, new_orientation => {\n let original_ration = 1\n // use the correct image orientation\n switch (new_orientation) {\n // Source: https://stackoverflow.com/a/30242954/2387277\n // Source: https://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin\n case 2:\n // horizontal flip\n original_ration = height / width\n break\n case 3:\n // 180° rotate left\n original_ration = height / width\n break\n case 4:\n // vertical flip\n original_ration = height / width\n break\n case 5:\n // vertical flip + 90 rotate right\n original_ration = width / height\n break\n case 6:\n // 90° rotate right\n original_ration = width / height\n break\n case 7:\n // horizontal flip + 90 rotate right\n original_ration = width / height\n break\n case 8:\n // 90° rotate left\n original_ration = width / height\n break\n default:\n original_ration = height / width\n break\n }\n\n set_width(width)\n set_height(height)\n setOriginalPhoto(reader_event.target.result)\n set_orientation(new_orientation)\n setOriginalPhotoRation(original_ration)\n })\n }\n img.src = reader_event.target.result\n }\n reader.readAsDataURL(file)\n }, [])\n\n const handleImage = useCallback(files_event => {\n handleReadFile(files_event.target.files[0])\n }, [handleReadFile])\n\n const onDrop = useCallback(acceptedFiles => {\n handleReadFile(acceptedFiles[0])\n }, [handleReadFile])\n\n const handleDownload = useCallback(() => {\n const img = new Image()\n img.onload = function () {\n const canvas = document.createElement('canvas')\n canvas.width = frameSize\n canvas.height = frameSize\n\n const ctx = canvas.getContext('2d', { alpha: true })\n\n // use the correct image orientation\n switch (orientation) {\n // Source: https://stackoverflow.com/a/30242954/2387277\n // Source: https://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin\n case 2:\n // horizontal flip\n ctx.translate(canvas.width, 0)\n ctx.scale(-1, 1)\n break\n case 3:\n // 180° rotate left\n ctx.translate(canvas.width, canvas.height)\n ctx.rotate(Math.PI)\n break\n case 4:\n // vertical flip\n ctx.translate(0, canvas.height)\n ctx.scale(1, -1)\n break\n case 5:\n // vertical flip + 90 rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.scale(1, -1)\n break\n case 6:\n // 90° rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.translate(0, -canvas.height)\n break\n case 7:\n // horizontal flip + 90 rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.translate(canvas.width, -canvas.height)\n ctx.scale(-1, 1)\n break\n case 8:\n // 90° rotate left\n ctx.rotate(-0.5 * Math.PI)\n ctx.translate(-canvas.width, 0)\n break\n default:\n break\n }\n\n\n const width_scaled = width * cords.scale\n const height_scaled = height * cords.scale\n\n ctx.drawImage(\n img,\n cords.x * 3.5 + (frameSize - width_scaled) * 0.5,\n cords.y * 3.5 + (frameSize - height_scaled) * 0.5,\n width_scaled,\n height_scaled,\n )\n // ctx.drawImage(\n // img,\n // ((frameSize - width_scaled) * 0.5),\n // ((frameSize - height_scaled) * 0.5),\n // width_scaled,\n // height_scaled,\n // )\n\n const pngUrl = canvas.toDataURL()\n\n mergeImages([\n purpleBG,\n ...(pngUrl ? [pngUrl] : []),\n ...(frameURL ? [frameURL] : []),\n ...(hashtagURL ? [hashtagURL] : []),\n ])\n .then(b64 => {\n // set_combinedImage(b64)\n trigger_download('volt-profile-picture.png', b64)\n })\n\n }\n img.src = originalPhoto\n }, [\n originalPhoto,\n cords.x,\n cords.y,\n cords.scale,\n orientation,\n frameURL,\n hashtagURL,\n height,\n width,\n ])\n\n const { isDragActive, getRootProps } = useDropzone({\n onDrop,\n accept: 'image/*',\n maxFiles: 1,\n noKeyboard: true,\n })\n\n\n return (\n
\n \"Volt\n\n
\n \n
\n\n

\n

\n \n

\n\n \n\n {!!originalPhoto ? (<>\n

\n \n

\n \n ) : null}\n\n {!!originalPhoto && !!frameURL ? (<>\n

\n {/*\n

Edit your Photo:

\n

Your can reposition the image and scale it. Use pinch-to-zoom or scroll to scale.

\n */}\n\n \n\n \n ) : null}\n\n \n
\n )\n}\nconst AppLocalized = withLocalization(App)\n\n\nfunction AppWrapper() {\n return \n \n \n}\nexport default withLocalization(AppWrapper)\n\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry)\n getFID(onPerfEntry)\n getFCP(onPerfEntry)\n getLCP(onPerfEntry)\n getTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n)\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n"],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/main.88f0f141.chunk.js b/static/js/main.88f0f141.chunk.js deleted file mode 100644 index 57605e8..0000000 --- a/static/js/main.88f0f141.chunk.js +++ /dev/null @@ -1,2 +0,0 @@ -(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[0],{37:function(e,t,a){},41:function(e,t,a){var n={"./ProfileFrame Blue Bars.png":[49,6],"./ProfileFrame Green Bars.png":[50,7],"./ProfileFrame Mixed Bars.png":[51,8],"./ProfileFrame Purple.png":[52,9],"./ProfileFrame Red Bars.png":[53,10],"./ProfileFrame White Bars.png":[54,11],"./ProfileFrame Yellow Bars.png":[55,12],"./white-round-bottom-logo.png":[56,13]};function r(e){if(!a.o(n,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=n[e],r=t[0];return a.e(t[1]).then((function(){return a(r)}))}r.keys=function(){return Object.keys(n)},r.id=41,e.exports=r},42:function(e,t,a){var n={"./DeineWahl.png":[57,14],"./Europa.png":[58,15],"./JetztBistDuDran.png":[59,16],"./Volt.png":[60,17],"./Volt21.png":[61,18],"./VoltEuropa.png":[62,19],"./VoltRLP.png":[63,20],"./VoteVolt.png":[64,21],"./paneurop\xe4isch.png":[65,22],"./pragmatisch.png":[66,23],"./progressiv.png":[67,24]};function r(e){if(!a.o(n,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=n[e],r=t[0];return a.e(t[1]).then((function(){return a(r)}))}r.keys=function(){return Object.keys(n)},r.id=42,e.exports=r},47:function(e,t,a){var n={"./de.ftl":[68,3],"./en.ftl":[69,4]};function r(e){if(!a.o(n,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=n[e],r=t[0];return a.e(t[1]).then((function(){return a(r)}))}r.keys=function(){return Object.keys(n)},r.id=47,e.exports=r},48:function(e,t,a){"use strict";a.r(t);var n=a(1),r=a(0),c=a.n(r),o=a(25),s=a.n(o),u=a(8),i=a(17),O=a(2),h=(a(37),a(30)),l=a(27),d=a(4),j=a.n(d),f=a(9);var b=function(e){var t=e.onChange,c=Object(r.useState)([]),o=Object(O.a)(c,2),s=o[0],u=o[1],i=Object(r.useState)(null),h=Object(O.a)(i,2),l=h[0],d=h[1];Object(r.useEffect)((function(){function e(){return(e=Object(f.a)(j.a.mark((function e(){return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:Promise.all(["ProfileFrame Purple","ProfileFrame Mixed Bars","ProfileFrame Yellow Bars","ProfileFrame Red Bars","ProfileFrame Blue Bars","ProfileFrame Green Bars","ProfileFrame White Bars","white-round-bottom-logo"].map(function(){var e=Object(f.a)(j.a.mark((function e(t){return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.t0=t,e.next=3,a(41)("./".concat(t,".png"));case 3:return e.t1=e.sent,e.abrupt("return",{name:e.t0,src:e.t1});case 5:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}())).then((function(e){u(e),d(e[0].src.default)}));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[]);var b=Object(r.useCallback)((function(e){d(e.target.dataset.src)}),[d]);return Object(r.useEffect)((function(){t(l)}),[t,l]),Object(n.jsxs)("div",{className:"FrameChooser",children:[Object(n.jsx)("h2",{children:"Choose a frame:"}),s.map((function(e){var t=e.src.default,a=l===t;return Object(n.jsx)("img",{alt:e.name,"data-src":t,src:t,className:a?"frame choosen":"frame",onClick:b},t)}))]})};var p=function(e){var t=e.onChange,c=Object(r.useState)([]),o=Object(O.a)(c,2),s=o[0],u=o[1],i=Object(r.useState)(null),h=Object(O.a)(i,2),l=h[0],d=h[1];Object(r.useEffect)((function(){function e(){return(e=Object(f.a)(j.a.mark((function e(){return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:Promise.all(["","DeineWahl","Europa","JetztBistDuDran","paneurop\xe4isch","pragmatisch","progressiv","Volt","Volt21","VoltEuropa","VoltRLP","VoteVolt"].map(function(){var e=Object(f.a)(j.a.mark((function e(t){return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(e.t0=t,""!==t){e.next=5;break}e.t1="",e.next=8;break;case 5:return e.next=7,a(42)("./".concat(t,".png"));case 7:e.t1=e.sent;case 8:return e.t2=e.t1,e.abrupt("return",{name:e.t0,src:e.t2});case 10:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}())).then((function(e){u(e),d(e[0].src.default)}));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[]);var b=Object(r.useCallback)((function(e){d(e.target.dataset.src)}),[d]);return Object(r.useEffect)((function(){t(l)}),[t,l]),Object(n.jsxs)("div",{className:"HashtagChooser",children:[Object(n.jsx)("h2",{children:"Choose a Hashtag:"}),s.map((function(e){var t=e.src.default,a=l===t;return Object(n.jsx)("button",{"data-src":t,className:a?"hashtag_button choosen":"hashtag_button",onClick:b,children:""===e.name?"No Hashtag":"#"+e.name},t)}))]})},g=a(28),v=a.n(g),w=a(29),D=a.n(w);function A(e,t,a){return Math.min(Math.max(t,e),a)}var m=function(e){var t=e.onChange,a=e.backgroundURL,c=e.backgroundRatio,o=e.frameURL,s=e.hashtagURL,u=Object(r.useRef)(null),i=Object(r.useRef)(null),h=Object(r.useState)(!1),l=Object(O.a)(h,2),d=l[0],j=l[1],f=Object(r.useState)(null),b=Object(O.a)(f,2),p=b[0],g=b[1],w=Object(r.useState)(null),m=Object(O.a)(w,2),C=m[0],Q=m[1],H=Object(r.useState)(0),x=Object(O.a)(H,2),T=x[0],U=x[1],F=Object(r.useState)(0),N=Object(O.a)(F,2),k=N[0],K=N[1],E=Object(r.useState)(0),B=Object(O.a)(E,2),y=B[0],P=B[1],S=Object(r.useState)(0),R=Object(O.a)(S,2),L=R[0],M=R[1],I=Object(r.useState)(1),V=Object(O.a)(I,2),Y=V[0],_=V[1],z=Object(r.useState)(300),J=Object(O.a)(z,2),X=J[0],G=J[1],W=Object(r.useState)(300),q=Object(O.a)(W,2),Z=q[0],$=q[1],ee=Object(r.useState)(300),te=Object(O.a)(ee,2),ae=te[0],ne=te[1],re=Object(r.useState)(300),ce=Object(O.a)(re,2),oe=ce[0],se=ce[1],ue=Object(r.useState)(0),ie=Object(O.a)(ue,2),Oe=ie[0],he=ie[1],le=Object(r.useState)(0),de=Object(O.a)(le,2),je=de[0],fe=de[1],be=Object(r.useState)(0),pe=Object(O.a)(be,2),ge=pe[0],ve=pe[1],we=Object(r.useState)(0),De=Object(O.a)(we,2),Ae=De[0],me=De[1];Object(r.useEffect)((function(){t&&t({x:T,y:k,scale:Y})}),[t,T,k,Y]),Object(r.useEffect)((function(){if(u&&u.current){var e=u.current.offsetWidth,t=u.current.offsetHeight;se(t),ne(e);var a=1,n=1;c<1?a=1/c:c>1&&(n=1*c),G(a),$(n)}}),[c]),Object(r.useEffect)((function(){var e=function(e,t,a,n,r){var c=Math.max(0,e*a-n)/2,o=Math.max(0,t*a-r)/2;return{rangeMaxX:c,rangeMinX:0-c,rangeMaxY:o,rangeMinY:0-o}}(X*ae,Z*oe,Y,ae,oe),t=e.rangeMinX,a=e.rangeMinY,n=e.rangeMaxX,r=e.rangeMaxY;he(t),fe(a),ve(n),me(r)}),[X,Z,ae,oe,Y]),Object(r.useEffect)((function(){U(0),K(0),P(0),M(0),_(1)}),[a]);var Ce=Object(r.useCallback)((function(e){var t=1*e.target.dataset.x,a=1*e.target.dataset.y,n=A(t+e.deltaX,Oe,ge),r=A(a+e.deltaY,je,Ae);e.isFinal?(U(n||0),K(r||0),P(0),M(0)):(P(n-t||0),M(r-a||0))}),[Oe,je,ge,Ae]),Qe=Object(r.useCallback)((function(e,t,a,n){e.preventDefault();var r=A(1*e.target.dataset.scale+t/200,1,8);_(r||1);var c=1*e.target.dataset.x,o=1*e.target.dataset.y;U(A(c,Oe,ge)||0),K(A(o,je,Ae)||0)}),[Oe,je,ge,Ae]);return Object(r.useEffect)((function(){if(!d&&u&&u.current){var e=u.current;e.addEventListener("mousedown",(function(e){e.preventDefault()}),!1),e.addEventListener("touchstart",(function(e){e.preventDefault()}),!1),e.addEventListener("touchend",(function(e){e.preventDefault()}),!1),e.addEventListener("touchmove",(function(e){e.preventDefault()}),!1),g(new v.a(e,{direction:"DIRECTION_ALL"})),Q(D()(e)),j(!0)}}),[u,d]),Object(r.useEffect)((function(){if(p&&C&&d&&u&&u.current)return p.on("pan",Ce),C.wheel(Qe),function(){p.off("pan",Ce),C.unwheel()}}),[u,Ce,Qe,d,p,C]),Object(n.jsxs)("div",{className:"Editor",ref:u,"data-x":T,"data-y":k,"data-scale":Y,children:[Object(n.jsx)("img",{src:a,ref:i,alt:"",className:"background",style:{width:100*X+"%",height:100*Z+"%",transform:"translate3d(calc(-50% + ".concat(T+y,"px), calc(-50% + ").concat(k+L,"px), 0) scale(").concat(Y,",").concat(Y,")")}}),Object(n.jsx)("img",{src:o,alt:"",className:"foreground"}),Object(n.jsx)("img",{src:s,alt:"",className:"hashtag"})]})},C=a.p+"static/media/HeaderImage.1f39a672.svg",Q="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAQ4AgMAAACRfoQcAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURVIreVIreVEreKabc9cAAAADdFJOU//+/Q3dsqEAAATsSURBVHgB7dAxAQAABAAwQtI/ipMCvi3CgiMV6NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NChQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOBTp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQwc6dOjQoUOHDh06dOjQoUOHDh06dOjQgQ4dOnTo0KFDhw4dOnTo0KFDhw4dOnSgQ4cOHTp06NChQ4cOHTp06NChQ4cOHTx06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHTrQoUOHDh06dOjQoUOHDh06dOjQoUOHDnTo0KFDhw4dOnTo0KFDhw4dOnTo0KEDHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4d6NChQ4cOHTp06NChQ4cOHTp06NChQ4cCHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4dxeoB30xd38yzCvgAAAAASUVORK5CYII=",H="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAALSURBVHgBY2BgAAAAAwABjPg5OgAAAABJRU5ErkJggg==",x=(a(43),a(6)),T=a(21),U=a(5),F=a(7),N=a(10),k=a(11),K=a(16),E=a(20),B=a(31),y=["de","en"];function P(e){return S.apply(this,arguments)}function S(){return(S=Object(f.a)(j.a.mark((function e(t){var n,r,c;return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,a(47)("./"+t+".ftl");case 2:return n=e.sent,e.next=5,fetch(n.default);case 5:return r=e.sent,e.next=8,r.text();case 8:return c=e.sent,e.abrupt("return",Object(T.a)({},t,new E.b(c)));case 10:case"end":return e.stop()}}),e)})))).apply(this,arguments)}function R(){var e=new E.a("");return e.addResource(new E.b("")),new K.c([e])}function L(e){return M.apply(this,arguments)}function M(){return(M=Object(f.a)(j.a.mark((function e(t){var a,n;return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,Promise.all(t.map(P));case 2:return a=e.sent,n=a.reduce((function(e,t){return Object.assign(e,t)})),e.abrupt("return",j.a.mark((function e(){var a,r,c,o;return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:a=Object(x.a)(t),e.prev=1,a.s();case 3:if((r=a.n()).done){e.next=11;break}return c=r.value,(o=new E.a(c)).addResource(n[c]),e.next=9,o;case 9:e.next=3;break;case 11:e.next=16;break;case 13:e.prev=13,e.t0=e.catch(1),a.e(e.t0);case 16:return e.prev=16,a.f(),e.finish(16);case 19:case"end":return e.stop()}}),e,null,[[1,13,16,19]])})));case 5:case"end":return e.stop()}}),e)})))).apply(this,arguments)}var I=function(e){Object(N.a)(a,e);var t=Object(k.a)(a);function a(e){var n;return Object(U.a)(this,a),(n=t.call(this,e)).state={bundles:R()},n}return Object(F.a)(a,[{key:"componentDidMount",value:function(){var e=Object(f.a)(j.a.mark((function e(){var t,a;return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=Object(B.a)(this.props.userLocales,y,{defaultLocale:"en"}),e.next=3,L(t);case 3:a=e.sent,this.setState({bundles:new K.c(a())});case 5:case"end":return e.stop()}}),e,this)})));return function(){return e.apply(this,arguments)}}()},{key:"render",value:function(){var e=this.props.children,t=this.state.bundles;return t?Object(n.jsx)(K.a,{l10n:t,children:e}):Object(n.jsx)("div",{children:"Loading texts\u2026"})}}]),a}(c.a.Component),V=(a(12),function(e){return Object(n.jsx)(K.b,Object(u.a)(Object(u.a)({},e),{},{elems:Object(u.a)({br:Object(n.jsx)("br",{})},e.elems),children:Object(n.jsx)(c.a.Fragment,{children:e.children})}),e.id)});var Y=navigator.languages,_=1080;var z=function(){var e=Object(r.useState)(null),t=Object(O.a)(e,2),a=t[0],c=t[1],o=Object(r.useState)(null),s=Object(O.a)(o,2),d=s[0],j=s[1],f=Object(r.useState)(null),g=Object(O.a)(f,2),v=g[0],w=g[1],D=Object(r.useState)(1),A=Object(O.a)(D,2),x=A[0],T=A[1],U=Object(r.useState)(null),F=Object(O.a)(U,2),N=F[0],k=F[1],K=Object(r.useState)(0),E=Object(O.a)(K,2),B=E[0],y=E[1],P=Object(r.useState)(0),S=Object(O.a)(P,2),R=S[0],L=S[1],M=Object(r.useState)({x:0,y:0,scale:1}),z=Object(O.a)(M,2),J=z[0],X=z[1],G=Object(r.useCallback)((function(e){c(e)}),[c]),W=Object(r.useCallback)((function(e){j(e)}),[j]),q=Object(r.useCallback)((function(e){var t=e.x,a=e.y,n=e.scale;X({x:t,y:a,scale:n})}),[]),Z=Object(r.useCallback)((function(e){if(e){var t=new FileReader;t.onload=function(t){var a=new Image;a.onload=function(){var n,r;a.width {\n async function loadFrames(){\n Promise.all(\n [\n 'ProfileFrame Purple',\n 'ProfileFrame Mixed Bars',\n 'ProfileFrame Yellow Bars',\n 'ProfileFrame Red Bars',\n 'ProfileFrame Blue Bars',\n 'ProfileFrame Green Bars',\n 'ProfileFrame White Bars',\n 'white-round-bottom-logo',\n ]\n .map(async frame_filename => {\n return {\n name: frame_filename,\n src: await import(`./frames/${frame_filename}.png`),\n }\n })\n )\n .then(new_frames => {\n setFrames(new_frames)\n setChoosenFrame(new_frames[0].src.default)\n })\n }\n loadFrames()\n }, [])\n\n const handleImageChoosing = useCallback(event => {\n setChoosenFrame(event.target.dataset.src)\n }, [setChoosenFrame])\n\n useEffect(() => {\n onChange(choosenFrame)\n }, [onChange, choosenFrame])\n\n return (\n
\n

Choose a frame:

\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return {frame.name}\n })\n } \n
\n )\n}\n\nexport default FrameChooser\n","import { useState, useEffect, useCallback } from 'react'\n\nfunction HashtagChooser({ onChange }) {\n const [frames, setFrames] = useState([])\n const [choosenFrame, setChoosenFrame] = useState(null)\n\n useEffect(() => {\n async function loadFrames() {\n Promise.all(\n [\n '',\n 'DeineWahl',\n 'Europa',\n 'JetztBistDuDran',\n 'paneuropäisch',\n 'pragmatisch',\n 'progressiv',\n 'Volt',\n 'Volt21',\n 'VoltEuropa',\n 'VoltRLP',\n 'VoteVolt',\n ]\n .map(async frame_filename => {\n return {\n name: frame_filename,\n src: frame_filename === '' ? '' : await import(`./hashtags/${frame_filename}.png`),\n }\n })\n )\n .then(new_frames => {\n setFrames(new_frames)\n setChoosenFrame(new_frames[0].src.default)\n })\n }\n loadFrames()\n }, [])\n\n const handleImageChoosing = useCallback(event => {\n setChoosenFrame(event.target.dataset.src)\n }, [setChoosenFrame])\n\n useEffect(() => {\n onChange(choosenFrame)\n }, [onChange, choosenFrame])\n\n return (\n
\n

Choose a Hashtag:

\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return \n })\n }\n
\n )\n}\n\nexport default HashtagChooser\n","import { useEffect, useRef, useState, useCallback } from 'react'\n\nimport Hammer from 'hammerjs'\nimport Hamster from 'hamsterjs'\n\nfunction updateRange(imageWidth, imageHeight, imageScale, containerWidth, containerHeight) {\n\n const rangeX = Math.max(0, (imageWidth * imageScale) - containerWidth)\n const rangeY = Math.max(0, (imageHeight * imageScale) - containerHeight)\n\n const rangeMaxX = (rangeX / 2)\n const rangeMinX = 0 - rangeMaxX\n\n const rangeMaxY = (rangeY / 2)\n const rangeMinY = 0 - rangeMaxY\n\n return {\n rangeMaxX,\n rangeMinX,\n rangeMaxY,\n rangeMinY,\n }\n}\n\nfunction clamp(value, min, max) {\n return Math.min(Math.max(min, value), max)\n}\n\n\n\nlet minScale = 1;\nlet maxScale = 8;\n\n\n\nfunction Editor({ onChange, backgroundURL, backgroundRatio, frameURL, hashtagURL }) {\n const editorRef = useRef(null)\n const backgroundImageRef = useRef(null)\n\n const [hammer_got_init, set_hammer_got_init] = useState(false)\n\n const [hammertime, set_hammertime] = useState(null)\n const [hamster, set_hamster] = useState(null)\n\n const [x, set_x] = useState(0)\n const [y, set_y] = useState(0)\n const [add_x, set_add_x] = useState(0)\n const [add_y, set_add_y] = useState(0)\n const [scale, set_scale] = useState(1)\n // const [add_scale, set_add_scale] = useState(0)\n\n const [photoWidth, setPhotoWidth] = useState(300)\n const [photoHeight, setPhotoHeight] = useState(300)\n const [editorWidth, setEditorWidth] = useState(300)\n const [editorHeight, setEditorHeight] = useState(300)\n\n const [rangeMinX, set_rangeMinX] = useState(0)\n const [rangeMinY, set_rangeMinY] = useState(0)\n const [rangeMaxX, set_rangeMaxX] = useState(0)\n const [rangeMaxY, set_rangeMaxY] = useState(0)\n\n useEffect(() => {\n if (!!onChange) {\n onChange({ x, y, scale})\n }\n }, [onChange, x, y, scale])\n\n useEffect(() => {\n if (!!editorRef && !!editorRef.current) {\n const new_editorWidth = editorRef.current.offsetWidth\n const new_editorHeight = editorRef.current.offsetHeight\n setEditorHeight(new_editorHeight)\n setEditorWidth(new_editorWidth)\n\n let new_photoWidth = 1\n let new_photoHeight = 1\n if (backgroundRatio < 1) {\n new_photoWidth = 1 / backgroundRatio\n } else if (backgroundRatio > 1) {\n new_photoHeight = 1 * backgroundRatio\n }\n\n setPhotoWidth(new_photoWidth)\n setPhotoHeight(new_photoHeight)\n }\n }, [backgroundRatio])\n\n useEffect(() => {\n const {\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n } = updateRange(photoWidth * editorWidth, photoHeight * editorHeight, scale, editorWidth, editorHeight)\n\n set_rangeMinX(rangeMinX)\n set_rangeMinY(rangeMinY)\n set_rangeMaxX(rangeMaxX)\n set_rangeMaxY(rangeMaxY)\n }, [\n photoWidth,\n photoHeight,\n editorWidth,\n editorHeight,\n scale,\n ])\n\n useEffect(() => {\n set_x(0)\n set_y(0)\n set_add_x(0)\n set_add_y(0)\n set_scale(1)\n }, [backgroundURL])\n\n const handleMove = useCallback(event => {\n const prev_x = event.target.dataset.x * 1\n const prev_y = event.target.dataset.y * 1\n\n const new_x = clamp(prev_x + event.deltaX, rangeMinX, rangeMaxX)\n const new_y = clamp(prev_y + event.deltaY, rangeMinY, rangeMaxY)\n\n if (event.isFinal) {\n set_x(new_x || 0)\n set_y(new_y || 0)\n set_add_x(0)\n set_add_y(0)\n }else{\n set_add_x(new_x - prev_x || 0)\n set_add_y(new_y - prev_y || 0)\n }\n }, [\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n ])\n\n const handleScale = useCallback((event, delta, deltaX, deltaY) => {\n event.preventDefault()\n\n const prev_scale = event.target.dataset.scale * 1\n const new_scale = clamp(prev_scale + delta / 200, minScale, maxScale)\n set_scale(new_scale || 1)\n\n const prev_x = event.target.dataset.x * 1\n const prev_y = event.target.dataset.y * 1\n set_x(clamp(prev_x, rangeMinX, rangeMaxX) || 0)\n set_y(clamp(prev_y, rangeMinY, rangeMaxY) || 0)\n }, [\n rangeMinX,\n rangeMinY,\n rangeMaxX,\n rangeMaxY,\n ])\n\n useEffect(() => {\n if (!hammer_got_init && !!editorRef && !!editorRef.current) {\n const element = editorRef.current\n\n element.addEventListener('mousedown', event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchstart\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchend\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n element.addEventListener(\"touchmove\", event => {\n event.preventDefault()\n // event.stopPropagation()\n }, false)\n\n set_hammertime(new Hammer(element, {\n direction: 'DIRECTION_ALL',\n }))\n\n set_hamster(Hamster(element))\n\n set_hammer_got_init(true)\n }\n }, [editorRef, hammer_got_init])\n\n useEffect(() => {\n if (!!hammertime && !!hamster && hammer_got_init && !!editorRef && !!editorRef.current) {\n hammertime.on('pan', handleMove)\n hamster.wheel(handleScale)\n\n return function () {\n hammertime.off('pan', handleMove)\n hamster.unwheel()\n }\n }\n }, [editorRef, handleMove, handleScale, hammer_got_init, hammertime, hamster])\n\n return (\n \n \n \n \n \n )\n}\n\nexport default Editor\n","export default __webpack_public_path__ + \"static/media/HeaderImage.1f39a672.svg\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAQ4AgMAAACRfoQcAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURVIreVIreVEreKabc9cAAAADdFJOU//+/Q3dsqEAAATsSURBVHgB7dAxAQAABAAwQtI/ipMCvi3CgiMV6NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NChQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOBTp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQwc6dOjQoUOHDh06dOjQoUOHDh06dOjQgQ4dOnTo0KFDhw4dOnTo0KFDhw4dOnSgQ4cOHTp06NChQ4cOHTp06NChQ4cOHTx06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHTrQoUOHDh06dOjQoUOHDh06dOjQoUOHDnTo0KFDhw4dOnTo0KFDhw4dOnTo0KEDHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4d6NChQ4cOHTp06NChQ4cOHTp06NChQ4cCHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4dxeoB30xd38yzCvgAAAAASUVORK5CYII=\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAALSURBVHgBY2BgAAAAAwABjPg5OgAAAABJRU5ErkJggg==\"","import React from 'react'\n\n// https://projectfluent.org/play/\n\n// import {LocalizationProvider,Localized} from '@fluent/react' // '@fluent/react/compat'\nimport { ReactLocalization, LocalizationProvider } from '@fluent/react'\nimport { FluentBundle, FluentResource } from '@fluent/bundle'\nimport { negotiateLanguages } from '@fluent/langneg'\n\nconst _supportedLocales_ = [\n 'de',\n 'en',\n]\nconst _defaultLocale_ = 'en'\n\n\nasync function fetchMessages(locale) {\n const path = await import('./locales/' + locale + '.ftl')\n\n const response = await fetch(path.default)\n const messages = await response.text()\n\n return { [locale]: new FluentResource(messages) }\n}\n\nfunction getDefaultBundles() {\n const bundle = new FluentBundle('')\n bundle.addResource(new FluentResource(''))\n return new ReactLocalization([bundle])\n}\n\nasync function createMessagesGenerator(currentLocales) {\n const fetched = await Promise.all(\n currentLocales.map(fetchMessages)\n )\n const messages = fetched.reduce(\n (obj, cur) => Object.assign(obj, cur)\n )\n\n return function* generateBundles() {\n for (const locale of currentLocales) {\n const bundle = new FluentBundle(locale)\n bundle.addResource(messages[locale])\n yield bundle\n }\n }\n}\n\nexport class AppLocalizationProvider extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n bundles: getDefaultBundles(),\n }\n }\n\n async componentDidMount() {\n const currentLocales = negotiateLanguages(\n this.props.userLocales,\n _supportedLocales_,\n { defaultLocale: _defaultLocale_ }\n )\n\n const generateBundles = await createMessagesGenerator(currentLocales)\n this.setState({ bundles: new ReactLocalization(generateBundles()) })\n }\n\n render() {\n const { children } = this.props\n const { bundles } = this.state\n\n if (!bundles) {\n // Show a loader.\n return
Loading texts…
\n }\n\n return (\n \n {children}\n \n )\n }\n}\n","import React from 'react'\nimport {\n Localized as LocalizedOriginal,\n // withLocalization,\n} from '@fluent/react'\n\nimport { FluentContext } from '../node_modules/@fluent/react/esm/context.js'\n\nconst Localized = props => (\n ,\n ...props.elems,\n }}\n >\n {props.children}\n \n)\n\n// A custom withLocalization to have an empty fallback.\n// It is nearly identical to the original.\nfunction withLocalization(Inner) {\n function WithLocalization(props) {\n const l10n = React.useContext(FluentContext)\n\n const getString = (id, args, fallback) => l10n.getString(id, args, fallback || ' ')\n\n return React.createElement(Inner, { getString, ...props })\n }\n return WithLocalization\n}\n\nexport {\n withLocalization,\n Localized,\n Localized as default,\n}\n\n/*\n\nimport { Localized, withLocalization } from '../Localized/'\n\n\nexport default withLocalization(componentName)\n\n\nimport Localized from '../Localized/'\n\n\nimport { withLocalization } from '@fluent/react'\nexport default withLocalization(componentName)\n\n*/\n","import { useState, useCallback } from 'react'\nimport './App.css'\nimport { useDropzone } from 'react-dropzone'\nimport mergeImages from 'merge-images'\nimport FrameChooser from './FrameChooser.js'\nimport HashtagChooser from './HashtagChooser.js'\nimport Editor from './Editor.js'\nimport HeaderImage from './HeaderImage.svg'\nimport purpleBG from './purpleBG.png'\nimport empty_1x1 from './empty_1x1.png'\n\nimport 'intl-pluralrules'\nimport { AppLocalizationProvider } from './l10n.js'\nimport { Localized } from './Localized.js'\n\n// const userLocales = ['de'] || navigator.languages\nconst userLocales = navigator.languages\n\nconst frameSize = 1080\n\nfunction getOrientation(file, callback) {\n // Source: http://stackoverflow.com/a/32490603\n // (With some modifications: I just made the code fit the style-guide.)\n const reader = new FileReader()\n\n reader.onload = function (event) {\n const view = new DataView(event.target.result)\n\n if (view.getUint16(0, false) !== 0xFFD8) {\n return callback(-2)\n }\n\n const length = view.byteLength\n let offset = 2\n\n while (offset < length) {\n const marker = view.getUint16(offset, false)\n offset += 2\n\n if (marker === 0xFFE1) {\n if (view.getUint32(offset += 2, false) !== 0x45786966) {\n return callback(-1)\n }\n const little = view.getUint16(offset += 6, false) === 0x4949\n offset += view.getUint32(offset + 4, little)\n const tags = view.getUint16(offset, little)\n offset += 2\n\n for (var i = 0; i < tags; i++) {\n if (view.getUint16(offset + (i * 12), little) === 0x0112) {\n return callback(view.getUint16(offset + (i * 12) + 8, little))\n }\n }\n } else if ((marker & 0xFF00) !== 0xFF00) {\n break\n } else {\n offset += view.getUint16(offset, false)\n }\n }\n return callback(-1)\n }\n\n reader.readAsArrayBuffer(file.slice(0, 64 * 1024))\n}\n\nfunction trigger_download(name, data){\n const a = document.createElement('a')\n document.body.appendChild(a)\n // a.target = '_blank'\n a.download = name\n a.href = data\n a.click()\n a.remove()\n}\n\nfunction App() {\n const [frameURL, setFrameURL] = useState(null)\n const [hashtagURL, setHashtagURL] = useState(null)\n const [originalPhoto, setOriginalPhoto] = useState(null)\n const [originalPhotoRation, setOriginalPhotoRation] = useState(1)\n const [orientation, set_orientation] = useState(null)\n\n\n // const [combinedImage, set_combinedImage] = useState(null)\n\n const [width, set_width] = useState(0)\n const [height, set_height] = useState(0)\n\n const [cords, setCords] = useState({x:0, y:0, scale:1})\n\n const handleFrameURL = useCallback(newFrameURL => {\n setFrameURL(newFrameURL)\n }, [setFrameURL])\n\n const handleHashtagURL = useCallback(newHashtagURL => {\n setHashtagURL(newHashtagURL)\n }, [setHashtagURL])\n\n const handleCordsChange = useCallback(({x, y, scale}) => {\n setCords({ x, y, scale })\n }, [])\n\n const handleReadFile = useCallback(file => {\n if (!(!!file)) {\n return;\n }\n\n const reader = new FileReader()\n reader.onload = reader_event => {\n const img = new Image()\n img.onload = function () {\n let width, height;\n if (img.width < img.height) {\n height = (img.height / img.width) * frameSize\n width = frameSize\n } else {\n height = frameSize\n width = (img.width / img.height) * frameSize\n }\n\n getOrientation(file, new_orientation => {\n let original_ration = 1\n // use the correct image orientation\n switch (new_orientation) {\n // Source: https://stackoverflow.com/a/30242954/2387277\n // Source: https://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin\n case 2:\n // horizontal flip\n original_ration = height / width\n break\n case 3:\n // 180° rotate left\n original_ration = height / width\n break\n case 4:\n // vertical flip\n original_ration = height / width\n break\n case 5:\n // vertical flip + 90 rotate right\n original_ration = width / height\n break\n case 6:\n // 90° rotate right\n original_ration = width / height\n break\n case 7:\n // horizontal flip + 90 rotate right\n original_ration = width / height\n break\n case 8:\n // 90° rotate left\n original_ration = width / height\n break\n default:\n original_ration = height / width\n break\n }\n\n set_width(width)\n set_height(height)\n setOriginalPhoto(reader_event.target.result)\n set_orientation(new_orientation)\n setOriginalPhotoRation(original_ration)\n })\n }\n img.src = reader_event.target.result\n }\n reader.readAsDataURL(file)\n }, [])\n\n const handleImage = useCallback(files_event => {\n handleReadFile(files_event.target.files[0])\n }, [handleReadFile])\n\n const onDrop = useCallback(acceptedFiles => {\n handleReadFile(acceptedFiles[0])\n }, [handleReadFile])\n\n const handleDownload = useCallback(() => {\n const img = new Image()\n img.onload = function () {\n const canvas = document.createElement('canvas')\n canvas.width = frameSize\n canvas.height = frameSize\n\n const ctx = canvas.getContext('2d', { alpha: true })\n\n // use the correct image orientation\n switch (orientation) {\n // Source: https://stackoverflow.com/a/30242954/2387277\n // Source: https://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin\n case 2:\n // horizontal flip\n ctx.translate(canvas.width, 0)\n ctx.scale(-1, 1)\n break\n case 3:\n // 180° rotate left\n ctx.translate(canvas.width, canvas.height)\n ctx.rotate(Math.PI)\n break\n case 4:\n // vertical flip\n ctx.translate(0, canvas.height)\n ctx.scale(1, -1)\n break\n case 5:\n // vertical flip + 90 rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.scale(1, -1)\n break\n case 6:\n // 90° rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.translate(0, -canvas.height)\n break\n case 7:\n // horizontal flip + 90 rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.translate(canvas.width, -canvas.height)\n ctx.scale(-1, 1)\n break\n case 8:\n // 90° rotate left\n ctx.rotate(-0.5 * Math.PI)\n ctx.translate(-canvas.width, 0)\n break\n default:\n break\n }\n\n\n const width_scaled = width * cords.scale\n const height_scaled = height * cords.scale\n\n ctx.drawImage(\n img,\n cords.x * 3.5 + (frameSize - width_scaled) * 0.5,\n cords.y * 3.5 + (frameSize - height_scaled) * 0.5,\n width_scaled,\n height_scaled,\n )\n // ctx.drawImage(\n // img,\n // ((frameSize - width_scaled) * 0.5),\n // ((frameSize - height_scaled) * 0.5),\n // width_scaled,\n // height_scaled,\n // )\n\n const pngUrl = canvas.toDataURL()\n\n mergeImages([\n purpleBG,\n ...(pngUrl ? [pngUrl] : []),\n ...(frameURL ? [frameURL] : []),\n ...(hashtagURL ? [hashtagURL] : []),\n ])\n .then(b64 => {\n // set_combinedImage(b64)\n trigger_download('volt-profile-picture.png', b64)\n })\n\n }\n img.src = originalPhoto\n }, [\n originalPhoto,\n cords.x,\n cords.y,\n cords.scale,\n orientation,\n frameURL,\n hashtagURL,\n height,\n width,\n ])\n\n const { isDragActive, getRootProps } = useDropzone({\n onDrop,\n accept: 'image/*',\n maxFiles: 1,\n noKeyboard: true,\n })\n\n\n return (\n \n
\n \"Volt\n\n
\n Drop your photo here ...\n
\n\n

\n

It should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.

\n\n \n\n {!!originalPhoto ? (<>\n \n \n ) : null}\n\n {!!originalPhoto && !!frameURL ? (<>\n

Reposition your Photo:

\n {/*\n

Edit your Photo:

\n

Your can reposition the image and scale it. Use pinch-to-zoom or scroll to scale.

\n */}\n\n \n\n \n ) : null}\n\n \n
\n \n )\n}\n\nexport default App\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry)\n getFID(onPerfEntry)\n getFCP(onPerfEntry)\n getLCP(onPerfEntry)\n getTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n)\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n"],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/runtime-main.8cfb6fb7.js b/static/js/runtime-main.86800db0.js similarity index 95% rename from static/js/runtime-main.8cfb6fb7.js rename to static/js/runtime-main.86800db0.js index fcf3cfa..d2110f9 100644 --- a/static/js/runtime-main.8cfb6fb7.js +++ b/static/js/runtime-main.86800db0.js @@ -1,2 +1,2 @@ -!function(e){function r(r){for(var n,u,i=r[0],c=r[1],f=r[2],p=0,s=[];p