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

add working POC for files 🔥

Browse Source
This commit is contained in:
Kushagra Gour
2018-09-30 15:28:47 +05:30
parent a7b9535ff9
commit 8e5b5fdd9b
4 changed files with 46 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/ContentWrap2.jsx
View File

@@ -24,6 +24,10 @@ class Sidebar extends Component {
type="button" type="button"
onClick={this.props.onFileSelect.bind(null, file)} onClick={this.props.onFileSelect.bind(null, file)}
> >
<img
src="http://icons-for-free.com/icon/download-css_html_html5_icon-498356.png"
width="16"
/>
{file.name} {file.name}
</button> </button>
</div> </div>
@@ -38,14 +42,12 @@ export default class ContentWrap2 extends Component {
super(props); super(props);
this.state = { this.state = {
isConsoleOpen: false, isConsoleOpen: false,
isCssSettingsModalOpen: false, isCssSettingsModalOpen: false
files: [
{ name: 'index.html' },
{ name: 'style.css' },
{ name: 'script.js' }
]
}; };
this.state.selectedFile = this.state.files[0]; this.state.selectedFile =
this.currentItem && this.currentItem.files
? this.currentItem.files[0]
: null;
this.updateTimer = null; this.updateTimer = null;
this.updateDelay = 500; this.updateDelay = 500;
this.htmlMode = HtmlModes.HTML; this.htmlMode = HtmlModes.HTML;
@@ -135,10 +137,9 @@ export default class ContentWrap2 extends Component {
this.detachedWindow.postMessage({ contents }, '*'); this.detachedWindow.postMessage({ contents }, '*');
} else { } else {
var obj = {}; var obj = {};
this.state.files.forEach(file => { this.props.currentItem.files.forEach(file => {
obj[`/user/${file.name}`] = file.content || ''; obj[`/user/${file.name}`] = file.content || '';
}); });
// obj[`/user/index.html`] = this.cmCodes.html;
navigator.serviceWorker.controller.postMessage(obj); navigator.serviceWorker.controller.postMessage(obj);
this.frame.src = '/user/index.html'; this.frame.src = '/user/index.html';
@@ -474,6 +475,7 @@ export default class ContentWrap2 extends Component {
this.updateCssMode('html'); this.updateCssMode('html');
} }
this.cm.html.setValue(file.content || ''); this.cm.html.setValue(file.content || '');
this.cm.html.focus();
} }
render() { render() {
@@ -490,7 +492,7 @@ export default class ContentWrap2 extends Component {
> >
<div id="js-sidebar"> <div id="js-sidebar">
<Sidebar <Sidebar
files={this.state.files} files={this.props.currentItem.files || []}
onFileSelect={this.fileSelectHandler.bind(this)} onFileSelect={this.fileSelectHandler.bind(this)}
/> />
</div> </div>
@@ -507,7 +509,7 @@ export default class ContentWrap2 extends Component {
title="Double click to toggle code pane" title="Double click to toggle code pane"
> >
<label class="btn-group" dropdow title="Click to change"> <label class="btn-group" dropdow title="Click to change">
{this.state.selectedFile.name} {this.state.selectedFile ? this.state.selectedFile.name : ''}
</label> </label>
<div class="code-wrap__header-right-options"> <div class="code-wrap__header-right-options">
<a <a

35
src/components/app.jsx
View File

@@ -264,9 +264,9 @@ export default class App extends Component {
alertsService.add(`"${sourceItem.title}" was forked`); alertsService.add(`"${sourceItem.title}" was forked`);
trackEvent('fn', 'itemForked'); trackEvent('fn', 'itemForked');
} }
createNewItem() { createNewItem(isProject = true) {
var d = new Date(); const d = new Date();
this.setCurrentItem({ let item = {
title: title:
'Untitled ' + 'Untitled ' +
d.getDate() + d.getDate() +
@@ -275,13 +275,28 @@ export default class App extends Component {
'-' + '-' +
d.getHours() + d.getHours() +
':' + ':' +
d.getMinutes(), d.getMinutes()
html: '', };
css: '', if (isProject) {
js: '', item = {
externalLibs: { js: '', css: '' }, ...item,
layoutMode: this.state.currentLayoutMode files: [
}).then(() => this.refreshEditor()); { name: 'index.html' },
{ name: 'style.css' },
{ name: 'script.js' }
]
};
} else {
item = {
...item,
html: '',
css: '',
js: '',
externalLibs: { js: '', css: '' },
layoutMode: this.state.currentLayoutMode
};
}
this.setCurrentItem(item).then(() => this.refreshEditor());
alertsService.add('New item created'); alertsService.add('New item created');
} }
openItem(item) { openItem(item) {

2
src/index.html
View File

@@ -67,7 +67,7 @@
</style> </style>
</head> </head>
<body> <body class="is-project">
<!-- SCRIPT-TAGS --> <!-- SCRIPT-TAGS -->
<%= htmlWebpackPlugin.options.ssr({ <%= htmlWebpackPlugin.options.ssr({
url: '/' url: '/'

7
src/style.css
View File

@@ -383,6 +383,10 @@ body:not(.light-version).overlay-visible .main-container {
width: auto; width: auto;
} }
.is-project .content-wrap {
flex-direction: row;
}
/* All vertical layout */ /* All vertical layout */
.layout-5 .code-side { .layout-5 .code-side {
@@ -447,6 +451,9 @@ body:not(.light-version).overlay-visible .main-container {
height: auto; height: auto;
width: 33%; width: 33%;
} }
.is-project .code-wrap {
flex-basis: 100%;
}
.code-wrap__header { .code-wrap__header {
display: flex; display: flex;