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

Helpmodal + add library + toggle layouts

Browse Source
This commit is contained in:
Kushagra Gour
2018-05-27 01:19:00 +05:30
parent 84f1ceae10
commit 0cc0e4d9ee
5 changed files with 99 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
webmaker/src/components/ContentWrap.jsx
View File

@@ -73,24 +73,27 @@ export default class ContentWrap extends Component {
/* eslint max-params: ["error", 4] */ /* eslint max-params: ["error", 4] */
getCompleteHtml(html, css, js, isForExport) { getCompleteHtml(html, css, js, isForExport) {
/* var externalJs = externalJsTextarea.value if (!this.props.currentItem) {
return '';
}
var externalJs = this.props.currentItem.externalLibs.js
.split('\n') .split('\n')
.reduce(function(scripts, url) { .reduce(function(scripts, url) {
return scripts + (url ? '\n<script src="' + url + '"></script>' : ''); return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
}, ''); }, '');
var externalCss = externalCssTextarea.value var externalCss = this.props.currentItem.externalLibs.css
.split('\n') .split('\n')
.reduce(function(links, url) { .reduce(function(links, url) {
return ( return (
links + links +
(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '') (url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
); );
}, ''); */ }, '');
var contents = var contents =
'<!DOCTYPE html>\n' + '<!DOCTYPE html>\n' +
'<html>\n<head>\n' + '<html>\n<head>\n' +
'<meta charset="UTF-8" />\n' + '<meta charset="UTF-8" />\n' +
// externalCss + externalCss +
'\n' + '\n' +
'<style id="webmakerstyle">\n' + '<style id="webmakerstyle">\n' +
css + css +
@@ -99,7 +102,7 @@ export default class ContentWrap extends Component {
'<body>\n' + '<body>\n' +
html + html +
'\n' + '\n' +
// externalJs + externalJs +
'\n'; '\n';
if (!isForExport) { if (!isForExport) {
@@ -285,13 +288,14 @@ export default class ContentWrap extends Component {
this.codeInPreview.js = currentCode.js; this.codeInPreview.js = currentCode.js;
} }
componentWillReceiveProps() { componentWillReceiveProps() {
console.log('compoenntwillrecvprops', this.props.currentItem); // console.log('compoenntwillrecvprops', this.props.currentItem);
} }
componentDidUpdate() { componentDidUpdate() {
this.setPreviewContent(true);
console.log('componentdidupdate', this.props.currentItem); console.log('componentdidupdate', this.props.currentItem);
} }
componentWillUpdate() { componentWillUpdate() {
console.log('compoenntwillupdate', this.props.currentItem); // console.log('compoenntwillupdate', this.props.currentItem);
} }
render() { render() {

35
webmaker/src/components/Footer.jsx
View File

@@ -2,11 +2,15 @@ import { h, Component } from 'preact';
import Modal from './Modal.jsx'; import Modal from './Modal.jsx';
export default class Footer extends Component { export default class Footer extends Component {
getInitialState() { constructor(props) {
return { super(props);
this.state = {
isKeyboardShortcutsModalOpen: false isKeyboardShortcutsModalOpen: false
}; };
} }
layoutBtnClickhandler(layoutId) {
this.props.layoutBtnClickHandler(layoutId);
}
render() { render() {
return ( return (
@@ -57,27 +61,44 @@ export default class Footer extends Component {
<div class="footer__separator hide-on-mobile" /> <div class="footer__separator hide-on-mobile" />
<a id="layoutBtn1" class="mode-btn hide-on-mobile"> <a
onClick={this.layoutBtnClickhandler.bind(this, 1)}
id="layoutBtn1"
class="mode-btn hide-on-mobile"
>
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)"> <svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
<use xlinkHref="#mode-icon" /> <use xlinkHref="#mode-icon" />
</svg> </svg>
</a> </a>
<a id="layoutBtn2" class="mode-btn hide-on-mobile"> <a
onClick={this.layoutBtnClickhandler.bind(this, 2)}
id="layoutBtn2"
class="mode-btn hide-on-mobile"
>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<use xlinkHref="#mode-icon" /> <use xlinkHref="#mode-icon" />
</svg> </svg>
</a> </a>
<a id="layoutBtn3" class="mode-btn hide-on-mobile"> <a
onClick={this.layoutBtnClickhandler.bind(this, 3)}
id="layoutBtn3"
class="mode-btn hide-on-mobile"
>
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)"> <svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
<use xlinkHref="#mode-icon" /> <use xlinkHref="#mode-icon" />
</svg> </svg>
</a> </a>
<a id="layoutBtn5" class="mode-btn hide-on-mobile"> <a
onClick={this.layoutBtnClickhandler.bind(this, 5)}
id="layoutBtn5"
class="mode-btn hide-on-mobile"
>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<use xlinkHref="#vertical-mode-icon" /> <use xlinkHref="#vertical-mode-icon" />
</svg> </svg>
</a> </a>
<a <a
onClick={this.layoutBtnClickhandler.bind(this, 4)}
id="layoutBtn4" id="layoutBtn4"
class="mode-btn hint--top-left hint--rounded hide-on-mobile" class="mode-btn hint--top-left hint--rounded hide-on-mobile"
aria-label="Full Screen" aria-label="Full Screen"
@@ -124,7 +145,7 @@ export default class Footer extends Component {
&copy; &copy;
<span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp; <span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp;
<a <a
d-open-modal="helpModal" onClick={this.props.helpBtnClickHandler}
data-event-category="ui" data-event-category="ui"
data-event-action="helpButtonClick" data-event-action="helpButtonClick"
class="footer__link hint--rounded hint--top-right" class="footer__link hint--rounded hint--top-right"

4
webmaker/src/components/MainHeader.jsx
View File

@@ -33,7 +33,9 @@ export default class Header extends Component {
Add library Add library
<span <span
id="js-external-lib-count" id="js-external-lib-count"
style="display:none;" style={`display:${
this.props.externalLibCount ? 'inline' : 'none'
}`}
class="count-label" class="count-label"
> >
{this.props.externalLibCount} {this.props.externalLibCount}

15
webmaker/src/components/Modal.jsx
View File

@@ -7,8 +7,13 @@ export default class Modal extends Component {
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('keydown', this.onKeyDownHandler); window.removeEventListener('keydown', this.onKeyDownHandler);
} }
onKeyDownHandler(event) { onKeyDownHandler(e) {
if (event.keyCode === 27) { if (e.keyCode === 27) {
this.props.closeHandler();
}
}
onOverlayClick(e) {
if (e.target === this.overlayEl) {
this.props.closeHandler(); this.props.closeHandler();
} }
} }
@@ -16,7 +21,11 @@ export default class Modal extends Component {
if (!this.props.show) return null; if (!this.props.show) return null;
return ( return (
<div class="modal is-modal-visible"> <div
class="modal is-modal-visible"
ref={el => (this.overlayEl = el)}
onClick={this.onOverlayClick.bind(this)}
>
<div class="modal__content"> <div class="modal__content">
<button <button
onClick={this.props.closeHandler} onClick={this.props.closeHandler}

55
webmaker/src/components/app.jsx
View File

@@ -7,7 +7,8 @@ import Footer from './Footer.jsx';
import SavedItemPane from './SavedItemPane.jsx'; import SavedItemPane from './SavedItemPane.jsx';
import AddLibrary from './AddLibrary.jsx'; import AddLibrary from './AddLibrary.jsx';
import Modal from './Modal.jsx'; import Modal from './Modal.jsx';
import '../utils'; import HelpModal from './HelpModal.jsx';
import { log } from '../utils';
if (module.hot) { if (module.hot) {
require('preact/debug'); require('preact/debug');
@@ -20,14 +21,17 @@ export default class App extends Component {
isSavedItemPaneOpen: false, isSavedItemPaneOpen: false,
isModalOpen: false, isModalOpen: false,
isAddLibraryModalOpen: false, isAddLibraryModalOpen: false,
currentItem: {} isHelpModalOpen: false,
currentItem: {
title: '',
externalLibs: { js: '', css: '' }
}
}; };
} }
openSavedItemsPane() { openSavedItemsPane() {
this.setState({ isSavedItemPaneOpen: true }); this.setState({ isSavedItemPaneOpen: true });
} }
openAddLibrary() { openAddLibrary() {
console.log(99999);
this.setState({ isAddLibraryModalOpen: true }); this.setState({ isAddLibraryModalOpen: true });
} }
closeSavedItemsPane() { closeSavedItemsPane() {
@@ -80,14 +84,16 @@ export default class App extends Component {
} }
} }
onExternalLibChange(newValues) { onExternalLibChange(newValues) {
log('onExternalLibChange');
this.state.currentItem.externalLibs = { this.state.currentItem.externalLibs = {
js: newValues.js, js: newValues.js,
css: newValues.css css: newValues.css
}; };
this.updateExternalLibCount(); this.updateExternalLibCount();
this.setState({ this.setState({
currentItem: this.state.currentItem currentItem: { ...this.state.currentItem }
}); });
// alertsService.add('Libraries updated.');
} }
updateExternalLibCount() { updateExternalLibCount() {
// Calculate no. of external libs // Calculate no. of external libs
@@ -101,12 +107,34 @@ export default class App extends Component {
this.setState({ this.setState({
externalLibCount: noOfExternalLibs externalLibCount: noOfExternalLibs
}); });
if (noOfExternalLibs) { }
// $('#js-external-lib-count').textContent = noOfExternalLibs; toggleLayout(mode) {
$('#js-external-lib-count').style.display = 'inline'; /* eslint-disable no-param-reassign */
} else { mode = window.innerWidth < 500 ? 2 : mode;
$('#js-external-lib-count').style.display = 'none';
if (this.state.currentLayoutMode === mode) {
// mainSplitInstance.setSizes(getMainSplitSizesToApply());
// codeSplitInstance.setSizes(currentItem.sizes || [33.33, 33.33, 33.33]);
this.setState({ currentLayoutMode: mode });
return;
} }
this.setState({ currentLayoutMode: mode });
// Remove all layout classes
[1, 2, 3, 4, 5].forEach(layoutNumber => {
window[`layoutBtn${layoutNumber}`].classList.remove('selected');
document.body.classList.remove(`layout-${layoutNumber}`);
});
$('#layoutBtn' + mode).classList.add('selected');
document.body.classList.add('layout-' + mode);
// resetSplitting();
// scope.setPreviewContent(true);
}
layoutBtnClickHandler(layoutId) {
// saveSetting('layoutMode', mode);
// trackEvent('ui', 'toggleLayoutClick', mode);
this.toggleLayout(layoutId);
} }
render() { render() {
@@ -120,7 +148,10 @@ export default class App extends Component {
/> />
<ContentWrap currentItem={this.state.currentItem} /> <ContentWrap currentItem={this.state.currentItem} />
<div class="global-console-container" id="globalConsoleContainerEl" /> <div class="global-console-container" id="globalConsoleContainerEl" />
<Footer /> <Footer
layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)}
helpBtnClickHandler={() => this.setState({ isHelpModalOpen: true })}
/>
</div> </div>
<SavedItemPane <SavedItemPane
@@ -160,6 +191,10 @@ export default class App extends Component {
onChange={this.onExternalLibChange.bind(this)} onChange={this.onExternalLibChange.bind(this)}
/> />
</Modal> </Modal>
<HelpModal
show={this.state.isHelpModalOpen}
closeHandler={() => this.setState({ isHelpModalOpen: false })}
/>
<svg <svg
version="1.1" version="1.1"