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

add console resizing, count and bugfixes

Browse Source
This commit is contained in:
Kushagra Gour
2017-05-08 11:18:25 +05:30
parent ba055a0b92
commit 1e239a424f
3 changed files with 49 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.html
View File

@ -104,7 +104,7 @@
<div id="consoleEl" class="console is-minimize">
<div id="consoleLogEl" class="console__log" class="code">
<div class="js-console__header code-wrap__header" title="Double click to toggle console">
<span class="code-wrap__header-label">Console</span>
<span class="code-wrap__header-label">Console (<span id="logCountEl">0</span>)</span>
<div class="code-wrap__header-right-options">
<a class="code-wrap__header-btn" title="Clear console (CTRL + L)" d-click="clearConsole">
<svg>
@ -120,7 +120,7 @@
<svg width="18" height="18" fill="#346fd2">
<use xlink:href="#chevron-icon"></use>
</svg>
<input d-keyup="evalConsoleExpr" style="padding:5px;font-size:1.3em;flex:1;background: black; color: white; border:0;outline:0;">
<input d-keyup="evalConsoleExpr" class="console-exec-input">
</div>
</div>
</div>

32
src/script.js
View File

@ -5,7 +5,7 @@ addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notifica
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
*/
/* eslint-disable no-extra-semi */
;(function (alertsService) {
@ -71,6 +71,7 @@ runBtn, searchInput, consoleEl, consoleLogEl
, codeInPreview = { html: null, css: null, js: null }
, isSavedItemsPaneOpen = false
, editorWithFocus
, logCount = 0
// DOM nodes
, frame = $('#demo-frame')
@ -460,11 +461,12 @@ runBtn, searchInput, consoleEl, consoleLogEl
scope.cm.html.setValue(currentItem.html);
scope.cm.css.setValue(currentItem.css);
scope.cm.js.setValue(currentItem.js);
scope.consoleCm.setValue('');
scope.cm.html.refresh();
scope.cm.css.refresh();
scope.cm.js.refresh();
scope.clearConsole();
// To have the library count updated
updateExternalLibUi();
@ -1318,6 +1320,8 @@ runBtn, searchInput, consoleEl, consoleLogEl
};
scope.clearConsole = function () {
scope.consoleCm.setValue('');
logCount = 0;
logCountEl.textContent = logCount;
};
scope.evalConsoleExpr = function (e) {
// Clear console on CTRL + L
@ -1334,9 +1338,11 @@ runBtn, searchInput, consoleEl, consoleLogEl
if (arg && arg.indexOf && arg.indexOf('filesystem:chrome-extension') !== -1) {
arg = arg.replace(/filesystem:chrome-extension.*\.js:(\d+):*(\d*)/g, 'script $1:$2');
}
scope.consoleCm.replaceRange('\n' + arg + ' ' + ((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : ''), { line: Infinity });
scope.consoleCm.replaceRange(arg + ' ' + ((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') + '\n', { line: Infinity });
scope.consoleCm.scrollTo(0, Infinity);
logCount++;
});
logCountEl.textContent = logCount;
};
function compileNodes() {
@ -1490,6 +1496,7 @@ runBtn, searchInput, consoleEl, consoleLogEl
});
});
// Editor keyboard shortucuts
window.addEventListener('keydown', function (event) {
var selectedItemElement;
// Ctrl/⌘ + S
@ -1591,6 +1598,25 @@ runBtn, searchInput, consoleEl, consoleLogEl
new TextareaAutoComplete(externalJsTextarea, (obj) => obj.latest.match(/\.js$/));
new TextareaAutoComplete(externalCssTextarea, (obj) => obj.latest.match(/\.css$/));
var consoleHeaderDragStartY;
var consoleInitialHeight;
function onConsoleHeaderDrag(e) {
consoleEl.style.height = (consoleInitialHeight + consoleHeaderDragStartY - e.pageY) + 'px';
utils.log(e.pageY, consoleHeaderDragStartY)
}
$('.js-console__header').addEventListener('mousedown', (e) => {
consoleHeaderDragStartY = e.pageY;
consoleInitialHeight = consoleEl.getBoundingClientRect().height;
$('#demo-frame').style.pointerEvents = 'none';
window.addEventListener('mousemove', onConsoleHeaderDrag);
utils.log('added')
});
$('.js-console__header').addEventListener('mouseup', () => {
window.removeEventListener('mousemove', onConsoleHeaderDrag);
$('#demo-frame').style.pointerEvents = 'auto';
utils.log('removed')
});
chrome.storage.local.get({
layoutMode: 1,
code: ''

20
src/style.css
View File

@ -120,6 +120,7 @@ select, input[type="text"], input[type="number"], textarea {
.demo-side {
flex-basis: inherit;
position: relative;
width: 50%;
}
.layout-3 .content-wrap {
flex-direction: row-reverse;
@ -127,7 +128,6 @@ select, input[type="text"], input[type="number"], textarea {
.code-side {
display: flex;
flex-direction: column;
width: 50%;
}
.layout-2 .content-wrap {
flex-direction: column;
@ -136,6 +136,9 @@ select, input[type="text"], input[type="number"], textarea {
flex-direction: row;
width: auto;
}
.layout-2 .demo-side {
width: auto;
}
.layout-4 .code-side {
display: none;
}
@ -183,6 +186,7 @@ select, input[type="text"], input[type="number"], textarea {
color: #888;
border-bottom: 1px solid rgba(0,0,0,0.3);
font-weight: bold;
user-select: none;
}
.code-wrap__header-label {
/*transform: translate(0px) scale(1.2);*/
@ -191,7 +195,7 @@ select, input[type="text"], input[type="number"], textarea {
opacity: 0.5;
/*transform-origin: left center;*/
}
.layout-2 .is-minimized .code-wrap__header {
.layout-2 .code-side .is-minimized .code-wrap__header {
writing-mode: vertical-lr;
padding: 10px 5px;
}
@ -836,3 +840,15 @@ li.CodeMirror-hint-active {
.console .Codemirror {
height: calc(100% - 55px);
}
.console-exec-input {
padding: 5px;
font-size: 1.3em;
flex: 1;
background: rgba(0,0,0,0.3);
color: white;
border: 0;
outline: 0;
}
.console .code-wrap__header {
cursor: ns-resize;
}