diff --git a/src/script.js b/src/script.js
index 63d7cf0..130a25c 100644
--- a/src/script.js
+++ b/src/script.js
@@ -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: ''
diff --git a/src/style.css b/src/style.css
index 740df45..961052e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -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;
}
@@ -835,4 +839,16 @@ 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;
}
\ No newline at end of file