/**
 * Copyright 2015 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* eslint-env browser */

if (
	'serviceWorker' in navigator &&
	document.cookie.indexOf('wmdebug') === -1 &&
	location.href.indexOf('chrome-extension://') === -1 &&
	location.href.indexOf('localhost') === -1 &&
	location.href.indexOf('192.168') === -1
) {
	// Delay registration until after the page has loaded, to ensure that our
	// precaching requests don't degrade the first visit experience.
	// See https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/registration
	window.addEventListener('load', function() {
		// Your service-worker.js *must* be located at the top-level directory relative to your site.
		// It won't be able to control pages unless it's located at the same level or higher than them.
		// *Don't* register service worker file in, e.g., a scripts/ sub-directory!
		// See https://github.com/slightlyoff/ServiceWorker/issues/468
		navigator.serviceWorker
			.register('service-worker.js')
			.then(function(reg) {
				// updatefound is fired if service-worker.js changes.
				reg.onupdatefound = function() {
					// The updatefound event implies that reg.installing is set; see
					// https://w3c.github.io/ServiceWorker/#service-worker-registration-updatefound-event
					var installingWorker = reg.installing;

					installingWorker.onstatechange = function() {
						/* eslint-disable default-case */
						switch (installingWorker.state) {
							case 'installed':
								if (navigator.serviceWorker.controller) {
									// At this point, the old content will have been purged and the fresh content will
									// have been added to the cache.
									// It's the perfect time to display a "New content is available; please refresh."
									// message in the page's interface.
									console.log('New or updated content is available.');
								} else {
									// At this point, everything has been precached.
									// It's the perfect time to display a "Content is cached for offline use." message.
									console.log('Content is now available offline!');
									if (window.alertsService) {
										window.alertsService.add(
											'Web Maker is now ready to be used offline.'
										);
									}
								}
								break;

							case 'redundant':
								console.error(
									'The installing service worker became redundant.'
								);
								break;
						}
					};
				};
			})
			.catch(function(e) {
				console.error('Error during service worker registration:', e);
			});
	});
}

