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

make auto preview a configurable setting. fixes #60

Browse Source
This commit is contained in:
Kushagra Gour 2017-04-29 11:52:17 +05:30
parent 40c4cc7209
commit 659588d580
3 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/index.html
View File

@ -17,6 +17,12 @@
<div class="main-container">
<div class="main-header">
<div class="main-header__btn-wrap fr flex flex-v-center">
<a id="runBtn" class="hide flex flex-v-center hint--rounded hint--bottom-left" aria-label="Run preview (Ctrl/⌘ + Shift + 5)" d-click="setPreviewContent">
<svg style="width: 14px; height: 14px;">
<use xlink:href="#play-icon"></use>
</svg>Run
</a>
<a id="js-add-library-btn" class="fleex-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>
@ -370,6 +376,9 @@
<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="autoPreview"> Auto-preview
</label>
<label class="line">
<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
</label>
@ -551,6 +560,11 @@
<symbol id="heart-icon" viewBox="0 0 24 24">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
</symbol>
<symbol id="play-icon" viewBox="0 0 24 24">
<svg>
<path d="M8,5.14V19.14L19,12.14L8,5.14Z" />
</svg>
</symbol>
</svg>
<script src="lib/codemirror/lib/codemirror.js"></script>

22
src/script.js
View File

@ -4,7 +4,9 @@ onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, helpBtn, onboardMo
addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal,
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl */
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn
*/
/* eslint-disable no-extra-semi */
;(function (alertsService) {
@ -897,7 +899,9 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
// This is done so that multiple simultaneous setValue don't trigger too many preview refreshes
// and in turn too many file writes on a single file (eg. preview.html).
if (change.origin !== 'setValue') {
scope.setPreviewContent();
if (prefs.autoPreview !== false) {
scope.setPreviewContent();
}
saveBtn.classList.add('is-marked');
unsavedEditCount += 1;
@ -1186,6 +1190,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
$('[data-setting=keymap][value=' + (prefs.keymap || 'sublime') + ']').checked = true;
$('[data-setting=fontSize]').value = prefs.fontSize || 16;
$('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize;
$('[data-setting=autoPreview]').checked = prefs.autoPreview;
}
/**
@ -1206,6 +1211,9 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
trackEvent('ui', 'updatePref-' + settingName, prefs[settingName]);
}
// Show/hide RUN button based on autoPreview setting.
runBtn.classList[prefs.autoPreview ? 'add' : 'remove']('hide');
htmlCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
cssCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
jsCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
@ -1407,6 +1415,12 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
saveItem();
trackEvent('ui', 'saveItemKeyboardShortcut');
}
// Ctrl/⌘ + Shift + 5
if (!prefs.autoPreview && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.keyCode === 53)) {
event.preventDefault();
scope.setPreviewContent();
trackEvent('ui', 'previewKeyboardShortcut');
}
// Ctrl/⌘ + O
else if ((event.ctrlKey || event.metaKey) && (event.keyCode === 79)) {
event.preventDefault();
@ -1507,7 +1521,8 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
editorTheme: 'monokai',
keymap: 'sublime',
fontSize: 16,
refreshOnResize: false
refreshOnResize: false,
autoPreview: true
}, function syncGetCallback(result) {
if (result.preserveLastCode && lastCode) {
unsavedEditCount = 0;
@ -1537,6 +1552,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
prefs.keymap = result.keymap;
prefs.fontSize = result.fontSize;
prefs.refreshOnResize = result.refreshOnResize;
prefs.autoPreview = result.autoPreview;
updateSettingsInUi();
scope.updateSetting();

1
src/style.css
View File

@ -25,6 +25,7 @@ h1 {
a { text-decoration: none; color: crimson; cursor: pointer; }
/*a:hover { text-decoration: underline; }*/
.hide { display: none!important; }
.flex { display: flex; }
.flex-grow { flex-grow: 1; }
.flex-v-center { align-items: center; }