From 177ac217da363ddc80d36585343253320547e4fb Mon Sep 17 00:00:00 2001 From: Renan LE CARO Date: Mon, 10 Sep 2018 20:54:03 +0200 Subject: [PATCH] Added file loader, build --- dist/appcache/manifest.appcache | 9 ++-- dist/bundle.f1584b69f9c93e44e8a8.css.map | 1 - dist/bundle.f1584b69f9c93e44e8a8.js.map | 1 - ...a8.css => bundle.f181a7f28dc473f6f66c.css} | 4 +- dist/bundle.f181a7f28dc473f6f66c.css.map | 1 + ...e8a8.js => bundle.f181a7f28dc473f6f66c.js} | 2 +- dist/bundle.f181a7f28dc473f6f66c.js.map | 1 + dist/f585fe2054b88eb6d1e59cdeda7bb5da.svg | 1 + dist/sw.js | 4 +- index.html | 2 +- package-lock.json | 53 +++++++++++++++++++ package.json | 1 + webpack.config.js | 9 ++++ 13 files changed, 77 insertions(+), 12 deletions(-) delete mode 100644 dist/bundle.f1584b69f9c93e44e8a8.css.map delete mode 100644 dist/bundle.f1584b69f9c93e44e8a8.js.map rename dist/{bundle.f1584b69f9c93e44e8a8.css => bundle.f181a7f28dc473f6f66c.css} (51%) create mode 100644 dist/bundle.f181a7f28dc473f6f66c.css.map rename dist/{bundle.f1584b69f9c93e44e8a8.js => bundle.f181a7f28dc473f6f66c.js} (99%) create mode 100644 dist/bundle.f181a7f28dc473f6f66c.js.map create mode 100644 dist/f585fe2054b88eb6d1e59cdeda7bb5da.svg diff --git a/dist/appcache/manifest.appcache b/dist/appcache/manifest.appcache index b274245..6e78b9b 100644 --- a/dist/appcache/manifest.appcache +++ b/dist/appcache/manifest.appcache @@ -1,10 +1,11 @@ CACHE MANIFEST -#ver:9/10/2018, 8:41:44 PM -#plugin:4.8.3 +#ver:9/10/2018, 8:53:42 PM +#plugin:4.9.1 CACHE: -./dist/bundle.f1584b69f9c93e44e8a8.js -./dist/bundle.f1584b69f9c93e44e8a8.css +./dist/f585fe2054b88eb6d1e59cdeda7bb5da.svg +./dist/bundle.f181a7f28dc473f6f66c.js +./dist/bundle.f181a7f28dc473f6f66c.css ./dist/../ NETWORK: diff --git a/dist/bundle.f1584b69f9c93e44e8a8.css.map b/dist/bundle.f1584b69f9c93e44e8a8.css.map deleted file mode 100644 index 11d2c4c..0000000 --- a/dist/bundle.f1584b69f9c93e44e8a8.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack:///./src/styles.less","webpack:///./src/slider.less","webpack:///./src/spinner.less","webpack:///./src/withinWebview.less"],"names":[],"mappings":"AAAA,KACE,sDACA,SACA,UACA,gBCyCF,kBACE,wBACA,cACA,YAEA,wBACE,aAGF,iDAzBA,YACA,WACA,eACA,YARA,oCAiCE,gBACA,kBACA,sBAGF,wCAtCA,4CAaA,oBACA,YACA,WACA,kBACA,gBACA,eAsBE,wBACA,iBAIF,uDACE,mBAGF,oCA5CA,YACA,WACA,eACA,YARA,oCAoDE,gBACA,kBACA,sBAEF,oCAxDA,4CAaA,oBACA,YACA,WACA,kBACA,gBACA,eA0CA,6BAvDA,YACA,WACA,eACA,YAsDE,uBACA,yBACA,oBACA,kBAGF,kCACE,kBACA,CAIF,oEAJE,sBACA,kBAvEF,oCAgFA,kCALE,eACA,CAIF,6BAhFA,4CAaA,oBACA,YACA,WACA,kBACA,gBACA,eAiEA,wCACE,gBAEF,wCACE,mBC/GJ,aACE,kBACA,QACA,SACA,uBACA,oBACE,UACA,oBAPJ,eAUI,oEACA,cACA,kBAwBA,WAvBA,qBACE,WACA,cACA,eACA,WACA,YACA,kBACA,8GAEF,2BACE,WACA,4DAEE,wDAGJ,4BACE,UACA,8DAEE,sDAKN,mBACE,WACA,cACA,8BACA,eACA,MACA,OACA,QACA,SACA,WAIJ,0BACE,MAEE,kEACA,4EAEF,IACE,sDACA,+EARJ,kBACE,MAEE,kEACA,4EAEF,IACE,sDACA,+EAIJ,0BACE,UAGE,yEAAuB,CAEzB,IACE,yEAAuB,EAP3B,kBACE,UAGE,yEAAuB,CAEzB,IACE,yEAAuB,ECtE3B,0BACE,mBACA,WACA,gBACA,aACA,kBACA,eACA,gCACE,WACA,cACA,QACA,SACA,kBACA,0CACA,eACA,MACA,WACA,gFAGJ,iCACE,MAEE,uDAAW,CAEb,IACE,qHAA+C,CAEjD,IACE,iHAA6C,EHnBjD,yBGWE,MAEE,uDAAW,CAEb,IACE,qHAA+C,CAEjD,IACE,iHAA6C,EHnBjD,aAIE,yGAHA,oBACE,iDAAW,CAIf,OACE,eA+BF,eAGE,MAGA,WAGF,sBARE,eACA,OAEA,QACA,QACA,CAIA,OAOA,qDACA,WACA,oEACA,0BAVA,yBAyeF,OAxeI,cAUF,SACE,YACA,WAUJ,kBACE,gBACA,qDACA,kEACA,oEACA,gBAEA,eAIA,aACA,kBACA,MACA,OACA,SACA,QACA,YACA,gBACA,iBACA,kBAZA,uBA0cF,kBAzcI,gBA4BJ,0CAGE,kBACA,MACA,OACA,SACA,QACA,sBAEF,oBACE,qFACA,MACA,kBACA,cACA,SACA,OACA,QAGF,iBACE,kBACA,YACA,MACA,OACA,QACA,SACA,WACA,YARF,6CAYI,kBACA,eACA,gBACA,YAEA,kBACA,WACA,YAEA,cACA,MACA,SACA,OACA,QAzBJ,qBA4BI,UA5BJ,wBA+BI,UACA,eAIJ,uBACE,yGACA,8BACE,iDAAW,CAHf,kCAMI,WACA,UACA,eAIJ,YACE,qDACA,kBACA,WACA,kBACA,kBACA,MACA,OACA,QACA,SACA,SACA,kEACA,oEACA,YAGF,OACE,WACA,kBAFF,UAII,aAIJ,QACE,eACA,SACA,OACA,QACA,YAEA,aACA,qDACA,oEACA,kEACA,UACA,gBACA,gBACA,YACA,kBACA,YAKA,wKAHA,UACE,oBAGF,uBACE,+DAAW,CAvBf,wBA0BI,WACA,YACA,kBACA,kBAEA,uBACA,YACA,aArOF,yGAsOE,6DAEE,aA3OJ,+BACE,iDAAW,CAsMf,2CAwCM,UAEF,8BACE,oEADF,iDAII,oEAGJ,0BACE,kBACA,YACA,WACA,kBACA,MACA,OACA,QACA,SACA,YACA,gCACE,yCACA,4BACA,wBACA,wBA/DR,kBAoEI,YACA,yBACA,cACA,iBACA,kBACA,WACA,yBACE,UACA,sDA5EN,4BA+EM,cACA,WACA,+CAAW,CAEb,yBA8PJ,kBA7PM,WA6PN,yBA1PQ,cAMR,4BACE,GACE,4EAEF,IACE,UACA,oFACA,+EAPJ,oBACE,GACE,4EAEF,IACE,UACA,oFACA,+EAKJ,8BAvSE,kBACA,WACA,gBAEA,gBACA,qDACA,oEACA,kEACA,+CACA,qBACA,eACA,8DACA,wBACA,sJACA,kBACA,aACA,wEAEE,mBACA,kDAGF,qCACE,sCACA,sBACA,gBA8QJ,4BAKI,sBAIJ,8BAhTE,kBACA,WACA,gBAEA,gBACA,qDACA,oEACA,kEACA,+CACA,qBACA,eACA,8DACA,wBACA,sJACA,kBACA,aACA,wEAEE,mBACA,kDAGF,qCACE,sCACA,sBACA,gBAuRJ,iDAIM,UAJN,4BAQI,sBAIJ,eAOE,gCAEF,sBARE,gBACA,eACA,MACA,OACA,QACA,QACA,CAeA,OAZA,kBACA,YAQA,qDACA,sDACA,kCA8GA,wDA7GA,mBACE,gBACA,iBAFF,0BAKI,YACA,mDACA,UACA,WACA,kBACA,mCAlWJ,yGAqWI,cAxWJ,iCACE,iDAAW,CAwWT,uBA+KN,0BA9KQ,gBAEF,iCACE,gBAEF,sCACE,mCACA,4CACE,kDAGJ,iCACE,kBACA,uBAFF,qCAII,eACA,gBACA,kBACA,OACA,QACA,MACA,SACA,YAEF,2CACE,4EAdJ,iDAiBI,kBACA,SACA,WACA,kBAKR,qBACE,kBACA,cAEA,gBACA,YALF,+DAQI,kDAEF,uBACE,aACA,YACA,gBACA,cACA,kBACA,qBAEA,mCACE,mBACA,WAEF,iCACE,WACA,mBAEF,wCACE,qDACA,yGACA,UAHF,4CAMI,aAGF,+CACE,mBACA,WACA,yGAHF,sDAKI,aACA,YAGJ,+CACE,mBACA,WAGJ,6BACE,WAEA,yBAsFR,6BArFU,cAMR,eACE,oBACA,0EAGJ,gBACE,kBACA,MACA,OACA,QACA,SACA,gCACA,8DACA,wBACE,oBACA,gEAIJ,0BACE,IACE,mDAAW,CAEb,IACE,6EAAwB,EAL5B,kBACE,IACE,mDAAW,CAEb,IACE,6EAAwB,EAK5B,8BACE,IACE,yFAAyB,CAE3B,IACE,yGAAsC,EAL1C,sBACE,IACE,yFAAyB,CAE3B,IACE,yGAAsC,EAI1C,6BACE,GACE,UACA,qFAAsB,EAH1B,qBACE,GACE,UACA,qFAAsB,EAG1B,8BACE,GACE,oFACA,WAHJ,sBACE,GACE,oFACA,WAIJ,2BACE,IACE,yBAEF,IACE,yBAEF,IACE,yBAEF,IACE,yBAEF,IACE,0BAdJ,mBACE,IACE,yBAEF,IACE,yBAEF,IACE,yBAEF,IACE,yBAEF,IACE,0BAIJ,gCACE,GACE,WAFJ,wBACE,GACE,WAGJ,iCACE,GACE,WAFJ,yBACE,GACE","file":"bundle.f1584b69f9c93e44e8a8.css","sourcesContent":["body {\n font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n@import './slider.less';\n@import './spinner.less';\n@import './withinWebview.less';\n\n.bounceClick {\n &:active {\n transform: scale(0.95);\n }\n transition: transform 0.2s;\n}\nbutton {\n cursor: pointer;\n}\n.button (@text, @background) {\n position: relative;\n color: @text;\n background: @background;\n\n font-weight: bold;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n text-decoration: none;\n cursor: pointer;\n transform: translate(0, -2px);\n box-shadow: 0 3px 0 darken(@background, 20%);\n transition: transform 0.2s, box-shadow 0.2s;\n border-radius: 3px;\n margin: 5px 0;\n &:focus,\n &:hover {\n background: darken(@background, 10%);\n animation: squish 0.2s;\n }\n\n &:active {\n transform: none;\n box-shadow: 0 0 0 darken(@background, 20%);\n background: darken(@background, 20%);\n }\n}\ncanvas#welcome {\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n}\n\n.links {\n @media (max-width: 700px) {\n display: none;\n }\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n color: white;\n justify-content: center;\n background: rgba(0, 0, 0, 0.3);\n & > * {\n padding: 5px;\n color: white;\n }\n // transform: translate(0, 100%);\n // transition: transform 0.2s;\n}\n// Show links when cursor in page\n// #inputForAFile:hover .links {\n// transform: none;\n// }\n\n#fileInputWrapper {\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n\n font-size: 120%;\n @media (min-width: 400) {\n font-size: 140%;\n }\n padding: 20px;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n max-width: 250px;\n max-height: 250px;\n border-radius: 50%;\n\n // opacity: 0;\n // transform: scale(0.5);\n // transition: opacity 0.1s, transform 0.3s;\n}\n//\n// #inputForAFile:hover {\n// #fileInputWrapper {\n// opacity: 1;\n// transform: scale(1);\n// &:hover {\n// opacity: 1;\n// transform: scale(1.2);\n// }\n// }\n// }\n#inputForAFile,\n#fileinput,\ncanvas#drawzone {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n box-sizing: border-box;\n}\ndiv#drawAndDownload {\n user-select: none;\n top: 0;\n position: absolute;\n display: block;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n#drawzoneWrapper {\n position: absolute;\n margin: auto;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n\n img,\n canvas {\n position: absolute;\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n // box-shadow: 0 0 70px rgba(0, 0, 0, 0.5);\n border-radius: 2px;\n width: auto;\n height: auto;\n\n display: block;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n img {\n z-index: 2;\n }\n canvas {\n z-index: 3;\n cursor: default;\n }\n}\n\nlabel#fileInputWrapper {\n transition: transform 0.2s;\n &:active {\n transform: scale(0.95);\n }\n #fileinput {\n width: 100%;\n opacity: 0;\n cursor: pointer;\n }\n}\n\nh1.noscript {\n display: flex;\n background: orange;\n color: white;\n text-align: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: 0;\n align-items: center;\n justify-content: center;\n z-index: 200;\n}\n\nul.tip {\n color: #666;\n font-style: italic;\n li {\n margin: 5px 0;\n }\n}\n\n#topbar {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n height: 50px;\n\n padding: 10px;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 3;\n overflow: hidden;\n max-width: 400px;\n margin: auto;\n border-radius: 5px;\n bottom: 10px;\n\n & > * {\n pointer-events: auto;\n }\n transition: transform 0.2s, background-color 0.3s;\n &.drawInProgress {\n transform: translate(0, 150px);\n }\n #pensizePreview {\n width: 50px;\n height: 50px;\n position: relative;\n margin-right: 50px;\n\n background: transparent;\n border: none;\n outline: none;\n &:focus,\n &:active {\n outline: none;\n }\n .bounceClick;\n #pensizePreviewDot {\n z-index: 2;\n }\n &:hover {\n animation: squish 0.5s infinite;\n\n #pensizePreviewDot {\n animation: rainbow 1s infinite;\n }\n }\n & > * {\n border-radius: 50%;\n height: 50px;\n width: 50px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n &.eraser {\n background: url(/images/eraser-color.svg);\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center;\n }\n }\n }\n #download {\n width: 140px;\n text-transform: uppercase;\n font-size: 80%;\n margin-left: 20px;\n position: relative;\n opacity: 0.5;\n &.usable {\n opacity: 1;\n animation: bounceIn 0.3s;\n }\n span.icon {\n padding: 0 5px;\n opacity: 0.8;\n transform: scale(0.8);\n }\n @media (max-width: 380px) {\n width: 50px;\n\n .label {\n display: none;\n }\n }\n }\n}\n\n@keyframes bounceIn {\n 0% {\n animation-timing-function: ease-in;\n }\n 50% {\n opacity: 1;\n transform: scale(1.2) translate(0, -5px);\n animation-timing-function: ease-out;\n }\n 100% {\n }\n}\nbody.background_n_1 {\n #download {\n .button(#333, white);\n }\n #topbar {\n background-color: rgba(51, 51, 51, 1);\n }\n}\n\nbody.background_n_0 {\n #download {\n .button(white, #333);\n span.icon svg path {\n fill: white;\n }\n }\n #topbar {\n background-color: rgba(221, 221, 221, 1);\n }\n}\n\ndiv#background {\n background: white;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: background-color 0.2s;\n}\n.modal {\n border-radius: 2px;\n margin: auto;\n\n position: fixed;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0;\n background: white;\n display: flex;\n justify-content: space-around;\n flex-wrap: wrap;\n &.color-modal {\n max-width: 500px;\n max-height: 500px;\n\n button {\n border: none;\n flex-grow: 1;\n width: 30%;\n margin: 5px;\n border-radius: 2px;\n border: 1px solid rgba(255, 255, 255, 0);\n .bounceClick;\n // Avoids button with text taking more space\n line-height: 0;\n @media (min-width: 600) {\n font-size: 140%;\n }\n &.active {\n font-weight: bold;\n }\n &.colorbutton {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.58);\n &:hover {\n animation: squish 0.3s;\n }\n }\n &.eraser {\n position: relative;\n background: transparent;\n img {\n max-width: 100%;\n max-height: 100%;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n }\n &:hover img {\n animation: eraseStuff 0.5s infinite;\n }\n span.imagelabel {\n position: absolute;\n left: 50%;\n opacity: 0.8;\n padding-left: 70px;\n }\n }\n }\n }\n &.file-download {\n overflow-y: scroll;\n display: block;\n\n max-width: 400px;\n margin: auto;\n a:hover,\n button:hover {\n animation: squish 0.3s;\n }\n & > * {\n padding: 20px;\n margin: 10px;\n background: #eee;\n display: block;\n border-radius: 5px;\n text-decoration: none;\n\n &.facebookLink {\n background: #3b5998;\n color: white;\n }\n &.githubLink {\n color: white;\n background: #24292e;\n }\n &#downloadIndicator {\n display: flex;\n flex-direction: column;\n padding: 0;\n\n div {\n padding: 20px;\n }\n\n &.sucess {\n background: #4caf50;\n color: white;\n flex-direction: column;\n button {\n padding: 20px;\n margin: 10px;\n }\n }\n &.failed {\n background: #f44336;\n color: white;\n }\n }\n &.pcHint {\n opacity: 0.8;\n\n @media (max-width: 900px) {\n display: none;\n }\n }\n }\n }\n animation: openModal 0.2s;\n &.closing {\n pointer-events: none;\n animation: closeModal 0.3s ease-in;\n }\n}\n.modal-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n animation: openBackdrop 0.2s;\n &.closing {\n pointer-events: none;\n animation: closeBackdrop 0.3s;\n }\n}\n\n@keyframes squish {\n 33% {\n transform: scaleX(0.95);\n }\n 66% {\n transform: scaleX(0.97) scaleY(1.05);\n }\n 100% {\n }\n}\n@keyframes eraseStuff {\n 33% {\n transform: rotate(-4deg) translate(-15px, 0);\n }\n 66% {\n transform: rotate(-5deg) scaleX(0.97) scaleY(1.02);\n }\n}\n\n@keyframes openModal {\n 0% {\n opacity: 0;\n transform: scale(0.5) translate(0, -100px);\n }\n}\n@keyframes closeModal {\n 100% {\n transform: scale(0.5) translate(0, 100px);\n opacity: 0;\n }\n}\n\n@keyframes rainbow {\n 16% {\n background-color: #f44336;\n }\n 33% {\n background-color: #3f51b5;\n }\n 50% {\n background-color: #2196f3;\n }\n 66% {\n background-color: #4caf50;\n }\n 75% {\n background-color: #8bc34a;\n }\n}\n\n@keyframes openBackdrop {\n 0% {\n opacity: 0;\n }\n}\n@keyframes closeBackdrop {\n 100% {\n opacity: 0;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/styles.less","@track-color: #aaaaaa;\n@thumb-color: #dddddd;\n\n@thumb-radius: 8px;\n@thumb-height: 30px;\n@thumb-width: 30px;\n@thumb-shadow-size: 1px;\n@thumb-shadow-blur: 1px;\n@thumb-shadow-color: #333;\n@thumb-border-width: 0;\n@thumb-border-color: white;\n\n@track-width: 140px;\n@track-height: 8px;\n@track-shadow-size: 0px;\n@track-shadow-blur: 0px;\n@track-shadow-color: #bbb;\n@track-border-width: 1px;\n@track-border-color: #bbb;\n\n@track-radius: 4px;\n@contrast: 5%;\n\n.shadow(@shadow-size,@shadow-blur,@shadow-color) {\n box-shadow: @shadow-size @shadow-size @shadow-blur @shadow-color,\n 0px 0px @shadow-size lighten(@shadow-color, 5%);\n}\n\n.track() {\n width: @track-width;\n height: @track-height;\n cursor: pointer;\n animate: 0.2s;\n}\n\n.thumb() {\n .shadow(@thumb-shadow-size,@thumb-shadow-blur,@thumb-shadow-color);\n border: @thumb-border-width solid @thumb-border-color;\n height: @thumb-height;\n width: @thumb-width;\n border-radius: @thumb-radius;\n background: @thumb-color;\n cursor: pointer;\n}\n\ninput[type=range] {\n -webkit-appearance: none;\n margin: @thumb-height/2 0;\n width: @track-width;\n\n &:focus {\n outline: none;\n }\n\n &::-webkit-slider-runnable-track {\n .track();\n .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);\n background: @track-color;\n border-radius: @track-radius;\n border: @track-border-width solid @track-border-color;\n }\n\n &::-webkit-slider-thumb {\n .thumb();\n -webkit-appearance: none;\n margin-top: ((-@track-border-width * 2 + @track-height) / 2) - (@thumb-height /\n 2);\n }\n\n &:focus::-webkit-slider-runnable-track {\n background: lighten(@track-color, @contrast);\n }\n\n &::-moz-range-track {\n .track();\n .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);\n background: @track-color;\n border-radius: @track-radius;\n border: @track-border-width solid @track-border-color;\n }\n &::-moz-range-thumb {\n .thumb();\n }\n\n &::-ms-track {\n .track();\n background: transparent;\n border-color: transparent;\n border-width: @thumb-width 0;\n color: transparent;\n }\n\n &::-ms-fill-lower {\n background: darken(@track-color, @contrast);\n border: @track-border-width solid @track-border-color;\n border-radius: @track-radius*2;\n .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);\n }\n &::-ms-fill-upper {\n background: @track-color;\n border: @track-border-width solid @track-border-color;\n border-radius: @track-radius*2;\n .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);\n }\n &::-ms-thumb {\n .thumb();\n }\n &:focus::-ms-fill-lower {\n background: @track-color;\n }\n &:focus::-ms-fill-upper {\n background: lighten(@track-color, @contrast);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/slider.less","div#spinners {\n position: absolute;\n top: 50%;\n left: 50%;\n transition: opacity 0.2s;\n &.hidden {\n opacity: 0;\n pointer-events: none;\n }\n i {\n animation: bounce 0.8s infinite;\n display: block;\n position: absolute;\n &:after {\n content: \"\";\n display: block;\n background: red;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n animation: rainbow 0.8s infinite, squash 0.8s infinite;\n }\n &:nth-child(1) {\n left: -50px;\n &,\n &:after {\n animation-delay: -0.7333s;\n }\n }\n &:nth-child(3) {\n left: 50px;\n &,\n &:after {\n animation-delay: -0.266s;\n }\n }\n z-index: 11;\n }\n &:after {\n content: \"\";\n display: block;\n background: rgba(255, 255, 255, 0.8);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 10;\n }\n}\n\n@keyframes bounce {\n 0%,\n 100% {\n transform: translate(0, -100px);\n animation-timing-function: ease-in;\n }\n 50% {\n transform: translate(0, 0);\n animation-timing-function: ease-out;\n }\n}\n\n@keyframes squash {\n 0%,\n 50%,\n 100% {\n transform: scaleX(0.9) scaleY(1.1);\n }\n 60% {\n transform: scaleX(1.2) scaleY(0.6);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/spinner.less","body.runningWithinWebview {\n background: #f44336;\n color: white;\n max-width: 500px;\n padding: 20px;\n margin: 200px auto;\n font-size: 25px;\n &:after {\n content: \"\";\n display: block;\n width: 0;\n height: 0;\n border: 40px solid;\n border-color: transparent transparent white transparent;\n position: fixed;\n top: 0;\n right: 20px;\n animation: pointAtButton 1s infinite;\n }\n}\n@keyframes pointAtButton {\n 0%,\n 100% {\n transform: rotate(30deg);\n }\n 33% {\n transform: translate(-5px, 20px) rotate(35deg) scale(0.9);\n }\n 66% {\n transform: translate(0, -20px) rotate(25deg) scale(1.1);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/withinWebview.less"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/bundle.f1584b69f9c93e44e8a8.js.map b/dist/bundle.f1584b69f9c93e44e8a8.js.map deleted file mode 100644 index 24e9e49..0000000 --- a/dist/bundle.f1584b69f9c93e44e8a8.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack:///bundle.f1584b69f9c93e44e8a8.js","webpack:///webpack/bootstrap f1584b69f9c93e44e8a8","webpack:///./src/canvasMergerAndDonwloaderLink.js","webpack:///./src/app.js","webpack:///./src/colorPicker.js","webpack:///./src/colorToRGB.js","webpack:///./src/palette.js","webpack:///./src/modal.js","webpack:///./src/getAnImage.js","webpack:///./src/toggleAbleBackground.js","webpack:///./src/editableCanvas.js","webpack:///./src/pencilSizeSlider.js","webpack:///./src/welcomeAnim.js","webpack:///./src/spinners.js","webpack:///./src/detectCtrlS.js","webpack:///./node_modules/offline-plugin/runtime.js"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","i","l","call","m","c","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","makeDownloadLink","link","_ref","downloadImage","e","preventDefault","triggerDownload","canvas","originalFileName","OrginalImage","addEventListener","nope","console","log","failed","arguments","length","undefined","suceeded","filename","downloadCounter","mergeCanvasAndImage","downloadCanvas","img","ctx","getContext","oldComposite","globalCompositeOperation","drawImage","width","height","setTimeout","toBlob","blob","window","navigator","msSaveOrOpenBlob","msSaveBlob","url","URL","createObjectURL","document","createElement","body","appendChild","setAttribute","click","revokeObjectURL","removeChild","value","_interopRequireDefault","obj","default","letUserDrawAndDownload","setColor","color","drawWithEraser","drawWithColor","stopAnim","byId","drawzoneWrapper","style","display","maxRes","Math","max","innerWidth","innerHeight","imgScale","maxWidth","maxHeight","hasDoneFirstDraw","barClass","classList","background","_setupColorPicker","_colorPicker2","canvasForCursor","onColorChange","elementToContrastWith","setColorDotSize","refreshColorPreviewBorder","_setupEditableCanvas","clearColorPicker","_editableCanvas2","onMouseDown","getClientRects","add","onMouseUp","download","remove","setPencilSize","_toggleAbleBackground2","onChange","_pencilSizeSlider2","pxSize","_canvasMergerAndDonwloaderLink","_detectCtrlS","detectCtrlS","_colorPicker","_getAnImage","_getAnImage2","_toggleAbleBackground","_editableCanvas","_pencilSizeSlider","_welcomeAnim2","_welcomeAnim3","_spinners","_runtime","OfflinePluginRuntime","newObj","key","getElementById","bind","install","fileinput","onImageCreated","startTask","endTask","_welcomeAnim","fitWindow","bgColor","borderColor","foreground","bgL","_colorToRGB","luminance","fgL","textColor","openColorPicker","currentColor","callback","_modal","createModal","_ref2","pickColor","closeModal","modal","_palette","paletteColors","forEach","button","innerHTML","backgroundColor","toLowerCase","eraser","setCursor","node","size","drawEraser","drawColorCircle","cursor","toDataURL","beginPath","arc","PI","fillStyle","fill","fillRect","pensizePreview","pensizePreviewBorder","openInitializedColorPicker","onColorPicked","previousColor","localStorage","setItem","currentSize","pensizePreviewDot","transform","baseSize","children","getItem","getBoundingClientRect","ev","String","fromCharCode","which","DEFAULTCOLOR","removeEventListener","_toConsumableArray","arr","Array","isArray","arr2","from","colorToRGB","clearRect","concat","getImageData","data","slice","reduce","a","b","split","className","closeOnEscape","backdrop","zIndex","modalZindex","loadFile","fileToLoad","fileReader","FileReader","onload","createImageWithFileContent","result","onerror","readAsDataURL","askingForImage","Image","src","handleDataTransferItems","items","imageFile","find","kind","type","match","getAsFile","getAsString","_ref$startTask","_ref$endTask","fileChanged","changeEvent","pop","target","files","clipboardData","stopPropagation","dataTransfer","switchBackground","currentMode","applyBackground","options","current","bclass","index","switchCount","measureScale","rect","scale","lastUsedPXsize","lineWidth","getMousePos","mouseEvent","x","clientX","left","y","clientY","top","startDrawLoop","isDrawing","drawLoop","endDrawLoop","requestAnimationFrame","renderCanvas","moveTo","lastPos","lineTo","mousePos","stroke","proxyTouchToMouse","touchEventName","mouseEventName","eventTarget","touches","MouseEvent","dispatchEvent","lineCap","setData","strokeStyle","slider","onPencilSizeChange","parseInt","DEFAULTSIZE","randomColor","colorPool","exception","withoutEx","filter","floor","random","reset","w","h","randomizeInst","position","speed","acceleration","coolColors","randomAcceletation","accelerationTimeoutHandle","clearTimeout","tasksInProgress","updateLook","spinners","event","ctrlKey","metaKey","hasSW","fetch","documentElement","location","protocol","hostname","indexOf","serviceWorker","register","applicationCache","doLoad","iframe","directory","appCacheIframe","readyState","applyUpdate","errback","update","getRegistration","then","registration","contentWindow"],"mappings":"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","file":"bundle.f1584b69f9c93e44e8a8.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"./dist/\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 1);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.makeDownloadLink = makeDownloadLink;\nexports.triggerDownload = triggerDownload;\nexports.mergeCanvasAndImage = mergeCanvasAndImage;\nfunction makeDownloadLink(link, _ref) {\n var OrginalImage = _ref.OrginalImage,\n canvas = _ref.canvas,\n originalFileName = _ref.originalFileName;\n\n // Download button\n function downloadImage(e) {\n e.preventDefault();\n triggerDownload(canvas, originalFileName, OrginalImage);\n }\n link.addEventListener(\"click\", downloadImage);\n}\n\nfunction nope(e) {\n console.log(e);\n}\nvar downloadCounter = 0;\nfunction triggerDownload(canvas, originalFileName, OrginalImage) {\n var failed = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : nope;\n var suceeded = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : nope;\n\n var filename = originalFileName + \"-minimage-\" + downloadCounter + \".png\";\n mergeCanvasAndImage(canvas, OrginalImage, failed, suceeded);\n downloadCanvas(canvas, filename, failed, suceeded);\n\n downloadCounter++;\n}\n\nfunction mergeCanvasAndImage(canvas, img, failed, suceeded) {\n try {\n // Pastes the image as a canvas background\n var ctx = canvas.getContext(\"2d\");\n var oldComposite = ctx.globalCompositeOperation;\n ctx.globalCompositeOperation = \"destination-over\";\n\n // Draw the orignal image\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n\n ctx.globalCompositeOperation = oldComposite;\n suceeded && setTimeout(suceeded);\n return canvas;\n } catch (e) {\n failed && failed(e);\n }\n}\n\nfunction downloadCanvas(canvas, filename, failed, suceeded) {\n try {\n canvas.toBlob(function (blob) {\n try {\n if (window.navigator.msSaveOrOpenBlob) {\n window.navigator.msSaveBlob(blob, filename);\n suceeded && setTimeout(suceeded);\n } else {\n var url = window.URL.createObjectURL(blob);\n var link = document.createElement(\"a\");\n document.body.appendChild(link);\n link.setAttribute(\"href\", url);\n link.setAttribute(\"download\", filename);\n link.click();\n suceeded && setTimeout(suceeded);\n setTimeout(function () {\n window.URL.revokeObjectURL(url);\n document.body.removeChild(link);\n }, 3000);\n }\n } catch (e) {\n failed && failed(e);\n }\n });\n } catch (e) {\n failed && failed(e);\n }\n}\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(2);\n\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\n__webpack_require__(3);\n\nvar _colorPicker = __webpack_require__(4);\n\nvar _colorPicker2 = _interopRequireDefault(_colorPicker);\n\nvar _getAnImage = __webpack_require__(8);\n\nvar _getAnImage2 = _interopRequireDefault(_getAnImage);\n\nvar _toggleAbleBackground = __webpack_require__(9);\n\nvar _toggleAbleBackground2 = _interopRequireDefault(_toggleAbleBackground);\n\nvar _editableCanvas = __webpack_require__(10);\n\nvar _editableCanvas2 = _interopRequireDefault(_editableCanvas);\n\nvar _canvasMergerAndDonwloaderLink = __webpack_require__(0);\n\nvar _pencilSizeSlider = __webpack_require__(11);\n\nvar _pencilSizeSlider2 = _interopRequireDefault(_pencilSizeSlider);\n\nvar _welcomeAnim2 = __webpack_require__(12);\n\nvar _welcomeAnim3 = _interopRequireDefault(_welcomeAnim2);\n\nvar _spinners = __webpack_require__(13);\n\nvar _detectCtrlS = __webpack_require__(14);\n\nvar _runtime = __webpack_require__(15);\n\nvar OfflinePluginRuntime = _interopRequireWildcard(_runtime);\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar byId = document.getElementById.bind(document);\n\nOfflinePluginRuntime.install();\n\nvar originalFileName = void 0,\n OrginalImage = void 0;\n(0, _getAnImage2.default)({\n fileinput: byId(\"fileinput\"),\n onImageCreated: function onImageCreated(img, filename) {\n originalFileName = filename;\n letUserDrawAndDownload(img);\n },\n startTask: _spinners.startTask,\n endTask: _spinners.endTask\n});\n\nvar _welcomeAnim = (0, _welcomeAnim3.default)(byId(\"welcome\"), { fitWindow: true }),\n stopAnim = _welcomeAnim.stopAnim,\n bgColor = _welcomeAnim.bgColor;\n\nbyId(\"fileInputWrapper\").style.color = bgColor;\n\n// Lets the user draw on the loaded image\nfunction letUserDrawAndDownload(img) {\n OrginalImage = img;\n stopAnim();\n var canvas = byId(\"drawzone\"),\n drawzoneWrapper = byId(\"drawzoneWrapper\");\n\n // Switch to drawing mode\n byId(\"inputForAFile\").style.display = \"none\";\n byId(\"drawAndDownload\").style.display = \"\";\n\n console.log(img.width, img.height);\n var maxRes = Math.max(window.innerWidth, window.innerHeight) * 2;\n // Fits the canvas to screen\n var imgScale = Math.max(img.width / maxRes, img.height / maxRes, 1);\n img.width = canvas.width = img.width / imgScale;\n img.height = canvas.height = img.height / imgScale;\n drawzoneWrapper.style.maxWidth = img.width;\n drawzoneWrapper.style.maxHeight = img.height;\n\n // Needs to happen AFTER size measurements\n drawzoneWrapper.appendChild(img);\n\n var ctx = canvas.getContext(\"2d\");\n var hasDoneFirstDraw = false;\n var barClass = byId(\"topbar\").classList;\n\n var background = byId(\"background\");\n\n var _setupColorPicker = (0, _colorPicker2.default)(byId(\"pensizePreview\"), {\n canvasForCursor: canvas,\n onColorChange: setColor,\n elementToContrastWith: background\n }),\n setColorDotSize = _setupColorPicker.setColorDotSize,\n refreshColorPreviewBorder = _setupColorPicker.refreshColorPreviewBorder,\n clearColorPicker = _setupColorPicker.clearColorPicker;\n\n var _setupEditableCanvas = (0, _editableCanvas2.default)(canvas, {\n onMouseDown: function onMouseDown() {\n if (canvas.getClientRects()[0].height + 2 * 80 > window.innerHeight) {\n barClass.add(\"drawInProgress\");\n }\n },\n onMouseUp: function onMouseUp() {\n if (!hasDoneFirstDraw) {\n hasDoneFirstDraw = true;\n download.classList.add(\"usable\");\n }\n barClass.remove(\"drawInProgress\");\n },\n\n OrginalImage: OrginalImage\n }),\n drawWithColor = _setupEditableCanvas.drawWithColor,\n drawWithEraser = _setupEditableCanvas.drawWithEraser,\n setPencilSize = _setupEditableCanvas.setPencilSize;\n\n // Sets draw color at load and when user clicks color input\n\n\n function setColor(color) {\n if (color == \"eraser\") {\n drawWithEraser();\n } else {\n drawWithColor(color);\n }\n }\n // Tap the background to switch its color (usefull for transparent images)\n (0, _toggleAbleBackground2.default)(background, { onChange: refreshColorPreviewBorder });\n\n (0, _pencilSizeSlider2.default)(byId(\"pensize\"), {\n onChange: function onChange(pxSize) {\n setColorDotSize(pxSize);\n setPencilSize(pxSize);\n }\n });\n\n (0, _canvasMergerAndDonwloaderLink.makeDownloadLink)(byId(\"download\"), {\n OrginalImage: OrginalImage,\n originalFileName: originalFileName,\n canvas: canvas\n });\n\n (0, _detectCtrlS.detectCtrlS)({\n canvas: canvas,\n OrginalImage: OrginalImage,\n originalFileName: originalFileName\n });\n\n function clear() {\n clearColorPicker();\n }\n}\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (pensizePreview, _ref) {\n var onColorChange = _ref.onColorChange,\n elementToContrastWith = _ref.elementToContrastWith,\n canvasForCursor = _ref.canvasForCursor;\n\n var pensizePreviewDot = pensizePreview.children[0];\n var pensizePreviewBorder = pensizePreview.children[1];\n\n function refreshColorPreviewBorder() {\n pensizePreviewBorder.style.background = borderColor(currentColor, elementToContrastWith.style.backgroundColor);\n }\n\n var currentColor = void 0;\n function openInitializedColorPicker() {\n openColorPicker(currentColor, onColorPicked);\n }\n pensizePreview.addEventListener(\"click\", openInitializedColorPicker);\n var previousColor = localStorage.getItem(\"previousColor\") || \"eraser\";\n\n function onColorPicked(color) {\n console.log(\"onColorPicked\", color);\n if (currentColor && color !== currentColor) {\n // For toggling between last two colors\n previousColor = currentColor;\n }\n\n localStorage.setItem(\"previousColor\", previousColor);\n\n currentColor = color;\n setCursor(canvasForCursor, currentSize, currentColor);\n if (color == \"eraser\") {\n pensizePreviewDot.style.background = \"\";\n pensizePreviewDot.classList.add(\"eraser\");\n } else {\n pensizePreviewDot.classList.remove(\"eraser\");\n pensizePreviewDot.style.background = color;\n refreshColorPreviewBorder();\n }\n localStorage.setItem(\"color\", color);\n onColorChange(color);\n }\n var currentSize = void 0;\n // Should be 10\n var baseSize = pensizePreviewDot.getBoundingClientRect().width;\n\n window.addEventListener(\"keydown\", function (ev) {\n if (String.fromCharCode(ev.which).toLowerCase() === \"x\") {\n console.log(\"x switching to \" + previousColor);\n onColorPicked(previousColor);\n }\n });\n\n function setColorDotSize(pxSize) {\n currentSize = pxSize;\n setCursor(canvasForCursor, currentSize, currentColor);\n pensizePreviewDot.style.transform = \"scale(\" + pxSize / baseSize + \")\";\n pensizePreviewBorder.style.transform = \"scale(\" + (pxSize / baseSize + 1 / baseSize) + \")\";\n }\n\n setTimeout(function () {\n return onColorPicked(localStorage.getItem(\"color\") || DEFAULTCOLOR);\n });\n\n return {\n clearColorPicker: function clearColorPicker() {\n pensizePreview.removeEventListener(\"click\", openInitializedColorPicker);\n },\n\n setColorDotSize: setColorDotSize,\n refreshColorPreviewBorder: refreshColorPreviewBorder\n };\n};\n\nvar _colorToRGB = __webpack_require__(5);\n\nvar _palette = __webpack_require__(6);\n\nvar _modal = __webpack_require__(7);\n\nvar DEFAULTCOLOR = \"#2b76ce\";\n\n\nfunction borderColor(foreground, background) {\n if (foreground == \"eraser\") return \"transparent\";\n var bgL = (0, _colorToRGB.luminance)(background);\n var fgL = (0, _colorToRGB.luminance)(foreground);\n if (bgL > 125 && fgL > 200) return \"black\";\n if (bgL < 125 && fgL < 25) return \"white\";\n return \"transparent\";\n}\n\nfunction textColor(background) {\n return (0, _colorToRGB.luminance)(background) > 255 / 2 ? \"rgba(0,0,0,0.8)\" : \"rgba(255,255,255,0.8)\";\n}\n\nfunction openColorPicker(currentColor, callback) {\n (0, _modal.createModal)(\"color-modal\", function (_ref2) {\n var modal = _ref2.modal,\n closeModal = _ref2.closeModal;\n\n function pickColor(color) {\n closeModal();\n callback(color);\n }\n\n _palette.paletteColors.forEach(function (color) {\n var button = document.createElement(\"button\");\n button.classList.add(\"colorbutton\");\n if (color === currentColor) {\n button.classList.add(\"active\");\n button.innerHTML = \"Selected\";\n button.style.color = textColor(color);\n }\n button.style.backgroundColor = color.toLowerCase();\n button.addEventListener(\"click\", function () {\n return pickColor(color);\n });\n modal.appendChild(button);\n });\n\n var eraser = document.createElement(\"button\");\n eraser.classList.add(\"eraser\");\n eraser.addEventListener(\"click\", function () {\n return pickColor(\"eraser\");\n });\n eraser.innerHTML = '' + (\"eraser\" === currentColor ? \"Eraser selected\" : \"Eraser\") + \"\";\n modal.appendChild(eraser);\n });\n}\n\nfunction setCursor(node, size, color) {\n var s = size < 4 ? 4 : size;\n var c = document.createElement(\"canvas\");\n c.width = c.height = s;\n var ctx = c.getContext(\"2d\");\n\n if (color == \"eraser\") drawEraser(ctx, s);else drawColorCircle(ctx, s, color);\n var cursor = c.toDataURL(\"image/png\");\n node.style.cursor = \"url(\" + cursor + \") \" + s / 2 + \" \" + s / 2 + \",auto\";\n}\n\nfunction drawColorCircle(ctx, s, color) {\n ctx.beginPath();\n ctx.arc(s / 2, s / 2, s / 2, 0, 2 * Math.PI, false);\n ctx.fillStyle = color;\n ctx.fill();\n}\n\nfunction drawEraser(ctx, s) {\n ctx.fillStyle = \"#da502d\";\n ctx.fillRect(0, 0, s * 2 / 3, s);\n ctx.fillStyle = \"#6584a5\";\n ctx.fillRect(s * 2 / 3 - 1, 0, s, s);\n ctx.globalCompositeOperation = \"destination-in\";\n drawColorCircle(ctx, s, \"white\");\n}\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.colorToRGB = colorToRGB;\nexports.luminance = luminance;\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction colorToRGB(color) {\n var canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = 1;\n var ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, 1, 1);\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, 1, 1);\n return [].concat(_toConsumableArray(ctx.getImageData(0, 0, 1, 1).data)).slice(0, 3);\n}\n\nfunction luminance(color) {\n return colorToRGB(color).reduce(function (a, b) {\n return a + b;\n }, 0) / 3;\n}\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar paletteColors = exports.paletteColors = \"#000000,#FFFFFF,#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722,#795548,#9E9E9E,#607D8B\".split(\",\");\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createModal = createModal;\nvar modalZindex = 4;\nfunction createModal(className, callback) {\n var modal = document.createElement(\"div\");\n modal.classList.add(\"modal\");\n modal.classList.add(className);\n document.body.appendChild(modal);\n\n var backdrop = document.createElement(\"div\");\n backdrop.classList.add(\"modal-backdrop\");\n document.body.appendChild(backdrop);\n\n backdrop.style.zIndex = modalZindex;\n modal.style.zIndex = modalZindex + 1;\n backdrop.addEventListener(\"click\", closeModal);\n document.addEventListener(\"keyup\", closeOnEscape);\n function closeOnEscape(ev) {\n if (ev.which == 27 // escape key\n ) closeModal();\n }\n function closeModal() {\n modal.classList.add(\"closing\");\n backdrop.classList.add(\"closing\");\n setTimeout(function () {\n document.body.removeChild(modal);\n document.body.removeChild(backdrop);\n }, 300);\n document.removeEventListener(\"keyup\", closeOnEscape);\n }\n modalZindex += 2;\n return callback({ modal: modal, closeModal: closeModal });\n}\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (_ref) {\n var onImageCreated = _ref.onImageCreated,\n fileinput = _ref.fileinput,\n _ref$startTask = _ref.startTask,\n startTask = _ref$startTask === undefined ? function () {\n return null;\n } : _ref$startTask,\n _ref$endTask = _ref.endTask,\n endTask = _ref$endTask === undefined ? function () {\n return null;\n } : _ref$endTask;\n\n // Callbacks onImageCreated with img tag and filename\n var originalFileName = \"pasted-image\";\n var askingForImage = true;\n\n // Transforms the file input content to a real image\n function loadFile(fileToLoad) {\n startTask();\n var fileReader = new FileReader();\n fileReader.onload = function () {\n createImageWithFileContent(fileReader.result);\n endTask();\n };\n fileReader.onerror = endTask;\n fileReader.readAsDataURL(fileToLoad);\n }\n\n function createImageWithFileContent(result) {\n startTask();\n if (!askingForImage) return;\n var img = new Image();\n img.onload = function () {\n askingForImage = false;\n onImageCreated(img, originalFileName);\n endTask();\n };\n img.onerror = endTask;\n img.src = result;\n }\n\n // Setup of the welcome UI\n function askForImage() {\n fileinput && fileinput.addEventListener(\"change\", fileChanged);\n function fileChanged(changeEvent) {\n fileinput.removeEventListener(\"change\", fileChanged);\n originalFileName = fileinput.value.split(\"\\\\\").pop().split(\".\")[0] || \"image\";\n loadFile(changeEvent.target.files[0]);\n }\n }\n\n askForImage();\n\n window.addEventListener(\"paste\", function (ev) {\n handleDataTransferItems(ev.clipboardData.items);\n });\n\n document.body.addEventListener(\"dragover\", function (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n });\n document.body.addEventListener(\"drop\", function (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n handleDataTransferItems(ev.dataTransfer.items);\n });\n\n function handleDataTransferItems(items) {\n // Tries to paste an image\n var imageFile = Array.prototype.find.call(items, function (e) {\n return e.kind == \"file\" && e.type.match(\"image\");\n });\n originalFileName = \"pasted-image\";\n if (imageFile) {\n loadFile(imageFile.getAsFile());\n return;\n }\n // Tries to load a remote image given its adress\n var url = Array.prototype.find.call(items, function (e) {\n return e.kind == \"string\";\n });\n if (url) {\n url.getAsString(function (s) {\n return createImageWithFileContent(s);\n });\n }\n }\n};\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (background, _ref) {\n var onChange = _ref.onChange;\n\n function switchBackground() {\n currentMode++;\n localStorage.setItem(\"background\", currentMode);\n applyBackground();\n }\n var switchCount = 0;\n function applyBackground() {\n var options = [\"#DDD\", \"#333\"];\n var current = currentMode % options.length;\n background.style.backgroundColor = options[current];\n // let meta = document.getElementById(\"theme-color\");\n // meta && meta.setAttribute(\"content\", \"#fff\");\n onChange(current);\n\n var bclass = document.body.classList;\n options.forEach(function (color, index) {\n return bclass.remove(\"background_n_\" + index);\n });\n bclass.add(\"background_n_\" + current);\n // https://www.youtube.com/watch?v=Pr8ETbGz35Q\n if (switchCount < 8) {\n console.log(current == 0 ? \"jour !\" : \"nuit !\");\n switchCount++;\n } else {\n console.log(\"Monsieur Jacquouille, je vous en prie, à la longue, ça devient casse-pied !\");\n }\n }\n var currentMode = localStorage.getItem(\"background\") || 0;\n applyBackground();\n background.addEventListener(\"click\", switchBackground);\n};\n\n/***/ }),\n/* 10 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (canvas, _ref) {\n var onMouseDown = _ref.onMouseDown,\n onMouseUp = _ref.onMouseUp,\n OrginalImage = _ref.OrginalImage;\n\n // We cache some zoom related data to avoid getting them all the time\n var scale = void 0,\n rect = void 0,\n lastUsedPXsize = void 0;\n\n function measureScale() {\n rect = canvas.getBoundingClientRect();\n scale = rect.width / canvas.width;\n if (lastUsedPXsize && ctx) {\n ctx.lineWidth = lastUsedPXsize / scale;\n }\n }\n measureScale();\n\n window.addEventListener(\"resize\", measureScale);\n\n var ctx = canvas.getContext(\"2d\");\n\n // To make the lines look slightly nicer\n ctx.lineCap = \"round\";\n\n // We cache the mouse position and previous mouse position.\n // Theay are defined by touch events, and used by the draw loop\n var mousePos = {\n x: 0,\n y: 0\n },\n lastPos = mousePos;\n\n canvas.addEventListener(\"mousedown\", function (e) {\n if (e.which == 3) {\n // We detected a right click on canvas, probably to save it.\n // We merge the content of the background image with the canvas\n (0, _canvasMergerAndDonwloaderLink.mergeCanvasAndImage)(canvas, OrginalImage);\n return;\n }\n mousePos = lastPos = getMousePos(e);\n startDrawLoop();\n onMouseDown();\n }, false);\n\n // Allow ctrl-c > pasting to word & co\n document.addEventListener(\"copy\", function (ev) {\n ev.preventDefault();\n (0, _canvasMergerAndDonwloaderLink.mergeCanvasAndImage)(canvas, OrginalImage);\n ev.clipboardData.setData(\"text/html\", '');\n });\n\n document.addEventListener(\"mouseup\", endDrawLoop, false);\n\n canvas.addEventListener(\"mousemove\", function (e) {\n mousePos = getMousePos(e);\n }, false);\n\n // Get the position of the mouse relative to the canvas\n function getMousePos(mouseEvent) {\n return {\n x: (mouseEvent.clientX - rect.left) / scale,\n y: (mouseEvent.clientY - rect.top) / scale\n };\n }\n\n // Drawing loop is separated from the events\n\n var isDrawing = false;\n\n function startDrawLoop() {\n if (isDrawing) return;\n isDrawing = true;\n ctx.beginPath();\n drawLoop();\n }\n function endDrawLoop() {\n isDrawing && onMouseUp();\n isDrawing = false;\n }\n\n function drawLoop() {\n if (isDrawing) {\n window.requestAnimationFrame(drawLoop);\n renderCanvas();\n }\n }\n function renderCanvas() {\n ctx.moveTo(lastPos.x, lastPos.y);\n ctx.lineTo(mousePos.x, mousePos.y);\n ctx.stroke();\n lastPos = mousePos;\n }\n\n // Proxy mobile events to their mouse counterpart\n function proxyTouchToMouse(touchEventName, mouseEventName) {\n var eventTarget = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : canvas;\n\n canvas.addEventListener(touchEventName, function (e) {\n e.preventDefault();\n\n var _ref2 = e.touches[0] || {},\n clientX = _ref2.clientX,\n clientY = _ref2.clientY;\n\n var mouseEvent = new MouseEvent(mouseEventName, {\n clientX: clientX,\n clientY: clientY\n });\n eventTarget.dispatchEvent(mouseEvent);\n }, false);\n }\n proxyTouchToMouse(\"touchstart\", \"mousedown\");\n proxyTouchToMouse(\"touchend\", \"mouseup\", document);\n proxyTouchToMouse(\"touchmove\", \"mousemove\");\n\n return {\n drawWithEraser: function drawWithEraser() {\n ctx.globalCompositeOperation = \"destination-out\";\n },\n drawWithColor: function drawWithColor(color) {\n ctx.globalCompositeOperation = \"source-over\";\n ctx.strokeStyle = color;\n },\n setPencilSize: function setPencilSize(pxSize) {\n lastUsedPXsize = pxSize;\n ctx.lineWidth = pxSize / scale;\n }\n };\n};\n\nvar _canvasMergerAndDonwloaderLink = __webpack_require__(0);\n\n/***/ }),\n/* 11 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (slider, _ref) {\n var onChange = _ref.onChange;\n\n // Sets draw size at load and style when the user interracts with the slider\n function onPencilSizeChange(pxSize) {\n slider.value = pxSize;\n localStorage.setItem(\"pensize\", pxSize);\n onChange(pxSize);\n }\n slider.addEventListener(\"input\", function (e) {\n return onPencilSizeChange(e.target.value);\n });\n onPencilSizeChange(parseInt(localStorage.getItem(\"pensize\")) || DEFAULTSIZE);\n};\n\nvar DEFAULTSIZE = 20;\n\n/***/ }),\n/* 12 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (canvas, _ref) {\n var fitWindow = _ref.fitWindow;\n\n var ctx = void 0,\n w = void 0,\n h = void 0;\n var bgColor = \"#F44336\"; //randomColor(darkCoolColors);\n function reset() {\n if (fitWindow) {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n }\n w = canvas.width;\n h = canvas.height;\n ctx = canvas.getContext(\"2d\");\n ctx.fillStyle = bgColor;\n ctx.fillRect(0, 0, w, h);\n ctx.lineCap = \"round\";\n randomizeInst();\n }\n\n var position = void 0,\n speed = void 0,\n acceleration = void 0,\n timeoutHandle = void 0,\n accelerationTimeoutHandle = void 0;\n function randomizeInst() {\n position = {\n // x: Math.random() * w,\n // y: Math.random() * h\n x: w / 2,\n y: h / 2\n };\n speed = {\n x: Math.random() * 10 - 5,\n y: Math.random() * 10 - 5\n };\n acceleration = {\n x: Math.random() * 10 - 5,\n y: Math.random() * 10 - 5\n };\n\n ctx.strokeStyle = randomColor(coolColors, bgColor);\n ctx.lineWidth = 20 + Math.random() * 40;\n ctx.beginPath();\n ctx.moveTo(position.x, position.y);\n }\n\n reset();\n window.addEventListener(\"resize\", reset);\n\n function randomAcceletation() {\n acceleration = {\n x: Math.random() * 2 - 1,\n y: Math.random() * 2 - 1\n };\n // speed.x*=0.2;\n // speed.y*=0.2;\n\n accelerationTimeoutHandle = setTimeout(randomAcceletation, 100 + Math.random() * 200);\n }\n randomAcceletation();\n function renderCanvas() {\n ctx.moveTo(position.x, position.y);\n speed.x *= 0.95;\n speed.y *= 0.95;\n\n speed.x += acceleration.x;\n speed.y += acceleration.y;\n position.x += speed.x;\n position.y += speed.y;\n ctx.lineTo(position.x, position.y);\n ctx.stroke();\n if (position.x < -50 || position.x > w + 50 || position.y < -50 || position.y > h + 50) randomizeInst();\n }\n\n var isDrawing = true;\n function drawLoop() {\n if (isDrawing) {\n window.requestAnimationFrame(drawLoop);\n renderCanvas();\n }\n }\n\n drawLoop();\n\n function stopAnim() {\n isDrawing = false;\n clearTimeout(accelerationTimeoutHandle);\n window.removeEventListener(\"resize\", reset);\n }\n\n return {\n stopAnim: stopAnim,\n bgColor: bgColor\n };\n};\n\nvar coolColors = \"#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722\".split(\",\");\n\n//import { luminance } from \"./colorToRGB.js\";\n// const darkCoolColors = coolColors.filter(c => luminance(c) < 150);\n\nfunction randomColor(colorPool) {\n var exception = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : \"\";\n\n var withoutEx = colorPool.filter(function (c) {\n return c != exception;\n });\n return withoutEx[Math.floor(Math.random() * withoutEx.length)];\n}\n\n/***/ }),\n/* 13 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.startTask = startTask;\nexports.endTask = endTask;\nexports.updateLook = updateLook;\nvar tasksInProgress = 0;\nfunction startTask() {\n tasksInProgress++;\n updateLook();\n}\n\nfunction endTask() {\n tasksInProgress--;\n setTimeout(updateLook);\n}\n\nfunction updateLook() {\n spinners.classList[tasksInProgress ? \"remove\" : \"add\"](\"hidden\");\n}\ndocument.addEventListener(\"DOMContentLoaded\", updateLook);\n\n/***/ }),\n/* 14 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.detectCtrlS = detectCtrlS;\n\nvar _canvasMergerAndDonwloaderLink = __webpack_require__(0);\n\nfunction detectCtrlS(_ref) {\n var canvas = _ref.canvas,\n OrginalImage = _ref.OrginalImage,\n originalFileName = _ref.originalFileName;\n\n window.addEventListener(\"keydown\", function (event) {\n if (event.ctrlKey || event.metaKey) {\n if (String.fromCharCode(event.which).toLowerCase() === \"s\") {\n event.preventDefault();\n (0, _canvasMergerAndDonwloaderLink.triggerDownload)(canvas, originalFileName, OrginalImage);\n }\n }\n });\n}\n\n/***/ }),\n/* 15 */\n/***/ (function(module, exports) {\n\nvar appCacheIframe;\n\nfunction hasSW() {\n return 'serviceWorker' in navigator &&\n // This is how I block Chrome 40 and detect Chrome 41, because first has\n // bugs with history.pustState and/or hashchange\n (window.fetch || 'imageRendering' in document.documentElement.style) &&\n (window.location.protocol === 'https:' || window.location.hostname === 'localhost' || window.location.hostname.indexOf('127.') === 0)\n}\n\nfunction install(options) {\n options || (options = {});\n\n \n if (hasSW()) {\n var registration = navigator.serviceWorker\n .register(\n \"dist/sw.js\"\n \n );\n\n \n\n return;\n }\n \n\n \n if (window.applicationCache) {\n var directory = \"dist/appcache/\";\n var name = \"manifest\";\n\n var doLoad = function() {\n var page = directory + name + '.html';\n var iframe = document.createElement('iframe');\n\n \n\n iframe.src = page;\n iframe.style.display = 'none';\n\n appCacheIframe = iframe;\n document.body.appendChild(iframe);\n };\n\n if (document.readyState === 'complete') {\n setTimeout(doLoad);\n } else {\n window.addEventListener('load', doLoad);\n }\n\n return;\n }\n \n}\n\nfunction applyUpdate(callback, errback) {\n \n\n \n}\n\nfunction update() {\n \n if (hasSW()) {\n navigator.serviceWorker.getRegistration().then(function(registration) {\n if (!registration) return;\n return registration.update();\n });\n }\n \n\n \n if (appCacheIframe) {\n try {\n appCacheIframe.contentWindow.applicationCache.update();\n } catch (e) {}\n }\n \n}\n\n\n\nexports.install = install;\nexports.applyUpdate = applyUpdate;\nexports.update = update;\n\n\n/***/ })\n/******/ ]);\n\n\n// WEBPACK FOOTER //\n// bundle.f1584b69f9c93e44e8a8.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./dist/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 1);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap f1584b69f9c93e44e8a8"," \nexport function makeDownloadLink(\n link,\n { OrginalImage, canvas, originalFileName }\n) {\n // Download button\n function downloadImage(e) {\n e.preventDefault(); \n triggerDownload(canvas, originalFileName, OrginalImage);\n }\n link.addEventListener(\"click\", downloadImage);\n}\n\nfunction nope(e) {\n console.log(e);\n}\nvar downloadCounter = 0;\nexport function triggerDownload(\n canvas,\n originalFileName,\n OrginalImage,\n failed = nope,\n suceeded = nope\n) {\n let filename = originalFileName + \"-minimage-\" + downloadCounter + \".png\";\n mergeCanvasAndImage(canvas, OrginalImage, failed, suceeded);\n downloadCanvas(canvas, filename, failed, suceeded);\n\n downloadCounter++;\n}\n\nexport function mergeCanvasAndImage(canvas, img, failed, suceeded) {\n try {\n // Pastes the image as a canvas background\n var ctx = canvas.getContext(\"2d\");\n let oldComposite = ctx.globalCompositeOperation;\n ctx.globalCompositeOperation = \"destination-over\";\n\n // Draw the orignal image\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n\n ctx.globalCompositeOperation = oldComposite;\n suceeded && setTimeout(suceeded);\n return canvas;\n } catch (e) {\n failed && failed(e);\n }\n}\n\nfunction downloadCanvas(canvas, filename, failed, suceeded) {\n try {\n canvas.toBlob(function(blob) {\n try {\n if (window.navigator.msSaveOrOpenBlob) {\n window.navigator.msSaveBlob(blob, filename);\n suceeded && setTimeout(suceeded);\n } else {\n let url = window.URL.createObjectURL(blob);\n let link = document.createElement(\"a\");\n document.body.appendChild(link);\n link.setAttribute(\"href\", url);\n link.setAttribute(\"download\", filename);\n link.click();\n suceeded && setTimeout(suceeded);\n setTimeout(() => {\n window.URL.revokeObjectURL(url);\n document.body.removeChild(link);\n }, 3000);\n }\n } catch (e) {\n failed && failed(e);\n }\n });\n } catch (e) {\n failed && failed(e);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/canvasMergerAndDonwloaderLink.js","\nimport \"./styles.less\";\nimport setupColorPicker from \"./colorPicker.js\";\nimport askForIMG from \"./getAnImage.js\";\nimport toggleAbleBackground from \"./toggleAbleBackground.js\";\nimport setupEditableCanvas from \"./editableCanvas.js\";\nimport { makeDownloadLink } from \"./canvasMergerAndDonwloaderLink.js\";\nimport pencilSizeSlider from \"./pencilSizeSlider.js\";\nimport welcomeAnim from \"./welcomeAnim.js\";\nimport { startTask, endTask } from \"./spinners.js\";\nconst byId = document.getElementById.bind(document);\nimport { detectCtrlS } from \"./detectCtrlS.js\";\n\nimport * as OfflinePluginRuntime from \"offline-plugin/runtime\";\nOfflinePluginRuntime.install();\n\n\nlet originalFileName, OrginalImage;\naskForIMG({\n fileinput: byId(\"fileinput\"),\n onImageCreated: (img, filename) => {\n originalFileName = filename;\n letUserDrawAndDownload(img);\n },\n startTask,\n endTask\n});\n\nlet { stopAnim, bgColor } = welcomeAnim(byId(\"welcome\"), { fitWindow: true });\nbyId(\"fileInputWrapper\").style.color = bgColor;\n\n// Lets the user draw on the loaded image\nfunction letUserDrawAndDownload(img) {\n OrginalImage = img;\n stopAnim();\n const canvas = byId(\"drawzone\"),\n drawzoneWrapper = byId(\"drawzoneWrapper\");\n\n // Switch to drawing mode\n byId(\"inputForAFile\").style.display = \"none\";\n byId(\"drawAndDownload\").style.display = \"\";\n\n console.log(img.width, img.height);\n let maxRes = Math.max(window.innerWidth, window.innerHeight) * 2;\n // Fits the canvas to screen\n let imgScale = Math.max(img.width / maxRes, img.height / maxRes, 1);\n img.width = canvas.width = img.width / imgScale;\n img.height = canvas.height = img.height / imgScale;\n drawzoneWrapper.style.maxWidth = img.width;\n drawzoneWrapper.style.maxHeight = img.height;\n\n // Needs to happen AFTER size measurements\n drawzoneWrapper.appendChild(img);\n\n let ctx = canvas.getContext(\"2d\");\n let hasDoneFirstDraw = false;\n let barClass = byId(\"topbar\").classList;\n\n let background = byId(\"background\");\n\n const {\n setColorDotSize,\n refreshColorPreviewBorder,\n clearColorPicker\n } = setupColorPicker(byId(\"pensizePreview\"), {\n canvasForCursor: canvas,\n onColorChange: setColor,\n elementToContrastWith: background\n });\n\n let {\n drawWithColor,\n drawWithEraser,\n setPencilSize\n } = setupEditableCanvas(canvas, {\n onMouseDown() {\n if (canvas.getClientRects()[0].height + 2 * 80 > window.innerHeight) {\n barClass.add(\"drawInProgress\");\n }\n },\n onMouseUp() {\n if (!hasDoneFirstDraw) {\n hasDoneFirstDraw = true;\n download.classList.add(\"usable\");\n }\n barClass.remove(\"drawInProgress\");\n },\n OrginalImage\n });\n\n // Sets draw color at load and when user clicks color input\n function setColor(color) {\n if (color == \"eraser\") {\n drawWithEraser();\n } else {\n drawWithColor(color);\n }\n }\n // Tap the background to switch its color (usefull for transparent images)\n toggleAbleBackground(background, { onChange: refreshColorPreviewBorder });\n\n pencilSizeSlider(byId(\"pensize\"), {\n onChange(pxSize) {\n setColorDotSize(pxSize);\n setPencilSize(pxSize);\n }\n });\n\n makeDownloadLink(byId(\"download\"), {\n OrginalImage,\n originalFileName,\n canvas\n });\n\n detectCtrlS({\n canvas,\n OrginalImage,\n originalFileName\n });\n\n function clear() {\n clearColorPicker();\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/app.js","const DEFAULTCOLOR = \"#2b76ce\";\nimport { luminance } from \"./colorToRGB.js\";\nimport { paletteColors } from \"./palette.js\";\nimport { createModal } from \"./modal.js\";\nexport default function(\n pensizePreview,\n { onColorChange, elementToContrastWith, canvasForCursor }\n) {\n const pensizePreviewDot = pensizePreview.children[0];\n const pensizePreviewBorder = pensizePreview.children[1];\n\n function refreshColorPreviewBorder() {\n pensizePreviewBorder.style.background = borderColor(\n currentColor,\n elementToContrastWith.style.backgroundColor\n );\n }\n\n let currentColor;\n function openInitializedColorPicker() {\n openColorPicker(currentColor, onColorPicked);\n }\n pensizePreview.addEventListener(\"click\", openInitializedColorPicker);\n let previousColor = localStorage.getItem(\"previousColor\") || \"eraser\";\n\n function onColorPicked(color) {\n console.log(\"onColorPicked\", color);\n if (currentColor && color !== currentColor) {\n // For toggling between last two colors\n previousColor = currentColor;\n }\n\n localStorage.setItem(\"previousColor\", previousColor);\n\n currentColor = color;\n setCursor(canvasForCursor, currentSize, currentColor);\n if (color == \"eraser\") {\n pensizePreviewDot.style.background = \"\";\n pensizePreviewDot.classList.add(\"eraser\");\n } else {\n pensizePreviewDot.classList.remove(\"eraser\");\n pensizePreviewDot.style.background = color;\n refreshColorPreviewBorder();\n }\n localStorage.setItem(\"color\", color);\n onColorChange(color);\n }\n let currentSize;\n // Should be 10\n const baseSize = pensizePreviewDot.getBoundingClientRect().width;\n\n window.addEventListener(\"keydown\", ev => {\n if (String.fromCharCode(ev.which).toLowerCase() === \"x\") {\n console.log(\"x switching to \" + previousColor);\n onColorPicked(previousColor);\n }\n });\n\n function setColorDotSize(pxSize) {\n currentSize = pxSize;\n setCursor(canvasForCursor, currentSize, currentColor);\n pensizePreviewDot.style.transform = \"scale(\" + pxSize / baseSize + \")\";\n pensizePreviewBorder.style.transform =\n \"scale(\" + (pxSize / baseSize + 1 / baseSize) + \")\";\n }\n\n setTimeout(() =>\n onColorPicked(localStorage.getItem(\"color\") || DEFAULTCOLOR)\n );\n\n return {\n clearColorPicker() {\n pensizePreview.removeEventListener(\"click\", openInitializedColorPicker);\n },\n setColorDotSize,\n refreshColorPreviewBorder\n };\n}\n\nfunction borderColor(foreground, background) {\n if (foreground == \"eraser\") return \"transparent\";\n let bgL = luminance(background);\n let fgL = luminance(foreground);\n if (bgL > 125 && fgL > 200) return \"black\";\n if (bgL < 125 && fgL < 25) return \"white\";\n return \"transparent\";\n}\n\nfunction textColor(background) {\n return luminance(background) > 255 / 2\n ? \"rgba(0,0,0,0.8)\"\n : \"rgba(255,255,255,0.8)\";\n}\n\nfunction openColorPicker(currentColor, callback) {\n createModal(\"color-modal\", ({ modal, closeModal }) => {\n function pickColor(color) {\n closeModal();\n callback(color);\n }\n\n paletteColors.forEach(color => {\n let button = document.createElement(\"button\");\n button.classList.add(\"colorbutton\");\n if (color === currentColor) {\n button.classList.add(\"active\");\n button.innerHTML = \"Selected\";\n button.style.color = textColor(color);\n }\n button.style.backgroundColor = color.toLowerCase();\n button.addEventListener(\"click\", () => pickColor(color));\n modal.appendChild(button);\n });\n\n let eraser = document.createElement(\"button\");\n eraser.classList.add(\"eraser\");\n eraser.addEventListener(\"click\", () => pickColor(\"eraser\"));\n eraser.innerHTML =\n '' +\n (\"eraser\" === currentColor ? \"Eraser selected\" : \"Eraser\") +\n \"\";\n modal.appendChild(eraser);\n });\n}\n\nfunction setCursor(node, size, color) {\n let s = size < 4 ? 4 : size;\n let c = document.createElement(\"canvas\");\n c.width = c.height = s;\n let ctx = c.getContext(\"2d\");\n\n if (color == \"eraser\") drawEraser(ctx, s);\n else drawColorCircle(ctx, s, color);\n let cursor = c.toDataURL(\"image/png\");\n node.style.cursor = `url(${cursor}) ${s / 2} ${s / 2},auto`;\n}\n\nfunction drawColorCircle(ctx, s, color) {\n ctx.beginPath();\n ctx.arc(s / 2, s / 2, s / 2, 0, 2 * Math.PI, false);\n ctx.fillStyle = color;\n ctx.fill();\n}\n\nfunction drawEraser(ctx, s) {\n ctx.fillStyle = \"#da502d\";\n ctx.fillRect(0, 0, s * 2 / 3, s);\n ctx.fillStyle = \"#6584a5\";\n ctx.fillRect(s * 2 / 3 - 1, 0, s, s);\n ctx.globalCompositeOperation = \"destination-in\";\n drawColorCircle(ctx, s, \"white\");\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/colorPicker.js","export function colorToRGB(color) {\n var canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = 1;\n var ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, 1, 1);\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, 1, 1);\n return [...ctx.getImageData(0, 0, 1, 1).data].slice(0, 3);\n}\n\nexport function luminance(color) {\n return colorToRGB(color).reduce((a, b) => a + b, 0) / 3;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/colorToRGB.js","export const paletteColors = \"#000000,#FFFFFF,#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722,#795548,#9E9E9E,#607D8B\".split(\n \",\"\n);\n\n\n\n// WEBPACK FOOTER //\n// ./src/palette.js","let modalZindex = 4;\nexport function createModal(className, callback) {\n let modal = document.createElement(\"div\");\n modal.classList.add(\"modal\");\n modal.classList.add(className);\n document.body.appendChild(modal);\n\n let backdrop = document.createElement(\"div\");\n backdrop.classList.add(\"modal-backdrop\");\n document.body.appendChild(backdrop);\n\n backdrop.style.zIndex = modalZindex;\n modal.style.zIndex = modalZindex + 1;\n backdrop.addEventListener(\"click\", closeModal);\n document.addEventListener(\"keyup\", closeOnEscape);\n function closeOnEscape(ev) {\n if (\n ev.which == 27 // escape key\n )\n closeModal();\n }\n function closeModal() {\n modal.classList.add(\"closing\");\n backdrop.classList.add(\"closing\");\n setTimeout(() => {\n document.body.removeChild(modal);\n document.body.removeChild(backdrop);\n }, 300);\n document.removeEventListener(\"keyup\", closeOnEscape);\n }\n modalZindex += 2;\n return callback({ modal, closeModal });\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/modal.js","export default function({\n onImageCreated,\n fileinput,\n startTask = () => null,\n endTask = () => null\n}) {\n // Callbacks onImageCreated with img tag and filename\n let originalFileName = \"pasted-image\";\n let askingForImage = true;\n\n // Transforms the file input content to a real image\n function loadFile(fileToLoad) {\n startTask();\n let fileReader = new FileReader();\n fileReader.onload = () => {\n createImageWithFileContent(fileReader.result);\n endTask();\n };\n fileReader.onerror = endTask;\n fileReader.readAsDataURL(fileToLoad);\n }\n\n function createImageWithFileContent(result) {\n startTask();\n if (!askingForImage) return;\n let img = new Image();\n img.onload = () => {\n askingForImage = false;\n onImageCreated(img, originalFileName);\n endTask();\n };\n img.onerror = endTask;\n img.src = result;\n }\n\n // Setup of the welcome UI\n function askForImage() {\n fileinput && fileinput.addEventListener(\"change\", fileChanged);\n function fileChanged(changeEvent) {\n fileinput.removeEventListener(\"change\", fileChanged);\n originalFileName =\n fileinput.value.split(\"\\\\\").pop().split(\".\")[0] || \"image\";\n loadFile(changeEvent.target.files[0]);\n }\n }\n\n askForImage();\n\n window.addEventListener(\"paste\", function(ev) {\n handleDataTransferItems(ev.clipboardData.items);\n });\n\n document.body.addEventListener(\"dragover\", function(ev) {\n ev.preventDefault();\n ev.stopPropagation();\n });\n document.body.addEventListener(\"drop\", function(ev) {\n ev.preventDefault();\n ev.stopPropagation();\n handleDataTransferItems(ev.dataTransfer.items);\n });\n\n function handleDataTransferItems(items) {\n // Tries to paste an image\n let imageFile = Array.prototype.find.call(\n items,\n e => e.kind == \"file\" && e.type.match(\"image\")\n );\n originalFileName = \"pasted-image\";\n if (imageFile) {\n loadFile(imageFile.getAsFile());\n return;\n }\n // Tries to load a remote image given its adress\n let url = Array.prototype.find.call(items, e => e.kind == \"string\");\n if (url) {\n url.getAsString(s => createImageWithFileContent(s));\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/getAnImage.js","export default function(background, { onChange }) {\n function switchBackground() {\n currentMode++;\n localStorage.setItem(\"background\", currentMode);\n applyBackground();\n }\n let switchCount = 0;\n function applyBackground() {\n let options = [\"#DDD\", \"#333\"];\n let current = currentMode % options.length;\n background.style.backgroundColor = options[current];\n // let meta = document.getElementById(\"theme-color\");\n // meta && meta.setAttribute(\"content\", \"#fff\");\n onChange(current);\n\n let bclass = document.body.classList;\n options.forEach((color, index) => bclass.remove(\"background_n_\" + index));\n bclass.add(\"background_n_\" + current);\n // https://www.youtube.com/watch?v=Pr8ETbGz35Q\n if (switchCount < 8) {\n console.log(current == 0 ? \"jour !\" : \"nuit !\");\n switchCount++;\n } else {\n console.log(\n \"Monsieur Jacquouille, je vous en prie, à la longue, ça devient casse-pied !\"\n );\n }\n }\n let currentMode = localStorage.getItem(\"background\") || 0;\n applyBackground();\n background.addEventListener(\"click\", switchBackground);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/toggleAbleBackground.js","import { mergeCanvasAndImage } from \"./canvasMergerAndDonwloaderLink.js\";\n\nexport default function(canvas, { onMouseDown, onMouseUp, OrginalImage }) {\n // We cache some zoom related data to avoid getting them all the time\n let scale, rect, lastUsedPXsize;\n\n function measureScale() {\n rect = canvas.getBoundingClientRect();\n scale = rect.width / canvas.width;\n if (lastUsedPXsize && ctx) {\n ctx.lineWidth = lastUsedPXsize / scale;\n }\n }\n measureScale();\n\n window.addEventListener(\"resize\", measureScale);\n\n let ctx = canvas.getContext(\"2d\");\n\n // To make the lines look slightly nicer\n ctx.lineCap = \"round\";\n\n // We cache the mouse position and previous mouse position.\n // Theay are defined by touch events, and used by the draw loop\n let mousePos = {\n x: 0,\n y: 0\n },\n lastPos = mousePos;\n\n canvas.addEventListener(\n \"mousedown\",\n function(e) {\n if (e.which == 3) {\n // We detected a right click on canvas, probably to save it.\n // We merge the content of the background image with the canvas\n mergeCanvasAndImage(canvas, OrginalImage);\n return;\n }\n mousePos = lastPos = getMousePos(e);\n startDrawLoop();\n onMouseDown();\n },\n false\n );\n\n // Allow ctrl-c > pasting to word & co\n document.addEventListener(\"copy\", ev => {\n ev.preventDefault();\n mergeCanvasAndImage(canvas, OrginalImage);\n ev.clipboardData.setData(\n \"text/html\",\n ''\n );\n });\n\n document.addEventListener(\"mouseup\", endDrawLoop, false);\n\n canvas.addEventListener(\n \"mousemove\",\n function(e) {\n mousePos = getMousePos(e);\n },\n false\n );\n\n // Get the position of the mouse relative to the canvas\n function getMousePos(mouseEvent) {\n return {\n x: (mouseEvent.clientX - rect.left) / scale,\n y: (mouseEvent.clientY - rect.top) / scale\n };\n }\n\n // Drawing loop is separated from the events\n\n let isDrawing = false;\n\n function startDrawLoop() {\n if (isDrawing) return;\n isDrawing = true;\n ctx.beginPath();\n drawLoop();\n }\n function endDrawLoop() {\n isDrawing && onMouseUp();\n isDrawing = false;\n }\n\n function drawLoop() {\n if (isDrawing) {\n window.requestAnimationFrame(drawLoop);\n renderCanvas();\n }\n }\n function renderCanvas() {\n ctx.moveTo(lastPos.x, lastPos.y);\n ctx.lineTo(mousePos.x, mousePos.y);\n ctx.stroke();\n lastPos = mousePos;\n }\n\n // Proxy mobile events to their mouse counterpart\n function proxyTouchToMouse(\n touchEventName,\n mouseEventName,\n eventTarget = canvas\n ) {\n canvas.addEventListener(\n touchEventName,\n function(e) {\n e.preventDefault();\n let { clientX, clientY } = e.touches[0] || {};\n let mouseEvent = new MouseEvent(mouseEventName, {\n clientX,\n clientY\n });\n eventTarget.dispatchEvent(mouseEvent);\n },\n false\n );\n }\n proxyTouchToMouse(\"touchstart\", \"mousedown\");\n proxyTouchToMouse(\"touchend\", \"mouseup\", document);\n proxyTouchToMouse(\"touchmove\", \"mousemove\");\n\n return {\n drawWithEraser() {\n ctx.globalCompositeOperation = \"destination-out\";\n },\n drawWithColor(color) {\n ctx.globalCompositeOperation = \"source-over\";\n ctx.strokeStyle = color;\n },\n setPencilSize(pxSize) {\n lastUsedPXsize = pxSize;\n ctx.lineWidth = pxSize / scale;\n }\n };\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/editableCanvas.js","const DEFAULTSIZE = 20;\nexport default function(slider, { onChange }) {\n // Sets draw size at load and style when the user interracts with the slider\n function onPencilSizeChange(pxSize) {\n slider.value = pxSize;\n localStorage.setItem(\"pensize\", pxSize);\n onChange(pxSize);\n }\n slider.addEventListener(\"input\", e => onPencilSizeChange(e.target.value));\n onPencilSizeChange(parseInt(localStorage.getItem(\"pensize\")) || DEFAULTSIZE);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/pencilSizeSlider.js","const coolColors = \"#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722\".split(\n \",\"\n);\n\n//import { luminance } from \"./colorToRGB.js\";\n// const darkCoolColors = coolColors.filter(c => luminance(c) < 150);\n\nfunction randomColor(colorPool, exception = \"\") {\n let withoutEx = colorPool.filter(c => c != exception);\n return withoutEx[Math.floor(Math.random() * withoutEx.length)];\n}\n\nexport default function(canvas, { fitWindow }) {\n let ctx, w, h;\n let bgColor = \"#F44336\"; //randomColor(darkCoolColors);\n function reset() {\n if (fitWindow) {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n }\n w = canvas.width;\n h = canvas.height;\n ctx = canvas.getContext(\"2d\");\n ctx.fillStyle = bgColor;\n ctx.fillRect(0, 0, w, h);\n ctx.lineCap = \"round\";\n randomizeInst();\n }\n\n let position, speed, acceleration, timeoutHandle, accelerationTimeoutHandle;\n function randomizeInst() {\n position = {\n // x: Math.random() * w,\n // y: Math.random() * h\n x: w / 2,\n y: h / 2\n };\n speed = {\n x: Math.random() * 10 - 5,\n y: Math.random() * 10 - 5\n };\n acceleration = {\n x: Math.random() * 10 - 5,\n y: Math.random() * 10 - 5\n };\n\n ctx.strokeStyle = randomColor(coolColors, bgColor);\n ctx.lineWidth = 20 + Math.random() * 40;\n ctx.beginPath();\n ctx.moveTo(position.x, position.y);\n }\n\n reset();\n window.addEventListener(\"resize\", reset);\n\n function randomAcceletation() {\n acceleration = {\n x: Math.random() * 2 - 1,\n y: Math.random() * 2 - 1\n };\n // speed.x*=0.2;\n // speed.y*=0.2;\n\n accelerationTimeoutHandle = setTimeout(\n randomAcceletation,\n 100 + Math.random() * 200\n );\n }\n randomAcceletation();\n function renderCanvas() {\n ctx.moveTo(position.x, position.y);\n speed.x *= 0.95;\n speed.y *= 0.95;\n\n speed.x += acceleration.x;\n speed.y += acceleration.y;\n position.x += speed.x;\n position.y += speed.y;\n ctx.lineTo(position.x, position.y);\n ctx.stroke();\n if (\n position.x < -50 ||\n position.x > w + 50 ||\n position.y < -50 ||\n position.y > h + 50\n )\n randomizeInst();\n }\n\n let isDrawing = true;\n function drawLoop() {\n if (isDrawing) {\n window.requestAnimationFrame(drawLoop);\n renderCanvas();\n }\n }\n\n drawLoop();\n\n function stopAnim() {\n isDrawing = false;\n clearTimeout(accelerationTimeoutHandle);\n window.removeEventListener(\"resize\", reset);\n }\n\n return {\n stopAnim,\n bgColor\n };\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/welcomeAnim.js","let tasksInProgress = 0;\nexport function startTask() {\n tasksInProgress++;\n updateLook();\n}\n\nexport function endTask() {\n tasksInProgress--;\n setTimeout(updateLook);\n}\n\nexport function updateLook() {\n spinners.classList[tasksInProgress ? \"remove\" : \"add\"](\"hidden\");\n}\ndocument.addEventListener(\"DOMContentLoaded\", updateLook);\n\n\n\n// WEBPACK FOOTER //\n// ./src/spinners.js","import { triggerDownload } from \"./canvasMergerAndDonwloaderLink.js\";\nexport function detectCtrlS({ canvas, OrginalImage, originalFileName }) {\n window.addEventListener(\"keydown\", event => {\n if (event.ctrlKey || event.metaKey) {\n if (String.fromCharCode(event.which).toLowerCase() === \"s\") {\n event.preventDefault();\n triggerDownload(canvas, originalFileName, OrginalImage);\n }\n }\n });\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/detectCtrlS.js","var appCacheIframe;\n\nfunction hasSW() {\n return 'serviceWorker' in navigator &&\n // This is how I block Chrome 40 and detect Chrome 41, because first has\n // bugs with history.pustState and/or hashchange\n (window.fetch || 'imageRendering' in document.documentElement.style) &&\n (window.location.protocol === 'https:' || window.location.hostname === 'localhost' || window.location.hostname.indexOf('127.') === 0)\n}\n\nfunction install(options) {\n options || (options = {});\n\n \n if (hasSW()) {\n var registration = navigator.serviceWorker\n .register(\n \"dist/sw.js\"\n \n );\n\n \n\n return;\n }\n \n\n \n if (window.applicationCache) {\n var directory = \"dist/appcache/\";\n var name = \"manifest\";\n\n var doLoad = function() {\n var page = directory + name + '.html';\n var iframe = document.createElement('iframe');\n\n \n\n iframe.src = page;\n iframe.style.display = 'none';\n\n appCacheIframe = iframe;\n document.body.appendChild(iframe);\n };\n\n if (document.readyState === 'complete') {\n setTimeout(doLoad);\n } else {\n window.addEventListener('load', doLoad);\n }\n\n return;\n }\n \n}\n\nfunction applyUpdate(callback, errback) {\n \n\n \n}\n\nfunction update() {\n \n if (hasSW()) {\n navigator.serviceWorker.getRegistration().then(function(registration) {\n if (!registration) return;\n return registration.update();\n });\n }\n \n\n \n if (appCacheIframe) {\n try {\n appCacheIframe.contentWindow.applicationCache.update();\n } catch (e) {}\n }\n \n}\n\n\n\nexports.install = install;\nexports.applyUpdate = applyUpdate;\nexports.update = update;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/offline-plugin/runtime.js\n// module id = 15\n// module chunks = 0"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/bundle.f1584b69f9c93e44e8a8.css b/dist/bundle.f181a7f28dc473f6f66c.css similarity index 51% rename from dist/bundle.f1584b69f9c93e44e8a8.css rename to dist/bundle.f181a7f28dc473f6f66c.css index 914e144..eb59c88 100644 --- a/dist/bundle.f1584b69f9c93e44e8a8.css +++ b/dist/bundle.f181a7f28dc473f6f66c.css @@ -1,2 +1,2 @@ -body{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;margin:0;padding:0;overflow:hidden}input[type=range]{-webkit-appearance:none;margin:15px 0;width:140px}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:140px;height:8px;cursor:pointer;animate:.2s;box-shadow:0 0 0 #bbb,0 0 0 #c8c8c8;background:#aaa;border-radius:4px;border:1px solid #bbb}input[type=range]::-webkit-slider-thumb{box-shadow:1px 1px 1px #333,0 0 1px #404040;border:0 solid #fff;height:30px;width:30px;border-radius:8px;background:#ddd;cursor:pointer;-webkit-appearance:none;margin-top:-12px}input[type=range]:focus::-webkit-slider-runnable-track{background:#b7b7b7}input[type=range]::-moz-range-track{width:140px;height:8px;cursor:pointer;animate:.2s;box-shadow:0 0 0 #bbb,0 0 0 #c8c8c8;background:#aaa;border-radius:4px;border:1px solid #bbb}input[type=range]::-moz-range-thumb{box-shadow:1px 1px 1px #333,0 0 1px #404040;border:0 solid #fff;height:30px;width:30px;border-radius:8px;background:#ddd;cursor:pointer}input[type=range]::-ms-track{width:140px;height:8px;cursor:pointer;animate:.2s;background:transparent;border-color:transparent;border-width:30px 0;color:transparent}input[type=range]::-ms-fill-lower{background:#9d9d9d}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{border:1px solid #bbb;border-radius:8px;box-shadow:0 0 0 #bbb,0 0 0 #c8c8c8}input[type=range]::-ms-fill-upper{background:#aaa}input[type=range]::-ms-thumb{box-shadow:1px 1px 1px #333,0 0 1px #404040;border:0 solid #fff;height:30px;width:30px;border-radius:8px;background:#ddd;cursor:pointer}input[type=range]:focus::-ms-fill-lower{background:#aaa}input[type=range]:focus::-ms-fill-upper{background:#b7b7b7}div#spinners{position:absolute;top:50%;left:50%;transition:opacity .2s}div#spinners.hidden{opacity:0;pointer-events:none}div#spinners i{-webkit-animation:bounce .8s infinite;animation:bounce .8s infinite;display:block;position:absolute;z-index:11}div#spinners i:after{content:"";display:block;background:red;width:30px;height:30px;border-radius:50%;-webkit-animation:rainbow .8s infinite,squash .8s infinite;animation:rainbow .8s infinite,squash .8s infinite}div#spinners i:first-child{left:-50px}div#spinners i:first-child,div#spinners i:first-child:after{-webkit-animation-delay:-.7333s;animation-delay:-.7333s}div#spinners i:nth-child(3){left:50px}div#spinners i:nth-child(3),div#spinners i:nth-child(3):after{-webkit-animation-delay:-.266s;animation-delay:-.266s}div#spinners:after{content:"";display:block;background:hsla(0,0%,100%,.8);position:fixed;top:0;left:0;right:0;bottom:0;z-index:10}@-webkit-keyframes bounce{0%,to{-webkit-transform:translateY(-100px);transform:translateY(-100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:translate(0);transform:translate(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce{0%,to{-webkit-transform:translateY(-100px);transform:translateY(-100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:translate(0);transform:translate(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@-webkit-keyframes squash{0%,50%,to{-webkit-transform:scaleX(.9) scaleY(1.1);transform:scaleX(.9) scaleY(1.1)}60%{-webkit-transform:scaleX(1.2) scaleY(.6);transform:scaleX(1.2) scaleY(.6)}}@keyframes squash{0%,50%,to{-webkit-transform:scaleX(.9) scaleY(1.1);transform:scaleX(.9) scaleY(1.1)}60%{-webkit-transform:scaleX(1.2) scaleY(.6);transform:scaleX(1.2) scaleY(.6)}}body.runningWithinWebview{background:#f44336;color:#fff;max-width:500px;padding:20px;margin:200px auto;font-size:25px}body.runningWithinWebview:after{content:"";display:block;width:0;height:0;border:40px solid;border-color:transparent transparent #fff;position:fixed;top:0;right:20px;-webkit-animation:pointAtButton 1s infinite;animation:pointAtButton 1s infinite}@-webkit-keyframes pointAtButton{0%,to{-webkit-transform:rotate(30deg);transform:rotate(30deg)}33%{-webkit-transform:translate(-5px,20px) rotate(35deg) scale(.9);transform:translate(-5px,20px) rotate(35deg) scale(.9)}66%{-webkit-transform:translateY(-20px) rotate(25deg) scale(1.1);transform:translateY(-20px) rotate(25deg) scale(1.1)}}@keyframes pointAtButton{0%,to{-webkit-transform:rotate(30deg);transform:rotate(30deg)}33%{-webkit-transform:translate(-5px,20px) rotate(35deg) scale(.9);transform:translate(-5px,20px) rotate(35deg) scale(.9)}66%{-webkit-transform:translateY(-20px) rotate(25deg) scale(1.1);transform:translateY(-20px) rotate(25deg) scale(1.1)}}.bounceClick{transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.bounceClick:active{-webkit-transform:scale(.95);transform:scale(.95)}button{cursor:pointer}canvas#welcome{top:0;z-index:-1}.links,canvas#welcome{position:fixed;left:0;right:0;bottom:0}.links{display:-webkit-box;display:-ms-flexbox;display:flex;color:#fff;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:rgba(0,0,0,.3)}@media (max-width:700px){.links{display:none}}.links>*{padding:5px;color:#fff}#fileInputWrapper{background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-weight:700;font-size:120%;padding:20px;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;max-width:250px;max-height:250px;border-radius:50%}@media (min-width:400){#fileInputWrapper{font-size:140%}}#fileinput,#inputForAFile,canvas#drawzone{position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box}div#drawAndDownload{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;top:0;position:absolute;display:block;bottom:0;left:0;right:0}#drawzoneWrapper{position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;width:100%;height:100%}#drawzoneWrapper canvas,#drawzoneWrapper img{position:absolute;max-width:100%;max-height:100%;margin:auto;border-radius:2px;width:auto;height:auto;display:block;top:0;bottom:0;left:0;right:0}#drawzoneWrapper img{z-index:2}#drawzoneWrapper canvas{z-index:3;cursor:default}label#fileInputWrapper{transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}label#fileInputWrapper:active{-webkit-transform:scale(.95);transform:scale(.95)}label#fileInputWrapper #fileinput{width:100%;opacity:0;cursor:pointer}h1.noscript{display:-webkit-box;display:-ms-flexbox;display:flex;background:orange;color:#fff;text-align:center;position:absolute;top:0;left:0;right:0;bottom:0;margin:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:200}ul.tip{color:#666;font-style:italic}ul.tip li{margin:5px 0}#topbar{position:fixed;bottom:0;left:0;right:0;height:50px;padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:3;overflow:hidden;max-width:400px;margin:auto;border-radius:5px;bottom:10px;transition:background-color .3s,-webkit-transform .2s;transition:transform .2s,background-color .3s;transition:transform .2s,background-color .3s,-webkit-transform .2s}#topbar>*{pointer-events:auto}#topbar.drawInProgress{-webkit-transform:translateY(150px);transform:translateY(150px)}#topbar #pensizePreview{width:50px;height:50px;position:relative;margin-right:50px;background:transparent;border:none;outline:none;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}#topbar #pensizePreview:active,#topbar #pensizePreview:focus{outline:none}#topbar #pensizePreview:active{-webkit-transform:scale(.95);transform:scale(.95)}#topbar #pensizePreview #pensizePreviewDot{z-index:2}#topbar #pensizePreview:hover{-webkit-animation:squish .5s infinite;animation:squish .5s infinite}#topbar #pensizePreview:hover #pensizePreviewDot{-webkit-animation:rainbow 1s infinite;animation:rainbow 1s infinite}#topbar #pensizePreview>*{border-radius:50%;height:50px;width:50px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}#topbar #pensizePreview>.eraser{background:url(/images/eraser-color.svg);background-repeat:no-repeat;background-size:contain;background-position:50%}#topbar #download{width:140px;text-transform:uppercase;font-size:80%;margin-left:20px;position:relative;opacity:.5}#topbar #download.usable{opacity:1;-webkit-animation:bounceIn .3s;animation:bounceIn .3s}#topbar #download span.icon{padding:0 5px;opacity:.8;-webkit-transform:scale(.8);transform:scale(.8)}@media (max-width:380px){#topbar #download{width:50px}#topbar #download .label{display:none}}@-webkit-keyframes bounceIn{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;-webkit-transform:scale(1.2) translateY(-5px);transform:scale(1.2) translateY(-5px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounceIn{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;-webkit-transform:scale(1.2) translateY(-5px);transform:scale(1.2) translateY(-5px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}body.background_n_1 #download{position:relative;color:#333;background:#fff;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;text-decoration:none;cursor:pointer;-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 3px 0 #ccc;transition:box-shadow .2s,-webkit-transform .2s;transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s,-webkit-transform .2s;border-radius:3px;margin:5px 0}body.background_n_1 #download:focus,body.background_n_1 #download:hover{background:#e6e6e6;-webkit-animation:squish .2s;animation:squish .2s}body.background_n_1 #download:active{-webkit-transform:none;transform:none;box-shadow:0 0 0 #ccc;background:#ccc}body.background_n_1 #topbar{background-color:#333}body.background_n_0 #download{position:relative;color:#fff;background:#333;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;text-decoration:none;cursor:pointer;-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 3px 0 #000;transition:box-shadow .2s,-webkit-transform .2s;transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s,-webkit-transform .2s;border-radius:3px;margin:5px 0}body.background_n_0 #download:focus,body.background_n_0 #download:hover{background:#1a1a1a;-webkit-animation:squish .2s;animation:squish .2s}body.background_n_0 #download:active{-webkit-transform:none;transform:none;box-shadow:0 0 0 #000;background:#000}body.background_n_0 #download span.icon svg path{fill:#fff}body.background_n_0 #topbar{background-color:#ddd}div#background{transition:background-color .2s}.modal,div#background{background:#fff;position:fixed;top:0;left:0;right:0;bottom:0}.modal{border-radius:2px;margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-animation:openModal .2s;animation:openModal .2s}.modal.color-modal{max-width:500px;max-height:500px}.modal.color-modal button{border:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:30%;margin:5px;border-radius:2px;border:1px solid hsla(0,0%,100%,0);transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;line-height:0}.modal.color-modal button:active{-webkit-transform:scale(.95);transform:scale(.95)}@media (min-width:600){.modal.color-modal button{font-size:140%}}.modal.color-modal button.active{font-weight:700}.modal.color-modal button.colorbutton{box-shadow:0 0 5px rgba(0,0,0,.58)}.modal.color-modal button.colorbutton:hover{-webkit-animation:squish .3s;animation:squish .3s}.modal.color-modal button.eraser{position:relative;background:transparent}.modal.color-modal button.eraser img{max-width:100%;max-height:100%;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.modal.color-modal button.eraser:hover img{-webkit-animation:eraseStuff .5s infinite;animation:eraseStuff .5s infinite}.modal.color-modal button.eraser span.imagelabel{position:absolute;left:50%;opacity:.8;padding-left:70px}.modal.file-download{overflow-y:scroll;display:block;max-width:400px;margin:auto}.modal.file-download a:hover,.modal.file-download button:hover{-webkit-animation:squish .3s;animation:squish .3s}.modal.file-download>*{padding:20px;margin:10px;background:#eee;display:block;border-radius:5px;text-decoration:none}.modal.file-download>.facebookLink{background:#3b5998;color:#fff}.modal.file-download>.githubLink{color:#fff;background:#24292e}.modal.file-download>#downloadIndicator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0}.modal.file-download>#downloadIndicator div{padding:20px}.modal.file-download>#downloadIndicator.sucess{background:#4caf50;color:#fff;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.modal.file-download>#downloadIndicator.sucess button{padding:20px;margin:10px}.modal.file-download>#downloadIndicator.failed{background:#f44336;color:#fff}.modal.file-download>.pcHint{opacity:.8}@media (max-width:900px){.modal.file-download>.pcHint{display:none}}.modal.closing{pointer-events:none;-webkit-animation:closeModal .3s ease-in;animation:closeModal .3s ease-in}.modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);-webkit-animation:openBackdrop .2s;animation:openBackdrop .2s}.modal-backdrop.closing{pointer-events:none;-webkit-animation:closeBackdrop .3s;animation:closeBackdrop .3s}@-webkit-keyframes squish{33%{-webkit-transform:scaleX(.95);transform:scaleX(.95)}66%{-webkit-transform:scaleX(.97) scaleY(1.05);transform:scaleX(.97) scaleY(1.05)}}@keyframes squish{33%{-webkit-transform:scaleX(.95);transform:scaleX(.95)}66%{-webkit-transform:scaleX(.97) scaleY(1.05);transform:scaleX(.97) scaleY(1.05)}}@-webkit-keyframes eraseStuff{33%{-webkit-transform:rotate(-4deg) translate(-15px);transform:rotate(-4deg) translate(-15px)}66%{-webkit-transform:rotate(-5deg) scaleX(.97) scaleY(1.02);transform:rotate(-5deg) scaleX(.97) scaleY(1.02)}}@keyframes eraseStuff{33%{-webkit-transform:rotate(-4deg) translate(-15px);transform:rotate(-4deg) translate(-15px)}66%{-webkit-transform:rotate(-5deg) scaleX(.97) scaleY(1.02);transform:rotate(-5deg) scaleX(.97) scaleY(1.02)}}@-webkit-keyframes openModal{0%{opacity:0;-webkit-transform:scale(.5) translateY(-100px);transform:scale(.5) translateY(-100px)}}@keyframes openModal{0%{opacity:0;-webkit-transform:scale(.5) translateY(-100px);transform:scale(.5) translateY(-100px)}}@-webkit-keyframes closeModal{to{-webkit-transform:scale(.5) translateY(100px);transform:scale(.5) translateY(100px);opacity:0}}@keyframes closeModal{to{-webkit-transform:scale(.5) translateY(100px);transform:scale(.5) translateY(100px);opacity:0}}@-webkit-keyframes rainbow{16%{background-color:#f44336}33%{background-color:#3f51b5}50%{background-color:#2196f3}66%{background-color:#4caf50}75%{background-color:#8bc34a}}@keyframes rainbow{16%{background-color:#f44336}33%{background-color:#3f51b5}50%{background-color:#2196f3}66%{background-color:#4caf50}75%{background-color:#8bc34a}}@-webkit-keyframes openBackdrop{0%{opacity:0}}@keyframes openBackdrop{0%{opacity:0}}@-webkit-keyframes closeBackdrop{to{opacity:0}}@keyframes closeBackdrop{to{opacity:0}} -/*# sourceMappingURL=bundle.f1584b69f9c93e44e8a8.css.map*/ \ No newline at end of file +body{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;margin:0;padding:0;overflow:hidden}input[type=range]{-webkit-appearance:none;margin:15px 0;width:140px}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:140px;height:8px;cursor:pointer;animate:.2s;box-shadow:0 0 0 #bbb,0 0 0 #c8c8c8;background:#aaa;border-radius:4px;border:1px solid #bbb}input[type=range]::-webkit-slider-thumb{box-shadow:1px 1px 1px #333,0 0 1px #404040;border:0 solid #fff;height:30px;width:30px;border-radius:8px;background:#ddd;cursor:pointer;-webkit-appearance:none;margin-top:-12px}input[type=range]:focus::-webkit-slider-runnable-track{background:#b7b7b7}input[type=range]::-moz-range-track{width:140px;height:8px;cursor:pointer;animate:.2s;box-shadow:0 0 0 #bbb,0 0 0 #c8c8c8;background:#aaa;border-radius:4px;border:1px solid #bbb}input[type=range]::-moz-range-thumb{box-shadow:1px 1px 1px #333,0 0 1px #404040;border:0 solid #fff;height:30px;width:30px;border-radius:8px;background:#ddd;cursor:pointer}input[type=range]::-ms-track{width:140px;height:8px;cursor:pointer;animate:.2s;background:transparent;border-color:transparent;border-width:30px 0;color:transparent}input[type=range]::-ms-fill-lower{background:#9d9d9d}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{border:1px solid #bbb;border-radius:8px;box-shadow:0 0 0 #bbb,0 0 0 #c8c8c8}input[type=range]::-ms-fill-upper{background:#aaa}input[type=range]::-ms-thumb{box-shadow:1px 1px 1px #333,0 0 1px #404040;border:0 solid #fff;height:30px;width:30px;border-radius:8px;background:#ddd;cursor:pointer}input[type=range]:focus::-ms-fill-lower{background:#aaa}input[type=range]:focus::-ms-fill-upper{background:#b7b7b7}div#spinners{position:absolute;top:50%;left:50%;transition:opacity .2s}div#spinners.hidden{opacity:0;pointer-events:none}div#spinners i{-webkit-animation:bounce .8s infinite;animation:bounce .8s infinite;display:block;position:absolute;z-index:11}div#spinners i:after{content:"";display:block;background:red;width:30px;height:30px;border-radius:50%;-webkit-animation:rainbow .8s infinite,squash .8s infinite;animation:rainbow .8s infinite,squash .8s infinite}div#spinners i:first-child{left:-50px}div#spinners i:first-child,div#spinners i:first-child:after{-webkit-animation-delay:-.7333s;animation-delay:-.7333s}div#spinners i:nth-child(3){left:50px}div#spinners i:nth-child(3),div#spinners i:nth-child(3):after{-webkit-animation-delay:-.266s;animation-delay:-.266s}div#spinners:after{content:"";display:block;background:hsla(0,0%,100%,.8);position:fixed;top:0;left:0;right:0;bottom:0;z-index:10}@-webkit-keyframes bounce{0%,to{-webkit-transform:translateY(-100px);transform:translateY(-100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:translate(0);transform:translate(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce{0%,to{-webkit-transform:translateY(-100px);transform:translateY(-100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:translate(0);transform:translate(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@-webkit-keyframes squash{0%,50%,to{-webkit-transform:scaleX(.9) scaleY(1.1);transform:scaleX(.9) scaleY(1.1)}60%{-webkit-transform:scaleX(1.2) scaleY(.6);transform:scaleX(1.2) scaleY(.6)}}@keyframes squash{0%,50%,to{-webkit-transform:scaleX(.9) scaleY(1.1);transform:scaleX(.9) scaleY(1.1)}60%{-webkit-transform:scaleX(1.2) scaleY(.6);transform:scaleX(1.2) scaleY(.6)}}body.runningWithinWebview{background:#f44336;color:#fff;max-width:500px;padding:20px;margin:200px auto;font-size:25px}body.runningWithinWebview:after{content:"";display:block;width:0;height:0;border:40px solid;border-color:transparent transparent #fff;position:fixed;top:0;right:20px;-webkit-animation:pointAtButton 1s infinite;animation:pointAtButton 1s infinite}@-webkit-keyframes pointAtButton{0%,to{-webkit-transform:rotate(30deg);transform:rotate(30deg)}33%{-webkit-transform:translate(-5px,20px) rotate(35deg) scale(.9);transform:translate(-5px,20px) rotate(35deg) scale(.9)}66%{-webkit-transform:translateY(-20px) rotate(25deg) scale(1.1);transform:translateY(-20px) rotate(25deg) scale(1.1)}}@keyframes pointAtButton{0%,to{-webkit-transform:rotate(30deg);transform:rotate(30deg)}33%{-webkit-transform:translate(-5px,20px) rotate(35deg) scale(.9);transform:translate(-5px,20px) rotate(35deg) scale(.9)}66%{-webkit-transform:translateY(-20px) rotate(25deg) scale(1.1);transform:translateY(-20px) rotate(25deg) scale(1.1)}}.bounceClick{transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.bounceClick:active{-webkit-transform:scale(.95);transform:scale(.95)}button{cursor:pointer}canvas#welcome{top:0;z-index:-1}.links,canvas#welcome{position:fixed;left:0;right:0;bottom:0}.links{display:-webkit-box;display:-ms-flexbox;display:flex;color:#fff;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:rgba(0,0,0,.3)}@media (max-width:700px){.links{display:none}}.links>*{padding:5px;color:#fff}#fileInputWrapper{background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-weight:700;font-size:120%;padding:20px;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;max-width:250px;max-height:250px;border-radius:50%}@media (min-width:400){#fileInputWrapper{font-size:140%}}#fileinput,#inputForAFile,canvas#drawzone{position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box}div#drawAndDownload{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;top:0;position:absolute;display:block;bottom:0;left:0;right:0}#drawzoneWrapper{position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;width:100%;height:100%}#drawzoneWrapper canvas,#drawzoneWrapper img{position:absolute;max-width:100%;max-height:100%;margin:auto;border-radius:2px;width:auto;height:auto;display:block;top:0;bottom:0;left:0;right:0}#drawzoneWrapper img{z-index:2}#drawzoneWrapper canvas{z-index:3;cursor:default}label#fileInputWrapper{transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}label#fileInputWrapper:active{-webkit-transform:scale(.95);transform:scale(.95)}label#fileInputWrapper #fileinput{width:100%;opacity:0;cursor:pointer}h1.noscript{display:-webkit-box;display:-ms-flexbox;display:flex;background:orange;color:#fff;text-align:center;position:absolute;top:0;left:0;right:0;bottom:0;margin:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:200}ul.tip{color:#666;font-style:italic}ul.tip li{margin:5px 0}#topbar{position:fixed;bottom:0;left:0;right:0;height:50px;padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:3;overflow:hidden;max-width:400px;margin:auto;border-radius:5px;bottom:10px;transition:background-color .3s,-webkit-transform .2s;transition:transform .2s,background-color .3s;transition:transform .2s,background-color .3s,-webkit-transform .2s}#topbar>*{pointer-events:auto}#topbar.drawInProgress{-webkit-transform:translateY(150px);transform:translateY(150px)}#topbar #pensizePreview{width:50px;height:50px;position:relative;margin-right:50px;background:transparent;border:none;outline:none;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}#topbar #pensizePreview:active,#topbar #pensizePreview:focus{outline:none}#topbar #pensizePreview:active{-webkit-transform:scale(.95);transform:scale(.95)}#topbar #pensizePreview #pensizePreviewDot{z-index:2}#topbar #pensizePreview:hover{-webkit-animation:squish .5s infinite;animation:squish .5s infinite}#topbar #pensizePreview:hover #pensizePreviewDot{-webkit-animation:rainbow 1s infinite;animation:rainbow 1s infinite}#topbar #pensizePreview>*{border-radius:50%;height:50px;width:50px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}#topbar #pensizePreview>.eraser{background:url(./dist/f585fe2054b88eb6d1e59cdeda7bb5da.svg);background-repeat:no-repeat;background-size:contain;background-position:50%}#topbar #download{width:140px;text-transform:uppercase;font-size:80%;margin-left:20px;position:relative;opacity:.5}#topbar #download.usable{opacity:1;-webkit-animation:bounceIn .3s;animation:bounceIn .3s}#topbar #download span.icon{padding:0 5px;opacity:.8;-webkit-transform:scale(.8);transform:scale(.8)}@media (max-width:380px){#topbar #download{width:50px}#topbar #download .label{display:none}}@-webkit-keyframes bounceIn{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;-webkit-transform:scale(1.2) translateY(-5px);transform:scale(1.2) translateY(-5px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounceIn{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{opacity:1;-webkit-transform:scale(1.2) translateY(-5px);transform:scale(1.2) translateY(-5px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}body.background_n_1 #download{position:relative;color:#333;background:#fff;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;text-decoration:none;cursor:pointer;-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 3px 0 #ccc;transition:box-shadow .2s,-webkit-transform .2s;transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s,-webkit-transform .2s;border-radius:3px;margin:5px 0}body.background_n_1 #download:focus,body.background_n_1 #download:hover{background:#e6e6e6;-webkit-animation:squish .2s;animation:squish .2s}body.background_n_1 #download:active{-webkit-transform:none;transform:none;box-shadow:0 0 0 #ccc;background:#ccc}body.background_n_1 #topbar{background-color:#333}body.background_n_0 #download{position:relative;color:#fff;background:#333;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;text-decoration:none;cursor:pointer;-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 3px 0 #000;transition:box-shadow .2s,-webkit-transform .2s;transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s,-webkit-transform .2s;border-radius:3px;margin:5px 0}body.background_n_0 #download:focus,body.background_n_0 #download:hover{background:#1a1a1a;-webkit-animation:squish .2s;animation:squish .2s}body.background_n_0 #download:active{-webkit-transform:none;transform:none;box-shadow:0 0 0 #000;background:#000}body.background_n_0 #download span.icon svg path{fill:#fff}body.background_n_0 #topbar{background-color:#ddd}div#background{transition:background-color .2s}.modal,div#background{background:#fff;position:fixed;top:0;left:0;right:0;bottom:0}.modal{border-radius:2px;margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-animation:openModal .2s;animation:openModal .2s}.modal.color-modal{max-width:500px;max-height:500px}.modal.color-modal button{border:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:30%;margin:5px;border-radius:2px;border:1px solid hsla(0,0%,100%,0);transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;line-height:0}.modal.color-modal button:active{-webkit-transform:scale(.95);transform:scale(.95)}@media (min-width:600){.modal.color-modal button{font-size:140%}}.modal.color-modal button.active{font-weight:700}.modal.color-modal button.colorbutton{box-shadow:0 0 5px rgba(0,0,0,.58)}.modal.color-modal button.colorbutton:hover{-webkit-animation:squish .3s;animation:squish .3s}.modal.color-modal button.eraser{position:relative;background:transparent}.modal.color-modal button.eraser img{max-width:100%;max-height:100%;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.modal.color-modal button.eraser:hover img{-webkit-animation:eraseStuff .5s infinite;animation:eraseStuff .5s infinite}.modal.color-modal button.eraser span.imagelabel{position:absolute;left:50%;opacity:.8;padding-left:70px}.modal.file-download{overflow-y:scroll;display:block;max-width:400px;margin:auto}.modal.file-download a:hover,.modal.file-download button:hover{-webkit-animation:squish .3s;animation:squish .3s}.modal.file-download>*{padding:20px;margin:10px;background:#eee;display:block;border-radius:5px;text-decoration:none}.modal.file-download>.facebookLink{background:#3b5998;color:#fff}.modal.file-download>.githubLink{color:#fff;background:#24292e}.modal.file-download>#downloadIndicator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0}.modal.file-download>#downloadIndicator div{padding:20px}.modal.file-download>#downloadIndicator.sucess{background:#4caf50;color:#fff;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.modal.file-download>#downloadIndicator.sucess button{padding:20px;margin:10px}.modal.file-download>#downloadIndicator.failed{background:#f44336;color:#fff}.modal.file-download>.pcHint{opacity:.8}@media (max-width:900px){.modal.file-download>.pcHint{display:none}}.modal.closing{pointer-events:none;-webkit-animation:closeModal .3s ease-in;animation:closeModal .3s ease-in}.modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);-webkit-animation:openBackdrop .2s;animation:openBackdrop .2s}.modal-backdrop.closing{pointer-events:none;-webkit-animation:closeBackdrop .3s;animation:closeBackdrop .3s}@-webkit-keyframes squish{33%{-webkit-transform:scaleX(.95);transform:scaleX(.95)}66%{-webkit-transform:scaleX(.97) scaleY(1.05);transform:scaleX(.97) scaleY(1.05)}}@keyframes squish{33%{-webkit-transform:scaleX(.95);transform:scaleX(.95)}66%{-webkit-transform:scaleX(.97) scaleY(1.05);transform:scaleX(.97) scaleY(1.05)}}@-webkit-keyframes eraseStuff{33%{-webkit-transform:rotate(-4deg) translate(-15px);transform:rotate(-4deg) translate(-15px)}66%{-webkit-transform:rotate(-5deg) scaleX(.97) scaleY(1.02);transform:rotate(-5deg) scaleX(.97) scaleY(1.02)}}@keyframes eraseStuff{33%{-webkit-transform:rotate(-4deg) translate(-15px);transform:rotate(-4deg) translate(-15px)}66%{-webkit-transform:rotate(-5deg) scaleX(.97) scaleY(1.02);transform:rotate(-5deg) scaleX(.97) scaleY(1.02)}}@-webkit-keyframes openModal{0%{opacity:0;-webkit-transform:scale(.5) translateY(-100px);transform:scale(.5) translateY(-100px)}}@keyframes openModal{0%{opacity:0;-webkit-transform:scale(.5) translateY(-100px);transform:scale(.5) translateY(-100px)}}@-webkit-keyframes closeModal{to{-webkit-transform:scale(.5) translateY(100px);transform:scale(.5) translateY(100px);opacity:0}}@keyframes closeModal{to{-webkit-transform:scale(.5) translateY(100px);transform:scale(.5) translateY(100px);opacity:0}}@-webkit-keyframes rainbow{16%{background-color:#f44336}33%{background-color:#3f51b5}50%{background-color:#2196f3}66%{background-color:#4caf50}75%{background-color:#8bc34a}}@keyframes rainbow{16%{background-color:#f44336}33%{background-color:#3f51b5}50%{background-color:#2196f3}66%{background-color:#4caf50}75%{background-color:#8bc34a}}@-webkit-keyframes openBackdrop{0%{opacity:0}}@keyframes openBackdrop{0%{opacity:0}}@-webkit-keyframes closeBackdrop{to{opacity:0}}@keyframes closeBackdrop{to{opacity:0}} +/*# sourceMappingURL=bundle.f181a7f28dc473f6f66c.css.map*/ \ No newline at end of file diff --git a/dist/bundle.f181a7f28dc473f6f66c.css.map b/dist/bundle.f181a7f28dc473f6f66c.css.map new file mode 100644 index 0000000..8800aac --- /dev/null +++ b/dist/bundle.f181a7f28dc473f6f66c.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///./src/styles.less","webpack:///./src/slider.less","webpack:///./src/spinner.less","webpack:///./src/withinWebview.less"],"names":[],"mappings":"AAAA,KACE,sDACA,SACA,UACA,gBCyCF,kBACE,wBACA,cACA,YAEA,wBACE,aAGF,iDAzBA,YACA,WACA,eACA,YARA,oCAiCE,gBACA,kBACA,sBAGF,wCAtCA,4CAaA,oBACA,YACA,WACA,kBACA,gBACA,eAsBE,wBACA,iBAIF,uDACE,mBAGF,oCA5CA,YACA,WACA,eACA,YARA,oCAoDE,gBACA,kBACA,sBAEF,oCAxDA,4CAaA,oBACA,YACA,WACA,kBACA,gBACA,eA0CA,6BAvDA,YACA,WACA,eACA,YAsDE,uBACA,yBACA,oBACA,kBAGF,kCACE,kBACA,CAIF,oEAJE,sBACA,kBAvEF,oCAgFA,kCALE,eACA,CAIF,6BAhFA,4CAaA,oBACA,YACA,WACA,kBACA,gBACA,eAiEA,wCACE,gBAEF,wCACE,mBC/GJ,aACE,kBACA,QACA,SACA,uBACA,oBACE,UACA,oBAPJ,eAUI,oEACA,cACA,kBAwBA,WAvBA,qBACE,WACA,cACA,eACA,WACA,YACA,kBACA,8GAEF,2BACE,WACA,4DAEE,wDAGJ,4BACE,UACA,8DAEE,sDAKN,mBACE,WACA,cACA,8BACA,eACA,MACA,OACA,QACA,SACA,WAIJ,0BACE,MAEE,kEACA,4EAEF,IACE,sDACA,+EARJ,kBACE,MAEE,kEACA,4EAEF,IACE,sDACA,+EAIJ,0BACE,UAGE,yEAAuB,CAEzB,IACE,yEAAuB,EAP3B,kBACE,UAGE,yEAAuB,CAEzB,IACE,yEAAuB,ECtE3B,0BACE,mBACA,WACA,gBACA,aACA,kBACA,eACA,gCACE,WACA,cACA,QACA,SACA,kBACA,0CACA,eACA,MACA,WACA,gFAGJ,iCACE,MAEE,uDAAW,CAEb,IACE,qHAA+C,CAEjD,IACE,iHAA6C,EHnBjD,yBGWE,MAEE,uDAAW,CAEb,IACE,qHAA+C,CAEjD,IACE,iHAA6C,EHnBjD,aAIE,yGAHA,oBACE,iDAAW,CAIf,OACE,eA+BF,eAGE,MAGA,WAGF,sBARE,eACA,OAEA,QACA,QACA,CAIA,OAOA,qDACA,WACA,oEACA,0BAVA,yBAyeF,OAxeI,cAUF,SACE,YACA,WAUJ,kBACE,gBACA,qDACA,kEACA,oEACA,gBAEA,eAIA,aACA,kBACA,MACA,OACA,SACA,QACA,YACA,gBACA,iBACA,kBAZA,uBA0cF,kBAzcI,gBA4BJ,0CAGE,kBACA,MACA,OACA,SACA,QACA,sBAEF,oBACE,qFACA,MACA,kBACA,cACA,SACA,OACA,QAGF,iBACE,kBACA,YACA,MACA,OACA,QACA,SACA,WACA,YARF,6CAYI,kBACA,eACA,gBACA,YAEA,kBACA,WACA,YAEA,cACA,MACA,SACA,OACA,QAzBJ,qBA4BI,UA5BJ,wBA+BI,UACA,eAIJ,uBACE,yGACA,8BACE,iDAAW,CAHf,kCAMI,WACA,UACA,eAIJ,YACE,qDACA,kBACA,WACA,kBACA,kBACA,MACA,OACA,QACA,SACA,SACA,kEACA,oEACA,YAGF,OACE,WACA,kBAFF,UAII,aAIJ,QACE,eACA,SACA,OACA,QACA,YAEA,aACA,qDACA,oEACA,kEACA,UACA,gBACA,gBACA,YACA,kBACA,YAKA,wKAHA,UACE,oBAGF,uBACE,+DAAW,CAvBf,wBA0BI,WACA,YACA,kBACA,kBAEA,uBACA,YACA,aArOF,yGAsOE,6DAEE,aA3OJ,+BACE,iDAAW,CAsMf,2CAwCM,UAEF,8BACE,oEADF,iDAII,oEAGJ,0BACE,kBACA,YACA,WACA,kBACA,MACA,OACA,QACA,SACA,YACA,gCACE,yCACA,4BACA,wBACA,wBA/DR,kBAoEI,YACA,yBACA,cACA,iBACA,kBACA,WACA,yBACE,UACA,sDA5EN,4BA+EM,cACA,WACA,+CAAW,CAEb,yBA8PJ,kBA7PM,WA6PN,yBA1PQ,cAMR,4BACE,GACE,4EAEF,IACE,UACA,oFACA,+EAPJ,oBACE,GACE,4EAEF,IACE,UACA,oFACA,+EAKJ,8BAvSE,kBACA,WACA,gBAEA,gBACA,qDACA,oEACA,kEACA,+CACA,qBACA,eACA,8DACA,wBACA,sJACA,kBACA,aACA,wEAEE,mBACA,kDAGF,qCACE,sCACA,sBACA,gBA8QJ,4BAKI,sBAIJ,8BAhTE,kBACA,WACA,gBAEA,gBACA,qDACA,oEACA,kEACA,+CACA,qBACA,eACA,8DACA,wBACA,sJACA,kBACA,aACA,wEAEE,mBACA,kDAGF,qCACE,sCACA,sBACA,gBAuRJ,iDAIM,UAJN,4BAQI,sBAIJ,eAOE,gCAEF,sBARE,gBACA,eACA,MACA,OACA,QACA,QACA,CAeA,OAZA,kBACA,YAQA,qDACA,sDACA,kCA8GA,wDA7GA,mBACE,gBACA,iBAFF,0BAKI,YACA,mDACA,UACA,WACA,kBACA,mCAlWJ,yGAqWI,cAxWJ,iCACE,iDAAW,CAwWT,uBA+KN,0BA9KQ,gBAEF,iCACE,gBAEF,sCACE,mCACA,4CACE,kDAGJ,iCACE,kBACA,uBAFF,qCAII,eACA,gBACA,kBACA,OACA,QACA,MACA,SACA,YAEF,2CACE,4EAdJ,iDAiBI,kBACA,SACA,WACA,kBAKR,qBACE,kBACA,cAEA,gBACA,YALF,+DAQI,kDAEF,uBACE,aACA,YACA,gBACA,cACA,kBACA,qBAEA,mCACE,mBACA,WAEF,iCACE,WACA,mBAEF,wCACE,qDACA,yGACA,UAHF,4CAMI,aAGF,+CACE,mBACA,WACA,yGAHF,sDAKI,aACA,YAGJ,+CACE,mBACA,WAGJ,6BACE,WAEA,yBAsFR,6BArFU,cAMR,eACE,oBACA,0EAGJ,gBACE,kBACA,MACA,OACA,QACA,SACA,gCACA,8DACA,wBACE,oBACA,gEAIJ,0BACE,IACE,mDAAW,CAEb,IACE,6EAAwB,EAL5B,kBACE,IACE,mDAAW,CAEb,IACE,6EAAwB,EAK5B,8BACE,IACE,yFAAyB,CAE3B,IACE,yGAAsC,EAL1C,sBACE,IACE,yFAAyB,CAE3B,IACE,yGAAsC,EAI1C,6BACE,GACE,UACA,qFAAsB,EAH1B,qBACE,GACE,UACA,qFAAsB,EAG1B,8BACE,GACE,oFACA,WAHJ,sBACE,GACE,oFACA,WAIJ,2BACE,IACE,yBAEF,IACE,yBAEF,IACE,yBAEF,IACE,yBAEF,IACE,0BAdJ,mBACE,IACE,yBAEF,IACE,yBAEF,IACE,yBAEF,IACE,yBAEF,IACE,0BAIJ,gCACE,GACE,WAFJ,wBACE,GACE,WAGJ,iCACE,GACE,WAFJ,yBACE,GACE","file":"bundle.f181a7f28dc473f6f66c.css","sourcesContent":["body {\n font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n@import './slider.less';\n@import './spinner.less';\n@import './withinWebview.less';\n\n.bounceClick {\n &:active {\n transform: scale(0.95);\n }\n transition: transform 0.2s;\n}\nbutton {\n cursor: pointer;\n}\n.button (@text, @background) {\n position: relative;\n color: @text;\n background: @background;\n\n font-weight: bold;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n text-decoration: none;\n cursor: pointer;\n transform: translate(0, -2px);\n box-shadow: 0 3px 0 darken(@background, 20%);\n transition: transform 0.2s, box-shadow 0.2s;\n border-radius: 3px;\n margin: 5px 0;\n &:focus,\n &:hover {\n background: darken(@background, 10%);\n animation: squish 0.2s;\n }\n\n &:active {\n transform: none;\n box-shadow: 0 0 0 darken(@background, 20%);\n background: darken(@background, 20%);\n }\n}\ncanvas#welcome {\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n}\n\n.links {\n @media (max-width: 700px) {\n display: none;\n }\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n color: white;\n justify-content: center;\n background: rgba(0, 0, 0, 0.3);\n & > * {\n padding: 5px;\n color: white;\n }\n // transform: translate(0, 100%);\n // transition: transform 0.2s;\n}\n// Show links when cursor in page\n// #inputForAFile:hover .links {\n// transform: none;\n// }\n\n#fileInputWrapper {\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n\n font-size: 120%;\n @media (min-width: 400) {\n font-size: 140%;\n }\n padding: 20px;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n max-width: 250px;\n max-height: 250px;\n border-radius: 50%;\n\n // opacity: 0;\n // transform: scale(0.5);\n // transition: opacity 0.1s, transform 0.3s;\n}\n//\n// #inputForAFile:hover {\n// #fileInputWrapper {\n// opacity: 1;\n// transform: scale(1);\n// &:hover {\n// opacity: 1;\n// transform: scale(1.2);\n// }\n// }\n// }\n#inputForAFile,\n#fileinput,\ncanvas#drawzone {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n box-sizing: border-box;\n}\ndiv#drawAndDownload {\n user-select: none;\n top: 0;\n position: absolute;\n display: block;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n#drawzoneWrapper {\n position: absolute;\n margin: auto;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n\n img,\n canvas {\n position: absolute;\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n // box-shadow: 0 0 70px rgba(0, 0, 0, 0.5);\n border-radius: 2px;\n width: auto;\n height: auto;\n\n display: block;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n img {\n z-index: 2;\n }\n canvas {\n z-index: 3;\n cursor: default;\n }\n}\n\nlabel#fileInputWrapper {\n transition: transform 0.2s;\n &:active {\n transform: scale(0.95);\n }\n #fileinput {\n width: 100%;\n opacity: 0;\n cursor: pointer;\n }\n}\n\nh1.noscript {\n display: flex;\n background: orange;\n color: white;\n text-align: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: 0;\n align-items: center;\n justify-content: center;\n z-index: 200;\n}\n\nul.tip {\n color: #666;\n font-style: italic;\n li {\n margin: 5px 0;\n }\n}\n\n#topbar {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n height: 50px;\n\n padding: 10px;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 3;\n overflow: hidden;\n max-width: 400px;\n margin: auto;\n border-radius: 5px;\n bottom: 10px;\n\n & > * {\n pointer-events: auto;\n }\n transition: transform 0.2s, background-color 0.3s;\n &.drawInProgress {\n transform: translate(0, 150px);\n }\n #pensizePreview {\n width: 50px;\n height: 50px;\n position: relative;\n margin-right: 50px;\n\n background: transparent;\n border: none;\n outline: none;\n &:focus,\n &:active {\n outline: none;\n }\n .bounceClick;\n #pensizePreviewDot {\n z-index: 2;\n }\n &:hover {\n animation: squish 0.5s infinite;\n\n #pensizePreviewDot {\n animation: rainbow 1s infinite;\n }\n }\n & > * {\n border-radius: 50%;\n height: 50px;\n width: 50px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n &.eraser {\n background: url(../images/eraser-color.svg);\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center;\n }\n }\n }\n #download {\n width: 140px;\n text-transform: uppercase;\n font-size: 80%;\n margin-left: 20px;\n position: relative;\n opacity: 0.5;\n &.usable {\n opacity: 1;\n animation: bounceIn 0.3s;\n }\n span.icon {\n padding: 0 5px;\n opacity: 0.8;\n transform: scale(0.8);\n }\n @media (max-width: 380px) {\n width: 50px;\n\n .label {\n display: none;\n }\n }\n }\n}\n\n@keyframes bounceIn {\n 0% {\n animation-timing-function: ease-in;\n }\n 50% {\n opacity: 1;\n transform: scale(1.2) translate(0, -5px);\n animation-timing-function: ease-out;\n }\n 100% {\n }\n}\nbody.background_n_1 {\n #download {\n .button(#333, white);\n }\n #topbar {\n background-color: rgba(51, 51, 51, 1);\n }\n}\n\nbody.background_n_0 {\n #download {\n .button(white, #333);\n span.icon svg path {\n fill: white;\n }\n }\n #topbar {\n background-color: rgba(221, 221, 221, 1);\n }\n}\n\ndiv#background {\n background: white;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: background-color 0.2s;\n}\n.modal {\n border-radius: 2px;\n margin: auto;\n\n position: fixed;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0;\n background: white;\n display: flex;\n justify-content: space-around;\n flex-wrap: wrap;\n &.color-modal {\n max-width: 500px;\n max-height: 500px;\n\n button {\n border: none;\n flex-grow: 1;\n width: 30%;\n margin: 5px;\n border-radius: 2px;\n border: 1px solid rgba(255, 255, 255, 0);\n .bounceClick;\n // Avoids button with text taking more space\n line-height: 0;\n @media (min-width: 600) {\n font-size: 140%;\n }\n &.active {\n font-weight: bold;\n }\n &.colorbutton {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.58);\n &:hover {\n animation: squish 0.3s;\n }\n }\n &.eraser {\n position: relative;\n background: transparent;\n img {\n max-width: 100%;\n max-height: 100%;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n }\n &:hover img {\n animation: eraseStuff 0.5s infinite;\n }\n span.imagelabel {\n position: absolute;\n left: 50%;\n opacity: 0.8;\n padding-left: 70px;\n }\n }\n }\n }\n &.file-download {\n overflow-y: scroll;\n display: block;\n\n max-width: 400px;\n margin: auto;\n a:hover,\n button:hover {\n animation: squish 0.3s;\n }\n & > * {\n padding: 20px;\n margin: 10px;\n background: #eee;\n display: block;\n border-radius: 5px;\n text-decoration: none;\n\n &.facebookLink {\n background: #3b5998;\n color: white;\n }\n &.githubLink {\n color: white;\n background: #24292e;\n }\n &#downloadIndicator {\n display: flex;\n flex-direction: column;\n padding: 0;\n\n div {\n padding: 20px;\n }\n\n &.sucess {\n background: #4caf50;\n color: white;\n flex-direction: column;\n button {\n padding: 20px;\n margin: 10px;\n }\n }\n &.failed {\n background: #f44336;\n color: white;\n }\n }\n &.pcHint {\n opacity: 0.8;\n\n @media (max-width: 900px) {\n display: none;\n }\n }\n }\n }\n animation: openModal 0.2s;\n &.closing {\n pointer-events: none;\n animation: closeModal 0.3s ease-in;\n }\n}\n.modal-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n animation: openBackdrop 0.2s;\n &.closing {\n pointer-events: none;\n animation: closeBackdrop 0.3s;\n }\n}\n\n@keyframes squish {\n 33% {\n transform: scaleX(0.95);\n }\n 66% {\n transform: scaleX(0.97) scaleY(1.05);\n }\n 100% {\n }\n}\n@keyframes eraseStuff {\n 33% {\n transform: rotate(-4deg) translate(-15px, 0);\n }\n 66% {\n transform: rotate(-5deg) scaleX(0.97) scaleY(1.02);\n }\n}\n\n@keyframes openModal {\n 0% {\n opacity: 0;\n transform: scale(0.5) translate(0, -100px);\n }\n}\n@keyframes closeModal {\n 100% {\n transform: scale(0.5) translate(0, 100px);\n opacity: 0;\n }\n}\n\n@keyframes rainbow {\n 16% {\n background-color: #f44336;\n }\n 33% {\n background-color: #3f51b5;\n }\n 50% {\n background-color: #2196f3;\n }\n 66% {\n background-color: #4caf50;\n }\n 75% {\n background-color: #8bc34a;\n }\n}\n\n@keyframes openBackdrop {\n 0% {\n opacity: 0;\n }\n}\n@keyframes closeBackdrop {\n 100% {\n opacity: 0;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/styles.less","@track-color: #aaaaaa;\n@thumb-color: #dddddd;\n\n@thumb-radius: 8px;\n@thumb-height: 30px;\n@thumb-width: 30px;\n@thumb-shadow-size: 1px;\n@thumb-shadow-blur: 1px;\n@thumb-shadow-color: #333;\n@thumb-border-width: 0;\n@thumb-border-color: white;\n\n@track-width: 140px;\n@track-height: 8px;\n@track-shadow-size: 0px;\n@track-shadow-blur: 0px;\n@track-shadow-color: #bbb;\n@track-border-width: 1px;\n@track-border-color: #bbb;\n\n@track-radius: 4px;\n@contrast: 5%;\n\n.shadow(@shadow-size,@shadow-blur,@shadow-color) {\n box-shadow: @shadow-size @shadow-size @shadow-blur @shadow-color,\n 0px 0px @shadow-size lighten(@shadow-color, 5%);\n}\n\n.track() {\n width: @track-width;\n height: @track-height;\n cursor: pointer;\n animate: 0.2s;\n}\n\n.thumb() {\n .shadow(@thumb-shadow-size,@thumb-shadow-blur,@thumb-shadow-color);\n border: @thumb-border-width solid @thumb-border-color;\n height: @thumb-height;\n width: @thumb-width;\n border-radius: @thumb-radius;\n background: @thumb-color;\n cursor: pointer;\n}\n\ninput[type=range] {\n -webkit-appearance: none;\n margin: @thumb-height/2 0;\n width: @track-width;\n\n &:focus {\n outline: none;\n }\n\n &::-webkit-slider-runnable-track {\n .track();\n .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);\n background: @track-color;\n border-radius: @track-radius;\n border: @track-border-width solid @track-border-color;\n }\n\n &::-webkit-slider-thumb {\n .thumb();\n -webkit-appearance: none;\n margin-top: ((-@track-border-width * 2 + @track-height) / 2) - (@thumb-height /\n 2);\n }\n\n &:focus::-webkit-slider-runnable-track {\n background: lighten(@track-color, @contrast);\n }\n\n &::-moz-range-track {\n .track();\n .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);\n background: @track-color;\n border-radius: @track-radius;\n border: @track-border-width solid @track-border-color;\n }\n &::-moz-range-thumb {\n .thumb();\n }\n\n &::-ms-track {\n .track();\n background: transparent;\n border-color: transparent;\n border-width: @thumb-width 0;\n color: transparent;\n }\n\n &::-ms-fill-lower {\n background: darken(@track-color, @contrast);\n border: @track-border-width solid @track-border-color;\n border-radius: @track-radius*2;\n .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);\n }\n &::-ms-fill-upper {\n background: @track-color;\n border: @track-border-width solid @track-border-color;\n border-radius: @track-radius*2;\n .shadow(@track-shadow-size,@track-shadow-blur,@track-shadow-color);\n }\n &::-ms-thumb {\n .thumb();\n }\n &:focus::-ms-fill-lower {\n background: @track-color;\n }\n &:focus::-ms-fill-upper {\n background: lighten(@track-color, @contrast);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/slider.less","div#spinners {\n position: absolute;\n top: 50%;\n left: 50%;\n transition: opacity 0.2s;\n &.hidden {\n opacity: 0;\n pointer-events: none;\n }\n i {\n animation: bounce 0.8s infinite;\n display: block;\n position: absolute;\n &:after {\n content: \"\";\n display: block;\n background: red;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n animation: rainbow 0.8s infinite, squash 0.8s infinite;\n }\n &:nth-child(1) {\n left: -50px;\n &,\n &:after {\n animation-delay: -0.7333s;\n }\n }\n &:nth-child(3) {\n left: 50px;\n &,\n &:after {\n animation-delay: -0.266s;\n }\n }\n z-index: 11;\n }\n &:after {\n content: \"\";\n display: block;\n background: rgba(255, 255, 255, 0.8);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 10;\n }\n}\n\n@keyframes bounce {\n 0%,\n 100% {\n transform: translate(0, -100px);\n animation-timing-function: ease-in;\n }\n 50% {\n transform: translate(0, 0);\n animation-timing-function: ease-out;\n }\n}\n\n@keyframes squash {\n 0%,\n 50%,\n 100% {\n transform: scaleX(0.9) scaleY(1.1);\n }\n 60% {\n transform: scaleX(1.2) scaleY(0.6);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/spinner.less","body.runningWithinWebview {\n background: #f44336;\n color: white;\n max-width: 500px;\n padding: 20px;\n margin: 200px auto;\n font-size: 25px;\n &:after {\n content: \"\";\n display: block;\n width: 0;\n height: 0;\n border: 40px solid;\n border-color: transparent transparent white transparent;\n position: fixed;\n top: 0;\n right: 20px;\n animation: pointAtButton 1s infinite;\n }\n}\n@keyframes pointAtButton {\n 0%,\n 100% {\n transform: rotate(30deg);\n }\n 33% {\n transform: translate(-5px, 20px) rotate(35deg) scale(0.9);\n }\n 66% {\n transform: translate(0, -20px) rotate(25deg) scale(1.1);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/withinWebview.less"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/bundle.f1584b69f9c93e44e8a8.js b/dist/bundle.f181a7f28dc473f6f66c.js similarity index 99% rename from dist/bundle.f1584b69f9c93e44e8a8.js rename to dist/bundle.f181a7f28dc473f6f66c.js index 19dc31e..04a5805 100644 --- a/dist/bundle.f1584b69f9c93e44e8a8.js +++ b/dist/bundle.f181a7f28dc473f6f66c.js @@ -1,2 +1,2 @@ !function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="./dist/",t(t.s=1)}([function(e,t,n){"use strict";function o(e,t){function n(e){e.preventDefault(),i(r,a,o)}var o=t.OrginalImage,r=t.canvas,a=t.originalFileName;e.addEventListener("click",n)}function r(e){console.log(e)}function i(e,t,n){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:r,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:r,l=t+"-minimage-"+c+".png";a(e,n,o,i),d(e,l,o,i),c++}function a(e,t,n,o){try{var r=e.getContext("2d"),i=r.globalCompositeOperation;return r.globalCompositeOperation="destination-over",r.drawImage(t,0,0,e.width,e.height),r.globalCompositeOperation=i,o&&setTimeout(o),e}catch(e){n&&n(e)}}function d(e,t,n,o){try{e.toBlob(function(e){try{if(window.navigator.msSaveOrOpenBlob)window.navigator.msSaveBlob(e,t),o&&setTimeout(o);else{var r=window.URL.createObjectURL(e),i=document.createElement("a");document.body.appendChild(i),i.setAttribute("href",r),i.setAttribute("download",t),i.click(),o&&setTimeout(o),setTimeout(function(){window.URL.revokeObjectURL(r),document.body.removeChild(i)},3e3)}}catch(e){n&&n(e)}})}catch(e){n&&n(e)}}Object.defineProperty(t,"__esModule",{value:!0}),t.makeDownloadLink=o,t.triggerDownload=i,t.mergeCanvasAndImage=a;var c=0},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e){function t(e){"eraser"==e?C():w(e)}k=e,M();var n=L("drawzone"),o=L("drawzoneWrapper");L("inputForAFile").style.display="none",L("drawAndDownload").style.display="",console.log(e.width,e.height);var r=2*Math.max(window.innerWidth,window.innerHeight),i=Math.max(e.width/r,e.height/r,1);e.width=n.width=e.width/i,e.height=n.height=e.height/i,o.style.maxWidth=e.width,o.style.maxHeight=e.height,o.appendChild(e);var d=(n.getContext("2d"),!1),c=L("topbar").classList,l=L("background"),s=(0,a.default)(L("pensizePreview"),{canvasForCursor:n,onColorChange:t,elementToContrastWith:l}),m=s.setColorDotSize,p=s.refreshColorPreviewBorder,h=(s.clearColorPicker,(0,f.default)(n,{onMouseDown:function(){n.getClientRects()[0].height+160>window.innerHeight&&c.add("drawInProgress")},onMouseUp:function(){d||(d=!0,download.classList.add("usable")),c.remove("drawInProgress")},OrginalImage:k})),w=h.drawWithColor,C=h.drawWithEraser,b=h.setPencilSize;(0,u.default)(l,{onChange:p}),(0,g.default)(L("pensize"),{onChange:function(e){m(e),b(e)}}),(0,v.makeDownloadLink)(L("download"),{OrginalImage:k,originalFileName:E,canvas:n}),(0,y.detectCtrlS)({canvas:n,OrginalImage:k,originalFileName:E})}n(3);var i=n(4),a=o(i),d=n(8),c=o(d),l=n(9),u=o(l),s=n(10),f=o(s),v=n(0),m=n(11),g=o(m),p=n(12),h=o(p),w=n(13),y=n(14),C=n(15),b=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(C),L=document.getElementById.bind(document);b.install();var E=void 0,k=void 0;(0,c.default)({fileinput:L("fileinput"),onImageCreated:function(e,t){E=t,r(e)},startTask:w.startTask,endTask:w.endTask});var F=(0,h.default)(L("welcome"),{fitWindow:!0}),M=F.stopAnim,x=F.bgColor;L("fileInputWrapper").style.color=x},function(e,t){},function(e,t,n){"use strict";function o(e,t){if("eraser"==e)return"transparent";var n=(0,l.luminance)(t),o=(0,l.luminance)(e);return n>125&&o>200?"black":n<125&&o<25?"white":"transparent"}function r(e){return(0,l.luminance)(e)>127.5?"rgba(0,0,0,0.8)":"rgba(255,255,255,0.8)"}function i(e,t){(0,s.createModal)("color-modal",function(n){function o(e){a(),t(e)}var i=n.modal,a=n.closeModal;u.paletteColors.forEach(function(t){var n=document.createElement("button");n.classList.add("colorbutton"),t===e&&(n.classList.add("active"),n.innerHTML="Selected",n.style.color=r(t)),n.style.backgroundColor=t.toLowerCase(),n.addEventListener("click",function(){return o(t)}),i.appendChild(n)});var d=document.createElement("button");d.classList.add("eraser"),d.addEventListener("click",function(){return o("eraser")}),d.innerHTML=''+("eraser"===e?"Eraser selected":"Eraser")+"",i.appendChild(d)})}function a(e,t,n){var o=t<4?4:t,r=document.createElement("canvas");r.width=r.height=o;var i=r.getContext("2d");"eraser"==n?c(i,o):d(i,o,n);var a=r.toDataURL("image/png");e.style.cursor="url("+a+") "+o/2+" "+o/2+",auto"}function d(e,t,n){e.beginPath(),e.arc(t/2,t/2,t/2,0,2*Math.PI,!1),e.fillStyle=n,e.fill()}function c(e,t){e.fillStyle="#da502d",e.fillRect(0,0,2*t/3,t),e.fillStyle="#6584a5",e.fillRect(2*t/3-1,0,t,t),e.globalCompositeOperation="destination-in",d(e,t,"white")}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){function n(){m.style.background=o(g,u.style.backgroundColor)}function r(){i(g,d)}function d(e){console.log("onColorPicked",e),g&&e!==g&&(p=g),localStorage.setItem("previousColor",p),g=e,a(s,h,g),"eraser"==e?(v.style.background="",v.classList.add("eraser")):(v.classList.remove("eraser"),v.style.background=e,n()),localStorage.setItem("color",e),l(e)}function c(e){h=e,a(s,h,g),v.style.transform="scale("+e/w+")",m.style.transform="scale("+(e/w+1/w)+")"}var l=t.onColorChange,u=t.elementToContrastWith,s=t.canvasForCursor,v=e.children[0],m=e.children[1],g=void 0;e.addEventListener("click",r);var p=localStorage.getItem("previousColor")||"eraser",h=void 0,w=v.getBoundingClientRect().width;return window.addEventListener("keydown",function(e){"x"===String.fromCharCode(e.which).toLowerCase()&&(console.log("x switching to "+p),d(p))}),setTimeout(function(){return d(localStorage.getItem("color")||f)}),{clearColorPicker:function(){e.removeEventListener("click",r)},setColorDotSize:c,refreshColorPreviewBorder:n}};var l=n(5),u=n(6),s=n(7),f="#2b76ce"},function(e,t,n){"use strict";function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t2&&void 0!==arguments[2]?arguments[2]:e;e.addEventListener(t,function(e){e.preventDefault();var t=e.touches[0]||{},r=t.clientX,i=t.clientY,a=new MouseEvent(n,{clientX:r,clientY:i});o.dispatchEvent(a)},!1)}var u=t.onMouseDown,s=t.onMouseUp,f=t.OrginalImage,v=void 0,m=void 0,g=void 0;n(),window.addEventListener("resize",n);var p=e.getContext("2d");p.lineCap="round";var h={x:0,y:0},w=h;e.addEventListener("mousedown",function(t){if(3==t.which)return void(0,o.mergeCanvasAndImage)(e,f);h=w=r(t),i(),u()},!1),document.addEventListener("copy",function(t){t.preventDefault(),(0,o.mergeCanvasAndImage)(e,f),t.clipboardData.setData("text/html",'')}),document.addEventListener("mouseup",a,!1),e.addEventListener("mousemove",function(e){h=r(e)},!1);var y=!1;return l("touchstart","mousedown"),l("touchend","mouseup",document),l("touchmove","mousemove"),{drawWithEraser:function(){p.globalCompositeOperation="destination-out"},drawWithColor:function(e){p.globalCompositeOperation="source-over",p.strokeStyle=e},setPencilSize:function(e){g=e,p.lineWidth=e/v}}};var o=n(0)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){function n(t){e.value=t,localStorage.setItem("pensize",t),r(t)}var r=t.onChange;e.addEventListener("input",function(e){return n(e.target.value)}),n(parseInt(localStorage.getItem("pensize"))||o)};var o=20},function(e,t,n){"use strict";function o(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=e.filter(function(e){return e!=t});return n[Math.floor(Math.random()*n.length)]}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){function n(){u&&(e.width=window.innerWidth,e.height=window.innerHeight),f=e.width,v=e.height,s=e.getContext("2d"),s.fillStyle=m,s.fillRect(0,0,f,v),s.lineCap="round",i()}function i(){g={x:f/2,y:v/2},p={x:10*Math.random()-5,y:10*Math.random()-5},h={x:10*Math.random()-5,y:10*Math.random()-5},s.strokeStyle=o(r,m),s.lineWidth=20+40*Math.random(),s.beginPath(),s.moveTo(g.x,g.y)}function a(){h={x:2*Math.random()-1,y:2*Math.random()-1},w=setTimeout(a,100+200*Math.random())}function d(){s.moveTo(g.x,g.y),p.x*=.95,p.y*=.95,p.x+=h.x,p.y+=h.y,g.x+=p.x,g.y+=p.y,s.lineTo(g.x,g.y),s.stroke(),(g.x<-50||g.x>f+50||g.y<-50||g.y>v+50)&&i()}function c(){y&&(window.requestAnimationFrame(c),d())}function l(){y=!1,clearTimeout(w),window.removeEventListener("resize",n)}var u=t.fitWindow,s=void 0,f=void 0,v=void 0,m="#F44336",g=void 0,p=void 0,h=void 0,w=void 0;n(),window.addEventListener("resize",n),a();var y=!0;return c(),{stopAnim:l,bgColor:m}};var r="#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722".split(",")},function(e,t,n){"use strict";function o(){a++,i()}function r(){a--,setTimeout(i)}function i(){spinners.classList[a?"remove":"add"]("hidden")}Object.defineProperty(t,"__esModule",{value:!0}),t.startTask=o,t.endTask=r,t.updateLook=i;var a=0;document.addEventListener("DOMContentLoaded",i)},function(e,t,n){"use strict";function o(e){var t=e.canvas,n=e.OrginalImage,o=e.originalFileName;window.addEventListener("keydown",function(e){(e.ctrlKey||e.metaKey)&&"s"===String.fromCharCode(e.which).toLowerCase()&&(e.preventDefault(),(0,r.triggerDownload)(t,o,n))})}Object.defineProperty(t,"__esModule",{value:!0}),t.detectCtrlS=o;var r=n(0)},function(e,t){function n(){return"serviceWorker"in navigator&&(window.fetch||"imageRendering"in document.documentElement.style)&&("https:"===window.location.protocol||"localhost"===window.location.hostname||0===window.location.hostname.indexOf("127."))}function o(e){if(e||(e={}),n()){navigator.serviceWorker.register("dist/sw.js")}else if(window.applicationCache){var t=function(){var e=document.createElement("iframe");e.src="dist/appcache/manifest.html",e.style.display="none",a=e,document.body.appendChild(e)};return void("complete"===document.readyState?setTimeout(t):window.addEventListener("load",t))}}function r(e,t){}function i(){if(n()&&navigator.serviceWorker.getRegistration().then(function(e){if(e)return e.update()}),a)try{a.contentWindow.applicationCache.update()}catch(e){}}var a;t.install=o,t.applyUpdate=r,t.update=i}]); -//# sourceMappingURL=bundle.f1584b69f9c93e44e8a8.js.map \ No newline at end of file +//# sourceMappingURL=bundle.f181a7f28dc473f6f66c.js.map \ No newline at end of file diff --git a/dist/bundle.f181a7f28dc473f6f66c.js.map b/dist/bundle.f181a7f28dc473f6f66c.js.map new file mode 100644 index 0000000..9f172f9 --- /dev/null +++ b/dist/bundle.f181a7f28dc473f6f66c.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///bundle.f181a7f28dc473f6f66c.js","webpack:///webpack/bootstrap f181a7f28dc473f6f66c","webpack:///./src/canvasMergerAndDonwloaderLink.js","webpack:///./src/app.js","webpack:///./src/colorPicker.js","webpack:///./src/colorToRGB.js","webpack:///./src/palette.js","webpack:///./src/modal.js","webpack:///./src/getAnImage.js","webpack:///./src/toggleAbleBackground.js","webpack:///./src/editableCanvas.js","webpack:///./src/pencilSizeSlider.js","webpack:///./src/welcomeAnim.js","webpack:///./src/spinners.js","webpack:///./src/detectCtrlS.js","webpack:///./node_modules/offline-plugin/runtime.js"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","i","l","call","m","c","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","makeDownloadLink","link","_ref","downloadImage","e","preventDefault","triggerDownload","canvas","originalFileName","OrginalImage","addEventListener","nope","console","log","failed","arguments","length","undefined","suceeded","filename","downloadCounter","mergeCanvasAndImage","downloadCanvas","img","ctx","getContext","oldComposite","globalCompositeOperation","drawImage","width","height","setTimeout","toBlob","blob","window","navigator","msSaveOrOpenBlob","msSaveBlob","url","URL","createObjectURL","document","createElement","body","appendChild","setAttribute","click","revokeObjectURL","removeChild","value","_interopRequireDefault","obj","default","letUserDrawAndDownload","setColor","color","drawWithEraser","drawWithColor","stopAnim","byId","drawzoneWrapper","style","display","maxRes","Math","max","innerWidth","innerHeight","imgScale","maxWidth","maxHeight","hasDoneFirstDraw","barClass","classList","background","_setupColorPicker","_colorPicker2","canvasForCursor","onColorChange","elementToContrastWith","setColorDotSize","refreshColorPreviewBorder","_setupEditableCanvas","clearColorPicker","_editableCanvas2","onMouseDown","getClientRects","add","onMouseUp","download","remove","setPencilSize","_toggleAbleBackground2","onChange","_pencilSizeSlider2","pxSize","_canvasMergerAndDonwloaderLink","_detectCtrlS","detectCtrlS","_colorPicker","_getAnImage","_getAnImage2","_toggleAbleBackground","_editableCanvas","_pencilSizeSlider","_welcomeAnim2","_welcomeAnim3","_spinners","_runtime","OfflinePluginRuntime","newObj","key","getElementById","bind","install","fileinput","onImageCreated","startTask","endTask","_welcomeAnim","fitWindow","bgColor","borderColor","foreground","bgL","_colorToRGB","luminance","fgL","textColor","openColorPicker","currentColor","callback","_modal","createModal","_ref2","pickColor","closeModal","modal","paletteColors","forEach","button","innerHTML","backgroundColor","toLowerCase","eraser","setCursor","node","size","drawEraser","drawColorCircle","cursor","toDataURL","beginPath","arc","PI","fillStyle","fill","fillRect","pensizePreview","pensizePreviewBorder","openInitializedColorPicker","onColorPicked","previousColor","localStorage","setItem","currentSize","pensizePreviewDot","transform","baseSize","children","getItem","getBoundingClientRect","ev","String","fromCharCode","which","DEFAULTCOLOR","removeEventListener","_palette","_toConsumableArray","arr","Array","isArray","arr2","from","colorToRGB","clearRect","concat","getImageData","data","slice","reduce","a","b","split","className","closeOnEscape","backdrop","zIndex","modalZindex","loadFile","fileToLoad","fileReader","FileReader","onload","createImageWithFileContent","result","onerror","readAsDataURL","askingForImage","Image","src","handleDataTransferItems","items","imageFile","find","kind","type","match","getAsFile","getAsString","_ref$startTask","_ref$endTask","fileChanged","changeEvent","pop","target","files","clipboardData","stopPropagation","dataTransfer","switchBackground","currentMode","applyBackground","options","current","bclass","index","switchCount","measureScale","rect","scale","lastUsedPXsize","lineWidth","getMousePos","mouseEvent","x","clientX","left","y","clientY","top","startDrawLoop","isDrawing","drawLoop","endDrawLoop","requestAnimationFrame","renderCanvas","moveTo","lastPos","lineTo","mousePos","stroke","proxyTouchToMouse","touchEventName","mouseEventName","eventTarget","touches","MouseEvent","dispatchEvent","lineCap","setData","strokeStyle","slider","onPencilSizeChange","parseInt","DEFAULTSIZE","randomColor","colorPool","exception","withoutEx","filter","floor","random","reset","w","h","randomizeInst","position","speed","acceleration","coolColors","randomAcceletation","accelerationTimeoutHandle","clearTimeout","tasksInProgress","updateLook","spinners","event","ctrlKey","metaKey","hasSW","fetch","documentElement","location","protocol","hostname","indexOf","serviceWorker","register","applicationCache","doLoad","iframe","directory","appCacheIframe","readyState","applyUpdate","errback","update","getRegistration","then","registration","contentWindow"],"mappings":"CAAS,SAAUA,GCInB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAI,EAAAJ,EACAK,GAAA,EACAH,WAUA,OANAJ,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,GAAA,EAGAF,EAAAD,QAvBA,GAAAD,KA4BAF,GAAAQ,EAAAT,EAGAC,EAAAS,EAAAP,EAGAF,EAAAU,EAAA,SAAAP,EAAAQ,EAAAC,GACAZ,EAAAa,EAAAV,EAAAQ,IACAG,OAAAC,eAAAZ,EAAAQ,GACAK,cAAA,EACAC,YAAA,EACAC,IAAAN,KAMAZ,EAAAmB,EAAA,SAAAf,GACA,GAAAQ,GAAAR,KAAAgB,WACA,WAA2B,MAAAhB,GAAA,SAC3B,WAAiC,MAAAA,GAEjC,OADAJ,GAAAU,EAAAE,EAAA,IAAAA,GACAA,GAIAZ,EAAAa,EAAA,SAAAQ,EAAAC,GAAsD,MAAAR,QAAAS,UAAAC,eAAAjB,KAAAc,EAAAC,IAGtDtB,EAAAyB,EAAA,UAGAzB,IAAA0B,EAAA,KDMM,SAAUtB,EAAQD,EAASH,GAEjC,YEpEO,SAAS2B,GACdC,EADKC,GAKL,QAASC,GAAcC,GACrBA,EAAEC,iBACFC,EAAgBC,EAAQC,EAAkBC,GAJ5C,GADEA,GACFP,EADEO,aAAcF,EAChBL,EADgBK,OAAQC,EACxBN,EADwBM,gBAOxBP,GAAKS,iBAAiB,QAASP,GAGjC,QAASQ,GAAKP,GACZQ,QAAQC,IAAIT,GAGP,QAASE,GACdC,EACAC,EACAC,GAGA,GAFAK,GAEAC,UAAAC,OAAA,OAAAC,KAAAF,UAAA,GAAAA,UAAA,GAFSJ,EACTO,EACAH,UAAAC,OAAA,OAAAC,KAAAF,UAAA,GAAAA,UAAA,GADWJ,EAEPQ,EAAWX,EAAmB,aAAeY,EAAkB,MACnEC,GAAoBd,EAAQE,EAAcK,EAAQI,GAClDI,EAAef,EAAQY,EAAUL,EAAQI,GAEzCE,IAGK,QAASC,GAAoBd,EAAQgB,EAAKT,EAAQI,GACvD,IAEE,GAAIM,GAAMjB,EAAOkB,WAAW,MACxBC,EAAeF,EAAIG,wBAQvB,OAPAH,GAAIG,yBAA2B,mBAG/BH,EAAII,UAAUL,EAAK,EAAG,EAAGhB,EAAOsB,MAAOtB,EAAOuB,QAE9CN,EAAIG,yBAA2BD,EAC/BR,GAAYa,WAAWb,GAChBX,EACP,MAAOH,GACPU,GAAUA,EAAOV,IAIrB,QAASkB,GAAef,EAAQY,EAAUL,EAAQI,GAChD,IACEX,EAAOyB,OAAO,SAASC,GACrB,IACE,GAAIC,OAAOC,UAAUC,iBACnBF,OAAOC,UAAUE,WAAWJ,EAAMd,GAClCD,GAAYa,WAAWb,OAClB,CACL,GAAIoB,GAAMJ,OAAOK,IAAIC,gBAAgBP,GACjChC,EAAOwC,SAASC,cAAc,IAClCD,UAASE,KAAKC,YAAY3C,GAC1BA,EAAK4C,aAAa,OAAQP,GAC1BrC,EAAK4C,aAAa,WAAY1B,GAC9BlB,EAAK6C,QACL5B,GAAYa,WAAWb,GACvBa,WAAW,WACTG,OAAOK,IAAIQ,gBAAgBT,GAC3BG,SAASE,KAAKK,YAAY/C,IACzB,MAEL,MAAOG,GACPU,GAAUA,EAAOV,MAGrB,MAAOA,GACPU,GAAUA,EAAOV,IFFrBjB,OAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAETzE,EE1EgBwB,mBF2EhBxB,EE3DgB8B,kBF4DhB9B,EE9CgB6C,qBAfhB,IAAID,GAAkB,GF2IhB,SAAU3C,EAAQD,EAASH,GAEjCI,EAAOD,QAAUH,EAAoB,IAK/B,SAAUI,EAAQD,EAASH,GAEjC,YAyCA,SAAS6E,GAAuBC,GAAO,MAAOA,IAAOA,EAAI1D,WAAa0D,GAAQC,QAASD,GG7KvF,QAASE,GAAuB9B,GA2D9B,QAAS+B,GAASC,GACH,UAATA,EACFC,IAEAC,EAAcF,GA9DlB9C,EAAec,EACfmC,GACA,IAAMnD,GAASoD,EAAK,YAClBC,EAAkBD,EAAK,kBAGzBA,GAAK,iBAAiBE,MAAMC,QAAU,OACtCH,EAAK,mBAAmBE,MAAMC,QAAU,GAExClD,QAAQC,IAAIU,EAAIM,MAAON,EAAIO,OAC3B,IAAIiC,GAA2D,EAAlDC,KAAKC,IAAI/B,OAAOgC,WAAYhC,OAAOiC,aAE5CC,EAAWJ,KAAKC,IAAI1C,EAAIM,MAAQkC,EAAQxC,EAAIO,OAASiC,EAAQ,EACjExC,GAAIM,MAAQtB,EAAOsB,MAAQN,EAAIM,MAAQuC,EACvC7C,EAAIO,OAASvB,EAAOuB,OAASP,EAAIO,OAASsC,EAC1CR,EAAgBC,MAAMQ,SAAW9C,EAAIM,MACrC+B,EAAgBC,MAAMS,UAAY/C,EAAIO,OAGtC8B,EAAgBhB,YAAYrB,EAE5B,IACIgD,IADMhE,EAAOkB,WAAW,OACL,GACnB+C,EAAWb,EAAK,UAAUc,UAE1BC,EAAaf,EAAK,cA1BagB,GAgC/B,EAAAC,EAAAxB,SAAiBO,EAAK,mBACxBkB,gBAAiBtE,EACjBuE,cAAexB,EACfyB,sBAAuBL,IANvBM,EA7BiCL,EA6BjCK,gBACAC,EA9BiCN,EA8BjCM,0BA9BiCC,GAAAP,EA+BjCQ,kBAWE,EAAAC,EAAAhC,SAAoB7C,GACtB8E,YAD8B,WAExB9E,EAAO+E,iBAAiB,GAAGxD,OAAS,IAASI,OAAOiC,aACtDK,EAASe,IAAI,mBAGjBC,UAN8B,WAOvBjB,IACHA,GAAmB,EACnBkB,SAAShB,UAAUc,IAAI,WAEzBf,EAASkB,OAAO,mBAElBjF,kBAhBAgD,EAvCiCyB,EAuCjCzB,cACAD,EAxCiC0B,EAwCjC1B,eACAmC,EAzCiCT,EAyCjCS,eA0BF,EAAAC,EAAAxC,SAAqBsB,GAAcmB,SAAUZ,KAE7C,EAAAa,EAAA1C,SAAiBO,EAAK,YACpBkC,SADgC,SACvBE,GACPf,EAAgBe,GAChBJ,EAAcI,OAIlB,EAAAC,EAAAhG,kBAAiB2D,EAAK,aACpBlD,eACAD,mBACAD,YAGF,EAAA0F,EAAAC,cACE3F,SACAE,eACAD,qBApHJnC,EAAA,EACA,IAAA8H,GAAA9H,EAAA,GHyKIuG,EAAgB1B,EAAuBiD,GGxK3CC,EAAA/H,EAAA,GH4KIgI,EAAenD,EAAuBkD,GG3K1CE,EAAAjI,EAAA,GH+KIuH,EAAyB1C,EAAuBoD,GG9KpDC,EAAAlI,EAAA,IHkLI+G,EAAmBlC,EAAuBqD,GGjL9CP,EAAA3H,EAAA,GACAmI,EAAAnI,EAAA,IHsLIyH,EAAqB5C,EAAuBsD,GGrLhDC,EAAApI,EAAA,IHyLIqI,EAAgBxD,EAAuBuD,GGxL3CE,EAAAtI,EAAA,IAEA4H,EAAA5H,EAAA,IAEAuI,EAAAvI,EAAA,IAAYwI,EH8LZ,SAAiC1D,GAAO,GAAIA,GAAOA,EAAI1D,WAAc,MAAO0D,EAAc,IAAI2D,KAAa,IAAW,MAAP3D,EAAe,IAAK,GAAI4D,KAAO5D,GAAWhE,OAAOS,UAAUC,eAAejB,KAAKuE,EAAK4D,KAAMD,EAAOC,GAAO5D,EAAI4D,GAAgC,OAAtBD,GAAO1D,QAAUD,EAAY2D,GAF/MF,GG/L7CjD,EAAOlB,SAASuE,eAAeC,KAAKxE,SAI1CoE,GAAqBK,SAGrB,IAAI1G,UAAkBC,UACtB,EAAA4F,EAAAjD,UACE+D,UAAWxD,EAAK,aAChByD,eAAgB,SAAC7F,EAAKJ,GACpBX,EAAmBW,EACnBkC,EAAuB9B,IAEzB8F,sBACAC,mBHsMF,IAAIC,IGnMwB,EAAAb,EAAAtD,SAAYO,EAAK,YAAc6D,WAAW,IAAhE9D,EHoMS6D,EGpMT7D,SAAU+D,EHqMFF,EGrMEE,OAChB9D,GAAK,oBAAoBE,MAAMN,MAAQkE,GHySjC,SAAUhJ,EAAQD,KAMlB,SAAUC,EAAQD,EAASH,GAEjC,YI/PA,SAASqJ,GAAYC,EAAYjD,GAC/B,GAAkB,UAAdiD,EAAwB,MAAO,aACnC,IAAIC,IAAM,EAAAC,EAAAC,WAAUpD,GAChBqD,GAAM,EAAAF,EAAAC,WAAUH,EACpB,OAAIC,GAAM,KAAOG,EAAM,IAAY,QAC/BH,EAAM,KAAOG,EAAM,GAAW,QAC3B,cAGT,QAASC,GAAUtD,GACjB,OAAO,EAAAmD,EAAAC,WAAUpD,GAAc,MAC3B,kBACA,wBAGN,QAASuD,GAAgBC,EAAcC,IACrC,EAAAC,EAAAC,aAAY,cAAe,SAAAC,GACzB,QAASC,GAAUhF,GACjBiF,IACAL,EAAS5E,GAHyC,GAAxBkF,GAAwBH,EAAxBG,MAAOD,EAAiBF,EAAjBE,UAMnCE,iBAAcC,QAAQ,SAAApF,GACpB,GAAIqF,GAASnG,SAASC,cAAc,SACpCkG,GAAOnE,UAAUc,IAAI,eACjBhC,IAAU2E,IACZU,EAAOnE,UAAUc,IAAI,UACrBqD,EAAOC,UAAY,WACnBD,EAAO/E,MAAMN,MAAQyE,EAAUzE,IAEjCqF,EAAO/E,MAAMiF,gBAAkBvF,EAAMwF,cACrCH,EAAOlI,iBAAiB,QAAS,iBAAM6H,GAAUhF,KACjDkF,EAAM7F,YAAYgG,IAGpB,IAAII,GAASvG,SAASC,cAAc,SACpCsG,GAAOvE,UAAUc,IAAI,UACrByD,EAAOtI,iBAAiB,QAAS,iBAAM6H,GAAU,YACjDS,EAAOH,UACL,kEACC,WAAaX,EAAe,kBAAoB,UACjD,UACFO,EAAM7F,YAAYoG,KAItB,QAASC,GAAUC,EAAMC,EAAM5F,GAC7B,GAAIxD,GAAIoJ,EAAO,EAAI,EAAIA,EACnBrK,EAAI2D,SAASC,cAAc,SAC/B5D,GAAE+C,MAAQ/C,EAAEgD,OAAS/B,CACrB,IAAIyB,GAAM1C,EAAE2C,WAAW,KAEV,WAAT8B,EAAmB6F,EAAW5H,EAAKzB,GAClCsJ,EAAgB7H,EAAKzB,EAAGwD,EAC7B,IAAI+F,GAASxK,EAAEyK,UAAU,YACzBL,GAAKrF,MAAMyF,OAAX,OAA2BA,EAA3B,KAAsCvJ,EAAI,EAA1C,IAA+CA,EAAI,EAAnD,QAGF,QAASsJ,GAAgB7H,EAAKzB,EAAGwD,GAC/B/B,EAAIgI,YACJhI,EAAIiI,IAAI1J,EAAI,EAAGA,EAAI,EAAGA,EAAI,EAAG,EAAG,EAAIiE,KAAK0F,IAAI,GAC7ClI,EAAImI,UAAYpG,EAChB/B,EAAIoI,OAGN,QAASR,GAAW5H,EAAKzB,GACvByB,EAAImI,UAAY,UAChBnI,EAAIqI,SAAS,EAAG,EAAO,EAAJ9J,EAAQ,EAAGA,GAC9ByB,EAAImI,UAAY,UAChBnI,EAAIqI,SAAa,EAAJ9J,EAAQ,EAAI,EAAG,EAAGA,EAAGA,GAClCyB,EAAIG,yBAA2B,iBAC/B0H,EAAgB7H,EAAKzB,EAAG,SJ2L1BZ,OAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAGTzE,EAAQ4E,QIjVO,SACb0G,EADa5J,GAOb,QAAS+E,KACP8E,EAAqBlG,MAAMa,WAAagD,EACtCQ,EACAnD,EAAsBlB,MAAMiF,iBAKhC,QAASkB,KACP/B,EAAgBC,EAAc+B,GAKhC,QAASA,GAAc1G,GACrB3C,QAAQC,IAAI,gBAAiB0C,GACzB2E,GAAgB3E,IAAU2E,IAE5BgC,EAAgBhC,GAGlBiC,aAAaC,QAAQ,gBAAiBF,GAEtChC,EAAe3E,EACf0F,EAAUpE,EAAiBwF,EAAanC,GAC3B,UAAT3E,GACF+G,EAAkBzG,MAAMa,WAAa,GACrC4F,EAAkB7F,UAAUc,IAAI,YAEhC+E,EAAkB7F,UAAUiB,OAAO,UACnC4E,EAAkBzG,MAAMa,WAAanB,EACrC0B,KAEFkF,aAAaC,QAAQ,QAAS7G,GAC9BuB,EAAcvB,GAahB,QAASyB,GAAgBe,GACvBsE,EAActE,EACdkD,EAAUpE,EAAiBwF,EAAanC,GACxCoC,EAAkBzG,MAAM0G,UAAY,SAAWxE,EAASyE,EAAW,IACnET,EAAqBlG,MAAM0G,UACzB,UAAYxE,EAASyE,EAAW,EAAIA,GAAY,IAxDpD,GADE1F,GACF5E,EADE4E,cAAeC,EACjB7E,EADiB6E,sBAAuBF,EACxC3E,EADwC2E,gBAElCyF,EAAoBR,EAAeW,SAAS,GAC5CV,EAAuBD,EAAeW,SAAS,GASjDvC,QAIJ4B,GAAepJ,iBAAiB,QAASsJ,EACzC,IAAIE,GAAgBC,aAAaO,QAAQ,kBAAoB,SAwBzDL,SAEEG,EAAWF,EAAkBK,wBAAwB9I,KAqB3D,OAnBAK,QAAOxB,iBAAiB,UAAW,SAAAkK,GACmB,MAAhDC,OAAOC,aAAaF,EAAGG,OAAOhC,gBAChCnI,QAAQC,IAAI,kBAAoBqJ,GAChCD,EAAcC,MAYlBnI,WAAW,iBACTkI,GAAcE,aAAaO,QAAQ,UAAYM,MAI/C7F,iBADK,WAEH2E,EAAemB,oBAAoB,QAASjB,IAE9ChF,kBACAC,6BA1EJ,IAAA4C,GAAAxJ,EAAA,GACA6M,EAAA7M,EAAA,GACA+J,EAAA/J,EAAA,GAHM2M,EAAe,WJoff,SAAUvM,EAAQD,EAASH,GAEjC,YASA,SAAS8M,GAAmBC,GAAO,GAAIC,MAAMC,QAAQF,GAAM,CAAE,IAAK,GAAI1M,GAAI,EAAG6M,EAAOF,MAAMD,EAAIpK,QAAStC,EAAI0M,EAAIpK,OAAQtC,IAAO6M,EAAK7M,GAAK0M,EAAI1M,EAAM,OAAO6M,GAAe,MAAOF,OAAMG,KAAKJ,GK/fnL,QAASK,GAAWlI,GACzB,GAAIhD,GAASkC,SAASC,cAAc,SACpCnC,GAAOsB,MAAQtB,EAAOuB,OAAS,CAC/B,IAAIN,GAAMjB,EAAOkB,WAAW,KAI5B,OAHAD,GAAIkK,UAAU,EAAG,EAAG,EAAG,GACvBlK,EAAImI,UAAYpG,EAChB/B,EAAIqI,SAAS,EAAG,EAAG,EAAG,MACf8B,OAAAR,EAAI3J,EAAIoK,aAAa,EAAG,EAAG,EAAG,GAAGC,OAAMC,MAAM,EAAG,GAGlD,QAAShE,GAAUvE,GACxB,MAAOkI,GAAWlI,GAAOwI,OAAO,SAACC,EAAGC,GAAJ,MAAUD,GAAIC,GAAG,GAAK,EL8exD9M,OAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAETzE,EK5fgBiN,aL6fhBjN,EKnfgBsJ,aLygBV,SAAUrJ,EAAQD,EAASH,GAEjC,YAGAc,QAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,GMzhBIyF,iBAAgB,0KAA0KwD,MACrM,MN8hBI,SAAUzN,EAAQD,EAASH,GAEjC,YOhiBO,SAASgK,GAAY8D,EAAWhE,GAcrC,QAASiE,GAAcxB,GAEP,IAAZA,EAAGG,OAEHvC,IAEJ,QAASA,KACPC,EAAMhE,UAAUc,IAAI,WACpB8G,EAAS5H,UAAUc,IAAI,WACvBxD,WAAW,WACTU,SAASE,KAAKK,YAAYyF,GAC1BhG,SAASE,KAAKK,YAAYqJ,IACzB,KACH5J,SAASwI,oBAAoB,QAASmB,GA1BxC,GAAI3D,GAAQhG,SAASC,cAAc,MACnC+F,GAAMhE,UAAUc,IAAI,SACpBkD,EAAMhE,UAAUc,IAAI4G,GACpB1J,SAASE,KAAKC,YAAY6F,EAE1B,IAAI4D,GAAW5J,SAASC,cAAc,MAwBtC,OAvBA2J,GAAS5H,UAAUc,IAAI,kBACvB9C,SAASE,KAAKC,YAAYyJ,GAE1BA,EAASxI,MAAMyI,OAASC,EACxB9D,EAAM5E,MAAMyI,OAASC,EAAc,EACnCF,EAAS3L,iBAAiB,QAAS8H,GACnC/F,SAAS/B,iBAAiB,QAAS0L,GAgBnCG,GAAe,EACRpE,GAAWM,QAAOD,ePqgB3BrJ,OAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAETzE,EOtiBgB6J,aADhB,IAAIkE,GAAc,GP0kBZ,SAAU9N,EAAQD,EAASH,GAEjC,YAGAc,QAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAGTzE,EAAQ4E,QQnlBO,SAAAlD,GAWb,QAASsM,GAASC,GAChBpF,GACA,IAAIqF,GAAa,GAAIC,WACrBD,GAAWE,OAAS,WAClBC,EAA2BH,EAAWI,QACtCxF,KAEFoF,EAAWK,QAAUzF,EACrBoF,EAAWM,cAAcP,GAG3B,QAASI,GAA2BC,GAElC,GADAzF,IACK4F,EAAL,CACA,GAAI1L,GAAM,GAAI2L,MACd3L,GAAIqL,OAAS,WACXK,GAAiB,EACjB7F,EAAe7F,EAAKf,GACpB8G,KAEF/F,EAAIwL,QAAUzF,EACd/F,EAAI4L,IAAML,GA8BZ,QAASM,GAAwBC,GAE/B,GAAIC,GAAYjC,MAAMzL,UAAU2N,KAAK3O,KACnCyO,EACA,SAAAjN,GAAA,MAAe,QAAVA,EAAEoN,MAAkBpN,EAAEqN,KAAKC,MAAM,UAGxC,IADAlN,EAAmB,eACf8M,EAEF,WADAd,GAASc,EAAUK,YAIrB,IAAIrL,GAAM+I,MAAMzL,UAAU2N,KAAK3O,KAAKyO,EAAO,SAAAjN,GAAA,MAAe,UAAVA,EAAEoN,MAC9ClL,IACFA,EAAIsL,YAAY,SAAA7N,GAAA,MAAK8M,GAA2B9M,KAvEnD,GAJDqH,GAIClH,EAJDkH,eACAD,EAGCjH,EAHDiH,UAGC0G,EAAA3N,EAFDmH,gBAECpG,KAAA4M,EAFW,iBAAM,OAEjBA,EAAAC,EAAA5N,EADDoH,cACCrG,KAAA6M,EADS,iBAAM,OACfA,EAEGtN,EAAmB,eACnByM,GAAiB,GA4BrB,WAEE,QAASc,GAAYC,GACnB7G,EAAU8D,oBAAoB,SAAU8C,GACxCvN,EACE2G,EAAUlE,MAAMiJ,MAAM,MAAM+B,MAAM/B,MAAM,KAAK,IAAM,QACrDM,EAASwB,EAAYE,OAAOC,MAAM,IALpChH,GAAaA,EAAUzG,iBAAiB,SAAUqN,MAWpD7L,OAAOxB,iBAAiB,QAAS,SAASkK,GACxCwC,EAAwBxC,EAAGwD,cAAcf,SAG3C5K,SAASE,KAAKjC,iBAAiB,WAAY,SAASkK,GAClDA,EAAGvK,iBACHuK,EAAGyD,oBAEL5L,SAASE,KAAKjC,iBAAiB,OAAQ,SAASkK,GAC9CA,EAAGvK,iBACHuK,EAAGyD,kBACHjB,EAAwBxC,EAAG0D,aAAajB,WRmnBtC,SAAU5O,EAAQD,EAASH,GAEjC,YAGAc,QAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAGTzE,EAAQ4E,QSvrBO,SAASsB,EAATxE,GACb,QAASqO,KACPC,IACArE,aAAaC,QAAQ,aAAcoE,GACnCC,IAGF,QAASA,KACP,GAAIC,IAAW,OAAQ,QACnBC,EAAUH,EAAcE,EAAQ1N,MACpC0D,GAAWb,MAAMiF,gBAAkB4F,EAAQC,GAG3C9I,EAAS8I,EAET,IAAIC,GAASnM,SAASE,KAAK8B,SAC3BiK,GAAQ/F,QAAQ,SAACpF,EAAOsL,GAAR,MAAkBD,GAAOlJ,OAAO,gBAAkBmJ,KAClED,EAAOrJ,IAAI,gBAAkBoJ,GAEzBG,EAAc,GAChBlO,QAAQC,IAAe,GAAX8N,EAAe,SAAW,UACtCG,KAEAlO,QAAQC,IACN,+EAxB0C,GAAZgF,GAAY3F,EAAZ2F,SAMhCiJ,EAAc,EAsBdN,EAAcrE,aAAaO,QAAQ,eAAiB,CACxD+D,KACA/J,EAAWhE,iBAAiB,QAAS6N,KT8rBjC,SAAU9P,EAAQD,EAASH,GAEjC,YAGAc,QAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAGTzE,EAAQ4E,QUnuBO,SAAS7C,EAATL,GAIb,QAAS6O,KACPC,EAAOzO,EAAOoK,wBACdsE,EAAQD,EAAKnN,MAAQtB,EAAOsB,MACxBqN,GAAkB1N,IACpBA,EAAI2N,UAAYD,EAAiBD,GAyDrC,QAASG,GAAYC,GACnB,OACEC,GAAID,EAAWE,QAAUP,EAAKQ,MAAQP,EACtCQ,GAAIJ,EAAWK,QAAUV,EAAKW,KAAOV,GAQzC,QAASW,KACHC,IACJA,GAAY,EACZrO,EAAIgI,YACJsG,KAEF,QAASC,KACPF,GAAarK,IACbqK,GAAY,EAGd,QAASC,KACHD,IACF3N,OAAO8N,sBAAsBF,GAC7BG,KAGJ,QAASA,KACPzO,EAAI0O,OAAOC,EAAQb,EAAGa,EAAQV,GAC9BjO,EAAI4O,OAAOC,EAASf,EAAGe,EAASZ,GAChCjO,EAAI8O,SACJH,EAAUE,EAIZ,QAASE,GACPC,EACAC,GAEA,GADAC,GACA3P,UAAAC,OAAA,OAAAC,KAAAF,UAAA,GAAAA,UAAA,GADcR,CAEdA,GAAOG,iBACL8P,EACA,SAASpQ,GACPA,EAAEC,gBADQ,IAAAiI,GAEiBlI,EAAEuQ,QAAQ,OAA/BpB,EAFIjH,EAEJiH,QAASG,EAFLpH,EAEKoH,QACXL,EAAa,GAAIuB,YAAWH,GAC9BlB,UACAG,WAEFgB,GAAYG,cAAcxB,KAE5B,GArHoE,GAAxChK,GAAwCnF,EAAxCmF,YAAaG,EAA2BtF,EAA3BsF,UAAW/E,EAAgBP,EAAhBO,aAEpDwO,SAAOD,SAAME,QASjBH,KAEA7M,OAAOxB,iBAAiB,SAAUqO,EAElC,IAAIvN,GAAMjB,EAAOkB,WAAW,KAG5BD,GAAIsP,QAAU,OAId,IAAIT,IACAf,EAAG,EACHG,EAAG,GAELU,EAAUE,CAEZ9P,GAAOG,iBACL,YACA,SAASN,GACP,GAAe,GAAXA,EAAE2K,MAIJ,YADA,EAAA/E,EAAA3E,qBAAoBd,EAAQE,EAG9B4P,GAAWF,EAAUf,EAAYhP,GACjCwP,IACAvK,MAEF,GAIF5C,SAAS/B,iBAAiB,OAAQ,SAAAkK,GAChCA,EAAGvK,kBACH,EAAA2F,EAAA3E,qBAAoBd,EAAQE,GAC5BmK,EAAGwD,cAAc2C,QACf,YACA,aAAexQ,EAAOgJ,YAAc,SAIxC9G,SAAS/B,iBAAiB,UAAWqP,GAAa,GAElDxP,EAAOG,iBACL,YACA,SAASN,GACPiQ,EAAWjB,EAAYhP,KAEzB,EAaF,IAAIyP,IAAY,CAkDhB,OAJAU,GAAkB,aAAc,aAChCA,EAAkB,WAAY,UAAW9N,UACzC8N,EAAkB,YAAa,cAG7B/M,eADK,WAEHhC,EAAIG,yBAA2B,mBAEjC8B,cAJK,SAISF,GACZ/B,EAAIG,yBAA2B,cAC/BH,EAAIwP,YAAczN,GAEpBoC,cARK,SAQSI,GACZmJ,EAAiBnJ,EACjBvE,EAAI2N,UAAYpJ,EAASkJ,IAxI/B,IAAAjJ,GAAA3H,EAAA,IV62BM,SAAUI,EAAQD,EAASH,GAEjC,YAGAc,QAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAGTzE,EAAQ4E,QWr3BO,SAAS6N,EAAT/Q,GAEb,QAASgR,GAAmBnL,GAC1BkL,EAAOhO,MAAQ8C,EACfoE,aAAaC,QAAQ,UAAWrE,GAChCF,EAASE,GALiC,GAAZF,GAAY3F,EAAZ2F,QAOhCoL,GAAOvQ,iBAAiB,QAAS,SAAAN,GAAA,MAAK8Q,GAAmB9Q,EAAE8N,OAAOjL,SAClEiO,EAAmBC,SAAShH,aAAaO,QAAQ,aAAe0G,GATlE,IAAMA,GAAc,IXy4Bd,SAAU3S,EAAQD,EAASH,GAEjC,YYp4BA,SAASgT,GAAYC,GAA2B,GAAhBC,GAAgBxQ,UAAAC,OAAA,OAAAC,KAAAF,UAAA,GAAAA,UAAA,GAAJ,GACtCyQ,EAAYF,EAAUG,OAAO,SAAA3S,GAAA,MAAKA,IAAKyS,GAC3C,OAAOC,GAAUxN,KAAK0N,MAAM1N,KAAK2N,SAAWH,EAAUxQ,SZq4BxD7B,OAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAGTzE,EAAQ4E,QYt4BO,SAAS7C,EAATL,GAGb,QAAS0R,KACHpK,IACFjH,EAAOsB,MAAQK,OAAOgC,WACtB3D,EAAOuB,OAASI,OAAOiC,aAEzB0N,EAAItR,EAAOsB,MACXiQ,EAAIvR,EAAOuB,OACXN,EAAMjB,EAAOkB,WAAW,MACxBD,EAAImI,UAAYlC,EAChBjG,EAAIqI,SAAS,EAAG,EAAGgI,EAAGC,GACtBtQ,EAAIsP,QAAU,QACdiB,IAIF,QAASA,KACPC,GAGE1C,EAAGuC,EAAI,EACPpC,EAAGqC,EAAI,GAETG,GACE3C,EAAmB,GAAhBtL,KAAK2N,SAAgB,EACxBlC,EAAmB,GAAhBzL,KAAK2N,SAAgB,GAE1BO,GACE5C,EAAmB,GAAhBtL,KAAK2N,SAAgB,EACxBlC,EAAmB,GAAhBzL,KAAK2N,SAAgB,GAG1BnQ,EAAIwP,YAAcK,EAAYc,EAAY1K,GAC1CjG,EAAI2N,UAAY,GAAqB,GAAhBnL,KAAK2N,SAC1BnQ,EAAIgI,YACJhI,EAAI0O,OAAO8B,EAAS1C,EAAG0C,EAASvC,GAMlC,QAAS2C,KACPF,GACE5C,EAAmB,EAAhBtL,KAAK2N,SAAe,EACvBlC,EAAmB,EAAhBzL,KAAK2N,SAAe,GAKzBU,EAA4BtQ,WAC1BqQ,EACA,IAAsB,IAAhBpO,KAAK2N,UAIf,QAAS1B,KACPzO,EAAI0O,OAAO8B,EAAS1C,EAAG0C,EAASvC,GAChCwC,EAAM3C,GAAK,IACX2C,EAAMxC,GAAK,IAEXwC,EAAM3C,GAAK4C,EAAa5C,EACxB2C,EAAMxC,GAAKyC,EAAazC,EACxBuC,EAAS1C,GAAK2C,EAAM3C,EACpB0C,EAASvC,GAAKwC,EAAMxC,EACpBjO,EAAI4O,OAAO4B,EAAS1C,EAAG0C,EAASvC,GAChCjO,EAAI8O,UAEF0B,EAAS1C,GAAK,IACd0C,EAAS1C,EAAIuC,EAAI,IACjBG,EAASvC,GAAK,IACduC,EAASvC,EAAIqC,EAAI,KAEjBC,IAIJ,QAASjC,KACHD,IACF3N,OAAO8N,sBAAsBF,GAC7BG,KAMJ,QAASvM,KACPmM,GAAY,EACZyC,aAAaD,GACbnQ,OAAO+I,oBAAoB,SAAU2G,GA1FM,GAAbpK,GAAatH,EAAbsH,UAC5BhG,SAAKqQ,SAAGC,SACRrK,EAAU,UAeVuK,SAAUC,SAAOC,SAA6BG,QAuBlDT,KACA1P,OAAOxB,iBAAiB,SAAUkR,GAelCQ,GAqBA,IAAIvC,IAAY,CAgBhB,OARAC,MASEpM,WACA+D,WA3GJ,IAAM0K,GAAa,kIAAkIjG,MACnJ,MZmgCI,SAAUzN,EAAQD,EAASH,GAEjC,YargCO,SAASgJ,KACdkL,IACAC,IAGK,QAASlL,KACdiL,IACAxQ,WAAWyQ,GAGN,QAASA,KACdC,SAAShO,UAAU8N,EAAkB,SAAW,OAAO,Ub6/BzDpT,OAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAETzE,Ea3gCgB6I,Yb4gChB7I,EavgCgB8I,UbwgChB9I,EangCgBgU,YAXhB,IAAID,GAAkB,CActB9P,UAAS/B,iBAAiB,mBAAoB8R,IbmhCxC,SAAU/T,EAAQD,EAASH,GAEjC,YcliCO,SAAS6H,GAAThG,GAAiE,GAA1CK,GAA0CL,EAA1CK,OAAQE,EAAkCP,EAAlCO,aAAcD,EAAoBN,EAApBM,gBAClD0B,QAAOxB,iBAAiB,UAAW,SAAAgS,IAC7BA,EAAMC,SAAWD,EAAME,UAC8B,MAAnD/H,OAAOC,aAAa4H,EAAM3H,OAAOhC,gBACnC2J,EAAMrS,kBACN,EAAA2F,EAAA1F,iBAAgBC,EAAQC,EAAkBC,MdgiClDtB,OAAOC,eAAeZ,EAAS,cAC7ByE,OAAO,IAETzE,EcxiCgB0H,aADhB,IAAAF,GAAA3H,EAAA,Id8jCM,SAAUI,EAAQD,Ge5jCxB,QAAAqU,KACA,uBAAA1Q,aAGAD,OAAA4Q,OAAA,kBAAArQ,UAAAsQ,gBAAAlP,SACA,WAAA3B,OAAA8Q,SAAAC,UAAA,cAAA/Q,OAAA8Q,SAAAE,UAAA,IAAAhR,OAAA8Q,SAAAE,SAAAC,QAAA,SAGA,QAAAjM,GAAAwH,GAIA,GAHAA,UAGAmE,IACA,CAAA1Q,UAAAiR,cACAC,SACA,kBAWA,IAAAnR,OAAAoR,iBAAA,CACA,GAGAC,GAAA,WACA,GACAC,GAAA/Q,SAAAC,cAAA,SAIA8Q,GAAArG,IALAsG,8BAMAD,EAAA3P,MAAAC,QAAA,OAEA4P,EAAAF,EACA/Q,SAAAE,KAAAC,YAAA4Q,GASA,aANA,aAAA/Q,SAAAkR,WACA5R,WAAAwR,GAEArR,OAAAxB,iBAAA,OAAA6S,KAQA,QAAAK,GAAAzL,EAAA0L,IAMA,QAAAC,KAWA,GATAjB,KACA1Q,UAAAiR,cAAAW,kBAAAC,KAAA,SAAAC,GACA,GAAAA,EACA,MAAAA,GAAAH,WAMAJ,EACA,IACAA,EAAAQ,cAAAZ,iBAAAQ,SACO,MAAA1T,KA5EP,GAAAsT,EAmFAlV,GAAA0I,UACA1I,EAAAoV,cACApV,EAAAsV","file":"bundle.f181a7f28dc473f6f66c.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"./dist/\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 1);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.makeDownloadLink = makeDownloadLink;\nexports.triggerDownload = triggerDownload;\nexports.mergeCanvasAndImage = mergeCanvasAndImage;\nfunction makeDownloadLink(link, _ref) {\n var OrginalImage = _ref.OrginalImage,\n canvas = _ref.canvas,\n originalFileName = _ref.originalFileName;\n\n // Download button\n function downloadImage(e) {\n e.preventDefault();\n triggerDownload(canvas, originalFileName, OrginalImage);\n }\n link.addEventListener(\"click\", downloadImage);\n}\n\nfunction nope(e) {\n console.log(e);\n}\nvar downloadCounter = 0;\nfunction triggerDownload(canvas, originalFileName, OrginalImage) {\n var failed = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : nope;\n var suceeded = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : nope;\n\n var filename = originalFileName + \"-minimage-\" + downloadCounter + \".png\";\n mergeCanvasAndImage(canvas, OrginalImage, failed, suceeded);\n downloadCanvas(canvas, filename, failed, suceeded);\n\n downloadCounter++;\n}\n\nfunction mergeCanvasAndImage(canvas, img, failed, suceeded) {\n try {\n // Pastes the image as a canvas background\n var ctx = canvas.getContext(\"2d\");\n var oldComposite = ctx.globalCompositeOperation;\n ctx.globalCompositeOperation = \"destination-over\";\n\n // Draw the orignal image\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n\n ctx.globalCompositeOperation = oldComposite;\n suceeded && setTimeout(suceeded);\n return canvas;\n } catch (e) {\n failed && failed(e);\n }\n}\n\nfunction downloadCanvas(canvas, filename, failed, suceeded) {\n try {\n canvas.toBlob(function (blob) {\n try {\n if (window.navigator.msSaveOrOpenBlob) {\n window.navigator.msSaveBlob(blob, filename);\n suceeded && setTimeout(suceeded);\n } else {\n var url = window.URL.createObjectURL(blob);\n var link = document.createElement(\"a\");\n document.body.appendChild(link);\n link.setAttribute(\"href\", url);\n link.setAttribute(\"download\", filename);\n link.click();\n suceeded && setTimeout(suceeded);\n setTimeout(function () {\n window.URL.revokeObjectURL(url);\n document.body.removeChild(link);\n }, 3000);\n }\n } catch (e) {\n failed && failed(e);\n }\n });\n } catch (e) {\n failed && failed(e);\n }\n}\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(2);\n\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\n__webpack_require__(3);\n\nvar _colorPicker = __webpack_require__(4);\n\nvar _colorPicker2 = _interopRequireDefault(_colorPicker);\n\nvar _getAnImage = __webpack_require__(8);\n\nvar _getAnImage2 = _interopRequireDefault(_getAnImage);\n\nvar _toggleAbleBackground = __webpack_require__(9);\n\nvar _toggleAbleBackground2 = _interopRequireDefault(_toggleAbleBackground);\n\nvar _editableCanvas = __webpack_require__(10);\n\nvar _editableCanvas2 = _interopRequireDefault(_editableCanvas);\n\nvar _canvasMergerAndDonwloaderLink = __webpack_require__(0);\n\nvar _pencilSizeSlider = __webpack_require__(11);\n\nvar _pencilSizeSlider2 = _interopRequireDefault(_pencilSizeSlider);\n\nvar _welcomeAnim2 = __webpack_require__(12);\n\nvar _welcomeAnim3 = _interopRequireDefault(_welcomeAnim2);\n\nvar _spinners = __webpack_require__(13);\n\nvar _detectCtrlS = __webpack_require__(14);\n\nvar _runtime = __webpack_require__(15);\n\nvar OfflinePluginRuntime = _interopRequireWildcard(_runtime);\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar byId = document.getElementById.bind(document);\n\nOfflinePluginRuntime.install();\n\nvar originalFileName = void 0,\n OrginalImage = void 0;\n(0, _getAnImage2.default)({\n fileinput: byId(\"fileinput\"),\n onImageCreated: function onImageCreated(img, filename) {\n originalFileName = filename;\n letUserDrawAndDownload(img);\n },\n startTask: _spinners.startTask,\n endTask: _spinners.endTask\n});\n\nvar _welcomeAnim = (0, _welcomeAnim3.default)(byId(\"welcome\"), { fitWindow: true }),\n stopAnim = _welcomeAnim.stopAnim,\n bgColor = _welcomeAnim.bgColor;\n\nbyId(\"fileInputWrapper\").style.color = bgColor;\n\n// Lets the user draw on the loaded image\nfunction letUserDrawAndDownload(img) {\n OrginalImage = img;\n stopAnim();\n var canvas = byId(\"drawzone\"),\n drawzoneWrapper = byId(\"drawzoneWrapper\");\n\n // Switch to drawing mode\n byId(\"inputForAFile\").style.display = \"none\";\n byId(\"drawAndDownload\").style.display = \"\";\n\n console.log(img.width, img.height);\n var maxRes = Math.max(window.innerWidth, window.innerHeight) * 2;\n // Fits the canvas to screen\n var imgScale = Math.max(img.width / maxRes, img.height / maxRes, 1);\n img.width = canvas.width = img.width / imgScale;\n img.height = canvas.height = img.height / imgScale;\n drawzoneWrapper.style.maxWidth = img.width;\n drawzoneWrapper.style.maxHeight = img.height;\n\n // Needs to happen AFTER size measurements\n drawzoneWrapper.appendChild(img);\n\n var ctx = canvas.getContext(\"2d\");\n var hasDoneFirstDraw = false;\n var barClass = byId(\"topbar\").classList;\n\n var background = byId(\"background\");\n\n var _setupColorPicker = (0, _colorPicker2.default)(byId(\"pensizePreview\"), {\n canvasForCursor: canvas,\n onColorChange: setColor,\n elementToContrastWith: background\n }),\n setColorDotSize = _setupColorPicker.setColorDotSize,\n refreshColorPreviewBorder = _setupColorPicker.refreshColorPreviewBorder,\n clearColorPicker = _setupColorPicker.clearColorPicker;\n\n var _setupEditableCanvas = (0, _editableCanvas2.default)(canvas, {\n onMouseDown: function onMouseDown() {\n if (canvas.getClientRects()[0].height + 2 * 80 > window.innerHeight) {\n barClass.add(\"drawInProgress\");\n }\n },\n onMouseUp: function onMouseUp() {\n if (!hasDoneFirstDraw) {\n hasDoneFirstDraw = true;\n download.classList.add(\"usable\");\n }\n barClass.remove(\"drawInProgress\");\n },\n\n OrginalImage: OrginalImage\n }),\n drawWithColor = _setupEditableCanvas.drawWithColor,\n drawWithEraser = _setupEditableCanvas.drawWithEraser,\n setPencilSize = _setupEditableCanvas.setPencilSize;\n\n // Sets draw color at load and when user clicks color input\n\n\n function setColor(color) {\n if (color == \"eraser\") {\n drawWithEraser();\n } else {\n drawWithColor(color);\n }\n }\n // Tap the background to switch its color (usefull for transparent images)\n (0, _toggleAbleBackground2.default)(background, { onChange: refreshColorPreviewBorder });\n\n (0, _pencilSizeSlider2.default)(byId(\"pensize\"), {\n onChange: function onChange(pxSize) {\n setColorDotSize(pxSize);\n setPencilSize(pxSize);\n }\n });\n\n (0, _canvasMergerAndDonwloaderLink.makeDownloadLink)(byId(\"download\"), {\n OrginalImage: OrginalImage,\n originalFileName: originalFileName,\n canvas: canvas\n });\n\n (0, _detectCtrlS.detectCtrlS)({\n canvas: canvas,\n OrginalImage: OrginalImage,\n originalFileName: originalFileName\n });\n\n function clear() {\n clearColorPicker();\n }\n}\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (pensizePreview, _ref) {\n var onColorChange = _ref.onColorChange,\n elementToContrastWith = _ref.elementToContrastWith,\n canvasForCursor = _ref.canvasForCursor;\n\n var pensizePreviewDot = pensizePreview.children[0];\n var pensizePreviewBorder = pensizePreview.children[1];\n\n function refreshColorPreviewBorder() {\n pensizePreviewBorder.style.background = borderColor(currentColor, elementToContrastWith.style.backgroundColor);\n }\n\n var currentColor = void 0;\n function openInitializedColorPicker() {\n openColorPicker(currentColor, onColorPicked);\n }\n pensizePreview.addEventListener(\"click\", openInitializedColorPicker);\n var previousColor = localStorage.getItem(\"previousColor\") || \"eraser\";\n\n function onColorPicked(color) {\n console.log(\"onColorPicked\", color);\n if (currentColor && color !== currentColor) {\n // For toggling between last two colors\n previousColor = currentColor;\n }\n\n localStorage.setItem(\"previousColor\", previousColor);\n\n currentColor = color;\n setCursor(canvasForCursor, currentSize, currentColor);\n if (color == \"eraser\") {\n pensizePreviewDot.style.background = \"\";\n pensizePreviewDot.classList.add(\"eraser\");\n } else {\n pensizePreviewDot.classList.remove(\"eraser\");\n pensizePreviewDot.style.background = color;\n refreshColorPreviewBorder();\n }\n localStorage.setItem(\"color\", color);\n onColorChange(color);\n }\n var currentSize = void 0;\n // Should be 10\n var baseSize = pensizePreviewDot.getBoundingClientRect().width;\n\n window.addEventListener(\"keydown\", function (ev) {\n if (String.fromCharCode(ev.which).toLowerCase() === \"x\") {\n console.log(\"x switching to \" + previousColor);\n onColorPicked(previousColor);\n }\n });\n\n function setColorDotSize(pxSize) {\n currentSize = pxSize;\n setCursor(canvasForCursor, currentSize, currentColor);\n pensizePreviewDot.style.transform = \"scale(\" + pxSize / baseSize + \")\";\n pensizePreviewBorder.style.transform = \"scale(\" + (pxSize / baseSize + 1 / baseSize) + \")\";\n }\n\n setTimeout(function () {\n return onColorPicked(localStorage.getItem(\"color\") || DEFAULTCOLOR);\n });\n\n return {\n clearColorPicker: function clearColorPicker() {\n pensizePreview.removeEventListener(\"click\", openInitializedColorPicker);\n },\n\n setColorDotSize: setColorDotSize,\n refreshColorPreviewBorder: refreshColorPreviewBorder\n };\n};\n\nvar _colorToRGB = __webpack_require__(5);\n\nvar _palette = __webpack_require__(6);\n\nvar _modal = __webpack_require__(7);\n\nvar DEFAULTCOLOR = \"#2b76ce\";\n\n\nfunction borderColor(foreground, background) {\n if (foreground == \"eraser\") return \"transparent\";\n var bgL = (0, _colorToRGB.luminance)(background);\n var fgL = (0, _colorToRGB.luminance)(foreground);\n if (bgL > 125 && fgL > 200) return \"black\";\n if (bgL < 125 && fgL < 25) return \"white\";\n return \"transparent\";\n}\n\nfunction textColor(background) {\n return (0, _colorToRGB.luminance)(background) > 255 / 2 ? \"rgba(0,0,0,0.8)\" : \"rgba(255,255,255,0.8)\";\n}\n\nfunction openColorPicker(currentColor, callback) {\n (0, _modal.createModal)(\"color-modal\", function (_ref2) {\n var modal = _ref2.modal,\n closeModal = _ref2.closeModal;\n\n function pickColor(color) {\n closeModal();\n callback(color);\n }\n\n _palette.paletteColors.forEach(function (color) {\n var button = document.createElement(\"button\");\n button.classList.add(\"colorbutton\");\n if (color === currentColor) {\n button.classList.add(\"active\");\n button.innerHTML = \"Selected\";\n button.style.color = textColor(color);\n }\n button.style.backgroundColor = color.toLowerCase();\n button.addEventListener(\"click\", function () {\n return pickColor(color);\n });\n modal.appendChild(button);\n });\n\n var eraser = document.createElement(\"button\");\n eraser.classList.add(\"eraser\");\n eraser.addEventListener(\"click\", function () {\n return pickColor(\"eraser\");\n });\n eraser.innerHTML = '' + (\"eraser\" === currentColor ? \"Eraser selected\" : \"Eraser\") + \"\";\n modal.appendChild(eraser);\n });\n}\n\nfunction setCursor(node, size, color) {\n var s = size < 4 ? 4 : size;\n var c = document.createElement(\"canvas\");\n c.width = c.height = s;\n var ctx = c.getContext(\"2d\");\n\n if (color == \"eraser\") drawEraser(ctx, s);else drawColorCircle(ctx, s, color);\n var cursor = c.toDataURL(\"image/png\");\n node.style.cursor = \"url(\" + cursor + \") \" + s / 2 + \" \" + s / 2 + \",auto\";\n}\n\nfunction drawColorCircle(ctx, s, color) {\n ctx.beginPath();\n ctx.arc(s / 2, s / 2, s / 2, 0, 2 * Math.PI, false);\n ctx.fillStyle = color;\n ctx.fill();\n}\n\nfunction drawEraser(ctx, s) {\n ctx.fillStyle = \"#da502d\";\n ctx.fillRect(0, 0, s * 2 / 3, s);\n ctx.fillStyle = \"#6584a5\";\n ctx.fillRect(s * 2 / 3 - 1, 0, s, s);\n ctx.globalCompositeOperation = \"destination-in\";\n drawColorCircle(ctx, s, \"white\");\n}\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.colorToRGB = colorToRGB;\nexports.luminance = luminance;\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction colorToRGB(color) {\n var canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = 1;\n var ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, 1, 1);\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, 1, 1);\n return [].concat(_toConsumableArray(ctx.getImageData(0, 0, 1, 1).data)).slice(0, 3);\n}\n\nfunction luminance(color) {\n return colorToRGB(color).reduce(function (a, b) {\n return a + b;\n }, 0) / 3;\n}\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar paletteColors = exports.paletteColors = \"#000000,#FFFFFF,#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722,#795548,#9E9E9E,#607D8B\".split(\",\");\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createModal = createModal;\nvar modalZindex = 4;\nfunction createModal(className, callback) {\n var modal = document.createElement(\"div\");\n modal.classList.add(\"modal\");\n modal.classList.add(className);\n document.body.appendChild(modal);\n\n var backdrop = document.createElement(\"div\");\n backdrop.classList.add(\"modal-backdrop\");\n document.body.appendChild(backdrop);\n\n backdrop.style.zIndex = modalZindex;\n modal.style.zIndex = modalZindex + 1;\n backdrop.addEventListener(\"click\", closeModal);\n document.addEventListener(\"keyup\", closeOnEscape);\n function closeOnEscape(ev) {\n if (ev.which == 27 // escape key\n ) closeModal();\n }\n function closeModal() {\n modal.classList.add(\"closing\");\n backdrop.classList.add(\"closing\");\n setTimeout(function () {\n document.body.removeChild(modal);\n document.body.removeChild(backdrop);\n }, 300);\n document.removeEventListener(\"keyup\", closeOnEscape);\n }\n modalZindex += 2;\n return callback({ modal: modal, closeModal: closeModal });\n}\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (_ref) {\n var onImageCreated = _ref.onImageCreated,\n fileinput = _ref.fileinput,\n _ref$startTask = _ref.startTask,\n startTask = _ref$startTask === undefined ? function () {\n return null;\n } : _ref$startTask,\n _ref$endTask = _ref.endTask,\n endTask = _ref$endTask === undefined ? function () {\n return null;\n } : _ref$endTask;\n\n // Callbacks onImageCreated with img tag and filename\n var originalFileName = \"pasted-image\";\n var askingForImage = true;\n\n // Transforms the file input content to a real image\n function loadFile(fileToLoad) {\n startTask();\n var fileReader = new FileReader();\n fileReader.onload = function () {\n createImageWithFileContent(fileReader.result);\n endTask();\n };\n fileReader.onerror = endTask;\n fileReader.readAsDataURL(fileToLoad);\n }\n\n function createImageWithFileContent(result) {\n startTask();\n if (!askingForImage) return;\n var img = new Image();\n img.onload = function () {\n askingForImage = false;\n onImageCreated(img, originalFileName);\n endTask();\n };\n img.onerror = endTask;\n img.src = result;\n }\n\n // Setup of the welcome UI\n function askForImage() {\n fileinput && fileinput.addEventListener(\"change\", fileChanged);\n function fileChanged(changeEvent) {\n fileinput.removeEventListener(\"change\", fileChanged);\n originalFileName = fileinput.value.split(\"\\\\\").pop().split(\".\")[0] || \"image\";\n loadFile(changeEvent.target.files[0]);\n }\n }\n\n askForImage();\n\n window.addEventListener(\"paste\", function (ev) {\n handleDataTransferItems(ev.clipboardData.items);\n });\n\n document.body.addEventListener(\"dragover\", function (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n });\n document.body.addEventListener(\"drop\", function (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n handleDataTransferItems(ev.dataTransfer.items);\n });\n\n function handleDataTransferItems(items) {\n // Tries to paste an image\n var imageFile = Array.prototype.find.call(items, function (e) {\n return e.kind == \"file\" && e.type.match(\"image\");\n });\n originalFileName = \"pasted-image\";\n if (imageFile) {\n loadFile(imageFile.getAsFile());\n return;\n }\n // Tries to load a remote image given its adress\n var url = Array.prototype.find.call(items, function (e) {\n return e.kind == \"string\";\n });\n if (url) {\n url.getAsString(function (s) {\n return createImageWithFileContent(s);\n });\n }\n }\n};\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (background, _ref) {\n var onChange = _ref.onChange;\n\n function switchBackground() {\n currentMode++;\n localStorage.setItem(\"background\", currentMode);\n applyBackground();\n }\n var switchCount = 0;\n function applyBackground() {\n var options = [\"#DDD\", \"#333\"];\n var current = currentMode % options.length;\n background.style.backgroundColor = options[current];\n // let meta = document.getElementById(\"theme-color\");\n // meta && meta.setAttribute(\"content\", \"#fff\");\n onChange(current);\n\n var bclass = document.body.classList;\n options.forEach(function (color, index) {\n return bclass.remove(\"background_n_\" + index);\n });\n bclass.add(\"background_n_\" + current);\n // https://www.youtube.com/watch?v=Pr8ETbGz35Q\n if (switchCount < 8) {\n console.log(current == 0 ? \"jour !\" : \"nuit !\");\n switchCount++;\n } else {\n console.log(\"Monsieur Jacquouille, je vous en prie, à la longue, ça devient casse-pied !\");\n }\n }\n var currentMode = localStorage.getItem(\"background\") || 0;\n applyBackground();\n background.addEventListener(\"click\", switchBackground);\n};\n\n/***/ }),\n/* 10 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (canvas, _ref) {\n var onMouseDown = _ref.onMouseDown,\n onMouseUp = _ref.onMouseUp,\n OrginalImage = _ref.OrginalImage;\n\n // We cache some zoom related data to avoid getting them all the time\n var scale = void 0,\n rect = void 0,\n lastUsedPXsize = void 0;\n\n function measureScale() {\n rect = canvas.getBoundingClientRect();\n scale = rect.width / canvas.width;\n if (lastUsedPXsize && ctx) {\n ctx.lineWidth = lastUsedPXsize / scale;\n }\n }\n measureScale();\n\n window.addEventListener(\"resize\", measureScale);\n\n var ctx = canvas.getContext(\"2d\");\n\n // To make the lines look slightly nicer\n ctx.lineCap = \"round\";\n\n // We cache the mouse position and previous mouse position.\n // Theay are defined by touch events, and used by the draw loop\n var mousePos = {\n x: 0,\n y: 0\n },\n lastPos = mousePos;\n\n canvas.addEventListener(\"mousedown\", function (e) {\n if (e.which == 3) {\n // We detected a right click on canvas, probably to save it.\n // We merge the content of the background image with the canvas\n (0, _canvasMergerAndDonwloaderLink.mergeCanvasAndImage)(canvas, OrginalImage);\n return;\n }\n mousePos = lastPos = getMousePos(e);\n startDrawLoop();\n onMouseDown();\n }, false);\n\n // Allow ctrl-c > pasting to word & co\n document.addEventListener(\"copy\", function (ev) {\n ev.preventDefault();\n (0, _canvasMergerAndDonwloaderLink.mergeCanvasAndImage)(canvas, OrginalImage);\n ev.clipboardData.setData(\"text/html\", '');\n });\n\n document.addEventListener(\"mouseup\", endDrawLoop, false);\n\n canvas.addEventListener(\"mousemove\", function (e) {\n mousePos = getMousePos(e);\n }, false);\n\n // Get the position of the mouse relative to the canvas\n function getMousePos(mouseEvent) {\n return {\n x: (mouseEvent.clientX - rect.left) / scale,\n y: (mouseEvent.clientY - rect.top) / scale\n };\n }\n\n // Drawing loop is separated from the events\n\n var isDrawing = false;\n\n function startDrawLoop() {\n if (isDrawing) return;\n isDrawing = true;\n ctx.beginPath();\n drawLoop();\n }\n function endDrawLoop() {\n isDrawing && onMouseUp();\n isDrawing = false;\n }\n\n function drawLoop() {\n if (isDrawing) {\n window.requestAnimationFrame(drawLoop);\n renderCanvas();\n }\n }\n function renderCanvas() {\n ctx.moveTo(lastPos.x, lastPos.y);\n ctx.lineTo(mousePos.x, mousePos.y);\n ctx.stroke();\n lastPos = mousePos;\n }\n\n // Proxy mobile events to their mouse counterpart\n function proxyTouchToMouse(touchEventName, mouseEventName) {\n var eventTarget = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : canvas;\n\n canvas.addEventListener(touchEventName, function (e) {\n e.preventDefault();\n\n var _ref2 = e.touches[0] || {},\n clientX = _ref2.clientX,\n clientY = _ref2.clientY;\n\n var mouseEvent = new MouseEvent(mouseEventName, {\n clientX: clientX,\n clientY: clientY\n });\n eventTarget.dispatchEvent(mouseEvent);\n }, false);\n }\n proxyTouchToMouse(\"touchstart\", \"mousedown\");\n proxyTouchToMouse(\"touchend\", \"mouseup\", document);\n proxyTouchToMouse(\"touchmove\", \"mousemove\");\n\n return {\n drawWithEraser: function drawWithEraser() {\n ctx.globalCompositeOperation = \"destination-out\";\n },\n drawWithColor: function drawWithColor(color) {\n ctx.globalCompositeOperation = \"source-over\";\n ctx.strokeStyle = color;\n },\n setPencilSize: function setPencilSize(pxSize) {\n lastUsedPXsize = pxSize;\n ctx.lineWidth = pxSize / scale;\n }\n };\n};\n\nvar _canvasMergerAndDonwloaderLink = __webpack_require__(0);\n\n/***/ }),\n/* 11 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (slider, _ref) {\n var onChange = _ref.onChange;\n\n // Sets draw size at load and style when the user interracts with the slider\n function onPencilSizeChange(pxSize) {\n slider.value = pxSize;\n localStorage.setItem(\"pensize\", pxSize);\n onChange(pxSize);\n }\n slider.addEventListener(\"input\", function (e) {\n return onPencilSizeChange(e.target.value);\n });\n onPencilSizeChange(parseInt(localStorage.getItem(\"pensize\")) || DEFAULTSIZE);\n};\n\nvar DEFAULTSIZE = 20;\n\n/***/ }),\n/* 12 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (canvas, _ref) {\n var fitWindow = _ref.fitWindow;\n\n var ctx = void 0,\n w = void 0,\n h = void 0;\n var bgColor = \"#F44336\"; //randomColor(darkCoolColors);\n function reset() {\n if (fitWindow) {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n }\n w = canvas.width;\n h = canvas.height;\n ctx = canvas.getContext(\"2d\");\n ctx.fillStyle = bgColor;\n ctx.fillRect(0, 0, w, h);\n ctx.lineCap = \"round\";\n randomizeInst();\n }\n\n var position = void 0,\n speed = void 0,\n acceleration = void 0,\n timeoutHandle = void 0,\n accelerationTimeoutHandle = void 0;\n function randomizeInst() {\n position = {\n // x: Math.random() * w,\n // y: Math.random() * h\n x: w / 2,\n y: h / 2\n };\n speed = {\n x: Math.random() * 10 - 5,\n y: Math.random() * 10 - 5\n };\n acceleration = {\n x: Math.random() * 10 - 5,\n y: Math.random() * 10 - 5\n };\n\n ctx.strokeStyle = randomColor(coolColors, bgColor);\n ctx.lineWidth = 20 + Math.random() * 40;\n ctx.beginPath();\n ctx.moveTo(position.x, position.y);\n }\n\n reset();\n window.addEventListener(\"resize\", reset);\n\n function randomAcceletation() {\n acceleration = {\n x: Math.random() * 2 - 1,\n y: Math.random() * 2 - 1\n };\n // speed.x*=0.2;\n // speed.y*=0.2;\n\n accelerationTimeoutHandle = setTimeout(randomAcceletation, 100 + Math.random() * 200);\n }\n randomAcceletation();\n function renderCanvas() {\n ctx.moveTo(position.x, position.y);\n speed.x *= 0.95;\n speed.y *= 0.95;\n\n speed.x += acceleration.x;\n speed.y += acceleration.y;\n position.x += speed.x;\n position.y += speed.y;\n ctx.lineTo(position.x, position.y);\n ctx.stroke();\n if (position.x < -50 || position.x > w + 50 || position.y < -50 || position.y > h + 50) randomizeInst();\n }\n\n var isDrawing = true;\n function drawLoop() {\n if (isDrawing) {\n window.requestAnimationFrame(drawLoop);\n renderCanvas();\n }\n }\n\n drawLoop();\n\n function stopAnim() {\n isDrawing = false;\n clearTimeout(accelerationTimeoutHandle);\n window.removeEventListener(\"resize\", reset);\n }\n\n return {\n stopAnim: stopAnim,\n bgColor: bgColor\n };\n};\n\nvar coolColors = \"#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722\".split(\",\");\n\n//import { luminance } from \"./colorToRGB.js\";\n// const darkCoolColors = coolColors.filter(c => luminance(c) < 150);\n\nfunction randomColor(colorPool) {\n var exception = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : \"\";\n\n var withoutEx = colorPool.filter(function (c) {\n return c != exception;\n });\n return withoutEx[Math.floor(Math.random() * withoutEx.length)];\n}\n\n/***/ }),\n/* 13 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.startTask = startTask;\nexports.endTask = endTask;\nexports.updateLook = updateLook;\nvar tasksInProgress = 0;\nfunction startTask() {\n tasksInProgress++;\n updateLook();\n}\n\nfunction endTask() {\n tasksInProgress--;\n setTimeout(updateLook);\n}\n\nfunction updateLook() {\n spinners.classList[tasksInProgress ? \"remove\" : \"add\"](\"hidden\");\n}\ndocument.addEventListener(\"DOMContentLoaded\", updateLook);\n\n/***/ }),\n/* 14 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.detectCtrlS = detectCtrlS;\n\nvar _canvasMergerAndDonwloaderLink = __webpack_require__(0);\n\nfunction detectCtrlS(_ref) {\n var canvas = _ref.canvas,\n OrginalImage = _ref.OrginalImage,\n originalFileName = _ref.originalFileName;\n\n window.addEventListener(\"keydown\", function (event) {\n if (event.ctrlKey || event.metaKey) {\n if (String.fromCharCode(event.which).toLowerCase() === \"s\") {\n event.preventDefault();\n (0, _canvasMergerAndDonwloaderLink.triggerDownload)(canvas, originalFileName, OrginalImage);\n }\n }\n });\n}\n\n/***/ }),\n/* 15 */\n/***/ (function(module, exports) {\n\nvar appCacheIframe;\n\nfunction hasSW() {\n return 'serviceWorker' in navigator &&\n // This is how I block Chrome 40 and detect Chrome 41, because first has\n // bugs with history.pustState and/or hashchange\n (window.fetch || 'imageRendering' in document.documentElement.style) &&\n (window.location.protocol === 'https:' || window.location.hostname === 'localhost' || window.location.hostname.indexOf('127.') === 0)\n}\n\nfunction install(options) {\n options || (options = {});\n\n \n if (hasSW()) {\n var registration = navigator.serviceWorker\n .register(\n \"dist/sw.js\"\n \n );\n\n \n\n return;\n }\n \n\n \n if (window.applicationCache) {\n var directory = \"dist/appcache/\";\n var name = \"manifest\";\n\n var doLoad = function() {\n var page = directory + name + '.html';\n var iframe = document.createElement('iframe');\n\n \n\n iframe.src = page;\n iframe.style.display = 'none';\n\n appCacheIframe = iframe;\n document.body.appendChild(iframe);\n };\n\n if (document.readyState === 'complete') {\n setTimeout(doLoad);\n } else {\n window.addEventListener('load', doLoad);\n }\n\n return;\n }\n \n}\n\nfunction applyUpdate(callback, errback) {\n \n\n \n}\n\nfunction update() {\n \n if (hasSW()) {\n navigator.serviceWorker.getRegistration().then(function(registration) {\n if (!registration) return;\n return registration.update();\n });\n }\n \n\n \n if (appCacheIframe) {\n try {\n appCacheIframe.contentWindow.applicationCache.update();\n } catch (e) {}\n }\n \n}\n\n\n\nexports.install = install;\nexports.applyUpdate = applyUpdate;\nexports.update = update;\n\n\n/***/ })\n/******/ ]);\n\n\n// WEBPACK FOOTER //\n// bundle.f181a7f28dc473f6f66c.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./dist/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 1);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap f181a7f28dc473f6f66c"," \nexport function makeDownloadLink(\n link,\n { OrginalImage, canvas, originalFileName }\n) {\n // Download button\n function downloadImage(e) {\n e.preventDefault(); \n triggerDownload(canvas, originalFileName, OrginalImage);\n }\n link.addEventListener(\"click\", downloadImage);\n}\n\nfunction nope(e) {\n console.log(e);\n}\nvar downloadCounter = 0;\nexport function triggerDownload(\n canvas,\n originalFileName,\n OrginalImage,\n failed = nope,\n suceeded = nope\n) {\n let filename = originalFileName + \"-minimage-\" + downloadCounter + \".png\";\n mergeCanvasAndImage(canvas, OrginalImage, failed, suceeded);\n downloadCanvas(canvas, filename, failed, suceeded);\n\n downloadCounter++;\n}\n\nexport function mergeCanvasAndImage(canvas, img, failed, suceeded) {\n try {\n // Pastes the image as a canvas background\n var ctx = canvas.getContext(\"2d\");\n let oldComposite = ctx.globalCompositeOperation;\n ctx.globalCompositeOperation = \"destination-over\";\n\n // Draw the orignal image\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n\n ctx.globalCompositeOperation = oldComposite;\n suceeded && setTimeout(suceeded);\n return canvas;\n } catch (e) {\n failed && failed(e);\n }\n}\n\nfunction downloadCanvas(canvas, filename, failed, suceeded) {\n try {\n canvas.toBlob(function(blob) {\n try {\n if (window.navigator.msSaveOrOpenBlob) {\n window.navigator.msSaveBlob(blob, filename);\n suceeded && setTimeout(suceeded);\n } else {\n let url = window.URL.createObjectURL(blob);\n let link = document.createElement(\"a\");\n document.body.appendChild(link);\n link.setAttribute(\"href\", url);\n link.setAttribute(\"download\", filename);\n link.click();\n suceeded && setTimeout(suceeded);\n setTimeout(() => {\n window.URL.revokeObjectURL(url);\n document.body.removeChild(link);\n }, 3000);\n }\n } catch (e) {\n failed && failed(e);\n }\n });\n } catch (e) {\n failed && failed(e);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/canvasMergerAndDonwloaderLink.js","\nimport \"./styles.less\";\nimport setupColorPicker from \"./colorPicker.js\";\nimport askForIMG from \"./getAnImage.js\";\nimport toggleAbleBackground from \"./toggleAbleBackground.js\";\nimport setupEditableCanvas from \"./editableCanvas.js\";\nimport { makeDownloadLink } from \"./canvasMergerAndDonwloaderLink.js\";\nimport pencilSizeSlider from \"./pencilSizeSlider.js\";\nimport welcomeAnim from \"./welcomeAnim.js\";\nimport { startTask, endTask } from \"./spinners.js\";\nconst byId = document.getElementById.bind(document);\nimport { detectCtrlS } from \"./detectCtrlS.js\";\n\nimport * as OfflinePluginRuntime from \"offline-plugin/runtime\";\nOfflinePluginRuntime.install();\n\n\nlet originalFileName, OrginalImage;\naskForIMG({\n fileinput: byId(\"fileinput\"),\n onImageCreated: (img, filename) => {\n originalFileName = filename;\n letUserDrawAndDownload(img);\n },\n startTask,\n endTask\n});\n\nlet { stopAnim, bgColor } = welcomeAnim(byId(\"welcome\"), { fitWindow: true });\nbyId(\"fileInputWrapper\").style.color = bgColor;\n\n// Lets the user draw on the loaded image\nfunction letUserDrawAndDownload(img) {\n OrginalImage = img;\n stopAnim();\n const canvas = byId(\"drawzone\"),\n drawzoneWrapper = byId(\"drawzoneWrapper\");\n\n // Switch to drawing mode\n byId(\"inputForAFile\").style.display = \"none\";\n byId(\"drawAndDownload\").style.display = \"\";\n\n console.log(img.width, img.height);\n let maxRes = Math.max(window.innerWidth, window.innerHeight) * 2;\n // Fits the canvas to screen\n let imgScale = Math.max(img.width / maxRes, img.height / maxRes, 1);\n img.width = canvas.width = img.width / imgScale;\n img.height = canvas.height = img.height / imgScale;\n drawzoneWrapper.style.maxWidth = img.width;\n drawzoneWrapper.style.maxHeight = img.height;\n\n // Needs to happen AFTER size measurements\n drawzoneWrapper.appendChild(img);\n\n let ctx = canvas.getContext(\"2d\");\n let hasDoneFirstDraw = false;\n let barClass = byId(\"topbar\").classList;\n\n let background = byId(\"background\");\n\n const {\n setColorDotSize,\n refreshColorPreviewBorder,\n clearColorPicker\n } = setupColorPicker(byId(\"pensizePreview\"), {\n canvasForCursor: canvas,\n onColorChange: setColor,\n elementToContrastWith: background\n });\n\n let {\n drawWithColor,\n drawWithEraser,\n setPencilSize\n } = setupEditableCanvas(canvas, {\n onMouseDown() {\n if (canvas.getClientRects()[0].height + 2 * 80 > window.innerHeight) {\n barClass.add(\"drawInProgress\");\n }\n },\n onMouseUp() {\n if (!hasDoneFirstDraw) {\n hasDoneFirstDraw = true;\n download.classList.add(\"usable\");\n }\n barClass.remove(\"drawInProgress\");\n },\n OrginalImage\n });\n\n // Sets draw color at load and when user clicks color input\n function setColor(color) {\n if (color == \"eraser\") {\n drawWithEraser();\n } else {\n drawWithColor(color);\n }\n }\n // Tap the background to switch its color (usefull for transparent images)\n toggleAbleBackground(background, { onChange: refreshColorPreviewBorder });\n\n pencilSizeSlider(byId(\"pensize\"), {\n onChange(pxSize) {\n setColorDotSize(pxSize);\n setPencilSize(pxSize);\n }\n });\n\n makeDownloadLink(byId(\"download\"), {\n OrginalImage,\n originalFileName,\n canvas\n });\n\n detectCtrlS({\n canvas,\n OrginalImage,\n originalFileName\n });\n\n function clear() {\n clearColorPicker();\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/app.js","const DEFAULTCOLOR = \"#2b76ce\";\nimport { luminance } from \"./colorToRGB.js\";\nimport { paletteColors } from \"./palette.js\";\nimport { createModal } from \"./modal.js\";\nexport default function(\n pensizePreview,\n { onColorChange, elementToContrastWith, canvasForCursor }\n) {\n const pensizePreviewDot = pensizePreview.children[0];\n const pensizePreviewBorder = pensizePreview.children[1];\n\n function refreshColorPreviewBorder() {\n pensizePreviewBorder.style.background = borderColor(\n currentColor,\n elementToContrastWith.style.backgroundColor\n );\n }\n\n let currentColor;\n function openInitializedColorPicker() {\n openColorPicker(currentColor, onColorPicked);\n }\n pensizePreview.addEventListener(\"click\", openInitializedColorPicker);\n let previousColor = localStorage.getItem(\"previousColor\") || \"eraser\";\n\n function onColorPicked(color) {\n console.log(\"onColorPicked\", color);\n if (currentColor && color !== currentColor) {\n // For toggling between last two colors\n previousColor = currentColor;\n }\n\n localStorage.setItem(\"previousColor\", previousColor);\n\n currentColor = color;\n setCursor(canvasForCursor, currentSize, currentColor);\n if (color == \"eraser\") {\n pensizePreviewDot.style.background = \"\";\n pensizePreviewDot.classList.add(\"eraser\");\n } else {\n pensizePreviewDot.classList.remove(\"eraser\");\n pensizePreviewDot.style.background = color;\n refreshColorPreviewBorder();\n }\n localStorage.setItem(\"color\", color);\n onColorChange(color);\n }\n let currentSize;\n // Should be 10\n const baseSize = pensizePreviewDot.getBoundingClientRect().width;\n\n window.addEventListener(\"keydown\", ev => {\n if (String.fromCharCode(ev.which).toLowerCase() === \"x\") {\n console.log(\"x switching to \" + previousColor);\n onColorPicked(previousColor);\n }\n });\n\n function setColorDotSize(pxSize) {\n currentSize = pxSize;\n setCursor(canvasForCursor, currentSize, currentColor);\n pensizePreviewDot.style.transform = \"scale(\" + pxSize / baseSize + \")\";\n pensizePreviewBorder.style.transform =\n \"scale(\" + (pxSize / baseSize + 1 / baseSize) + \")\";\n }\n\n setTimeout(() =>\n onColorPicked(localStorage.getItem(\"color\") || DEFAULTCOLOR)\n );\n\n return {\n clearColorPicker() {\n pensizePreview.removeEventListener(\"click\", openInitializedColorPicker);\n },\n setColorDotSize,\n refreshColorPreviewBorder\n };\n}\n\nfunction borderColor(foreground, background) {\n if (foreground == \"eraser\") return \"transparent\";\n let bgL = luminance(background);\n let fgL = luminance(foreground);\n if (bgL > 125 && fgL > 200) return \"black\";\n if (bgL < 125 && fgL < 25) return \"white\";\n return \"transparent\";\n}\n\nfunction textColor(background) {\n return luminance(background) > 255 / 2\n ? \"rgba(0,0,0,0.8)\"\n : \"rgba(255,255,255,0.8)\";\n}\n\nfunction openColorPicker(currentColor, callback) {\n createModal(\"color-modal\", ({ modal, closeModal }) => {\n function pickColor(color) {\n closeModal();\n callback(color);\n }\n\n paletteColors.forEach(color => {\n let button = document.createElement(\"button\");\n button.classList.add(\"colorbutton\");\n if (color === currentColor) {\n button.classList.add(\"active\");\n button.innerHTML = \"Selected\";\n button.style.color = textColor(color);\n }\n button.style.backgroundColor = color.toLowerCase();\n button.addEventListener(\"click\", () => pickColor(color));\n modal.appendChild(button);\n });\n\n let eraser = document.createElement(\"button\");\n eraser.classList.add(\"eraser\");\n eraser.addEventListener(\"click\", () => pickColor(\"eraser\"));\n eraser.innerHTML =\n '' +\n (\"eraser\" === currentColor ? \"Eraser selected\" : \"Eraser\") +\n \"\";\n modal.appendChild(eraser);\n });\n}\n\nfunction setCursor(node, size, color) {\n let s = size < 4 ? 4 : size;\n let c = document.createElement(\"canvas\");\n c.width = c.height = s;\n let ctx = c.getContext(\"2d\");\n\n if (color == \"eraser\") drawEraser(ctx, s);\n else drawColorCircle(ctx, s, color);\n let cursor = c.toDataURL(\"image/png\");\n node.style.cursor = `url(${cursor}) ${s / 2} ${s / 2},auto`;\n}\n\nfunction drawColorCircle(ctx, s, color) {\n ctx.beginPath();\n ctx.arc(s / 2, s / 2, s / 2, 0, 2 * Math.PI, false);\n ctx.fillStyle = color;\n ctx.fill();\n}\n\nfunction drawEraser(ctx, s) {\n ctx.fillStyle = \"#da502d\";\n ctx.fillRect(0, 0, s * 2 / 3, s);\n ctx.fillStyle = \"#6584a5\";\n ctx.fillRect(s * 2 / 3 - 1, 0, s, s);\n ctx.globalCompositeOperation = \"destination-in\";\n drawColorCircle(ctx, s, \"white\");\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/colorPicker.js","export function colorToRGB(color) {\n var canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = 1;\n var ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, 1, 1);\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, 1, 1);\n return [...ctx.getImageData(0, 0, 1, 1).data].slice(0, 3);\n}\n\nexport function luminance(color) {\n return colorToRGB(color).reduce((a, b) => a + b, 0) / 3;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/colorToRGB.js","export const paletteColors = \"#000000,#FFFFFF,#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722,#795548,#9E9E9E,#607D8B\".split(\n \",\"\n);\n\n\n\n// WEBPACK FOOTER //\n// ./src/palette.js","let modalZindex = 4;\nexport function createModal(className, callback) {\n let modal = document.createElement(\"div\");\n modal.classList.add(\"modal\");\n modal.classList.add(className);\n document.body.appendChild(modal);\n\n let backdrop = document.createElement(\"div\");\n backdrop.classList.add(\"modal-backdrop\");\n document.body.appendChild(backdrop);\n\n backdrop.style.zIndex = modalZindex;\n modal.style.zIndex = modalZindex + 1;\n backdrop.addEventListener(\"click\", closeModal);\n document.addEventListener(\"keyup\", closeOnEscape);\n function closeOnEscape(ev) {\n if (\n ev.which == 27 // escape key\n )\n closeModal();\n }\n function closeModal() {\n modal.classList.add(\"closing\");\n backdrop.classList.add(\"closing\");\n setTimeout(() => {\n document.body.removeChild(modal);\n document.body.removeChild(backdrop);\n }, 300);\n document.removeEventListener(\"keyup\", closeOnEscape);\n }\n modalZindex += 2;\n return callback({ modal, closeModal });\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/modal.js","export default function({\n onImageCreated,\n fileinput,\n startTask = () => null,\n endTask = () => null\n}) {\n // Callbacks onImageCreated with img tag and filename\n let originalFileName = \"pasted-image\";\n let askingForImage = true;\n\n // Transforms the file input content to a real image\n function loadFile(fileToLoad) {\n startTask();\n let fileReader = new FileReader();\n fileReader.onload = () => {\n createImageWithFileContent(fileReader.result);\n endTask();\n };\n fileReader.onerror = endTask;\n fileReader.readAsDataURL(fileToLoad);\n }\n\n function createImageWithFileContent(result) {\n startTask();\n if (!askingForImage) return;\n let img = new Image();\n img.onload = () => {\n askingForImage = false;\n onImageCreated(img, originalFileName);\n endTask();\n };\n img.onerror = endTask;\n img.src = result;\n }\n\n // Setup of the welcome UI\n function askForImage() {\n fileinput && fileinput.addEventListener(\"change\", fileChanged);\n function fileChanged(changeEvent) {\n fileinput.removeEventListener(\"change\", fileChanged);\n originalFileName =\n fileinput.value.split(\"\\\\\").pop().split(\".\")[0] || \"image\";\n loadFile(changeEvent.target.files[0]);\n }\n }\n\n askForImage();\n\n window.addEventListener(\"paste\", function(ev) {\n handleDataTransferItems(ev.clipboardData.items);\n });\n\n document.body.addEventListener(\"dragover\", function(ev) {\n ev.preventDefault();\n ev.stopPropagation();\n });\n document.body.addEventListener(\"drop\", function(ev) {\n ev.preventDefault();\n ev.stopPropagation();\n handleDataTransferItems(ev.dataTransfer.items);\n });\n\n function handleDataTransferItems(items) {\n // Tries to paste an image\n let imageFile = Array.prototype.find.call(\n items,\n e => e.kind == \"file\" && e.type.match(\"image\")\n );\n originalFileName = \"pasted-image\";\n if (imageFile) {\n loadFile(imageFile.getAsFile());\n return;\n }\n // Tries to load a remote image given its adress\n let url = Array.prototype.find.call(items, e => e.kind == \"string\");\n if (url) {\n url.getAsString(s => createImageWithFileContent(s));\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/getAnImage.js","export default function(background, { onChange }) {\n function switchBackground() {\n currentMode++;\n localStorage.setItem(\"background\", currentMode);\n applyBackground();\n }\n let switchCount = 0;\n function applyBackground() {\n let options = [\"#DDD\", \"#333\"];\n let current = currentMode % options.length;\n background.style.backgroundColor = options[current];\n // let meta = document.getElementById(\"theme-color\");\n // meta && meta.setAttribute(\"content\", \"#fff\");\n onChange(current);\n\n let bclass = document.body.classList;\n options.forEach((color, index) => bclass.remove(\"background_n_\" + index));\n bclass.add(\"background_n_\" + current);\n // https://www.youtube.com/watch?v=Pr8ETbGz35Q\n if (switchCount < 8) {\n console.log(current == 0 ? \"jour !\" : \"nuit !\");\n switchCount++;\n } else {\n console.log(\n \"Monsieur Jacquouille, je vous en prie, à la longue, ça devient casse-pied !\"\n );\n }\n }\n let currentMode = localStorage.getItem(\"background\") || 0;\n applyBackground();\n background.addEventListener(\"click\", switchBackground);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/toggleAbleBackground.js","import { mergeCanvasAndImage } from \"./canvasMergerAndDonwloaderLink.js\";\n\nexport default function(canvas, { onMouseDown, onMouseUp, OrginalImage }) {\n // We cache some zoom related data to avoid getting them all the time\n let scale, rect, lastUsedPXsize;\n\n function measureScale() {\n rect = canvas.getBoundingClientRect();\n scale = rect.width / canvas.width;\n if (lastUsedPXsize && ctx) {\n ctx.lineWidth = lastUsedPXsize / scale;\n }\n }\n measureScale();\n\n window.addEventListener(\"resize\", measureScale);\n\n let ctx = canvas.getContext(\"2d\");\n\n // To make the lines look slightly nicer\n ctx.lineCap = \"round\";\n\n // We cache the mouse position and previous mouse position.\n // Theay are defined by touch events, and used by the draw loop\n let mousePos = {\n x: 0,\n y: 0\n },\n lastPos = mousePos;\n\n canvas.addEventListener(\n \"mousedown\",\n function(e) {\n if (e.which == 3) {\n // We detected a right click on canvas, probably to save it.\n // We merge the content of the background image with the canvas\n mergeCanvasAndImage(canvas, OrginalImage);\n return;\n }\n mousePos = lastPos = getMousePos(e);\n startDrawLoop();\n onMouseDown();\n },\n false\n );\n\n // Allow ctrl-c > pasting to word & co\n document.addEventListener(\"copy\", ev => {\n ev.preventDefault();\n mergeCanvasAndImage(canvas, OrginalImage);\n ev.clipboardData.setData(\n \"text/html\",\n ''\n );\n });\n\n document.addEventListener(\"mouseup\", endDrawLoop, false);\n\n canvas.addEventListener(\n \"mousemove\",\n function(e) {\n mousePos = getMousePos(e);\n },\n false\n );\n\n // Get the position of the mouse relative to the canvas\n function getMousePos(mouseEvent) {\n return {\n x: (mouseEvent.clientX - rect.left) / scale,\n y: (mouseEvent.clientY - rect.top) / scale\n };\n }\n\n // Drawing loop is separated from the events\n\n let isDrawing = false;\n\n function startDrawLoop() {\n if (isDrawing) return;\n isDrawing = true;\n ctx.beginPath();\n drawLoop();\n }\n function endDrawLoop() {\n isDrawing && onMouseUp();\n isDrawing = false;\n }\n\n function drawLoop() {\n if (isDrawing) {\n window.requestAnimationFrame(drawLoop);\n renderCanvas();\n }\n }\n function renderCanvas() {\n ctx.moveTo(lastPos.x, lastPos.y);\n ctx.lineTo(mousePos.x, mousePos.y);\n ctx.stroke();\n lastPos = mousePos;\n }\n\n // Proxy mobile events to their mouse counterpart\n function proxyTouchToMouse(\n touchEventName,\n mouseEventName,\n eventTarget = canvas\n ) {\n canvas.addEventListener(\n touchEventName,\n function(e) {\n e.preventDefault();\n let { clientX, clientY } = e.touches[0] || {};\n let mouseEvent = new MouseEvent(mouseEventName, {\n clientX,\n clientY\n });\n eventTarget.dispatchEvent(mouseEvent);\n },\n false\n );\n }\n proxyTouchToMouse(\"touchstart\", \"mousedown\");\n proxyTouchToMouse(\"touchend\", \"mouseup\", document);\n proxyTouchToMouse(\"touchmove\", \"mousemove\");\n\n return {\n drawWithEraser() {\n ctx.globalCompositeOperation = \"destination-out\";\n },\n drawWithColor(color) {\n ctx.globalCompositeOperation = \"source-over\";\n ctx.strokeStyle = color;\n },\n setPencilSize(pxSize) {\n lastUsedPXsize = pxSize;\n ctx.lineWidth = pxSize / scale;\n }\n };\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/editableCanvas.js","const DEFAULTSIZE = 20;\nexport default function(slider, { onChange }) {\n // Sets draw size at load and style when the user interracts with the slider\n function onPencilSizeChange(pxSize) {\n slider.value = pxSize;\n localStorage.setItem(\"pensize\", pxSize);\n onChange(pxSize);\n }\n slider.addEventListener(\"input\", e => onPencilSizeChange(e.target.value));\n onPencilSizeChange(parseInt(localStorage.getItem(\"pensize\")) || DEFAULTSIZE);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/pencilSizeSlider.js","const coolColors = \"#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722\".split(\n \",\"\n);\n\n//import { luminance } from \"./colorToRGB.js\";\n// const darkCoolColors = coolColors.filter(c => luminance(c) < 150);\n\nfunction randomColor(colorPool, exception = \"\") {\n let withoutEx = colorPool.filter(c => c != exception);\n return withoutEx[Math.floor(Math.random() * withoutEx.length)];\n}\n\nexport default function(canvas, { fitWindow }) {\n let ctx, w, h;\n let bgColor = \"#F44336\"; //randomColor(darkCoolColors);\n function reset() {\n if (fitWindow) {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n }\n w = canvas.width;\n h = canvas.height;\n ctx = canvas.getContext(\"2d\");\n ctx.fillStyle = bgColor;\n ctx.fillRect(0, 0, w, h);\n ctx.lineCap = \"round\";\n randomizeInst();\n }\n\n let position, speed, acceleration, timeoutHandle, accelerationTimeoutHandle;\n function randomizeInst() {\n position = {\n // x: Math.random() * w,\n // y: Math.random() * h\n x: w / 2,\n y: h / 2\n };\n speed = {\n x: Math.random() * 10 - 5,\n y: Math.random() * 10 - 5\n };\n acceleration = {\n x: Math.random() * 10 - 5,\n y: Math.random() * 10 - 5\n };\n\n ctx.strokeStyle = randomColor(coolColors, bgColor);\n ctx.lineWidth = 20 + Math.random() * 40;\n ctx.beginPath();\n ctx.moveTo(position.x, position.y);\n }\n\n reset();\n window.addEventListener(\"resize\", reset);\n\n function randomAcceletation() {\n acceleration = {\n x: Math.random() * 2 - 1,\n y: Math.random() * 2 - 1\n };\n // speed.x*=0.2;\n // speed.y*=0.2;\n\n accelerationTimeoutHandle = setTimeout(\n randomAcceletation,\n 100 + Math.random() * 200\n );\n }\n randomAcceletation();\n function renderCanvas() {\n ctx.moveTo(position.x, position.y);\n speed.x *= 0.95;\n speed.y *= 0.95;\n\n speed.x += acceleration.x;\n speed.y += acceleration.y;\n position.x += speed.x;\n position.y += speed.y;\n ctx.lineTo(position.x, position.y);\n ctx.stroke();\n if (\n position.x < -50 ||\n position.x > w + 50 ||\n position.y < -50 ||\n position.y > h + 50\n )\n randomizeInst();\n }\n\n let isDrawing = true;\n function drawLoop() {\n if (isDrawing) {\n window.requestAnimationFrame(drawLoop);\n renderCanvas();\n }\n }\n\n drawLoop();\n\n function stopAnim() {\n isDrawing = false;\n clearTimeout(accelerationTimeoutHandle);\n window.removeEventListener(\"resize\", reset);\n }\n\n return {\n stopAnim,\n bgColor\n };\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/welcomeAnim.js","let tasksInProgress = 0;\nexport function startTask() {\n tasksInProgress++;\n updateLook();\n}\n\nexport function endTask() {\n tasksInProgress--;\n setTimeout(updateLook);\n}\n\nexport function updateLook() {\n spinners.classList[tasksInProgress ? \"remove\" : \"add\"](\"hidden\");\n}\ndocument.addEventListener(\"DOMContentLoaded\", updateLook);\n\n\n\n// WEBPACK FOOTER //\n// ./src/spinners.js","import { triggerDownload } from \"./canvasMergerAndDonwloaderLink.js\";\nexport function detectCtrlS({ canvas, OrginalImage, originalFileName }) {\n window.addEventListener(\"keydown\", event => {\n if (event.ctrlKey || event.metaKey) {\n if (String.fromCharCode(event.which).toLowerCase() === \"s\") {\n event.preventDefault();\n triggerDownload(canvas, originalFileName, OrginalImage);\n }\n }\n });\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/detectCtrlS.js","var appCacheIframe;\n\nfunction hasSW() {\n return 'serviceWorker' in navigator &&\n // This is how I block Chrome 40 and detect Chrome 41, because first has\n // bugs with history.pustState and/or hashchange\n (window.fetch || 'imageRendering' in document.documentElement.style) &&\n (window.location.protocol === 'https:' || window.location.hostname === 'localhost' || window.location.hostname.indexOf('127.') === 0)\n}\n\nfunction install(options) {\n options || (options = {});\n\n \n if (hasSW()) {\n var registration = navigator.serviceWorker\n .register(\n \"dist/sw.js\"\n \n );\n\n \n\n return;\n }\n \n\n \n if (window.applicationCache) {\n var directory = \"dist/appcache/\";\n var name = \"manifest\";\n\n var doLoad = function() {\n var page = directory + name + '.html';\n var iframe = document.createElement('iframe');\n\n \n\n iframe.src = page;\n iframe.style.display = 'none';\n\n appCacheIframe = iframe;\n document.body.appendChild(iframe);\n };\n\n if (document.readyState === 'complete') {\n setTimeout(doLoad);\n } else {\n window.addEventListener('load', doLoad);\n }\n\n return;\n }\n \n}\n\nfunction applyUpdate(callback, errback) {\n \n\n \n}\n\nfunction update() {\n \n if (hasSW()) {\n navigator.serviceWorker.getRegistration().then(function(registration) {\n if (!registration) return;\n return registration.update();\n });\n }\n \n\n \n if (appCacheIframe) {\n try {\n appCacheIframe.contentWindow.applicationCache.update();\n } catch (e) {}\n }\n \n}\n\n\n\nexports.install = install;\nexports.applyUpdate = applyUpdate;\nexports.update = update;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/offline-plugin/runtime.js\n// module id = 15\n// module chunks = 0"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/f585fe2054b88eb6d1e59cdeda7bb5da.svg b/dist/f585fe2054b88eb6d1e59cdeda7bb5da.svg new file mode 100644 index 0000000..1cbc1d5 --- /dev/null +++ b/dist/f585fe2054b88eb6d1e59cdeda7bb5da.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/sw.js b/dist/sw.js index 37ed786..6d03b88 100644 --- a/dist/sw.js +++ b/dist/sw.js @@ -1,3 +1,3 @@ -var __wpo = {"assets":{"main":["./dist/bundle.f1584b69f9c93e44e8a8.js","./dist/bundle.f1584b69f9c93e44e8a8.css","./dist/../"],"additional":[],"optional":[]},"externals":[],"hashesMap":{"efd3da896f9167ce800c817642b912f12c8a11cf":"./dist/bundle.f1584b69f9c93e44e8a8.js","209c720cd9cd4814796217da9c1dce46dbdf0483":"./dist/bundle.f1584b69f9c93e44e8a8.css","45124bf2e38d2d66acae5b60765d491c6589760f":"./dist/../"},"strategy":"changed","responseStrategy":"network-first","version":"9/10/2018, 8:41:44 PM","name":"webpack-offline","pluginVersion":"4.8.3","relativePaths":false}; +var __wpo = {"assets":{"main":["./dist/f585fe2054b88eb6d1e59cdeda7bb5da.svg","./dist/bundle.f181a7f28dc473f6f66c.js","./dist/bundle.f181a7f28dc473f6f66c.css","./dist/../"],"additional":[],"optional":[]},"externals":[],"hashesMap":{"19efb82d39b38e393352d40a7eea3ab3eb1a8c15":"./dist/f585fe2054b88eb6d1e59cdeda7bb5da.svg","10d81cb08502433bc4607faaf1f40d2732d3eb5a":"./dist/bundle.f181a7f28dc473f6f66c.js","c29e3c0b9ebeae9a7523fa73af627e1a8858d48e":"./dist/bundle.f181a7f28dc473f6f66c.css","b80af1d76d2ff5a153bc1d9e14edd0a9e29e274c":"./dist/../"},"strategy":"changed","responseStrategy":"network-first","version":"9/10/2018, 8:53:42 PM","name":"webpack-offline","pluginVersion":"4.9.1","relativePaths":false}; -!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="./dist/",n(n.s=0)}([function(e,n,t){"use strict";function r(e,n){return caches.match(e,{cacheName:n}).then(function(t){return a()?t:c(t).then(function(t){return caches.open(n).then(function(n){return n.put(e,t)}).then(function(){return t})})}).catch(function(){})}function o(e,n){return e+(-1!==e.indexOf("?")?"&":"?")+"__uncache="+encodeURIComponent(n)}function i(e){return"navigate"===e.mode||e.headers.get("Upgrade-Insecure-Requests")||-1!==(e.headers.get("Accept")||"").indexOf("text/html")}function a(e){return!e||!e.redirected||!e.ok||"opaqueredirect"===e.type}function c(e){return a(e)?Promise.resolve(e):("body"in e?Promise.resolve(e.body):e.blob()).then(function(n){return new Response(n,{headers:e.headers,status:e.status})})}function s(e){return Object.keys(e).reduce(function(n,t){return n[t]=e[t],n},{})}function u(e,n){console.groupCollapsed("[SW]:",e),n.forEach(function(e){console.log("Asset:",e)}),console.groupEnd()}if(function(){var e=ExtendableEvent.prototype.waitUntil,n=FetchEvent.prototype.respondWith,t=new WeakMap;ExtendableEvent.prototype.waitUntil=function(n){var r=this,o=t.get(r);return o?void o.push(Promise.resolve(n)):(o=[Promise.resolve(n)],t.set(r,o),e.call(r,Promise.resolve().then(function e(){var n=o.length;return Promise.all(o.map(function(e){return e.catch(function(){})})).then(function(){return o.length!=n?e():(t.delete(r),Promise.all(o))})})))},FetchEvent.prototype.respondWith=function(e){return this.waitUntil(e),n.call(this,e)}}(),void 0===f)var f=!1;!function(e,n){function t(){if(!R.additional.length)return Promise.resolve();f&&console.log("[SW]:","Caching additional");var e=void 0;return e="changed"===b?l("additional"):a("additional"),e.catch(function(e){console.error("[SW]:","Cache section `additional` failed to load")})}function a(n){var t=R[n];return caches.open(E).then(function(n){return w(n,t,{bust:e.version,request:e.prefetchRequest})}).then(function(){u("Cached assets: "+n,t)}).catch(function(e){throw console.error(e),e})}function l(n){return d().then(function(t){if(!t)return a(n);var r=t[0],o=t[1],i=t[2],c=i.hashmap,s=i.version;if(!i.hashmap||s===e.version)return a(n);var f=Object.keys(c).map(function(e){return c[e]}),l=o.map(function(e){var n=new URL(e.url);return n.search="",n.hash="",n.toString()}),h=R[n],d=[],p=h.filter(function(e){return-1===l.indexOf(e)||-1===f.indexOf(e)});Object.keys(W).forEach(function(e){var n=W[e];if(-1!==h.indexOf(n)&&-1===p.indexOf(n)&&-1===d.indexOf(n)){var t=c[e];t&&-1!==l.indexOf(t)?d.push([t,n]):p.push(n)}}),u("Changed assets: "+n,p),u("Moved assets: "+n,d);var v=Promise.all(d.map(function(e){return r.match(e[0]).then(function(n){return[e[1],n]})}));return caches.open(E).then(function(n){var t=v.then(function(e){return Promise.all(e.map(function(e){return n.put(e[0],e[1])}))});return Promise.all([t,w(n,p,{bust:e.version,request:e.prefetchRequest})])})})}function h(){return caches.keys().then(function(e){var n=e.map(function(e){if(0===e.indexOf(P)&&0!==e.indexOf(E))return console.log("[SW]:","Delete cache:",e),caches.delete(e)});return Promise.all(n)})}function d(){return caches.keys().then(function(e){for(var n=e.length,t=void 0;n--&&(t=e[n],0!==t.indexOf(P)););if(t){var r=void 0;return caches.open(t).then(function(e){return r=e,e.match(new URL(j,location).toString())}).then(function(e){if(e)return Promise.all([r,r.keys(),e.json()])})}})}function p(){return caches.open(E).then(function(n){var t=new Response(JSON.stringify({version:e.version,hashmap:W}));return n.put(new URL(j,location).toString(),t)})}function v(e,n,t){return r(t,E).then(function(r){return r?(f&&console.log("[SW]:","URL ["+t+"]("+n+") from cache"),r):fetch(e.request).then(function(r){return r.ok?(f&&console.log("[SW]:","URL ["+n+"] from network"),t===n&&function(){var t=r.clone(),o=caches.open(E).then(function(e){return e.put(n,t)}).then(function(){console.log("[SW]:","Cache asset: "+n)});e.waitUntil(o)}(),r):(f&&console.log("[SW]:","URL ["+n+"] wrong response: ["+r.status+"] "+r.type),r)})})}function g(e,n,t){return fetch(e.request).then(function(e){if(e.ok)return f&&console.log("[SW]:","URL ["+n+"] from network"),e;throw new Error("Response is not ok")}).catch(function(){return f&&console.log("[SW]:","URL ["+n+"] from cache if possible"),r(t,E)})}function m(e){return e.catch(function(){}).then(function(e){var n=e&&e.ok,t=e&&"opaqueredirect"===e.type;return n||t&&!F?e:(f&&console.log("[SW]:","Loading navigation fallback ["+C+"] from cache"),r(C,E))})}function w(e,n,t){var r=!1!==t.allowLoaders,i=t&&t.bust,a=t.request||{credentials:"omit",mode:"cors"};return Promise.all(n.map(function(e){return i&&(e=o(e,i)),fetch(e,a).then(c)})).then(function(o){if(o.some(function(e){return!e.ok}))return Promise.reject(new Error("Wrong response status"));var i=[],a=o.map(function(t,o){return r&&i.push(y(n[o],t)),e.put(n[o],t)});return i.length?function(){var r=s(t);r.allowLoaders=!1;var o=a;a=Promise.all(i).then(function(t){var i=[].concat.apply([],t);return n.length&&(o=o.concat(w(e,i,r))),Promise.all(o)})}():a=Promise.all(a),a})}function y(e,n){var t=Object.keys(U).map(function(t){if(-1!==U[t].indexOf(e)&&O[t])return O[t](n.clone())}).filter(function(e){return!!e});return Promise.all(t).then(function(e){return[].concat.apply([],e)})}function x(e){var n=e.url,t=new URL(n),r=void 0;r="navigate"===e.mode?"navigate":t.origin===location.origin?"same-origin":"cross-origin";for(var o=0;o Minimage : minimal image editor
\ No newline at end of file + Minimage : minimal image editor
\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 49aa769..20697b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,6 +48,12 @@ "json-stable-stringify": "^1.0.1" } }, + "ajv-errors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.0.tgz", + "integrity": "sha1-7PAh+hCP0X37Xms4Py3SM+Mf/Fk=", + "dev": true + }, "ajv-keywords": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz", @@ -3556,6 +3562,53 @@ "websocket-driver": ">=0.5.1" } }, + "file-loader": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz", + "integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==", + "dev": true, + "requires": { + "loader-utils": "^1.0.2", + "schema-utils": "^1.0.0" + }, + "dependencies": { + "ajv": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz", + "integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==", + "dev": true, + "requires": { + "fast-deep-equal": "^2.0.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "fast-deep-equal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", + "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", + "dev": true + }, + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "schema-utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", + "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", + "dev": true, + "requires": { + "ajv": "^6.1.0", + "ajv-errors": "^1.0.0", + "ajv-keywords": "^3.1.0" + } + } + } + }, "filename-regex": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz", diff --git a/package.json b/package.json index d4d520b..4cef899 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "babili": "^0.1.4", "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^3.0.2", + "file-loader": "^2.0.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^2.30.1", "less": "^2.7.3", diff --git a/webpack.config.js b/webpack.config.js index ea585ba..4c6f24a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -74,6 +74,15 @@ module.exports = { use: { loader: "html-loader" } + }, + { + test: /\.(png|jpg|gif|svg)$/, + use: [ + { + loader: 'file-loader', + options: {} + } + ] } ] },