mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-27 00:30:09 +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"
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}
</button>
</div>
@@ -38,14 +42,12 @@ export default class ContentWrap2 extends Component {
super(props);
this.state = {
isConsoleOpen: false,
isCssSettingsModalOpen: false,
files: [
{ name: 'index.html' },
{ name: 'style.css' },
{ name: 'script.js' }
]
isCssSettingsModalOpen: false
};
this.state.selectedFile = this.state.files[0];
this.state.selectedFile =
this.currentItem && this.currentItem.files
? this.currentItem.files[0]
: null;
this.updateTimer = null;
this.updateDelay = 500;
this.htmlMode = HtmlModes.HTML;
@@ -135,10 +137,9 @@ export default class ContentWrap2 extends Component {
this.detachedWindow.postMessage({ contents }, '*');
} else {
var obj = {};
this.state.files.forEach(file => {
this.props.currentItem.files.forEach(file => {
obj[`/user/${file.name}`] = file.content || '';
});
// obj[`/user/index.html`] = this.cmCodes.html;
navigator.serviceWorker.controller.postMessage(obj);
this.frame.src = '/user/index.html';
@@ -474,6 +475,7 @@ export default class ContentWrap2 extends Component {
this.updateCssMode('html');
}
this.cm.html.setValue(file.content || '');
this.cm.html.focus();
}
render() {
@@ -490,7 +492,7 @@ export default class ContentWrap2 extends Component {
>
<div id="js-sidebar">
<Sidebar
files={this.state.files}
files={this.props.currentItem.files || []}
onFileSelect={this.fileSelectHandler.bind(this)}
/>
</div>
@@ -507,7 +509,7 @@ export default class ContentWrap2 extends Component {
title="Double click to toggle code pane"
>
<label class="btn-group" dropdow title="Click to change">
{this.state.selectedFile.name}
{this.state.selectedFile ? this.state.selectedFile.name : ''}
</label>
<div class="code-wrap__header-right-options">
<a

25
src/components/app.jsx
View File

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

2
src/index.html
View File

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

7
src/style.css
View File

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