diff --git a/src/script.js b/src/script.js
index d5dee8d..81bdd36 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1,17 +1,5 @@
-/* global trackEvent */
-/* global layoutBtn1, layoutBtn2, layoutBtn3, helpModal, notificationsModal, addLibraryModal,
-onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, layoutBtn5, onboardModal,
-onboardModal, addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal,
-notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
-onboardModal, settingsModal, notificationsBtn, editorThemeLinkTag, TextareaAutoComplete,
-savedItemCountEl, indentationSizeValueEl, pledgeModal
-runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
-customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
-globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal, headerAvatarImg,
-loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askToImportModal
-*/
/* eslint-disable no-extra-semi */
-(function(alertsService, itemService) {
+(function (alertsService, itemService) {
/* eslint-enable no-extra-semi */
var scope = scope || {};
var version = '3.2.0';
@@ -20,119 +8,12 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
window.scope = scope;
}
- const defaultSettings = {
- preserveLastCode: true,
- replaceNewTab: false,
- htmlMode: 'html',
- jsMode: 'js',
- cssMode: 'css',
- isCodeBlastOn: false,
- indentWith: 'spaces',
- indentSize: 2,
- editorTheme: 'monokai',
- keymap: 'sublime',
- fontSize: 16,
- refreshOnResize: false,
- autoPreview: true,
- editorFont: 'FiraCode',
- editorCustomFont: '',
- autoSave: true,
- autoComplete: true,
- preserveConsoleLogs: true,
- lightVersion: false,
- lineWrap: true,
- infiniteLoopTimeout: 1000
- };
- var HtmlModes = {
- HTML: 'html',
- MARKDOWN: 'markdown',
- JADE: 'jade' // unsafe eval is put in manifest for this file
- };
- var CssModes = {
- CSS: 'css',
- SCSS: 'scss',
- SASS: 'sass',
- LESS: 'less',
- STYLUS: 'stylus',
- ACSS: 'acss'
- };
- var JsModes = {
- JS: 'js',
- ES6: 'es6',
- COFFEESCRIPT: 'coffee',
- TS: 'typescript'
- };
- var modes = {};
- modes[HtmlModes.HTML] = {
- label: 'HTML',
- cmMode: 'htmlmixed',
- codepenVal: 'none'
- };
- modes[HtmlModes.MARKDOWN] = {
- label: 'Markdown',
- cmMode: 'markdown',
- codepenVal: 'markdown'
- };
- modes[HtmlModes.JADE] = { label: 'Pug', cmMode: 'pug', codepenVal: 'pug' };
- modes[JsModes.JS] = { label: 'JS', cmMode: 'javascript', codepenVal: 'none' };
- modes[JsModes.COFFEESCRIPT] = {
- label: 'CoffeeScript',
- cmMode: 'coffeescript',
- codepenVal: 'coffeescript'
- };
- modes[JsModes.ES6] = {
- label: 'ES6 (Babel)',
- cmMode: 'jsx',
- codepenVal: 'babel'
- };
- modes[JsModes.TS] = {
- label: 'TypeScript',
- cmPath: 'jsx',
- cmMode: 'text/typescript-jsx',
- codepenVal: 'typescript'
- };
- modes[CssModes.CSS] = {
- label: 'CSS',
- cmPath: 'css',
- cmMode: 'css',
- codepenVal: 'none'
- };
- modes[CssModes.SCSS] = {
- label: 'SCSS',
- cmPath: 'css',
- cmMode: 'text/x-scss',
- codepenVal: 'scss'
- };
- modes[CssModes.SASS] = { label: 'SASS', cmMode: 'sass', codepenVal: 'sass' };
- modes[CssModes.LESS] = {
- label: 'LESS',
- cmPath: 'css',
- cmMode: 'text/x-less',
- codepenVal: 'less'
- };
- modes[CssModes.STYLUS] = {
- label: 'Stylus',
- cmMode: 'stylus',
- codepenVal: 'stylus'
- };
- modes[CssModes.ACSS] = {
- label: 'Atomic CSS',
- cmPath: 'css',
- cmMode: 'css',
- codepenVal: 'notsupported',
- cmDisable: true,
- hasSettings: true
- };
- const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
+
const BASE_PATH = chrome.extension || window.DEBUG ? '/' : '/app';
const DEFAULT_PROFILE_IMG =
"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";
- const LocalStorageKeys = {
- LOGIN_AND_SAVE_MESSAGE_SEEN: 'loginAndsaveMessageSeen',
- ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
- };
var updateTimer,
updateDelay = 500,
autoSaveInterval,
@@ -149,93 +30,26 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
minCodeWrapSize = 33,
mainSplitInstance,
codeSplitInstance,
- prefs = {},
- codeInPreview = { html: null, css: null, js: null },
- isSavedItemsPaneOpen = false,
editorWithFocus,
logCount = 0,
- isAutoSavingEnabled,
- // DOM nodes
- frame = $('#demo-frame'),
- htmlCode = $('#js-html-code'),
- cssCode = $('#js-css-code'),
- jsCode = $('#js-js-code'),
- codepenForm = $('#js-codepen-form'),
- savedItemsPane = $('#js-saved-items-pane'),
- savedItemsPaneCloseBtn = $('#js-saved-items-pane-close-btn'),
- htmlModelLabel = $('#js-html-mode-label'),
- cssModelLabel = $('#js-css-mode-label'),
- jsModelLabel = $('#js-js-mode-label'),
- titleInput = $('#js-title-input'),
- addLibrarySelect = $('#js-add-library-select'),
- externalJsTextarea = $('#js-external-js'),
- externalCssTextarea = $('#js-external-css');
- scope.cm = {};
- scope.frame = frame;
- scope.demoFrameDocument =
- frame.contentDocument || frame.contentWindow.document;
- // Check all the code wrap if they are minimized or maximized
- function updateCodeWrapCollapseStates() {
- // This is debounced!
- clearTimeout(updateCodeWrapCollapseStates.timeout);
- updateCodeWrapCollapseStates.timeout = setTimeout(function() {
- const prop =
- currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
- [htmlCode, cssCode, jsCode].forEach(function(el) {
- const bounds = el.getBoundingClientRect();
- const size = bounds[prop];
- if (size < 100) {
- el.classList.add('is-minimized');
- } else {
- el.classList.remove('is-minimized');
- }
- if (el.style[prop].indexOf(`100% - ${minCodeWrapSize * 2}px`) !== -1) {
- el.classList.add('is-maximized');
- } else {
- el.classList.remove('is-maximized');
- }
- });
- }, 50);
- }
- function toggleCodeWrapCollapse(codeWrapEl) {
- if (
- codeWrapEl.classList.contains('is-minimized') ||
- codeWrapEl.classList.contains('is-maximized')
- ) {
- codeWrapEl.classList.remove('is-minimized');
- codeWrapEl.classList.remove('is-maximized');
- codeSplitInstance.setSizes([33.3, 33.3, 33.3]);
- } else {
- const id = parseInt(codeWrapEl.dataset.codeWrapId, 10);
- var arr = [
- `${minCodeWrapSize}px`,
- `${minCodeWrapSize}px`,
- `${minCodeWrapSize}px`
- ];
- arr[id] = `calc(100% - ${minCodeWrapSize * 2}px)`;
- codeSplitInstance.setSizes(arr);
- codeWrapEl.classList.add('is-maximized');
+ // Returns the sizes of main code & preview panes.
+ function getMainSplitSizesToApply() {
+ var mainSplitSizes;
+ if (currentItem && currentItem.mainSizes) {
+ // For layout mode 3, main panes are reversed using flex-direction.
+ // So we need to apply the saved sizes in reverse order.
+ mainSplitSizes =
+ currentLayoutMode === 3 ? [currentItem.mainSizes[1], currentItem.mainSizes[0]] :
+ currentItem.mainSizes;
+ } else {
+ mainSplitSizes = currentLayoutMode === 5 ? [75, 25] : [50, 50];
+ }
+ return mainSplitSizes;
}
- }
- // Returns the sizes of main code & preview panes.
- function getMainSplitSizesToApply() {
- var mainSplitSizes;
- if (currentItem && currentItem.mainSizes) {
- // For layout mode 3, main panes are reversed using flex-direction.
- // So we need to apply the saved sizes in reverse order.
- mainSplitSizes =
- currentLayoutMode === 3
- ? [currentItem.mainSizes[1], currentItem.mainSizes[0]]
- : currentItem.mainSizes;
- } else {
- mainSplitSizes = currentLayoutMode === 5 ? [75, 25] : [50, 50];
- }
- return mainSplitSizes;
- }
function resetSplitting() {
if (codeSplitInstance) {
@@ -246,16 +60,14 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
}
var options = {
- direction:
- currentLayoutMode === 2 || currentLayoutMode === 5
- ? 'horizontal'
- : 'vertical',
+ direction: currentLayoutMode === 2 || currentLayoutMode === 5 ?
+ 'horizontal' : 'vertical',
minSize: minCodeWrapSize,
gutterSize: 6,
- onDragStart: function() {
+ onDragStart: function () {
document.body.classList.add('is-dragging');
},
- onDragEnd: function() {
+ onDragEnd: function () {
updateCodeWrapCollapseStates();
document.body.classList.remove('is-dragging');
}
@@ -275,63 +87,18 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
minSize: 150,
gutterSize: 6,
sizes: getMainSplitSizesToApply(),
- onDragEnd: function() {
+ onDragEnd: function () {
if (prefs.refreshOnResize) {
// Running preview updation in next call stack, so that error there
// doesn't affect this dragend listener.
- setTimeout(function() {
+ setTimeout(function () {
scope.setPreviewContent(true);
}, 1);
}
}
});
}
- function toggleLayout(mode) {
- /* eslint-disable no-param-reassign */
- mode = window.innerWidth < 500 ? 2 : mode;
- if (currentLayoutMode === mode) {
- mainSplitInstance.setSizes(getMainSplitSizesToApply());
- codeSplitInstance.setSizes(currentItem.sizes || [33.33, 33.33, 33.33]);
- currentLayoutMode = mode;
- return;
- }
- currentLayoutMode = mode;
- // Remove all layout classes
- [1, 2, 3, 4, 5].forEach(layoutNumber => {
- window[`layoutBtn${layoutNumber}`].classList.remove('selected');
- document.body.classList.remove(`layout-${layoutNumber}`);
- });
- $('#layoutBtn' + mode).classList.add('selected');
- document.body.classList.add('layout-' + mode);
-
- resetSplitting();
- scope.setPreviewContent(true);
- }
-
- function onExternalLibChange() {
- utils.log('onExternalLibChange');
- updateExternalLibUi();
- scope.setPreviewContent(true);
- alertsService.add('Libraries updated.');
- }
-
- function updateExternalLibUi() {
- // Calculate no. of external libs
- var noOfExternalLibs = 0;
- noOfExternalLibs += externalJsTextarea.value
- .split('\n')
- .filter(lib => !!lib).length;
- noOfExternalLibs += externalCssTextarea.value
- .split('\n')
- .filter(lib => !!lib).length;
- if (noOfExternalLibs) {
- $('#js-external-lib-count').textContent = noOfExternalLibs;
- $('#js-external-lib-count').style.display = 'inline';
- } else {
- $('#js-external-lib-count').style.display = 'none';
- }
- }
function saveSetting(setting, value) {
const d = deferred();
@@ -342,51 +109,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
return d.promise;
}
- // Save current item to storage
- function saveItem() {
- if (
- !window.user &&
- !window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN]
- ) {
- const answer = 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?'
- );
- window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN] = true;
- if (!answer) {
- trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'login');
- closeAllOverlays();
- loginModal.classList.add('is-modal-visible');
- return;
- }
- trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'local');
- }
- var isNewItem = !currentItem.id;
- currentItem.id = currentItem.id || 'item-' + utils.generateRandomId();
- saveBtn.classList.add('is-loading');
- saveCode().then(() => {
- saveBtn.classList.remove('is-loading');
- // If this is the first save, and auto-saving settings is enabled,
- // then start auto-saving from now on.
- // This is done in `saveCode()` completion so that the
- // auto-save notification overrides the `saveCode` function's notification.
- if (!isAutoSavingEnabled && prefs.autoSave) {
- isAutoSavingEnabled = true;
- alertsService.add('Auto-save enabled.');
- }
- });
- // Push into the items hash if its a new item being saved
- if (isNewItem) {
- itemService.setItemForUser(currentItem.id);
- }
- }
- // Keeps getting called after certain interval to auto-save current creation
- // if it needs to be.
- function autoSaveLoop() {
- if (isAutoSavingEnabled && unsavedEditCount) {
- saveItem();
- }
- }
// Calculates the sizes of html, css & js code panes.
function getCodePaneSizes() {
@@ -414,10 +137,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
var sizes;
var dimensionProperty = currentLayoutMode === 2 ? 'height' : 'width';
try {
- sizes = [
- +$('#js-code-side').style[dimensionProperty].match(/([\d.]+)%/)[1],
- +$('#js-demo-side').style[dimensionProperty].match(/([\d.]+)%/)[1]
- ];
+ sizes = [+$('#js-code-side').style[dimensionProperty].match(/([\d.]+)%/)[1], +$('#js-demo-side').style[dimensionProperty].match(/([\d.]+)%/)[1]];
} catch (e) {
sizes = [50, 50];
} finally {
@@ -428,237 +148,6 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
}
}
- function saveCode(key) {
- currentItem.title = titleInput.value;
- currentItem.html = scope.cm.html.getValue();
- currentItem.css = scope.cm.css.getValue();
- currentItem.js = scope.cm.js.getValue();
- currentItem.htmlMode = htmlMode;
- currentItem.cssMode = cssMode;
- currentItem.jsMode = jsMode;
- if (modes[cssMode].hasSettings) {
- currentItem.cssSettings = {
- acssConfig: scope.acssSettingsCm.getValue()
- };
- }
- currentItem.updatedOn = Date.now();
- currentItem.layoutMode = currentLayoutMode;
- currentItem.externalLibs = {
- js: externalJsTextarea.value,
- css: externalCssTextarea.value
- };
-
- currentItem.sizes = getCodePaneSizes();
- currentItem.mainSizes = getMainPaneSizes();
-
- utils.log('saving key', key || currentItem.id, currentItem);
-
- function onSaveComplete() {
- if (window.user && !navigator.onLine) {
- alertsService.add(
- 'Item saved locally. Will save to account when you are online.'
- );
- } else {
- alertsService.add('Item saved.');
- }
- unsavedEditCount = 0;
- saveBtn.classList.remove('is-marked');
- }
-
- return itemService
- .setItem(key || currentItem.id, currentItem)
- .then(onSaveComplete);
- }
-
- function populateItemsInSavedPane(items) {
- var html = '';
- if (items.length) {
- // TODO: sort desc. by updation date
- items.sort(function(a, b) {
- return b.updatedOn - a.updatedOn;
- });
- items.forEach(function(item) {
- html +=
- '
' +
- '
' +
- '
' +
- item.title +
- '
Last updated: ' +
- utils.getHumanDate(item.updatedOn) +
- ' ';
- });
- savedItemCountEl.textContent = '(' + items.length + ')';
- savedItemCountEl.style.display = 'inline';
- } else {
- html += 'Nothing saved here.
';
- savedItemCountEl.style.display = 'none';
- }
- savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html;
- toggleSavedItemsPane();
- // HACK: Set overflow after sometime so that the items can animate without getting cropped.
- // setTimeout(() => $('#js-saved-items-wrap').style.overflowY = 'auto', 1000);
- }
-
- function toggleSavedItemsPane(shouldOpen) {
- if (shouldOpen === false) {
- savedItemsPane.classList.remove('is-open');
- } else {
- savedItemsPane.classList.toggle('is-open');
- }
- isSavedItemsPaneOpen = savedItemsPane.classList.contains('is-open');
- if (isSavedItemsPaneOpen) {
- searchInput.focus();
- } else {
- searchInput.value = '';
- // Give last focused editor, focus again
- if (editorWithFocus) {
- editorWithFocus.focus();
- }
- }
- document.body.classList[isSavedItemsPaneOpen ? 'add' : 'remove'](
- 'overlay-visible'
- );
- }
-
- /**
- * Fetches all items from storage
- * @param {boolean} shouldSaveGlobally Whether to store the fetched items in global arr for later use.
- * @return {promise} Promise.
- */
- async function fetchItems(shouldSaveGlobally, shouldFetchLocally) {
- var d = deferred();
- savedItems = {};
- var items = [];
- if (window.user && !shouldFetchLocally) {
- items = await itemService.getAllItems();
- utils.log('got items');
- if (shouldSaveGlobally) {
- items.forEach(item => {
- savedItems[item.id] = item;
- });
- }
- d.resolve(items);
- return d.promise;
- }
- db.local.get('items', function(result) {
- var itemIds = Object.getOwnPropertyNames(result.items || {});
- if (!itemIds.length) {
- d.resolve([]);
- }
-
- trackEvent('fn', 'fetchItems', itemIds.length);
- for (let i = 0; i < itemIds.length; i++) {
- /* eslint-disable no-loop-func */
- db.local.get(itemIds[i], function(itemResult) {
- if (shouldSaveGlobally) {
- savedItems[itemIds[i]] = itemResult[itemIds[i]];
- }
- items.push(itemResult[itemIds[i]]);
- // Check if we have all items now.
- if (itemIds.length === items.length) {
- d.resolve(items);
- }
- });
-
- /* eslint-enable no-loop-func */
- }
- });
- return d.promise;
- }
-
- function openSavedItemsPane() {
- openItemsBtn.classList.add('is-loading');
- fetchItems(true).then(function(items) {
- openItemsBtn.classList.remove('is-loading');
- populateItemsInSavedPane(items);
- });
- }
- function setCurrentItem(item) {
- currentItem = item;
- utils.log('Current Item set', item);
-
- // Reset auto-saving flag
- isAutoSavingEnabled = false;
- // Reset unsaved count, in UI also.
- unsavedEditCount = 0;
- saveBtn.classList.remove('is-marked');
- }
- // Creates a new item with passed item's contents
- function forkItem(sourceItem) {
- if (unsavedEditCount) {
- var shouldDiscard = confirm(
- 'You have unsaved changes in your current work. Do you want to discard unsaved changes and continue?'
- );
- if (!shouldDiscard) {
- return;
- }
- }
- const fork = JSON.parse(JSON.stringify(sourceItem));
- delete fork.id;
- fork.title = '(Forked) ' + sourceItem.title;
- fork.updatedOn = Date.now();
- setCurrentItem(fork);
- refreshEditor();
- alertsService.add(`"${sourceItem.title}" was forked`);
- trackEvent('fn', 'itemForked');
- }
- function createNewItem() {
- var d = new Date();
- setCurrentItem({
- title:
- 'Untitled ' +
- d.getDate() +
- '-' +
- (d.getMonth() + 1) +
- '-' +
- d.getHours() +
- ':' +
- d.getMinutes(),
- html: '',
- css: '',
- js: '',
- externalLibs: { js: '', css: '' },
- layoutMode: currentLayoutMode
- });
- refreshEditor();
- alertsService.add('New item created');
- }
- function openItem(itemId) {
- setCurrentItem(savedItems[itemId]);
- refreshEditor();
- alertsService.add('Saved item loaded');
- }
- function removeItem(itemId) {
- var itemTile = document.querySelector(
- '.js-saved-item-tile[data-item-id="' + itemId + '"]'
- );
- var answer = confirm(
- `Are you sure you want to delete "${savedItems[itemId].title}"?`
- );
- if (!answer) {
- return;
- }
-
- itemTile.remove();
- // Remove from items list
- itemService.unsetItemForUser(itemId);
-
- // Remove individual item too.
- itemService.removeItem(itemId).then(() => {
- alertsService.add('Item removed.');
- // This item is open in the editor. Lets open a new one.
- if (currentItem.id === itemId) {
- createNewItem();
- }
- });
-
- // Remove from cached list
- delete savedItems[itemId];
-
- trackEvent('fn', 'itemRemoved');
- }
function refreshEditor() {
titleInput.value = currentItem.title || 'Untitled';
@@ -718,63 +207,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
document.dispatchEvent(new Event('overlaysClosed'));
}
- /**
- * Loaded the code comiler based on the mode selected
- */
- function handleModeRequirements(mode) {
- const baseTranspilerPath = 'lib/transpilers';
- // Exit if already loaded
- var d = deferred();
- if (modes[mode].hasLoaded) {
- d.resolve();
- return d.promise;
- }
- function setLoadedFlag() {
- modes[mode].hasLoaded = true;
- d.resolve();
- }
-
- if (mode === HtmlModes.JADE) {
- loadJS(`${baseTranspilerPath}/jade.js`).then(setLoadedFlag);
- } else if (mode === HtmlModes.MARKDOWN) {
- loadJS(`${baseTranspilerPath}/marked.js`).then(setLoadedFlag);
- } else if (mode === CssModes.LESS) {
- loadJS(`${baseTranspilerPath}/less.min.js`).then(setLoadedFlag);
- } else if (mode === CssModes.SCSS || mode === CssModes.SASS) {
- loadJS(`${baseTranspilerPath}/sass.js`).then(function() {
- sass = new Sass(`${baseTranspilerPath}/sass.worker.js`);
- setLoadedFlag();
- });
- } else if (mode === CssModes.STYLUS) {
- loadJS(`${baseTranspilerPath}/stylus.min.js`).then(setLoadedFlag);
- } else if (mode === CssModes.ACSS) {
- loadJS(`${baseTranspilerPath}/atomizer.browser.js`).then(setLoadedFlag);
- } else if (mode === JsModes.COFFEESCRIPT) {
- loadJS(`${baseTranspilerPath}/coffee-script.js`).then(setLoadedFlag);
- } else if (mode === JsModes.ES6) {
- loadJS(`${baseTranspilerPath}/babel.min.js`).then(setLoadedFlag);
- } else if (mode === JsModes.TS) {
- loadJS(`${baseTranspilerPath}/typescript.js`).then(setLoadedFlag);
- } else {
- d.resolve();
- }
-
- return d.promise;
- }
-
- function updateHtmlMode(value) {
- htmlMode = value;
- htmlModelLabel.textContent = modes[value].label;
- // FIXME - use a better selector for the mode selectbox
- htmlModelLabel.parentElement.querySelector('select').value = value;
- scope.cm.html.setOption('mode', modes[value].cmMode);
- CodeMirror.autoLoadMode(
- scope.cm.html,
- modes[value].cmPath || modes[value].cmMode
- );
- return handleModeRequirements(value);
- }
function updateCssMode(value) {
cssMode = value;
cssModelLabel.textContent = modes[value].label;
@@ -791,228 +224,17 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
);
return handleModeRequirements(value);
}
- function updateJsMode(value) {
- jsMode = value;
- jsModelLabel.textContent = modes[value].label;
- // FIXME - use a better selector for the mode selectbox
- jsModelLabel.parentElement.querySelector('select').value = value;
- scope.cm.js.setOption('mode', modes[value].cmMode);
- CodeMirror.autoLoadMode(
- scope.cm.js,
- modes[value].cmPath || modes[value].cmMode
- );
- return handleModeRequirements(value);
- }
- // computeHtml, computeCss & computeJs evaluate the final code according
- // to whatever mode is selected and resolve the returned promise with the code.
- function computeHtml() {
- var d = deferred();
- var code = scope.cm.html.getValue();
- if (htmlMode === HtmlModes.HTML) {
- d.resolve(code);
- } else if (htmlMode === HtmlModes.MARKDOWN) {
- d.resolve(marked ? marked(code) : code);
- } else if (htmlMode === HtmlModes.JADE) {
- d.resolve(window.jade ? jade.render(code) : code);
- }
- return d.promise;
- }
- function computeCss() {
- var d = deferred();
- var code = scope.cm.css.getValue();
- cleanupErrors('css');
- if (cssMode === CssModes.CSS) {
- d.resolve(code);
- } else if (cssMode === CssModes.SCSS || cssMode === CssModes.SASS) {
- if (sass && code) {
- sass.compile(
- code,
- { indentedSyntax: cssMode === CssModes.SASS },
- function(result) {
- // Something was wrong
- if (result.line && result.message) {
- showErrors('css', [
- { lineNumber: result.line - 1, message: result.message }
- ]);
- }
- d.resolve(result.text);
- }
- );
- } else {
- d.resolve(code);
- }
- } else if (cssMode === CssModes.LESS) {
- less.render(code).then(
- function(result) {
- d.resolve(result.css);
- },
- function(error) {
- showErrors('css', [
- { lineNumber: error.line, message: error.message }
- ]);
- }
- );
- } else if (cssMode === CssModes.STYLUS) {
- stylus(code).render(function(error, result) {
- if (error) {
- window.err = error;
- // Last line of message is the actual message
- var tempArr = error.message.split('\n');
- tempArr.pop(); // This is empty string in the end
- showErrors('css', [
- {
- lineNumber: +error.message.match(/stylus:(\d+):/)[1] - 298,
- message: tempArr.pop()
- }
- ]);
- }
- d.resolve(result);
- });
- } else if (cssMode === CssModes.ACSS) {
- if (!window.atomizer) {
- d.resolve('');
- } else {
- const html = scope.cm.html.getValue();
- const foundClasses = atomizer.findClassNames(html);
- var finalConfig;
- try {
- finalConfig = atomizer.getConfig(
- foundClasses,
- JSON.parse(scope.acssSettingsCm.getValue())
- );
- } catch (e) {
- finalConfig = atomizer.getConfig(foundClasses, {});
- }
- const acss = atomizer.getCss(finalConfig);
- scope.cm.css.setValue(acss);
- d.resolve(acss);
- }
- }
-
- return d.promise;
- }
- function computeJs(shouldPreventInfiniteLoops) {
- var d = deferred();
- var code = scope.cm.js.getValue();
-
- cleanupErrors('js');
- if (!code) {
- d.resolve('');
- return d.promise;
- }
-
- if (jsMode === JsModes.JS) {
- try {
- esprima.parse(code, {
- tolerant: true
- });
- } catch (e) {
- showErrors('js', [
- { lineNumber: e.lineNumber - 1, message: e.description }
- ]);
- } finally {
- if (shouldPreventInfiniteLoops !== false) {
- code = utils.addInfiniteLoopProtection(code, {
- timeout: prefs.infiniteLoopTimeout
- });
- }
- d.resolve(code);
- }
- } else if (jsMode === JsModes.COFFEESCRIPT) {
- if (!window.CoffeeScript) {
- d.resolve('');
- return d.promise;
- }
- try {
- code = CoffeeScript.compile(code, { bare: true });
- } catch (e) {
- showErrors('js', [
- { lineNumber: e.location.first_line, message: e.message }
- ]);
- } finally {
- if (shouldPreventInfiniteLoops !== false) {
- code = utils.addInfiniteLoopProtection(code, {
- timeout: prefs.infiniteLoopTimeout
- });
- }
- d.resolve(code);
- }
- } else if (jsMode === JsModes.ES6) {
- if (!window.Babel) {
- d.resolve('');
- return d.promise;
- }
- try {
- esprima.parse(code, {
- tolerant: true,
- jsx: true
- });
- } catch (e) {
- showErrors('js', [
- { lineNumber: e.lineNumber - 1, message: e.description }
- ]);
- } finally {
- code = Babel.transform(code, {
- presets: ['latest', 'stage-2', 'react']
- }).code;
- if (shouldPreventInfiniteLoops !== false) {
- code = utils.addInfiniteLoopProtection(code, {
- timeout: prefs.infiniteLoopTimeout
- });
- }
- d.resolve(code);
- }
- } else if (jsMode === JsModes.TS) {
- try {
- if (!window.ts) {
- d.resolve('');
- return d.promise;
- }
- code = ts.transpileModule(code, {
- reportDiagnostics: true,
- compilerOptions: {
- noEmitOnError: true,
- diagnostics: true,
- module: ts.ModuleKind.ES2015
- }
- });
- if (code.diagnostics.length) {
- /* eslint-disable no-throw-literal */
- throw {
- description: code.diagnostics[0].messageText,
- lineNumber: ts.getLineOfLocalPosition(
- code.diagnostics[0].file,
- code.diagnostics[0].start
- )
- };
- }
- if (shouldPreventInfiniteLoops !== false) {
- code = utils.addInfiniteLoopProtection(code.outputText, {
- timeout: prefs.infiniteLoopTimeout
- });
- }
- d.resolve(code);
- } catch (e) {
- showErrors('js', [
- { lineNumber: e.lineNumber - 1, message: e.description }
- ]);
- }
- }
-
- return d.promise;
- }
-
- window.previewException = function(error) {
+ window.previewException = function (error) {
console.error('Possible infinite loop detected.', error.stack);
window.onMessageFromConsole(
'Possible infinite loop detected.',
error.stack
);
};
- window.onunload = function() {
+ window.onunload = function () {
saveCode('code');
if (scope.detachedWindow) {
scope.detachedWindow.close();
@@ -1022,10 +244,11 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
function cleanupErrors(lang) {
scope.cm[lang].clearGutter('error-gutter');
}
+
function showErrors(lang, errors) {
var editor = scope.cm[lang];
- errors.forEach(function(e) {
- editor.operation(function() {
+ errors.forEach(function (e) {
+ editor.operation(function () {
var n = document.createElement('div');
n.setAttribute('data-title', e.message);
n.classList.add('gutter-error-marker');
@@ -1034,225 +257,13 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
});
}
- /* eslint max-params: ["error", 4] */
- function getCompleteHtml(html, css, js, isForExport) {
- var externalJs = externalJsTextarea.value
- .split('\n')
- .reduce(function(scripts, url) {
- return scripts + (url ? '\n' : '');
- }, '');
- var externalCss = externalCssTextarea.value
- .split('\n')
- .reduce(function(links, url) {
- return (
- links +
- (url ? '\n' : '')
- );
- }, '');
- var contents =
- '\n' +
- '\n\n' +
- '\n' +
- externalCss +
- '\n' +
- '\n' +
- '\n' +
- '\n' +
- html +
- '\n' +
- externalJs +
- '\n';
- if (!isForExport) {
- contents +=
- '';
- }
-
- if (jsMode === JsModes.ES6) {
- contents +=
- '';
- }
-
- if (typeof js === 'string') {
- contents += '\n\n';
-
- return contents;
- }
-
- function writeFile(name, blob, cb) {
- var fileWritten = false;
- function getErrorHandler(type) {
- return function() {
- utils.log(arguments);
- trackEvent('fn', 'error', type);
- // When there are too many write errors, show a message.
- writeFile.errorCount = (writeFile.errorCount || 0) + 1;
- if (writeFile.errorCount === 4) {
- 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."
- );
- trackEvent('ui', 'writeFileMessageSeen');
- }, 1000);
- }
- };
- }
-
- // utils.log('writing file ', name);
- window.webkitRequestFileSystem(
- window.TEMPORARY,
- 1024 * 1024 * 5,
- function(fs) {
- fs.root.getFile(
- name,
- { create: true },
- function(fileEntry) {
- fileEntry.createWriter(fileWriter => {
- function onWriteComplete() {
- if (fileWritten) {
- // utils.log('file written ', name);
- return cb();
- }
- fileWritten = true;
- // Set the write pointer to starting of file
- fileWriter.seek(0);
- fileWriter.write(blob);
- return false;
- }
- fileWriter.onwriteend = onWriteComplete;
- // Empty the file contents
- fileWriter.truncate(0);
- // utils.log('truncating file ', name);
- }, getErrorHandler('createWriterFail'));
- },
- getErrorHandler('getFileFail')
- );
- },
- getErrorHandler('webkitRequestFileSystemFail')
- );
- }
-
- function createPreviewFile(html, css, js) {
- const shouldInlineJs =
- !window.webkitRequestFileSystem || !window.IS_EXTENSION;
- var contents = getCompleteHtml(html, css, shouldInlineJs ? js : null);
- var blob = new Blob([contents], { type: 'text/plain;charset=UTF-8' });
- var blobjs = new Blob([js], { type: 'text/plain;charset=UTF-8' });
-
- // Track if people have written code.
- if (!trackEvent.hasTrackedCode && (html || css || js)) {
- trackEvent('fn', 'hasCode');
- trackEvent.hasTrackedCode = true;
- }
-
- if (shouldInlineJs) {
- if (scope.detachedWindow) {
- utils.log('✉️ Sending message to detached window');
- scope.detachedWindow.postMessage({ contents }, '*');
- } else {
- frame.src = frame.src;
- setTimeout(() => {
- frame.contentDocument.open();
- frame.contentDocument.write(contents);
- frame.contentDocument.close();
- }, 10);
- }
- } else {
- // we need to store user script in external JS file to prevent inline-script
- // CSP from affecting it.
- writeFile('script.js', blobjs, function() {
- writeFile('preview.html', blob, function() {
- var origin = chrome.i18n.getMessage()
- ? `chrome-extension://${chrome.i18n.getMessage('@@extension_id')}`
- : `${location.origin}`;
- var src = `filesystem:${origin}/temporary/preview.html`;
- if (scope.detachedWindow) {
- scope.detachedWindow.postMessage(src, '*');
- } else {
- frame.src = src;
- }
- });
- });
- }
- }
-
- /**
- * Generates the preview from the current code.
- * @param {boolean} isForced Should refresh everything without any check or not
- * @param {boolean} isManual Is this a manual preview request from user?
- */
- scope.setPreviewContent = function(isForced, isManual) {
- if (!prefs.autoPreview && !isManual) {
- return;
- }
-
- if (!prefs.preserveConsoleLogs) {
- scope.clearConsole();
- }
-
- var currentCode = {
- html: scope.cm.html.getValue(),
- css: scope.cm.css.getValue(),
- js: scope.cm.js.getValue()
- };
- utils.log('🔎 setPreviewContent', isForced);
- const targetFrame = scope.detachedWindow
- ? scope.detachedWindow.document.querySelector('iframe')
- : frame;
-
- // If just CSS was changed (and everything shudn't be empty),
- // change the styles inside the iframe.
- if (
- !isForced &&
- currentCode.html === codeInPreview.html &&
- currentCode.js === codeInPreview.js
- ) {
- computeCss().then(function(css) {
- if (targetFrame.contentDocument.querySelector('#webmakerstyle')) {
- targetFrame.contentDocument.querySelector(
- '#webmakerstyle'
- ).textContent = css;
- }
- });
- } else {
- var htmlPromise = computeHtml();
- var cssPromise = computeCss();
- var jsPromise = computeJs();
- Promise.all([htmlPromise, cssPromise, jsPromise]).then(function(result) {
- createPreviewFile(result[0], result[1], result[2]);
- });
- }
-
- codeInPreview.html = currentCode.html;
- codeInPreview.css = currentCode.css;
- codeInPreview.js = currentCode.js;
- };
function saveFile() {
var htmlPromise = computeHtml();
var cssPromise = computeCss();
var jsPromise = computeJs(false);
- Promise.all([htmlPromise, cssPromise, jsPromise]).then(function(result) {
+ Promise.all([htmlPromise, cssPromise, jsPromise]).then(function (result) {
var html = result[0],
css = result[1],
js = result[2];
@@ -1275,154 +286,15 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
}
fileName += '.html';
- var blob = new Blob([fileContent], { type: 'text/html;charset=UTF-8' });
+ var blob = new Blob([fileContent], {
+ type: 'text/html;charset=UTF-8'
+ });
utils.downloadFile(fileName, blob);
trackEvent('fn', 'saveFileComplete');
});
}
- function initEditor(element, options) {
- var cm = CodeMirror(element, {
- mode: options.mode,
- lineNumbers: true,
- lineWrapping: true,
- autofocus: options.autofocus || false,
- autoCloseBrackets: true,
- autoCloseTags: true,
- matchBrackets: true,
- matchTags: options.matchTags || false,
- tabMode: 'indent',
- keyMap: 'sublime',
- theme: 'monokai',
- lint: !!options.lint,
- tabSize: 2,
- foldGutter: true,
- styleActiveLine: true,
- gutters: options.gutters || [],
- // cursorScrollMargin: '20', has issue with scrolling
- profile: options.profile || '',
- extraKeys: {
- Up: function(editor) {
- // Stop up/down keys default behavior when saveditempane is open
- if (isSavedItemsPaneOpen) {
- return;
- }
- CodeMirror.commands.goLineUp(editor);
- },
- Down: function(editor) {
- if (isSavedItemsPaneOpen) {
- return;
- }
- CodeMirror.commands.goLineDown(editor);
- },
- 'Shift-Tab': function(editor) {
- CodeMirror.commands.indentAuto(editor);
- },
- Tab: function(editor) {
- if (options.emmet) {
- const didEmmetWork = editor.execCommand('emmetExpandAbbreviation');
- if (didEmmetWork === true) {
- return;
- }
- }
- const input = $('[data-setting=indentWith]:checked');
- if (
- !editor.somethingSelected() &&
- (!input || input.value === 'spaces')
- ) {
- // softtabs adds spaces. This is required because by default tab key will put tab, but we want
- // to indent with spaces if `spaces` is preferred mode of indentation.
- // `somethingSelected` needs to be checked otherwise, all selected code is replaced with softtab.
- CodeMirror.commands.insertSoftTab(editor);
- } else {
- CodeMirror.commands.defaultTab(editor);
- }
- },
- Enter: 'emmetInsertLineBreak'
- }
- });
- cm.on('focus', editor => {
- editorWithFocus = editor;
- });
- cm.on('change', function onChange(editor, change) {
- clearTimeout(updateTimer);
-
- updateTimer = setTimeout(function() {
- // This is done so that multiple simultaneous setValue don't trigger too many preview refreshes
- // and in turn too many file writes on a single file (eg. preview.html).
- if (change.origin !== 'setValue') {
- // Specifically checking for false so that the condition doesn't get true even
- // on absent key - possible when the setting key hasn't been fetched yet.
- if (prefs.autoPreview !== false) {
- scope.setPreviewContent();
- }
-
- saveBtn.classList.add('is-marked');
- unsavedEditCount += 1;
- if (
- unsavedEditCount % unsavedEditWarningCount === 0 &&
- unsavedEditCount >= unsavedEditWarningCount
- ) {
- saveBtn.classList.add('animated');
- saveBtn.classList.add('wobble');
- saveBtn.addEventListener('animationend', () => {
- saveBtn.classList.remove('animated');
- saveBtn.classList.remove('wobble');
- });
- }
-
- // Track when people actually are working.
- trackEvent.previewCount = (trackEvent.previewCount || 0) + 1;
- if (trackEvent.previewCount === 4) {
- trackEvent('fn', 'usingPreview');
- }
- }
- }, updateDelay);
- });
- cm.addKeyMap({
- 'Ctrl-Space': 'autocomplete'
- });
- if (!options.noAutocomplete) {
- cm.on('inputRead', function onChange(editor, input) {
- if (
- !prefs.autoComplete ||
- input.origin !== '+input' ||
- input.text[0] === ';' ||
- input.text[0] === ',' ||
- input.text[0] === ' '
- ) {
- return;
- }
- CodeMirror.commands.autocomplete(cm, null, { completeSingle: false });
- });
- }
- return cm;
- }
-
- scope.cm.html = initEditor(htmlCode, {
- mode: 'htmlmixed',
- profile: 'xhtml',
- gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
- noAutocomplete: true,
- matchTags: { bothTags: true },
- emmet: true
- });
- scope.cm.css = initEditor(cssCode, {
- mode: 'css',
- gutters: [
- 'error-gutter',
- 'CodeMirror-linenumbers',
- 'CodeMirror-foldgutter'
- ],
- emmet: true
- });
- Inlet(scope.cm.css);
- scope.cm.js = initEditor(jsCode, {
- mode: 'javascript',
- gutters: ['error-gutter', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter']
- });
- Inlet(scope.cm.js);
// Initialize codemirror in console
scope.consoleCm = CodeMirror(consoleLogEl, {
@@ -1434,23 +306,6 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
gutters: ['CodeMirror-foldgutter']
});
- // DEPRECATED
- function openSettings() {
- scope.toggleModal(settingsModal);
-
- /* if (chrome.runtime.openOptionsPage) {
- // New way to open options pages, if supported (Chrome 42+).
- // Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=601997
- // Until this bug fixes, use the
- // fallback.
- chrome.runtime.openOptionsPage();
- } else {
- // Fallback.
- chrome.tabs.create({
- url: 'chrome://extensions?options=' + chrome.i18n.getMessage('@@extension_id')
- });
- } */
- }
scope.onModalSettingsLinkClick = function onModalSettingsLinkClick() {
openSettings();
@@ -1466,7 +321,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
scope.exportItems = function exportItems(e) {
handleDownloadsPermission().then(() => {
- fetchItems().then(function(items) {
+ fetchItems().then(function (items) {
var d = new Date();
var fileName = [
'web-maker-export',
@@ -1510,7 +365,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
if (existingItemIds.length) {
var shouldReplace = confirm(
existingItemIds.length +
- ' creations already exist. Do you want to replace them?'
+ ' creations already exist. Do you want to replace them?'
);
if (shouldReplace) {
utils.log('shouldreplace', shouldReplace);
@@ -1541,7 +396,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
var file = e.target.files[0];
var reader = new FileReader();
- reader.onload = function(progressEvent) {
+ reader.onload = function (progressEvent) {
var items;
try {
items = JSON.parse(progressEvent.target.result);
@@ -1589,7 +444,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
}
// create a blob for writing to a file
- var blob = new Blob([ab], { type: mimeString });
+ var blob = new Blob([ab], {
+ type: mimeString
+ });
var size = blob.size + 1024 / 2;
var d = new Date();
@@ -1611,11 +468,10 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
'/temporary/' +
fileName;
- chrome.downloads.download(
- {
+ chrome.downloads.download({
url: filePath
},
- function() {
+ function () {
// If there was an error, just open the screenshot in a tab.
// This happens in incognito mode where extension cannot access filesystem.
if (chrome.runtime.lastError) {
@@ -1635,8 +491,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
size,
fs => {
fs.root.getFile(
- fileName,
- { create: true },
+ fileName, {
+ create: true
+ },
fileEntry => {
fileEntry.createWriter(fileWriter => {
fileWriter.onwriteend = onWriteEnd;
@@ -1656,19 +513,17 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
d.resolve();
return d.promise;
}
- chrome.permissions.contains(
- {
+ chrome.permissions.contains({
permissions: ['downloads']
},
- function(result) {
+ function (result) {
if (result) {
d.resolve();
} else {
- chrome.permissions.request(
- {
+ chrome.permissions.request({
permissions: ['downloads']
},
- function(granted) {
+ function (granted) {
if (granted) {
trackEvent('fn', 'downloadsPermGiven');
d.resolve();
@@ -1683,7 +538,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
return d.promise;
}
- scope.takeScreenshot = function(e) {
+ scope.takeScreenshot = function (e) {
handleDownloadsPermission().then(() => {
// Hide tooltips so that they don't show in the screenshot
var s = document.createElement('style');
@@ -1716,9 +571,11 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
setTimeout(() => {
chrome.tabs.captureVisibleTab(
- null,
- { format: 'png', quality: 100 },
- function(dataURI) {
+ null, {
+ format: 'png',
+ quality: 100
+ },
+ function (dataURI) {
s.remove();
if (dataURI) {
var image = new Image();
@@ -1735,163 +592,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
e.preventDefault();
};
- // Populate the settings in the settings UI
- function updateSettingsInUi() {
- $('[data-setting=preserveLastCode]').checked = prefs.preserveLastCode;
- $('[data-setting=replaceNewTab]').checked = prefs.replaceNewTab;
- $('[data-setting=htmlMode]').value = prefs.htmlMode;
- $('[data-setting=cssMode]').value = prefs.cssMode;
- $('[data-setting=jsMode]').value = prefs.jsMode;
- $('[data-setting=indentSize]').value = prefs.indentSize;
- indentationSizeValueEl.textContent = prefs.indentSize;
- $(
- '[data-setting=indentWith][value=' + (prefs.indentWith || 'spaces') + ']'
- ).checked = true;
- $('[data-setting=isCodeBlastOn]').checked = prefs.isCodeBlastOn;
- $('[data-setting=editorTheme]').value = prefs.editorTheme;
- $(
- '[data-setting=keymap][value=' + (prefs.keymap || 'sublime') + ']'
- ).checked = true;
- $('[data-setting=fontSize]').value = prefs.fontSize || 16;
- $('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize;
- $('[data-setting=autoPreview]').checked = prefs.autoPreview;
- $('[data-setting=editorFont]').value = prefs.editorFont;
- $('[data-setting=editorCustomFont]').value = prefs.editorCustomFont;
- $('[data-setting=autoSave]').checked = prefs.autoSave;
- $('[data-setting=autoComplete]').checked = prefs.autoComplete;
- $('[data-setting=preserveConsoleLogs]').checked = prefs.preserveConsoleLogs;
- $('[data-setting=lightVersion]').checked = prefs.lightVersion;
- $('[data-setting=lineWrap]').checked = prefs.lineWrap;
- $('[data-setting=infiniteLoopTimeout]').value =
- prefs.infiniteLoopTimeout;
- }
- /**
- * Handles all user triggered preference changes in the UI.
- */
- scope.updateSetting = function updateSetting(e) {
- // If this was triggered from user interaction, save the setting
- if (e) {
- var settingName = e.target.dataset.setting;
- var obj = {};
- var el = e.target;
- utils.log(settingName, el.type === 'checkbox' ? el.checked : el.value);
- prefs[settingName] = el.type === 'checkbox' ? el.checked : el.value;
- obj[settingName] = prefs[settingName];
- // We always save locally so that it gets fetched
- // faster on future loads.
- db.sync.set(obj, function() {
- alertsService.add('Setting saved');
- });
- if (window.user) {
- window.db.getDb().then(remoteDb => {
- remoteDb
- .collection('users')
- .doc(window.user.uid)
- .update({
- [`settings.${settingName}`]: prefs[settingName]
- })
- .then(arg => {
- utils.log(`Setting "${settingName}" for user`, arg);
- })
- .catch(error => utils.log(error));
- });
- }
- trackEvent('ui', 'updatePref-' + settingName, prefs[settingName]);
- }
-
- // Show/hide RUN button based on autoPreview setting.
- runBtn.classList[prefs.autoPreview ? 'add' : 'remove']('hide');
-
- htmlCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
- cssCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
- jsCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
- consoleEl.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
-
- // Update indentation count when slider is updated
- indentationSizeValueEl.textContent = $('[data-setting=indentSize]').value;
-
- // Replace correct css file in LINK tags's href
- editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
- fontStyleTag.textContent = fontStyleTemplate.textContent.replace(
- /fontname/g,
- (prefs.editorFont === 'other'
- ? prefs.editorCustomFont
- : prefs.editorFont) || 'FiraCode'
- );
- customEditorFontInput.classList[
- prefs.editorFont === 'other' ? 'remove' : 'add'
- ]('hide');
-
- ['html', 'js', 'css'].forEach(type => {
- scope.cm[type].setOption(
- 'indentWithTabs',
- $('[data-setting=indentWith]:checked').value !== 'spaces'
- );
- scope.cm[type].setOption(
- 'blastCode',
- $('[data-setting=isCodeBlastOn]').checked
- ? { effect: 2, shake: false }
- : false
- );
- scope.cm[type].setOption(
- 'indentUnit',
- +$('[data-setting=indentSize]').value
- );
- scope.cm[type].setOption(
- 'tabSize',
- +$('[data-setting=indentSize]').value
- );
- scope.cm[type].setOption('theme', $('[data-setting=editorTheme]').value);
-
- scope.cm[type].setOption(
- 'keyMap',
- $('[data-setting=keymap]:checked').value
- );
- scope.cm[type].setOption(
- 'lineWrapping',
- $('[data-setting=lineWrap]').checked
- );
- scope.cm[type].refresh();
- });
- scope.consoleCm.setOption('theme', $('[data-setting=editorTheme]').value);
- scope.acssSettingsCm.setOption(
- 'theme',
- $('[data-setting=editorTheme]').value
- );
- if (prefs.autoSave) {
- if (!autoSaveInterval) {
- autoSaveInterval = setInterval(autoSaveLoop, AUTO_SAVE_INTERVAL);
- }
- } else {
- clearInterval(autoSaveInterval);
- autoSaveInterval = null;
- }
-
- document.body.classList[prefs.lightVersion ? 'add' : 'remove'](
- 'light-version'
- );
- };
-
- scope.onNewBtnClick = function() {
- trackEvent('ui', 'newBtnClick');
- if (unsavedEditCount) {
- var shouldDiscard = confirm(
- 'You have unsaved changes. Do you still want to create something new?'
- );
- if (shouldDiscard) {
- createNewItem();
- }
- } else {
- createNewItem();
- }
- };
- scope.onOpenBtnClick = function() {
- trackEvent('ui', 'openBtnClick');
- openSavedItemsPane();
- };
- scope.onSaveBtnClick = function() {
+ scope.onSaveBtnClick = function () {
trackEvent('ui', 'saveBtnClick', currentItem.id ? 'saved' : 'new');
saveItem();
};
@@ -1900,7 +603,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
* Toggles a modal and logs an event.
* @param {Node} modal modal to be toggled
*/
- scope.toggleModal = function(modal) {
+ scope.toggleModal = function (modal) {
modal.classList.toggle('is-modal-visible');
const hasOpened = modal.classList.contains('is-modal-visible');
document.body.classList[hasOpened ? 'add' : 'remove']('overlay-visible');
@@ -1920,7 +623,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
.addEventListener('transitionend', onTransitionEnd);
}
};
- scope.onSearchInputChange = function(e) {
+ scope.onSearchInputChange = function (e) {
const text = e.target.value;
let el;
for (const [itemId, item] of Object.entries(savedItems)) {
@@ -1934,21 +637,21 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
trackEvent('ui', 'searchInputType');
};
- scope.toggleConsole = function() {
+ scope.toggleConsole = function () {
consoleEl.classList.toggle('is-minimized');
trackEvent('ui', 'consoleToggle');
};
// `clearConsole` is on window because it gets called from inside iframe also.
- scope.clearConsole = window.clearConsole = function() {
+ scope.clearConsole = window.clearConsole = function () {
scope.consoleCm.setValue('');
logCount = 0;
logCountEl.textContent = logCount;
};
- scope.onClearConsoleBtnClick = function() {
+ scope.onClearConsoleBtnClick = function () {
scope.clearConsole();
trackEvent('ui', 'consoleClearBtnClick');
};
- scope.evalConsoleExpr = function(e) {
+ scope.evalConsoleExpr = function (e) {
// Clear console on CTRL + L
if ((e.which === 76 || e.which === 12) && e.ctrlKey) {
scope.clearConsole();
@@ -1965,9 +668,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
trackEvent('fn', 'evalConsoleExpr');
}
};
- window.onMessageFromConsole = function() {
+ window.onMessageFromConsole = function () {
/* eslint-disable no-param-reassign */
- [...arguments].forEach(function(arg) {
+ [...arguments].forEach(function (arg) {
if (
arg &&
arg.indexOf &&
@@ -1981,13 +684,16 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
try {
scope.consoleCm.replaceRange(
arg +
- ' ' +
- ((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
- '\n',
- { line: Infinity }
+ ' ' +
+ ((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
+ '\n', {
+ line: Infinity
+ }
);
} catch (e) {
- scope.consoleCm.replaceRange('🌀\n', { line: Infinity });
+ scope.consoleCm.replaceRange('🌀\n', {
+ line: Infinity
+ });
}
scope.consoleCm.scrollTo(0, Infinity);
logCount++;
@@ -2012,8 +718,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
function attachListenerForEvent(eventName) {
const nodes = query(`[d-${eventName}]`);
- nodes.forEach(function(el) {
- el.addEventListener(eventName, function(e) {
+ nodes.forEach(function (el) {
+ el.addEventListener(eventName, function (e) {
scope[el.getAttribute(`d-${eventName}`)].call(window, e);
});
});
@@ -2025,8 +731,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
// Compile d-open-modal directive
const modalTriggers = query(`[d-open-modal]`);
- modalTriggers.forEach(function(el) {
- utils.onButtonClick(el, function() {
+ modalTriggers.forEach(function (el) {
+ utils.onButtonClick(el, function () {
scope.toggleModal(window[el.getAttribute('d-open-modal')]);
trackEvent(
el.getAttribute('data-event-category'),
@@ -2037,7 +743,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
// Compile d-html directive
const dHtmlNodes = query(`[d-html]`);
- dHtmlNodes.forEach(function(el) {
+ dHtmlNodes.forEach(function (el) {
fetch(el.getAttribute('d-html')).then(response => {
// Stop further compilation because of future recursion, by removing attribute.
el.removeAttribute('d-html');
@@ -2052,48 +758,13 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
});
}
- scope.onRunBtnClick = function() {
+ scope.onRunBtnClick = function () {
scope.setPreviewContent(true, true);
trackEvent('ui', 'runBtnClick');
};
- scope.openDetachedPreview = function() {
- trackEvent('ui', 'detachPreviewBtnClick');
- if (scope.detachedWindow) {
- scope.detachedWindow.focus();
- return;
- }
- var iframeBounds = frame.getBoundingClientRect();
- const iframeWidth = iframeBounds.width;
- const iframeHeight = iframeBounds.height;
- document.body.classList.add('is-detached-mode');
- globalConsoleContainerEl.insertBefore(consoleEl, null);
-
- scope.detachedWindow = window.open(
- './preview.html',
- 'Web Maker',
- `width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1`
- );
- // Trigger initial render in detached window
- setTimeout(() => {
- scope.setPreviewContent(true);
- }, 1500);
- function checkWindow() {
- if (scope.detachedWindow && scope.detachedWindow.closed) {
- clearInterval(intervalID);
- document.body.classList.remove('is-detached-mode');
- $('#js-demo-side').insertBefore(consoleEl, null);
- scope.detachedWindow = null;
- // Update main frame preview to get latest changes (which were not
- // getting reflected while detached window was open)
- scope.setPreviewContent(true);
- }
- }
- var intervalID = window.setInterval(checkWindow, 500);
- };
-
- scope.openCssSettingsModal = function() {
+ scope.openCssSettingsModal = function () {
scope.toggleModal(cssSettingsModal);
setTimeout(() => {
// Refresh is required because codemirror gets scaled inside modal and loses alignement.
@@ -2103,12 +774,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
trackEvent('ui', 'cssSettingsBtnClick');
};
- scope.onModalCloseBtnClick = function(e) {
- closeAllOverlays();
- e.preventDefault();
- };
- scope.openSupportDeveloperModal = function(e) {
+ scope.openSupportDeveloperModal = function (e) {
closeAllOverlays();
scope.toggleModal(pledgeModal);
if (e) {
@@ -2116,41 +783,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
}
};
- scope.updateProfileUi = () => {
- if (window.user) {
- document.body.classList.add('is-logged-in');
- headerAvatarImg.src = profileAvatarImg.src =
- window.user.photoURL || DEFAULT_PROFILE_IMG;
- profileUserName.textContent =
- window.user.displayName || 'Anonymous Creator';
- } else {
- document.body.classList.remove('is-logged-in');
- headerAvatarImg.src = profileAvatarImg.src = '';
- profileUserName.textContent = 'Anonymous Creator';
- }
- };
- scope.login = e => {
- const provider = e.target.dataset.authProvider;
- trackEvent('ui', 'loginProviderClick', provider);
- window.login(provider);
- if (e) {
- e.preventDefault();
- }
- };
- scope.logout = e => {
- e.preventDefault();
- if (unsavedEditCount) {
- var shouldDiscard = confirm(
- 'You have unsaved changes. Do you still want to logout?'
- );
- if (!shouldDiscard) {
- return;
- }
- }
- trackEvent('fn', 'loggedOut');
- window.logout();
- };
/**
* Called from inside ask-to-import-modal
@@ -2174,55 +807,14 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
};
function init() {
- var config = {
- 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'
- };
- firebase.initializeApp(config);
- firebase.auth().onAuthStateChanged(function(user) {
- scope.closeAllOverlays();
- if (user) {
- utils.log('You are -> ', user);
- alertsService.add('You are now logged in!');
- scope.user = window.user = user;
- if (
- !window.localStorage[LocalStorageKeys.ASKED_TO_IMPORT_CREATIONS] &&
- window.oldSavedCreationsCountEl
- ) {
- fetchItems(false, true).then(items => {
- if (!items.length) {
- return;
- }
- scope.oldSavedItems = items;
- window.oldSavedCreationsCountEl.textContent = items.length;
- scope.toggleModal(askToImportModal);
- trackEvent('ui', 'askToImportModalSeen');
- });
- }
- window.db.getUser(user.uid).then(customUser => {
- if (customUser) {
- Object.assign(prefs, user.settings);
- updateSettingsInUi();
- scope.updateSetting();
- }
- });
- } else {
- delete window.user;
- // User is signed out.
- }
- scope.updateProfileUi();
- });
+
var lastCode;
- CodeMirror.modeURL = `lib/codemirror/mode/%N/%N.js`;
-
- window.db.local.get({ lastAuthProvider: '' }, result => {
+ window.db.local.get({
+ lastAuthProvider: ''
+ }, result => {
if (result.lastAuthProvider) {
document.body.classList.add(`last-login-${result.lastAuthProvider}`);
}
@@ -2230,21 +822,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
document.body.style.height = `${window.innerHeight}px`;
- function getToggleLayoutButtonListener(mode) {
- return function() {
- saveSetting('layoutMode', mode);
- trackEvent('ui', 'toggleLayoutClick', mode);
- toggleLayout(mode);
- return false;
- };
- }
- layoutBtn1.addEventListener('click', getToggleLayoutButtonListener(1));
- layoutBtn2.addEventListener('click', getToggleLayoutButtonListener(2));
- layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
- layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
- layoutBtn5.addEventListener('click', getToggleLayoutButtonListener(5));
- notificationsBtn.addEventListener('click', function() {
+
+ notificationsBtn.addEventListener('click', function () {
scope.toggleModal(notificationsModal);
if (
@@ -2259,7 +839,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
return false;
});
- codepenBtn.addEventListener('click', function(e) {
+ codepenBtn.addEventListener('click', function (e) {
if (cssMode === CssModes.ACSS) {
alert("Oops! CodePen doesn't supports Atomic CSS currently.");
e.preventDefault();
@@ -2291,16 +871,16 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
e.preventDefault();
});
- utils.onButtonClick(saveHtmlBtn, function() {
+ utils.onButtonClick(saveHtmlBtn, function () {
saveFile();
trackEvent('ui', 'saveHtmlClick');
});
utils.onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane);
- utils.onButtonClick(savedItemsPane, function(e) {
+ utils.onButtonClick(savedItemsPane, function (e) {
// TODO: warn about unsaved changes in current item
if (e.target.classList.contains('js-saved-item-tile')) {
- setTimeout(function() {
+ setTimeout(function () {
openItem(e.target.dataset.itemId);
}, 350);
toggleSavedItemsPane();
@@ -2309,7 +889,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
removeItem(e.target.parentElement.parentElement.dataset.itemId);
} else if (e.target.classList.contains('js-saved-item-tile__fork-btn')) {
toggleSavedItemsPane();
- setTimeout(function() {
+ setTimeout(function () {
forkItem(
savedItems[e.target.parentElement.parentElement.dataset.itemId]
);
@@ -2317,37 +897,11 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
}
});
- titleInput.addEventListener('blur', function() {
- if (currentItem.id) {
- saveItem();
- trackEvent('ui', 'titleChanged');
- }
- });
-
- // Attach listeners on mode change menu items
- $all('.js-mode-select').forEach(selectBox => {
- selectBox.addEventListener('change', function(e) {
- var mode = e.target.value;
- var type = e.target.dataset.type;
- var currentMode =
- type === 'html' ? htmlMode : type === 'css' ? cssMode : jsMode;
- if (currentMode !== mode) {
- if (type === 'html') {
- updateHtmlMode(mode).then(() => scope.setPreviewContent(true));
- } else if (type === 'js') {
- updateJsMode(mode).then(() => scope.setPreviewContent(true));
- } else if (type === 'css') {
- updateCssMode(mode).then(() => scope.setPreviewContent(true));
- }
- trackEvent('ui', 'updateCodeMode', mode);
- }
- });
- });
// Collapse btn event listeners
var collapseBtns = $all('.js-code-collapse-btn');
- collapseBtns.forEach(function(btn) {
- btn.addEventListener('click', function(e) {
+ collapseBtns.forEach(function (btn) {
+ btn.addEventListener('click', function (e) {
var codeWrapParent =
e.currentTarget.parentElement.parentElement.parentElement;
toggleCodeWrapCollapse(codeWrapParent);
@@ -2358,14 +912,14 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
// Update code wrap collapse states whenever any of them transitions due to any
// reason.
- [htmlCode, cssCode, jsCode].forEach(function(el) {
- el.addEventListener('transitionend', function() {
+ [htmlCode, cssCode, jsCode].forEach(function (el) {
+ el.addEventListener('transitionend', function () {
updateCodeWrapCollapseStates();
});
});
// Editor keyboard shortucuts
- window.addEventListener('keydown', function(event) {
+ window.addEventListener('keydown', function (event) {
// TODO: refactor common listener code
// Ctrl/⌘ + S
if ((event.ctrlKey || event.metaKey) && event.keyCode === 83) {
@@ -2401,7 +955,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
}
});
- savedItemsPane.addEventListener('keydown', function(event) {
+ savedItemsPane.addEventListener('keydown', function (event) {
if (!isSavedItemsPaneOpen) {
return;
}
@@ -2430,7 +984,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
}
if (isEnterKeyPressed && selectedItemElement) {
- setTimeout(function() {
+ setTimeout(function () {
openItem(selectedItemElement.dataset.itemId);
}, 350);
toggleSavedItemsPane();
@@ -2439,7 +993,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
if (isForkKeyPressed) {
event.preventDefault();
- setTimeout(function() {
+ setTimeout(function () {
forkItem(savedItems[selectedItemElement.dataset.itemId]);
}, 350);
toggleSavedItemsPane();
@@ -2447,7 +1001,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
}
});
- window.addEventListener('click', function(e) {
+ window.addEventListener('click', function (e) {
if (typeof e.target.className !== 'string') {
return;
}
@@ -2458,7 +1012,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
closeAllOverlays();
}
});
- window.addEventListener('dblclick', function(e) {
+ window.addEventListener('dblclick', function (e) {
var target = e.target;
if (target.classList.contains('js-console__header')) {
scope.toggleConsole();
@@ -2474,8 +1028,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
// Initialize add library select box
var libOptions = window.jsLibs.reduce(
(html, lib) =>
- html +
- ``,
''
@@ -2483,8 +1037,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
addLibrarySelect.children[1].innerHTML = libOptions;
libOptions = window.cssLibs.reduce(
(html, lib) =>
- html +
- ``,
''
@@ -2513,9 +1067,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
});
new TextareaAutoComplete(externalLibrarySearchInput, {
selectedCallback: value => {
- const textarea = value.match(/\.js$/)
- ? externalJsTextarea
- : externalCssTextarea;
+ const textarea = value.match(/\.js$/) ?
+ externalJsTextarea :
+ externalCssTextarea;
textarea.value = `${textarea.value}\n${value}`;
externalLibrarySearchInput.value = '';
}
@@ -2524,6 +1078,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
// Console header drag resize logic
var consoleHeaderDragStartY;
var consoleInitialHeight;
+
function onConsoleHeaderDrag(e) {
consoleEl.style.height =
consoleInitialHeight + consoleHeaderDragStartY - e.pageY + 'px';
@@ -2539,80 +1094,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
$('#demo-frame').classList.remove('pointer-none');
});
- db.local.get(
- {
- layoutMode: 1,
- code: ''
- },
- function localGetCallback(result) {
- toggleLayout(result.layoutMode);
- prefs.layoutMode = result.layoutMode;
- if (result.code) {
- lastCode = result.code;
- }
- }
- );
- // Get synced `preserveLastCode` setting to get back last code (or not).
- db.getSettings(defaultSettings).then(result => {
- if (result.preserveLastCode && lastCode) {
- unsavedEditCount = 0;
- // For web app environment we don't fetch item from localStorage,
- // because the item isn't stored in the localStorage.
- if (lastCode.id && window.IS_EXTENSION) {
- db.local.get(lastCode.id, function(itemResult) {
- if (itemResult[lastCode.id]) {
- utils.log('Load item ', lastCode.id);
- currentItem = itemResult[lastCode.id];
- refreshEditor();
- }
- });
- } else {
- utils.log('Load last unsaved item', lastCode);
- currentItem = lastCode;
- refreshEditor();
- }
- } else {
- createNewItem();
- }
- Object.assign(prefs, result);
- updateSettingsInUi();
- scope.updateSetting();
- });
- // Check for new version notifications
- db.getUserLastSeenVersion().then(lastSeenVersion => {
- // Check if new user
- if (!lastSeenVersion) {
- onboardModal.classList.add('is-modal-visible');
- if (document.cookie.indexOf('onboarded') === -1) {
- trackEvent('ui', 'onboardModalSeen', version);
- document.cookie = 'onboarded=1';
- }
- window.db.setUserLastSeenVersion(version);
- // set some initial preferences on closing the onboard modal
- // Old onboarding.
- // utils.once(document, 'overlaysClosed', function() {});
- }
- // If its an upgrade
- if (
- lastSeenVersion &&
- utils.semverCompare(lastSeenVersion, version) === -1 &&
- !window.localStorage.pledgeModalSeen
- ) {
- scope.openSupportDeveloperModal();
- window.localStorage.pledgeModalSeen = true;
- }
-
- if (
- !lastSeenVersion ||
- utils.semverCompare(lastSeenVersion, version) === -1
- ) {
- notificationsBtn.classList.add('has-new');
- hasSeenNotifications = false;
- }
- });
scope.acssSettingsCm = CodeMirror.fromTextArea(acssSettingsTextarea, {
mode: 'application/ld+json'
@@ -2621,63 +1105,6 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
scope.setPreviewContent(true);
});
- var options = '';
- [
- '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'
- ].forEach(theme => {
- options += '';
- });
- document.querySelector('[data-setting="editorTheme"]').innerHTML = options;
-
- requestAnimationFrame(compileNodes);
window.addEventListener('focusin', e => {
if (document.body.classList.contains('overlay-visible')) {
@@ -2693,8 +1120,6 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
});
}
- // Set few stuff on a 'scope' object so that they can be referenced dynamically.
- scope.closeAllOverlays = closeAllOverlays;
init();
})(window.alertsService, window.itemService);