mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-31 06:29:12 +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

2
package.json

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

16
src/changelog.html

@ -1,4 +1,16 @@
<h1>Whats new?</h1> <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"> <div class="notification">
<span class="notification__version">2.8.0</span> <span class="notification__version">2.8.0</span>
<ul> <ul>
@ -20,10 +32,6 @@
</li> </li>
<li>Vue.js version updated to 2.4.0 in popular library list.</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> <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> </ul>
</div> </div>

3
src/detached-window.js Normal file

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

224
src/index.html

@ -8,6 +8,7 @@
<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css"> <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/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/hint.min.css">
<link rel="stylesheet" href="lib/inlet.css"> <link rel="stylesheet" href="lib/inlet.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
@ -100,6 +101,11 @@
</select> </select>
</label> </label>
<div class="code-wrap__header-right-options"> <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 class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
</a> </a>
</div> </div>
@ -194,6 +200,12 @@
<rect x="0" y="0" width="100" height="100" /> <rect x="0" y="0" width="100" height="100" />
</svg> </svg>
</a> </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> <div class="footer__separator"></div>
@ -254,9 +266,19 @@
</div> </div>
</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" id="helpModal">
<div class="modal__content"> <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> <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>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> <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> <h1>Settings</h1>
<h3>Indentation</h3> <h3>Indentation</h3>
<p> <div class="line" title="I know this is tough, but you have to decide one!">
<div class="line"> <label>
<label> <input type="radio" checked="true" name="indentation" value="spaces" d-change="updateSetting" data-setting="indentWith"> Spaces
<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>
</label> </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> <hr>
<h3>Editor</h3> <h3>Editor</h3>
<p> <div class="flex">
<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
</label> <div>
<div class="line"> <label class="line">
Key bindings Default Preprocessors
<label class="ml-1">
<input type="radio" checked="true" name="keymap" value="sublime" d-change="updateSetting" data-setting="keymap"> Sublime
</label> </label>
<label class="ml-1"> <div class="flex line">
<input type="radio" name="keymap" value="vim" d-change="updateSetting" data-setting="keymap"> Vim <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>
<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> </div>
<label class="line"> <div class="ml-2">
<input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize <label class="line" title="Your Preview will refresh when you resize the preview split">
</label> <input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize
<label class="line"> </label>
<input type="checkbox" d-change="updateSetting" data-setting="autoComplete"> Auto-complete suggestions <label class="line" title="Turns on the auto-completion suggestions as you type">
</label> <input type="checkbox" d-change="updateSetting" data-setting="autoComplete"> Auto-complete suggestions
<label class="line"> </label>
<input type="checkbox" d-change="updateSetting" data-setting="autoPreview"> Auto-preview <label class="line" title="Refreshes the preview as you code. Otherwise use the Run button">
</label> <input type="checkbox" d-change="updateSetting" data-setting="autoPreview"> Auto-preview
<label class="line"> </label>
<input type="checkbox" d-change="updateSetting" data-setting="autoSave"> Auto-save <label class="line" title="Auto-save keeps saving your code at regular intervals after you hit the first save manually">
</label> <input type="checkbox" d-change="updateSetting" data-setting="autoSave"> Auto-save
<label class="line"> </label>
<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code <label class="line" title="Loads the last open creation when app starts">
</label> <input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
<label class="line"> </label>
<input type="checkbox" d-change="updateSetting" data-setting="replaceNewTab"> Replace new tab page <label class="line" title="Turning this on will start showing Web Maker in every new tab you open">
</label> <input type="checkbox" d-change="updateSetting" data-setting="replaceNewTab"> Replace new tab page
<label class="line"> </label>
<input type="checkbox" d-change="updateSetting" data-setting="lightVersion"> Toggle fast/light version (needs restart) <label class="line" title="Preserves the console logs across your preview refreshes">
</label> <input type="checkbox" d-change="updateSetting" data-setting="preserveConsoleLogs"> Preserve console logs
</p> </label>
<label class="line">
<input type="checkbox" d-change="updateSetting" data-setting="lightVersion"> Toggle fast/light version (needs restart)
</label>
</div>
</div>
<hr> <hr>
<h3>Fun</h3> <h3>Fun</h3>
<p> <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! <input type="checkbox" d-change="updateSetting" data-setting="isCodeBlastOn"> Code blast!
</label> </label>
</p> </p>
@ -574,6 +603,9 @@
<script src="lib/codemirror/addon/hint/html-hint.js"></script> <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/hint/css-hint.js"></script>
<script src="lib/codemirror/addon/selection/active-line.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/xml/xml.js"></script>
<script src="lib/codemirror/mode/javascript/javascript.js"></script> <script src="lib/codemirror/mode/javascript/javascript.js"></script>

49
src/library-list.js

