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

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

@@ -2,11 +2,15 @@ import { h, Component } from 'preact';
import Modal from './Modal.jsx';
export default class Footer extends Component {
getInitialState() {
return {
constructor(props) {
super(props);
this.state = {
isKeyboardShortcutsModalOpen: false
};
}
layoutBtnClickhandler(layoutId) {
this.props.layoutBtnClickHandler(layoutId);
}
render() {
return (
@@ -57,27 +61,44 @@ export default class Footer extends Component {
<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)">
<use xlinkHref="#mode-icon" />
</svg>
</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">
<use xlinkHref="#mode-icon" />
</svg>
</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)">
<use xlinkHref="#mode-icon" />
</svg>
</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">
<use xlinkHref="#vertical-mode-icon" />
</svg>
</a>
<a
onClick={this.layoutBtnClickhandler.bind(this, 4)}
id="layoutBtn4"
class="mode-btn hint--top-left hint--rounded hide-on-mobile"
aria-label="Full Screen"
@@ -124,7 +145,7 @@ export default class Footer extends Component {
&copy;
<span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp;
<a
d-open-modal="helpModal"
onClick={this.props.helpBtnClickHandler}
data-event-category="ui"
data-event-action="helpButtonClick"
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
<span
id="js-external-lib-count"
style="display:none;"
style={`display:${
this.props.externalLibCount ? 'inline' : 'none'
}`}
class="count-label"
>
{this.props.externalLibCount}

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

@@ -7,8 +7,13 @@ export default class Modal extends Component {
componentWillUnmount() {
window.removeEventListener('keydown', this.onKeyDownHandler);
}
onKeyDownHandler(event) {
if (event.keyCode === 27) {
onKeyDownHandler(e) {
if (e.keyCode === 27) {
this.props.closeHandler();
}
}
onOverlayClick(e) {
if (e.target === this.overlayEl) {
this.props.closeHandler();
}
}
@@ -16,7 +21,11 @@ export default class Modal extends Component {
if (!this.props.show) return null;
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">
<button
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 AddLibrary from './AddLibrary.jsx';
import Modal from './Modal.jsx';
import '../utils';
import HelpModal from './HelpModal.jsx';
import { log } from '../utils';
if (module.hot) {
require('preact/debug');
@@ -20,14 +21,17 @@ export default class App extends Component {
isSavedItemPaneOpen: false,
isModalOpen: false,
isAddLibraryModalOpen: false,
currentItem: {}
isHelpModalOpen: false,
currentItem: {
title: '',
externalLibs: { js: '', css: '' }
}
};
}
openSavedItemsPane() {
this.setState({ isSavedItemPaneOpen: true });
}
openAddLibrary() {
console.log(99999);
this.setState({ isAddLibraryModalOpen: true });
}
closeSavedItemsPane() {
@@ -80,14 +84,16 @@ export default class App extends Component {
}
}
onExternalLibChange(newValues) {
log('onExternalLibChange');
this.state.currentItem.externalLibs = {
js: newValues.js,
css: newValues.css
};
this.updateExternalLibCount();
this.setState({
currentItem: this.state.currentItem
currentItem: { ...this.state.currentItem }
});
// alertsService.add('Libraries updated.');
}
updateExternalLibCount() {
// Calculate no. of external libs
@@ -101,12 +107,34 @@ export default class App extends Component {
this.setState({
externalLibCount: noOfExternalLibs
});
if (noOfExternalLibs) {
// $('#js-external-lib-count').textContent = noOfExternalLibs;
$('#js-external-lib-count').style.display = 'inline';
} else {
$('#js-external-lib-count').style.display = 'none';
}
toggleLayout(mode) {
/* eslint-disable no-param-reassign */
mode = window.innerWidth < 500 ? 2 : mode;
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() {
@@ -120,7 +148,10 @@ export default class App extends Component {
/>
<ContentWrap currentItem={this.state.currentItem} />
<div class="global-console-container" id="globalConsoleContainerEl" />
<Footer />
<Footer
layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)}
helpBtnClickHandler={() => this.setState({ isHelpModalOpen: true })}
/>
</div>
<SavedItemPane
@@ -160,6 +191,10 @@ export default class App extends Component {
onChange={this.onExternalLibChange.bind(this)}
/>
</Modal>
<HelpModal
show={this.state.isHelpModalOpen}
closeHandler={() => this.setState({ isHelpModalOpen: false })}
/>
<svg
version="1.1"