mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-12 13:25:22 +02:00
Code Issues Releases Wiki Activity

Merge branch 'release-2.9' into master

Browse Source
This commit is contained in:
Kushagra Gour 2017-09-16 15:37:01 +05:30 committed by GitHub
commit c4b9daedc2
10 changed files with 285 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "web-maker",
"version": "2.7.2",
"version": "2.8.1",
"description": "A blazing fast & offline web playground",
"main": "index.html",
"devDependencies": {

16
src/changelog.html
View File

@ -1,4 +1,16 @@
<h1>Whats new?</h1>
<div class="notification">
<span class="notification__version">2.8.1</span>
<ul>
<li>Vue.js & UIKit version updated to latest version in 'Add Library' list.</li>
<li>UTF-8 charset added to preview HTML to support universal characters.</li>
<br>
<li><strong>🚀 Announcement</strong>: Web Maker has a <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby on Gitter</a> now - incase you need any help or just want to say Hi!</li>
<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
<li>Thank you for being a part of this community of thousands of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a> &nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
</ul>
</div>
<div class="notification">
<span class="notification__version">2.8.0</span>
<ul>
@ -20,10 +32,6 @@
</li>
<li>Vue.js version updated to 2.4.0 in popular library list.</li>
<li>Downloads permission is optional. Asked only when you take screenshot.</li>
<br>
<li><strong>🚀 Announcement</strong>: Web Maker has a <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby on Gitter</a> now - incase you need any help or just want to say Hi!</li>
<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
<li>Thank you for being a part of this community of thousands of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a> &nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
</ul>
</div>

3
src/detached-window.js Normal file
View File

@ -0,0 +1,3 @@
window.addEventListener('message', e => {
document.querySelector('iframe').src = e.data;
});

224
src/index.html
View File

@ -8,6 +8,7 @@
<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
<link rel="stylesheet" href="lib/hint.min.css">
<link rel="stylesheet" href="lib/inlet.css">
<link rel="stylesheet" href="style.css">
@ -100,6 +101,11 @@
</select>
</label>
<div class="code-wrap__header-right-options">
<a href="#" id="cssSettingsBtn" title="Atomic CSS configuration" d-click="openCssSettingsModal" class="code-wrap__header-btn hide">
<svg>
<use xlink:href="#settings-icon"></use>
</svg>
</a>
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
</a>
</div>
@ -194,6 +200,12 @@
<rect x="0" y="0" width="100" height="100" />
</svg>
</a>
<a class="mode-btn hint--top-left hint--rounded" aria-label="Detach Preview" d-click="openDetachedPreview">
<svg viewBox="0 0 24 24">
<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
</svg>
</a>
<div class="footer__separator"></div>
@ -254,9 +266,19 @@
</div>
</div>
<div class="modal" id="cssSettingsModal">
<div class="modal__content">
<h1>Atomic CSS Settings</h1>
<h3>Configure Atomizer settings. <a href="https://github.com/acss-io/atomizer#api" target="_blank">Read more</a> about available settings.</h3>
<div style="height: calc(100vh - 350px);">
<textarea id="acssSettingsTextarea" cols="30" rows="10"></textarea>
</div>
</div>
</div>
<div class="modal" id="helpModal">
<div class="modal__content">
<h1>Web Maker<small style="font-size:14px;"> v2.8.0</small></h1>
<h1>Web Maker<small style="font-size:14px;"> v2.8.1</small></h1>
<div>
<p>Made with <span style="margin-right: 8px;">💖</span> & <span style="margin-right: 8px;">🙌</span> by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
<p>Tweet out your feature requests, comments & suggestions to <a target="_blank" href="https://twitter.com/webmakerApp">@webmakerApp</a>.</p>
@ -357,113 +379,120 @@
<h1>Settings</h1>
<h3>Indentation</h3>
<p>
<div class="line">
<label>
<input type="radio" checked="true" name="indentation" value="spaces" d-change="updateSetting" data-setting="indentWith"> Spaces
</label>
<label class="ml-1">
<input type="radio" name="indentation" value="tabs" d-change="updateSetting" data-setting="indentWith"> Tabs
</label>
</div>
<label class="line">
Indentation Size <input type="range" class="va-m ml-1" value="2" min="1" max="7" list="indentationSizeList" data-setting="indentSize" d-change="updateSetting">
<span id="indentationSizeValueEl"></span>
<datalist id="indentationSizeList">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</datalist>
<div class="line" title="I know this is tough, but you have to decide one!">
<label>
<input type="radio" checked="true" name="indentation" value="spaces" d-change="updateSetting" data-setting="indentWith"> Spaces
</label>
</p>
<label class="ml-1">
<input type="radio" name="indentation" value="tabs" d-change="updateSetting" data-setting="indentWith"> Tabs
</label>
</div>
<label class="line" title="">
Indentation Size <input type="range" class="va-m ml-1" value="2" min="1" max="7" list="indentationSizeList" data-setting="indentSize" d-change="updateSetting">
<span id="indentationSizeValueEl"></span>
<datalist id="indentationSizeList">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</datalist>
</label>
<hr>
<h3>Editor</h3>
<p>
<label class="line">
Default Preprocessors
</label>
<div class="flex line">
<select style="flex:1;margin:0 20px" data-setting="htmlMode" d-change="updateSetting">
<option value="html">HTML</option>
<option value="markdown">Markdown</option>
<option value="jade">Pug</option>
</select>
<select style="flex:1;margin:0 20px" data-setting="cssMode" d-change="updateSetting">
<option value="css">CSS</option>
<option value="scss">SCSS</option>
<option value="sass">SASS</option>
<option value="less">LESS</option>
<option value="stylus">Stylus</option>
<option value="acss">Atomic CSS</option>
</select>
<select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting">
<option value="js">JS</option>
<option value="coffee">CoffeeScript</option>
<option value="es6">ES6 (Babel)</option>
<option value="typescript">TypeScript</option>
</select>
</div>
<label class="line">
Theme
<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
</label>
<label class="line">
Font
<select style="flex:1;margin:0 20px" data-setting="editorFont" d-change="updateSetting">
<option value="FiraCode">Fira Code</option>
<option value="Inconsolata">Inconsolata</option>
<option value="Monoid">Monoid</option>
<option value="FixedSys">FixedSys</option>
<option disabled="disabled">----</option>
<option value="other">Other font from system</option>
</select>
<input id="customEditorFontInput" type="text" value="" placeholder="Custom font name here" data-setting="editorCustomFont" d-change="updateSetting">
</label>
<label class="line">
Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
<div class="flex">
</label>
<div class="line">
Key bindings
<label class="ml-1">
<input type="radio" checked="true" name="keymap" value="sublime" d-change="updateSetting" data-setting="keymap"> Sublime
<div>
<label class="line">
Default Preprocessors
</label>
<label class="ml-1">
<input type="radio" name="keymap" value="vim" d-change="updateSetting" data-setting="keymap"> Vim
<div class="flex line">
<select style="flex:1;margin:0 20px" data-setting="htmlMode" d-change="updateSetting">
<option value="html">HTML</option>
<option value="markdown">Markdown</option>
<option value="jade">Pug</option>
</select>
<select style="flex:1;margin:0 20px" data-setting="cssMode" d-change="updateSetting">
<option value="css">CSS</option>
<option value="scss">SCSS</option>
<option value="sass">SASS</option>
<option value="less">LESS</option>
<option value="stylus">Stylus</option>
<option value="acss">Atomic CSS</option>
</select>
<select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting">
<option value="js">JS</option>
<option value="coffee">CoffeeScript</option>
<option value="es6">ES6 (Babel)</option>
<option value="typescript">TypeScript</option>
</select>
</div>
<label class="line">
Theme
<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
</label>
<label class="line">
Font
<select style="flex:1;margin:0 20px" data-setting="editorFont" d-change="updateSetting">
<option value="FiraCode">Fira Code</option>
<option value="Inconsolata">Inconsolata</option>
<option value="Monoid">Monoid</option>
<option value="FixedSys">FixedSys</option>
<option disabled="disabled">----</option>
<option value="other">Other font from system</option>
</select>
<input id="customEditorFontInput" type="text" value="" placeholder="Custom font name here" data-setting="editorCustomFont" d-change="updateSetting">
</label>
<label class="line">
Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
</label>
<div class="line">
Key bindings
<label class="ml-1">
<input type="radio" checked="true" name="keymap" value="sublime" d-change="updateSetting" data-setting="keymap"> Sublime
</label>
<label class="ml-1">
<input type="radio" name="keymap" value="vim" d-change="updateSetting" data-setting="keymap"> Vim
</label>
</div>
</div>
<label class="line">
<input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize
</label>
<label class="line">
<input type="checkbox" d-change="updateSetting" data-setting="autoComplete"> Auto-complete suggestions
</label>
<label class="line">
<input type="checkbox" d-change="updateSetting" data-setting="autoPreview"> Auto-preview
</label>
<label class="line">
<input type="checkbox" d-change="updateSetting" data-setting="autoSave"> Auto-save
</label>
<label class="line">
<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
</label>
<label class="line">
<input type="checkbox" d-change="updateSetting" data-setting="replaceNewTab"> Replace new tab page
</label>
<label class="line">
<input type="checkbox" d-change="updateSetting" data-setting="lightVersion"> Toggle fast/light version (needs restart)
</label>
</p>
<div class="ml-2">
<label class="line" title="Your Preview will refresh when you resize the preview split">
<input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize
</label>
<label class="line" title="Turns on the auto-completion suggestions as you type">
<input type="checkbox" d-change="updateSetting" data-setting="autoComplete"> Auto-complete suggestions
</label>
<label class="line" title="Refreshes the preview as you code. Otherwise use the Run button">
<input type="checkbox" d-change="updateSetting" data-setting="autoPreview"> Auto-preview
</label>
<label class="line" title="Auto-save keeps saving your code at regular intervals after you hit the first save manually">
<input type="checkbox" d-change="updateSetting" data-setting="autoSave"> Auto-save
</label>
<label class="line" title="Loads the last open creation when app starts">
<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
</label>
<label class="line" title="Turning this on will start showing Web Maker in every new tab you open">
<input type="checkbox" d-change="updateSetting" data-setting="replaceNewTab"> Replace new tab page
</label>
<label class="line" title="Preserves the console logs across your preview refreshes">
<input type="checkbox" d-change="updateSetting" data-setting="preserveConsoleLogs"> Preserve console logs
</label>
<label class="line">
<input type="checkbox" d-change="updateSetting" data-setting="lightVersion"> Toggle fast/light version (needs restart)
</label>
</div>
</div>
<hr>
<h3>Fun</h3>
<p>
<label class="line">
<label class="line" title="Enjoy wonderful particle blasts while you type">
<input type="checkbox" d-change="updateSetting" data-setting="isCodeBlastOn"> Code blast!
</label>
</p>
@ -574,6 +603,9 @@
<script src="lib/codemirror/addon/hint/html-hint.js"></script>
<script src="lib/codemirror/addon/hint/css-hint.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>
<script src="lib/codemirror/addon/search/search.js"></script>
<script src="lib/codemirror/addon/dialog/dialog.js"></script>
<script src="lib/codemirror/addon/search/jump-to-line.js"></script>
<script src="lib/codemirror/mode/xml/xml.js"></script>
<script src="lib/codemirror/mode/javascript/javascript.js"></script>

49
src/library-list.js
View File

@ -11,14 +11,19 @@ window.jsLibs = [
},
{
url:
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js',
label: 'Bootstrap 4α',
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js',
label: 'Bootstrap 4β',
type: 'js'
},
{
url:
'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js',
label: 'Foundation',
type: 'js'
},
{
url:
'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js',
label: 'Foundation',
url: 'https://semantic-ui.com/dist/semantic.min.js',
label: 'Semantic UI',
type: 'js'
},
{
@ -32,12 +37,12 @@ window.jsLibs = [
type: 'js'
},
{
url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js',
url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js',
label: 'React DOM',
type: 'js'
},
{
url: 'https://unpkg.com/vue@2.4.1/dist/vue.min.js',
url: 'https://unpkg.com/vue@2.4.4/dist/vue.min.js',
label: 'Vue.js',
type: 'js'
},
@ -47,7 +52,7 @@ window.jsLibs = [
type: 'js'
},
{
url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js',
url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js',
label: 'D3',
type: 'js'
},
@ -69,7 +74,7 @@ window.jsLibs = [
},
{
url:
'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js',
label: 'UIkit 3',
type: 'js'
}
@ -83,21 +88,27 @@ window.cssLibs = [
},
{
url:
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css',
label: 'Bootstrap 4α',
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css',
label: 'Bootstrap 4β',
type: 'css'
},
{
url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css',
label: 'Bulma',
type: 'css'
},
{
{
url:
'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css',
label: 'Foundation',
type: 'css'
},
{
url:'https://semantic-ui.com/dist/semantic.min.css',
label: 'Semantic UI',
type: 'css'
},
{
url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.min.css',
label: 'Bulma',
type: 'css'
},
{
url: 'https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.5.0/hint.min.css',
label: 'Hint.css',
@ -111,7 +122,7 @@ window.cssLibs = [
},
{
url:
'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css',
label: 'UIkit 3',
type: 'css'
},

2
src/manifest.json
View File

@ -1,6 +1,6 @@
{
"name": "Web Maker",
"version": "2.8.0",
"version": "2.8.1",
"manifest_version": 2,
"description": "Blazing fast & offline playground for your web experiments",
"homepage_url": "https://webmakerapp.com",

2
src/options.html
View File

@ -29,7 +29,7 @@
</head>
<body>
<h3>Settings <span style="opacity: 0.6;font-size:0.7em;">
v2.8.0</span></h3>
v2.8.1</span></h3>
<form name="optionsForm">
<label>
<input type="checkbox" name="preserveLastCode">

9
src/preview.html Normal file
View File

@ -0,0 +1,9 @@
<link rel="stylesheet" href="style.css">
<body>
<iframe src="about://blank" frameborder="0" id="demo-frame"></iframe>
<script src="detached-window.js"></script>
</body>

89
src/script.js
View File

@ -6,13 +6,13 @@ notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settings
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
customEditorFontInput
customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
*/
/* eslint-disable no-extra-semi */
(function(alertsService) {
/* eslint-enable no-extra-semi */
var scope = scope || {};
var version = '2.8.0';
var version = '2.8.1';
if (window.DEBUG) {
window.scope = scope;
@ -95,7 +95,8 @@ customEditorFontInput
cmPath: 'css',
cmMode: 'css',
codepenVal: 'notsupported',
cmDisable: true
cmDisable: true,
hasSettings: true
};
const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
@ -369,6 +370,9 @@ customEditorFontInput
currentItem.htmlMode = htmlMode;
currentItem.cssMode = cssMode;
currentItem.jsMode = jsMode;
currentItem.cssSettings = {
acssConfig: scope.acssSettingsCm.getValue()
};
currentItem.updatedOn = Date.now();
currentItem.layoutMode = currentLayoutMode;
currentItem.externalLibs = {
@ -592,6 +596,11 @@ customEditorFontInput
scope.cm.css.refresh();
scope.cm.js.refresh();
scope.acssSettingsCm.setValue(
currentItem.cssSettings ? currentItem.cssSettings.acssConfig : ''
);
scope.acssSettingsCm.refresh();
scope.clearConsole();
// To have the library count updated
@ -614,6 +623,7 @@ customEditorFontInput
addLibraryModal.classList.remove('is-modal-visible');
onboardModal.classList.remove('is-modal-visible');
settingsModal.classList.remove('is-modal-visible');
cssSettingsModal.classList.remove('is-modal-visible');
toggleSavedItemsPane(false);
document.dispatchEvent(new Event('overlaysClosed'));
}
@ -681,6 +691,9 @@ customEditorFontInput
cssModelLabel.parentElement.querySelector('select').value = value;
scope.cm.css.setOption('mode', modes[value].cmMode);
scope.cm.css.setOption('readOnly', modes[value].cmDisable);
cssSettingsBtn.classList[modes[value].hasSettings ? 'remove' : 'add'](
'hide'
);
CodeMirror.autoLoadMode(
scope.cm.css,
modes[value].cmPath || modes[value].cmMode
@ -770,7 +783,15 @@ customEditorFontInput
} else if (cssMode === CssModes.ACSS) {
const html = scope.cm.html.getValue();
const foundClasses = atomizer.findClassNames(html);
const finalConfig = atomizer.getConfig(foundClasses, {});
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);
@ -924,6 +945,7 @@ customEditorFontInput
}, '');
var contents =
'<html>\n<head>\n' +
'<meta charset="UTF-8" />\n' +
externalCss +
'\n' +
'<style id="webmakerstyle">\n' +
@ -1037,11 +1059,18 @@ customEditorFontInput
chrome.i18n.getMessage('@@extension_id') +
'/temporary/' +
'preview.html';
if (scope.detachedWindow) {
scope.detachedWindow.postMessage(frame.src, '*');
}
});
});
}
scope.setPreviewContent = function(isForced) {
if (!prefs.preserveConsoleLogs) {
scope.clearConsole();
}
var currentCode = {
html: scope.cm.html.getValue(),
css: scope.cm.css.getValue(),
@ -1588,6 +1617,7 @@ customEditorFontInput
$('[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;
if (!prefs.lightVersion) {
@ -1665,6 +1695,10 @@ customEditorFontInput
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);
@ -1809,6 +1843,29 @@ customEditorFontInput
});
}
scope.openDetachedPreview = function() {
document.body.classList.add('is-detached-mode');
scope.detachedWindow = window.open(
'./preview.html',
'Web Maker',
'width=420,height=230,resizable,scrollbars=yes,status=1'
);
setTimeout(() => {
scope.detachedWindow.postMessage(frame.src, '*');
}, 1000);
function checkWindow() {
if (scope.detachedWindow && scope.detachedWindow.closed) {
clearInterval(intervalID);
document.body.classList.remove('is-detached-mode');
}
}
var intervalID = window.setInterval(checkWindow, 500);
};
scope.openCssSettingsModal = function() {
scope.toggleModal(cssSettingsModal);
};
function init() {
var lastCode;
@ -2160,6 +2217,7 @@ customEditorFontInput
editorCustomFont: '',
autoSave: true,
autoComplete: true,
preserveConsoleLogs: true,
lightVersion: true
},
function syncGetCallback(result) {
@ -2196,6 +2254,7 @@ customEditorFontInput
prefs.editorCustomFont = result.editorCustomFont;
prefs.autoSave = result.autoSave;
prefs.autoComplete = result.autoComplete;
prefs.preserveConsoleLogs = result.preserveConsoleLogs;
prefs.lightVersion = result.lightVersion;
updateSettingsInUi();
@ -2213,15 +2272,14 @@ customEditorFontInput
if (!result.lastSeenVersion) {
onboardModal.classList.add('is-modal-visible');
trackEvent('ui', 'onboardModalSeen');
// set the current version as seen on closing the onboard modal
chrome.storage.sync.set(
{
lastSeenVersion: version
},
function() {}
);
// set some initial preferences on closing the onboard modal
utils.once(document, 'overlaysClosed', function() {
chrome.storage.sync.set(
{
lastSeenVersion: version
},
function() {}
);
chrome.storage.sync.set(
{
replaceNewTab: onboardShowInTabOptionBtn.classList.contains(
@ -2248,6 +2306,13 @@ customEditorFontInput
}
);
scope.acssSettingsCm = CodeMirror.fromTextArea(acssSettingsTextarea, {
mode: 'application/ld+json'
});
scope.acssSettingsCm.on('blur', () => {
scope.setPreviewContent(true);
});
var options = '';
[
'3024-day',

26
src/style.css
View File

@ -31,6 +31,7 @@ a { text-decoration: none; color: crimson; cursor: pointer; }
.opacity--30 { opacity: 0.3; }
.pointer-none { pointer-events: none; }
.ml-1 { margin-left: 1rem; }
.ml-2 { margin-left: 2rem; }
hr {
background: 0;
border: 0;
@ -462,8 +463,8 @@ li.CodeMirror-hint-active {
/* Make settings modal smaller */
@media screen and (min-width: 600px) {
.modal--settings {
width: 600px;
margin-left: -300px;
/* width: 600px; */
/* margin-left: -300px; */
}
}
.saved-items-pane {
@ -886,6 +887,25 @@ li.CodeMirror-hint-active {
cursor: ns-resize;
}
.is-detached-mode .demo-side {
display: none;
}
.is-detached-mode .code-side {
width: 100% !important;
}
.layout-4 .code-side {
display: none;
}
.layout-4 .code-side + .gutter {
display: none;
}
.layout-4 .demo-side {
width: 100% !important;
}
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
@ -925,4 +945,4 @@ while the theme CSS file is loading */
color: #D1EDFF;
}
.cm-s-midnight .CodeMirror-gutters { background: #0F192A; border-right: 1px solid; }
.cm-s-midnight .CodeMirror-activeline-background { background: #253540; }
.cm-s-midnight .CodeMirror-activeline-background { background: #253540; }