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

Merge branch 'master' into sublime-select-next-occurrence

Browse Source
This commit is contained in:
Basit Ali Mundia 2017-09-18 09:45:16 +05:00 committed by GitHub
commit 704a5df226
11 changed files with 389 additions and 159 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", "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": {

37
src/changelog.html
View File

@ -1,4 +1,37 @@
<h1>Whats new?</h1> <h1>Whats new?</h1>
<div class="notification">
<span class="notification__version">2.9.0</span>
<ul>
<li><a href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6" target="_blank">Read blog post about this release.</a></li>
<li><strong>Detached Preview</strong> - Yes, you read that correct! You can now detach your preview and send it to your secondary monitor.
</li>
<li><strong>Find & Replae</strong> - Long awaited, now its there. Ctrl/Cmd+f to find and add Alt to replace.</li>
<li><strong>Atomic CSS (Atomizer) configurations</strong> - Add custom config for Atomic CSS. <a href="https://github.com/acss-io/atomizer#api" target="_blank">Read more</a>.</li>
<li><strong>Light mode</strong> - This new setting makes Web Maker drop some heavy effects like blur etc to gain more performance. Thanks <a href="https://github.com/iamandrewluca" target="_blank">Andrew</a>.</li>
<li><strong>Preserve logs setting</strong> - Choose whether or not to preserve logs across preview refreshes. Thanks <a href="https://github.com/BasitAli" target="_blank">Basit</a>.</li>
<li><strong>Line wrap setting</strong> - As the name says.</li>
<li>Semantic UI added to popular libraries.</li>
<li>Bootstrap, Vue, UI-Kit and more updated to latest versions in popular libraries.</li>
<li>UX improvements in settings UI</li>
<li><strong>Bugfix</strong> - Trigger preview refresh anytime with Ctrl/⌘ + Shift + 5. Even with auto-preview on.</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.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>
</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 +53,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
View File

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

227
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/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>
@ -149,7 +155,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="footer"> <div class="global-console-container" id="globalConsoleContainerEl"></div>
<div id="footer" class="footer">
<div class="footer__right fr"> <div class="footer__right fr">
<a id="saveHtmlBtn" class="mode-btn hint--rounded hint--top-left" data-hint="Save as HTML file"> <a id="saveHtmlBtn" class="mode-btn hint--rounded hint--top-left" data-hint="Save as HTML file">
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
@ -194,6 +201,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 +267,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.9.0</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,110 +380,123 @@
<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 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 class="ml-2">
<label class="line" title="Toggle wrapping of long sentences onto new line">
<input type="checkbox" d-change="updateSetting" data-setting="lineWrap"> Line wrap
</label>
<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" title="Switch to lighter version for better performance. Removes things like blur etc.">
<input type="checkbox" d-change="updateSetting" data-setting="lightVersion"> Fast/light version
</label> </label>
</div> </div>
<label class="line"> </div>
<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>
</p>
<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>
@ -572,6 +608,9 @@
<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/searchcursor.js"></script> <script src="lib/codemirror/addon/search/searchcursor.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>

42
src/lib/screenlog.js
View File

@ -1,20 +1,19 @@
(function () { (function() {
var logEl, var logEl,
isInitialized = false, isInitialized = false,
_console = {}; // backup console obj to contain references of overridden fns. _console = {}; // backup console obj to contain references of overridden fns.
_options = { _options = {
bgColor: 'black', bgColor: 'black',
logColor: 'lightgreen', logColor: 'lightgreen',
infoColor: 'blue', infoColor: 'blue',
warnColor: 'orange', warnColor: 'orange',
errorColor: 'red', errorColor: 'red',
freeConsole: false, freeConsole: false,
css: '', css: '',
autoScroll: true, autoScroll: true,
proxyCallback: null, proxyCallback: null,
noUi: false noUi: false
}; };
function createElement(tag, css) { function createElement(tag, css) {
var element = document.createElement(tag); var element = document.createElement(tag);
@ -23,7 +22,13 @@
} }
function createPanel() { function createPanel() {
var div = createElement('div', 'z-index:2147483647;font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;right:0;top:0;min-width:200px;max-height:50vh;overflow:auto;background:' + _options.bgColor + ';' + _options.css); var div = createElement(
'div',
'z-index:2147483647;font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;right:0;top:0;min-width:200px;max-height:50vh;overflow:auto;background:' +
_options.bgColor +
';' +
_options.css
);
return div; return div;
} }
@ -170,18 +175,19 @@
destroy: checkInitDecorator(destroy) destroy: checkInitDecorator(destroy)
}; };
})(); })();
var mainWindow = window.parent.onMessageFromConsole ? window.parent : window.parent.opener;
screenLog.init({ screenLog.init({
noUi: true, noUi: true,
proxyCallback: function () { proxyCallback: function () {
window.parent.onMessageFromConsole.apply(null, arguments); mainWindow.onMessageFromConsole.apply(null, arguments);
} }
}); });
window._wmEvaluate = function _wmEvaluate(expr) { window._wmEvaluate = function _wmEvaluate(expr) {
try { try {
var result = eval(expr); var result = eval(expr);
} catch(e) { } catch(e) {
window.parent.onMessageFromConsole.call(null, e); mainWindow.onMessageFromConsole.call(null, e);
return; return;
} }
window.parent.onMessageFromConsole.call(null, result); mainWindow.onMessageFromConsole.call(null, result);
} }

