From de3dc48aee781537a083c3e8e2cca0db9479f154 Mon Sep 17 00:00:00 2001 From: Matt Price Date: Thu, 13 Dec 2018 14:52:33 -0500 Subject: [PATCH 1/6] add test for development version before setting `BASE_PATH` This change should make it possible to run web-maker in dev mode with no problems. --- src/utils.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/utils.js b/src/utils.js index ba6c662..8d7c26f 100644 --- a/src/utils.js +++ b/src/utils.js @@ -15,7 +15,12 @@ window.chrome.i18n = { window.$all = selector => [...document.querySelectorAll(selector)]; window.IS_EXTENSION = !!window.chrome.extension; -export const BASE_PATH = window.chrome.extension || window.DEBUG ? '/' : '/app'; +export const BASE_PATH = + window.chrome.extension || + window.DEBUG || + process.env.NODE_ENV == 'development' + ? '/' + : '/app'; var alphaNum = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; From 5bf9fbd7e73b3324f12a2ce1fe2d70d937f299b8 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Fri, 14 Dec 2018 12:19:10 +0530 Subject: [PATCH 2/6] Use strict equality --- src/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils.js b/src/utils.js index 8d7c26f..089f7a9 100644 --- a/src/utils.js +++ b/src/utils.js @@ -18,7 +18,7 @@ window.IS_EXTENSION = !!window.chrome.extension; export const BASE_PATH = window.chrome.extension || window.DEBUG || - process.env.NODE_ENV == 'development' + process.env.NODE_ENV === 'development' ? '/' : '/app'; From 31105eb0fdba8e8f5e525d2b4ac8558b47fd016c Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Tue, 8 Jan 2019 18:13:39 +0530 Subject: [PATCH 3/6] Fix import of items when logging in. fixes #316 --- src/components/SavedItemPane.jsx | 50 +-------------------------- src/components/app.jsx | 58 +++++++++++++++++++++++++++++++- 2 files changed, 58 insertions(+), 50 deletions(-) diff --git a/src/components/SavedItemPane.jsx b/src/components/SavedItemPane.jsx index e275149..83be7f5 100644 --- a/src/components/SavedItemPane.jsx +++ b/src/components/SavedItemPane.jsx @@ -88,54 +88,6 @@ export default class SavedItemPane extends Component { } } - mergeImportedItems(items) { - var existingItemIds = []; - var toMergeItems = {}; - const d = deferred(); - const savedItems = {}; - this.items.forEach(item => (savedItems[item.id] = item)); - items.forEach(item => { - // We can access `savedItems` here because this gets set when user - // opens the saved creations panel. And import option is available - // inside the saved items panel. - if (savedItems[item.id]) { - // Item already exists - existingItemIds.push(item.id); - } else { - log('merging', item.id); - toMergeItems[item.id] = item; - } - }); - var mergedItemCount = items.length - existingItemIds.length; - if (existingItemIds.length) { - var shouldReplace = confirm( - existingItemIds.length + - ' creations already exist. Do you want to replace them?' - ); - if (shouldReplace) { - log('shouldreplace', shouldReplace); - items.forEach(item => { - toMergeItems[item.id] = item; - }); - mergedItemCount = items.length; - } - } - if (mergedItemCount) { - itemService.saveItems(toMergeItems).then(() => { - d.resolve(); - alertsService.add( - mergedItemCount + ' creations imported successfully.' - ); - trackEvent('fn', 'itemsImported', mergedItemCount); - }); - } else { - d.resolve(); - } - this.props.closeHandler(); - - return d.promise; - } - importFileChangeHandler(e) { var file = e.target.files[0]; @@ -145,7 +97,7 @@ export default class SavedItemPane extends Component { try { items = JSON.parse(progressEvent.target.result); log(items); - this.mergeImportedItems(items); + this.props.mergeImportedItems(items); } catch (exception) { log(exception); alert( diff --git a/src/components/app.jsx b/src/components/app.jsx index 368028b..dc6e749 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -352,7 +352,10 @@ export default class App extends Component { // setTimeout(() => $('#js-saved-items-wrap').style.overflowY = 'auto', 1000); } toggleSavedItemsPane(shouldOpen) { - this.setState({ isSavedItemPaneOpen: !this.state.isSavedItemPaneOpen }); + this.setState({ + isSavedItemPaneOpen: + shouldOpen === undefined ? !this.state.isSavedItemPaneOpen : shouldOpen + }); if (this.state.isSavedItemPaneOpen) { window.searchInput.focus(); @@ -371,6 +374,9 @@ export default class App extends Component { */ async fetchItems(shouldSaveGlobally, shouldFetchLocally) { var d = deferred(); + // HACK: This empty assignment is being used when importing locally saved items + // to cloud, `fetchItems` runs once on account login which clears the + // savedItems object and hence, while merging no saved item matches with itself. this.state.savedItems = {}; var items = []; if (window.user && !shouldFetchLocally) { @@ -973,6 +979,55 @@ export default class App extends Component { } } + mergeImportedItems(items) { + var existingItemIds = []; + var toMergeItems = {}; + const d = deferred(); + const { savedItems } = this.state; + items.forEach(item => { + // We can access `savedItems` here because this gets set when user + // opens the saved creations panel. And import option is available + // inside the saved items panel. + // HACK: Also when this fn is called for importing locally saved items + // to cloud, `fetchItems` runs once on account login which clears the + // savedItems object and hence, no match happens for `existingItemIds`. + if (savedItems[item.id]) { + // Item already exists + existingItemIds.push(item.id); + } else { + log('merging', item.id); + toMergeItems[item.id] = item; + } + }); + var mergedItemCount = items.length - existingItemIds.length; + if (existingItemIds.length) { + var shouldReplace = confirm( + existingItemIds.length + + ' creations already exist. Do you want to replace them?' + ); + if (shouldReplace) { + log('shouldreplace', shouldReplace); + items.forEach(item => { + toMergeItems[item.id] = item; + }); + mergedItemCount = items.length; + } + } + if (mergedItemCount) { + itemService.saveItems(toMergeItems).then(() => { + d.resolve(); + alertsService.add( + mergedItemCount + ' creations imported successfully.' + ); + trackEvent('fn', 'itemsImported', mergedItemCount); + }); + } else { + d.resolve(); + } + this.closeSavedItemsPane(); + return d.promise; + } + /** * Called from inside ask-to-import-modal */ @@ -1229,6 +1284,7 @@ export default class App extends Component { itemRemoveBtnClickHandler={this.itemRemoveBtnClickHandler.bind(this)} itemForkBtnClickHandler={this.itemForkBtnClickHandler.bind(this)} exportBtnClickHandler={this.exportBtnClickHandler.bind(this)} + mergeImportedItems={this.mergeImportedItems.bind(this)} /> From d20b036de406ece80c98abc1f7eb89bd8ec74c07 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Tue, 8 Jan 2019 18:18:46 +0530 Subject: [PATCH 4/6] add changelog for 3.6.1 --- src/components/Notifications.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Notifications.jsx b/src/components/Notifications.jsx index bf925f4..f4a5586 100644 --- a/src/components/Notifications.jsx +++ b/src/components/Notifications.jsx @@ -106,6 +106,12 @@ export function Notifications(props) {

Whats new?

+ + + Failing to import local creations when logging in. + + +
  • New Setting: Configure if you want to auto-close the @@ -135,7 +141,7 @@ export function Notifications(props) {
    • - +
  • Hidden Prettier: Selecting code and pressing Shift+Tab now uses Prettier to auto-format. This will improve UX wise From 220c7f5ffc9dbc8335353383a1cd1b2025025a5b Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Tue, 8 Jan 2019 18:21:17 +0530 Subject: [PATCH 5/6] bump to 3.6.1 --- package.json | 2 +- src/components/app.jsx | 2 +- src/manifest.json | 2 +- src/options.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index bb18d00..6ed80c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web-maker", - "version": "3.6.0", + "version": "3.6.1", "description": "A blazing fast & offline web playground", "scripts": { "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev", diff --git a/src/components/app.jsx b/src/components/app.jsx index dc6e749..5f84989 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -55,7 +55,7 @@ const LocalStorageKeys = { ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations' }; const UNSAVED_WARNING_COUNT = 15; -const version = '3.6.0'; +const version = '3.6.1'; export default class App extends Component { constructor() { diff --git a/src/manifest.json b/src/manifest.json index 227d8ad..d2da05d 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,6 +1,6 @@ { "name": "Web Maker", - "version": "3.6.0", + "version": "3.6.1", "manifest_version": 2, "description": "Blazing fast & offline playground for your web experiments", "homepage_url": "https://webmakerapp.com", diff --git a/src/options.html b/src/options.html index 9804f1c..d23c34d 100644 --- a/src/options.html +++ b/src/options.html @@ -37,7 +37,7 @@

    Settings - v3.6.0 + v3.6.1

    • ";e.isShowingSuggestions=!0,e.textareaBounds||(e.textareaBounds=e.t.getBoundingClientRect(),e.list.style.top=e.textareaBounds.bottom+"px",e.list.style.left=e.textareaBounds.left+"px",e.list.style.width=e.textareaBounds.width+"px"),e.list.classList.add("is-open")})},500)}},t.prototype.onKeyDown=function(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()))},t.prototype.listMouseDownHandler=function(e){var t=e.target;t.parentElement.dataset.url&&this.selectSuggestion(t.parentElement.dataset.url)},t.prototype.selectSuggestion=function(e){this.t.focus(),(0,l.trackEvent)("ui","autoSuggestionLibSelected",e),this.selectedCallback?this.selectedCallback.call(null,e):this.replaceCurrentLine(e),this.closeSuggestions()},t.prototype.render=function(){var e=this;return(0,r.h)("div",{class:"btn-group "+(this.props.fullWidth?"flex-grow":""),ref:function(t){return e.wrap=t}},this.props.children,(0,r.h)("ul",{ref:function(t){return e.list=t},class:"dropdown__menu autocomplete-dropdown",onMouseDown:this.listMouseDownHandler.bind(this)}),(0,r.h)("div",{ref:function(t){return e.loader=t},class:"loader autocomplete__loader",style:"display:none"}))},i(t,[{key:"currentLineNumber",get:function(){return this.t.value.substr(0,this.t.selectionStart).split("\n").length}},{key:"currentLine",get:function(){var e=this.currentLineNumber;return this.t.value.split("\n")[e-1]}}]),t}(r.Component)},BcU7:function(e,t,o){"use strict";function n(e){return function(){var t=e.apply(this,arguments);return new Promise(function(e,o){function n(s,a){try{var i=t[s](a),r=i.value}catch(e){return void o(e)}return i.done?void e(r):Promise.resolve(r).then(function(e){n("next",e)},function(e){n("throw",e)})}return n("next")})}}var s=Object.assign||function(e){for(var t,o=1;o+l&&(a=Math.floor((r-l)/1e3/3600/24)),i.setState({daysLeft:a}),i}return a(t,e),t.prototype.render=function(){var e=this.props.codeSize?(this.props.codeSize/1024).toFixed(2):0;return(0,i.h)("div",{role:"button",class:"flex flex-v-center",tabIndex:"0",onClick:this.props.onClick,onBlur:this.props.onBlur},l," ",(0,i.h)("div",{class:"footer__js13k-days-left"},this.state.daysLeft," days to go"),(0,i.h)("div",{class:"footer__js13k-code-size",style:{color:10Hello, World!
    \"}"})),ne=(0,d.h)(S.default,null),se=(0,d.h)(G.Icons,null),ae=(0,d.h)("form",{style:"display:none;",action:"https://codepen.io/pen/define",method:"POST",target:"_blank",id:"codepenForm"},(0,d.h)("input",{type:"hidden",name:"data",value:"{\"title\": \"New Pen!\", \"html\": \"
    Hello, World!
    \"}"})),ie=function(e){function t(){a(this,t);var o=i(this,e.call(this));return o.AUTO_SAVE_INTERVAL=15000,o.modalDefaultStates={isModalOpen:!1,isAddLibraryModalOpen:!1,isSettingsModalOpen:!1,isHelpModalOpen:!1,isNotificationsModalOpen:!1,isLoginModalOpen:!1,isProfileModalOpen:!1,isSupportDeveloperModalOpen:!1,isKeyboardShortcutsModalOpen:!1,isAskToImportModalOpen:!1,isOnboardModalOpen:!1,isJs13KModalOpen:!1,isCreateNewModalOpen:!1},o.state=l({isSavedItemPaneOpen:!1},o.modalDefaultStates,{prefs:{},currentItem:{title:"",externalLibs:{js:"",css:""}}}),o.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,isJs13kModeOn:!1,autoCloseTags:!0},o.prefs={},O.default.auth().onAuthStateChanged(function(e){o.setState({isLoginModalOpen:!1}),e?((0,M.log)("You are -> ",e),A.alertsService.add("You are now logged in!"),o.setState({user:e}),window.user=e,!window.localStorage[Q.ASKED_TO_IMPORT_CREATIONS]&&o.fetchItems(!1,!0).then(function(e){e.length&&(o.oldSavedItems=e,o.oldSavedCreationsCount=e.length,o.setState({isAskToImportModalOpen:!0}),(0,j.trackEvent)("ui","askToImportModalSeen"))}),window.db.getUser(e.uid).then(function(t){if(t){var n=l({},o.state.prefs);l(n,e.settings),o.setState({prefs:n}),o.updateSetting()}})):(o.setState({user:void 0}),delete window.user),o.updateProfileUi()}),o}return r(t,e),t.prototype.componentWillMount=function(){var e,t=this;window.onunload=function(){t.saveCode("code"),t.detachedWindow&&t.detachedWindow.close()},db.local.get({layoutMode:1,code:""},function(o){t.toggleLayout(o.layoutMode),t.state.prefs.layoutMode=o.layoutMode,o.code&&(e=o.code)}),db.getSettings(this.defaultSettings).then(function(o){o.preserveLastCode&&e?(t.setState({unsavedEditCount:0}),e.id&&window.IS_EXTENSION?db.local.get(e.id,function(o){o[e.id]&&((0,M.log)("Load item ",e.id),t.setCurrentItem(o[e.id]).then(function(){return t.refreshEditor()}))}):((0,M.log)("Load last unsaved item",e),t.setCurrentItem(e).then(function(){return t.refreshEditor()}))):t.createNewItem(),l(t.state.prefs,o),t.setState({prefs:t.state.prefs}),t.updateSetting()}),db.getUserLastSeenVersion().then(function(e){e||(t.setState({isOnboardModalOpen:!0}),-1===document.cookie.indexOf("onboarded")&&((0,j.trackEvent)("ui","onboardModalSeen",ee),document.cookie="onboarded=1"),window.db.setUserLastSeenVersion(ee)),e&&-1===(0,M.semverCompare)(e,ee)&&!window.localStorage.pledgeModalSeen&&(t.openSupportDeveloperModal(),window.localStorage.pledgeModalSeen=!0),e&&-1!==(0,M.semverCompare)(e,ee)||(t.setState({hasUnseenChangelog:!0}),t.hasSeenNotifications=!1)})},t.prototype.updateProfileUi=function(){this.state.user?document.body.classList.add("is-logged-in"):document.body.classList.remove("is-logged-in")},t.prototype.refreshEditor=function(){this.toggleLayout(this.state.currentItem.layoutMode||this.state.prefs.layoutMode),this.updateExternalLibCount(),this.contentWrap.refreshEditor()},t.prototype.forkItem=function(e){var t=this;if(this.state.unsavedEditCount){var o=confirm("You have unsaved changes in your current work. Do you want to discard unsaved changes and continue?");if(!o)return}var n=JSON.parse(JSON.stringify(e));delete n.id,n.title="(Forked) "+e.title,n.updatedOn=Date.now(),this.setCurrentItem(n).then(function(){return t.refreshEditor()}),A.alertsService.add("\""+e.title+"\" was forked"),(0,j.trackEvent)("fn","itemForked")},t.prototype.createNewItem=function(){var e=this,t=new Date;this.setCurrentItem({title:"Untitled "+t.getDate()+"-"+(t.getMonth()+1)+"-"+t.getHours()+":"+t.getMinutes(),html:"",css:"",js:"",externalLibs:{js:"",css:""},layoutMode:this.state.currentLayoutMode}).then(function(){return e.refreshEditor()}),A.alertsService.add("New item created")},t.prototype.openItem=function(e){var t=this;this.setCurrentItem(e).then(function(){return t.refreshEditor()}),A.alertsService.add("Saved item loaded")},t.prototype.removeItem=function(e){var t=this,o=confirm("Are you sure you want to delete \""+e.title+"\"?");o&&(_.itemService.unsetItemForUser(e.id),_.itemService.removeItem(e.id).then(function(){A.alertsService.add("Item removed.",e),t.state.currentItem.id===e.id&&t.createNewItem()}),delete this.state.savedItems[e.id],this.setState({savedItems:l({},this.state.savedItems)}),(0,j.trackEvent)("fn","itemRemoved"))},t.prototype.setCurrentItem=function(e){var t=(0,E.deferred)();return e.htmlMode=e.htmlMode||this.state.prefs.htmlMode||L.HtmlModes.HTML,e.cssMode=e.cssMode||this.state.prefs.cssMode||L.CssModes.CSS,e.jsMode=e.jsMode||this.state.prefs.jsMode||L.JsModes.JS,this.setState({currentItem:e},t.resolve),this.isAutoSavingEnabled=!1,this.setState({unsavedEditCount:0}),t.promise},t.prototype.saveBtnClickHandler=function(){(0,j.trackEvent)("ui","saveBtnClick",this.state.currentItem.id?"saved":"new"),this.saveItem()},t.prototype.populateItemsInSavedPane=function(){this.setState({savedItems:l({},this.state.savedItems)}),this.toggleSavedItemsPane()},t.prototype.toggleSavedItemsPane=function(){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")},t.prototype.fetchItems=function(){var e=s(function*(e,t){var o=this,n=(0,E.deferred)();this.state.savedItems={};var s=[];return window.user&&!t?(s=yield _.itemService.getAllItems(),(0,M.log)("got items"),e&&s.forEach(function(e){o.state.savedItems[e.id]=e}),n.resolve(s),n.promise):(db.local.get("items",function(t){var a=Object.getOwnPropertyNames(t.items||{});a.length||n.resolve([]),(0,j.trackEvent)("fn","fetchItems",a.length);for(var r=function(t){db.local.get(a[t],function(i){e&&(o.state.savedItems[a[t]]=i[a[t]]),s.push(i[a[t]]),a.length===s.length&&n.resolve(s)})},l=0;lwindow.innerWidth?2:e,this.state.currentLayoutMode===e?(this.contentWrap.resetSplitting(),void this.setState({currentLayoutMode:e})):void([1,2,3,4,5].forEach(function(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},function(){t.contentWrap.resetSplitting(),t.contentWrap.setPreviewContent(!0)}))},t.prototype.layoutBtnClickHandler=function(e){this.saveSetting("layoutMode",e),(0,j.trackEvent)("ui","toggleLayoutClick",e),this.toggleLayout(e)},t.prototype.getCodePaneSizes=function(){var e,t=this.state.currentLayoutMode,o=2===t||5===t?"width":"height";try{e=[htmlCodeEl.style[o],cssCodeEl.style[o],jsCodeEl.style[o]]}catch(t){e=[33.33,33.33,33.33]}finally{return e}},t.prototype.getMainPaneSizes=function(){var e,t=this.state.currentLayoutMode,o=2===t?"height":"width";try{e=[+$("#js-code-side").style[o].match(/([\d.]+)%/)[1],+$("#js-demo-side").style[o].match(/([\d.]+)%/)[1]]}catch(t){e=[50,50]}finally{return e}},t.prototype.saveSetting=function(e,t){var o,n=(0,E.deferred)(),s=(o={},o[e]=t,o);return db.local.set(s,n.resolve),n.promise},t.prototype.saveCode=function(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(),(0,M.log)("saving key",e||this.state.currentItem.id,this.state.currentItem),_.itemService.setItem(e||this.state.currentItem.id,this.state.currentItem).then(function(){window.user&&!navigator.onLine?A.alertsService.add("Item saved locally. Will save to account when you are online."):A.alertsService.add("Item saved."),this.setState({unsavedEditCount:0})}.bind(this))},t.prototype.saveItem=function(){var e=this;if(!window.user&&!window.localStorage[Q.LOGIN_AND_SAVE_MESSAGE_SEEN]){var t=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[Q.LOGIN_AND_SAVE_MESSAGE_SEEN]=!0,!t)return(0,j.trackEvent)("ui",Q.LOGIN_AND_SAVE_MESSAGE_SEEN,"login"),this.closeAllOverlays(),void this.setState({isLoginModalOpen:!0});(0,j.trackEvent)("ui",Q.LOGIN_AND_SAVE_MESSAGE_SEEN,"local")}var o=!this.state.currentItem.id;this.state.currentItem.id=this.state.currentItem.id||"item-"+(0,M.generateRandomId)(),this.setState({isSaving:!0}),this.saveCode().then(function(){e.setState({isSaving:!1}),!e.isAutoSavingEnabled&&e.state.prefs.autoSave&&(e.isAutoSavingEnabled=!0,A.alertsService.add("Auto-save enabled."))}),o&&_.itemService.setItemForUser(this.state.currentItem.id)},t.prototype.onCodeModeChange=function(e,t){var o=l({},this.state.currentItem);o[e+"Mode"]=t,this.setState({currentItem:o})},t.prototype.onCodeChange=function(e,t,o){var n=this;this.state.currentItem[e]=t,o&&(this.setState({unsavedEditCount:this.state.unsavedEditCount+1}),0==this.state.unsavedEditCount%X&&this.state.unsavedEditCount>=X&&(window.saveBtn.classList.add("animated"),window.saveBtn.classList.add("wobble"),window.saveBtn.addEventListener("animationend",function(){window.saveBtn.classList.remove("animated"),window.saveBtn.classList.remove("wobble")}))),this.state.prefs.isJs13kModeOn&&(this.codeSizeCalculationTimeout&&clearTimeout(this.codeSizeCalculationTimeout),this.codeSizeCalculationTimeout=setTimeout(function(){n.calculateCodeSize(),n.codeSizeCalculationTimeout=null},1e3))},t.prototype.onCodeSettingsChange=function(e,t){this.state.currentItem[e+"Settings"]={acssConfig:t}},t.prototype.titleInputBlurHandler=function(t){this.state.currentItem.title=t.target.value,this.state.currentItem.id&&(this.saveItem(),(0,j.trackEvent)("ui","titleChanged"))},t.prototype.updateSetting=function(t){var e=this;if(t){var o=t.target.dataset.setting,n={},s=t.target;(0,M.log)(o,"checkbox"===s.type?s.checked:s.value);var a=l({},this.state.prefs);a[o]="checkbox"===s.type?s.checked:s.value,n[o]=a[o],this.setState({prefs:a}),db.sync.set(n,function(){A.alertsService.add("Setting saved")}),window.user&&window.db.getDb().then(function(t){var n;t.collection("users").doc(window.user.uid).update((n={},n["settings."+o]=e.state.prefs[o],n)).then(function(e){(0,M.log)("Setting \""+o+"\" for user",e)}).catch(function(e){return(0,M.log)(e)})}),(0,j.trackEvent)("ui","updatePref-"+o,a[o])}var i=this.state.prefs;runBtn.classList[i.autoPreview?"add":"remove"]("hide"),this.contentWrap.applyCodemirrorSettings(this.state.prefs),i.autoSave?!this.autoSaveInterval&&(this.autoSaveInterval=setInterval(function(){e.autoSaveLoop()},this.AUTO_SAVE_INTERVAL)):(clearInterval(this.autoSaveInterval),this.autoSaveInterval=null),document.body.classList[i.lightVersion?"add":"remove"]("light-version")},t.prototype.autoSaveLoop=function(){this.isAutoSavingEnabled&&this.state.unsavedEditCount&&this.saveItem()},t.prototype.loginBtnClickHandler=function(){this.setState({isLoginModalOpen:!0})},t.prototype.profileBtnClickHandler=function(){this.setState({isProfileModalOpen:!0})},t.prototype.logout=function(){if(this.state.unsavedEditCount){var e=confirm("You have unsaved changes. Do you still want to logout?");if(!e)return}(0,j.trackEvent)("fn","loggedOut"),P.auth.logout(),this.setState({isProfileModalOpen:!1}),A.alertsService.add("Log out successfull")},t.prototype.itemClickHandler=function(e){var t=this;setTimeout(function(){t.openItem(e)},350),this.toggleSavedItemsPane()},t.prototype.itemRemoveBtnClickHandler=function(e){this.removeItem(e)},t.prototype.itemForkBtnClickHandler=function(e){var t=this;this.toggleSavedItemsPane(),setTimeout(function(){t.forkItem(e)},350)},t.prototype.newBtnClickHandler=function(){if((0,j.trackEvent)("ui","newBtnClick"),this.state.unsavedEditCount){var e=confirm("You have unsaved changes. Do you still want to create something new?");e&&this.setState({isCreateNewModalOpen:!0})}else this.setState({isCreateNewModalOpen:!0})},t.prototype.openBtnClickHandler=function(){(0,j.trackEvent)("ui","openBtnClick"),this.openSavedItemsPane()},t.prototype.detachedPreviewBtnHandler=function(){(0,j.trackEvent)("ui","detachPreviewBtnClick"),this.contentWrap.detachPreview()},t.prototype.notificationsBtnClickHandler=function(){return this.setState({isNotificationsModalOpen:!0}),this.state.isNotificationsModalOpen&&!this.hasSeenNotifications&&(this.hasSeenNotifications=!0,this.setState({hasUnseenChangelog:!1}),window.db.setUserLastSeenVersion(ee)),(0,j.trackEvent)("ui","notificationButtonClick",ee),!1},t.prototype.codepenBtnClickHandler=function(t){if(this.state.currentItem.cssMode===L.CssModes.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:L.modes[this.state.currentItem.htmlMode].codepenVal,css_pre_processor:L.modes[this.state.currentItem.cssMode].codepenVal,js_pre_processor:L.modes[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(),(0,j.trackEvent)("ui","openInCodepen"),t.preventDefault()},t.prototype.saveHtmlBtnClickHandler=function(t){(0,M.saveAsHtml)(this.state.currentItem),(0,j.trackEvent)("ui","saveHtmlClick"),t.preventDefault()},t.prototype.runBtnClickHandler=function(){this.contentWrap.setPreviewContent(!0,!0),(0,j.trackEvent)("ui","runBtnClick")},t.prototype.exportItems=function(){var e=this;(0,M.handleDownloadsPermission)().then(function(){e.fetchItems().then(function(e){var t=new Date,o=["web-maker-export",t.getFullYear(),t.getMonth()+1,t.getDate(),t.getHours(),t.getMinutes(),t.getSeconds()].join("-");o+=".json";var n=new Blob([JSON.stringify(e,!1,2)],{type:"application/json;charset=UTF-8"});(0,M.downloadFile)(o,n),(0,j.trackEvent)("fn","exportItems")})})},t.prototype.exportBtnClickHandler=function(t){this.exportItems(),t.preventDefault(),(0,j.trackEvent)("ui","exportBtnClicked")},t.prototype.screenshotBtnClickHandler=function(t){this.contentWrap.getDemoFrame(function(e){(0,F.takeScreenshot)(e.getBoundingClientRect())}),t.preventDefault()},t.prototype.openSupportDeveloperModal=function(){this.closeAllOverlays(),this.setState({isSupportDeveloperModalOpen:!0})},t.prototype.supportDeveloperBtnClickHandler=function(t){this.openSupportDeveloperModal(t)},t.prototype.dontAskToImportAnymore=function(t){this.setState({isAskToImportModalOpen:!1}),window.localStorage[Q.ASKED_TO_IMPORT_CREATIONS]=!0,t&&(0,j.trackEvent)("ui","dontAskToImportBtnClick")},t.prototype.importCreationsAndSettingsIntoApp=function(){var e=this;this.mergeImportedItems(this.oldSavedItems).then(function(){(0,j.trackEvent)("fn","oldItemsImported"),e.dontAskToImportAnymore()})},t.prototype.editorFocusHandler=function(e){this.editorWithFocus=e},t.prototype.modalOverlayClickHandler=function(){this.closeAllOverlays()},t.prototype.splitUpdateHandler=function(){this.state.currentItem.sizes=this.getCodePaneSizes(),this.state.currentItem.mainSizes=this.getMainPaneSizes()},t.prototype.calculateTextSize=function(e){if(!e)return 0;var t=/(\r?\n|\r)/g,o=/(\r?\n|\r|\s+)/g;return{count:function(e,n){n=n||{},n.lineBreaks=n.lineBreaks||1,n.ignoreWhitespace=n.ignoreWhitespace||!1;var s=e.length,a=s-e.replace(/[\u0100-\uFFFF]/g,"").length,i=s-e.replace(t,"").length;return n.ignoreWhitespace?(e=e.replace(o,""),e.length+a):s+a+Math.max(0,n.lineBreaks*(i-1))},format:function(e,t){for(var o=0;1024"+e+"")+" "+o+"B"}}.count(e)},t.prototype.getExternalLibCode=function(){var e=this.state.currentItem,t=e.externalLibs&&e.externalLibs.js||"";return t+="\n"+e.externalLibs&&e.externalLibs.css||"",t=t.split("\n").filter(function(e){return e}),t.map(function(e){return fetch(e).then(function(e){return e.text()}).then(function(t){return{code:t,fileName:(0,M.getFilenameFromUrl)(e)}})})},t.prototype.calculateCodeSize=function(){var e=this,t=this.state.currentItem,o=(0,w.computeHtml)(t.html,t.htmlMode),n=(0,w.computeCss)(t.css,t.cssMode),s=(0,w.computeJs)(t.js,t.jsMode,!1);Promise.all([o,n,s].concat(this.getExternalLibCode())).then(function(o){var n=o[0].code||"",s=o[1].code||"",a=o[2].code||"",r=(0,M.getCompleteHtml)(n,s,a,t,!0);r=r.replace(/":"")},""),i=n.externalLibs.css.split("\n").reduce(function(e,t){return e+(t?"\n":"")},""));var r="\n\n\n\n"+i+"\n\n\n\n"+e+"\n"+a+"\n";if(s||(r+=""),n.jsMode===d.JsModes.ES6&&(r+=""),"string"==typeof o)r+="\n\n",r}t.__esModule=!0,t.BASE_PATH=void 0,t.semverCompare=function(e,t){for(var o=e.split("."),n=t.split("."),s=0;3>s;s++){var a=+o[s],i=+n[s];if(a>i)return 1;if(i>a)return-1;if(!isNaN(a)&&isNaN(i))return 1;if(isNaN(a)&&!isNaN(i))return-1}return 0},t.generateRandomId=function(e){for(var t="",o=e||10;o--;)t+=u[~~(Math.random()*u.length)];return t},t.onButtonClick=function(e,t){e.addEventListener("click",function(o){return t(o),!1})},t.log=n,t.addInfiniteLoopProtection=function(e,t){var o=t.timeout,n=1,s=[],a="_wmloopvar";return c.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],i=e.body.range[1],r=("\nif (Date.now() - %d > "+o+") { window.top.previewException(new Error(\"Infinite loop\")); break;}\n").replace("%d",a+n),l="";"BlockStatement"!==e.body.type&&(r="{"+r,l="}",--t),s.push({pos:t,str:r}),s.push({pos:i,str:l}),s.push({pos:e.range[0],str:"var %d = Date.now();\n".replace("%d",a+n)}),++n;break;default:}}),s.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},t.getHumanDate=function(e){var t=new Date(e),o=t.getDate()+" "+["January","February","March","April","May","June","July","August","September","October","November","December"][t.getMonth()]+" "+t.getFullYear();return o},t.once=function(e,t,o){e.addEventListener(t,function(n){return n.target.removeEventListener(t,arguments.callee),o(n)})},t.downloadFile=s,t.writeFile=a,t.loadJS=function(e){var t=(0,p.deferred)(),o=window.document.getElementsByTagName("script")[0],n=window.document.createElement("script");return n.src=e,n.async=!0,o.parentNode.insertBefore(n,o),n.onload=function(){t.resolve()},t.promise},t.getCompleteHtml=i,t.saveAsHtml=function(e){var t=(0,l.computeHtml)(e.html,e.htmlMode),o=(0,l.computeCss)(e.css,e.cssMode),n=(0,l.computeJs)(e.js,e.jsMode,!1);Promise.all([t,o,n]).then(function(t){var o=t[0].code,n=t[1].code,a=t[2].code,l=i(o,n,a,e,!0),p=new Date,d=["web-maker",p.getFullYear(),p.getMonth()+1,p.getDate(),p.getHours(),p.getMinutes(),p.getSeconds()].join("-");e.title&&(d=e.title),d+=".html";var c=new Blob([l],{type:"text/html;charset=UTF-8"});s(d,c),(0,r.trackEvent)("fn","saveFileComplete")})},t.handleDownloadsPermission=function(){var e=(0,p.deferred)();return window.IS_EXTENSION?(chrome.permissions.contains({permissions:["downloads"]},function(t){t?e.resolve():chrome.permissions.request({permissions:["downloads"]},function(t){t?((0,r.trackEvent)("fn","downloadsPermGiven"),e.resolve()):e.reject()})}),e.promise):(e.resolve(),e.promise)},t.getFilenameFromUrl=function(e){return e?e.match(/\/([^/]*)$/)[1]:""},t.prettify=function(e){var t=1n?e.classList.add("is-minimized"):e.classList.remove("is-minimized"),-1===e.style[o].indexOf("100% - "+2*k+"px")?e.classList.remove("is-maximized"):e.classList.add("is-maximized")})},50)},t.prototype.toggleCodeWrapCollapse=function(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{var t=parseInt(e.dataset.codeWrapId,10),o=[k+"px",k+"px",k+"px"];o[t]="calc(100% - "+2*k+"px)",this.codeSplitInstance.setSizes(o),e.classList.add("is-maximized")}this.updateSplits()},t.prototype.collapseBtnHandler=function(t){var e=t.currentTarget.parentElement.parentElement.parentElement;this.toggleCodeWrapCollapse(e),(0,m.trackEvent)("ui","paneCollapseBtnClick",e.dataset.type)},t.prototype.codeWrapHeaderDblClickHandler=function(t){if(t.target.classList.contains("js-code-wrap__header")){var e=t.target.parentElement;this.toggleCodeWrapCollapse(e),(0,m.trackEvent)("ui","paneHeaderDblClick",e.dataset.type)}},t.prototype.resetSplitting=function(){this.setState({codeSplitSizes:this.getCodeSplitSizes(),mainSplitSizes:this.getMainSplitSizesToApply()})},t.prototype.updateSplits=function(){this.props.onSplitUpdate(),this.state.codeSplitSizes=this.props.currentItem.sizes,this.state.mainSplitSizes=this.props.currentItem.mainSizes},t.prototype.getMainSplitSizesToApply=function(){var e,t=this.props,o=t.currentItem,n=t.currentLayoutMode;return e=o&&o.mainSizes?3===n?[o.mainSizes[1],o.mainSizes[0]]:o.mainSizes:5===n?[75,25]:[50,50],e},t.prototype.getCodeSplitSizes=function(){return this.props.currentItem&&this.props.currentItem.sizes?this.props.currentItem.sizes:[33.33,33.33,33.33]},t.prototype.mainSplitDragEndHandler=function(){var e=this;this.props.prefs.refreshOnResize&&setTimeout(function(){e.setPreviewContent(!0)},1),this.updateSplits()},t.prototype.codeSplitDragStart=function(){document.body.classList.add("is-dragging")},t.prototype.codeSplitDragEnd=function(){this.updateCodeWrapCollapseStates(),document.body.classList.remove("is-dragging"),this.updateSplits()},t.prototype.handleModeRequirements=function(e){function t(){c.modes[e].hasLoaded=!0,n.resolve()}var o="lib/transpilers",n=(0,y.deferred)();return c.modes[e].hasLoaded?(n.resolve(),n.promise):(e===c.HtmlModes.JADE?(0,h.loadJS)(o+"/jade.js").then(t):e===c.HtmlModes.MARKDOWN?(0,h.loadJS)(o+"/marked.js").then(t):e===c.CssModes.LESS?(0,h.loadJS)(o+"/less.min.js").then(t):e===c.CssModes.SCSS||e===c.CssModes.SASS?(0,h.loadJS)(o+"/sass.js").then(function(){window.sass=new Sass(o+"/sass.worker.js"),t()}):e===c.CssModes.STYLUS?(0,h.loadJS)(o+"/stylus.min.js").then(t):e===c.CssModes.ACSS?(0,h.loadJS)(o+"/atomizer.browser.js").then(t):e===c.JsModes.COFFEESCRIPT?(0,h.loadJS)(o+"/coffee-script.js").then(t):e===c.JsModes.ES6?(0,h.loadJS)(o+"/babel.min.js").then(t):e===c.JsModes.TS?(0,h.loadJS)(o+"/typescript.js").then(t):n.resolve(),n.promise)},t.prototype.updateHtmlMode=function(e){return this.props.onCodeModeChange("html",e),this.props.currentItem.htmlMode=e,this.cm.html.setOption("mode",c.modes[e].cmMode),g.default.autoLoadMode(this.cm.html,c.modes[e].cmPath||c.modes[e].cmMode),this.handleModeRequirements(e)},t.prototype.updateCssMode=function(e){return this.props.onCodeModeChange("css",e),this.props.currentItem.cssMode=e,this.cm.css.setOption("mode",c.modes[e].cmMode),this.cm.css.setOption("readOnly",c.modes[e].cmDisable),window.cssSettingsBtn.classList[c.modes[e].hasSettings?"remove":"add"]("hide"),g.default.autoLoadMode(this.cm.css,c.modes[e].cmPath||c.modes[e].cmMode),this.handleModeRequirements(e)},t.prototype.updateJsMode=function(e){return this.props.onCodeModeChange("js",e),this.props.currentItem.jsMode=e,this.cm.js.setOption("mode",c.modes[e].cmMode),g.default.autoLoadMode(this.cm.js,c.modes[e].cmPath||c.modes[e].cmMode),this.handleModeRequirements(e)},t.prototype.codeModeChangeHandler=function(t){var e=this,o=t.target.value,n=t.target.dataset.type,s=this.props.currentItem["html"===n?"htmlMode":"css"===n?"cssMode":"jsMode"];s!==o&&("html"===n?this.updateHtmlMode(o).then(function(){return e.setPreviewContent(!0)}):"js"===n?this.updateJsMode(o).then(function(){return e.setPreviewContent(!0)}):"css"===n&&this.updateCssMode(o).then(function(){return e.setPreviewContent(!0)}),(0,m.trackEvent)("ui","updateCodeMode",o))},t.prototype.detachPreview=function(){var e=this;if(this.detachedWindow)return void this.detachedWindow.focus();var t=this.frame.getBoundingClientRect(),o=t.width,n=t.height;document.body.classList.add("is-detached-mode"),this.detachedWindow=window.open("./preview.html","Web Maker","width="+o+",height="+n+",resizable,scrollbars=yes,status=1"),setTimeout(function(){e.setPreviewContent(!0)},1500);var s=window.setInterval(function(){e.detachedWindow&&e.detachedWindow.closed&&(clearInterval(s),document.body.classList.remove("is-detached-mode"),e.detachedWindow=null,e.setPreviewContent(!0))},500)},t.prototype.updateLogCount=function(){window.logCountEl&&(logCountEl.textContent=this.logCount)},t.prototype.onMessageFromConsole=function(){var e=this;[].concat(Array.prototype.slice.call(arguments)).forEach(function(t){t&&t.indexOf&&-1!==t.indexOf("filesystem:chrome-extension")&&(t=t.replace(/filesystem:chrome-extension.*\.js:(\d+):*(\d*)/g,"script $1:$2"));try{e.consoleCm.replaceRange(t+" "+((t+"").match(/\[object \w+]/)?JSON.stringify(t):"")+"\n",{line:Infinity})}catch(t){e.consoleCm.replaceRange("\uD83C\uDF00\n",{line:Infinity})}e.consoleCm.scrollTo(0,Infinity),e.logCount++}),this.updateLogCount()},t.prototype.previewException=function(e){console.error("Possible infinite loop detected.",e.stack),this.onMessageFromConsole("Possible infinite loop detected.",e.stack)},t.prototype.toggleConsole=function(){this.setState({isConsoleOpen:!this.state.isConsoleOpen}),(0,m.trackEvent)("ui","consoleToggle")},t.prototype.consoleHeaderDblClickHandler=function(t){t.target.classList.contains("js-console__header")&&((0,m.trackEvent)("ui","consoleToggleDblClick"),this.toggleConsole())},t.prototype.clearConsole=function(){this.consoleCm.setValue(""),this.logCount=0,this.updateLogCount()},t.prototype.clearConsoleBtnClickHandler=function(){this.clearConsole(),(0,m.trackEvent)("ui","consoleClearBtnClick")},t.prototype.evalConsoleExpr=function(t){(76===t.which||12===t.which)&&t.ctrlKey?(this.clearConsole(),(0,m.trackEvent)("ui","consoleClearKeyboardShortcut")):13===t.which&&(this.onMessageFromConsole("> "+t.target.value),this.frame.contentWindow._wmEvaluate(t.target.value),t.target.value="",(0,m.trackEvent)("fn","evalConsoleExpr"))},t.prototype.cssSettingsBtnClickHandler=function(){this.setState({isCssSettingsModalOpen:!0}),(0,m.trackEvent)("ui","cssSettingsBtnClick")},t.prototype.cssSettingsChangeHandler=function(e){this.props.onCodeSettingsChange("css",e),this.setPreviewContent(!0)},t.prototype.getDemoFrame=function(e){e(this.frame)},t.prototype.editorFocusHandler=function(e){this.props.onEditorFocus(e)},t.prototype.render=function(){var e=this;return(0,r.h)(u.SplitPane,{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)},(0,r.h)(u.SplitPane,{class:"code-side",id:"js-code-side",sizes:this.state.codeSplitSizes,minSize:k,direction:2===this.props.currentLayoutMode||5===this.props.currentLayoutMode?"horizontal":"vertical",onDragStart:this.codeSplitDragStart.bind(this),onDragEnd:this.codeSplitDragEnd.bind(this),onSplit:function(t){return e.codeSplitInstance=t}},(0,r.h)("div",{"data-code-wrap-id":"0",id:"htmlCodeEl","data-type":"html",class:"code-wrap",onTransitionEnd:this.updateCodeWrapCollapseStates.bind(this)},(0,r.h)("div",{class:"js-code-wrap__header code-wrap__header",title:"Double click to toggle code pane",onDblClick:this.codeWrapHeaderDblClickHandler.bind(this)},(0,r.h)("label",{class:"btn-group",dropdow:!0,title:"Click to change"},(0,r.h)("span",{class:"code-wrap__header-label"},c.modes[this.props.currentItem.htmlMode||"html"].label),S,(0,r.h)("select",{"data-type":"html",class:"js-mode-select hidden-select",onChange:this.codeModeChangeHandler.bind(this),value:this.props.currentItem.htmlMode},w,M,_)),(0,r.h)("div",{class:"code-wrap__header-right-options"},(0,r.h)("a",{class:"js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn",title:"Toggle code pane",onClick:this.collapseBtnHandler.bind(this)}))),(0,r.h)(d.default,{options:{mode:"htmlmixed",profile:"xhtml",gutters:["CodeMirror-linenumbers","CodeMirror-foldgutter"],noAutocomplete:!0,matchTags:{bothTags:!0},prettier:!0,prettierParser:"html",emmet:!0},prefs:this.props.prefs,onChange:this.onHtmlCodeChange.bind(this),onCreation:function(t){return e.cm.html=t},onFocus:this.editorFocusHandler.bind(this)})),(0,r.h)("div",{"data-code-wrap-id":"1",id:"cssCodeEl","data-type":"css",class:"code-wrap",onTransitionEnd:this.updateCodeWrapCollapseStates.bind(this)},(0,r.h)("div",{class:"js-code-wrap__header code-wrap__header",title:"Double click to toggle code pane",onDblClick:this.codeWrapHeaderDblClickHandler.bind(this)},(0,r.h)("label",{class:"btn-group",title:"Click to change"},(0,r.h)("span",{class:"code-wrap__header-label"},c.modes[this.props.currentItem.cssMode||"css"].label),x,(0,r.h)("select",{"data-type":"css",class:"js-mode-select hidden-select",onChange:this.codeModeChangeHandler.bind(this),value:this.props.currentItem.cssMode},H,I,L,j,E,A)),(0,r.h)("div",{class:"code-wrap__header-right-options"},(0,r.h)("a",{href:"#",id:"cssSettingsBtn",title:"Atomic CSS configuration",onClick:this.cssSettingsBtnClickHandler.bind(this),class:"code-wrap__header-btn hide"},B),(0,r.h)("a",{class:"js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn",title:"Toggle code pane",onClick:this.collapseBtnHandler.bind(this)}))),(0,r.h)(d.default,{options:{mode:"css",gutters:["error-gutter","CodeMirror-linenumbers","CodeMirror-foldgutter"],emmet:!0,prettier:!0,prettierParser:"css"},prefs:this.props.prefs,onChange:this.onCssCodeChange.bind(this),onCreation:function(t){return e.cm.css=t},onFocus:this.editorFocusHandler.bind(this)})),(0,r.h)("div",{"data-code-wrap-id":"2",id:"jsCodeEl","data-type":"js",class:"code-wrap",onTransitionEnd:this.updateCodeWrapCollapseStates.bind(this)},(0,r.h)("div",{class:"js-code-wrap__header code-wrap__header",title:"Double click to toggle code pane",onDblClick:this.codeWrapHeaderDblClickHandler.bind(this)},(0,r.h)("label",{class:"btn-group",title:"Click to change"},(0,r.h)("span",{class:"code-wrap__header-label"},c.modes[this.props.currentItem.jsMode||"js"].label),O,(0,r.h)("select",{"data-type":"js",class:"js-mode-select hidden-select",onChange:this.codeModeChangeHandler.bind(this),value:this.props.currentItem.jsMode},T,P,D,V)),(0,r.h)("div",{class:"code-wrap__header-right-options"},(0,r.h)("a",{class:"js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn",title:"Toggle code pane",onClick:this.collapseBtnHandler.bind(this)}))),(0,r.h)(d.default,{options:{mode:"javascript",gutters:["error-gutter","CodeMirror-linenumbers","CodeMirror-foldgutter"],prettier:!0,prettierParser:"js"},prefs:this.props.prefs,autoComplete:this.props.prefs.autoComplete,onChange:this.onJsCodeChange.bind(this),onCreation:function(t){return e.cm.js=t},onFocus:this.editorFocusHandler.bind(this)}))),(0,r.h)("div",{class:"demo-side",id:"js-demo-side",style:""},(0,r.h)("iframe",{ref:function(t){return e.frame=t},src:"about://blank",frameborder:"0",id:"demo-frame",allowfullscreen:!0}),(0,r.h)(b.Console,{isConsoleOpen:this.state.isConsoleOpen,onConsoleHeaderDblClick:this.consoleHeaderDblClickHandler.bind(this),onClearConsoleBtnClick:this.clearConsoleBtnClickHandler.bind(this),toggleConsole:this.toggleConsole.bind(this),onEvalInputKeyup:this.evalConsoleExpr.bind(this),onReady:function(t){return e.consoleCm=t}}),(0,r.h)(C.default,{show:this.state.isCssSettingsModalOpen,closeHandler:function(){return e.setState({isCssSettingsModalOpen:!1})},onChange:this.cssSettingsChangeHandler.bind(this),settings:this.props.currentItem.cssSettings,editorTheme:this.props.prefs.editorTheme})))},t}(r.Component);t.default=F},"9VU0":function(e,t,o){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t&&("object"==typeof t||"function"==typeof t)?t:e}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0,t.LibraryAutoSuggest=void 0;var i=function(){function e(e,t){for(var o,n=0;n"+t[o].name+"";e.isShowingSuggestions=!0,e.textareaBounds||(e.textareaBounds=e.t.getBoundingClientRect(),e.list.style.top=e.textareaBounds.bottom+"px",e.list.style.left=e.textareaBounds.left+"px",e.list.style.width=e.textareaBounds.width+"px"),e.list.classList.add("is-open")})},500)}},t.prototype.onKeyDown=function(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()))},t.prototype.listMouseDownHandler=function(e){var t=e.target;t.parentElement.dataset.url&&this.selectSuggestion(t.parentElement.dataset.url)},t.prototype.selectSuggestion=function(e){this.t.focus(),(0,l.trackEvent)("ui","autoSuggestionLibSelected",e),this.selectedCallback?this.selectedCallback.call(null,e):this.replaceCurrentLine(e),this.closeSuggestions()},t.prototype.render=function(){var e=this;return(0,r.h)("div",{class:"btn-group "+(this.props.fullWidth?"flex-grow":""),ref:function(t){return e.wrap=t}},this.props.children,(0,r.h)("ul",{ref:function(t){return e.list=t},class:"dropdown__menu autocomplete-dropdown",onMouseDown:this.listMouseDownHandler.bind(this)}),(0,r.h)("div",{ref:function(t){return e.loader=t},class:"loader autocomplete__loader",style:"display:none"}))},i(t,[{key:"currentLineNumber",get:function(){return this.t.value.substr(0,this.t.selectionStart).split("\n").length}},{key:"currentLine",get:function(){var e=this.currentLineNumber;return this.t.value.split("\n")[e-1]}}]),t}(r.Component)},BcU7:function(e,t,o){"use strict";function n(e){return function(){var t=e.apply(this,arguments);return new Promise(function(e,o){function n(s,a){try{var i=t[s](a),r=i.value}catch(e){return void o(e)}return i.done?void e(r):Promise.resolve(r).then(function(e){n("next",e)},function(e){n("throw",e)})}return n("next")})}}var s=Object.assign||function(e){for(var t,o=1;o+l&&(a=Math.floor((r-l)/1e3/3600/24)),i.setState({daysLeft:a}),i}return a(t,e),t.prototype.render=function(){var e=this.props.codeSize?(this.props.codeSize/1024).toFixed(2):0;return(0,i.h)("div",{role:"button",class:"flex flex-v-center",tabIndex:"0",onClick:this.props.onClick,onBlur:this.props.onBlur},l," ",(0,i.h)("div",{class:"footer__js13k-days-left"},this.state.daysLeft," days to go"),(0,i.h)("div",{class:"footer__js13k-code-size",style:{color:10Hello, World!\"}"})),ne=(0,d.h)(S.default,null),se=(0,d.h)(G.Icons,null),ae=(0,d.h)("form",{style:"display:none;",action:"https://codepen.io/pen/define",method:"POST",target:"_blank",id:"codepenForm"},(0,d.h)("input",{type:"hidden",name:"data",value:"{\"title\": \"New Pen!\", \"html\": \"
    Hello, World!
    \"}"})),ie=function(e){function t(){a(this,t);var o=i(this,e.call(this));return o.AUTO_SAVE_INTERVAL=15000,o.modalDefaultStates={isModalOpen:!1,isAddLibraryModalOpen:!1,isSettingsModalOpen:!1,isHelpModalOpen:!1,isNotificationsModalOpen:!1,isLoginModalOpen:!1,isProfileModalOpen:!1,isSupportDeveloperModalOpen:!1,isKeyboardShortcutsModalOpen:!1,isAskToImportModalOpen:!1,isOnboardModalOpen:!1,isJs13KModalOpen:!1,isCreateNewModalOpen:!1},o.state=l({isSavedItemPaneOpen:!1},o.modalDefaultStates,{prefs:{},currentItem:{title:"",externalLibs:{js:"",css:""}}}),o.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,isJs13kModeOn:!1,autoCloseTags:!0},o.prefs={},O.default.auth().onAuthStateChanged(function(e){o.setState({isLoginModalOpen:!1}),e?((0,M.log)("You are -> ",e),A.alertsService.add("You are now logged in!"),o.setState({user:e}),window.user=e,!window.localStorage[Q.ASKED_TO_IMPORT_CREATIONS]&&o.fetchItems(!1,!0).then(function(e){e.length&&(o.oldSavedItems=e,o.oldSavedCreationsCount=e.length,o.setState({isAskToImportModalOpen:!0}),(0,j.trackEvent)("ui","askToImportModalSeen"))}),window.db.getUser(e.uid).then(function(t){if(t){var n=l({},o.state.prefs);l(n,e.settings),o.setState({prefs:n}),o.updateSetting()}})):(o.setState({user:void 0}),delete window.user),o.updateProfileUi()}),o}return r(t,e),t.prototype.componentWillMount=function(){var e,t=this;window.onunload=function(){t.saveCode("code"),t.detachedWindow&&t.detachedWindow.close()},db.local.get({layoutMode:1,code:""},function(o){t.toggleLayout(o.layoutMode),t.state.prefs.layoutMode=o.layoutMode,o.code&&(e=o.code)}),db.getSettings(this.defaultSettings).then(function(o){o.preserveLastCode&&e?(t.setState({unsavedEditCount:0}),e.id&&window.IS_EXTENSION?db.local.get(e.id,function(o){o[e.id]&&((0,M.log)("Load item ",e.id),t.setCurrentItem(o[e.id]).then(function(){return t.refreshEditor()}))}):((0,M.log)("Load last unsaved item",e),t.setCurrentItem(e).then(function(){return t.refreshEditor()}))):t.createNewItem(),l(t.state.prefs,o),t.setState({prefs:t.state.prefs}),t.updateSetting()}),db.getUserLastSeenVersion().then(function(e){e||(t.setState({isOnboardModalOpen:!0}),-1===document.cookie.indexOf("onboarded")&&((0,j.trackEvent)("ui","onboardModalSeen",ee),document.cookie="onboarded=1"),window.db.setUserLastSeenVersion(ee)),e&&-1===(0,M.semverCompare)(e,ee)&&!window.localStorage.pledgeModalSeen&&(t.openSupportDeveloperModal(),window.localStorage.pledgeModalSeen=!0),e&&-1!==(0,M.semverCompare)(e,ee)||(t.setState({hasUnseenChangelog:!0}),t.hasSeenNotifications=!1)})},t.prototype.updateProfileUi=function(){this.state.user?document.body.classList.add("is-logged-in"):document.body.classList.remove("is-logged-in")},t.prototype.refreshEditor=function(){this.toggleLayout(this.state.currentItem.layoutMode||this.state.prefs.layoutMode),this.updateExternalLibCount(),this.contentWrap.refreshEditor()},t.prototype.forkItem=function(e){var t=this;if(this.state.unsavedEditCount){var o=confirm("You have unsaved changes in your current work. Do you want to discard unsaved changes and continue?");if(!o)return}var n=JSON.parse(JSON.stringify(e));delete n.id,n.title="(Forked) "+e.title,n.updatedOn=Date.now(),this.setCurrentItem(n).then(function(){return t.refreshEditor()}),A.alertsService.add("\""+e.title+"\" was forked"),(0,j.trackEvent)("fn","itemForked")},t.prototype.createNewItem=function(){var e=this,t=new Date;this.setCurrentItem({title:"Untitled "+t.getDate()+"-"+(t.getMonth()+1)+"-"+t.getHours()+":"+t.getMinutes(),html:"",css:"",js:"",externalLibs:{js:"",css:""},layoutMode:this.state.currentLayoutMode}).then(function(){return e.refreshEditor()}),A.alertsService.add("New item created")},t.prototype.openItem=function(e){var t=this;this.setCurrentItem(e).then(function(){return t.refreshEditor()}),A.alertsService.add("Saved item loaded")},t.prototype.removeItem=function(e){var t=this,o=confirm("Are you sure you want to delete \""+e.title+"\"?");o&&(_.itemService.unsetItemForUser(e.id),_.itemService.removeItem(e.id).then(function(){A.alertsService.add("Item removed.",e),t.state.currentItem.id===e.id&&t.createNewItem()}),delete this.state.savedItems[e.id],this.setState({savedItems:l({},this.state.savedItems)}),(0,j.trackEvent)("fn","itemRemoved"))},t.prototype.setCurrentItem=function(e){var t=(0,E.deferred)();return e.htmlMode=e.htmlMode||this.state.prefs.htmlMode||L.HtmlModes.HTML,e.cssMode=e.cssMode||this.state.prefs.cssMode||L.CssModes.CSS,e.jsMode=e.jsMode||this.state.prefs.jsMode||L.JsModes.JS,this.setState({currentItem:e},t.resolve),this.isAutoSavingEnabled=!1,this.setState({unsavedEditCount:0}),t.promise},t.prototype.saveBtnClickHandler=function(){(0,j.trackEvent)("ui","saveBtnClick",this.state.currentItem.id?"saved":"new"),this.saveItem()},t.prototype.populateItemsInSavedPane=function(){this.setState({savedItems:l({},this.state.savedItems)}),this.toggleSavedItemsPane()},t.prototype.toggleSavedItemsPane=function(e){this.setState({isSavedItemPaneOpen:void 0===e?!this.state.isSavedItemPaneOpen:e}),this.state.isSavedItemPaneOpen?window.searchInput.focus():window.searchInput.value="",document.body.classList[this.state.isSavedItemPaneOpen?"add":"remove"]("overlay-visible")},t.prototype.fetchItems=function(){var e=s(function*(e,t){var o=this,n=(0,E.deferred)();this.state.savedItems={};var s=[];return window.user&&!t?(s=yield _.itemService.getAllItems(),(0,M.log)("got items"),e&&s.forEach(function(e){o.state.savedItems[e.id]=e}),n.resolve(s),n.promise):(db.local.get("items",function(t){var a=Object.getOwnPropertyNames(t.items||{});a.length||n.resolve([]),(0,j.trackEvent)("fn","fetchItems",a.length);for(var r=function(t){db.local.get(a[t],function(i){e&&(o.state.savedItems[a[t]]=i[a[t]]),s.push(i[a[t]]),a.length===s.length&&n.resolve(s)})},l=0;lwindow.innerWidth?2:e,this.state.currentLayoutMode===e?(this.contentWrap.resetSplitting(),void this.setState({currentLayoutMode:e})):void([1,2,3,4,5].forEach(function(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},function(){t.contentWrap.resetSplitting(),t.contentWrap.setPreviewContent(!0)}))},t.prototype.layoutBtnClickHandler=function(e){this.saveSetting("layoutMode",e),(0,j.trackEvent)("ui","toggleLayoutClick",e),this.toggleLayout(e)},t.prototype.getCodePaneSizes=function(){var e,t=this.state.currentLayoutMode,o=2===t||5===t?"width":"height";try{e=[htmlCodeEl.style[o],cssCodeEl.style[o],jsCodeEl.style[o]]}catch(t){e=[33.33,33.33,33.33]}finally{return e}},t.prototype.getMainPaneSizes=function(){var e,t=this.state.currentLayoutMode,o=2===t?"height":"width";try{e=[+$("#js-code-side").style[o].match(/([\d.]+)%/)[1],+$("#js-demo-side").style[o].match(/([\d.]+)%/)[1]]}catch(t){e=[50,50]}finally{return e}},t.prototype.saveSetting=function(e,t){var o,n=(0,E.deferred)(),s=(o={},o[e]=t,o);return db.local.set(s,n.resolve),n.promise},t.prototype.saveCode=function(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(),(0,M.log)("saving key",e||this.state.currentItem.id,this.state.currentItem),_.itemService.setItem(e||this.state.currentItem.id,this.state.currentItem).then(function(){window.user&&!navigator.onLine?A.alertsService.add("Item saved locally. Will save to account when you are online."):A.alertsService.add("Item saved."),this.setState({unsavedEditCount:0})}.bind(this))},t.prototype.saveItem=function(){var e=this;if(!window.user&&!window.localStorage[Q.LOGIN_AND_SAVE_MESSAGE_SEEN]){var t=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[Q.LOGIN_AND_SAVE_MESSAGE_SEEN]=!0,!t)return(0,j.trackEvent)("ui",Q.LOGIN_AND_SAVE_MESSAGE_SEEN,"login"),this.closeAllOverlays(),void this.setState({isLoginModalOpen:!0});(0,j.trackEvent)("ui",Q.LOGIN_AND_SAVE_MESSAGE_SEEN,"local")}var o=!this.state.currentItem.id;this.state.currentItem.id=this.state.currentItem.id||"item-"+(0,M.generateRandomId)(),this.setState({isSaving:!0}),this.saveCode().then(function(){e.setState({isSaving:!1}),!e.isAutoSavingEnabled&&e.state.prefs.autoSave&&(e.isAutoSavingEnabled=!0,A.alertsService.add("Auto-save enabled."))}),o&&_.itemService.setItemForUser(this.state.currentItem.id)},t.prototype.onCodeModeChange=function(e,t){var o=l({},this.state.currentItem);o[e+"Mode"]=t,this.setState({currentItem:o})},t.prototype.onCodeChange=function(e,t,o){var n=this;this.state.currentItem[e]=t,o&&(this.setState({unsavedEditCount:this.state.unsavedEditCount+1}),0==this.state.unsavedEditCount%X&&this.state.unsavedEditCount>=X&&(window.saveBtn.classList.add("animated"),window.saveBtn.classList.add("wobble"),window.saveBtn.addEventListener("animationend",function(){window.saveBtn.classList.remove("animated"),window.saveBtn.classList.remove("wobble")}))),this.state.prefs.isJs13kModeOn&&(this.codeSizeCalculationTimeout&&clearTimeout(this.codeSizeCalculationTimeout),this.codeSizeCalculationTimeout=setTimeout(function(){n.calculateCodeSize(),n.codeSizeCalculationTimeout=null},1e3))},t.prototype.onCodeSettingsChange=function(e,t){this.state.currentItem[e+"Settings"]={acssConfig:t}},t.prototype.titleInputBlurHandler=function(t){this.state.currentItem.title=t.target.value,this.state.currentItem.id&&(this.saveItem(),(0,j.trackEvent)("ui","titleChanged"))},t.prototype.updateSetting=function(t){var e=this;if(t){var o=t.target.dataset.setting,n={},s=t.target;(0,M.log)(o,"checkbox"===s.type?s.checked:s.value);var a=l({},this.state.prefs);a[o]="checkbox"===s.type?s.checked:s.value,n[o]=a[o],this.setState({prefs:a}),db.sync.set(n,function(){A.alertsService.add("Setting saved")}),window.user&&window.db.getDb().then(function(t){var n;t.collection("users").doc(window.user.uid).update((n={},n["settings."+o]=e.state.prefs[o],n)).then(function(e){(0,M.log)("Setting \""+o+"\" for user",e)}).catch(function(e){return(0,M.log)(e)})}),(0,j.trackEvent)("ui","updatePref-"+o,a[o])}var i=this.state.prefs;runBtn.classList[i.autoPreview?"add":"remove"]("hide"),this.contentWrap.applyCodemirrorSettings(this.state.prefs),i.autoSave?!this.autoSaveInterval&&(this.autoSaveInterval=setInterval(function(){e.autoSaveLoop()},this.AUTO_SAVE_INTERVAL)):(clearInterval(this.autoSaveInterval),this.autoSaveInterval=null),document.body.classList[i.lightVersion?"add":"remove"]("light-version")},t.prototype.autoSaveLoop=function(){this.isAutoSavingEnabled&&this.state.unsavedEditCount&&this.saveItem()},t.prototype.loginBtnClickHandler=function(){this.setState({isLoginModalOpen:!0})},t.prototype.profileBtnClickHandler=function(){this.setState({isProfileModalOpen:!0})},t.prototype.logout=function(){if(this.state.unsavedEditCount){var e=confirm("You have unsaved changes. Do you still want to logout?");if(!e)return}(0,j.trackEvent)("fn","loggedOut"),P.auth.logout(),this.setState({isProfileModalOpen:!1}),A.alertsService.add("Log out successfull")},t.prototype.itemClickHandler=function(e){var t=this;setTimeout(function(){t.openItem(e)},350),this.toggleSavedItemsPane()},t.prototype.itemRemoveBtnClickHandler=function(e){this.removeItem(e)},t.prototype.itemForkBtnClickHandler=function(e){var t=this;this.toggleSavedItemsPane(),setTimeout(function(){t.forkItem(e)},350)},t.prototype.newBtnClickHandler=function(){if((0,j.trackEvent)("ui","newBtnClick"),this.state.unsavedEditCount){var e=confirm("You have unsaved changes. Do you still want to create something new?");e&&this.setState({isCreateNewModalOpen:!0})}else this.setState({isCreateNewModalOpen:!0})},t.prototype.openBtnClickHandler=function(){(0,j.trackEvent)("ui","openBtnClick"),this.openSavedItemsPane()},t.prototype.detachedPreviewBtnHandler=function(){(0,j.trackEvent)("ui","detachPreviewBtnClick"),this.contentWrap.detachPreview()},t.prototype.notificationsBtnClickHandler=function(){return this.setState({isNotificationsModalOpen:!0}),this.state.isNotificationsModalOpen&&!this.hasSeenNotifications&&(this.hasSeenNotifications=!0,this.setState({hasUnseenChangelog:!1}),window.db.setUserLastSeenVersion(ee)),(0,j.trackEvent)("ui","notificationButtonClick",ee),!1},t.prototype.codepenBtnClickHandler=function(t){if(this.state.currentItem.cssMode===L.CssModes.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:L.modes[this.state.currentItem.htmlMode].codepenVal,css_pre_processor:L.modes[this.state.currentItem.cssMode].codepenVal,js_pre_processor:L.modes[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(),(0,j.trackEvent)("ui","openInCodepen"),t.preventDefault()},t.prototype.saveHtmlBtnClickHandler=function(t){(0,M.saveAsHtml)(this.state.currentItem),(0,j.trackEvent)("ui","saveHtmlClick"),t.preventDefault()},t.prototype.runBtnClickHandler=function(){this.contentWrap.setPreviewContent(!0,!0),(0,j.trackEvent)("ui","runBtnClick")},t.prototype.exportItems=function(){var e=this;(0,M.handleDownloadsPermission)().then(function(){e.fetchItems().then(function(e){var t=new Date,o=["web-maker-export",t.getFullYear(),t.getMonth()+1,t.getDate(),t.getHours(),t.getMinutes(),t.getSeconds()].join("-");o+=".json";var n=new Blob([JSON.stringify(e,!1,2)],{type:"application/json;charset=UTF-8"});(0,M.downloadFile)(o,n),(0,j.trackEvent)("fn","exportItems")})})},t.prototype.exportBtnClickHandler=function(t){this.exportItems(),t.preventDefault(),(0,j.trackEvent)("ui","exportBtnClicked")},t.prototype.screenshotBtnClickHandler=function(t){this.contentWrap.getDemoFrame(function(e){(0,F.takeScreenshot)(e.getBoundingClientRect())}),t.preventDefault()},t.prototype.openSupportDeveloperModal=function(){this.closeAllOverlays(),this.setState({isSupportDeveloperModalOpen:!0})},t.prototype.supportDeveloperBtnClickHandler=function(t){this.openSupportDeveloperModal(t)},t.prototype.dontAskToImportAnymore=function(t){this.setState({isAskToImportModalOpen:!1}),window.localStorage[Q.ASKED_TO_IMPORT_CREATIONS]=!0,t&&(0,j.trackEvent)("ui","dontAskToImportBtnClick")},t.prototype.mergeImportedItems=function(e){var t=[],o={},n=(0,E.deferred)(),s=this.state.savedItems;e.forEach(function(e){s[e.id]?t.push(e.id):((0,M.log)("merging",e.id),o[e.id]=e)});var a=e.length-t.length;if(t.length){var i=confirm(t.length+" creations already exist. Do you want to replace them?");i&&((0,M.log)("shouldreplace",i),e.forEach(function(e){o[e.id]=e}),a=e.length)}return a?_.itemService.saveItems(o).then(function(){n.resolve(),A.alertsService.add(a+" creations imported successfully."),(0,j.trackEvent)("fn","itemsImported",a)}):n.resolve(),this.closeSavedItemsPane(),n.promise},t.prototype.importCreationsAndSettingsIntoApp=function(){var e=this;this.mergeImportedItems(this.oldSavedItems).then(function(){(0,j.trackEvent)("fn","oldItemsImported"),e.dontAskToImportAnymore()})},t.prototype.editorFocusHandler=function(e){this.editorWithFocus=e},t.prototype.modalOverlayClickHandler=function(){this.closeAllOverlays()},t.prototype.splitUpdateHandler=function(){this.state.currentItem.sizes=this.getCodePaneSizes(),this.state.currentItem.mainSizes=this.getMainPaneSizes()},t.prototype.calculateTextSize=function(e){if(!e)return 0;var t=/(\r?\n|\r)/g,o=/(\r?\n|\r|\s+)/g;return{count:function(e,n){n=n||{},n.lineBreaks=n.lineBreaks||1,n.ignoreWhitespace=n.ignoreWhitespace||!1;var s=e.length,a=s-e.replace(/[\u0100-\uFFFF]/g,"").length,i=s-e.replace(t,"").length;return n.ignoreWhitespace?(e=e.replace(o,""),e.length+a):s+a+Math.max(0,n.lineBreaks*(i-1))},format:function(e,t){for(var o=0;1024"+e+"")+" "+o+"B"}}.count(e)},t.prototype.getExternalLibCode=function(){var e=this.state.currentItem,t=e.externalLibs&&e.externalLibs.js||"";return t+="\n"+e.externalLibs&&e.externalLibs.css||"",t=t.split("\n").filter(function(e){return e}),t.map(function(e){return fetch(e).then(function(e){return e.text()}).then(function(t){return{code:t,fileName:(0,M.getFilenameFromUrl)(e)}})})},t.prototype.calculateCodeSize=function(){var e=this,t=this.state.currentItem,o=(0,w.computeHtml)(t.html,t.htmlMode),n=(0,w.computeCss)(t.css,t.cssMode),s=(0,w.computeJs)(t.js,t.jsMode,!1);Promise.all([o,n,s].concat(this.getExternalLibCode())).then(function(o){var n=o[0].code||"",s=o[1].code||"",a=o[2].code||"",r=(0,M.getCompleteHtml)(n,s,a,t,!0);r=r.replace(/