mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-06-11 04:00:54 +02:00
Code Issues Releases Wiki Activity

Merge pull request #132 from chinchang/release-2.7

Browse Source 
Release 2.7
This commit is contained in:
Kushagra Gour
2017-05-31 03:07:51 +05:30
committed by GitHub
parent e82050bb82 d02aa5d5af
commit 9b09685aff
8 changed files with 179 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/FiraCode.ttf Normal file
View File

Binary file not shown.

BIN
src/Fixedsys.ttf Normal file
View File

Binary file not shown.

0
src/Inconsolata-Regular.ttf → src/Inconsolata.ttf
View File

BIN
src/Monoid.ttf Normal file
View File

Binary file not shown.

88
src/index.html
View File

@ -11,6 +11,30 @@
<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">
<style id="fontStyleTemplate" type="template">
@font-face {
font-family: 'fontname';
font-style: normal;
font-weight: 400;
src: url(../fontname.ttf) format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.Codemirror pre {
font-family: 'fontname', monospace;
}
</style>
<style type="text/css" id="fontStyleTag">
@font-face {
font-family: 'FiraCode';
font-style: normal;
font-weight: 400;
src: url(../FiraCode.ttf) format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.Codemirror pre {
font-family: 'FiraCode', monospace;
}
</style>
</head> </head>
<body> <body>
@ -282,9 +306,23 @@
<h2 style="text-decoration: underline;">Choose one:</h2> <h2 style="text-decoration: underline;">Choose one:</h2>
<div class="onboard-selection-wrap flex"> <div class="onboard-selection-wrap flex">
<div class="onboard-selection selected" id="onboardDontShowInTabOptionBtn" d-click="onDontShowInTabClicked">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150" viewBox="180 200 340 320" xml:space="preserve">
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
C494.264,234.442,503.916,244.094,503.916,256z"></path>
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
<rect width="200px" height="20px" rx="5" ry="5" x="250" y="365px" style="fill:#f3f3f3;"></rect>
</svg>
<div class="onboard-selection-text">Don't show in new tab</div>
</div>
<div style="opacity:0.7;">OR</div>
<div class="onboard-selection" id="onboardShowInTabOptionBtn" d-click="onShowInTabClicked"> <div class="onboard-selection" id="onboardShowInTabOptionBtn" d-click="onShowInTabClicked">
<!-- Awesome free vector from freepik.com --> <!-- Awesome free vector from freepik.com -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" viewBox="180 200 340 320" xml:space="preserve"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150" viewBox="180 200 340 320" xml:space="preserve">
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474 <path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
C494.264,234.442,503.916,244.094,503.916,256z"></path> C494.264,234.442,503.916,244.094,503.916,256z"></path>
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884 <path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
@ -295,26 +333,16 @@
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="430px" style="fill:rgba(0,0,0,0.25);"></rect> <rect width="120px" height="50px" rx="5" ry="5" x="210" y="430px" style="fill:rgba(0,0,0,0.25);"></rect>
<rect width="140px" height="165px" rx="5" ry="5" x="345" y="315px" style="fill:#f3f3f3;"></rect> <rect width="140px" height="165px" rx="5" ry="5" x="345" y="315px" style="fill:#f3f3f3;"></rect>
</svg> </svg>
<div class="onboard-selection-text">Show in new tab</div> <div class="onboard-selection-text">Show in every new tab</div>
</div>
<div style="opacity:0.7;">OR</div>
<div class="onboard-selection selected" id="onboardDontShowInTabOptionBtn" d-click="onDontShowInTabClicked">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" viewBox="180 200 340 320" xml:space="preserve">
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
C494.264,234.442,503.916,244.094,503.916,256z"></path>
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
<rect width="200px" height="20px" rx="5" ry="5" x="250" y="365px" style="fill:#f3f3f3;"></rect>
</svg>
<div class="onboard-selection-text">Don't show in new tab</div>
</div> </div>
</div> </div>
<p> <p>
You can change this later from Settings (<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888" viewBox="0 0 24 24"><use xlink:href="#settings-icon"></use></svg>) in bottom right of the app. You can change this later from Settings (<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888" viewBox="0 0 24 24"><use xlink:href="#settings-icon"></use></svg>) in bottom right of the app.
</p> </p>
<p>
Also, follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming features!
</p>
<p class="tac"> <p class="tac">
<button class="btn" d-click="closeAllOverlays">Lets start!</button> <button class="btn" d-click="closeAllOverlays">Lets start!</button>
@ -323,7 +351,7 @@
</div> </div>
</div> </div>
<div class="modal" id="settingsModal"> <div class="modal modal--settings" id="settingsModal">
<div class="modal__content"> <div class="modal__content">
<h1>Settings</h1> <h1>Settings</h1>
@ -370,6 +398,7 @@
<option value="sass">SASS</option> <option value="sass">SASS</option>
<option value="less">LESS</option> <option value="less">LESS</option>
<option value="stylus">Stylus</option> <option value="stylus">Stylus</option>
<option value="acss">Atomic CSS</option>
</select> </select>
<select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting"> <select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting">
<option value="js">JS</option> <option value="js">JS</option>
@ -382,6 +411,15 @@
Theme Theme
<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select> <select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
</label> </label>
<label class="line">
Font
<select style="flex:1;margin:0 20px" data-setting="editorFont" d-change="updateSetting">
<option value="FiraCode">Fira Code</option>
<option value="Inconsolata">Inconsolata</option>
<option value="Monoid">Monoid</option>
<option value="FixedSys">FixedSys</option>
</select>
</label>
<label class="line"> <label class="line">
Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
@ -422,15 +460,27 @@
<div class="modal" id="notificationsModal"> <div class="modal" id="notificationsModal">
<div class="modal__content"> <div class="modal__content">
<h1>Whats new?</h1> <h1>Whats new?</h1>
<div class="notification">
<span class="notification__version">2.7.0</span>
<ul>
<li><strong>Fork any creation!</strong>: Now you can fork any existing creation of yours to start a new work based on it. One big use case of this feature is "Templates"! <a href="https://kushagragour.in/blog/2017/05/web-maker-fork-templates/?utm_source=webmakerapp&utm_medium=referral">Read more about it</a>.</li>
<li><strong>Fonts 😍 </strong>: Super-awesome 4 fonts (mostly with ligature support) now available to choose from. Fira Code is the default font now.</li>
<li>Updated most used external libraries to latest versions.</li>
<li><strong>Bugfix</strong>: Add missing Bootstrap JS file to most used external libraries list.</li>
<li>Several other minor bugfixes and improvements to make Web Maker awesome!</li>
<li>Great news to share with you - Web Maker has been featured on the Chrome Webstore homepage! Thanks for all the love :)</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>.</li>
</ul>
</div>
<div class="notification"> <div class="notification">
<span class="notification__version">2.6.1</span> <span class="notification__version">2.6.1</span>
<ul> <ul>
<li><strong>Bugfix</strong>: Emojis vanishing while exporting to Codepen has been fixed.</li> <li><strong>Bugfix</strong>: Emojis vanishing while exporting to Codepen has been fixed.</li>
<li><strong>Bugfix</strong>: <code>console.clear()</code> now doesn't error and clears the inbuilt console.</li> <li><strong>Bugfix</strong>: <code>console.clear()</code> now doesn't error and clears the inbuilt console.</li>
<li><strong>Bugfix</strong>: External libraries added to the creation are exported as well to Codepen.</li> <li><strong>Bugfix</strong>: External libraries added to the creation are exported as well to Codepen.</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>.</li>
</ul> </ul>
</div> </div>

24
src/library-list.js
View File

@ -1,16 +1,20 @@
window.jsLibs = [ window.jsLibs = [
{ url: 'https://code.jquery.com/jquery-3.1.1.min.js', label: 'jQuery', type: 'js' }, { url: 'https://code.jquery.com/jquery-3.1.1.min.js', label: 'jQuery', type: 'js' },
{ url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js', label: 'Angular', type: 'js' }, { url: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js', label: 'Angular', type: 'js' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js', label: 'React', type: 'js' }, { url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js', label: 'React', type: 'js' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js', label: 'React DOM', type: 'js' }, { url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js', label: 'React DOM', type: 'js' },
{ url: 'https://unpkg.com/vue@2.1.3/dist/vue.min.js', label: 'Vue.js', type: 'js' }, { url: 'https://unpkg.com/vue@2.3.3/dist/vue.min.js', label: 'Vue.js', type: 'js' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js', label: 'Three.js', type: 'js' }, { url: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r85/three.min.js', label: 'Three.js', type: 'js' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js', label: 'D3', type: 'js' }, { url: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js', label: 'D3', type: 'js' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js', label: 'Underscore', type: 'js' }, { url: 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js', label: 'Underscore', type: 'js' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js', label: 'Greensock TweenMax', type: 'js' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/js/uikit.min.js', label: 'UIkit', type: 'js' },
] ]
window.cssLibs = [ window.cssLibs = [
{ url: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', label: 'Bootstrap', type: 'css' }, { url: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', label: 'Bootstrap', type: 'css' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css', label: 'Foundation', type: 'css' }, { url: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/foundation.min.css', label: 'Foundation', type: 'css' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.5.0/hint.min.css', label: 'Hint.css', type: 'css' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/uikit.min.css', label: 'UIkit', type: 'css' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', label: 'Animate.css', type: 'css' }, { url: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', label: 'Animate.css', type: 'css' },
{ url: 'https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.4.1/hint.min.css', label: 'Hint.css', type: 'css' } { url: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', label: 'FontAwesome', type: 'css' },
] ]

63
src/script.js
View File

@ -5,7 +5,7 @@ addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notifica
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn, notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag, onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl, onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate
*/ */
/* eslint-disable no-extra-semi */ /* eslint-disable no-extra-semi */
;(function (alertsService) { ;(function (alertsService) {
@ -315,7 +315,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
}); });
items.forEach(function (item) { items.forEach(function (item) {
html += '<div class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">' html += '<div class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">'
+ '<a class="js-saved-item-tile__close-btn saved-item-tile__close-btn hint--left" aria-label="Remove">X</a>' + '<div class="saved-item-tile__btns"><a class="js-saved-item-tile__fork-btn saved-item-tile__btn hint--left hint--medium" aria-label="Creates a duplicate of this creation (Ctrl/⌘ + F)">Fork<span class="show-when-selected">(Ctrl/⌘ + F)</span></a><a class="js-saved-item-tile__remove-btn saved-item-tile__btn hint--left" aria-label="Remove">X</a></div>'
+ '<h3 class="saved-item-tile__title">' + item.title + '</h3><span class="saved-item-tile__meta">Last updated: ' + utils.getHumanDate(item.updatedOn) + '</span></div>'; + '<h3 class="saved-item-tile__title">' + item.title + '</h3><span class="saved-item-tile__meta">Last updated: ' + utils.getHumanDate(item.updatedOn) + '</span></div>';
}); });
savedItemCountEl.textContent = '(' + items.length + ')'; savedItemCountEl.textContent = '(' + items.length + ')';
@ -396,6 +396,21 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
unsavedEditCount = 0; unsavedEditCount = 0;
saveBtn.classList.remove('is-marked'); saveBtn.classList.remove('is-marked');
} }
// Creates a new item with passed item's contents
function forkItem(sourceItem) {
if (unsavedEditCount) {
var shouldDiscard = confirm('You have unsaved changes in your current work. Do you want to discard unsaved changes and continue?');
if (!shouldDiscard) { return; }
}
const fork = JSON.parse(JSON.stringify(sourceItem));
delete fork.id;
fork.title = '(Forked) ' + sourceItem.title;
fork.updatedOn = Date.now();
setCurrentItem(fork);
refreshEditor();
alertsService.add(`"${sourceItem.title}" was forked`);
trackEvent('fn', 'itemForked');
}
function createNewItem() { function createNewItem() {
var d = new Date(); var d = new Date();
setCurrentItem({ setCurrentItem({
@ -757,6 +772,14 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
function errorHandler() { function errorHandler() {
utils.log(arguments); utils.log(arguments);
trackEvent('fn', 'error', 'writeFile'); trackEvent('fn', 'error', 'writeFile');
// When there are too many write errors, show a message.
writeFile.errorCount = (writeFile.errorCount || 0) + 1;
if (writeFile.errorCount === 10) {
setTimeout(function () {
alert('Oops! Seems like your preview isn\'t updating. Please try the following steps until it fixes:\n - Refresh Web Maker\n - Restart Chrome browser\n - Reinstall Web Maker (don\'t forget to export all your creations from saved items pane (click the OPEN button) before reinstalling)\n\nIf nothing works, please tweet out to @webmakerApp.');
trackEvent('ui', 'writeFileMessageSeen');
}, 1000)
}
} }
// utils.log('writing file ', name); // utils.log('writing file ', name);
@ -1224,6 +1247,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
$('[data-setting=fontSize]').value = prefs.fontSize || 16; $('[data-setting=fontSize]').value = prefs.fontSize || 16;
$('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize; $('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize;
$('[data-setting=autoPreview]').checked = prefs.autoPreview; $('[data-setting=autoPreview]').checked = prefs.autoPreview;
$('[data-setting=editorFont]').value = prefs.editorFont;
} }
/** /**
@ -1255,18 +1279,19 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
// Update indentation count when slider is updated // Update indentation count when slider is updated
indentationSizeValueEl.textContent = $('[data-setting=indentSize]').value; indentationSizeValueEl.textContent = $('[data-setting=indentSize]').value;
// Replace correct css file in LINK tags's href
editorThemeLinkTag.href = '/lib/codemirror/theme/' + prefs.editorTheme + '.css';
fontStyleTag.textContent = fontStyleTemplate.textContent.replace(/fontname/g, prefs.editorFont || 'FiraCode');
['html', 'js', 'css'].forEach((type) => { ['html', 'js', 'css'].forEach((type) => {
scope.cm[type].setOption( scope.cm[type].setOption(
'indentWithTabs', 'indentWithTabs',
$('[data-setting=indentWith]:checked').value !== 'spaces' $('[data-setting=indentWith]:checked').value !== 'spaces'
); );
scope.cm[type].setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2, shake: false } : false); scope.cm[type].setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2, shake: false } : false);
scope.cm[type].setOption('indentUnit', +$('[data-setting=indentSize]').value); scope.cm[type].setOption('indentUnit', +$('[data-setting=indentSize]').value);
scope.cm[type].setOption('tabSize', +$('[data-setting=indentSize]').value); scope.cm[type].setOption('tabSize', +$('[data-setting=indentSize]').value);
scope.cm[type].setOption('theme', $('[data-setting=editorTheme]').value); scope.cm[type].setOption('theme', $('[data-setting=editorTheme]').value);
// Replace correct css file in LINK tags's href
editorThemeLinkTag.href = '/lib/codemirror/theme/' + prefs.editorTheme + '.css';
scope.cm[type].setOption('keyMap', $('[data-setting=keymap]:checked').value); scope.cm[type].setOption('keyMap', $('[data-setting=keymap]:checked').value);
scope.cm[type].refresh(); scope.cm[type].refresh();
@ -1458,14 +1483,20 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
utils.onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane); utils.onButtonClick(savedItemsPaneCloseBtn, toggleSavedItemsPane);
utils.onButtonClick(savedItemsPane, function (e) { utils.onButtonClick(savedItemsPane, function (e) {
// TODO: warn about unsaved changes in current item
if (e.target.classList.contains('js-saved-item-tile')) { if (e.target.classList.contains('js-saved-item-tile')) {
setTimeout(function () { setTimeout(function () {
openItem(e.target.dataset.itemId); openItem(e.target.dataset.itemId);
}, 350); }, 350);
toggleSavedItemsPane(); toggleSavedItemsPane();
} }
if (e.target.classList.contains('js-saved-item-tile__close-btn')) { if (e.target.classList.contains('js-saved-item-tile__remove-btn')) {
removeItem(e.target.parentElement.dataset.itemId); removeItem(e.target.parentElement.parentElement.dataset.itemId);
} else if (e.target.classList.contains('js-saved-item-tile__fork-btn')) {
toggleSavedItemsPane();
setTimeout(function () {
forkItem(savedItems[e.target.parentElement.parentElement.dataset.itemId]);
}, 350);
} }
}); });
@ -1518,6 +1549,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
// Editor keyboard shortucuts // Editor keyboard shortucuts
window.addEventListener('keydown', function (event) { window.addEventListener('keydown', function (event) {
var selectedItemElement; var selectedItemElement;
// TODO: refactor common listener code
// Ctrl/⌘ + S // Ctrl/⌘ + S
if ((event.ctrlKey || event.metaKey) && (event.keyCode === 83)) { if ((event.ctrlKey || event.metaKey) && (event.keyCode === 83)) {
event.preventDefault(); event.preventDefault();
@ -1527,7 +1559,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
// Ctrl/⌘ + Shift + 5 // Ctrl/⌘ + Shift + 5
if (!prefs.autoPreview && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.keyCode === 53)) { if (!prefs.autoPreview && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.keyCode === 53)) {
event.preventDefault(); event.preventDefault();
scope.setPreviewContent(); scope.setPreviewContent(true);
trackEvent('ui', 'previewKeyboardShortcut'); trackEvent('ui', 'previewKeyboardShortcut');
} }
// Ctrl/⌘ + O // Ctrl/⌘ + O
@ -1572,6 +1604,17 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
}, 350); }, 350);
toggleSavedItemsPane(); toggleSavedItemsPane();
} }
// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
if (isSavedItemsPaneOpen && (event.ctrlKey || event.metaKey) && (event.keyCode === 70)) {
event.preventDefault();
selectedItemElement = $('.js-saved-item-tile.selected');
setTimeout(function () {
forkItem(savedItems[selectedItemElement.dataset.itemId]);
}, 350);
toggleSavedItemsPane();
trackEvent('ui', 'forkKeyboardShortcut');
}
}); });
window.addEventListener('click', function(e) { window.addEventListener('click', function(e) {
@ -1660,7 +1703,8 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
keymap: 'sublime', keymap: 'sublime',
fontSize: 16, fontSize: 16,
refreshOnResize: false, refreshOnResize: false,
autoPreview: true autoPreview: true,
editorFont: 'FiraCode'
}, function syncGetCallback(result) { }, function syncGetCallback(result) {
if (result.preserveLastCode && lastCode) { if (result.preserveLastCode && lastCode) {
unsavedEditCount = 0; unsavedEditCount = 0;
@ -1691,6 +1735,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
prefs.fontSize = result.fontSize; prefs.fontSize = result.fontSize;
prefs.refreshOnResize = result.refreshOnResize; prefs.refreshOnResize = result.refreshOnResize;
prefs.autoPreview = result.autoPreview; prefs.autoPreview = result.autoPreview;
prefs.editorFont = result.editorFont;
updateSettingsInUi(); updateSettingsInUi();
scope.updateSetting(); scope.updateSetting();

63
src/style.css
View File

@ -1,10 +1,3 @@
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: local('Inconsolata'), url(../Inconsolata-Regular.ttf) format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
:root { :root {
--color-bg: #252637; --color-bg: #252637;
--color-sidebar: #3A2B63; --color-sidebar: #3A2B63;
@ -17,7 +10,7 @@ body {
background: var(--color-bg); background: var(--color-bg);
color: rgba(255,255,255,0.9); color: rgba(255,255,255,0.9);
min-height: 100vh; min-height: 100vh;
font-family: Helvetica, arial; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
} }
h1 { h1 {
margin-top: 0; margin-top: 0;
@ -101,6 +94,10 @@ select, input[type="text"], input[type="number"], textarea {
content: '★'; content: '★';
color: #eee333; color: #eee333;
} }
/* used to show keyboard specific content when something is keyboard focused */
.show-when-selected { display: none; }
.selected .show-when-selected { display: inline-block; }
.main-container { .main-container {
position: absolute; position: absolute;
left: 0; right: 0; left: 0; right: 0;
@ -236,7 +233,7 @@ select, input[type="text"], input[type="number"], textarea {
height: calc(100%); height: calc(100%);
} }
.Codemirror pre { .Codemirror pre {
font-family: 'Inconsolata', monospace; font-variant-ligatures: contextual;
} }
.cm-s-monokai .CodeMirror-linenumber { .cm-s-monokai .CodeMirror-linenumber {
color:rgba(255,255,255,0.2); color:rgba(255,255,255,0.2);
@ -451,12 +448,19 @@ li.CodeMirror-hint-active {
background: rgba(0,0,0,0.6); background: rgba(0,0,0,0.6);
transition: all 0.3s; transition: all 0.3s;
} }
/* Make settings modal smaller */
@media screen and (min-width: 600px) {
.modal--settings {
width: 600px;
margin-left: -300px;
}
}
.saved-items-pane { .saved-items-pane {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 400px; width: 450px;
padding: 20px 30px; padding: 20px 30px;
z-index: 6; z-index: 6;
background-color: var(--color-sidebar); background-color: var(--color-sidebar);
@ -535,17 +539,29 @@ li.CodeMirror-hint-active {
.saved-item-tile.selected { .saved-item-tile.selected {
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
} }
.saved-item-tile__close-btn { .saved-item-tile__btns {
padding: 7px 10px;
position: absolute; position: absolute;
right: 8px;
top: 6px; top: 6px;
z-index: 1; z-index: 1;
color: rgba(255,255,255,0.3); right: 8px;
border-radius: 50%; opacity: 0;
background: rgba(255,255,255,0.05); pointer-events: none;
transition: 0.25s ease;
} }
.saved-item-tile__close-btn:hover { .saved-item-tile.selected .saved-item-tile__btns,
.saved-item-tile:hover .saved-item-tile__btns {
opacity: 1;
pointer-events: auto;
}
.saved-item-tile__btn {
padding: 7px 10px;
color: rgba(255,255,255,0.3);
border-radius: 20px;
margin-left: 2px;
background: rgba(255,255,255,0.05);
text-transform: uppercase;
}
.saved-item-tile__btn:hover {
background: rgba(255,255,255,0.8); background: rgba(255,255,255,0.8);
color: #555; color: #555;
} }
@ -693,16 +709,21 @@ li.CodeMirror-hint-active {
position: fixed; position: fixed;
will-change: transform; will-change: transform;
left: 50%; left: 50%;
top: 0; top: -5px;
padding: 10px; padding: 10px;
background: var(--color-sidebar); background: white;
border: 1px solid #eee;
color: #333;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
/*color: #333;*/
font-size: 1rem;
border-radius: 3px; border-radius: 3px;
z-index: 6; z-index: 6;
transform: translateY(-100%); transform: translateX(-50%) translateY(-100%);
transition: 0.3s ease; transition: 0.3s ease;
} }
.alerts-container.is-active { .alerts-container.is-active {
transform: translateY(0); transform: translateX(-50%) translateY(0);
} }
.error-gutter { .error-gutter {