mirror of
https://github.com/chinchang/web-maker.git
synced 2025-05-12 05:15:24 +02:00
Merge branch 'master' into sublime-select-next-occurrence
This commit is contained in:
Basit Ali Mundia
GitHub
commit
704a5df226
@ -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": {
|
||||
|
||||
@ -1,4 +1,37 @@
|
||||
<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> <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> <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">
|
||||
<span class="notification__version">2.8.0</span>
|
||||
<ul>
|
||||
@ -20,10 +53,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> <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> <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
3
src/detached-window.js
Normal file
@ -0,0 +1,3 @@
|
||||
window.addEventListener('message', e => {
|
||||
document.querySelector('iframe').src = e.data;
|
||||
});
|
||||
227
src/index.html
227
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/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>
|
||||
@ -149,7 +155,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="global-console-container" id="globalConsoleContainerEl"></div>
|
||||
<div id="footer" class="footer">
|
||||
<div class="footer__right fr">
|
||||
<a id="saveHtmlBtn" class="mode-btn hint--rounded hint--top-left" data-hint="Save as HTML file">
|
||||
<svg viewBox="0 0 24 24">
|
||||
@ -194,6 +201,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 +267,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.9.0</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,110 +380,123 @@
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</p>
|
||||
</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>
|
||||
@ -572,6 +608,9 @@
|
||||
<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/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/javascript/javascript.js"></script>
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
(function () {
|
||||
|
||||
(function() {
|
||||
var logEl,
|
||||
isInitialized = false,
|
||||
_console = {}; // backup console obj to contain references of overridden fns.
|
||||
_options = {
|
||||
bgColor: 'black',
|
||||
logColor: 'lightgreen',
|
||||
infoColor: 'blue',
|
||||
warnColor: 'orange',
|
||||
errorColor: 'red',
|
||||
freeConsole: false,
|
||||
css: '',
|
||||
autoScroll: true,
|
||||
proxyCallback: null,
|
||||
noUi: false
|
||||
};
|
||||
_options = {
|
||||
bgColor: 'black',
|
||||
logColor: 'lightgreen',
|
||||
infoColor: 'blue',
|
||||
warnColor: 'orange',
|
||||
errorColor: 'red',
|
||||
freeConsole: false,
|
||||
css: '',
|
||||
autoScroll: true,
|
||||
proxyCallback: null,
|
||||
noUi: false
|
||||
};
|
||||
|
||||
function createElement(tag, css) {
|
||||
var element = document.createElement(tag);
|
||||
@ -23,7 +22,13 @@
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@ -170,18 +175,19 @@
|
||||
destroy: checkInitDecorator(destroy)
|
||||
};
|
||||
})();
|
||||
var mainWindow = window.parent.onMessageFromConsole ? window.parent : window.parent.opener;
|
||||
screenLog.init({
|
||||
noUi: true,
|
||||
proxyCallback: function () {
|
||||
window.parent.onMessageFromConsole.apply(null, arguments);
|
||||
mainWindow.onMessageFromConsole.apply(null, arguments);
|
||||
}
|
||||
});
|
||||
window._wmEvaluate = function _wmEvaluate(expr) {
|
||||
try {
|
||||
var result = eval(expr);
|
||||
} catch(e) {
|
||||
window.parent.onMessageFromConsole.call(null, e);
|
||||
mainWindow.onMessageFromConsole.call(null, e);
|
||||
return;
|
||||
}
|
||||
window.parent.onMessageFromConsole.call(null, result);
|
||||
mainWindow.onMessageFromConsole.call(null, result);
|
||||
}
|
||||
@ -11,16 +11,21 @@ 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.3.1/js/foundation.min.js',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js',
|
||||
label: 'Foundation',
|
||||
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',
|
||||
label: 'Angular',
|
||||
@ -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.0/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.25/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α',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css',
|
||||
label: 'Bulma',
|
||||
'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/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.25/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'
|
||||
},
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "Web Maker",
|
||||
"version": "2.8.0",
|
||||
"version": "2.9.0",
|
||||
"manifest_version": 2,
|
||||
"description": "Blazing fast & offline playground for your web experiments",
|
||||
"homepage_url": "https://webmakerapp.com",
|
||||
"permissions": ["storage", "tabs", "<all_urls>"],
|
||||
"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": {
|
||||
"page": "options.html",
|
||||
"chrome_style": true
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<h3>Settings <span style="opacity: 0.6;font-size:0.7em;">
|
||||
v2.8.0</span></h3>
|
||||
v2.9.0</span></h3>
|
||||
<form name="optionsForm">
|
||||
<label>
|
||||
<input type="checkbox" name="preserveLastCode">
|
||||
|
||||
9
src/preview.html
Normal file
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>
|
||||
142
src/script.js
142
src/script.js
@ -6,13 +6,14 @@ 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,
|
||||
globalConsoleContainerEl
|
||||
*/
|
||||
/* eslint-disable no-extra-semi */
|
||||
(function(alertsService) {
|
||||
/* eslint-enable no-extra-semi */
|
||||
var scope = scope || {};
|
||||
var version = '2.8.0';
|
||||
var version = '2.9.0';
|
||||
|
||||
if (window.DEBUG) {
|
||||
window.scope = scope;
|
||||
@ -95,7 +96,8 @@ customEditorFontInput
|
||||
cmPath: 'css',
|
||||
cmMode: 'css',
|
||||
codepenVal: 'notsupported',
|
||||
cmDisable: true
|
||||
cmDisable: true,
|
||||
hasSettings: true
|
||||
};
|
||||
|
||||
const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
|
||||
@ -369,6 +371,11 @@ customEditorFontInput
|
||||
currentItem.htmlMode = htmlMode;
|
||||
currentItem.cssMode = cssMode;
|
||||
currentItem.jsMode = jsMode;
|
||||
if (modes[cssMode].hasSettings) {
|
||||
currentItem.cssSettings = {
|
||||
acssConfig: scope.acssSettingsCm.getValue()
|
||||
};
|
||||
}
|
||||
currentItem.updatedOn = Date.now();
|
||||
currentItem.layoutMode = currentLayoutMode;
|
||||
currentItem.externalLibs = {
|
||||
@ -592,6 +599,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 +626,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 +694,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
|
||||
@ -768,12 +784,24 @@ customEditorFontInput
|
||||
d.resolve(result);
|
||||
});
|
||||
} else if (cssMode === CssModes.ACSS) {
|
||||
const html = scope.cm.html.getValue();
|
||||
const foundClasses = atomizer.findClassNames(html);
|
||||
const finalConfig = atomizer.getConfig(foundClasses, {});
|
||||
const acss = atomizer.getCss(finalConfig);
|
||||
scope.cm.css.setValue(acss);
|
||||
d.resolve(acss);
|
||||
if (!window.atomizer) {
|
||||
d.resolve('');
|
||||
} else {
|
||||
const html = scope.cm.html.getValue();
|
||||
const foundClasses = atomizer.findClassNames(html);
|
||||
var finalConfig;
|
||||
try {
|
||||
finalConfig = atomizer.getConfig(
|
||||
foundClasses,
|
||||
JSON.parse(scope.acssSettingsCm.getValue())
|
||||
);
|
||||
} catch (e) {
|
||||
finalConfig = atomizer.getConfig(foundClasses, {});
|
||||
}
|
||||
const acss = atomizer.getCss(finalConfig);
|
||||
scope.cm.css.setValue(acss);
|
||||
d.resolve(acss);
|
||||
}
|
||||
}
|
||||
|
||||
return d.promise;
|
||||
@ -891,6 +919,9 @@ customEditorFontInput
|
||||
};
|
||||
window.onunload = function() {
|
||||
saveCode('code');
|
||||
if (scope.detachedWindow) {
|
||||
scope.detachedWindow.close();
|
||||
}
|
||||
};
|
||||
|
||||
function cleanupErrors(lang) {
|
||||
@ -924,6 +955,7 @@ customEditorFontInput
|
||||
}, '');
|
||||
var contents =
|
||||
'<html>\n<head>\n' +
|
||||
'<meta charset="UTF-8" />\n' +
|
||||
externalCss +
|
||||
'\n' +
|
||||
'<style id="webmakerstyle">\n' +
|
||||
@ -1037,11 +1069,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 +1627,9 @@ 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;
|
||||
$('[data-setting=lineWrap]').checked = prefs.lineWrap;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1657,9 +1699,17 @@ customEditorFontInput
|
||||
'keyMap',
|
||||
$('[data-setting=keymap]:checked').value
|
||||
);
|
||||
scope.cm[type].setOption(
|
||||
'lineWrapping',
|
||||
$('[data-setting=lineWrap]').checked
|
||||
);
|
||||
scope.cm[type].refresh();
|
||||
});
|
||||
scope.consoleCm.setOption('theme', $('[data-setting=editorTheme]').value);
|
||||
scope.acssSettingsCm.setOption(
|
||||
'theme',
|
||||
$('[data-setting=editorTheme]').value
|
||||
);
|
||||
if (prefs.autoSave) {
|
||||
if (!autoSaveInterval) {
|
||||
autoSaveInterval = setInterval(autoSaveLoop, AUTO_SAVE_INTERVAL);
|
||||
@ -1668,6 +1718,10 @@ customEditorFontInput
|
||||
clearInterval(autoSaveInterval);
|
||||
autoSaveInterval = null;
|
||||
}
|
||||
|
||||
document.body.classList[prefs.lightVersion ? 'add' : 'remove'](
|
||||
'light-version'
|
||||
);
|
||||
};
|
||||
|
||||
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() {
|
||||
var lastCode;
|
||||
|
||||
@ -1968,7 +2061,6 @@ customEditorFontInput
|
||||
}
|
||||
// Ctrl/⌘ + Shift + 5
|
||||
if (
|
||||
!prefs.autoPreview &&
|
||||
(event.ctrlKey || event.metaKey) &&
|
||||
event.shiftKey &&
|
||||
event.keyCode === 53
|
||||
@ -2154,7 +2246,10 @@ customEditorFontInput
|
||||
editorFont: 'FiraCode',
|
||||
editorCustomFont: '',
|
||||
autoSave: true,
|
||||
autoComplete: true
|
||||
autoComplete: true,
|
||||
preserveConsoleLogs: true,
|
||||
lightVersion: false,
|
||||
lineWrap: true
|
||||
},
|
||||
function syncGetCallback(result) {
|
||||
if (result.preserveLastCode && lastCode) {
|
||||
@ -2190,6 +2285,9 @@ customEditorFontInput
|
||||
prefs.editorCustomFont = result.editorCustomFont;
|
||||
prefs.autoSave = result.autoSave;
|
||||
prefs.autoComplete = result.autoComplete;
|
||||
prefs.preserveConsoleLogs = result.preserveConsoleLogs;
|
||||
prefs.lightVersion = result.lightVersion;
|
||||
prefs.lineWrap = result.lineWrap;
|
||||
|
||||
updateSettingsInUi();
|
||||
scope.updateSetting();
|
||||
@ -2206,15 +2304,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(
|
||||
@ -2241,6 +2338,13 @@ customEditorFontInput
|
||||
}
|
||||
);
|
||||
|
||||
scope.acssSettingsCm = CodeMirror.fromTextArea(acssSettingsTextarea, {
|
||||
mode: 'application/ld+json'
|
||||
});
|
||||
scope.acssSettingsCm.on('blur', () => {
|
||||
scope.setPreviewContent(true);
|
||||
});
|
||||
|
||||
var options = '';
|
||||
[
|
||||
'3024-day',
|
||||
|
||||
@ -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;
|
||||
@ -117,10 +118,11 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
will-change: -webkit-filter;
|
||||
transition: 0.10s ease 0.2s;
|
||||
}
|
||||
.overlay-visible .main-container {
|
||||
body:not(.light-version).overlay-visible .main-container {
|
||||
transition-duration: 0.5s;
|
||||
transition-delay: 0.4s;
|
||||
-webkit-filter: blur(3px);
|
||||
filter: blur(3px);
|
||||
}
|
||||
.code-side,
|
||||
.demo-side {
|
||||
@ -154,6 +156,16 @@ select, input[type="text"], input[type="number"], textarea {
|
||||
.layout-4 .demo-side {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -284,6 +296,10 @@ li.CodeMirror-hint-active {
|
||||
z-index: 1;
|
||||
background: white;
|
||||
}
|
||||
/* When demo frame is in detached window */
|
||||
body > #demo-frame {
|
||||
height: 100%; /* Because console is no more here */
|
||||
}
|
||||
.main-header,
|
||||
.footer {
|
||||
padding: 5px 10px;
|
||||
@ -462,8 +478,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 {
|
||||
@ -885,6 +901,19 @@ li.CodeMirror-hint-active {
|
||||
.console:not(.is-minimized) .code-wrap__header {
|
||||
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
|
||||
while the theme CSS file is loading */
|
||||
@ -925,4 +954,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; }
|
||||
Loading…
x
Reference in New Issue
Block a user