NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] extras: properly indent js playground samples

Browse Source 
closes #75
This commit is contained in:
Géry Debongnie
2019-05-03 11:59:30 +02:00
parent 10ab97e3c6
commit 641adc6e5c
1 changed files with 306 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extras/playground/samples.js
+47 -38
View File
@@ -2,7 +2,7 @@ const CLICK_COUNTER = `class ClickCounter extends owl.Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.template = "clickcounter"; this.template = "clickcounter";
this.state = {value: 0}; this.state = { value: 0 };
} }
increment() { increment() {
@@ -11,7 +11,7 @@ const CLICK_COUNTER = `class ClickCounter extends owl.Component {
} }
const qweb = new owl.QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const counter = new ClickCounter({qweb}); const counter = new ClickCounter({ qweb });
counter.mount(document.body); counter.mount(document.body);
`; `;
@@ -30,7 +30,7 @@ const CLICK_COUNTER_CSS = `button {
const CLICK_COUNTER_ESNEXT = `// This example will not work if your browser does not support ESNext class fields const CLICK_COUNTER_ESNEXT = `// This example will not work if your browser does not support ESNext class fields
class ClickCounter extends owl.Component { class ClickCounter extends owl.Component {
template = "clickcounter"; template = "clickcounter";
state = {value: 0}; state = { value: 0 };
increment() { increment() {
this.state.value++; this.state.value++;
@@ -38,7 +38,7 @@ class ClickCounter extends owl.Component {
} }
const qweb = new owl.QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const counter = new ClickCounter({qweb}); const counter = new ClickCounter({ qweb });
counter.mount(document.body); counter.mount(document.body);
`; `;
@@ -46,7 +46,7 @@ const WIDGET_COMPOSITION = `class ClickCounter extends owl.Component {
constructor(parent, props) { constructor(parent, props) {
super(parent, props); super(parent, props);
this.template = "clickcounter"; this.template = "clickcounter";
this.state = {value: props.initialState || 0}; this.state = { value: props.initialState || 0 };
} }
increment() { increment() {
@@ -54,14 +54,13 @@ const WIDGET_COMPOSITION = `class ClickCounter extends owl.Component {
} }
} }
let nextId = 1; let nextId = 1;
class App extends owl.Component { class App extends owl.Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.template = "app"; this.template = "app";
this.state = {counters: []} this.state = { counters: [] }
this.widgets = { ClickCounter }; this.widgets = { ClickCounter };
} }
@@ -71,8 +70,9 @@ class App extends owl.Component {
} }
const qweb = new owl.QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const app = new App({qweb}); const app = new App({ qweb });
app.mount(document.body);`; app.mount(document.body);
`;
const WIDGET_COMPOSITION_XML = `<templates> const WIDGET_COMPOSITION_XML = `<templates>
<button t-name="clickcounter" t-on-click="increment"> <button t-name="clickcounter" t-on-click="increment">
@@ -95,9 +95,7 @@ const WIDGET_COMPOSITION_CSS = `button {
width: 220px; width: 220px;
}`; }`;
const LIFECYCLE_DEMO = `const { Component, QWeb } = owl; const LIFECYCLE_DEMO = `class HookWidget extends owl.Component {
class HookWidget extends Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.template = "demo.hookwidget"; this.template = "demo.hookwidget";
@@ -127,7 +125,7 @@ class HookWidget extends Component {
} }
} }
class ParentWidget extends Component { class ParentWidget extends owl.Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.widgets = { HookWidget }; this.widgets = { HookWidget };
@@ -142,7 +140,7 @@ class ParentWidget extends Component {
} }
} }
const qweb = new QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const widget = new ParentWidget({ qweb }); const widget = new ParentWidget({ qweb });
widget.mount(document.body); widget.mount(document.body);
`; `;
@@ -190,9 +188,7 @@ class Counter extends owl.Component {
constructor(parent, props) { constructor(parent, props) {
super(parent, props); super(parent, props);
this.template = "counter"; this.template = "counter";
this.state = { this.state = { counter: props.initialState || 0 };
counter: props.initialState || 0
};
} }
increment(delta) { increment(delta) {
@@ -225,13 +221,11 @@ class App extends owl.Component {
super(...arguments); super(...arguments);
this.template = "root"; this.template = "root";
this.widgets = { Message }; this.widgets = { Message };
this.state = { this.state = { messages: messages.slice(0, 10) };
messages: messages.slice(0, 10)
};
} }
setMessageCount(n) { setMessageCount(n) {
this.state.messages = messages.slice(0,n); this.state.messages = messages.slice(0, n);
} }
removeMessage(data) { removeMessage(data) {
@@ -368,7 +362,10 @@ const actions = {
}, },
toggleAll({ state, commit }, completed) { toggleAll({ state, commit }, completed) {
state.todos.forEach(todo => { state.todos.forEach(todo => {
commit("editTodo", { id: todo.id, completed }); commit("editTodo", {
id: todo.id,
completed
});
}); });
}, },
editTodo({ commit }, { id, title }) { editTodo({ commit }, { id, title }) {
@@ -379,7 +376,11 @@ const actions = {
const mutations = { const mutations = {
addTodo({ state }, title) { addTodo({ state }, title) {
const id = state.nextId++; const id = state.nextId++;
const todo = { id, title, completed: false }; const todo = {
id,
title,
completed: false
};
state.todos.push(todo); state.todos.push(todo);
}, },
removeTodo({ state }, id) { removeTodo({ state }, id) {
@@ -402,8 +403,15 @@ function makeStore() {
window.localStorage.getItem(LOCALSTORAGE_KEY) || "[]" window.localStorage.getItem(LOCALSTORAGE_KEY) || "[]"
); );
const nextId = Math.max(0, ...todos.map(t => t.id || 0)) + 1; const nextId = Math.max(0, ...todos.map(t => t.id || 0)) + 1;
const state = { todos, nextId }; const state = {
const store = new owl.Store({ state, actions, mutations }); todos,
nextId
};
const store = new owl.Store({
state,
actions,
mutations
});
store.on("update", null, () => { store.on("update", null, () => {
const state = JSON.stringify(store.state.todos); const state = JSON.stringify(store.state.todos);
window.localStorage.setItem(LOCALSTORAGE_KEY, state); window.localStorage.setItem(LOCALSTORAGE_KEY, state);
@@ -467,7 +475,9 @@ class TodoItem extends owl.Component {
// TodoApp // TodoApp
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
function mapStateToProps(state) { function mapStateToProps(state) {
return { todos: state.todos }; return {
todos: state.todos
};
} }
class TodoApp extends owl.Component { class TodoApp extends owl.Component {
@@ -970,16 +980,14 @@ html .clear-completed:active {
} }
`; `;
const RESPONSIVE = `const { Component, QWeb, utils } = owl; const RESPONSIVE = `class SubWidget extends owl.Component {
class SubWidget extends Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.template = "subwidget"; this.template = "subwidget";
} }
} }
class ResponsiveWidget extends Component { class ResponsiveWidget extends owl.Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.template = "responsivewidget"; this.template = "responsivewidget";
@@ -992,7 +1000,7 @@ function isMobile() {
} }
const env = { const env = {
qweb: new QWeb(TEMPLATES), qweb: new owl.QWeb(TEMPLATES),
isMobile: isMobile() isMobile: isMobile()
}; };
@@ -1001,10 +1009,12 @@ widget.mount(document.body);
window.addEventListener( window.addEventListener(
"resize", "resize",
utils.debounce(function() { owl.utils.debounce(function() {
const _isMobile = isMobile(); const _isMobile = isMobile();
if (_isMobile !== env.isMobile) { if (_isMobile !== env.isMobile) {
widget.updateEnv({ isMobile: _isMobile }); widget.updateEnv({
isMobile: _isMobile
});
} }
}, 20) }, 20)
); );
@@ -1039,13 +1049,12 @@ const RESPONSIVE_CSS = `.info {
margin: 30px; margin: 30px;
}`; }`;
const EMPTY = `const {Component, QWeb} = owl; const EMPTY = `class App extends owl.Component {
class Widget extends Component {
} }
const qweb = new QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const widget = new Widget({qweb}); const app = new App({qweb});
widget.mount(document.body); app.mount(document.body);
`; `;
export const SAMPLES = [ export const SAMPLES = [