diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 00000000..bfadc75e --- /dev/null +++ b/.jshintrc @@ -0,0 +1,3 @@ +{ + "esversion": 9 +} diff --git a/examples/demo/app.css b/examples/demo/app.css new file mode 100644 index 00000000..6f710546 --- /dev/null +++ b/examples/demo/app.css @@ -0,0 +1,37 @@ +.main { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + + display: grid; + grid-template-columns: 200px 1fr; +} + +.left-thing { + background-color: gray; + padding: 20px; +} + +.left-thing button { + width: 100%; +} + +.right-thing { + padding: 20px; + overflow: auto; +} + +/* Message widget */ +.message .author { + font-weight: bold; +} + +.message { + width: 400px; + background-color: lightblue; + margin: 10px 5px; + border-radius: 5px; + padding: 5px; +} diff --git a/examples/demo/app.js b/examples/demo/app.js new file mode 100644 index 00000000..1d704fd4 --- /dev/null +++ b/examples/demo/app.js @@ -0,0 +1,42 @@ +import { Message } from "./message.js"; +import { messages } from "./data.js"; + +const template = ` +
+
+ + + + +
+
+
+ + + +
+
+
`; + +export class App extends odoo.core.Component { + constructor(parent, props) { + super(parent, props); + this.inlineTemplate = template; + this.widgets = { Message }; + this.state = { + messages: messages.slice(0, 10) + }; + } + + setMessageCount(n) { + this.setState({ + messages: messages.slice(0, n) + }); + } + + removeMessage(data) { + const index = this.state.messages.findIndex(m => m.id === data.id); + this.state.messages.splice(index, 1); + this.setState({ messages: this.state.messages }); + } +} diff --git a/examples/demo/counter.js b/examples/demo/counter.js new file mode 100644 index 00000000..1fcffa5f --- /dev/null +++ b/examples/demo/counter.js @@ -0,0 +1,20 @@ +const template = ` +
+ + Value: + +
`; + +export class Counter extends odoo.core.Component { + constructor(parent, props) { + super(parent, props); + this.inlineTemplate = template; + this.state = { + counter: props.initialState || 0 + }; + } + + increment(delta) { + this.setState({ counter: this.state.counter + delta }); + } +} diff --git a/examples/demo/data.js b/examples/demo/data.js new file mode 100644 index 00000000..e9ddb5aa --- /dev/null +++ b/examples/demo/data.js @@ -0,0 +1,22 @@ +export const messages = []; + +const authors = ["Aaron", "David", "Vincent"]; +const content = [ + "Lorem ipsum dolor sit amet", + "Sed ut perspiciatis unde omnis iste natus error sit voluptatem", + "Excepteur sint occaecat cupidatat non proident" +]; + +function chooseRandomly(array) { + const index = Math.floor(Math.random() * array.length); + return array[index]; +} + +for (let i = 1; i < 6000; i++) { + messages.push({ + id: i, + author: chooseRandomly(authors), + msg: `${i}: ${chooseRandomly(content)}`, + likes: 0 + }); +} diff --git a/examples/demo/index.html b/examples/demo/index.html new file mode 100644 index 00000000..210e7d34 --- /dev/null +++ b/examples/demo/index.html @@ -0,0 +1,16 @@ + + + + + Demo App + + + + + + + + + + + \ No newline at end of file diff --git a/examples/demo/main.js b/examples/demo/main.js new file mode 100644 index 00000000..d4467137 --- /dev/null +++ b/examples/demo/main.js @@ -0,0 +1,10 @@ +import { App } from "./app.js"; +import { Counter } from "./counter.js"; + +document.addEventListener("DOMContentLoaded", function() { + const env = { + qweb: new odoo.core.QWeb() + }; + const app = new App(env, { initialState: 13 }); + app.mount(document.body); +}); diff --git a/examples/demo/message.js b/examples/demo/message.js new file mode 100644 index 00000000..9238dfd7 --- /dev/null +++ b/examples/demo/message.js @@ -0,0 +1,19 @@ +const template = ` +
+ + + +
`; + +export class Message extends odoo.core.Component { + constructor(parent, props) { + super(parent, props); + this.inlineTemplate = template; + } + + removeMessage() { + this.trigger("remove_message", { + id: this.props.id + }); + } +} diff --git a/examples/demo/readme.md b/examples/demo/readme.md deleted file mode 100644 index 7442b698..00000000 --- a/examples/demo/readme.md +++ /dev/null @@ -1,4 +0,0 @@ -# Demo - -This example is just a playground to experiment/showcase some features of -the framework. diff --git a/package.json b/package.json index c0ee32f7..9052414b 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,12 @@ "example:web:minify": "uglifyjs dist/examples/web/main.js -o dist/examples/web/main.js --compress --mangle", "example:web:serve": "live-server --entry-file=index.html dist/examples/web/", "preexample:web:dev": "npm run example:web:build", - "example:web:dev": "npm-run-all --parallel \"example:web:build:* -- --watch\" example:web:serve" + "example:web:dev": "npm-run-all --parallel \"example:web:build:* -- --watch\" example:web:serve", + "example:demo:build:core": "npm run build && cpx \"dist/core.js\" dist/examples/demo", + "example:demo:build:js": "cpx \"examples/demo/{*.html,*.js,*.css}\" dist/examples/demo", + "example:demo:build": "npm-run-all --parallel example:demo:build:*", + "example:demo:serve": "live-server --entry-file=index.html dist/examples/demo/", + "example:demo:dev": "npm-run-all --parallel \"example:demo:build:* -- --watch\" example:demo:serve" }, "repository": { "type": "git",