43
src/library-list.js
View File

@ -11,16 +11,21 @@ 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' type: 'js'
}, },
{ {
url: url:
'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js',
label: 'Foundation', label: 'Foundation',
type: 'js' type: 'js'
}, },
{
url: 'https://semantic-ui.com/dist/semantic.min.js',
label: 'Semantic UI',
type: 'js'
},
{ {
url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js', url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js',
label: 'Angular', label: 'Angular',
@ -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.0/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.25/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'
},
{
url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css',
label: 'Bulma',
type: 'css' 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.25/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'
}, },

4
src/manifest.json
View File

@ -1,12 +1,12 @@
{ {
"name": "Web Maker", "name": "Web Maker",
"version": "2.8.0", "version": "2.9.0",
"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",
"permissions": ["storage", "tabs", "<all_urls>"], "permissions": ["storage", "tabs", "<all_urls>"],
"optional_permissions": ["downloads"], "optional_permissions": ["downloads"],
"content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://www.google-analytics.com 'unsafe-eval'; object-src 'self'", "content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://semantic-ui.com https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
"options_ui": { "options_ui": {
"page": "options.html", "page": "options.html",
"chrome_style": true "chrome_style": true

2
src/options.html
View File

@ -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.9.0</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
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>

142
src/script.js
View File

@ -6,13 +6,14 @@ 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,
globalConsoleContainerEl
*/ */
/* 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.9.0';
if (window.DEBUG) { if (window.DEBUG) {
window.scope = scope; window.scope = scope;
@ -95,7 +96,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 +371,11 @@ customEditorFontInput
currentItem.htmlMode = htmlMode; currentItem.htmlMode = htmlMode;
currentItem.cssMode = cssMode; currentItem.cssMode = cssMode;
currentItem.jsMode = jsMode; currentItem.jsMode = jsMode;
if (modes[cssMode].hasSettings) {
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 +599,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 +626,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 +694,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
@ -768,12 +784,24 @@ customEditorFontInput
d.resolve(result); d.resolve(result);
}); });
} else if (cssMode === CssModes.ACSS) { } else if (cssMode === CssModes.ACSS) {
const html = scope.cm.html.getValue(); if (!window.atomizer) {
const foundClasses = atomizer.findClassNames(html); d.resolve('');
const finalConfig = atomizer.getConfig(foundClasses, {}); } else {
const acss = atomizer.getCss(finalConfig); const html = scope.cm.html.getValue();
scope.cm.css.setValue(acss); const foundClasses = atomizer.findClassNames(html);
d.resolve(acss); 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; return d.promise;
@ -891,6 +919,9 @@ customEditorFontInput
}; };
window.onunload = function() { window.onunload = function() {
saveCode('code'); saveCode('code');
if (scope.detachedWindow) {
scope.detachedWindow.close();
}
}; };
function cleanupErrors(lang) { function cleanupErrors(lang) {
@ -924,6 +955,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 +1069,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 +1627,9 @@ 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=lineWrap]').checked = prefs.lineWrap;
} }
/** /**
@ -1657,9 +1699,17 @@ customEditorFontInput
'keyMap', 'keyMap',
$('[data-setting=keymap]:checked').value $('[data-setting=keymap]:checked').value
); );
scope.cm[type].setOption(
'lineWrapping',
$('[data-setting=lineWrap]').checked
);
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);
@ -1668,6 +1718,10 @@ customEditorFontInput
clearInterval(autoSaveInterval); clearInterval(autoSaveInterval);
autoSaveInterval = null; autoSaveInterval = null;
} }
document.body.classList[prefs.lightVersion ? 'add' : 'remove'](
'light-version'
);
}; };
scope.onNewBtnClick = function() { scope.onNewBtnClick = function() {
@ -1804,6 +1858,45 @@ customEditorFontInput
}); });
} }
scope.openDetachedPreview = function() {
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`
);
setTimeout(() => {
scope.detachedWindow.postMessage(frame.src, '*');
}, 1000);
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;
}
}
var intervalID = window.setInterval(checkWindow, 500);
};
scope.openCssSettingsModal = function() {
scope.toggleModal(cssSettingsModal);
setTimeout(() => {
// Refresh is required because codemirror gets scaled inside modal and loses alignement.
scope.acssSettingsCm.refresh();
scope.acssSettingsCm.focus();
}, 500);
};
function init() { function init() {
var lastCode; var lastCode;
@ -1968,7 +2061,6 @@ customEditorFontInput
} }
// Ctrl/⌘ + Shift + 5 // Ctrl/⌘ + Shift + 5
if ( if (
!prefs.autoPreview &&
(event.ctrlKey || event.metaKey) && (event.ctrlKey || event.metaKey) &&
event.shiftKey && event.shiftKey &&
event.keyCode === 53 event.keyCode === 53
@ -2154,7 +2246,10 @@ customEditorFontInput
editorFont: 'FiraCode', editorFont: 'FiraCode',
editorCustomFont: '', editorCustomFont: '',
autoSave: true, autoSave: true,
autoComplete: true autoComplete: true,
preserveConsoleLogs: true,
lightVersion: false,
lineWrap: true
}, },
function syncGetCallback(result) { function syncGetCallback(result) {
if (result.preserveLastCode && lastCode) { if (result.preserveLastCode && lastCode) {
@ -2190,6 +2285,9 @@ 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.lineWrap = result.lineWrap;
updateSettingsInUi(); updateSettingsInUi();
scope.updateSetting(); scope.updateSetting();
@ -2206,15 +2304,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(
@ -2241,6 +2338,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',

37
src/style.css
View File

@ -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;
@ -117,10 +118,11 @@ select, input[type="text"], input[type="number"], textarea {
will-change: -webkit-filter; will-change: -webkit-filter;
transition: 0.10s ease 0.2s; transition: 0.10s ease 0.2s;
} }
.overlay-visible .main-container { body:not(.light-version).overlay-visible .main-container {
transition-duration: 0.5s; transition-duration: 0.5s;
transition-delay: 0.4s; transition-delay: 0.4s;
-webkit-filter: blur(3px); -webkit-filter: blur(3px);
filter: blur(3px);
} }
.code-side, .code-side,
.demo-side { .demo-side {
@ -154,6 +156,16 @@ select, input[type="text"], input[type="number"], textarea {
.layout-4 .demo-side { .layout-4 .demo-side {
width: 100% !important; width: 100% !important;
} }
.is-detached-mode .demo-side {
display: none;
}
.is-detached-mode .code-side {
width: 100% !important;
}
.is-detached-mode.layout-2 .code-side {
height: auto !important;
}
.code-wrap { .code-wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -284,6 +296,10 @@ li.CodeMirror-hint-active {
z-index: 1; z-index: 1;
background: white; background: white;
} }
/* When demo frame is in detached window */
body > #demo-frame {
height: 100%; /* Because console is no more here */
}
.main-header, .main-header,
.footer { .footer {
padding: 5px 10px; padding: 5px 10px;
@ -462,8 +478,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 {
@ -885,6 +901,19 @@ li.CodeMirror-hint-active {
.console:not(.is-minimized) .code-wrap__header { .console:not(.is-minimized) .code-wrap__header {
cursor: ns-resize; cursor: ns-resize;
} }
.global-console-container {
display: none;
position: relative;
height: 35px;
}
/* Detached mode */
.is-detached-mode .console,
.is-detached-mode .footer {
z-index: 4;
}
.is-detached-mode .global-console-container {
display: block;
}
/* 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 */
@ -925,4 +954,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; }