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

Move Console to separate component.

Browse Source
This commit is contained in:
Kushagra Gour
2018-09-29 13:15:03 +05:30
parent 6a3fb83fd2
commit 74cfa9e327
2 changed files with 90 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/Console.jsx Normal file
View File

@@ -0,0 +1,70 @@
import { h } from 'preact';
import CodeMirrorBox from './CodeMirrorBox';
export function Console({
isConsoleOpen,
onConsoleHeaderDblClick,
onClearConsoleBtnClick,
toggleConsole,
onEvalInputKeyup,
onReady
}) {
return (
<div
id="consoleEl"
class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
>
<div id="consoleLogEl" class="console__log">
<div
class="js-console__header code-wrap__header"
title="Double click to toggle console"
onDblClick={onConsoleHeaderDblClick}
>
<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)"
onClick={onClearConsoleBtnClick}
>
<svg>
<use xlinkHref="#cancel-icon" />
</svg>
</a>
<a
class="code-wrap__header-btn code-wrap__collapse-btn"
title="Toggle console"
onClick={toggleConsole}
/>
</div>
</div>
<CodeMirrorBox
options={{
mode: 'javascript',
lineWrapping: true,
theme: 'monokai',
foldGutter: true,
readOnly: true,
gutters: ['CodeMirror-foldgutter']
}}
onCreation={el => onReady(el)}
/>
</div>
<div
id="consolePromptEl"
class="console__prompt flex flex-v-center flex-shrink-0"
>
<svg width="18" height="18" fill="#346fd2">
<use xlinkHref="#chevron-icon" />
</svg>
<input
tabIndex={isConsoleOpen ? 0 : -1}
onKeyUp={onEvalInputKeyup}
class="console-exec-input"
/>
</div>
</div>
);
}

78
src/components/ContentWrap.jsx
View File

@@ -6,7 +6,7 @@ import { log, writeFile, loadJS, getCompleteHtml } from '../utils';
import { SplitPane } from './SplitPane.jsx'; import { SplitPane } from './SplitPane.jsx';
import { trackEvent } from '../analytics'; import { trackEvent } from '../analytics';
import CodeMirror from '../CodeMirror'; import CodeMirror from '../CodeMirror';
import CodeMirrorBox from './CodeMirrorBox'; import { Console } from './Console';
import { deferred } from '../deferred'; import { deferred } from '../deferred';
import CssSettingsModal from './CssSettingsModal'; import CssSettingsModal from './CssSettingsModal';
const minCodeWrapSize = 33; const minCodeWrapSize = 33;
@@ -52,7 +52,7 @@ export default class ContentWrap extends Component {
} }
componentDidUpdate() { componentDidUpdate() {
// HACK: becuase its a DOM manipulation // HACK: becuase its a DOM manipulation
window.logCountEl.textContent = this.logCount; this.updateLogCount();
// log('🚀', 'didupdate', this.props.currentItem); // log('🚀', 'didupdate', this.props.currentItem);
// if (this.isValidItem(this.props.currentItem)) { // if (this.isValidItem(this.props.currentItem)) {
@@ -583,6 +583,12 @@ export default class ContentWrap extends Component {
}, 500); }, 500);
} }
updateLogCount() {
if (window.logCountEl) {
logCountEl.textContent = this.logCount;
}
}
onMessageFromConsole() { onMessageFromConsole() {
/* eslint-disable no-param-reassign */ /* eslint-disable no-param-reassign */
[...arguments].forEach(arg => { [...arguments].forEach(arg => {
@@ -614,7 +620,7 @@ export default class ContentWrap extends Component {
this.consoleCm.scrollTo(0, Infinity); this.consoleCm.scrollTo(0, Infinity);
this.logCount++; this.logCount++;
}); });
logCountEl.textContent = this.logCount; this.updateLogCount();
/* eslint-enable no-param-reassign */ /* eslint-enable no-param-reassign */
} }
@@ -638,7 +644,7 @@ export default class ContentWrap extends Component {
clearConsole() { clearConsole() {
this.consoleCm.setValue(''); this.consoleCm.setValue('');
this.logCount = 0; this.logCount = 0;
window.logCountEl.textContent = this.logCount; this.updateLogCount();
} }
clearConsoleBtnClickHandler() { clearConsoleBtnClickHandler() {
this.clearConsole(); this.clearConsole();
@@ -884,62 +890,16 @@ export default class ContentWrap extends Component {
id="demo-frame" id="demo-frame"
allowfullscreen allowfullscreen
/> />
<div <Console
id="consoleEl" isConsoleOpen={this.state.isConsoleOpen}
class={`console ${this.state.isConsoleOpen ? '' : 'is-minimized'}`} onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler.bind(
> this
<div id="consoleLogEl" class="console__log"> )}
<div onClearConsoleBtnClick={this.clearConsoleBtnClickHandler.bind(this)}
class="js-console__header code-wrap__header" toggleConsole={this.toggleConsole.bind(this)}
title="Double click to toggle console" onEvalInputKeyup={this.evalConsoleExpr.bind(this)}
onDblClick={this.consoleHeaderDblClickHandler.bind(this)} onReady={el => (this.consoleCm = el)}
>
<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)"
onClick={this.clearConsoleBtnClickHandler.bind(this)}
>
<svg>
<use xlinkHref="#cancel-icon" />
</svg>
</a>
<a
class="code-wrap__header-btn code-wrap__collapse-btn"
title="Toggle console"
onClick={this.toggleConsole.bind(this)}
/> />
</div>
</div>
<CodeMirrorBox
options={{
mode: 'javascript',
lineWrapping: true,
theme: 'monokai',
foldGutter: true,
readOnly: true,
gutters: ['CodeMirror-foldgutter']
}}
onCreation={el => (this.consoleCm = el)}
/>
</div>
<div
id="consolePromptEl"
class="console__prompt flex flex-v-center flex-shrink-0"
>
<svg width="18" height="18" fill="#346fd2">
<use xlinkHref="#chevron-icon" />
</svg>
<input
tabIndex={this.state.isConsoleOpen ? 0 : -1}
onKeyUp={this.evalConsoleExpr.bind(this)}
class="console-exec-input"
/>
</div>
</div>
<CssSettingsModal <CssSettingsModal
show={this.state.isCssSettingsModalOpen} show={this.state.isCssSettingsModalOpen}
closeHandler={() => closeHandler={() =>