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

add templates for file mode

Browse Source
This commit is contained in:
Kushagra Gour
2019-03-15 16:30:16 +05:30
parent e39e284705
commit 6724b7c90b
6 changed files with 87 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/CreateNewModal.jsx
View File

@@ -197,14 +197,25 @@ export class CreateNewModal extends Component {
</button> </button>
<p>Or choose from a template:</p> <p>Or choose from a template:</p>
<div class="saved-items-pane__container"> <div class="saved-items-pane__container">
{templates.map(template => ( {templates.map(template => {
<ItemTile if (
inline !this.state.isFileModeSelected ||
item={template} template.isFileModeSupported
focusable ) {
onClick={onTemplateSelect.bind(null, template)} return (
/> <ItemTile
))} inline
item={template}
focusable
onClick={onTemplateSelect.bind(
null,
template,
this.state.isFileModeSelected
)}
/>
);
}
})}
</div> </div>
</div> </div>
<div class="tac"> <div class="tac">

1
src/components/SavedItemPane.jsx
View File

@@ -151,7 +151,6 @@ export default class SavedItemPane extends Component {
class={`saved-items-pane ${isOpen ? 'is-open' : ''}`} class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
onKeyDown={this.keyDownHandler.bind(this)} onKeyDown={this.keyDownHandler.bind(this)}
aria-hidden={isOpen} aria-hidden={isOpen}
tabIndex={`${isOpen ? 0 : -1}`}
> >
<button <button
onClick={this.onCloseIntent.bind(this)} onClick={this.onCloseIntent.bind(this)}

4
src/components/app.jsx
View File

@@ -1368,8 +1368,8 @@ export default class App extends Component {
}); });
} }
templateSelectHandler(template) { templateSelectHandler(template, isFileMode) {
fetch(`templates/template-${template.id}.json`) fetch(`templates/template-${isFileMode ? 'files-' : ''}${template.id}.json`)
.then(res => res.json()) .then(res => res.json())
.then(json => { .then(json => {
this.forkItem(json); this.forkItem(json);

6
src/templateList.js
View File

@@ -7,7 +7,8 @@ export default [
{ {
id: 'vue', id: 'vue',
title: 'Vue', title: 'Vue',
img: 'assets/vue-logo.svg' img: 'assets/vue-logo.svg',
isFileModeSupported: true
}, },
{ {
id: 'preact', id: 'preact',
@@ -17,6 +18,7 @@ export default [
{ {
id: 'kontra-game-engine', id: 'kontra-game-engine',
title: 'Kontra Game Engine', title: 'Kontra Game Engine',
img: 'assets/html5-logo.svg' img: 'assets/html5-logo.svg',
isFileModeSupported: true
} }
]; ];

31
src/templates/template-files-kontra-game-engine.json Normal file
View File

@@ -0,0 +1,31 @@
{
"title": "Kontra game engine template",
"files": [
{
"content": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width\" />\n <title>Vue template</title>\n <link rel=\"stylesheet\" href=\"styles/style.css\" />\n </head>\n <body>\n <canvas></canvas>\n\n <script src=\"https://unpkg.com/kontra@4.0.0/dist/core.js\"></script>\n <script src=\"https://unpkg.com/kontra@4.0.0/dist/sprite.js\"></script>\n <script src=\"https://unpkg.com/kontra@4.0.0/dist/gameLoop.js\"></script>\n <script src=\"https://unpkg.com/kontra@4.0.0/dist/pointer.js\"></script>\n <script src=\"https://unpkg.com/kontra@4.0.0/dist/keyboard.js\"></script>\n\n <script src=\"script.js\"></script>\n </body>\n</html>\n",
"name": "index.html",
"path": "index.html"
},
{
"children": [
{
"content": "",
"name": "style.css",
"path": "styles/style.css"
}
],
"isFolder": true,
"name": "styles",
"path": "styles"
},
{
"content": "// Learn More here -> https://straker.github.io/kontra/getting-started\nkontra.init();\n\nvar sprite = kontra.sprite({\n x: 100, // starting x,y position of the sprite\n y: 80,\n color: \"#bad455\", // fill color of the sprite rectangle\n width: 20, // width and height of the sprite rectangle\n height: 40,\n dx: 2 // move the sprite 2px to the right every frame\n});\n\nvar loop = kontra.gameLoop({\n // create the main game loop\n update() {\n // update the game state\n sprite.update();\n\n // wrap the sprites position when it reaches\n // the edge of the screen\n if (sprite.x > kontra.canvas.width) {\n sprite.x = -sprite.width;\n }\n },\n render() {\n // render the game state\n sprite.render();\n }\n});\n\nloop.start(); // start the game\n",
"name": "script.js",
"path": "script.js"
}
],
"id": "item-sr0eNHK58q",
"layoutMode": 2,
"mainSizes": ["200px", "53.0771%", "37.1917%"],
"sizes": [33.33, 33.33, 33.33]
}

31
src/templates/template-files-vue.json Normal file
View File

@@ -0,0 +1,31 @@
{
"title": "Vue template",
"content": "",
"files": [
{
"content": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width\" />\n <title>Vue template</title>\n <link rel=\"stylesheet\" href=\"styles/style.css\" />\n </head>\n <body>\n <div id=\"root\"><h1>Hello {{ message }}</h1></div>\n <script src=\"https://unpkg.com/vue@2.6.9/dist/vue.min.js\"></script>\n <script src=\"script.js\"></script>\n </body>\n</html>\n",
"name": "index.html",
"path": "index.html"
},
{
"children": [
{
"content": "",
"name": "style.css",
"path": "styles/style.css"
}
],
"isFolder": true,
"name": "styles",
"path": "styles"
},
{
"content": "const app = new Vue({\n el: '#root',\n data: {\n message: 'World'\n }\n});",
"name": "script.js",
"path": "script.js"
}
],
"id": "item-sr0eNHK58q",
"layoutMode": 2,
"mainSizes": ["200px", "50%", "50%"]
}