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 exec feature

Browse Source
This commit is contained in:
Kushagra Gour
2017-05-08 01:37:58 +05:30
parent 88a49cd4c5
commit 580cfebbab
4 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/index.html
View File

@ -101,7 +101,7 @@
</div>
<div class="demo-side" id="js-demo-side">
<iframe src="about://blank" frameborder="0" id="demo-frame"></iframe>
<div id="consoleEl" class="console">
<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>
@ -117,7 +117,10 @@
</div>
</div>
<div id="consolePromptEl" class="console__prompt">
<input type="" name="" class="full-width" style="background: none;border:0;">
<svg width="18" height="18" fill="#346fd2">
<use xlink:href="#chevron-icon"></use>
</svg>
<input d-keypress="evalConsoleExpr" style="padding:3px;font-size:inherit;width:calc(100% - 30px); background: black; color: white; border:0;">
</div>
</div>
</div>
@ -601,6 +604,11 @@
<path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z" />
</svg>
</symbol>
<symbol id="chevron-icon" viewBox="0 0 24 24">
<svg>
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
</symbol>
</svg>
<script src="lib/codemirror/lib/codemirror.js"></script>

11
src/screenlog.js
View File

@ -171,4 +171,13 @@ screenLog.init({
proxyCallback: function () {
window.parent.onMessageFromConsole.apply(null, arguments);
}
});
});
window._wmEvaluate = function _wmEvaluate(expr) {
try {
var result = eval(expr);
} catch(e) {
window.parent.onMessageFromConsole.call(null, e);
return;
}
window.parent.onMessageFromConsole.call(null, result);
}

16
src/script.js
View File

@ -92,6 +92,7 @@ runBtn, searchInput, consoleEl, consoleLogEl
scope.cm = {};
scope.consoleCm;
scope.frame = frame;
scope.demoFrameDocument = frame.contentDocument || frame.contentWindow.document;
// Check all the code wrap if they are minimized or not
@ -1304,23 +1305,29 @@ runBtn, searchInput, consoleEl, consoleLogEl
};
scope.toggleConsole = function () {
consoleEl.classList.toggle('is-open');
consoleEl.classList.toggle('is-minimized');
};
scope.clearConsole = function () {
scope.consoleCm.setValue('');
};
scope.evalConsoleExpr = function (e) {
if (e.which === 13) {
window.onMessageFromConsole('> ' + e.target.value);
frame.contentWindow._wmEvaluate(e.target.value);
e.target.value = '';
}
};
window.onMessageFromConsole = function() {
[...arguments].forEach(function(arg) {
if (arg.indexOf && arg.indexOf('filesystem:chrome-extension') !== -1) {
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.scrollTo(0, Infinity);
});
}
function compileNodes() {
function attachListenerForEvent(eventName) {
const nodes = $all(`[d-${eventName}]`);
nodes.forEach(function (el) {
@ -1332,6 +1339,7 @@ runBtn, searchInput, consoleEl, consoleLogEl
attachListenerForEvent('click');
attachListenerForEvent('change');
attachListenerForEvent('input');
attachListenerForEvent('keypress');
}
function init () {

10
src/style.css
View File

@ -824,13 +824,13 @@ li.CodeMirror-hint-active {
height: 30vh;
left: 0;
right: 0;
transform: translateY(calc(100% - 30px));
transition: transform 0.4s cubic-bezier(0.77,-0.1,0.13,0.9);
}
.console.is-open {
transform: translateY(0);
transition: transform 0.4s cubic-bezier(0.76, 0.01, 0.13, 0.9);
}
.console.is-minimized {
transform: translateY(calc(100% - 30px));
}
.console .Codemirror {
height: auto;
max-height: calc(100% - 50px);
max-height: calc(100% - 70px);
}