text: (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{15:function(e,t,a){},17:function(e,t,a){},19:function(e,t,a){"use strict";a.r(t);var n=a(0),l=a.n(n),r=a(2),c=a.n(r),o=(a(15),a(3)),s=a(4),i=a(6),m=a(5),u=a(7),d=(a(17),a(8)),h=function(e){function t(){var e;return Object(o.a)(this,t),(e=Object(i.a)(this,Object(m.a)(t).call(this))).state={files:[],data:[]},document.documentElement.ondragenter=function(e){return e.preventDefault()},document.documentElement.ondragover=function(e){return e.preventDefault()},document.documentElement.ondrop=function(t){t.preventDefault(),e.update(t.dataTransfer.files)},e}return Object(u.a)(t,e),Object(s.a)(t,[{key:"handleUploads",value:function(e){this.update(e.target.files)}},{key:"update",value:function(e){var t=Array.from(e);if(t){var a=this.state.files.concat(t);this.setState({files:a}),this.process(a)}}},{key:"process",value:function(e){var t=this,a=this.state.data.slice();e.forEach(function(e,n){if(!a[n]){var l=new Image;l.onload=function(){a[n]={image:l},t.setState({data:a}),setTimeout(function(){var e,r=(e=l,Object(d.a)(e,!0));a[n]={image:l,css:r.css,palettes:r.palettes,pretty:r.pretty},t.setState({data:a})},100)},l.src=window.URL.createObjectURL(e)}})}},{key:"render",value:function(){return l.a.createElement("div",{className:"App"},l.a.createElement("div",{className:"App-header"},l.a.createElement("h1",null,"Gradient Image Placeholder Generator"),l.a.createElement("p",null,"Upload or drop a photo or a few and get some background CSS to use as a placeholder")),l.a.createElement("div",{className:"Tool-in"},l.a.createElement(p,{onChange:this.handleUploads.bind(this)})),l.a.createElement("div",{className:"Tool-out"},l.a.createElement(f,{files:this.state.files,data:this.state.data})),l.a.createElement("div",{className:"App-footer"},l.a.createElement("p",null,"Built by ",l.a.createElement("a",{href:"https://twitter.com/stoyanstefanov"},"Stoyan"),". The ",l.a.createElement("a",{href:"http://calendar.perfplanet.com/2018/gradient-image-placeholders/"},"how, why, etc.")," blog post. The ",l.a.createElement("a",{href:"https://github.com/stoyan/cssgip-web"},"code is here"),"."),l.a.createElement("p",null,"Hosting by ",l.a.createElement("a",{href:"https://www.dreamhost.com/r.cgi?447675"},"Dreamhost"),", domain name by ",l.a.createElement("a",{href:"https://www.namecheap.com/?aff=107836"},"Namecheap"),". Bye-bye now, take care then!")))}}]),t}(n.Component),p=function(e){var t=e.onChange;return l.a.createElement("div",null,l.a.createElement("label",{htmlFor:"files",className:"Uploads-select",role:"button"},"Select files..."),l.a.createElement("input",{type:"file",id:"files",multiple:!0,accept:"image/*",style:{display:"none"},onChange:t}))},f=function(e){var t=e.files,a=e.data;return 0===t.length?l.a.createElement("span",null):l.a.createElement("table",{className:"Results-table"},l.a.createElement("tbody",null,l.a.createElement("tr",null,l.a.createElement("th",{width:"30%"},"result"),l.a.createElement("th",{width:"20%"},"code"),l.a.createElement("th",{width:"50%"},"palette")),t.map(function(e,t){return e.type.startsWith("image/")?l.a.createElement("tr",{key:t},l.a.createElement("td",{style:{verticalAlign:"top"}},a[t]?a[t].css?l.a.createElement("div",{style:{background:a[t].css[1],display:"inline-block"}},l.a.createElement("img",{src:a[t].image.src,alt:t,style:{height:"auto",opacity:0,cursor:"pointer",float:"left"},width:a[t].image.naturalWidth,height:a[t].image.naturalHeight,onClick:function(e){e.target.style.opacity="0"===e.target.style.opacity?1:0}})):a[t].image?l.a.createElement("img",{alt:t,src:a[t].image.src}):"munch, munch...":"crunch, crunch..."),l.a.createElement("td",{style:{verticalAlign:"top"}},l.a.createElement("pre",{style:{textAlign:"left"}},a[t]&&a[t].css?"background: "+a[t].css[0]+";\nbackground: "+a[t].pretty:"crunching...")),l.a.createElement("td",{style:{verticalAlign:"top"}},a[t]&&a[t].palettes?Object.keys(a[t].palettes).map(function(e,n){return l.a.createElement("table",{style:{float:"left"},key:n},l.a.createElement("thead",null,l.a.createElement("tr",null,l.a.createElement("th",null,e))),l.a.createElement("tbody",null,a[t].palettes[e].map(function(e,t){return l.a.createElement("tr",{key:t},l.a.createElement("td",{style:{background:e,border:0}},l.a.createElement("code",null,e)))})))}):null)):null})))};var E=h;Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));c.a.render(l.a.createElement(E,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then(function(e){e.unregister()})},9:function(e,t,a){e.exports=a(19)}},[[9,2,1]]]);
  //# sourceMappingURL=main.0460aa44.chunk.js.map