webpackJsonp([0],{JkW7:function(e,t,n){"use strict";function o(){var e={},t=new Promise(function(t,n){e.resolve=t,e.reject=n});return e.promise=t,V(e,t)}function s(e,t){var n=o();return t===P.HTML?n.resolve({code:e}):t===P.MARKDOWN?n.resolve(window.marked?{code:marked(e)}:{code:e}):t===P.JADE&&n.resolve(window.jade?{code:jade.render(e)}:{code:e}),n.promise}function i(e,t,n){var s,i=o();if(t===D.CSS)i.resolve({code:e});else if(t===D.SCSS||t===D.SASS)window.sass&&e?window.sass.compile(e,{indentedSyntax:t===D.SASS},function(e){e.line&&e.message&&(s={lang:"css",data:[{lineNumber:e.line-1,message:e.message}]}),i.resolve({code:e.text,errors:s})}):i.resolve({code:e});else if(t===D.LESS)less.render(e).then(function(e){i.resolve({code:e.css})},function(e){s={lang:"css",data:[{lineNumber:e.line,message:e.message}]},i.resolve({code:"",errors:s})});else if(t===D.STYLUS)stylus(e).render(function(e,t){if(e){window.err=e;var n=e.message.split("\n");n.pop(),s={lang:"css",data:[{lineNumber:+e.message.match(/stylus:(\d+):/)[1]-298,message:n.pop()}]}}i.resolve({code:t,errors:s})});else if(t===D.ACSS)if(!window.atomizer)i.resolve({code:""});else{const t=atomizer.findClassNames(e);var a;try{a=atomizer.getConfig(t,JSON.parse(n.acssConfig))}catch(n){a=atomizer.getConfig(t,{})}const o=atomizer.getCss(a);i.resolve({code:o})}return i.promise}function a(e,t,n,s){var i,a=o();if(!e)return a.resolve(""),a.promise;if(t===F.JS)try{W.parse(e,{tolerant:!0})}catch(t){i={lang:"js",data:[{lineNumber:t.lineNumber-1,message:t.description}]}}finally{!1!==n&&(e=i?e:h(e,{timeout:s})),a.resolve({code:e,errors:i})}else if(t===F.COFFEESCRIPT){if(!window.CoffeeScript)return a.resolve(""),a.promise;try{e=CoffeeScript.compile(e,{bare:!0})}catch(t){i={lang:"js",data:[{lineNumber:t.location.first_line,message:t.message}]}}finally{!1!==n&&(e=i?e:h(e,{timeout:s})),a.resolve({code:e,errors:i})}}else if(t===F.ES6){if(!window.Babel)return a.resolve(""),a.promise;try{W.parse(e,{tolerant:!0,jsx:!0})}catch(t){i={lang:"js",data:[{lineNumber:t.lineNumber-1,message:t.description}]}}finally{e=Babel.transform(e,{presets:["latest","stage-2","react"]}).code,!1!==n&&(e=i?e:h(e,{timeout:s})),a.resolve({code:e,errors:i})}}else if(t===F.TS)try{if(!window.ts)return a.resolve({code:""}),a.promise;e=ts.transpileModule(e,{reportDiagnostics:!0,compilerOptions:{noEmitOnError:!0,diagnostics:!0,module:ts.ModuleKind.ES2015}}),e.diagnostics.length&&(i={lang:"js",data:[{message:e.diagnostics[0].messageText,lineNumber:ts.getLineOfLocalPosition(e.diagnostics[0].file,e.diagnostics[0].start)-1}]}),e=e.outputText,!1===n||i||(e=h(e,{timeout:s})),a.resolve({code:e,errors:i})}catch(t){}return a.promise}function r(e,t){for(var n=e.split("."),o=t.split("."),s=0;3>s;s++){var i=+n[s],a=+o[s];if(i>a)return 1;if(a>i)return-1;if(!isNaN(i)&&isNaN(a))return 1;if(isNaN(i)&&!isNaN(a))return-1}return 0}function l(e){for(var t="",n=e||10;n--;)t+=U[~~(Math.random()*U.length)];return t}function c(){window.DEBUG&&console.log(Date.now(),...arguments)}function h(e,{timeout:t}){var n=1,o=[],s="_wmloopvar",i=`\nif (Date.now() - %d > ${t}) { window.top.previewException(new Error("Infinite loop")); break;}\n`;return z.parse(e,{tolerant:!0,range:!0,jsx:!0},function(e){switch(e.type){case"DoWhileStatement":case"ForStatement":case"ForInStatement":case"ForOfStatement":case"WhileStatement":var t=1+e.body.range[0],a=e.body.range[1],r=i.replace("%d",s+n),l="";"BlockStatement"!==e.body.type&&(r="{"+r,l="}",--t),o.push({pos:t,str:r}),o.push({pos:a,str:l}),o.push({pos:e.range[0],str:"var %d = Date.now();\n".replace("%d",s+n)}),++n;break;default:}}),o.sort(function(e,t){return t.pos-e.pos}).forEach(function(t){e=e.slice(0,t.pos)+t.str+e.slice(t.pos)}),e}function d(e){var t=new Date(e),n=t.getDate()+" "+["January","February","March","April","May","June","July","August","September","October","November","December"][t.getMonth()]+" "+t.getFullYear();return n}function p(e,t){function n(){var n=document.createElement("a");n.href=window.URL.createObjectURL(t),n.download=e,n.style.display="none",document.body.appendChild(n),n.click(),n.remove()}window.IS_EXTENSION?chrome.downloads.download({url:window.URL.createObjectURL(t),filename:e,saveAs:!0},()=>{chrome.runtime.lastError&&n()}):n()}function u(e,t,n){function o(e){return function(){c(arguments),v("fn","error",e),u.errorCount=(u.errorCount||0)+1,4===u.errorCount&&setTimeout(function(){alert("Oops! Seems like your preview isn't updating. It's recommended to switch to the web app: https://webmakerapp.com/app/.\n\n If you still want to get the extension working, please try the following steps until it fixes:\n - Refresh Web Maker\n - Restart browser\n - Update browser\n - Reinstall Web Maker (don't forget to export all your creations from saved items pane (click the OPEN button) before reinstalling)\n\nIf nothing works, please tweet out to @webmakerApp."),v("ui","writeFileMessageSeen")},1e3)}}var s=!1;window.webkitRequestFileSystem(window.TEMPORARY,5242880,function(i){i.root.getFile(e,{create:!0},function(e){e.createWriter((e)=>{e.onwriteend=function(){return s?n():(s=!0,e.seek(0),e.write(t),!1)},e.truncate(0)},o("createWriterFail"))},o("getFileFail"))},o("webkitRequestFileSystemFail"))}function m(e){var t=o(),n=window.document.getElementsByTagName("script")[0],s=window.document.createElement("script");return s.src=e,s.async=!0,n.parentNode.insertBefore(s,n),s.onload=function(){t.resolve()},t.promise}function g(e,t,n,o,s){if(!o)return"";var i=o.externalLibs.js.split("\n").reduce(function(e,t){return e+(t?"\n<script src=\""+t+"\"></script>":"")},""),a=o.externalLibs.css.split("\n").reduce(function(e,t){return e+(t?"\n<link rel=\"stylesheet\" href=\""+t+"\"></link>":"")},""),r="<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\" />\n"+a+"\n<style id=\"webmakerstyle\">\n"+t+"\n</style>\n</head>\n<body>\n"+e+"\n"+i+"\n";if(s||(r+="<script src=\""+(chrome.extension?chrome.extension.getURL("lib/screenlog.js"):`${location.origin}${R}/lib/screenlog.js`)+"\"></script>"),o.jsMode===F.ES6&&(r+="<script src=\""+(chrome.extension?chrome.extension.getURL("lib/transpilers/babel-polyfill.min.js"):`${location.origin}${R}/lib/transpilers/babel-polyfill.min.js`)+"\"></script>"),"string"==typeof n)r+="<script>\n"+n+"\n//# sourceURL=userscript.js";else{var l=chrome.i18n.getMessage()?`chrome-extension://${chrome.i18n.getMessage("@@extension_id")}`:`${location.origin}`;r+="<script src=\""+`filesystem:${l}/temporary/script.js`+"\">"}return r+="\n</script>\n</body>\n</html>",r}function f(e){var t=s(e.html,e.htmlMode),n=i(e.css,e.cssMode),o=a(e.js,e.jsMode,!1);Promise.all([t,n,o]).then(function(t){var n=t[0].code,o=t[1].code,s=t[2].code,i=g(n,o,s,e,!0),a=new Date,r=["web-maker",a.getFullYear(),a.getMonth()+1,a.getDate(),a.getHours(),a.getMinutes(),a.getSeconds()].join("-");e.title&&(r=e.title),r+=".html";var l=new Blob([i],{type:"text/html;charset=UTF-8"});p(r,l),v("fn","saveFileComplete")})}function b(){var e=o();return window.IS_EXTENSION?(chrome.permissions.contains({permissions:["downloads"]},function(t){t?e.resolve():chrome.permissions.request({permissions:["downloads"]},function(t){t?(v("fn","downloadsPermGiven"),e.resolve()):e.reject()})}),e.promise):(e.resolve(),e.promise)}function v(e,t,n,o){return window.DEBUG?void c("trackevent",e,t,n,o):void(window.ga&&ga("send","event",e,t,n,o))}function C(e,t){var n={};for(var o in e)0<=t.indexOf(o)||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function y(e){return Object(O.h)(q,K({Tag:"a"},e))}function S(e){return Object(O.h)("div",{class:"main-header"},Object(O.h)("input",{type:"text",id:"titleInput",title:"Click to edit",class:"item-title-input",value:e.title,onBlur:e.titleInputBlurHandler}),Object(O.h)("div",{class:"main-header__btn-wrap  flex  flex-v-center"},Object(O.h)("a",{id:"runBtn",class:"hide flex flex-v-center hint--rounded hint--bottom-left","aria-label":"Run preview (Ctrl/\u2318 + Shift + 5)",onClick:e.runBtnClickHandler},Y,"Run"),Object(O.h)(y,{onClick:e.addLibraryBtnHandler,"data-event-category":"ui","data-event-action":"addLibraryButtonClick",class:"flex-v-center hint--rounded hint--bottom-left","aria-label":"Add a JS/CSS library"},"Add library"," ",Object(O.h)("span",{id:"js-external-lib-count",style:`display:${e.externalLibCount?"inline":"none"}`,class:"count-label"},e.externalLibCount)),Object(O.h)("a",{class:"flex  flex-v-center hint--rounded hint--bottom-left","aria-label":"Start a new creation",onClick:e.newBtnHandler},G,"New"),Object(O.h)("a",{id:"saveBtn",class:`flex  flex-v-center hint--rounded hint--bottom-left ${e.isSaving?"is-loading":""} ${e.unsavedEditCount?"is-marked":0}`,"aria-label":"Save current creation (Ctrl/\u2318 + S)",onClick:e.saveBtnHandler},Z,X,"Save"),Object(O.h)("a",{id:"openItemsBtn",class:`flex  flex-v-center hint--rounded hint--bottom-left ${e.isFetchingItems?"is-loading":""}`,"aria-label":"Open a saved creation (Ctrl/\u2318 + O)",onClick:e.openBtnHandler},Q,ee,"Open"),Object(O.h)(y,{onClick:e.loginBtnHandler,"data-event-category":"ui","data-event-action":"loginButtonClick",class:"hide-on-login flex  flex-v-center  hint--rounded  hint--bottom-left","aria-label":"Login/Signup"},"Login/Signup"),Object(O.h)(y,{onClick:e.profileBtnHandler,"data-event-category":"ui","data-event-action":"headerAvatarClick","aria-label":"See profile or Logout",class:"hide-on-logout hint--rounded  hint--bottom-left"},Object(O.h)("img",{id:"headerAvatarImg",width:"20",src:e.user?e.user.photoURL||J:"",class:"main-header__avatar-img"}))))}function w(e,t){var n=t;return function(){0==--n&&e()}}function k(e,t){var n=ne.a.modes[e].dependencies;if(!n)return t();for(var o=[],s=0;s<n.length;++s)ne.a.modes.hasOwnProperty(n[s])||o.push(n[s]);if(!o.length)return t();var i=w(t,o.length);for(s=0;s<o.length;++s)ne.a.requireMode(o[s],i)}function x(e,t){var n={};for(var o in e)0<=t.indexOf(o)||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function M({title:e,label:t,onChange:n,pref:o,name:s,showWhenExtension:i}){return Object(O.h)("label",{class:`line ${i?"show-when-extension":""} `,title:e},Object(O.h)("input",{type:"checkbox",checked:o,onChange:n,"data-setting":s})," ",t)}function _({user:e,logoutBtnHandler:t}){return Object(O.h)("div",{class:"tac"},Object(O.h)("img",{height:"80",class:"profile-modal__avatar-img",src:e?e.photoURL||ko:"",id:"profileAvatarImg",alt:"Profile image"}),Object(O.h)("h3",{id:"profileUserName",class:"mb-2"},e&&e.displayName?e.displayName:"Anonymous Creator"),Object(O.h)("p",null,Object(O.h)("button",{class:"btn","aria-label":"Logout from your account",onClick:t},"Logout")))}function L({show:e,closeHandler:t}){return Object(O.h)(gt,{extraClasses:"pledge-modal",show:e,closeHandler:t},xo)}function I({show:e,closeHandler:t}){return Object(O.h)(gt,{show:e,closeHandler:t},Mo,_o)}function H(e){function t(){var e="filesystem:chrome-extension://"+chrome.i18n.getMessage("@@extension_id")+"/temporary/"+d;chrome.downloads.download({url:e},function(){chrome.runtime.lastError&&window.open(e)})}function n(t){c(t)}for(var o=atob(e.split(",")[1]),s=e.split(",")[0].split(":")[1].split(";")[0],a=new ArrayBuffer(o.length),r=new Uint8Array(a),l=0;l<o.length;l++)r[l]=o.charCodeAt(l);var i=new Blob([a],{type:s}),h=i.size+512,p=new Date,d=["web-maker-screenshot",p.getFullYear(),p.getMonth()+1,p.getDate(),p.getHours(),p.getMinutes(),p.getSeconds()].join("-");d+=".png",window.webkitRequestFileSystem(window.TEMPORARY,h,(e)=>{e.root.getFile(d,{create:!0},(e)=>{e.createWriter((e)=>{e.onwriteend=t,e.write(i)},n)},n)},n)}function A(e){b().then(()=>{function t(n){var o=document.createElement("canvas"),s=e;o.width=s.width,o.height=s.height;var i=o.getContext("2d"),a=window.devicePixelRatio||1;i.drawImage(n,s.left*a,s.top*a,s.width*a,s.height*a,0,0,s.width,s.height),n.removeEventListener("load",t),H(o.toDataURL())}var n=document.createElement("style");n.textContent="[class*=\"hint\"]:after, [class*=\"hint\"]:before { display: none!important; }",document.body.appendChild(n),setTimeout(()=>{chrome.tabs.captureVisibleTab(null,{format:"png",quality:100},function(e){if(n.remove(),e){var o=new Image;o.src=e,o.addEventListener("load",()=>t(o,e))}})},50),v("ui","takeScreenshotBtnClick")})}function j({show:e,closeHandler:t,oldSavedCreationsCount:n,dontAskBtnClickHandler:o,importBtnClickHandler:s}){return Object(O.h)(gt,{extraClasses:"ask-to-import-modal",show:e,closeHandler:t},Lo,Object(O.h)("div",null,Object(O.h)("p",null,"You have ",Object(O.h)("span",null,n)," creations saved in your local machine. Do you want to import those creations in your account so they are more secure and accessible anywhere?"),Io,Object(O.h)("div",{class:"flex flex-h-end"},Object(O.h)("button",{onClick:o,class:"btn"},"Don't ask me again"),Object(O.h)("button",{onClick:s,class:"btn btn--primary ml-1"},"Yes, please import"))))}function B(e){return Object(O.h)(gt,{show:e.show,closeHandler:e.closeHandler},jo,Bo)}function E(e){return Object(O.h)(gt,{show:e.show,closeHandler:e.closeHandler},Eo,Oo,To,Vo)}Object.defineProperty(t,"__esModule",{value:!0});var O=n("KM04"),T=n.n(O),V=Object.assign||function(e){for(var t,n=1;n<arguments.length;n++)for(var o in t=arguments[n],t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e};const P={HTML:"html",MARKDOWN:"markdown",JADE:"jade"},D={CSS:"css",SCSS:"scss",SASS:"sass",LESS:"less",STYLUS:"stylus",ACSS:"acss"},F={JS:"js",ES6:"es6",COFFEESCRIPT:"coffee",TS:"typescript"},N={};N[P.HTML]={label:"HTML",cmMode:"htmlmixed",codepenVal:"none"},N[P.MARKDOWN]={label:"Markdown",cmMode:"markdown",codepenVal:"markdown"},N[P.JADE]={label:"Pug",cmMode:"pug",codepenVal:"pug"},N[F.JS]={label:"JS",cmMode:"javascript",codepenVal:"none"},N[F.COFFEESCRIPT]={label:"CoffeeScript",cmMode:"coffeescript",codepenVal:"coffeescript"},N[F.ES6]={label:"ES6 (Babel)",cmMode:"jsx",codepenVal:"babel"},N[F.TS]={label:"TypeScript",cmPath:"jsx",cmMode:"text/typescript-jsx",codepenVal:"typescript"},N[D.CSS]={label:"CSS",cmPath:"css",cmMode:"css",codepenVal:"none"},N[D.SCSS]={label:"SCSS",cmPath:"css",cmMode:"text/x-scss",codepenVal:"scss"},N[D.SASS]={label:"SASS",cmMode:"sass",codepenVal:"sass"},N[D.LESS]={label:"LESS",cmPath:"css",cmMode:"text/x-less",codepenVal:"less"},N[D.STYLUS]={label:"Stylus",cmMode:"stylus",codepenVal:"stylus"},N[D.ACSS]={label:"Atomic CSS",cmPath:"css",cmMode:"css",codepenVal:"notsupported",cmDisable:!0,hasSettings:!0};const W=n("4E2n"),z=n("4E2n");window.DEBUG=-1<document.cookie.indexOf("wmdebug"),window.$=document.querySelector.bind(document),window.chrome=window.chrome||{},window.chrome.i18n={getMessage:()=>{}},window.$all=(e)=>[...document.querySelectorAll(e)],window.IS_EXTENSION=!!window.chrome.extension;const R=window.chrome.extension||window.DEBUG?"/":"/app";var U="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";Node.prototype.nextUntil=function(e){const t=Array.from(this.parentNode.querySelectorAll(e)),n=t.indexOf(this);return t[n+1]},Node.prototype.previousUntil=function(e){const t=Array.from(this.parentNode.querySelectorAll(e)),n=t.indexOf(this);return t[n-1]},window.requestIdleCallback=window.requestIdleCallback||function(e){setTimeout(e,10)},window.IS_EXTENSION?document.body.classList.add("is-extension"):document.body.classList.add("is-app"),!1;var K=Object.assign||function(e){for(var t,n=1;n<arguments.length;n++)for(var o in t=arguments[n],t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e};let q=class extends O.Component{handleClick(t){const e=t.currentTarget;v(e.getAttribute("data-event-category"),e.getAttribute("data-event-action")),this.props.onClick()}render(){const e=this.props,{onClick:t,Tag:n}=e,o=C(e,["onClick","Tag"]);return Object(O.h)(n,K({onClick:this.handleClick.bind(this)},o))}};const J="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";var Y=Object(O.h)("svg",{style:"width: 14px; height: 14px;"},Object(O.h)("use",{xlinkHref:"#play-icon"})),G=Object(O.h)("svg",{style:"vertical-align:middle;width:14px;height:14px",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"})),Z=Object(O.h)("svg",{style:"vertical-align:middle;width:14px;height:14px",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"})),X=Object(O.h)("svg",{class:"btn-loader",width:"15",height:"15",stroke:"#fff"},Object(O.h)("use",{xlinkHref:"#loader-icon"})),Q=Object(O.h)("svg",{style:"width:14px;height:14px;vertical-align:middle;",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"})),ee=Object(O.h)("svg",{class:"btn-loader",width:"15",height:"15",stroke:"#fff"},Object(O.h)("use",{xlinkHref:"#loader-icon"})),te=n("tQq4"),ne=n.n(te);window.CodeMirror=ne.a,ne.a.modeURL||(ne.a.modeURL="lib/codemirror/mode/%N/%N.js");var oe={};ne.a.requireMode=function(e,t){if("string"!=typeof e&&(e=e.name),ne.a.modes.hasOwnProperty(e))return k(e,t);if(oe.hasOwnProperty(e))return oe[e].push(t);var n=ne.a.modeURL.replace(/%N/g,e),o=document.createElement("script");o.src=n;var s=document.getElementsByTagName("script")[0],a=oe[e]=[t];ne.a.on(o,"load",function(){k(e,function(){for(var e=0;e<a.length;++e)a[e]()})}),s.parentNode.insertBefore(o,s)},ne.a.autoLoadMode=function(e,t){ne.a.modes.hasOwnProperty(t)||ne.a.requireMode(t,function(){e.setOption("mode",e.getOption("mode"))})};var se=ne.a,ie=n("uQIK"),ae=n.n(ie),re=n("xdvC"),le=n.n(re),de=n("pTe4"),ce=n.n(de),he=n("BVSg"),pe=n.n(he),ue=n("X7my"),me=n.n(ue),ge=n("H+g/"),fe=n.n(ge),be=n("tMLt"),ve=n.n(be),Ce=n("1JcR"),ye=n.n(Ce),Se=n("5gBI"),we=n.n(Se),ke=n("bU21"),xe=n.n(ke),Me=n("zs1I"),_e=n.n(Me),Le=n("rbVD"),Ie=n.n(Le),He=n("6r0S"),Ae=n.n(He),je=n("LiPu"),Be=n.n(je),Ee=n("IYZm"),Oe=n.n(Ee),Te=n("SUmx"),Ve=n.n(Te),Pe=n("gPKv"),De=n.n(Pe),Fe=n("29F7"),Ne=n.n(Fe),We=n("Jo/m"),ze=n.n(We),Re=n("4e7A"),Ue=n.n(Re),Ke=n("ew/s"),qe=n.n(Ke),Je=n("HeB0"),Ye=n.n(Je),Ge=n("ggoL"),Ze=n.n(Ge),Xe=n("qqFR"),Qe=n.n(Xe),$e=n("AIXc"),et=n.n($e),tt=n("Xc2M"),nt=n.n(tt),ot=n("yLr7"),st=n.n(ot),it=n("AhD2"),at=n.n(it),rt=n("/QFk");Object(rt.a)(se);let lt=class extends O.Component{componentDidMount(){this.initEditor()}shouldComponentUpdate(){return!1}initEditor(){const e=this.props.options;this.cm=se.fromTextArea(this.textarea,{mode:e.mode,lineNumbers:!0,lineWrapping:!0,autofocus:e.autofocus||!1,autoCloseBrackets:!0,autoCloseTags:!0,matchBrackets:!0,matchTags:e.matchTags||!1,tabMode:"indent",keyMap:"sublime",theme:"monokai",lint:!!e.lint,tabSize:2,foldGutter:!0,styleActiveLine:!0,gutters:e.gutters||[],profile:e.profile||"",extraKeys:{Up:function(e){se.commands.goLineUp(e)},Down:function(e){se.commands.goLineDown(e)},"Shift-Tab":function(e){se.commands.indentAuto(e)},Tab:function(t){if(e.emmet){const e=t.execCommand("emmetExpandAbbreviation");if(!0===e)return}const n=$("[data-setting=indentWith]:checked");t.somethingSelected()||n&&"spaces"!==n.value?se.commands.defaultTab(t):se.commands.insertSoftTab(t)},Enter:"emmetInsertLineBreak"}}),this.cm.on("focus",(e)=>{"function"==typeof this.props.onFocus&&this.props.onFocus(e)}),this.cm.on("change",this.props.onChange),this.cm.addKeyMap({"Ctrl-Space":"autocomplete"}),e.noAutocomplete||this.cm.on("inputRead",(e,t)=>{this.props.autoComplete&&"+input"===t.origin&&";"!==t.text[0]&&","!==t.text[0]&&" "!==t.text[0]&&se.commands.autocomplete(this.cm,null,{completeSingle:!1})}),this.props.onCreation(this.cm)}render(){return Object(O.h)("textarea",{ref:(e)=>this.textarea=e,name:"",id:"",cols:"30",rows:"10"})}};var dt=n("mSND"),ct=n.n(dt);let ht=class extends O.Component{componentDidMount(){this.updateSplit()}componentWillUpdate(){this.splitInstance&&this.splitInstance.destroy()}componentDidUpdate(){this.updateSplit()}updateSplit(){const e={direction:this.props.direction,minSize:this.props.minSize,gutterSize:6,sizes:this.props.sizes};this.props.onDragEnd&&(e.onDragEnd=this.props.onDragEnd),this.props.onDragStart&&(e.onDragStart=this.props.onDragStart),this.splitInstance=ct()(this.props.children.map((e)=>"#"+e.attributes.id),e),this.props.onSplit&&this.props.onSplit(this.splitInstance)}render(){const e=this.props,{children:t}=e,n=x(e,["children"]);return Object(O.h)("div",n,this.props.children)}},pt=class extends O.Component{componentDidMount(){this.initEditor()}shouldComponentUpdate(){return!1}initEditor(){this.cm=se.fromTextArea(this.textarea,this.props.options),this.props.onChange&&this.cm.on("change",this.props.onChange),this.props.onBlur&&this.cm.on("blur",this.props.onBlur),this.props.onCreation(this.cm)}render(){return Object(O.h)("textarea",{ref:(e)=>this.textarea=e,name:"",id:"",cols:"30",rows:"10"})}};var ut=n("q6qL"),mt=n.n(ut);let gt=class extends O.Component{componentDidMount(){window.addEventListener("keydown",this.onKeyDownHandler.bind(this))}componentWillUnmount(){window.removeEventListener("keydown",this.onKeyDownHandler.bind(this))}onKeyDownHandler(t){27===t.keyCode&&this.props.closeHandler()}onOverlayClick(t){t.target===this.overlayEl&&this.props.closeHandler()}componentDidUpdate(e){this.props.show!==e.show&&(document.body.classList[this.props.show?"add":"remove"]("overlay-visible"),this.props.show&&setTimeout(()=>{this.overlayEl.querySelector(".js-modal__close-btn").focus()},0))}render(){return this.props.show?Object(O.h)(mt.a,{into:"body"},Object(O.h)("div",{class:`${this.props.extraClasses||""} modal is-modal-visible`,ref:(e)=>this.overlayEl=e,onClick:this.onOverlayClick.bind(this)},Object(O.h)("div",{class:"modal__content"},Object(O.h)("button",{type:"button",onClick:this.props.closeHandler,"aria-label":"Close modal",title:"Close",class:"js-modal__close-btn  modal__close-btn"},"Close"),this.props.children))):null}};var ft=Object(O.h)("h1",null,"Atomic CSS Settings"),bt=Object(O.h)("h3",null,"Configure Atomizer settings."," ",Object(O.h)("a",{href:"https://github.com/acss-io/atomizer#api",target:"_blank",rel:"noopener noreferrer"},"Read more")," ","about available settings.");let vt=class extends O.Component{componentDidUpdate(){this.props.show&&setTimeout(()=>{this.props.settings&&this.cm.setValue(this.props.settings.acssConfig),this.cm.refresh(),this.cm.focus()},500)}render(){return Object(O.h)(gt,{show:this.props.show,closeHandler:this.props.closeHandler},ft,bt,Object(O.h)("div",{style:"height: calc(100vh - 350px);"},Object(O.h)(pt,{options:{mode:"application/ld+json",theme:this.props.editorTheme},onCreation:(e)=>this.cm=e,onBlur:(e)=>this.props.onChange(e.getValue())})),Object(O.h)("div",{class:"flex flex-h-end"},Object(O.h)("button",{class:"btn btn--primary",onClick:this.props.closeHandler},"Apply and Close")))}};const Ct=33;var yt=Object(O.h)("span",{class:"caret"}),St=Object(O.h)("option",{value:"html"},"HTML"),wt=Object(O.h)("option",{value:"markdown"},"Markdown"),kt=Object(O.h)("option",{value:"jade"},"Pug"),xt=Object(O.h)("span",{class:"caret"}),Mt=Object(O.h)("option",{value:"css"},"CSS"),_t=Object(O.h)("option",{value:"scss"},"SCSS"),Lt=Object(O.h)("option",{value:"sass"},"SASS"),It=Object(O.h)("option",{value:"less"},"LESS"),Ht=Object(O.h)("option",{value:"stylus"},"Stylus"),At=Object(O.h)("option",{value:"acss"},"Atomic CSS"),jt=Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#settings-icon"})),Bt=Object(O.h)("span",{class:"caret"}),Et=Object(O.h)("option",{value:"js"},"JS"),Ot=Object(O.h)("option",{value:"coffee"},"CoffeeScript"),Tt=Object(O.h)("option",{value:"es6"},"ES6 (Babel)"),Vt=Object(O.h)("option",{value:"typescript"},"TypeScript"),Pt=Object(O.h)("span",{class:"code-wrap__header-label"},"Console (",Object(O.h)("span",{id:"logCountEl"},"0"),")"),Dt=Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#cancel-icon"})),Ft=Object(O.h)("svg",{width:"18",height:"18",fill:"#346fd2"},Object(O.h)("use",{xlinkHref:"#chevron-icon"}));let Nt=class extends O.Component{constructor(e){super(e),this.state={isConsoleOpen:!1,isCssSettingsModalOpen:!1},this.updateTimer=null,this.updateDelay=500,this.htmlMode=P.HTML,this.jsMode=P.HTML,this.cssMode=D.CSS,this.jsMode=F.JS,this.prefs={},this.codeInPreview={html:null,css:null,js:null},this.cmCodes={html:e.currentItem.html,css:"",js:""},this.cm={},this.logCount=0,window.onMessageFromConsole=this.onMessageFromConsole.bind(this),window.previewException=this.previewException.bind(this),window.clearConsole=this.clearConsole.bind(this)}shouldComponentUpdate(e,t){return this.state.isConsoleOpen!==t.isConsoleOpen||this.state.isCssSettingsModalOpen!==t.isCssSettingsModalOpen||this.state.codeSplitSizes!==t.codeSplitSizes||this.state.mainSplitSizes!==t.mainSplitSizes||this.props.currentLayoutMode!==e.currentLayoutMode||this.props.currentItem!==e.currentItem}componentDidUpdate(){window.logCountEl.textContent=this.logCount}componentDidMount(){this.props.onRef(this)}onHtmlCodeChange(e,t){this.cmCodes.html=e.getValue(),this.props.onCodeChange("html",this.cmCodes.html,"setValue"!==t.origin),this.onCodeChange(e,t)}onCssCodeChange(e,t){this.cmCodes.css=e.getValue(),this.props.onCodeChange("css",this.cmCodes.css,"setValue"!==t.origin),this.onCodeChange(e,t)}onJsCodeChange(e,t){this.cmCodes.js=e.getValue(),this.props.onCodeChange("js",this.cmCodes.js,"setValue"!==t.origin),this.onCodeChange(e,t)}onCodeChange(e,t){clearTimeout(this.updateTimer),this.updateTimer=setTimeout(()=>{"setValue"!==t.origin&&(!1!==this.prefs.autoPreview&&this.setPreviewContent(),v.previewCount=(v.previewCount||0)+1,4===v.previewCount&&v("fn","usingPreview"))},this.updateDelay)}createPreviewFile(e,t,n){const o=!window.webkitRequestFileSystem||!window.IS_EXTENSION;var s=g(e,t,o?n:null,this.props.currentItem),i=new Blob([s],{type:"text/plain;charset=UTF-8"}),a=new Blob([n],{type:"text/plain;charset=UTF-8"});!v.hasTrackedCode&&(e||t||n)&&(v("fn","hasCode"),v.hasTrackedCode=!0),o?this.detachedWindow?(c("\u2709\uFE0F Sending message to detached window"),this.detachedWindow.postMessage({contents:s},"*")):(this.frame.src=this.frame.src,setTimeout(()=>{this.frame.contentDocument.open(),this.frame.contentDocument.write(s),this.frame.contentDocument.close()},10)):u("script.js",a,()=>{u("preview.html",i,()=>{var e=chrome.i18n.getMessage()?`chrome-extension://${chrome.i18n.getMessage("@@extension_id")}`:`${location.origin}`,t=`filesystem:${e}/temporary/preview.html`;this.detachedWindow?this.detachedWindow.postMessage(t,"*"):this.frame.src=t})})}cleanupErrors(e){this.cm[e].clearGutter("error-gutter")}showErrors(e,t){var o=this.cm[e];t.forEach(function(t){o.operation(function(){var e=document.createElement("div");e.setAttribute("data-title",t.message),e.classList.add("gutter-error-marker"),o.setGutterMarker(t.lineNumber,"error-gutter",e)})})}setPreviewContent(e,t){if(!this.props.prefs.autoPreview&&!t)return;this.props.prefs.preserveConsoleLogs||this.clearConsole(),this.cleanupErrors("html"),this.cleanupErrors("css"),this.cleanupErrors("js");var n={html:this.cmCodes.html,css:this.cmCodes.css,js:this.cmCodes.js};c("\uD83D\uDD0E setPreviewContent",e);const o=this.detachedWindow?this.detachedWindow.document.querySelector("iframe"):this.frame,r=this.props.currentItem.cssMode;if(!e&&n.html===this.codeInPreview.html&&n.js===this.codeInPreview.js)i(r===D.ACSS?n.html:n.css,r,this.props.currentItem.cssSettings).then((e)=>{r===D.ACSS&&this.cm.css.setValue(e.code||""),o.contentDocument.querySelector("#webmakerstyle")&&(o.contentDocument.querySelector("#webmakerstyle").textContent=e.code||"")});else{var l=s(n.html,this.props.currentItem.htmlMode),d=i(r===D.ACSS?n.html:n.css,r,this.props.currentItem.cssSettings),h=a(n.js,this.props.currentItem.jsMode,!0,this.props.prefs.infiniteLoopTimeout);Promise.all([l,d,h]).then((e)=>{r===D.ACSS&&this.cm.css.setValue(e[1].code||""),this.createPreviewFile(e[0].code||"",e[1].code||"",e[2].code||""),e.forEach((e)=>{e.errors&&this.showErrors(e.errors.lang,e.errors.data)})})}this.codeInPreview.html=n.html,this.codeInPreview.css=n.css,this.codeInPreview.js=n.js}isValidItem(e){return!!e.title}refreshEditor(){this.cmCodes.html=this.props.currentItem.html,this.cmCodes.css=this.props.currentItem.css,this.cmCodes.js=this.props.currentItem.js,this.cm.html.setValue(this.cmCodes.html||""),this.cm.css.setValue(this.cmCodes.css||""),this.cm.js.setValue(this.cmCodes.js||""),this.cm.html.refresh(),this.cm.css.refresh(),this.cm.js.refresh(),this.clearConsole(),Promise.all([this.updateHtmlMode(this.props.currentItem.htmlMode),this.updateCssMode(this.props.currentItem.cssMode),this.updateJsMode(this.props.currentItem.jsMode)]).then(()=>this.setPreviewContent(!0))}applyCodemirrorSettings(e){this.cm&&(htmlCodeEl.querySelector(".CodeMirror").style.fontSize=cssCodeEl.querySelector(".CodeMirror").style.fontSize=jsCodeEl.querySelector(".CodeMirror").style.fontSize=`${parseInt(e.fontSize,10)}px`,window.consoleEl.querySelector(".CodeMirror").style.fontSize=`${parseInt(e.fontSize,10)}px`,window.editorThemeLinkTag.href=`lib/codemirror/theme/${e.editorTheme}.css`,window.fontStyleTag.textContent=window.fontStyleTemplate.textContent.replace(/fontname/g,("other"===e.editorFont?e.editorCustomFont:e.editorFont)||"FiraCode"),this.consoleCm.setOption("theme",e.editorTheme),["html","js","css"].forEach((t)=>{this.cm[t].setOption("indentWithTabs","spaces"!==e.indentWith),this.cm[t].setOption("blastCode",!!e.isCodeBlastOn&&{effect:2,shake:!1}),this.cm[t].setOption("indentUnit",+e.indentSize),this.cm[t].setOption("tabSize",+e.indentSize),this.cm[t].setOption("theme",e.editorTheme),this.cm[t].setOption("keyMap",e.keymap),this.cm[t].setOption("lineWrapping",e.lineWrap),this.cm[t].refresh()}))}updateCodeWrapCollapseStates(){clearTimeout(this.updateCodeWrapCollapseStates.timeout),this.updateCodeWrapCollapseStates.timeout=setTimeout(()=>{const{currentLayoutMode:e}=this.props,t=2===e||5===e?"width":"height";[htmlCodeEl,cssCodeEl,jsCodeEl].forEach(function(e){const n=e.getBoundingClientRect(),o=n[t];100>o?e.classList.add("is-minimized"):e.classList.remove("is-minimized"),-1===e.style[t].indexOf(`100% - ${2*Ct}px`)?e.classList.remove("is-maximized"):e.classList.add("is-maximized")})},50)}toggleCodeWrapCollapse(e){if(e.classList.contains("is-minimized")||e.classList.contains("is-maximized"))e.classList.remove("is-minimized"),e.classList.remove("is-maximized"),this.codeSplitInstance.setSizes([33.3,33.3,33.3]);else{const n=parseInt(e.dataset.codeWrapId,10);var t=[`${Ct}px`,`${Ct}px`,`${Ct}px`];t[n]=`calc(100% - ${2*Ct}px)`,this.codeSplitInstance.setSizes(t),e.classList.add("is-maximized")}}collapseBtnHandler(t){var e=t.currentTarget.parentElement.parentElement.parentElement;this.toggleCodeWrapCollapse(e),v("ui","paneCollapseBtnClick",e.dataset.type)}codeWrapHeaderDblClickHandler(t){if(t.target.classList.contains("js-code-wrap__header")){const e=t.target.parentElement;this.toggleCodeWrapCollapse(e),v("ui","paneHeaderDblClick",e.dataset.type)}}resetSplitting(){this.setState({codeSplitSizes:this.getCodeSplitSizes(),mainSplitSizes:this.getMainSplitSizesToApply()})}getMainSplitSizesToApply(){var e;const{currentItem:t,currentLayoutMode:n}=this.props;return e=t&&t.mainSizes?3===n?[t.mainSizes[1],t.mainSizes[0]]:t.mainSizes:5===n?[75,25]:[50,50],e}getCodeSplitSizes(){return this.props.currentItem&&this.props.currentItem.sizes?this.props.currentItem.sizes:[33.33,33.33,33.33]}mainSplitDragEndHandler(){this.props.prefs.refreshOnResize&&setTimeout(()=>{this.setPreviewContent(!0)},1)}codeSplitDragStart(){document.body.classList.add("is-dragging")}codeSplitDragEnd(){this.updateCodeWrapCollapseStates(),document.body.classList.remove("is-dragging")}handleModeRequirements(e){function t(){N[e].hasLoaded=!0,s.resolve()}const n="lib/transpilers";var s=o();return N[e].hasLoaded?(s.resolve(),s.promise):(e===P.JADE?m(`${n}/jade.js`).then(t):e===P.MARKDOWN?m(`${n}/marked.js`).then(t):e===D.LESS?m(`${n}/less.min.js`).then(t):e===D.SCSS||e===D.SASS?m(`${n}/sass.js`).then(function(){window.sass=new Sass(`${n}/sass.worker.js`),t()}):e===D.STYLUS?m(`${n}/stylus.min.js`).then(t):e===D.ACSS?m(`${n}/atomizer.browser.js`).then(t):e===F.COFFEESCRIPT?m(`${n}/coffee-script.js`).then(t):e===F.ES6?m(`${n}/babel.min.js`).then(t):e===F.TS?m(`${n}/typescript.js`).then(t):s.resolve(),s.promise)}updateHtmlMode(e){return this.props.onCodeModeChange("html",e),this.props.currentItem.htmlMode=e,this.cm.html.setOption("mode",N[e].cmMode),se.autoLoadMode(this.cm.html,N[e].cmPath||N[e].cmMode),this.handleModeRequirements(e)}updateCssMode(e){return this.props.onCodeModeChange("css",e),this.props.currentItem.cssMode=e,this.cm.css.setOption("mode",N[e].cmMode),this.cm.css.setOption("readOnly",N[e].cmDisable),window.cssSettingsBtn.classList[N[e].hasSettings?"remove":"add"]("hide"),se.autoLoadMode(this.cm.css,N[e].cmPath||N[e].cmMode),this.handleModeRequirements(e)}updateJsMode(e){return this.props.onCodeModeChange("js",e),this.props.currentItem.jsMode=e,this.cm.js.setOption("mode",N[e].cmMode),se.autoLoadMode(this.cm.js,N[e].cmPath||N[e].cmMode),this.handleModeRequirements(e)}codeModeChangeHandler(t){var e=t.target.value,n=t.target.dataset.type,o=this.props.currentItem["html"===n?"htmlMode":"css"===n?"cssMode":"jsMode"];o!==e&&("html"===n?this.updateHtmlMode(e).then(()=>this.setPreviewContent(!0)):"js"===n?this.updateJsMode(e).then(()=>this.setPreviewContent(!0)):"css"===n&&this.updateCssMode(e).then(()=>this.setPreviewContent(!0)),v("ui","updateCodeMode",e))}detachPreview(){if(this.detachedWindow)return void this.detachedWindow.focus();const e=this.frame.getBoundingClientRect(),t=e.width,n=e.height;document.body.classList.add("is-detached-mode"),window.globalConsoleContainerEl.insertBefore(window.consoleEl,null),this.detachedWindow=window.open("./preview.html","Web Maker",`width=${t},height=${n},resizable,scrollbars=yes,status=1`),setTimeout(()=>{this.setPreviewContent(!0)},1500);var o=window.setInterval(function(){this.detachedWindow&&this.detachedWindow.closed&&(clearInterval(o),document.body.classList.remove("is-detached-mode"),$("#js-demo-side").insertBefore(window.consoleEl,null),this.detachedWindow=null,this.setPreviewContent(!0))}.bind(this),500)}onMessageFromConsole(){[...arguments].forEach((e)=>{e&&e.indexOf&&-1!==e.indexOf("filesystem:chrome-extension")&&(e=e.replace(/filesystem:chrome-extension.*\.js:(\d+):*(\d*)/g,"script $1:$2"));try{this.consoleCm.replaceRange(e+" "+((e+"").match(/\[object \w+]/)?JSON.stringify(e):"")+"\n",{line:Infinity})}catch(t){this.consoleCm.replaceRange("\uD83C\uDF00\n",{line:Infinity})}this.consoleCm.scrollTo(0,Infinity),this.logCount++}),logCountEl.textContent=this.logCount}previewException(e){console.error("Possible infinite loop detected.",e.stack),this.onMessageFromConsole("Possible infinite loop detected.",e.stack)}toggleConsole(){this.setState({isConsoleOpen:!this.state.isConsoleOpen}),v("ui","consoleToggle")}consoleHeaderDblClickHandler(t){t.target.classList.contains("js-console__header")&&(v("ui","consoleToggleDblClick"),this.toggleConsole())}clearConsole(){this.consoleCm.setValue(""),this.logCount=0,window.logCountEl.textContent=this.logCount}clearConsoleBtnClickHandler(){this.clearConsole(),v("ui","consoleClearBtnClick")}evalConsoleExpr(t){(76===t.which||12===t.which)&&t.ctrlKey?(this.clearConsole(),v("ui","consoleClearKeyboardShortcut")):13===t.which&&(this.onMessageFromConsole("> "+t.target.value),this.frame.contentWindow._wmEvaluate(t.target.value),t.target.value="",v("fn","evalConsoleExpr"))}cssSettingsBtnClickHandler(){this.setState({isCssSettingsModalOpen:!0}),v("ui","cssSettingsBtnClick")}cssSettingsChangeHandler(e){this.props.onCodeSettingsChange("css",e),this.setPreviewContent(!0)}getDemoFrame(e){e(this.frame)}editorFocusHandler(e){this.props.onEditorFocus(e)}render(){return Object(O.h)(ht,{class:"content-wrap  flex  flex-grow",sizes:this.state.mainSplitSizes,minSize:150,style:"",direction:2===this.props.currentLayoutMode?"vertical":"horizontal",onDragEnd:this.mainSplitDragEndHandler.bind(this)},Object(O.h)(ht,{class:"code-side",id:"js-code-side",sizes:this.state.codeSplitSizes,minSize:Ct,direction:2===this.props.currentLayoutMode||5===this.props.currentLayoutMode?"horizontal":"vertical",onDragStart:this.codeSplitDragStart.bind(this),onDragEnd:this.codeSplitDragEnd.bind(this),onSplit:(e)=>this.codeSplitInstance=e},Object(O.h)("div",{"data-code-wrap-id":"0",id:"htmlCodeEl","data-type":"html",class:"code-wrap",onTransitionEnd:this.updateCodeWrapCollapseStates.bind(this)},Object(O.h)("div",{class:"js-code-wrap__header  code-wrap__header",title:"Double click to toggle code pane",onDblClick:this.codeWrapHeaderDblClickHandler.bind(this)},Object(O.h)("label",{class:"btn-group",dropdow:!0,title:"Click to change"},Object(O.h)("span",{class:"code-wrap__header-label"},N[this.props.currentItem.htmlMode||"html"].label),yt,Object(O.h)("select",{"data-type":"html",class:"js-mode-select  hidden-select",onChange:this.codeModeChangeHandler.bind(this),value:this.props.currentItem.htmlMode},St,wt,kt)),Object(O.h)("div",{class:"code-wrap__header-right-options"},Object(O.h)("a",{class:"js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn",title:"Toggle code pane",onClick:this.collapseBtnHandler.bind(this)}))),Object(O.h)(lt,{options:{mode:"htmlmixed",profile:"xhtml",gutters:["CodeMirror-linenumbers","CodeMirror-foldgutter"],noAutocomplete:!0,matchTags:{bothTags:!0},emmet:!0},onChange:this.onHtmlCodeChange.bind(this),onCreation:(e)=>this.cm.html=e,onFocus:this.editorFocusHandler.bind(this)})),Object(O.h)("div",{"data-code-wrap-id":"1",id:"cssCodeEl","data-type":"css",class:"code-wrap",onTransitionEnd:this.updateCodeWrapCollapseStates.bind(this)},Object(O.h)("div",{class:"js-code-wrap__header  code-wrap__header",title:"Double click to toggle code pane",onDblClick:this.codeWrapHeaderDblClickHandler.bind(this)},Object(O.h)("label",{class:"btn-group",title:"Click to change"},Object(O.h)("span",{class:"code-wrap__header-label"},N[this.props.currentItem.cssMode||"css"].label),xt,Object(O.h)("select",{"data-type":"css",class:"js-mode-select  hidden-select",onChange:this.codeModeChangeHandler.bind(this),value:this.props.currentItem.cssMode},Mt,_t,Lt,It,Ht,At)),Object(O.h)("div",{class:"code-wrap__header-right-options"},Object(O.h)("a",{href:"#",id:"cssSettingsBtn",title:"Atomic CSS configuration",onClick:this.cssSettingsBtnClickHandler.bind(this),class:"code-wrap__header-btn hide"},jt),Object(O.h)("a",{class:"js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn",title:"Toggle code pane",onClick:this.collapseBtnHandler.bind(this)}))),Object(O.h)(lt,{options:{mode:"css",gutters:["error-gutter","CodeMirror-linenumbers","CodeMirror-foldgutter"],emmet:!0},onChange:this.onCssCodeChange.bind(this),onCreation:(e)=>this.cm.css=e,onFocus:this.editorFocusHandler.bind(this)})),Object(O.h)("div",{"data-code-wrap-id":"2",id:"jsCodeEl","data-type":"js",class:"code-wrap",onTransitionEnd:this.updateCodeWrapCollapseStates.bind(this)},Object(O.h)("div",{class:"js-code-wrap__header  code-wrap__header",title:"Double click to toggle code pane",onDblClick:this.codeWrapHeaderDblClickHandler.bind(this)},Object(O.h)("label",{class:"btn-group",title:"Click to change"},Object(O.h)("span",{class:"code-wrap__header-label"},N[this.props.currentItem.jsMode||"js"].label),Bt,Object(O.h)("select",{"data-type":"js",class:"js-mode-select  hidden-select",onChange:this.codeModeChangeHandler.bind(this),value:this.props.currentItem.jsMode},Et,Ot,Tt,Vt)),Object(O.h)("div",{class:"code-wrap__header-right-options"},Object(O.h)("a",{class:"js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn",title:"Toggle code pane",onClick:this.collapseBtnHandler.bind(this)}))),Object(O.h)(lt,{options:{mode:"javascript",gutters:["error-gutter","CodeMirror-linenumbers","CodeMirror-foldgutter"]},autoComplete:this.props.prefs.autoComplete,onChange:this.onJsCodeChange.bind(this),onCreation:(e)=>this.cm.js=e,onFocus:this.editorFocusHandler.bind(this)}))),Object(O.h)("div",{class:"demo-side",id:"js-demo-side",style:""},Object(O.h)("iframe",{ref:(e)=>this.frame=e,src:"about://blank",frameborder:"0",id:"demo-frame",allowfullscreen:!0}),Object(O.h)("div",{id:"consoleEl",class:`console ${this.state.isConsoleOpen?"":"is-minimized"}`},Object(O.h)("div",{id:"consoleLogEl",class:"console__log"},Object(O.h)("div",{class:"js-console__header  code-wrap__header",title:"Double click to toggle console",onDblClick:this.toggleConsole.bind(this)},Pt,Object(O.h)("div",{class:"code-wrap__header-right-options"},Object(O.h)("a",{class:"code-wrap__header-btn",title:"Clear console (CTRL + L)",onClick:this.clearConsoleBtnClickHandler.bind(this)},Dt),Object(O.h)("a",{class:"code-wrap__header-btn  code-wrap__collapse-btn",title:"Toggle console",onClick:this.toggleConsole.bind(this)}))),Object(O.h)(pt,{options:{mode:"javascript",lineWrapping:!0,theme:"monokai",foldGutter:!0,readOnly:!0,gutters:["CodeMirror-foldgutter"]},onCreation:(e)=>this.consoleCm=e})),Object(O.h)("div",{id:"consolePromptEl",class:"console__prompt flex flex-v-center"},Ft,Object(O.h)("input",{onKeyUp:this.evalConsoleExpr.bind(this),class:"console-exec-input"}))),Object(O.h)(vt,{show:this.state.isCssSettingsModalOpen,closeHandler:()=>this.setState({isCssSettingsModalOpen:!1}),onChange:this.cssSettingsChangeHandler.bind(this),settings:this.props.currentItem.cssSettings,editorTheme:this.props.prefs.editorTheme})))}};var Wt=Object(O.h)("svg",{viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"})),zt=Object(O.h)("svg",{style:"display: none;",xmlns:"http://www.w3.org/2000/svg"},Object(O.h)("symbol",{id:"codepen-logo",viewBox:"0 0 120 120"},Object(O.h)("path",{class:"outer-ring",d:"M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"}),Object(O.h)("path",{class:"inner-box",d:"M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"}))),Rt=Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#codepen-logo"})),Ut=Object(O.h)("svg",{style:"width:24px;height:24px",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"})),Kt=Object(O.h)("div",{class:"footer__separator hide-on-mobile"}),qt=Object(O.h)("svg",{viewBox:"0 0 100 100",style:"transform:rotate(-90deg)"},Object(O.h)("use",{xlinkHref:"#mode-icon"})),Jt=Object(O.h)("svg",{viewBox:"0 0 100 100"},Object(O.h)("use",{xlinkHref:"#mode-icon"})),Yt=Object(O.h)("svg",{viewBox:"0 0 100 100",style:"transform:rotate(90deg)"},Object(O.h)("use",{xlinkHref:"#mode-icon"})),Gt=Object(O.h)("svg",{viewBox:"0 0 100 100"},Object(O.h)("use",{xlinkHref:"#vertical-mode-icon"})),Zt=Object(O.h)("svg",{viewBox:"0 0 100 100"},Object(O.h)("rect",{x:"0",y:"0",width:"100",height:"100"})),Xt=Object(O.h)("svg",{viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z"})),Qt=Object(O.h)("div",{class:"footer__separator"}),$t=Object(O.h)("svg",{viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z"})),en=Object(O.h)("span",{class:"notifications-btn__dot"}),tn=Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#settings-icon"})),nn=Object(O.h)("a",{href:"https://webmakerapp.com/",target:"_blank",rel:"noopener noreferrer"},Object(O.h)("div",{class:"logo"})),on=Object(O.h)("span",{class:"web-maker-with-tag"},"Web Maker"),sn=Object(O.h)("svg",{style:"width:20px; height:20px; vertical-align:text-bottom",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"})),an=Object(O.h)("use",{xlinkHref:"#keyboard-icon"}),rn=Object(O.h)("use",{xlinkHref:"#twitter-icon"});let ln=class extends O.Component{constructor(e){super(e),this.state={isKeyboardShortcutsModalOpen:!1}}layoutBtnClickhandler(e){this.props.layoutBtnClickHandler(e)}render(){return Object(O.h)("div",{id:"footer",class:"footer"},Object(O.h)("div",{class:"footer__right  fr"},Object(O.h)("a",{onClick:this.props.saveHtmlBtnClickHandler,id:"saveHtmlBtn",class:"mode-btn  hint--rounded  hint--top-left hide-on-mobile","data-hint":"Save as HTML file"},Wt),zt,Object(O.h)("a",{href:"",onClick:this.props.codepenBtnClickHandler,id:"codepenBtn",class:"mode-btn  hint--rounded  hint--top-left  hide-on-mobile","aria-label":"Edit on CodePen"},Rt),Object(O.h)("a",{href:"",id:"screenshotBtn",class:"mode-btn  hint--rounded  hint--top-left show-when-extension",onClick:this.props.screenshotBtnClickHandler,"aria-label":"Take screenshot of preview"},Ut),Kt,Object(O.h)("a",{onClick:this.layoutBtnClickhandler.bind(this,1),id:"layoutBtn1",class:"mode-btn hide-on-mobile"},qt),Object(O.h)("a",{onClick:this.layoutBtnClickhandler.bind(this,2),id:"layoutBtn2",class:"mode-btn hide-on-mobile"},Jt),Object(O.h)("a",{onClick:this.layoutBtnClickhandler.bind(this,3),id:"layoutBtn3",class:"mode-btn hide-on-mobile"},Yt),Object(O.h)("a",{onClick:this.layoutBtnClickhandler.bind(this,5),id:"layoutBtn5",class:"mode-btn hide-on-mobile"},Gt),Object(O.h)("a",{onClick:this.layoutBtnClickhandler.bind(this,4),id:"layoutBtn4",class:"mode-btn hint--top-left hint--rounded  hide-on-mobile","aria-label":"Full Screen"},Zt),Object(O.h)("a",{class:"mode-btn hint--top-left hint--rounded hide-on-mobile","aria-label":"Detach Preview",onClick:this.props.detachedPreviewBtnHandler},Xt),Qt,Object(O.h)("a",{onClick:this.props.notificationsBtnClickHandler,id:"notificationsBtn",class:`notifications-btn  mode-btn  hint--top-left  hint--rounded ${this.props.hasUnseenChangelog?"has-new":""}`,"aria-label":"Notifications"},$t,en),Object(O.h)(y,{onClick:this.props.settingsBtnClickHandler,"data-event-category":"ui","data-event-action":"settingsBtnClick",class:"mode-btn  hint--top-left  hint--rounded","aria-label":"Settings"},tn)),nn,"\xA9",on," \xA0\xA0",Object(O.h)(y,{onClick:this.props.helpBtnClickHandler,"data-event-category":"ui","data-event-action":"helpButtonClick",class:"footer__link  hint--rounded  hint--top-right","aria-label":"Help"},sn),Object(O.h)(y,{onClick:this.props.keyboardShortcutsBtnClickHandler,"data-event-category":"ui","data-event-action":"keyboardShortcutButtonClick",class:"footer__link  hint--rounded  hint--top-right hide-on-mobile","aria-label":"Keyboard shortcuts"},Object(O.h)("svg",{style:{width:"20px",height:"20px",verticalAlign:"text-bottom"}},an)),Object(O.h)("a",{class:"footer__link  hint--rounded  hint--top-right","aria-label":"Tweet about 'Web Maker'",href:"http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,frontend,playground,offline",target:"_blank",rel:"noopener noreferrer"},Object(O.h)("svg",{style:{width:"20px",height:"20px",verticalAlign:"text-bottom"}},rn)),Object(O.h)(y,{onClick:this.props.supportDeveloperBtnClickHandler,"data-event-action":"supportDeveloperFooterBtnClick",class:"footer__link  ml-1  hint--rounded  hint--top-right hide-on-mobile","aria-label":"Support the developer by pledging some amount",target:"_blank",rel:"noopener noreferrer"},"Support the developer"))}};var dn=n("gfUn"),cn=n.n(dn);const hn={async getItem(e){var t=await window.db.getDb();return t.doc(`items/${e}`).get().then((e)=>e.data())},async getUserItemIds(){if(window.user)return new Promise((e)=>{e(window.user.items||{})});var e=await window.db.getDb();return e.doc(`users/${window.user.uid}`).get().then((e)=>e.exists?e.data().items:{})},async getAllItems(){var e=Date.now(),t=o();let n=await this.getUserItemIds();n=Object.getOwnPropertyNames(n||{}),Object(dn.log)("itemids",n),n.length||t.resolve([]);var s=await window.db.getDb();const i=[];return s.collection("items").where("createdBy","==",window.user.uid).onSnapshot(function(n){n.forEach(function(e){i.push(e.data())}),Object(dn.log)("Items fetched in ",Date.now()-e,"ms"),t.resolve(i)},function(){t.resolve([])}),t.promise},async setUser(){const e=await window.db.getDb();return e.doc(`users/${window.user.uid}`).set({items:{}})},async setItem(e,t){const n=o();var s;if(db.local.set({[e]:t},()=>{!window.IS_EXTENSION&&window.user&&navigator.onLine||n.resolve()}),"code"===e)return!1;if(window.user){var i=await window.db.getDb();Object(dn.log)(`Starting to save item ${e}`),t.createdBy=window.user.uid,s=i.collection("items").doc(e).set(t,{merge:!0}).then((e)=>{Object(dn.log)("Document written",e),n.resolve()}).catch(n.reject)}return window.user&&navigator.onLine?s:n.promise},saveItems(e){var t=o();return window.user?window.db.getDb().then((n)=>{const o=n.batch();for(var s in e)e[s].createdBy=window.user.uid,o.set(n.doc(`items/${s}`),e[s]),o.update(n.doc(`users/${window.user.uid}`),{[`items.${s}`]:!0}),window.user.items=window.user.items||{},window.user.items[s]=!0;o.commit().then(t.resolve)}):(window.db.local.set(e,t.resolve),window.db.local.get({items:{}},function(t){for(var n in e)t.items[n]=!0;window.db.local.set({items:t.items})})),t.promise},async removeItem(e){if(!window.user){var t=o();return window.db.local.remove(e,t.resolve),t.promise}const n=await window.db.getDb();return Object(dn.log)(`Starting to save item ${e}`),n.collection("items").doc(e).delete().then((e)=>{Object(dn.log)("Document removed",e)}).catch((e)=>Object(dn.log)(e))},async setItemForUser(e){if(!window.user)return window.db.local.get({items:{}},function(t){t.items[e]=!0,window.db.local.set({items:t.items})});const t=await window.db.getDb();return t.collection("users").doc(window.user.uid).update({[`items.${e}`]:!0}).then((t)=>{Object(dn.log)(`Item ${e} set for user`,t),window.user.items=window.user.items||{},window.user.items[e]=!0}).catch((e)=>Object(dn.log)(e))},async unsetItemForUser(e){if(!window.user)return window.db.local.get({items:{}},function(t){delete t.items[e],window.db.local.set({items:t.items})});const t=await window.db.getDb();return t.collection("users").doc(window.user.uid).update({[`items.${e}`]:firebase.firestore.FieldValue.delete()}).then((t)=>{delete window.user.items[e],Object(dn.log)(`Item ${e} unset for user`,t)}).catch((e)=>Object(dn.log)(e))}};var pn;const un={add:function(e){const t=$("#js-alerts-container");t.textContent=e,t.classList.add("is-active"),clearTimeout(pn),pn=setTimeout(function(){t.classList.remove("is-active")},2e3)}};window.alertsService=un;var mn=Object(O.h)("div",{class:"mt-1"},"No match found."),gn=Object(O.h)("span",{class:"show-when-selected"},"(Ctrl/\u2318 + F)"),fn=Object(O.h)("h2",{class:"opacity--30"},"Nothing saved here.");let bn=class extends O.Component{constructor(e){super(e),this.items=[],this.state={filteredItems:[]}}componentWillUpdate(e){this.props.items!==e.items&&(this.items=Object.values(e.items),this.items.sort(function(e,t){return t.updatedOn-e.updatedOn}),this.setState({filteredItems:this.items}))}componentDidUpdate(e){this.props.isOpen&&!e.isOpen&&(window.searchInput.value="")}onCloseIntent(){this.props.closeHandler()}itemClickHandler(e){this.props.itemClickHandler(e)}itemRemoveBtnClickHandler(t,n){n.stopPropagation(),this.props.itemRemoveBtnClickHandler(t)}itemForkBtnClickHandler(t,n){n.stopPropagation(),this.props.itemForkBtnClickHandler(t)}keyDownHandler(e){if(this.props.isOpen){const t=e.ctrlKey||e.metaKey,n=t&&70===e.keyCode,o=40===e.keyCode,s=38===e.keyCode,i=13===e.keyCode,a=$(".js-saved-item-tile.selected"),r=0!==$all(".js-saved-item-tile").length;if((o||s)&&r){const e=o?"nextUntil":"previousUntil";a?(a.classList.remove("selected"),a[e](".js-saved-item-tile:not(.hide)").classList.add("selected")):$(".js-saved-item-tile:not(.hide)").classList.add("selected"),$(".js-saved-item-tile.selected").scrollIntoView(!1)}if(i&&a){const e=this.props.items[a.dataset.itemId];console.log("opening",e),this.props.itemClickHandler(e),v("ui","openItemKeyboardShortcut")}if(n){e.preventDefault();const t=this.props.items[a.dataset.itemId];this.props.itemForkBtnClickHandler(t),v("ui","forkKeyboardShortcut")}}}mergeImportedItems(e){var t=[],n={};const s=o(),i={};this.items.forEach((e)=>i[e.id]=e),e.forEach((e)=>{i[e.id]?t.push(e.id):(c("merging",e.id),n[e.id]=e)});var a=e.length-t.length;if(t.length){var r=confirm(t.length+" creations already exist. Do you want to replace them?");r&&(c("shouldreplace",r),e.forEach((e)=>{n[e.id]=e}),a=e.length)}return a?hn.saveItems(n).then(()=>{s.resolve(),un.add(a+" creations imported successfully."),v("fn","itemsImported",a)}):s.resolve(),this.props.closeHandler(),s.promise}importFileChangeHandler(t){var e=t.target.files[0],n=new FileReader;n.addEventListener("load",(e)=>{var t;try{t=JSON.parse(e.target.result),c(t),this.mergeImportedItems(t)}catch(e){c(e),alert("Oops! Selected file is corrupted. Please select a file that was generated by clicking the \"Export\" button.")}}),n.readAsText(e,"utf-8")}importBtnClickHandler(t){var e=document.createElement("input");e.type="file",e.style.display="none",e.accept="accept=\"application/json",document.body.appendChild(e),e.addEventListener("change",this.importFileChangeHandler.bind(this)),e.click(),v("ui","importBtnClicked"),t.preventDefault()}searchInputHandler(t){const e=t.target.value;e?this.setState({filteredItems:this.items.filter((t)=>-1!==t.title.toLowerCase().indexOf(e))}):this.setState({filteredItems:this.items}),v("ui","searchInputType")}render(){return Object(O.h)("div",{id:"js-saved-items-pane",class:`saved-items-pane ${this.props.isOpen?"is-open":""}`,onKeyDown:this.keyDownHandler.bind(this)},Object(O.h)("button",{onClick:this.onCloseIntent.bind(this),class:"btn  saved-items-pane__close-btn",id:"js-saved-items-pane-close-btn"},"X"),Object(O.h)("div",{class:"flex flex-v-center",style:"justify-content: space-between;"},Object(O.h)("h3",null,"My Library (",this.items.length,")"),Object(O.h)("div",{class:"main-header__btn-wrap"},Object(O.h)("a",{onClick:this.props.exportBtnClickHandler,href:"",class:"btn btn-icon hint--bottom-left hint--rounded hint--medium","aria-label":"Export all your creations into a single importable file."},"Export"),Object(O.h)("a",{onClick:this.importBtnClickHandler.bind(this),href:"",class:"btn btn-icon hint--bottom-left hint--rounded hint--medium","aria-label":"Only the file that you export through the 'Export' button can be imported."},"Import"))),Object(O.h)("input",{id:"searchInput",class:"search-input",onInput:this.searchInputHandler.bind(this),placeholder:"Search your creations here..."}),Object(O.h)("div",{id:"js-saved-items-wrap",class:"saved-items-pane__container"},!this.state.filteredItems.length&&this.items.length&&mn,this.state.filteredItems.map((e)=>Object(O.h)("div",{class:"js-saved-item-tile saved-item-tile","data-item-id":e.id,onClick:this.itemClickHandler.bind(this,e)},Object(O.h)("div",{class:"saved-item-tile__btns"},Object(O.h)("a",{class:"js-saved-item-tile__fork-btn  saved-item-tile__btn hint--left hint--medium","aria-label":"Creates a duplicate of this creation (Ctrl/\u2318 + F)",onClick:this.itemForkBtnClickHandler.bind(this,e)},"Fork",gn),Object(O.h)("a",{class:"js-saved-item-tile__remove-btn  saved-item-tile__btn hint--left","aria-label":"Remove",onClick:this.itemRemoveBtnClickHandler.bind(this,e)},"X")),Object(O.h)("h3",{class:"saved-item-tile__title"},e.title),Object(O.h)("span",{class:"saved-item-tile__meta"},"Last updated: ",d(e.updatedOn)))),!this.items.length&&fn))}};const vn=[{url:"https://code.jquery.com/jquery-3.2.1.min.js",label:"jQuery",type:"js"},{url:"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",label:"Bootstrap 3",type:"js"},{url:"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js",label:"Bootstrap 4",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js",label:"Foundation",type:"js"},{url:"https://semantic-ui.com/dist/semantic.min.js",label:"Semantic UI",type:"js"},{url:"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js",label:"Angular",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js",label:"React",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js",label:"React DOM",type:"js"},{url:"https://unpkg.com/vue/dist/vue.min.js",label:"Vue.js",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js",label:"Three.js",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js",label:"D3",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js",label:"P5.js",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js",label:"P5.js DOM",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js",label:"P5.js Sound",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js",label:"Underscore",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js",label:"Greensock TweenMax",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js",label:"UIkit 2",type:"js"},{url:"https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js",label:"UIkit 3",type:"js"}],Cn=[{url:"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",label:"Bootstrap 3",type:"css"},{url:"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css",label:"Bootstrap 4",type:"css"},{url:"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css",label:"Foundation",type:"css"},{url:"https://semantic-ui.com/dist/semantic.min.css",label:"Semantic UI",type:"css"},{url:"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css",label:"Bulma",type:"css"},{url:"https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.5.0/hint.min.css",label:"Hint.css",type:"css"},{url:"https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css",label:"Tailwind.css",type:"css"},{url:"https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css",label:"UIkit 2",type:"css"},{url:"https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css",label:"UIkit 3",type:"css"},{url:"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css",label:"Animate.css",type:"css"},{url:"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",label:"FontAwesome 4",type:"css"},{url:"https://use.fontawesome.com/releases/v5.0.10/css/all.css",label:"FontAwesome 5",type:"css"}];let yn=class extends O.Component{componentDidMount(){this.t=this.wrap.querySelector("input,textarea"),this.filter=this.props.filter,this.selectedCallback=this.props.onSelect,setTimeout(()=>{requestIdleCallback(()=>{document.body.appendChild(this.list),this.list.style.position="fixed"})},100),this.t.addEventListener("input",(t)=>this.onInput(t)),this.t.addEventListener("keydown",(t)=>this.onKeyDown(t)),this.t.addEventListener("blur",(t)=>this.closeSuggestions(t)),this.list.addEventListener("mousedown",(t)=>this.onListMouseDown(t))}componentWillUnmount(){this.t.removeEventListener("input",(t)=>this.onInput(t)),this.t.removeEventListener("keydown",(t)=>this.onKeyDown(t)),this.t.removeEventListener("blur",(t)=>this.closeSuggestions(t)),this.list.removeEventListener("mousedown",(t)=>this.onListMouseDown(t))}get currentLineNumber(){return this.t.value.substr(0,this.t.selectionStart).split("\n").length}get currentLine(){var e=this.currentLineNumber;return this.t.value.split("\n")[e-1]}closeSuggestions(){this.list.classList.remove("is-open"),this.isShowingSuggestions=!1}getList(e){return fetch("https://api.cdnjs.com/libraries?search="+e).then((e)=>e.json().then((e)=>e.results))}replaceCurrentLine(e){var t=this.t.value.split("\n");t.splice(this.currentLineNumber-1,1,e),this.t.value=t.join("\n")}onInput(){var e=this.currentLine;if(e){if(-1!==e.indexOf("/")||e.match(/https*:\/\//))return;clearTimeout(this.timeout),this.timeout=setTimeout(()=>{this.loader.style.display="block",this.getList(e).then((e)=>{if(this.loader.style.display="none",!e.length)return void this.closeSuggestions();this.list.innerHTML="",this.filter&&(e=e.filter(this.filter));for(var t=0;t<Math.min(e.length,10);t++)this.list.innerHTML+=`<li data-url="${e[t].latest}"><a>${e[t].name}</a></li>`;this.isShowingSuggestions=!0,this.textareaBounds||(this.textareaBounds=this.t.getBoundingClientRect(),this.list.style.top=this.textareaBounds.bottom+"px",this.list.style.left=this.textareaBounds.left+"px",this.list.style.width=this.textareaBounds.width+"px"),this.list.classList.add("is-open")})},500)}}onKeyDown(e){var t;this.isShowingSuggestions&&(27===e.keyCode&&(this.closeSuggestions(),e.stopPropagation()),40===e.keyCode&&this.isShowingSuggestions?(t=this.list.querySelector(".selected"),t?(t.classList.remove("selected"),t.nextElementSibling.classList.add("selected")):this.list.querySelector("li:first-child").classList.add("selected"),this.list.querySelector(".selected").scrollIntoView(!1),e.preventDefault()):38===e.keyCode&&this.isShowingSuggestions?(t=this.list.querySelector(".selected"),t?(t.classList.remove("selected"),t.previousElementSibling.classList.add("selected")):this.list.querySelector("li:first-child").classList.add("selected"),this.list.querySelector(".selected").scrollIntoView(!1),e.preventDefault()):13===e.keyCode&&this.isShowingSuggestions&&(t=this.list.querySelector(".selected"),this.selectSuggestion(t.dataset.url),this.closeSuggestions()))}onListMouseDown(e){var t=e.target;t.parentElement.dataset.url&&this.selectSuggestion(t.parentElement.dataset.url)}selectSuggestion(e){this.t.focus(),v("ui","autoSuggestionLibSelected",e),this.selectedCallback?this.selectedCallback.call(null,e):this.replaceCurrentLine(e),this.closeSuggestions()}render(){return Object(O.h)("div",{class:`btn-group ${this.props.fullWidth?"flex-grow":""}`,ref:(e)=>this.wrap=e},this.props.children,Object(O.h)("ul",{ref:(e)=>this.list=e,class:"dropdown__menu autocomplete-dropdown"}),Object(O.h)("div",{ref:(e)=>this.loader=e,class:"loader autocomplete__loader",style:"display:none"}))}};var Sn=Object(O.h)("h1",null,"Add Library"),wn=Object(O.h)("svg",{style:"width: 30px; height: 30px;fill:#999"},Object(O.h)("use",{xlinkHref:"#search"})),kn=Object(O.h)("input",{type:"text",id:"externalLibrarySearchInput",class:"full-width",placeholder:"Type here to search libraries"}),xn=Object(O.h)("div",{class:"tar opacity--70"},Object(O.h)("small",null,"Powered by cdnjs")),Mn=Object(O.h)("option",{value:""},"-------"),_n=Object(O.h)("h3",{class:"mb-0"},"JS"),Ln=Object(O.h)("p",{class:"mt-0 help-text"},"Put each library in new line"),In=Object(O.h)("p",{style:"font-size: 0.8em;",class:"show-when-extension opacity--70"},"Note: You can load external scripts from following domains: localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in"),Hn=Object(O.h)("h3",{class:"mb-0"},"CSS"),An=Object(O.h)("p",{class:"mt-0 help-text"},"Put each library in new line");let jn=class extends O.Component{constructor(e){super(e),this.state={css:e.css||"",js:e.js||""}}onSelectChange(t){const e=t.target;if(e.value){const t=e.selectedOptions[0].dataset.type;"js"===t?this.setState({js:`${this.state.js}\n${e.value}`}):this.setState({css:`${this.state.css}\n${e.value}`}),v("ui","addLibrarySelect",e.selectedOptions[0].label),this.props.onChange({js:this.state.js,css:this.state.css}),e.value=""}}textareaBlurHandler(t,e){const n=t?t.target:e,o=n.dataset.lang;"js"===o?this.setState({js:n.value||""}):this.setState({css:n.value||""}),this.props.onChange({js:this.state.js,css:this.state.css})}suggestionSelectHandler(e){const t=e.match(/\.js$/)?window.externalJsTextarea:window.externalCssTextarea;t.value=`${t.value}\n${e}`,window.externalLibrarySearchInput.value="",this.textareaBlurHandler(null,t)}render(){return Object(O.h)("div",null,Sn,Object(O.h)("div",{class:"flex"},wn,Object(O.h)(yn,{fullWidth:!0,onSelect:this.suggestionSelectHandler.bind(this)},kn)),xn,Object(O.h)("div",{style:"margin:20px 0;"},"Choose from popular libraries:"," ",Object(O.h)("select",{name:"",id:"js-add-library-select",onChange:this.onSelectChange.bind(this)},Mn,Object(O.h)("optgroup",{label:"JavaScript Libraries"},vn.map((e)=>Object(O.h)("option",{"data-type":e.type,value:e.url},e.label))),Object(O.h)("optgroup",{label:"CSS Libraries"},Cn.map((e)=>Object(O.h)("option",{"data-type":e.type,value:e.url},e.label))))),_n,Ln,In,Object(O.h)("textarea",{onBlur:this.textareaBlurHandler.bind(this),"data-lang":"js",class:"full-width",id:"externalJsTextarea",cols:"30",rows:"5",placeholder:"Put each library in new line",value:this.state.js}),Hn,An,Object(O.h)("textarea",{onBlur:this.textareaBlurHandler.bind(this),"data-lang":"css",class:"full-width",id:"externalCssTextarea",cols:"30",rows:"5",placeholder:"Put each library in new line",value:this.state.css}))}};var Bn=n("ZUoI"),En=n.n(Bn);const On={logout(){En.a.auth().signOut()},login(e){var t;return"facebook"===e?t=new En.a.auth.FacebookAuthProvider:"twitter"===e?t=new En.a.auth.TwitterAuthProvider:"google"===e?(t=new En.a.auth.GoogleAuthProvider,t.addScope("https://www.googleapis.com/auth/userinfo.profile")):t=new En.a.auth.GithubAuthProvider,En.a.auth().signInWithPopup(t).then(function(){v("fn","loggedIn",e),window.db.local.set({lastAuthProvider:e})}).catch(function(e){c(e),"auth/account-exists-with-different-credential"===e.code&&alert("You have already signed up with the same email using different social login")})}};var Tn=Object(O.h)("h2",null,"Login / Signup"),Vn=Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#github-icon"})),Pn=Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#google-icon"})),Dn=Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#fb-icon"})),Fn=Object(O.h)("p",null,"Join a community of 50,000+ Developers");let Nn=class extends O.Component{login(t){const e=t.target.dataset.authProvider;v("ui","loginProviderClick",e),On.login(e)}componentDidMount(){window.db.local.get({lastAuthProvider:""},(e)=>{e.lastAuthProvider&&document.body.classList.add(`last-login-${e.lastAuthProvider}`)})}render(){return Object(O.h)("div",null,Tn,Object(O.h)("div",null,Object(O.h)("p",null,Object(O.h)("button",{type:"button",onClick:this.login.bind(this),class:"social-login-btn social-login-btn--github  btn btn-icon btn--big full-width hint--right hint--always","data-auth-provider":"github","data-hint":"You logged in with Github last time"},Vn,"Login with Github")),Object(O.h)("p",null,Object(O.h)("button",{type:"button",onClick:this.login.bind(this),class:"social-login-btn social-login-btn--google  btn btn-icon btn--big full-width hint--right hint--always","data-auth-provider":"google","data-hint":"You logged in with Google last time"},Pn,"Login with Google")),Object(O.h)("p",{class:"mb-2"},Object(O.h)("button",{type:"button",onClick:this.login.bind(this),class:"social-login-btn social-login-btn--facebook  btn btn-icon btn--big full-width hint--right hint--always","data-auth-provider":"facebook","data-hint":"You logged in with Facebook last time"},Dn,"Login with Facebook")),Fn))}};En.a.initializeApp({apiKey:"AIzaSyBl8Dz7ZOE7aP75mipYl2zKdLSRzBU2fFc",authDomain:"web-maker-app.firebaseapp.com",databaseURL:"https://web-maker-app.firebaseio.com",projectId:"web-maker-app",storageBucket:"web-maker-app.appspot.com",messagingSenderId:"560473480645"});var Wn=n("7vHL"),zn=Object.assign||function(e){for(var t,n=1;n<arguments.length;n++)for(var o in t=arguments[n],t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e};(()=>{async function e(){return s?s:(c("Initializing firestore"),s=new Promise((e,t)=>n?e(n):En.a.firestore().enablePersistence().then(function(){n=En.a.firestore(),c("firebase db ready",n),e(n)}).catch(function(e){t(e.code),"failed-precondition"===e.code?(alert("Opening Web Maker web app in multiple tabs isn't supported at present and it seems like you already have it opened in another tab. Please use in one tab."),v("fn","multiTabError")):"unimplemented"===e.code})),s)}const t=1;var n,s,i={get:(e,n)=>{const o={};"string"==typeof e?(o[e]=JSON.parse(window.localStorage.getItem(e)),setTimeout(()=>n(o),t)):(Object.keys(e).forEach((t)=>{const n=window.localStorage.getItem(t);o[t]=void 0===n||null===n?e[t]:JSON.parse(n)}),setTimeout(()=>n(o),t))},set:(e,n)=>{Object.keys(e).forEach((t)=>{window.localStorage.setItem(t,JSON.stringify(e[t]))}),setTimeout(()=>{if(n)return n()},t)},remove:(e,n)=>{window.localStorage.removeItem(e),setTimeout(()=>n(),t)}};const a=chrome&&chrome.storage?chrome.storage.local:i,r=chrome&&chrome.storage?chrome.storage.sync:i;window.db={getDb:e,getUser:async function(t){const n=await e();return n.doc(`users/${t}`).get().then((e)=>{if(!e.exists)return n.doc(`users/${t}`).set({},{merge:!0});const o=e.data();return zn(window.user,o),o})},getUserLastSeenVersion:async function(){const e=o();return r.get({lastSeenVersion:""},(t)=>{e.resolve(t.lastSeenVersion)}),e.promise},setUserLastSeenVersion:async function(t){if(r.set({lastSeenVersion:t},function(){}),window.user){const n=await e();n.doc(`users/${window.user.uid}`).update({lastSeenVersion:t})}},getSettings:function(e){const t=o();return r.get(e,(e)=>{t.resolve(e)}),t.promise},local:a,sync:r}})();var Rn=Object(O.h)("div",null,Object(O.h)("h1",null,"Whats new?"),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"3.2.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"\uD83D\uDE80 Loop timeout setting"),": You now have a setting to tweak the maximum timeout of a loop iteration before it's marked as infinite loop."),Object(O.h)("li",null,Object(O.h)("strong",null,"\u267F\uFE0F Accessibility"),": Modals now have proper keyboard navigation integrated."),Object(O.h)("li",null,Object(O.h)("strong",null,"\u267F\uFE0F Accessibility"),": Color contrast improvements."),Object(O.h)("li",null,"\uD83D\uDE80 Popular libraries list updated. Thanks",Object(O.h)("a",{href:"https://github.com/diomed",target:"_blank"},"@diomed")," ","&"," ",Object(O.h)("a",{href:"https://github.com/leninalbertolp",target:"_blank"},"@leninalbertolp")),Object(O.h)("li",null,Object(O.h)("strong",null,"\uD83D\uDD27 Bugfix"),": Modal take up appropriate width instead of spanning full width."),Object(O.h)("br",null),Object(O.h)("li",null,Object(O.h)("strong",null,"\uD83D\uDE80 Announcement"),": Hi! I am Kushagra Gour (creator of Web Maker) and I have launched a",Object(O.h)("a",{href:"https://patreon.com/kushagra",target:"_blank"},"Patreon campaign"),". If you love Web Maker, consider pledging to",Object(O.h)("a",{href:"https://patreon.com/kushagra",target:"_blank"},"support me")," ",":)"),Object(O.h)("li",null,Object(O.h)("a",{href:"https://github.com/chinchang/web-maker/issues",target:"_blank"},"Suggest features or report bugs.")),Object(O.h)("li",null,"Web Maker now has more than 50K weekly active users! Thank you for being a part of this community of awesome developers. If you find Web Maker helpful,",Object(O.h)("a",{href:"https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews",target:"_blank",class:"btn"},"Please rate Web Maker ",Object(O.h)("span",{class:"star"})),"\xA0",Object(O.h)("a",{href:"http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension",target:"_blank",target:"_blank",class:"btn"},"Share it"),"\xA0",Object(O.h)("a",{"aria-label":"Support the developer","d-click":"openSupportDeveloperModal","data-event-action":"supportDeveloperChangelogBtnClick",class:"btn btn-icon"},"Support the developer")))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"3.1.1"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),": Fix the \"Run\" button not refreshing the preview after release 3.0.4."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"3.1.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Mobile Support (app only)."),": Make the Web Maker app usable on mobile. This is only for web app as Chrome extensions don't run on mobile."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"3.0.4"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),": Guarantee code doesn't execute when \"auto preview\" is off."),Object(O.h)("li",null,"Add link to our new",Object(O.h)("a",{href:"https://web-maker.slack.com",target:"_blank",rel:"noopener noreferrer"},"Slack channel")," ","\uD83E\uDD17."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"3.0.3"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix (extension)"),": \"Save as HTML\" file saves with correct extension."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"3.0.1"),Object(O.h)("ul",null,Object(O.h)("li",null,"After months of work, here is Web Maker 3.0.",Object(O.h)("a",{href:"https://medium.com/web-maker/web-maker-3-0-is-here-f158a40eeaee",target:"_blank",rel:"noopener noreferrer"},"Read the blog post about it"),"."),Object(O.h)("li",null,"Web Maker is no more just a Chrome extension, it is also available as web app that runs offline just like the extension! Checkout it out ->",Object(O.h)("a",{href:"https://webmakerapp.com/app/",target:"_blank",rel:"noopener noreferrer"},"https://webmakerapp.com/app/"),"."),Object(O.h)("li",null,"Now use Web Maker web app on any modern browser (tested with Chrome and Firefox)."),Object(O.h)("li",null,Object(O.h)("strong",null,"User Accounts")," - The much requested user accounts are here. Now maintain your account and store all your creations in the cloud and access them anywhere anytime."),Object(O.h)("li",null,Object(O.h)("strong",null,"New layout mode")," - One more layout mode, that lets you align all the panes vertically."),Object(O.h)("li",null,Object(O.h)("strong",null,"No more restriction on scripts (Web app only)")," - If you are using the web app, there is no more a restriction to load scripts from only specific domains. Load any script!"),Object(O.h)("li",null,Object(O.h)("strong",null,"Inline scripts (Web app only)")," - The restriction of writing JavaScript only in JS pane is also removed."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.9.7"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("a",{href:"https://tailwindcss.com/",target:"_blank",rel:"noopener noreferrer"},"Tailwind CSS")," ","added to popular CSS libraries list. Thanks",Object(O.h)("a",{href:"https://github.com/diomed",target:"_blank",rel:"noopener noreferrer"},"diomed"),"."),Object(O.h)("li",null,"Popular libraries list updated. Thanks",Object(O.h)("a",{href:"https://github.com/diomed",target:"_blank",rel:"noopener noreferrer"},"diomed"),"."),Object(O.h)("li",null,Object(O.h)("strong",null,"Dev"),": Bug fixes and code refactoring to make things simple. Thanks",Object(O.h)("a",{href:"https://github.com/iamandrewluca",target:"_blank",rel:"noopener noreferrer"},"iamandrewluca"),"."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.9.6"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),": Fix close buttons not working in notifications and keyboard shortcuts modal."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),": Fix keyboard shortcut to see keyboard shortcuts :) Thanks",Object(O.h)("a",{href:"https://github.com/ClassicOldSong",target:"_blank",rel:"noopener noreferrer"},"ClassicOldSong"),"."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.9.5"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("a",{href:"https://medium.com/web-maker/release-2-9-5-add-library-search-pane-collapsing-ux-improvements-more-1085216c1301",target:"_blank",rel:"noopener noreferrer"},"Read blog post about this release.")),Object(O.h)("li",null,Object(O.h)("strong",null,"Keyboard shortcuts panel"),": Add a list of all keyboard shotcuts. Access with",Object(O.h)("code",null," Ctrl/\u2318 + Shift + ?")," or click keyboard button in footer."),Object(O.h)("li",null,Object(O.h)("strong",null,"Add external library"),": Better UX for searching third party libraries."),Object(O.h)("li",null,Object(O.h)("strong",null,"Improvement"),": Code panes now go fullscreen when double-clicked on their headers - which is much more intuitive behavior based on feedback from lot of developers."),Object(O.h)("li",null,Object(O.h)("strong",null,"Improvement"),": Add",Object(O.h)("code",null,"allowfullscreen")," attribute on iframes. Thanks",Object(O.h)("a",{href:"https://github.com/ClassicOldSong",target:"_blank",rel:"noopener noreferrer"},"ClassicOldSong"),"."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Stop screenlog.js from showing up in the exported HTML."),Object(O.h)("li",null,"Popular external libraries list updated. Thanks",Object(O.h)("a",{href:"https://github.com/jlapitan",target:"_blank",rel:"noopener noreferrer"},"jlapitan"),"."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.9.4"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Improvement"),": Atomic CSS (Atomizer) has been updated to latest version. Now you can do things like psuedo elements. Learn More."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Logging circular objects is now possible. It won't show in the Web Maker console, but will show fine in browser's console."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Console's z-index issue has been fixed."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.9.3"),Object(O.h)("ul",null,Object(O.h)("li",null,"Choose the save location while exporting your saved creations. Now easily sync them to your Dropbox or any cloud storage."),Object(O.h)("li",null,"All modals inside the app now have a close button."),Object(O.h)("li",null,"Checkbox that showed on clicking a boolean value is now removed. Thanks",Object(O.h)("a",{href:"https://github.com/gauravmuk",target:"_blank",rel:"noopener noreferrer"},"Gaurav Nanda"),"."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Screenshots on retina device are now correct. Thanks",Object(O.h)("a",{href:"https://github.com/AshBardhan",target:"_blank",rel:"noopener noreferrer"},"Ashish Bardhan"),"."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Double console log in detached mode fixed."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Console.clear now works in detached mode too."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - DOCTYPE added in preview."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Typo correction in README. Thanks",Object(O.h)("a",{href:"https://github.com/AdilMah",target:"_blank",rel:"noopener noreferrer"},"Adil Mahmood"),"."),Object(O.h)("li",null,"gstatic.com is available to load external JavaScripts from."),Object(O.h)("li",null,"Popular libraries list updated. Thanks",Object(O.h)("a",{href:"https://github.com/diomed",target:"_blank",rel:"noopener noreferrer"},"diomed"),"."),Object(O.h)("li",null,"Added",Object(O.h)("a",{href:"https://github.com/chinchang/web-maker/blob/master/CONTRIBUTING.md",target:"_blank",rel:"noopener noreferrer"},"contribution guidelines")," ","in the Github repository."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.9.2"),Object(O.h)("ul",null,Object(O.h)("li",null,"Minor bug fixes."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.9.1"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("a",{href:"https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6",target:"_blank",rel:"noopener noreferrer"},"Read blog post about last release.")),Object(O.h)("li",null,"Use Ctrl/Cmd+D to select next occurence of matching selection."),Object(O.h)("li",null,"Improve onboard experience."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.9.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("a",{href:"https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6",target:"_blank",rel:"noopener noreferrer"},"Read blog post about this release.")),Object(O.h)("li",null,Object(O.h)("strong",null,"Detached Preview")," - Yes, you read that correct! You can now detach your preview and send it to your secondary monitor."),Object(O.h)("li",null,Object(O.h)("strong",null,"Find & Replace")," - Long awaited, now its there. Ctrl/Cmd+f to find and add Alt to replace."),Object(O.h)("li",null,Object(O.h)("strong",null,"Atomic CSS (Atomizer) configurations")," - Add custom config for Atomic CSS.",Object(O.h)("a",{href:"https://github.com/acss-io/atomizer#api",target:"_blank",rel:"noopener noreferrer"},"Read more"),"."),Object(O.h)("li",null,Object(O.h)("strong",null,"Light mode")," - This new setting makes Web Maker drop some heavy effects like blur etc to gain more performance. Thanks",Object(O.h)("a",{href:"https://github.com/iamandrewluca",target:"_blank",rel:"noopener noreferrer"},"Andrew"),"."),Object(O.h)("li",null,Object(O.h)("strong",null,"Preserve logs setting")," - Choose whether or not to preserve logs across preview refreshes. Thanks",Object(O.h)("a",{href:"https://github.com/BasitAli",target:"_blank",rel:"noopener noreferrer"},"Basit"),"."),Object(O.h)("li",null,Object(O.h)("strong",null,"Line wrap setting")," - As the name says."),Object(O.h)("li",null,"Semantic UI added to popular libraries."),Object(O.h)("li",null,"Bootstrap, Vue, UI-Kit and more updated to latest versions in popular libraries."),Object(O.h)("li",null,"UX improvements in settings UI"),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Trigger preview refresh anytime with Ctrl/\u2318 + Shift + 5. Even with auto-preview on."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.8.1"),Object(O.h)("ul",null,Object(O.h)("li",null,"Vue.js & UIKit version updated to latest version in 'Add Library' list."),Object(O.h)("li",null,"UTF-8 charset added to preview HTML to support universal characters."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.8.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("a",{href:"https://medium.com/web-maker/release-v2-8-is-out-f44e6ea5d9c4",target:"_blank",rel:"noopener noreferrer"},"Read blog post about this release.")),Object(O.h)("li",null,Object(O.h)("strong",null,"Auto Save")," - Your creations now auto-save after your first manual save. This is configurable from settings."),Object(O.h)("li",null,Object(O.h)("strong",null,"Base2Tone-Meadow Editor Theme")," - First user contributed theme. Thanks to Diomed."),Object(O.h)("li",null,Object(O.h)("strong",null,"Use System Fonts")," - You can now use any of your existing system fonts in the editor!"),Object(O.h)("li",null,Object(O.h)("strong",null,"Matching Tag Highlight")," - Cursor over any HTML tag would highlight the matching pair tag."),Object(O.h)("li",null,"Auto-completion suggestion can now be switched off from settings."),Object(O.h)("li",null,Object(O.h)("strong",null,"Improvement")," - Stop white flicker in editor when the app opens."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Add Babel Polyfill to enable use of next-gen built-ins like Promise or WeakMap."),Object(O.h)("li",null,"Vue.js version updated to 2.4.0 in popular library list."),Object(O.h)("li",null,"Downloads permission is optional. Asked only when you take screenshot."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.7.2"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"External Libraries")," - Add Foundation.js and update UIKit 3 to latest beta."),Object(O.h)("li",null,Object(O.h)("strong",null,"rawgit.com")," &",Object(O.h)("strong",null,"wzrd.in")," domains are now allowed for loading external libraries from."),Object(O.h)("li",null,"Minor booting speed improvements"))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.7.1"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Framer.js support")," - You can now load the latest framer.js library from",Object(O.h)("a",{href:"https://builds.framerjs.com/",target:"_blank",rel:"noopener noreferrer"},"framer builds page")," ","and start coding framer prototypes."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),": Edit on CodePen is back in action."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),": Autocompletion menu doesn't show on cut and paste now."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),": Updated & fixed urls of some common external libraries to latest versions. UIKit3 & Bootstrap 4\u03B1 are now in the list."),Object(O.h)("li",null,"Preprocessor selector are now more accessible."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.7.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Fork any creation!"),": Now you can fork any existing creation of yours to start a new work based on it. One big use case of this feature is \"Templates\"!",Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://kushagragour.in/blog/2017/05/web-maker-fork-templates/?utm_source=webmakerapp&utm_medium=referral"},"Read more about it"),"."),Object(O.h)("li",null,Object(O.h)("strong",null,"Fonts \uD83D\uDE0D "),": Super-awesome 4 fonts (mostly with ligature support) now available to choose from. Fira Code is the default font now."),Object(O.h)("li",null,"Updated most used external libraries to latest versions."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),": Add missing Bootstrap JS file to most used external libraries list."),Object(O.h)("li",null,"Several other minor bugfixes and improvements to make Web Maker awesome!"),Object(O.h)("li",null,"Great news to share with you - Web Maker has been featured on the Chrome Webstore homepage! Thanks for all the love :)"))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.6.1"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),": Emojis vanishing while exporting to Codepen has been fixed."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),":",Object(O.h)("code",null,"console.clear()")," now doesn't error and clears the inbuilt console."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix"),": External libraries added to the creation are exported as well to Codepen."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.6.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"The \"Console\""),": The most awaited feature is here! There is now an inbuilt console to see your logs, errors and for quickly evaluating JavaScript code inside your preview. Enjoy! I also a",Object(O.h)("a",{href:"https://kushagragour.in/blog/2017/05/web-maker-console-is-here/?utm_source=webmakerapp&utm_medium=referral",target:"_blank",rel:"noopener noreferrer"},"blog post about it"),"."),Object(O.h)("li",null,"Number slider which popped on clicking any number in the code has been removed due to poor user experience."),Object(O.h)("li",null,"Minor usability improvements."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.5.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Atomic CSS"),": Use can now use Atomic CSS(ACSS) in your work!",Object(O.h)("a",{href:"https://acss.io/",target:"_blank",rel:"noopener noreferrer"},"Read more about it here"),"."),Object(O.h)("li",null,Object(O.h)("strong",null,"Search your saved creations"),": Easily search through all your saved creations by title."),Object(O.h)("li",null,Object(O.h)("strong",null,"Configurable Auto-preview")," - You can turn off the auto preview in settings if you don't want the preview to update as you type."),Object(O.h)("li",null,Object(O.h)("strong",null,"Configurable refresh on resize")," - You can configure whether you want the preview to refresh when you resize the preview panel."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Fix indentation",Object(O.h)("a",{href:"https://github.com/chinchang/web-maker/issues/104",target:"_blank",rel:"noopener noreferrer"},"issue")," ","with custom indentation size."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.4.2"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Improved infinite loop protection"),": Infinite loop protection is now faster and more reliable. And works without the need of Escodegen. Thanks to Ariya Hidayat!"),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Default parameters not working in JavaScript is fixed."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.4.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Import/Export"),": Your creations are most important. Now export all your creations into a single file as a backup that can be imported anytime & anywhere."),Object(O.h)("li",null,Object(O.h)("strong",null,"Editor themes"),": You have been heard. Now you can choose from a huge list of wonderful editor themes!"),Object(O.h)("li",null,Object(O.h)("strong",null,"Identation settings"),": Not a spaces fan? Switch to tabs and set your indentation size."),Object(O.h)("li",null,Object(O.h)("strong",null,"Vim key bindings"),": Rejoice Vim lovers!"),Object(O.h)("li",null,Object(O.h)("strong",null,"Code blast"),": Why don't you try coding with this switched on from the settings? Go on..."),Object(O.h)("li",null,Object(O.h)("strong",null,"Important"),": Due to security policy changes from Chrome 57 onwards, Web Maker now allows loading external JavaScript libraries only from certain whitelisted domains (localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/)"),Object(O.h)("li",null,"Save button now highlights when you have unsaved changes."),Object(O.h)("li",null,"Jade is now called Pug. Just a name change."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.3.2"),Object(O.h)("ul",null,Object(O.h)("li",null,"Update Babel to support latest and coolest ES6 features."),Object(O.h)("li",null,"Improve onboarding experience at first install."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.3.1"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Splitting of code and preview panes is remembered by the editor."),Object(O.h)("li",null,"Title of the creation is used for the file name when saving as HTML."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.3.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Add Library Autocompletion")," - Just start typing the name of library and you'll be shown matching libraries from cdnjs."),Object(O.h)("li",null,Object(O.h)("strong",null,"Preview Screenshot Capture")," - Want to grab a nice screenshot of your creation. You have it! Click and capture."),Object(O.h)("li",null,Object(O.h)("strong",null,"Auto Indent Code")," - Select your code and hit Shift-Tab to auto-indent it!"),Object(O.h)("li",null,Object(O.h)("strong",null,"Keyboard Navigation in Saved List")," - Now select your creation using arrow keys and hit ENTER to open it."),Object(O.h)("li",null,"Highlight active line in code panes."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Fix in generated title of new creation."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - HTML autocompletion is manual triggered now with Ctrl+Space."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.2.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Code Autocompletion")," - See code suggestions while you type!"),Object(O.h)("li",null,Object(O.h)("strong",null,"Full Screen Preview")," - Checkout your creation in a full-screen layout."),Object(O.h)("li",null,Object(O.h)("strong",null,"SASS")," - SASS support added for CSS."),Object(O.h)("li",null,Object(O.h)("strong",null,"Faster CSS update")," - Preview updates instantly without refresh when just CSS is changed."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Indentation fixed while going on new line."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Works even in Chrome Canary now. Though libraries can be added only through CDNs."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.1.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"TypeScript")," - Now you can code in TypeScript too!"),Object(O.h)("li",null,Object(O.h)("strong",null,"Stylus Preprocessor")," - Stylus supported adding for CSS."),Object(O.h)("li",null,Object(O.h)("strong",null,"Code Folding")," - Collapse large code blocks for easy editing."),Object(O.h)("li",null,Object(O.h)("strong",null,"Bugfix")," - Support JSX in JavaScript."),Object(O.h)("li",null,"Better onboarding for first time users."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"2.0.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Save and Load")," - Long pending and super-useful, now you can save your creations and resume them anytime later."),Object(O.h)("li",null,Object(O.h)("strong",null,"Insert JS & CSS")," - Load popular JavaScript & CSS libraries in your work without writing any code."),Object(O.h)("li",null,Object(O.h)("strong",null,"Collapsed Panes")," - Collapse/uncollapse code panes with a single click. Your pane configuration is even saved with every creation!"),Object(O.h)("li",null,Object(O.h)("strong",null,"Quick color & number change")," - Click on any color or number and experiment with quick values using a slider."),Object(O.h)("li",null,Object(O.h)("strong",null,"Linting")," - See your code errors right where you are coding."),Object(O.h)("li",null,"No more browser hang due to infinite loops!"))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"1.7.0"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("strong",null,"Preprocessors!")," - Enjoy a whole list of preprocessors for HTML(Jade & markdown), CSS(SCSS & LESS) and JavaScript(CoffeeScript & Babel)."),Object(O.h)("li",null,"More awesome font for code."))),Object(O.h)("div",{class:"notification"},Object(O.h)("span",{class:"notification__version"},"1.6.0"),Object(O.h)("ul",null,Object(O.h)("li",null,"You can now configure Web-Maker to not replace new tab page from the settings. It is always accessible from the icon in the top-right."),Object(O.h)("li",null,"Download current code as HTML file with Ctrl/\u2318 + S keyboard shortcut."),Object(O.h)("li",null,"New notifications panel added so you are always aware of the new changes in Web-Maker."))));const Un=["3024-day","3024-night","abcdef","ambiance","base2tone-meadow-dark","base16-dark","base16-light","bespin","blackboard","cobalt","colorforth","dracula","duotone-dark","duotone-light","eclipse","elegant","erlang-dark","hopscotch","icecoder","isotope","lesser-dark","liquibyte","material","mbo","mdn-like","midnight","monokai","neat","neo","night","panda-syntax","paraiso-dark","paraiso-light","pastel-on-dark","railscasts","rubyblue","seti","solarized dark","solarized light","the-matrix","tomorrow-night-bright","tomorrow-night-eighties","ttcn","twilight","vibrant-ink","xq-dark","xq-light","yeti","zenburn"];var Kn=Object(O.h)("h1",null,"Settings"),qn=Object(O.h)("h3",null,"Indentation"),Jn=Object(O.h)("datalist",{id:"indentationSizeList"},Object(O.h)("option",null,"1"),Object(O.h)("option",null,"2"),Object(O.h)("option",null,"3"),Object(O.h)("option",null,"4"),Object(O.h)("option",null,"5"),Object(O.h)("option",null,"6"),Object(O.h)("option",null,"7")),Yn=Object(O.h)("hr",null),Gn=Object(O.h)("h3",null,"Editor"),Zn=Object(O.h)("label",{class:"line"},"Default Preprocessors"),Xn=Object(O.h)("option",{value:"html"},"HTML"),Qn=Object(O.h)("option",{value:"markdown"},"Markdown"),$n=Object(O.h)("option",{value:"jade"},"Pug"),eo=Object(O.h)("option",{value:"css"},"CSS"),to=Object(O.h)("option",{value:"scss"},"SCSS"),no=Object(O.h)("option",{value:"sass"},"SASS"),oo=Object(O.h)("option",{value:"less"},"LESS"),so=Object(O.h)("option",{value:"stylus"},"Stylus"),io=Object(O.h)("option",{value:"acss"},"Atomic CSS"),ao=Object(O.h)("option",{value:"js"},"JS"),ro=Object(O.h)("option",{value:"coffee"},"CoffeeScript"),lo=Object(O.h)("option",{value:"es6"},"ES6 (Babel)"),co=Object(O.h)("option",{value:"typescript"},"TypeScript"),ho=Object(O.h)("option",{value:"FiraCode"},"Fira Code"),po=Object(O.h)("option",{value:"Inconsolata"},"Inconsolata"),uo=Object(O.h)("option",{value:"Monoid"},"Monoid"),mo=Object(O.h)("option",{value:"FixedSys"},"FixedSys"),go=Object(O.h)("option",{disabled:"disabled"},"----"),fo=Object(O.h)("option",{value:"other"},"Other font from system"),bo=Object(O.h)("hr",null),vo=Object(O.h)("h3",null,"Fun"),Co=Object(O.h)("hr",null),yo=Object(O.h)("h3",null,"Advanced"),So=Object(O.h)("div",{class:"help-text"},"If any loop iteration takes more than the defined time, it is detected as a potential infinite loop and further iterations are stopped.");let wo=class extends O.Component{updateSetting(t){this.props.onChange(t)}shouldComponentUpdate(){return!0}render(){return Object(O.h)("div",null,Kn,qn,Object(O.h)("div",{class:"line",title:"I know this is tough, but you have to decide one!"},Object(O.h)("label",null,Object(O.h)("input",{type:"radio",name:"indentation",value:"spaces",checked:"spaces"===this.props.prefs.indentation,onChange:this.updateSetting.bind(this),"data-setting":"indentWith"})," ","Spaces"),Object(O.h)("label",{class:"ml-1"},Object(O.h)("input",{type:"radio",name:"indentation",value:"tabs",checked:"tabs"===this.props.prefs.indentation,onChange:this.updateSetting.bind(this),"data-setting":"indentWith"})," ","Tabs")),Object(O.h)("label",{class:"line",title:""},"Indentation Size"," ",Object(O.h)("input",{type:"range",class:"va-m ml-1",value:this.props.prefs.indentSize,min:"1",max:"7",list:"indentationSizeList","data-setting":"indentSize",onChange:this.updateSetting.bind(this)}),Object(O.h)("span",{id:"indentationSizeValueEl"},this.props.prefs.indentSize),Jn),Yn,Gn,Object(O.h)("div",{class:"flex block--mobile"},Object(O.h)("div",null,Zn,Object(O.h)("div",{class:"flex line"},Object(O.h)("select",{style:"flex:1;margin-left:20px","data-setting":"htmlMode",value:this.props.prefs.htmlMode,onChange:this.updateSetting.bind(this)},Xn,Qn,$n),Object(O.h)("select",{style:"flex:1;margin-left:20px","data-setting":"cssMode",value:this.props.prefs.cssMode,onChange:this.updateSetting.bind(this)},eo,to,no,oo,so,io),Object(O.h)("select",{style:"flex:1;margin-left:20px","data-setting":"jsMode",value:this.props.prefs.jsMode,onChange:this.updateSetting.bind(this)},ao,ro,lo,co)),Object(O.h)("label",{class:"line"},"Theme",Object(O.h)("select",{style:"flex:1;margin:0 20px","data-setting":"editorTheme",value:this.props.prefs.editorTheme,onChange:this.updateSetting.bind(this)},Un.map((e)=>Object(O.h)("option",{value:e},e)))),Object(O.h)("label",{class:"line"},"Font",Object(O.h)("select",{style:"flex:1;margin:0 20px","data-setting":"editorFont",value:this.props.prefs.editorFont,onChange:this.updateSetting.bind(this)},ho,po,uo,mo,go,fo),"other"===this.props.prefs.editorFont&&Object(O.h)("input",{id:"customEditorFontInput",type:"text",value:this.props.prefs.editorCustomFont,placeholder:"Custom font name here","data-setting":"editorCustomFont",onChange:this.updateSetting.bind(this)})),Object(O.h)("label",{class:"line"},"Font Size"," ",Object(O.h)("input",{style:"width:70px",type:"number",value:this.props.prefs.fontSize,"data-setting":"fontSize",onChange:this.updateSetting.bind(this)})," ","px"),Object(O.h)("div",{class:"line"},"Key bindings",Object(O.h)("label",{class:"ml-1"},Object(O.h)("input",{type:"radio",name:"keymap",value:"sublime",checked:"sublime"===this.props.prefs.keymap,"data-setting":"keymap",onChange:this.updateSetting.bind(this)})," ","Sublime"),Object(O.h)("label",{class:"ml-1"},Object(O.h)("input",{type:"radio",name:"keymap",value:"vim",checked:"vim"===this.props.prefs.keymap,"data-setting":"keymap",onChange:this.updateSetting.bind(this)})," ","Vim"))),Object(O.h)("div",{class:"ml-2 ml-0--mobile"},Object(O.h)(M,{name:"lineWrap",title:"Toggle wrapping of long sentences onto new line",label:"Line wrap",pref:this.props.prefs.lineWrap,onChange:this.updateSetting.bind(this)}),Object(O.h)(M,{name:"refreshOnResize",title:"Your Preview will refresh when you resize the preview split",label:"Refresh preview on resize",pref:this.props.prefs.refreshOnResize,onChange:this.updateSetting.bind(this)}),Object(O.h)(M,{name:"autoComplete",title:"Turns on the auto-completion suggestions as you type",label:"Auto-complete suggestions",pref:this.props.prefs.autoComplete,onChange:this.updateSetting.bind(this)}),Object(O.h)(M,{name:"autoPreview",title:"Refreshes the preview as you code. Otherwise use the Run button",label:"Auto-preview",pref:this.props.prefs.autoPreview,onChange:this.updateSetting.bind(this)}),Object(O.h)(M,{name:"autoSave",title:"Auto-save keeps saving your code at regular intervals after you hit the first save manually",label:"Auto-save",pref:this.props.prefs.autoSave,onChange:this.updateSetting.bind(this)}),Object(O.h)(M,{name:"preserveLastCode",title:"Loads the last open creation when app starts",label:"Preserve last written code",pref:this.props.prefs.preserveLastCode,onChange:this.updateSetting.bind(this)}),Object(O.h)(M,{name:"replaceNewTab",title:"Turning this on will start showing Web Maker in every new tab you open",label:"Replace new tab page",pref:this.props.prefs.replaceNewTab,onChange:this.updateSetting.bind(this),showWhenExtension:!0}),Object(O.h)(M,{name:"preserveConsoleLogs",title:"Preserves the console logs across your preview refreshes",label:"Preserve console logs",pref:this.props.prefs.preserveConsoleLogs,onChange:this.updateSetting.bind(this)}),Object(O.h)(M,{name:"lightVersion",title:"Switch to lighter version for better performance. Removes things like blur etc.",label:"Fast/light version",pref:this.props.prefs.lightVersion,onChange:this.updateSetting.bind(this)}))),bo,vo,Object(O.h)("p",null,Object(O.h)(M,{title:"Enjoy wonderful particle blasts while you type",label:"Code blast!",name:"isCodeBlastOn",pref:this.props.prefs.isCodeBlastOn,onChange:this.updateSetting.bind(this)})),Co,yo,Object(O.h)("p",null,Object(O.h)("label",{class:"line",title:"This timeout is used to indentify a possible infinite loop and prevent it."},"Maximum time allowed in a loop iteration",Object(O.h)("input",{type:"number",value:this.props.prefs.infiniteLoopTimeout,"data-setting":"infiniteLoopTimeout",onChange:this.updateSetting.bind(this)})," ","ms"),So))}};n("zKjx");const ko="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";var xo=Object(O.h)("div",{class:"tac"},Object(O.h)("h1",null,"Support the Developer"),Object(O.h)("p",null,"Hi,"," ",Object(O.h)("a",{href:"https://kushagragour.in",target:"_blank",rel:"noopener noreferrer"},"Kushagra")," ","here! Web Maker is a free and open-source project. To keep myself motivated for working on such open-source and free"," ",Object(O.h)("a",{href:"https://kushagragour.in/lab/",target:"_blank",rel:"noopener noreferrer"},"side projects"),", I am accepting donations. Your pledge, no matter how small, will act as an appreciation towards my work and keep me going forward making Web Maker more awesome\uD83D\uDD25. So please consider donating. \uD83D\uDE4F\uD83C\uDFFC (could be as small as $1/month)."),Object(O.h)("div",{class:"flex flex-h-center",id:"onboardDontShowInTabOptionBtn","d-click":"onDontShowInTabClicked"},Object(O.h)("a",{class:"onboard-selection",href:"https://patreon.com/kushagra",target:"_blank",rel:"noopener noreferrer","aria-label":"Make a monthly pledge on Patreon"},Object(O.h)("img",{src:"patreon.png",height:"60",alt:"Become a patron image"}),Object(O.h)("h3",{class:"onboard-selection-text"},"Make a monthly pledge on Patreon"))),Object(O.h)("a",{href:"https://www.paypal.me/kushagragour",target:"_blank",rel:"noopener noreferrer","aria-label":"Make a one time donation on Paypal"},"Or, make a one time donation")),Mo=Object(O.h)("h1",null,"Keyboard Shortcuts"),_o=Object(O.h)("div",{class:"flex"},Object(O.h)("div",null,Object(O.h)("h2",null,"Global"),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + Shift + ?"),Object(O.h)("span",{class:"kbd-shortcut__details"},"See keyboard shortcuts")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + Shift + 5"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Refresh preview")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + S"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Save current creations")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + O"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Open list of saved creations")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl + L"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Clear console (works when console input is focused)")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Esc"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Close saved creations panel & modals"))),Object(O.h)("div",{class:"ml-2"},Object(O.h)("h2",null,"Editor"),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + F"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Find")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + G"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Select next match")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + Shift + G"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Select previous match")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + Opt/Alt + F"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Find & replace")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Shift + Tab"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Realign code")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + ]"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Indent code right")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + ["),Object(O.h)("span",{class:"kbd-shortcut__details"},"Indent code left")),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Tab"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Emmet code completion"," ",Object(O.h)("a",{href:"https://emmet.io/",target:"_blank",rel:"noopener noreferrer"},"Read more"))),Object(O.h)("p",null,Object(O.h)("span",{class:"kbd-shortcut__keys"},"Ctrl/\u2318 + /"),Object(O.h)("span",{class:"kbd-shortcut__details"},"Single line comment")))),Lo=Object(O.h)("h2",null,"Import your creations in your account"),Io=Object(O.h)("p",null,"It's okay if you don't want to. You can simply logout and access them anytime on this browser."),Ho=Object(O.h)("div",{class:"alerts-container",id:"js-alerts-container"});let Ao=class extends O.Component{shouldComponentUpdate(){return!1}render(){return Ho}};var jo=Object(O.h)("h1",null,Object(O.h)("div",{class:"web-maker-with-tag"},"Web Maker"),Object(O.h)("small",{style:"font-size:14px;"}," v3.2.0")),Bo=Object(O.h)("div",null,Object(O.h)("p",null,"Made with ",Object(O.h)("span",{style:"margin-right: 8px;"},"\uD83D\uDC96")," &"," ",Object(O.h)("span",{style:"margin-right: 8px;"},"\uD83D\uDE4C")," by"," ",Object(O.h)("a",{href:"https://twitter.com/chinchang457",target:"_blank",rel:"noopener noreferrer"},"Kushagra Gour")),Object(O.h)("p",null,Object(O.h)("a",{href:"/docs",target:"_blank",rel:"noopener noreferrer"},"Read the documentation"),"."),Object(O.h)("p",null,"Tweet out your feature requests, comments & suggestions to"," ",Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://twitter.com/webmakerApp"},"@webmakerApp"),"."),Object(O.h)("p",null,"Like this extension? Please"," ",Object(O.h)("a",{href:"https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews",target:"_blank",rel:"noopener noreferrer"},"rate it here"),"."),Object(O.h)("p",null,Object(O.h)("button",{"aria-label":"Support the developer","d-click":"openSupportDeveloperModal","data-event-action":"supportDeveloperHelpBtnClick",class:"btn btn-icon"},Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#gift-icon"})),"Support the developer")," ",Object(O.h)("a",{"aria-label":"Rate Web Maker",href:"https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews",target:"_blank",rel:"noopener noreferrer",class:"btn btn-icon"},Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#heart-icon"})),"Share Web Maker")," ",Object(O.h)("a",{"aria-label":"Chat",href:"https://web-maker.slack.com",target:"_blank",rel:"noopener noreferrer",class:"btn btn-icon"},Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#chat-icon"})),"Chat")," ",Object(O.h)("a",{"aria-label":"Report a Bug",href:"https://github.com/chinchang/web-maker/issues",target:"_blank",rel:"noopener noreferrer",class:"btn btn-icon"},Object(O.h)("svg",null,Object(O.h)("use",{xlinkHref:"#bug-icon"})),"Report a bug")),Object(O.h)("p",null,Object(O.h)("h3",null,"Awesome libraries used"),Object(O.h)("ul",null,Object(O.h)("li",null,Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://kushagragour.in/lab/hint/"},"Hint.css")," ","&",Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/chinchang/screenlog.js"},"Screenlog.js")," ","- By me :)"),Object(O.h)("li",null,Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://nathancahill.github.io/Split.js/"},"Split.js")," ","- Nathan Cahill"),Object(O.h)("li",null,Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://codemirror.net/"},"Codemirror")," ","- Marijn Haverbeke"),Object(O.h)("li",null,Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://emmet.io/"},"Emmet")," ","- Sergey Chikuyonok"),Object(O.h)("li",null,Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://esprima.org/"},"Esprima")," ","- Ariya Hidayat"),Object(O.h)("li",null,Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/enjalot/Inlet"},"Inlet")," ","- Ian Johnson"),Object(O.h)("li",null,Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://webmakerapp.com/"},"Web Maker!")," ","- whhat!"))),Object(O.h)("p",null,Object(O.h)("h3",null,"License"),"\"Web Maker\" is"," ",Object(O.h)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/chinchang/web-maker"},"open-source")," ","under the"," ",Object(O.h)("a",{href:"https://opensource.org/licenses/MIT",target:"_blank",rel:"noopener noreferrer"},"MIT License"),".")),Eo=Object(O.h)("div",{class:"tac"},Object(O.h)("svg",{width:"130px",height:"50px","aria-hidden":"true"},Object(O.h)("use",{xlinkHref:"#logo"})),Object(O.h)("h1",{style:"margin-top:20px"},"Welcome to Web Maker")),Oo=Object(O.h)("div",{class:"flex",style:"margin-top:40px;"},Object(O.h)("div",{class:"onboard-step show-when-app"},Object(O.h)("div",{class:"tac"},Object(O.h)("svg",{class:"onboard-step__icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"}))),Object(O.h)("p",null,"Open Web Maker anytime by visiting"," ",Object(O.h)("a",null,"https://webmakerapp.com/app/")," - Even when you are offline! It just works! \uD83D\uDE31 ",Object(O.h)("strong",null,"Drag the following bookmarklet")," on your bookmark bar to create a quick access shortcut:",Object(O.h)("a",{class:"ml-1 bookmarklet",href:"https://webmakerapp.com/app/"},Object(O.h)("svg",{width:"20",height:"20","aria-hidden":"true"},Object(O.h)("use",{xlinkHref:"#logo"})),"Web Maker"))),Object(O.h)("div",{class:"onboard-step show-when-extension"},Object(O.h)("div",{class:"tac"},Object(O.h)("svg",{class:"onboard-step__icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"}))),Object(O.h)("p",null,"Open Web Maker anytime by clicking the",Object(O.h)("svg",{class:"relative",style:"top:5px;",width:"40",height:"30"},Object(O.h)("use",{xlinkHref:"#logo"}))," ","button in top-right side of your browser.")),Object(O.h)("div",{class:"onboard-step"},Object(O.h)("div",{class:"tac"},Object(O.h)("svg",{class:"onboard-step__icon",viewBox:"0 0 24 24"},Object(O.h)("use",{xlinkHref:"#settings-icon"}))),Object(O.h)("p",null,"Configure and customize settings by clicking the gear icon (",Object(O.h)("svg",{style:"width:18px;height:18px;position:relative;top:3px;fill:#888",viewBox:"0 0 24 24"},Object(O.h)("use",{xlinkHref:"#settings-icon"})),") in bottom right of the app.")),Object(O.h)("div",{class:"onboard-step"},Object(O.h)("div",{class:"tac"},Object(O.h)("svg",{class:"onboard-step__icon",style:"stroke-width:0.3px;"},Object(O.h)("use",{xlinkHref:"#twitter-icon"}))),Object(O.h)("p",null,"Follow"," ",Object(O.h)("a",{href:"https://twitter.com/intent/follow?screen_name=webmakerApp",targe:"_blank",rel:"noopener noreferrer"},"@webmakerApp")," ","to know about the new upcoming features!"))),To=Object(O.h)("p",{class:"tac show-when-app"},"If you are an existing Chrome extension user, you can import your creations from there to here."," ",Object(O.h)("a",{href:"https://medium.com/web-maker/importing-exporting-your-creations-d92e7de5c3dc",target:"_blank"},"Learn how to export/import"),"."),Vo=Object(O.h)("p",{class:"tac"},Object(O.h)("button",{class:"btn btn--primary","d-click":"closeAllOverlays"},"Lets start!")),Po=Object(O.h)("symbol",{id:"logo",viewBox:"-145 -2 372 175"},Object(O.h)("g",{stroke:"none",strokeWidth:1,fill:"none",fillRule:"evenodd",transform:"translate(-145.000000, -1.000000)"},Object(O.h)("polygon",{id:"Path-1",fill:"#FF4600",points:"31 0 232 0 132 173.310547"}),Object(O.h)("polygon",{id:"Path-1",fill:"#FF6C00",points:"0 0 201 0 101 173.310547"}),Object(O.h)("polygon",{id:"Path-1",fill:"#FF6C00",transform:"translate(271.500000, 86.500000) scale(1, -1) translate(-271.500000, -86.500000) ",points:"171 0 372 0 272 173.310547"}),Object(O.h)("polygon",{id:"Path-1",fill:"#FF4600",transform:"translate(241.500000, 86.500000) scale(1, -1) translate(-241.500000, -86.500000) ",points:"141 0 342 0 242 173.310547"}))),Do=Object(O.h)("symbol",{id:"bug-icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z"})),Fo=Object(O.h)("symbol",{id:"google-icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z"})),No=Object(O.h)("symbol",{id:"fb-icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"})),Wo=Object(O.h)("symbol",{id:"github-icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"})),zo=Object(O.h)("symbol",{id:"settings-icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"})),Ro=Object(O.h)("symbol",{id:"twitter-icon",viewBox:"0 0 16 16"},Object(O.h)("path",{d:"M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809 c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"})),Uo=Object(O.h)("symbol",{id:"heart-icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"})),Ko=Object(O.h)("symbol",{id:"play-icon",viewBox:"0 0 24 24"},Object(O.h)("svg",null,Object(O.h)("path",{d:"M8,5.14V19.14L19,12.14L8,5.14Z"}))),qo=Object(O.h)("symbol",{id:"cancel-icon",viewBox:"0 0 24 24"},Object(O.h)("svg",null,Object(O.h)("path",{d:"M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z"}))),Jo=Object(O.h)("symbol",{id:"chevron-icon",viewBox:"0 0 24 24"},Object(O.h)("svg",null,Object(O.h)("path",{d:"M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"}))),Yo=Object(O.h)("symbol",{id:"chat-icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M8,14H6V12H8V14M8,11H6V9H8V11M8,8H6V6H8V8M15,14H10V12H15V14M18,11H10V9H18V11M18,8H10V6H18V8Z"})),Go=Object(O.h)("path",{d:"M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z"}),Zo=Object(O.h)("symbol",{id:"gift-icon",viewBox:"0 0 24 24"}),Xo=Object(O.h)("symbol",{id:"cross-icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"})),Qo=Object(O.h)("symbol",{id:"keyboard-icon",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z"})),$o=Object(O.h)("symbol",{id:"mode-icon",viewBox:"0 0 100 100"},Object(O.h)("g",null,Object(O.h)("rect",{x:0,y:0,width:28,height:47}),Object(O.h)("rect",{x:36,y:0,width:28,height:47}),Object(O.h)("rect",{x:72,y:0,width:28,height:47}),Object(O.h)("rect",{x:0,y:53,width:100,height:47}))),es=Object(O.h)("symbol",{id:"vertical-mode-icon",viewBox:"0 0 100 100"},Object(O.h)("g",null,Object(O.h)("rect",{x:0,y:0,width:20,height:100}),Object(O.h)("rect",{x:23,y:0,width:20,height:100}),Object(O.h)("rect",{x:46,y:0,width:20,height:100}),Object(O.h)("rect",{x:69,y:0,width:32,height:100}))),ns=Object(O.h)("symbol",{id:"search",viewBox:"0 0 24 24"},Object(O.h)("path",{d:"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"})),os=Object(O.h)("g",{fill:"none",fillRule:"evenodd",strokeWidth:10},Object(O.h)("circle",{cx:22,cy:22,r:1},Object(O.h)("animate",{attributeName:"r",begin:"0s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),Object(O.h)("animate",{attributeName:"stroke-opacity",begin:"0s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"})),Object(O.h)("circle",{cx:22,cy:22,r:1},Object(O.h)("animate",{attributeName:"r",begin:"-0.9s",dur:"1.8s",values:"1; 20",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.165, 0.84, 0.44, 1",repeatCount:"indefinite"}),Object(O.h)("animate",{attributeName:"stroke-opacity",begin:"-0.9s",dur:"1.8s",values:"1; 0",calcMode:"spline",keyTimes:"0; 1",keySplines:"0.3, 0.61, 0.355, 1",repeatCount:"indefinite"}))),ss=Object.assign||function(e){for(var t,n=1;n<arguments.length;n++)for(var o in t=arguments[n],t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e};const is={LOGIN_AND_SAVE_MESSAGE_SEEN:"loginAndsaveMessageSeen",ASKED_TO_IMPORT_CREATIONS:"askedToImportCreations"},as=15,rs="3.2.0";var ls=Object(O.h)("div",{class:"global-console-container",id:"globalConsoleContainerEl"}),ds=Object(O.h)(Ao,null),cs=Object(O.h)("form",{style:"display:none;",action:"https://codepen.io/pen/define",method:"POST",target:"_blank",id:"js-codepen-form"},Object(O.h)("input",{type:"hidden",name:"data",value:"{\"title\": \"New Pen!\", \"html\": \"<div>Hello, World!</div>\"}"})),hs=Object(O.h)(function(){return Rn},null),ps=Object(O.h)(Nn,null),us=Object(O.h)(function(){return Object(O.h)("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",style:{display:"none"}},Po,Do,Fo,No,Wo,zo,Ro,Uo,Ko,qo,Jo,Yo,Object(O.h)("symbol",{id:"gift-icon",viewBox:"0 0 24 24"},Go,Zo,Xo,Qo,$o,es,ns,Object(O.h)("symbol",{id:"loader-icon",viewBox:"0 0 44 44"},os)))},null),ms=Object(O.h)("form",{style:"display:none;",action:"https://codepen.io/pen/define",method:"POST",target:"_blank",id:"codepenForm"},Object(O.h)("input",{type:"hidden",name:"data",value:"{\"title\": \"New Pen!\", \"html\": \"<div>Hello, World!</div>\"}"}));let gs=class extends O.Component{constructor(){super(),this.AUTO_SAVE_INTERVAL=15000,this.state={isSavedItemPaneOpen:!1,isModalOpen:!1,isAddLibraryModalOpen:!1,isSettingsModalOpen:!1,isHelpModalOpen:!1,isNotificationsModalOpen:!1,isLoginModalOpen:!1,isProfileModalOpen:!1,isSupportDeveloperModalOpen:!1,isKeyboardShortcutsModalOpen:!1,isAskToImportModalOpen:!1,isOnboardModalOpen:!1,prefs:{},currentItem:{title:"",externalLibs:{js:"",css:""}}},this.defaultSettings={preserveLastCode:!0,replaceNewTab:!1,htmlMode:"html",jsMode:"js",cssMode:"css",isCodeBlastOn:!1,indentWith:"spaces",indentSize:2,editorTheme:"monokai",keymap:"sublime",fontSize:16,refreshOnResize:!1,autoPreview:!0,editorFont:"FiraCode",editorCustomFont:"",autoSave:!0,autoComplete:!0,preserveConsoleLogs:!0,lightVersion:!1,lineWrap:!0,infiniteLoopTimeout:1e3,layoutMode:2},this.prefs={},En.a.auth().onAuthStateChanged((e)=>{this.setState({isLoginModalOpen:!1}),e?(c("You are -> ",e),un.add("You are now logged in!"),this.setState({user:e}),window.user=e,!window.localStorage[is.ASKED_TO_IMPORT_CREATIONS]&&this.fetchItems(!1,!0).then((e)=>{e.length&&(this.oldSavedItems=e,this.oldSavedCreationsCount=e.length,this.setState({isAskToImportModalOpen:!0}),v("ui","askToImportModalSeen"))}),window.db.getUser(e.uid).then((t)=>{if(t){const t=ss({},this.state.prefs);ss(t,e.settings),this.setState({prefs:t}),this.updateSetting()}})):(this.setState({user:void 0}),delete window.user),this.updateProfileUi()})}componentWillMount(){var e;window.onunload=()=>{this.saveCode("code"),this.detachedWindow&&this.detachedWindow.close()},db.local.get({layoutMode:1,code:""},(t)=>{this.toggleLayout(t.layoutMode),this.state.prefs.layoutMode=t.layoutMode,t.code&&(e=t.code)}),db.getSettings(this.defaultSettings).then((t)=>{t.preserveLastCode&&e?(this.setState({unsavedEditCount:0}),e.id&&window.IS_EXTENSION?db.local.get(e.id,(t)=>{t[e.id]&&(c("Load item ",e.id),this.setCurrentItem(t[e.id]).then(()=>this.refreshEditor()))}):(c("Load last unsaved item",e),this.setCurrentItem(e).then(()=>this.refreshEditor()))):this.createNewItem(),ss(this.state.prefs,t),this.setState({prefs:this.state.prefs}),this.updateSetting()}),db.getUserLastSeenVersion().then((e)=>{e||(this.setState({isOnboardModalOpen:!0}),-1===document.cookie.indexOf("onboarded")&&(v("ui","onboardModalSeen",rs),document.cookie="onboarded=1"),window.db.setUserLastSeenVersion(rs)),e&&-1===r(e,rs)&&!window.localStorage.pledgeModalSeen&&(this.openSupportDeveloperModal(),window.localStorage.pledgeModalSeen=!0),e&&-1!==r(e,rs)||(this.setState({hasUnseenChangelog:!0}),this.hasSeenNotifications=!1)})}updateProfileUi(){this.state.user?document.body.classList.add("is-logged-in"):document.body.classList.remove("is-logged-in")}refreshEditor(){this.toggleLayout(this.state.currentItem.layoutMode||this.state.prefs.layoutMode),this.updateExternalLibCount(),this.contentWrap.refreshEditor()}forkItem(e){if(this.state.unsavedEditCount){var t=confirm("You have unsaved changes in your current work. Do you want to discard unsaved changes and continue?");if(!t)return}const n=JSON.parse(JSON.stringify(e));delete n.id,n.title="(Forked) "+e.title,n.updatedOn=Date.now(),this.setCurrentItem(n).then(()=>this.refreshEditor()),un.add(`"${e.title}" was forked`),v("fn","itemForked")}createNewItem(){var e=new Date;this.setCurrentItem({title:"Untitled "+e.getDate()+"-"+(e.getMonth()+1)+"-"+e.getHours()+":"+e.getMinutes(),html:"",css:"",js:"",externalLibs:{js:"",css:""},layoutMode:this.state.currentLayoutMode}).then(()=>this.refreshEditor()),un.add("New item created")}openItem(e){this.setCurrentItem(e).then(()=>this.refreshEditor()),un.add("Saved item loaded")}removeItem(e){var t=confirm(`Are you sure you want to delete "${e.title}"?`);t&&(hn.unsetItemForUser(e.id),hn.removeItem(e.id).then(()=>{un.add("Item removed.",e),this.state.currentItem.id===e.id&&this.createNewItem()}),delete this.state.savedItems[e.id],this.setState({savedItems:ss({},this.state.savedItems)}),v("fn","itemRemoved"))}setCurrentItem(e){const t=o();return e.htmlMode=e.htmlMode||this.state.prefs.htmlMode||P.HTML,e.cssMode=e.cssMode||this.state.prefs.cssMode||D.CSS,e.jsMode=e.jsMode||this.state.prefs.jsMode||F.JS,this.setState({currentItem:e},t.resolve),this.isAutoSavingEnabled=!1,this.setState({unsavedEditCount:0}),t.promise}saveBtnClickHandler(){v("ui","saveBtnClick",this.state.currentItem.id?"saved":"new"),this.saveItem()}populateItemsInSavedPane(){this.setState({savedItems:ss({},this.state.savedItems)}),this.toggleSavedItemsPane()}toggleSavedItemsPane(){this.setState({isSavedItemPaneOpen:!this.state.isSavedItemPaneOpen}),this.state.isSavedItemPaneOpen?window.searchInput.focus():window.searchInput.value="",document.body.classList[this.state.isSavedItemPaneOpen?"add":"remove"]("overlay-visible")}async fetchItems(e,t){var n=o();this.state.savedItems={};var s=[];return window.user&&!t?(s=await hn.getAllItems(),c("got items"),e&&s.forEach((e)=>{this.state.savedItems[e.id]=e}),n.resolve(s),n.promise):(db.local.get("items",(t)=>{var o=Object.getOwnPropertyNames(t.items||{});o.length||n.resolve([]),v("fn","fetchItems",o.length);for(let a=0;a<o.length;a++)db.local.get(o[a],(t)=>{e&&(this.state.savedItems[o[a]]=t[o[a]]),s.push(t[o[a]]),o.length===s.length&&n.resolve(s)})}),n.promise)}openSavedItemsPane(){this.setState({isFetchingItems:!0}),this.fetchItems(!0).then((e)=>{this.setState({isFetchingItems:!1}),this.populateItemsInSavedPane(e)})}openAddLibrary(){this.setState({isAddLibraryModalOpen:!0})}closeSavedItemsPane(){this.setState({isSavedItemPaneOpen:!1}),document.body.classList.remove("overlay-visible"),this.editorWithFocus&&this.editorWithFocus.focus()}componentDidMount(){document.body.style.height=`${window.innerHeight}px`,window.addEventListener("keydown",(e)=>{(e.ctrlKey||e.metaKey)&&83===e.keyCode&&(e.preventDefault(),this.saveItem(),v("ui","saveItemKeyboardShortcut")),(e.ctrlKey||e.metaKey)&&e.shiftKey&&53===e.keyCode?(e.preventDefault(),this.contentWrap.setPreviewContent(!0,!0),v("ui","previewKeyboardShortcut")):(e.ctrlKey||e.metaKey)&&79===e.keyCode?(e.preventDefault(),this.openSavedItemsPane(),v("ui","openCreationKeyboardShortcut")):(e.ctrlKey||e.metaKey)&&e.shiftKey&&191===e.keyCode?(e.preventDefault(),this.setState({isKeyboardShortcutsModalOpen:!this.state.isKeyboardShortcutsModalOpen}),v("ui","showKeyboardShortcutsShortcut")):27===e.keyCode&&this.closeAllOverlays()})}closeAllOverlays(){this.state.isSavedItemPaneOpen&&this.closeSavedItemsPane()}onExternalLibChange(e){c("onExternalLibChange"),this.state.currentItem.externalLibs={js:e.js,css:e.css},this.updateExternalLibCount(),this.setState({currentItem:ss({},this.state.currentItem)}),this.contentWrap.setPreviewContent(!0),un.add("Libraries updated.")}updateExternalLibCount(){var e=0;e+=this.state.currentItem.externalLibs.js.split("\n").filter((e)=>!!e).length,e+=this.state.currentItem.externalLibs.css.split("\n").filter((e)=>!!e).length,this.setState({externalLibCount:e})}toggleLayout(e){return e=500>window.innerWidth?2:e,this.state.currentLayoutMode===e?(this.contentWrap.resetSplitting(),void this.setState({currentLayoutMode:e})):void([1,2,3,4,5].forEach((e)=>{window[`layoutBtn${e}`].classList.remove("selected"),document.body.classList.remove(`layout-${e}`)}),$("#layoutBtn"+e).classList.add("selected"),document.body.classList.add("layout-"+e),this.setState({currentLayoutMode:e},()=>{this.contentWrap.resetSplitting(),this.contentWrap.setPreviewContent(!0)}))}layoutBtnClickHandler(e){this.saveSetting("layoutMode",e),v("ui","toggleLayoutClick",e),this.toggleLayout(e)}getCodePaneSizes(){var e;const t=this.state.currentLayoutMode;var n=2===t||5===t?"width":"height";try{e=[htmlCodeEl.style[n],cssCodeEl.style[n],jsCodeEl.style[n]]}catch(t){e=[33.33,33.33,33.33]}finally{return e}}getMainPaneSizes(){var e;const t=this.state.currentLayoutMode;var n=2===t?"height":"width";try{e=[+$("#js-code-side").style[n].match(/([\d.]+)%/)[1],+$("#js-demo-side").style[n].match(/([\d.]+)%/)[1]]}catch(t){e=[50,50]}finally{return e}}saveSetting(e,t){const n=o();return db.local.set({[e]:t},n.resolve),n.promise}saveCode(e){return this.state.currentItem.updatedOn=Date.now(),this.state.currentItem.layoutMode=this.state.currentLayoutMode,this.state.currentItem.sizes=this.getCodePaneSizes(),this.state.currentItem.mainSizes=this.getMainPaneSizes(),c("saving key",e||this.state.currentItem.id,this.state.currentItem),hn.setItem(e||this.state.currentItem.id,this.state.currentItem).then(function(){window.user&&!navigator.onLine?un.add("Item saved locally. Will save to account when you are online."):un.add("Item saved."),this.setState({unsavedEditCount:0})}.bind(this))}saveItem(){if(!window.user&&!window.localStorage[is.LOGIN_AND_SAVE_MESSAGE_SEEN]){const e=confirm("Saving without signing in will save your work only on this machine and this browser. If you want it to be secure & available anywhere, please login in your account and then save.\n\nDo you still want to continue saving locally?");if(window.localStorage[is.LOGIN_AND_SAVE_MESSAGE_SEEN]=!0,!e)return v("ui",is.LOGIN_AND_SAVE_MESSAGE_SEEN,"login"),this.closeAllOverlays(),void this.setState({isLoginModalOpen:!0});v("ui",is.LOGIN_AND_SAVE_MESSAGE_SEEN,"local")}var e=!this.state.currentItem.id;this.state.currentItem.id=this.state.currentItem.id||"item-"+l(),this.setState({isSaving:!0}),this.saveCode().then(()=>{this.setState({isSaving:!1}),!this.isAutoSavingEnabled&&this.state.prefs.autoSave&&(this.isAutoSavingEnabled=!0,un.add("Auto-save enabled."))}),e&&hn.setItemForUser(this.state.currentItem.id)}onCodeModeChange(e,t){const n=ss({},this.state.currentItem);n[`${e}Mode`]=t,this.setState({currentItem:n})}onCodeChange(e,t,n){this.state.currentItem[e]=t,n&&(this.setState({unsavedEditCount:this.state.unsavedEditCount+1}),0==this.state.unsavedEditCount%as&&this.state.unsavedEditCount>=as&&(window.saveBtn.classList.add("animated"),window.saveBtn.classList.add("wobble"),window.saveBtn.addEventListener("animationend",()=>{window.saveBtn.classList.remove("animated"),window.saveBtn.classList.remove("wobble")})))}onCodeSettingsChange(e,t){this.state.currentItem[`${e}Settings`]={acssConfig:t}}titleInputBlurHandler(t){this.state.currentItem.title=t.target.value,this.state.currentItem.id&&(this.saveItem(),v("ui","titleChanged"))}updateSetting(t){if(t){var e=t.target.dataset.setting,n={},o=t.target;c(e,"checkbox"===o.type?o.checked:o.value);const s=ss({},this.state.prefs);s[e]="checkbox"===o.type?o.checked:o.value,n[e]=s[e],this.setState({prefs:s}),db.sync.set(n,function(){un.add("Setting saved")}),window.user&&window.db.getDb().then((t)=>{t.collection("users").doc(window.user.uid).update({[`settings.${e}`]:this.state.prefs[e]}).then((t)=>{c(`Setting "${e}" for user`,t)}).catch((e)=>c(e))}),v("ui","updatePref-"+e,s[e])}const s=this.state.prefs;runBtn.classList[s.autoPreview?"add":"remove"]("hide"),this.contentWrap.applyCodemirrorSettings(this.state.prefs),s.autoSave?!this.autoSaveInterval&&(this.autoSaveInterval=setInterval(()=>{this.autoSaveLoop()},this.AUTO_SAVE_INTERVAL)):(clearInterval(this.autoSaveInterval),this.autoSaveInterval=null),document.body.classList[s.lightVersion?"add":"remove"]("light-version")}autoSaveLoop(){this.isAutoSavingEnabled&&this.state.unsavedEditCount&&this.saveItem()}loginBtnClickHandler(){this.setState({isLoginModalOpen:!0})}profileBtnClickHandler(){this.setState({isProfileModalOpen:!0})}logout(){if(this.state.unsavedEditCount){var e=confirm("You have unsaved changes. Do you still want to logout?");if(!e)return}v("fn","loggedOut"),On.logout(),this.setState({isProfileModalOpen:!1}),un.add("Log out successfull")}itemClickHandler(e){setTimeout(()=>{this.openItem(e)},350),this.toggleSavedItemsPane()}itemRemoveBtnClickHandler(e){this.removeItem(e)}itemForkBtnClickHandler(e){this.toggleSavedItemsPane(),setTimeout(()=>{this.forkItem(e)},350)}newBtnClickHandler(){if(v("ui","newBtnClick"),this.state.unsavedEditCount){var e=confirm("You have unsaved changes. Do you still want to create something new?");e&&this.createNewItem()}else this.createNewItem()}openBtnClickHandler(){v("ui","openBtnClick"),this.openSavedItemsPane()}detachedPreviewBtnHandler(){v("ui","detachPreviewBtnClick"),this.contentWrap.detachPreview()}notificationsBtnClickHandler(){return this.setState({isNotificationsModalOpen:!0}),this.state.isNotificationsModalOpen&&!this.hasSeenNotifications&&(this.hasSeenNotifications=!0,this.setState({hasUnseenChangelog:!1}),window.db.setUserLastSeenVersion(rs)),v("ui","notificationButtonClick",rs),!1}codepenBtnClickHandler(t){if(this.state.currentItem.cssMode===D.ACSS)return alert("Oops! CodePen doesn't supports Atomic CSS currently. \nHere is something you can still do -> https://medium.com/web-maker/sharing-your-atomic-css-work-on-codepen-a402001b26ab"),void t.preventDefault();var e={title:"A Web Maker experiment",html:this.state.currentItem.html,css:this.state.currentItem.css,js:this.state.currentItem.js,html_pre_processor:N[this.state.currentItem.htmlMode].codepenVal,css_pre_processor:N[this.state.currentItem.cssMode].codepenVal,js_pre_processor:N[this.state.currentItem.jsMode].codepenVal,css_external:this.state.currentItem.externalLibs.css.split("\n").join(";"),js_external:this.state.currentItem.externalLibs.js.split("\n").join(";")};this.state.currentItem.title.match(/Untitled\s\d\d*-\d/)||(e.title=this.state.currentItem.title),e=JSON.stringify(e),window.codepenForm.querySelector("input").value=e,window.codepenForm.submit(),v("ui","openInCodepen"),t.preventDefault()}saveHtmlBtnClickHandler(t){f(this.state.currentItem),v("ui","saveHtmlClick"),t.preventDefault()}runBtnClickHandler(){this.contentWrap.setPreviewContent(!0,!0),v("ui","runBtnClick")}exportItems(){b().then(()=>{this.fetchItems().then((e)=>{var t=new Date,n=["web-maker-export",t.getFullYear(),t.getMonth()+1,t.getDate(),t.getHours(),t.getMinutes(),t.getSeconds()].join("-");n+=".json";var o=new Blob([JSON.stringify(e,!1,2)],{type:"application/json;charset=UTF-8"});p(n,o),v("fn","exportItems")})})}exportBtnClickHandler(t){this.exportItems(),t.preventDefault(),v("ui","exportBtnClicked")}screenshotBtnClickHandler(t){this.contentWrap.getDemoFrame((e)=>{A(e.getBoundingClientRect())}),t.preventDefault()}openSupportDeveloperModal(t){this.setState({isSupportDeveloperModalOpen:!0}),t&&v("ui",t.target.dataset.eventAction)}supportDeveloperBtnClickHandler(t){this.openSupportDeveloperModal(t)}dontAskToImportAnymore(t){this.setState({isAskToImportModalOpen:!1}),window.localStorage[is.ASKED_TO_IMPORT_CREATIONS]=!0,t&&v("ui","dontAskToImportBtnClick")}importCreationsAndSettingsIntoApp(){this.mergeImportedItems(this.oldSavedItems).then(()=>{v("fn","oldItemsImported"),this.dontAskToImportAnymore()})}editorFocusHandler(e){this.editorWithFocus=e}modalOverlayClickHandler(){this.closeAllOverlays()}render(){return Object(O.h)("div",null,Object(O.h)("div",{class:"main-container"},Object(O.h)(S,{externalLibCount:this.state.externalLibCount,openBtnHandler:this.openBtnClickHandler.bind(this),newBtnHandler:this.newBtnClickHandler.bind(this),saveBtnHandler:this.saveBtnClickHandler.bind(this),loginBtnHandler:this.loginBtnClickHandler.bind(this),profileBtnHandler:this.profileBtnClickHandler.bind(this),addLibraryBtnHandler:this.openAddLibrary.bind(this),runBtnClickHandler:this.runBtnClickHandler.bind(this),isFetchingItems:this.state.isFetchingItems,isSaving:this.state.isSaving,title:this.state.currentItem.title,titleInputBlurHandler:this.titleInputBlurHandler.bind(this),user:this.state.user,unsavedEditCount:this.state.unsavedEditCount}),Object(O.h)(Nt,{currentLayoutMode:this.state.currentLayoutMode,currentItem:this.state.currentItem,onCodeChange:this.onCodeChange.bind(this),onCodeSettingsChange:this.onCodeSettingsChange.bind(this),onCodeModeChange:this.onCodeModeChange.bind(this),onRef:(e)=>this.contentWrap=e,prefs:this.state.prefs,onEditorFocus:this.editorFocusHandler.bind(this)}),ls,Object(O.h)(ln,{layoutBtnClickHandler:this.layoutBtnClickHandler.bind(this),helpBtnClickHandler:()=>this.setState({isHelpModalOpen:!0}),settingsBtnClickHandler:()=>this.setState({isSettingsModalOpen:!0}),notificationsBtnClickHandler:this.notificationsBtnClickHandler.bind(this),supportDeveloperBtnClickHandler:this.supportDeveloperBtnClickHandler.bind(this),detachedPreviewBtnHandler:this.detachedPreviewBtnHandler.bind(this),codepenBtnClickHandler:this.codepenBtnClickHandler.bind(this),saveHtmlBtnClickHandler:this.saveHtmlBtnClickHandler.bind(this),keyboardShortcutsBtnClickHandler:()=>this.setState({isKeyboardShortcutsModalOpen:!0}),screenshotBtnClickHandler:this.screenshotBtnClickHandler.bind(this),hasUnseenChangelog:this.state.hasUnseenChangelog})),Object(O.h)(bn,{items:this.state.savedItems,isOpen:this.state.isSavedItemPaneOpen,closeHandler:this.closeSavedItemsPane.bind(this),itemClickHandler:this.itemClickHandler.bind(this),itemRemoveBtnClickHandler:this.itemRemoveBtnClickHandler.bind(this),itemForkBtnClickHandler:this.itemForkBtnClickHandler.bind(this),exportBtnClickHandler:this.exportBtnClickHandler.bind(this)}),ds,cs,Object(O.h)(gt,{show:this.state.isAddLibraryModalOpen,closeHandler:()=>this.setState({isAddLibraryModalOpen:!1})},Object(O.h)(jn,{js:this.state.currentItem.externalLibs?this.state.currentItem.externalLibs.js:"",css:this.state.currentItem.externalLibs?this.state.currentItem.externalLibs.css:"",onChange:this.onExternalLibChange.bind(this)})),Object(O.h)(gt,{show:this.state.isNotificationsModalOpen,closeHandler:()=>this.setState({isNotificationsModalOpen:!1})},hs),Object(O.h)(gt,{extraClasses:"modal--settings",show:this.state.isSettingsModalOpen,closeHandler:()=>this.setState({isSettingsModalOpen:!1})},Object(O.h)(wo,{prefs:this.state.prefs,onChange:this.updateSetting.bind(this)})),Object(O.h)(gt,{extraClasses:"login-modal",show:this.state.isLoginModalOpen,closeHandler:()=>this.setState({isLoginModalOpen:!1})},ps),Object(O.h)(gt,{show:this.state.isProfileModalOpen,closeHandler:()=>this.setState({isProfileModalOpen:!1})},Object(O.h)(_,{user:this.state.user,logoutBtnHandler:this.logout.bind(this)})),Object(O.h)(B,{show:this.state.isHelpModalOpen,closeHandler:()=>this.setState({isHelpModalOpen:!1})}),Object(O.h)(L,{show:this.state.isSupportDeveloperModalOpen,closeHandler:()=>this.setState({isSupportDeveloperModalOpen:!1})}),Object(O.h)(I,{show:this.state.isKeyboardShortcutsModalOpen,closeHandler:()=>this.setState({isKeyboardShortcutsModalOpen:!1})}),Object(O.h)(j,{show:this.state.isAskToImportModalOpen,closeHandler:()=>this.setState({isAskToImportModalOpen:!1}),oldSavedCreationsCount:this.oldSavedCreationsCount,importBtnClickHandler:this.importCreationsAndSettingsIntoApp.bind(this),dontAskBtnClickHandler:this.dontAskToImportAnymore.bind(this)}),Object(O.h)(E,{show:this.state.isOnboardModalOpen,closeHandler:()=>this.setState({isOnboardModalOpen:!1})}),Object(O.h)(mt.a,{into:"body"},Object(O.h)("div",{class:"modal-overlay",onClick:this.modalOverlayClickHandler.bind(this)})),us,ms)}};t["default"]=gs}},["pwNi"]);