@ -11,14 +11,19 @@ window.jsLibs = [
}, },
{ {
url: url:
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js',
label: 'Bootstrap 4α', label: 'Bootstrap 4β',
type: 'js'
},
{
url:
'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js',
label: 'Foundation',
type: 'js' type: 'js'
}, },
{ {
url: url: 'https://semantic-ui.com/dist/semantic.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js', label: 'Semantic UI',
label: 'Foundation',
type: 'js' type: 'js'
}, },
{ {
@ -32,12 +37,12 @@ window.jsLibs = [
type: 'js' 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', label: 'React DOM',
type: 'js' 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', label: 'Vue.js',
type: 'js' type: 'js'
}, },
@ -47,7 +52,7 @@ window.jsLibs = [
type: 'js' 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', label: 'D3',
type: 'js' type: 'js'
}, },
@ -69,7 +74,7 @@ window.jsLibs = [
}, },
{ {
url: 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', label: 'UIkit 3',
type: 'js' type: 'js'
} }
@ -83,21 +88,27 @@ window.cssLibs = [
}, },
{ {
url: url:
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css',
label: 'Bootstrap 4α', label: 'Bootstrap 4β',
type: 'css' type: 'css'
}, },
{ {
url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css',
label: 'Bulma',
type: 'css'
},
{
url: 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', label: 'Foundation',
type: 'css' 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', url: 'https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.5.0/hint.min.css',
label: 'Hint.css', label: 'Hint.css',
@ -111,7 +122,7 @@ window.cssLibs = [
}, },
{ {
url: 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', label: 'UIkit 3',
type: 'css' type: 'css'
}, },

2
src/manifest.json

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

2
src/options.html

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

9
src/preview.html Normal 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

@ -6,13 +6,13 @@ notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settings
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag, onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl, onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate, runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
customEditorFontInput customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
*/ */
/* eslint-disable no-extra-semi */ /* eslint-disable no-extra-semi */
(function(alertsService) { (function(alertsService) {
/* eslint-enable no-extra-semi */ /* eslint-enable no-extra-semi */
var scope = scope || {}; var scope = scope || {};
var version = '2.8.0'; var version = '2.8.1';
if (window.DEBUG) { if (window.DEBUG) {
window.scope = scope; window.scope = scope;
@ -95,7 +95,8 @@ customEditorFontInput
cmPath: 'css', cmPath: 'css',
cmMode: 'css', cmMode: 'css',
codepenVal: 'notsupported', codepenVal: 'notsupported',
cmDisable: true cmDisable: true,
hasSettings: true
}; };
const AUTO_SAVE_INTERVAL = 15000; // 15 seconds const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
@ -369,6 +370,9 @@ customEditorFontInput
currentItem.htmlMode = htmlMode; currentItem.htmlMode = htmlMode;
currentItem.cssMode = cssMode; currentItem.cssMode = cssMode;
currentItem.jsMode = jsMode; currentItem.jsMode = jsMode;
currentItem.cssSettings = {
acssConfig: scope.acssSettingsCm.getValue()
};
currentItem.updatedOn = Date.now(); currentItem.updatedOn = Date.now();
currentItem.layoutMode = currentLayoutMode; currentItem.layoutMode = currentLayoutMode;
currentItem.externalLibs = { currentItem.externalLibs = {
@ -592,6 +596,11 @@ customEditorFontInput
scope.cm.css.refresh(); scope.cm.css.refresh();
scope.cm.js.refresh(); scope.cm.js.refresh();
scope.acssSettingsCm.setValue(
currentItem.cssSettings ? currentItem.cssSettings.acssConfig : ''
);
scope.acssSettingsCm.refresh();
scope.clearConsole(); scope.clearConsole();
// To have the library count updated // To have the library count updated
@ -614,6 +623,7 @@ customEditorFontInput
addLibraryModal.classList.remove('is-modal-visible'); addLibraryModal.classList.remove('is-modal-visible');
onboardModal.classList.remove('is-modal-visible'); onboardModal.classList.remove('is-modal-visible');
settingsModal.classList.remove('is-modal-visible'); settingsModal.classList.remove('is-modal-visible');
cssSettingsModal.classList.remove('is-modal-visible');
toggleSavedItemsPane(false); toggleSavedItemsPane(false);
document.dispatchEvent(new Event('overlaysClosed')); document.dispatchEvent(new Event('overlaysClosed'));
} }
@ -681,6 +691,9 @@ customEditorFontInput
cssModelLabel.parentElement.querySelector('select').value = value; cssModelLabel.parentElement.querySelector('select').value = value;
scope.cm.css.setOption('mode', modes[value].cmMode); scope.cm.css.setOption('mode', modes[value].cmMode);
scope.cm.css.setOption('readOnly', modes[value].cmDisable); scope.cm.css.setOption('readOnly', modes[value].cmDisable);
cssSettingsBtn.classList[modes[value].hasSettings ? 'remove' : 'add'](
'hide'
);
CodeMirror.autoLoadMode( CodeMirror.autoLoadMode(
scope.cm.css, scope.cm.css,
modes[value].cmPath || modes[value].cmMode modes[value].cmPath || modes[value].cmMode
@ -770,7 +783,15 @@ customEditorFontInput
} else if (cssMode === CssModes.ACSS) { } else if (cssMode === CssModes.ACSS) {
const html = scope.cm.html.getValue(); const html = scope.cm.html.getValue();
const foundClasses = atomizer.findClassNames(html); 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); const acss = atomizer.getCss(finalConfig);
scope.cm.css.setValue(acss); scope.cm.css.setValue(acss);
d.resolve(acss); d.resolve(acss);
@ -924,6 +945,7 @@ customEditorFontInput
}, ''); }, '');
var contents = var contents =
'<html>\n<head>\n' + '<html>\n<head>\n' +
'<meta charset="UTF-8" />\n' +
externalCss + externalCss +
'\n' + '\n' +
'<style id="webmakerstyle">\n' + '<style id="webmakerstyle">\n' +
@ -1037,11 +1059,18 @@ customEditorFontInput
chrome.i18n.getMessage('@@extension_id') + chrome.i18n.getMessage('@@extension_id') +
'/temporary/' + '/temporary/' +
'preview.html'; 'preview.html';
if (scope.detachedWindow) {
scope.detachedWindow.postMessage(frame.src, '*');
}
}); });
}); });
} }
scope.setPreviewContent = function(isForced) { scope.setPreviewContent = function(isForced) {
if (!prefs.preserveConsoleLogs) {
scope.clearConsole();
}
var currentCode = { var currentCode = {
html: scope.cm.html.getValue(), html: scope.cm.html.getValue(),
css: scope.cm.css.getValue(), css: scope.cm.css.getValue(),
@ -1588,6 +1617,7 @@ customEditorFontInput
$('[data-setting=editorCustomFont]').value = prefs.editorCustomFont; $('[data-setting=editorCustomFont]').value = prefs.editorCustomFont;
$('[data-setting=autoSave]').checked = prefs.autoSave; $('[data-setting=autoSave]').checked = prefs.autoSave;
$('[data-setting=autoComplete]').checked = prefs.autoComplete; $('[data-setting=autoComplete]').checked = prefs.autoComplete;
$('[data-setting=preserveConsoleLogs]').checked = prefs.preserveConsoleLogs;
$('[data-setting=lightVersion]').checked = prefs.lightVersion; $('[data-setting=lightVersion]').checked = prefs.lightVersion;
if (!prefs.lightVersion) { if (!prefs.lightVersion) {
@ -1665,6 +1695,10 @@ customEditorFontInput
scope.cm[type].refresh(); scope.cm[type].refresh();
}); });
scope.consoleCm.setOption('theme', $('[data-setting=editorTheme]').value); scope.consoleCm.setOption('theme', $('[data-setting=editorTheme]').value);
scope.acssSettingsCm.setOption(
'theme',
$('[data-setting=editorTheme]').value
);
if (prefs.autoSave) { if (prefs.autoSave) {
if (!autoSaveInterval) { if (!autoSaveInterval) {
autoSaveInterval = setInterval(autoSaveLoop, AUTO_SAVE_INTERVAL); 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() { function init() {
var lastCode; var lastCode;
@ -2160,6 +2217,7 @@ customEditorFontInput
editorCustomFont: '', editorCustomFont: '',
autoSave: true, autoSave: true,
autoComplete: true, autoComplete: true,
preserveConsoleLogs: true,
lightVersion: true lightVersion: true
}, },
function syncGetCallback(result) { function syncGetCallback(result) {
@ -2196,6 +2254,7 @@ customEditorFontInput
prefs.editorCustomFont = result.editorCustomFont; prefs.editorCustomFont = result.editorCustomFont;
prefs.autoSave = result.autoSave; prefs.autoSave = result.autoSave;
prefs.autoComplete = result.autoComplete; prefs.autoComplete = result.autoComplete;
prefs.preserveConsoleLogs = result.preserveConsoleLogs;
prefs.lightVersion = result.lightVersion; prefs.lightVersion = result.lightVersion;
updateSettingsInUi(); updateSettingsInUi();
@ -2213,15 +2272,14 @@ customEditorFontInput
if (!result.lastSeenVersion) { if (!result.lastSeenVersion) {
onboardModal.classList.add('is-modal-visible'); onboardModal.classList.add('is-modal-visible');
trackEvent('ui', 'onboardModalSeen'); 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() { utils.once(document, 'overlaysClosed', function() {
chrome.storage.sync.set(
{
lastSeenVersion: version
},
function() {}
);
chrome.storage.sync.set( chrome.storage.sync.set(
{ {
replaceNewTab: onboardShowInTabOptionBtn.classList.contains( 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 = ''; var options = '';
[ [
'3024-day', '3024-day',

26
src/style.css

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