mirror of
https://github.com/chinchang/web-maker.git
synced 2025-05-19 16:49:44 +02:00
Merge branch 'master' into master
This commit is contained in:
Kushagra Gour
GitHub
commit
f1c4bec8df
10
.gitignore
vendored
10
.gitignore
vendored
@ -1,3 +1,11 @@
|
||||
.sass-cache
|
||||
### OSX ###
|
||||
.DS_Store
|
||||
|
||||
### PhPStorm / IntellJ IDEA ###
|
||||
.idea/
|
||||
*.iml
|
||||
|
||||
### Misc ###
|
||||
node_modules/
|
||||
*.map
|
||||
.sass-cache
|
||||
18
CONTRIBUTING.md
Normal file
18
CONTRIBUTING.md
Normal file
@ -0,0 +1,18 @@
|
||||
## How to contribute to Web Maker
|
||||
|
||||
Web Maker is written in vanilla JavaScript, CSS & HTML. It uses few open-source 3rd party JavaScript libraries for things like splitting panes, syntax highlighting etc. There is no build process involved in running Web Maker on your local system.
|
||||
|
||||
### Run Web Maker locally on your machine
|
||||
|
||||
- Clone the repo `git clone git@github.com:chinchang/web-maker.git`.
|
||||
- Go to Chrome extension settings page [chrome://extensions/](chrome://extensions/).
|
||||
- Click on **Load unpacked extension** button.
|
||||
- Select the `src` folder in the repo you just cloned.
|
||||
- Done! You'll now have a Web Maker icon added in your browser's right-top area. Click that and you'll run your local copy of Web Maker.
|
||||
|
||||
### Code changes
|
||||
|
||||
- Before starting any code work, run `npm install` in the repo folder. This is required to install some git hooks which do linting & formatting.
|
||||
- Also, create a new branch out of master branch with the name as `fix-{ISSUE_ID}-anything-more-here`. For example, if you are working on issue #23 regarding implementing a mobile mode, your branch could be called `fix-23-mobile-mode`.
|
||||
- Now you can simply make code changes inside `src/` folder and refresh in browser to see them.
|
||||
- Once you are done, open a pull request here by selecting right branch: [https://github.com/chinchang/web-maker/compare](https://github.com/chinchang/web-maker/compare).
|
||||
@ -13,7 +13,7 @@ Web-Maker 
|
||||
* Works offline
|
||||
* Inbuilt Console
|
||||
* Save and load your creations
|
||||
* Auto-save feture
|
||||
* Auto-save feature
|
||||
* Code auto-completion
|
||||
* Easy addition of popular JS & CSS libraries
|
||||
* Import & Export all creations anytime, anywhere
|
||||
@ -29,7 +29,7 @@ Follow [@webmakerApp](https://twitter.com/intent/follow?screen_name=webmakerApp)
|
||||
|
||||
### Support Web Maker
|
||||
|
||||
Web Maker is completely free and open-source. If you find it useful, you can show your support by sharing it in your social network or by donating on [Gratipay](https://gratipay.com/Web-Maker/) or by simply letting me know how much you 💖 it by tweeting to [@webmakerapp](https://twitter.com/webmakerApp).
|
||||
Web Maker is completely free and open-source. If you find it useful, you can show your support by sharing it in your social network or by [donating](https://www.paypal.me/kushagragour) or by simply letting me know how much you 💖 it by tweeting to [@webmakerapp](https://twitter.com/webmakerApp).
|
||||
|
||||
### License
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ jsfiles=$(git diff --staged --name-only --diff-filter=ACM | grep '\.js$')
|
||||
[ -z "$jsfiles" ] && exit 0
|
||||
|
||||
# ESLINT CHECK
|
||||
eslintresult=$(./node_modules/.bin/eslint --color $jsfiles)
|
||||
eslintresult=$(./node_modules/.bin/eslint --ignore-pattern '/src/lib/*' --color $jsfiles --quiet)
|
||||
|
||||
if [[ $eslintresult != "" ]]; then
|
||||
echo "$eslintresult"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "web-maker",
|
||||
"version": "2.8.1",
|
||||
"version": "2.9.4",
|
||||
"description": "A blazing fast & offline web playground",
|
||||
"main": "index.html",
|
||||
"devDependencies": {
|
||||
@ -10,7 +10,7 @@
|
||||
"prettier": "^1.5.2"
|
||||
},
|
||||
"scripts": {
|
||||
"install": "ln -s ../../git-hooks/pre-commit .git/hooks/pre-commit"
|
||||
"install": "ln -sf ../../git-hooks/pre-commit .git/hooks/pre-commit"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
8
scripts/generate-atomizer-web.sh
Executable file
8
scripts/generate-atomizer-web.sh
Executable file
@ -0,0 +1,8 @@
|
||||
npm install atomizer
|
||||
touch atomizer.js
|
||||
echo "require('atomizer');" > atomizer.js
|
||||
webpack --output-library Atomizer --output-library-target umd atomizer atomizer-web.js
|
||||
uglifyjs atomizer-web.js --compress > atomizer-web.min.js
|
||||
echo 'window.atomizer = new Atomizer();' >> atomizer-web.min.js
|
||||
mv atomizer-web.min.js src/lib/atomizer.browser.js
|
||||
rm atomizer-web.js atomizer.js
|
||||
@ -1,17 +1,56 @@
|
||||
<a d-click="onModalCloseBtnClick" href="" aria-label="Close notifications" title="Close" class="js-modal__close-btn modal__close-btn">
|
||||
<svg>
|
||||
<use xlink:href="#cross-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<h1>Whats new?</h1>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.4</span>
|
||||
<ul>
|
||||
<li><strong>Improvement</strong>: Atomic CSS (Atomizer) has been updated to latest version. Now you can do things like psuedo elements. Learn More.</li>
|
||||
<li><strong>Bugfix</strong> - Logging circular objects is now possible. It won't show in the Web Maker console, but will show fine in browser's console.</li>
|
||||
<li><strong>Bugfix</strong> - Console's z-index issue has been fixed.</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>Web Maker now has more than 50K weekly active users! Thank you for being a part of this community 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.9.3</span>
|
||||
<ul>
|
||||
<li>Choose the save location while exporting your saved creations. Now easily sync them to your Dropbox or any cloud storage.</li>
|
||||
<li>All modals inside the app now have a close button.</li>
|
||||
<li>Checkbox that showed on clicking a boolean value is now removed. Thanks <a href="https://github.com/gauravmuk" target="_blank">Gaurav Nanda</a>.</li>
|
||||
<li><strong>Bugfix</strong> - Screenshots on retina device are now correct. Thanks <a href="https://github.com/AshBardhan" target="_blank">Ashish Bardhan</a>.</li>
|
||||
<li><strong>Bugfix</strong> - Double console log in detached mode fixed.</li>
|
||||
<li><strong>Bugfix</strong> - Console.clear now works in detached mode too.</li>
|
||||
<li><strong>Bugfix</strong> - DOCTYPE added in preview.</li>
|
||||
<li><strong>Bugfix</strong> - Typo correction in README. Thanks <a href="https://github.com/AdilMah" target="_blank">Adil Mahmood</a>.</li>
|
||||
<li>gstatic.com is available to load external JavaScripts from.</li>
|
||||
<li>Popular libraries list updated. Thanks <a href="https://github.com/diomed" target="_blank">diomed</a>.</li>
|
||||
<li>Added <a href="https://github.com/chinchang/web-maker/blob/master/CONTRIBUTING.md" target="_blank">contribution guidelines</a> in the Github repository.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.2</span>
|
||||
<ul>
|
||||
<li>Minor bug fixes.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="notification">
|
||||
<span class="notification__version">2.9.1</span>
|
||||
<ul>
|
||||
<li><a href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6" target="_blank">Read blog post about last release.</a></li>
|
||||
<li>Use Ctrl/Cmd+D to select next occurence of matching selection.</li>
|
||||
<li>Improve onboard experience.</li>
|
||||
|
||||
<br>
|
||||
<li><strong>Good News</strong>: Web Maker is featured again on the homepage of Chrome Web Store!</li>
|
||||
<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>
|
||||
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
</svg>Run
|
||||
</a>
|
||||
|
||||
<a id="js-add-library-btn" class="flex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
|
||||
<a d-open-modal="addLibraryModal" data-event-category="ui" data-event-action="addLibraryButtonClick" class="flex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
|
||||
Add library <span id="js-external-lib-count" style="display:none;" class="count-label"></span>
|
||||
</a>
|
||||
|
||||
@ -130,7 +130,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-side" id="js-demo-side">
|
||||
<iframe src="about://blank" frameborder="0" id="demo-frame"></iframe>
|
||||
<iframe src="about://blank" frameborder="0" id="demo-frame" allowfullscreen></iframe>
|
||||
<div id="consoleEl" class="console is-minimized">
|
||||
<div id="consoleLogEl" class="console__log" class="code">
|
||||
<div class="js-console__header code-wrap__header" title="Double click to toggle console">
|
||||
@ -216,7 +216,7 @@
|
||||
</svg>
|
||||
<span class="notifications-btn__dot"></span>
|
||||
</a>
|
||||
<a id="settingsBtn" class="mode-btn hint--top-left hint--rounded" aria-label="Settings">
|
||||
<a d-open-modal="settingsModal" data-event-category="ui" data-event-action="settingsBtnClick" class="mode-btn hint--top-left hint--rounded" aria-label="Settings">
|
||||
<svg>
|
||||
<use xlink:href="#settings-icon"></use>
|
||||
</svg>
|
||||
@ -226,7 +226,7 @@
|
||||
|
||||
<a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a>
|
||||
© Web Maker
|
||||
<a id="helpBtn" class="footer__link hint--rounded hint--top-right" data-hint="Help">
|
||||
<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link hint--rounded hint--top-right" data-hint="Help">
|
||||
<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
|
||||
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
|
||||
</svg>
|
||||
@ -243,6 +243,11 @@
|
||||
|
||||
<div class="modal" id="addLibraryModal">
|
||||
<div class="modal__content">
|
||||
<a d-click="onModalCloseBtnClick" href="" aria-label="Close add library modal" title="Close" class="js-modal__close-btn modal__close-btn">
|
||||
<svg>
|
||||
<use xlink:href="#cross-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<h1>Add Library</h1>
|
||||
<h3>JavaScript</h3>
|
||||
<p style="font-size: 0.8em;opacity: 0.7;">Note: You can load external scripts from following domains: 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://rawgit.com, https://wzrd.in</p>
|
||||
@ -268,6 +273,11 @@
|
||||
|
||||
<div class="modal" id="cssSettingsModal">
|
||||
<div class="modal__content">
|
||||
<a d-click="onModalCloseBtnClick" href="" aria-label="Close CSS settings modal" title="Close" class="js-modal__close-btn modal__close-btn">
|
||||
<svg>
|
||||
<use xlink:href="#cross-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<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);">
|
||||
@ -278,7 +288,12 @@
|
||||
|
||||
<div class="modal" id="helpModal">
|
||||
<div class="modal__content">
|
||||
<h1>Web Maker<small style="font-size:14px;"> v2.9.1</small></h1>
|
||||
<a d-click="onModalCloseBtnClick" href="" aria-label="Close help modal" title="Close" class="js-modal__close-btn modal__close-btn">
|
||||
<svg>
|
||||
<use xlink:href="#cross-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<h1>Web Maker<small style="font-size:14px;"> v2.9.4</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>
|
||||
@ -371,6 +386,11 @@
|
||||
|
||||
<div class="modal modal--settings" id="settingsModal">
|
||||
<div class="modal__content">
|
||||
<a d-click="onModalCloseBtnClick" href="" aria-label="Close Settings" title="Close" class="js-modal__close-btn modal__close-btn">
|
||||
<svg>
|
||||
<use xlink:href="#cross-icon"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<h1>Settings</h1>
|
||||
|
||||
<h3>Indentation</h3>
|
||||
@ -583,6 +603,10 @@
|
||||
</symbol>
|
||||
<symbol id="gift-icon" viewBox="0 0 24 24">
|
||||
<path d="M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z" />
|
||||
<symbol id="gift-icon" viewBox="0 0 24 24">
|
||||
</symbol>
|
||||
<symbol id="cross-icon" viewBox="0 0 24 24">
|
||||
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
4
src/lib/inlet.min.js
vendored
4
src/lib/inlet.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,3 +1,6 @@
|
||||
var mainWindow = window.parent.onMessageFromConsole
|
||||
? window.parent
|
||||
: window.parent.opener;
|
||||
(function() {
|
||||
var logEl,
|
||||
isInitialized = false,
|
||||
@ -37,18 +40,27 @@
|
||||
if (_options.proxyCallback) {
|
||||
_options.proxyCallback.apply(null, arguments);
|
||||
}
|
||||
if (_options.noUi) { return; }
|
||||
var el = createElement('div', 'line-height:18px;min-height:18px;background:' +
|
||||
(logEl.children.length % 2 ? 'rgba(255,255,255,0.1)' : '') + ';color:' + color); // zebra lines
|
||||
if (_options.noUi) {
|
||||
return;
|
||||
}
|
||||
var el = createElement(
|
||||
'div',
|
||||
'line-height:18px;min-height:18px;background:' +
|
||||
(logEl.children.length % 2 ? 'rgba(255,255,255,0.1)' : '') +
|
||||
';color:' +
|
||||
color
|
||||
); // zebra lines
|
||||
var val = [].slice.call(arguments).reduce(function(prev, arg) {
|
||||
return prev + ' ' + (typeof arg === "object" ? JSON.stringify(arg) : arg);
|
||||
return (
|
||||
prev + ' ' + (typeof arg === 'object' ? JSON.stringify(arg) : arg)
|
||||
);
|
||||
}, '');
|
||||
el.textContent = val;
|
||||
|
||||
logEl.appendChild(el);
|
||||
|
||||
// Scroll to last element, if autoScroll option is set.
|
||||
if(_options.autoScroll) {
|
||||
if (_options.autoScroll) {
|
||||
logEl.scrollTop = logEl.scrollHeight - logEl.clientHeight;
|
||||
}
|
||||
};
|
||||
@ -56,7 +68,7 @@
|
||||
|
||||
function clear() {
|
||||
if (_options.noUi) {
|
||||
window.parent.clearConsole();
|
||||
mainWindow.clearConsole();
|
||||
return;
|
||||
}
|
||||
logEl.innerHTML = '';
|
||||
@ -79,18 +91,20 @@
|
||||
}
|
||||
|
||||
function setOptions(options) {
|
||||
for(var i in options)
|
||||
if(options.hasOwnProperty(i) && _options.hasOwnProperty(i)) {
|
||||
for (var i in options)
|
||||
if (options.hasOwnProperty(i) && _options.hasOwnProperty(i)) {
|
||||
_options[i] = options[i];
|
||||
}
|
||||
}
|
||||
|
||||
function init(options) {
|
||||
if (isInitialized) { return; }
|
||||
if (isInitialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
isInitialized = true;
|
||||
|
||||
if(options) {
|
||||
if (options) {
|
||||
setOptions(options);
|
||||
}
|
||||
|
||||
@ -175,19 +189,18 @@
|
||||
destroy: checkInitDecorator(destroy)
|
||||
};
|
||||
})();
|
||||
var mainWindow = window.parent.onMessageFromConsole ? window.parent : window.parent.opener;
|
||||
screenLog.init({
|
||||
noUi: true,
|
||||
proxyCallback: function () {
|
||||
proxyCallback: function() {
|
||||
mainWindow.onMessageFromConsole.apply(null, arguments);
|
||||
}
|
||||
});
|
||||
window._wmEvaluate = function _wmEvaluate(expr) {
|
||||
try {
|
||||
var result = eval(expr);
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
mainWindow.onMessageFromConsole.call(null, e);
|
||||
return;
|
||||
}
|
||||
mainWindow.onMessageFromConsole.call(null, result);
|
||||
}
|
||||
};
|
||||
|
||||
@ -40,7 +40,7 @@ window.jsLibs = [
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://unpkg.com/vue@2.4.4/dist/vue.min.js',
|
||||
url: 'https://unpkg.com/vue@2.5.0/dist/vue.min.js',
|
||||
label: 'Vue.js',
|
||||
type: 'js'
|
||||
},
|
||||
@ -70,7 +70,8 @@ window.jsLibs = [
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js',
|
||||
url:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/js/uikit.min.js',
|
||||
label: 'UIkit 3',
|
||||
type: 'js'
|
||||
}
|
||||
@ -97,7 +98,7 @@ window.cssLibs = [
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.min.css',
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css',
|
||||
label: 'Bulma',
|
||||
type: 'css'
|
||||
},
|
||||
@ -113,7 +114,8 @@ window.cssLibs = [
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
url: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css',
|
||||
url:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/css/uikit.min.css',
|
||||
label: 'UIkit 3',
|
||||
type: 'css'
|
||||
},
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "Web Maker",
|
||||
"version": "2.9.2",
|
||||
"version": "2.9.4",
|
||||
"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://semantic-ui.com 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://www.gstatic.com 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.9.1</span></h3>
|
||||
v2.9.4</span></h3>
|
||||
<form name="optionsForm">
|
||||
<label>
|
||||
<input type="checkbox" name="preserveLastCode">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<body>
|
||||
|
||||
<iframe src="about://blank" frameborder="0" id="demo-frame"></iframe>
|
||||
<iframe src="about://blank" frameborder="0" id="demo-frame" allowfullscreen></iframe>
|
||||
|
||||
|
||||
<script src="detached-window.js"></script>
|
||||
|
||||
191
src/script.js
191
src/script.js
@ -1,8 +1,8 @@
|
||||
/* global trackEvent */
|
||||
/* global layoutBtn1, layoutBtn2, layoutBtn3, helpModal, notificationsModal, addLibraryModal,
|
||||
onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, helpBtn, onboardModal, onboardModal,
|
||||
onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, onboardModal, onboardModal,
|
||||
addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal,
|
||||
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
|
||||
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
|
||||
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
|
||||
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
|
||||
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
|
||||
@ -13,7 +13,7 @@ globalConsoleContainerEl
|
||||
(function(alertsService) {
|
||||
/* eslint-enable no-extra-semi */
|
||||
var scope = scope || {};
|
||||
var version = '2.9.1';
|
||||
var version = '2.9.4';
|
||||
|
||||
if (window.DEBUG) {
|
||||
window.scope = scope;
|
||||
@ -137,7 +137,6 @@ globalConsoleContainerEl
|
||||
jsModelLabel = $('#js-js-mode-label'),
|
||||
titleInput = $('#js-title-input'),
|
||||
addLibrarySelect = $('#js-add-library-select'),
|
||||
addLibraryBtn = $('#js-add-library-btn'),
|
||||
externalJsTextarea = $('#js-external-js'),
|
||||
externalCssTextarea = $('#js-external-css');
|
||||
|
||||
@ -146,28 +145,48 @@ globalConsoleContainerEl
|
||||
scope.demoFrameDocument =
|
||||
frame.contentDocument || frame.contentWindow.document;
|
||||
|
||||
// Check all the code wrap if they are minimized or not
|
||||
// Check all the code wrap if they are minimized or maximized
|
||||
function updateCodeWrapCollapseStates() {
|
||||
// This is debounced!
|
||||
clearTimeout(updateCodeWrapCollapseStates.timeout);
|
||||
updateCodeWrapCollapseStates.timeout = setTimeout(function() {
|
||||
const prop = currentLayoutMode === 2 ? 'width' : 'height';
|
||||
[htmlCode, cssCode, jsCode].forEach(function(el) {
|
||||
var bounds = el.getBoundingClientRect();
|
||||
if (bounds[currentLayoutMode === 2 ? 'width' : 'height'] < 100) {
|
||||
const bounds = el.getBoundingClientRect();
|
||||
const size = bounds[prop];
|
||||
if (size < 100) {
|
||||
el.classList.add('is-minimized');
|
||||
} else {
|
||||
el.classList.remove('is-minimized');
|
||||
}
|
||||
if (el.style[prop].indexOf(`100% - ${minCodeWrapSize * 2}px`) !== -1) {
|
||||
el.classList.add('is-maximized');
|
||||
} else {
|
||||
el.classList.remove('is-maximized');
|
||||
}
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function toggleCodeWrapCollapse(codeWrapEl) {
|
||||
if (codeWrapEl.classList.contains('is-minimized')) {
|
||||
if (
|
||||
codeWrapEl.classList.contains('is-minimized') ||
|
||||
codeWrapEl.classList.contains('is-maximized')
|
||||
) {
|
||||
codeWrapEl.classList.remove('is-minimized');
|
||||
codeWrapEl.classList.remove('is-maximized');
|
||||
codeSplitInstance.setSizes([33.3, 33.3, 33.3]);
|
||||
} else {
|
||||
codeSplitInstance.collapse(parseInt(codeWrapEl.dataset.codeWrapId, 10));
|
||||
codeWrapEl.classList.add('is-minimized');
|
||||
const id = parseInt(codeWrapEl.dataset.codeWrapId, 10);
|
||||
var arr = [
|
||||
`${minCodeWrapSize}px`,
|
||||
`${minCodeWrapSize}px`,
|
||||
`${minCodeWrapSize}px`
|
||||
];
|
||||
arr[id] = `calc(100% - ${minCodeWrapSize * 2}px)`;
|
||||
|
||||
codeSplitInstance.setSizes(arr);
|
||||
codeWrapEl.classList.add('is-maximized');
|
||||
}
|
||||
}
|
||||
// Returns the sizes of main code & preview panes.
|
||||
@ -259,6 +278,7 @@ globalConsoleContainerEl
|
||||
utils.log('onExternalLibChange');
|
||||
updateExternalLibUi();
|
||||
scope.setPreviewContent(true);
|
||||
alertsService.add('Libraries updated.');
|
||||
}
|
||||
|
||||
function updateExternalLibUi() {
|
||||
@ -330,9 +350,9 @@ globalConsoleContainerEl
|
||||
var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
|
||||
try {
|
||||
sizes = [
|
||||
+htmlCode.style[dimensionProperty].match(/([\d.]+)%/)[1],
|
||||
+cssCode.style[dimensionProperty].match(/([\d.]+)%/)[1],
|
||||
+jsCode.style[dimensionProperty].match(/([\d.]+)%/)[1]
|
||||
htmlCode.style[dimensionProperty],
|
||||
cssCode.style[dimensionProperty],
|
||||
jsCode.style[dimensionProperty]
|
||||
];
|
||||
} catch (e) {
|
||||
sizes = [33.33, 33.33, 33.33];
|
||||
@ -954,6 +974,7 @@ globalConsoleContainerEl
|
||||
);
|
||||
}, '');
|
||||
var contents =
|
||||
'<!DOCTYPE html>\n' +
|
||||
'<html>\n<head>\n' +
|
||||
'<meta charset="UTF-8" />\n' +
|
||||
externalCss +
|
||||
@ -1064,13 +1085,15 @@ globalConsoleContainerEl
|
||||
// CSP from affecting it.
|
||||
writeFile('script.js', blobjs, function() {
|
||||
writeFile('preview.html', blob, function() {
|
||||
frame.src =
|
||||
const frameSrc =
|
||||
'filesystem:chrome-extension://' +
|
||||
chrome.i18n.getMessage('@@extension_id') +
|
||||
'/temporary/' +
|
||||
'preview.html';
|
||||
if (scope.detachedWindow) {
|
||||
scope.detachedWindow.postMessage(frame.src, '*');
|
||||
} else {
|
||||
frame.src = frameSrc;
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1087,6 +1110,10 @@ globalConsoleContainerEl
|
||||
js: scope.cm.js.getValue()
|
||||
};
|
||||
utils.log('🔎 setPreviewContent', isForced);
|
||||
const targetFrame = scope.detachedWindow
|
||||
? scope.detachedWindow.document.querySelector('iframe')
|
||||
: frame;
|
||||
|
||||
// If just CSS was changed (and everything shudn't be empty),
|
||||
// change the styles inside the iframe.
|
||||
if (
|
||||
@ -1095,8 +1122,8 @@ globalConsoleContainerEl
|
||||
currentCode.js === codeInPreview.js
|
||||
) {
|
||||
computeCss().then(function(css) {
|
||||
if (frame.contentDocument.querySelector('#webmakerstyle')) {
|
||||
frame.contentDocument.querySelector(
|
||||
if (targetFrame.contentDocument.querySelector('#webmakerstyle')) {
|
||||
targetFrame.contentDocument.querySelector(
|
||||
'#webmakerstyle'
|
||||
).textContent = css;
|
||||
}
|
||||
@ -1294,6 +1321,7 @@ globalConsoleContainerEl
|
||||
gutters: ['CodeMirror-foldgutter']
|
||||
});
|
||||
|
||||
// DEPRECATED
|
||||
function openSettings() {
|
||||
scope.toggleModal(settingsModal);
|
||||
|
||||
@ -1328,29 +1356,45 @@ globalConsoleContainerEl
|
||||
};
|
||||
|
||||
scope.exportItems = function exportItems(e) {
|
||||
fetchItems().then(function(items) {
|
||||
var d = new Date();
|
||||
var fileName = [
|
||||
'web-maker-export',
|
||||
d.getFullYear(),
|
||||
d.getMonth() + 1,
|
||||
d.getDate(),
|
||||
d.getHours(),
|
||||
d.getMinutes(),
|
||||
d.getSeconds()
|
||||
].join('-');
|
||||
fileName += '.json';
|
||||
var blob = new Blob([JSON.stringify(items, false, 2)], {
|
||||
type: 'application/json;charset=UTF-8'
|
||||
handleDownloadsPermission().then(() => {
|
||||
fetchItems().then(function(items) {
|
||||
var d = new Date();
|
||||
var fileName = [
|
||||
'web-maker-export',
|
||||
d.getFullYear(),
|
||||
d.getMonth() + 1,
|
||||
d.getDate(),
|
||||
d.getHours(),
|
||||
d.getMinutes(),
|
||||
d.getSeconds()
|
||||
].join('-');
|
||||
fileName += '.json';
|
||||
var blob = new Blob([JSON.stringify(items, false, 2)], {
|
||||
type: 'application/json;charset=UTF-8'
|
||||
});
|
||||
|
||||
chrome.downloads.download(
|
||||
{
|
||||
url: window.URL.createObjectURL(blob),
|
||||
filename: fileName,
|
||||
saveAs: true
|
||||
},
|
||||
function() {
|
||||
// If there was an error, just download the file using ANCHOR method.
|
||||
if (chrome.runtime.lastError) {
|
||||
var a = document.createElement('a');
|
||||
a.href = window.URL.createObjectURL(blob);
|
||||
a.download = fileName;
|
||||
a.style.display = 'none';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
trackEvent('ui', 'exportBtnClicked');
|
||||
});
|
||||
var a = document.createElement('a');
|
||||
a.href = window.URL.createObjectURL(blob);
|
||||
a.download = fileName;
|
||||
a.style.display = 'none';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
trackEvent('ui', 'exportBtnClicked');
|
||||
});
|
||||
e.preventDefault();
|
||||
};
|
||||
@ -1567,12 +1611,14 @@ globalConsoleContainerEl
|
||||
c.width = iframeBounds.width;
|
||||
c.height = iframeBounds.height;
|
||||
var ctx = c.getContext('2d');
|
||||
var devicePixelRatio = window.devicePixelRatio || 1;
|
||||
|
||||
ctx.drawImage(
|
||||
image,
|
||||
iframeBounds.left,
|
||||
iframeBounds.top,
|
||||
iframeBounds.width,
|
||||
iframeBounds.height,
|
||||
iframeBounds.left * devicePixelRatio,
|
||||
iframeBounds.top * devicePixelRatio,
|
||||
iframeBounds.width * devicePixelRatio,
|
||||
iframeBounds.height * devicePixelRatio,
|
||||
0,
|
||||
0,
|
||||
iframeBounds.width,
|
||||
@ -1814,13 +1860,17 @@ globalConsoleContainerEl
|
||||
'script $1:$2'
|
||||
);
|
||||
}
|
||||
scope.consoleCm.replaceRange(
|
||||
arg +
|
||||
' ' +
|
||||
((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
|
||||
'\n',
|
||||
{ line: Infinity }
|
||||
);
|
||||
try {
|
||||
scope.consoleCm.replaceRange(
|
||||
arg +
|
||||
' ' +
|
||||
((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
|
||||
'\n',
|
||||
{ line: Infinity }
|
||||
);
|
||||
} catch (e) {
|
||||
scope.consoleCm.replaceRange('🌀\n', { line: Infinity });
|
||||
}
|
||||
scope.consoleCm.scrollTo(0, Infinity);
|
||||
logCount++;
|
||||
});
|
||||
@ -1843,6 +1893,18 @@ globalConsoleContainerEl
|
||||
attachListenerForEvent('input');
|
||||
attachListenerForEvent('keyup');
|
||||
|
||||
// Compile d-open-modal directive
|
||||
const modalTriggers = $all(`[d-open-modal]`);
|
||||
modalTriggers.forEach(function(el) {
|
||||
utils.onButtonClick(el, function() {
|
||||
scope.toggleModal(window[el.getAttribute('d-open-modal')]);
|
||||
trackEvent(
|
||||
el.getAttribute('data-event-category'),
|
||||
el.getAttribute('data-event-action')
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Compile d-html directive
|
||||
const dHtmlNodes = $all(`[d-html]`);
|
||||
dHtmlNodes.forEach(function(el) {
|
||||
@ -1885,6 +1947,8 @@ globalConsoleContainerEl
|
||||
document.body.classList.remove('is-detached-mode');
|
||||
$('#js-demo-side').insertBefore(consoleEl, null);
|
||||
scope.detachedWindow = null;
|
||||
// Update main frame preview
|
||||
scope.setPreviewContent(true);
|
||||
}
|
||||
}
|
||||
var intervalID = window.setInterval(checkWindow, 500);
|
||||
@ -1900,6 +1964,11 @@ globalConsoleContainerEl
|
||||
trackEvent('ui', 'cssSettingsBtnClick');
|
||||
};
|
||||
|
||||
scope.onModalCloseBtnClick = function(e) {
|
||||
closeAllOverlays();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
function init() {
|
||||
var lastCode;
|
||||
|
||||
@ -1918,15 +1987,6 @@ globalConsoleContainerEl
|
||||
layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
|
||||
layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
|
||||
|
||||
utils.onButtonClick(helpBtn, function() {
|
||||
scope.toggleModal(helpModal);
|
||||
trackEvent('ui', 'helpButtonClick');
|
||||
});
|
||||
utils.onButtonClick(addLibraryBtn, function() {
|
||||
scope.toggleModal(addLibraryModal);
|
||||
trackEvent('ui', 'addLibraryButtonClick');
|
||||
});
|
||||
|
||||
notificationsBtn.addEventListener('click', function() {
|
||||
scope.toggleModal(notificationsModal);
|
||||
|
||||
@ -2136,10 +2196,10 @@ globalConsoleContainerEl
|
||||
});
|
||||
|
||||
window.addEventListener('click', function(e) {
|
||||
if (
|
||||
typeof e.target.className === 'string' &&
|
||||
e.target.className.indexOf('modal-overlay') !== -1
|
||||
) {
|
||||
if (typeof e.target.className !== 'string') {
|
||||
return;
|
||||
}
|
||||
if (e.target.className.indexOf('modal-overlay') !== -1) {
|
||||
closeAllOverlays();
|
||||
}
|
||||
});
|
||||
@ -2156,11 +2216,6 @@ globalConsoleContainerEl
|
||||
}
|
||||
});
|
||||
|
||||
utils.onButtonClick(settingsBtn, function() {
|
||||
openSettings();
|
||||
trackEvent('ui', 'settingsBtnClick');
|
||||
});
|
||||
|
||||
// Initialize add library select box
|
||||
var libOptions = window.jsLibs.reduce(
|
||||
(html, lib) =>
|
||||
@ -2264,7 +2319,7 @@ globalConsoleContainerEl
|
||||
refreshEditor();
|
||||
});
|
||||
} else {
|
||||
utils.log('Load last unsaved item');
|
||||
utils.log('Load last unsaved item', lastCode);
|
||||
currentItem = lastCode;
|
||||
refreshEditor();
|
||||
}
|
||||
|
||||
@ -234,11 +234,14 @@ body:not(.light-version).overlay-visible .main-container {
|
||||
height: 18px;
|
||||
}
|
||||
.code-wrap__collapse-btn:before {
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>');
|
||||
}
|
||||
.is-minimized .code-wrap__collapse-btn:before {
|
||||
|
||||
/* maximize icon */
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>');
|
||||
}
|
||||
.is-maximized .code-wrap__collapse-btn:before {
|
||||
/* minimize icon */
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>');
|
||||
}
|
||||
@keyframes pop-in {
|
||||
from { transform: scale(0.9); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
@ -309,7 +312,7 @@ body > #demo-frame {
|
||||
/*line-height: 20px;*/
|
||||
}
|
||||
.footer {
|
||||
z-index: 1;
|
||||
z-index: 6; // Because .console is 6
|
||||
}
|
||||
.main-header {
|
||||
display: flex;
|
||||
@ -438,6 +441,20 @@ body > #demo-frame {
|
||||
margin-left: -45vw;
|
||||
}
|
||||
}
|
||||
.modal__close-btn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
opacity: 0.3;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.modal__close-btn > svg {
|
||||
fill: black;
|
||||
width:30px; height:30px;
|
||||
}
|
||||
.modal__close-btn:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.modal__content {
|
||||
background: #fdfdfd;
|
||||
color: #444;
|
||||
@ -882,7 +899,7 @@ body > #demo-frame {
|
||||
}
|
||||
.console {
|
||||
background: var(--color-bg);
|
||||
z-index: 1; /* bring above iframe */
|
||||
z-index: 6; /* bring above iframe & codemirror and also scrollbar in codemirror */
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
min-height: 80px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user