mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[IMP/FIX] playground: fix and improve various things
The playground hasn't been touched for a while and a few things were broken before this commit: - Exporting as a standalone web application was broken because it still attempted to load the templates like it was done in owl 1 - Resizing the editor tabs still tried to use `this.trigger` While fixing the export feature, the files needed by the app were factored out of hardcoded strings and into real files, as this makes it easier to maintain, since these files get syntax highlighting. The samples received the same treatment: there is now a `samples` folder containing all the samples, it also contains a jsconfig, giving autocompletion on owl functions while editing the files, and allowing the owl import to look how it would when using owl as a node_module. In the browser, this import is translated to the relative path of the owl module using an import map.
This commit is contained in:
Samuel Degueldre
committed by
Géry Debongnie
Géry Debongnie
parent
4b9e6bad0b
commit
9475de4d18
@@ -1,123 +0,0 @@
|
||||
import { loadJS } from "./utils.js";
|
||||
|
||||
const sourceCache = new Map();
|
||||
async function getSourceCode(filePath) {
|
||||
if (sourceCache.has(filePath)) {
|
||||
return sourceCache.get(filePath);
|
||||
}
|
||||
let source = await fetch(`${filePath}.js`);
|
||||
source = await source.text();
|
||||
sourceCache.set(filePath, source);
|
||||
return source;
|
||||
}
|
||||
|
||||
const DEFAULT_HTML = `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OWL App</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<script src="owl.js"></script>
|
||||
<link rel="stylesheet" href="app.css">
|
||||
<script type="module" src="app.js"></script>
|
||||
<script type="module" src="utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
const APP_PY = `#!/usr/bin/env python3
|
||||
|
||||
import threading
|
||||
import time
|
||||
|
||||
from http.server import SimpleHTTPRequestHandler, HTTPServer
|
||||
|
||||
def start_server():
|
||||
SimpleHTTPRequestHandler.extensions_map['.js'] = 'application/javascript'
|
||||
httpd = HTTPServer(('0.0.0.0', 3600), SimpleHTTPRequestHandler)
|
||||
httpd.serve_forever()
|
||||
|
||||
url = 'http://127.0.0.1:3600'
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("Owl Application")
|
||||
print("---------------")
|
||||
print("Server running on: {}".format(url))
|
||||
threading.Thread(target=start_server, daemon=True).start()
|
||||
|
||||
while True:
|
||||
try:
|
||||
time.sleep(1)
|
||||
except KeyboardInterrupt:
|
||||
httpd.server_close()
|
||||
quit(0)
|
||||
`;
|
||||
|
||||
/**
|
||||
* Make a zip file containing a functioning application
|
||||
*/
|
||||
export async function exportStandaloneApp(js, css, xml) {
|
||||
await loadJS("libs/jszip.min.js");
|
||||
|
||||
const zip = new JSZip();
|
||||
const processedJS = js
|
||||
.split("\n")
|
||||
.map(l => (l === "" ? "" : " " + l))
|
||||
.join("\n");
|
||||
|
||||
const JS = `
|
||||
/**
|
||||
* This is the javascript code defined in the playground.
|
||||
* In a larger application, this code should probably be moved in different
|
||||
* sub files.
|
||||
*/
|
||||
import * as utils from "./utils.js";
|
||||
async function app() {
|
||||
${processedJS}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialization code
|
||||
* This code load templates, and make sure everything is properly connected.
|
||||
*/
|
||||
function prepareOWLApp(templates) {
|
||||
const _configure = owl.App.prototype.configure;
|
||||
owl.App.prototype.configure = function configureOverriden(config) {
|
||||
config = Object.assign({ dev: true }, config);
|
||||
this.addTemplates(templates);
|
||||
return _configure.call(this, config);
|
||||
}
|
||||
}
|
||||
|
||||
async function start() {
|
||||
let templates;
|
||||
try {
|
||||
templates = await owl.loadFile('app.xml');
|
||||
} catch(e) {
|
||||
console.error(\`This app requires a static server. If you have python installed, try 'python app.py'\`);
|
||||
return;
|
||||
}
|
||||
prepareOWLApp(templates);
|
||||
app();
|
||||
}
|
||||
|
||||
start();
|
||||
`;
|
||||
|
||||
const [owlSrc, utilsSrc] = await Promise.all([
|
||||
getSourceCode("../owl"),
|
||||
getSourceCode("./utils"),
|
||||
]);
|
||||
|
||||
zip.file("app.js", JS);
|
||||
zip.file("utils.js", utilsSrc);
|
||||
zip.file("app.css", css);
|
||||
zip.file("app.py", APP_PY);
|
||||
zip.file("app.xml", xml);
|
||||
zip.file("index.html", DEFAULT_HTML);
|
||||
zip.file("owl.js", owlSrc);
|
||||
return zip.generateAsync({ type: "blob" });
|
||||
}
|
||||
@@ -6,16 +6,12 @@
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<script src="libs/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="../owl.js"></script>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
|
||||
|
||||
<!-- Application JS/CSS -->
|
||||
<link rel="stylesheet" href="playground.css">
|
||||
<script type="module" src="export_snippet.js"></script>
|
||||
<script type="module" src="utils.js"></script>
|
||||
<script type="module" src="app.js"></script>
|
||||
|
||||
<script type="module" src="playground.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
||||
@@ -20,7 +20,7 @@ body {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 8px 100%;
|
||||
grid-template-columns: auto 8px 1fr;
|
||||
}
|
||||
|
||||
/* LEFT BAR ****************************************/
|
||||
|
||||
@@ -1,7 +1,19 @@
|
||||
import { SAMPLES } from "./samples.js";
|
||||
import { debounce, loadJS } from "./utils.js";
|
||||
import { exportStandaloneApp } from "./export_snippet.js";
|
||||
const { useState, useRef, onMounted, onWillUnmount, onPatched, onWillUpdateProps } = owl;
|
||||
import {
|
||||
App,
|
||||
Component,
|
||||
useState,
|
||||
useRef,
|
||||
onMounted,
|
||||
onWillUnmount,
|
||||
onPatched,
|
||||
onWillUpdateProps,
|
||||
loadFile as _loadFile,
|
||||
whenReady,
|
||||
__info__,
|
||||
useEffect,
|
||||
onWillStart,
|
||||
} from "../owl.js";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Constants, helpers, utils
|
||||
@@ -16,40 +28,38 @@ const MODES = {
|
||||
const DEFAULT_XML = `<templates>
|
||||
</templates>`;
|
||||
|
||||
// Memoize loadFile so that samples aren't reloaded whenever a sample is selected
|
||||
const fileCache = {};
|
||||
const loadFile = (path) => {
|
||||
if (!(path in fileCache)) {
|
||||
fileCache[path] = _loadFile(path);
|
||||
}
|
||||
return fileCache[path];
|
||||
}
|
||||
|
||||
/**
|
||||
* Make an iframe, with all the js, css and xml properly injected.
|
||||
*/
|
||||
function makeCodeIframe(js, css, xml) {
|
||||
const sanitizedXML = xml.replace(/<!--[\s\S]*?-->/g, "").replace(/`/g, '\\\`');
|
||||
// escape backticks in the xml so they don't close the template string
|
||||
const escapedXml = xml.replace(/`/g, '\\\`');
|
||||
|
||||
// create iframe
|
||||
const iframe = document.createElement("iframe");
|
||||
|
||||
iframe.onload = () => {
|
||||
const doc = iframe.contentDocument;
|
||||
const utilsMod = doc.createElement("script");
|
||||
utilsMod.setAttribute("type", "module");
|
||||
utilsMod.setAttribute("src", "utils.js");
|
||||
doc.head.appendChild(utilsMod);
|
||||
// inject js
|
||||
const owlScript = doc.createElement("script");
|
||||
owlScript.type = "text/javascript";
|
||||
owlScript.src = "../owl.js";
|
||||
owlScript.addEventListener("load", () => {
|
||||
const script = doc.createElement("script");
|
||||
script.type = "module";
|
||||
const content = `
|
||||
(async function(TEMPLATES) {
|
||||
${js}
|
||||
})(\`${sanitizedXML}\`)`;
|
||||
script.innerHTML = content;
|
||||
doc.body.appendChild(script);
|
||||
});
|
||||
doc.head.appendChild(owlScript);
|
||||
|
||||
// inject css
|
||||
const importMap = doc.createElement("script");
|
||||
importMap.type = "importmap";
|
||||
importMap.textContent = `{ "imports": { "@odoo/owl": "../owl.js" } }`;
|
||||
doc.head.appendChild(importMap);
|
||||
|
||||
const script = doc.createElement("script");
|
||||
script.type = "module";
|
||||
script.textContent = `const TEMPLATES = \`${escapedXml}\`\n${js}`;
|
||||
doc.body.appendChild(script);
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.innerHTML = css;
|
||||
style.innerText = css;
|
||||
doc.head.appendChild(style);
|
||||
};
|
||||
return iframe;
|
||||
@@ -58,53 +68,84 @@ function makeCodeIframe(js, css, xml) {
|
||||
//------------------------------------------------------------------------------
|
||||
// SAMPLES
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
const SAMPLES = [
|
||||
{
|
||||
description: "Components",
|
||||
folder: "components",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Form Input Bindings",
|
||||
folder: "form",
|
||||
code: ["js", "xml"],
|
||||
},
|
||||
{
|
||||
description: "Inline templates",
|
||||
folder: "single_file_component",
|
||||
code: ["js"],
|
||||
},
|
||||
{
|
||||
description: "Lifecycle demo",
|
||||
folder: "lifecycle_demo",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Customized hook",
|
||||
folder: "custom_hooks",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Todo List App (with reactivity)",
|
||||
folder: "todo_app",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Responsive app",
|
||||
folder: "responsive_app",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Slots And Generic Components",
|
||||
folder: "slots",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Window Management System",
|
||||
folder: "window_manager",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
{
|
||||
description: "Benchmark example",
|
||||
folder: "benchmark",
|
||||
code: ["js", "xml", "css"],
|
||||
},
|
||||
]
|
||||
|
||||
function loadSamples() {
|
||||
let result = SAMPLES.slice();
|
||||
const result = SAMPLES.map(({ description, folder, code }) => ({
|
||||
description,
|
||||
code: async () => Object.fromEntries(
|
||||
await Promise.all(
|
||||
code.map(async (type) => [type, await loadFile(`./samples/${folder}/${folder}.${type}`)])
|
||||
)
|
||||
),
|
||||
}));
|
||||
const localSample = localStorage.getItem("owl-playground-local-sample");
|
||||
if (localSample) {
|
||||
const { js, css, xml } = JSON.parse(localSample);
|
||||
result.unshift({
|
||||
description: "Local Storage Code",
|
||||
code: js,
|
||||
xml,
|
||||
css
|
||||
code: () => Promise.resolve({ js, xml, css }),
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function saveLocalSample(js, css, xml) {
|
||||
const str = JSON.stringify({ js, css, xml });
|
||||
localStorage.setItem("owl-playground-local-sample", str);
|
||||
}
|
||||
|
||||
function deleteLocalSample() {
|
||||
localStorage.removeItem("owl-playground-local-sample");
|
||||
}
|
||||
|
||||
function useSamples() {
|
||||
const samples = loadSamples();
|
||||
const component = owl.useComponent();
|
||||
let interval;
|
||||
|
||||
onMounted(() => {
|
||||
const state = component.state;
|
||||
interval = setInterval(() => {
|
||||
if (component.isDirty) {
|
||||
saveLocalSample(state.js, state.css, state.xml);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
clearInterval(interval);
|
||||
});
|
||||
return samples;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tabbed editor
|
||||
//------------------------------------------------------------------------------
|
||||
class TabbedEditor extends owl.Component {
|
||||
class TabbedEditor extends Component {
|
||||
setup() {
|
||||
const props = this.props;
|
||||
this.state = useState({
|
||||
@@ -168,7 +209,7 @@ class TabbedEditor extends owl.Component {
|
||||
const resizer = ev => {
|
||||
const delta = ev.clientY - y;
|
||||
y = ev.clientY;
|
||||
this.trigger("updatePanelHeight", { delta });
|
||||
this.props.updatePanelHeight({ delta });
|
||||
};
|
||||
document.body.addEventListener("mousemove", resizer);
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
@@ -205,36 +246,53 @@ TabbedEditor.template = "TabbedEditor";
|
||||
//------------------------------------------------------------------------------
|
||||
// MAIN APP
|
||||
//------------------------------------------------------------------------------
|
||||
class App extends owl.Component {
|
||||
class Playground extends Component {
|
||||
static template = "Playground";
|
||||
static components = { TabbedEditor };
|
||||
setup() {
|
||||
this.version = owl.__info__.version;
|
||||
this.SAMPLES = useSamples();
|
||||
this.isDirty = false;
|
||||
this.version = __info__.version;
|
||||
|
||||
this.isDirty = false;
|
||||
this.state = useState({
|
||||
js: this.SAMPLES[0].code,
|
||||
css: this.SAMPLES[0].css || "",
|
||||
xml: this.SAMPLES[0].xml || DEFAULT_XML,
|
||||
js: "",
|
||||
css: "",
|
||||
xml: DEFAULT_XML,
|
||||
displayWelcome: true,
|
||||
splitLayout: true,
|
||||
leftPaneWidth: Math.ceil(window.innerWidth / 2),
|
||||
topPanelHeight: null
|
||||
});
|
||||
|
||||
this.toggleLayout = debounce(this.toggleLayout, 250, true);
|
||||
this.runCode = debounce(this.runCode, 250, true);
|
||||
this.downloadCode = debounce(this.downloadCode, 250, true);
|
||||
this.content = useRef("content");
|
||||
this.updateCode = this.updateCode.bind(this);
|
||||
this.samples = loadSamples();
|
||||
if (window.location.hash) {
|
||||
try {
|
||||
const { js, css, xml } = JSON.parse(atob(decodeURIComponent(window.location.hash.slice(1))));
|
||||
if (![js, css, xml].every(item => typeof item === "string")) {
|
||||
return;
|
||||
if ([js, css, xml].every(item => typeof item === "string")) {
|
||||
Object.assign(this.state, { js, css, xml });
|
||||
}
|
||||
Object.assign(this.state, { js, css, xml });
|
||||
} catch {}
|
||||
}
|
||||
onWillStart(async () => {
|
||||
if (!this.state.js) {
|
||||
this.setSample(await this.samples[0].code());
|
||||
}
|
||||
})
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
if (this.isDirty) {
|
||||
const { js, css, xml } = this.state;
|
||||
const str = JSON.stringify({ js, css, xml });
|
||||
localStorage.setItem("owl-playground-local-sample", str);
|
||||
}
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, () => []);
|
||||
|
||||
this.toggleLayout = debounce(this.toggleLayout, 250, true);
|
||||
this.runCode = debounce(this.runCode, 250, true);
|
||||
this.exportStandaloneApp = debounce(this.exportStandaloneApp, 250, true);
|
||||
this.content = useRef("content");
|
||||
this.updateCode = this.updateCode.bind(this);
|
||||
}
|
||||
|
||||
runCode() {
|
||||
@@ -258,12 +316,11 @@ class App extends owl.Component {
|
||||
window.location.href = link.href;
|
||||
}
|
||||
|
||||
setSample(ev) {
|
||||
const sample = this.SAMPLES.find(s => s.description === ev.target.value);
|
||||
this.state.js = sample.code;
|
||||
setSample(sample) {
|
||||
this.state.js = sample.js;
|
||||
this.state.css = sample.css || "";
|
||||
this.state.xml = sample.xml || DEFAULT_XML;
|
||||
deleteLocalSample();
|
||||
localStorage.removeItem("owl-playground-local-sample");
|
||||
this.isDirty = false;
|
||||
}
|
||||
|
||||
@@ -271,14 +328,14 @@ class App extends owl.Component {
|
||||
return `width:${this.state.leftPaneWidth}px`;
|
||||
}
|
||||
|
||||
get rightPaneStyle() {
|
||||
return `width:${window.innerWidth - 6 - this.state.leftPaneWidth}px`;
|
||||
}
|
||||
|
||||
get topEditorStyle() {
|
||||
return `flex: 0 0 ${this.state.topPanelHeight}px`;
|
||||
}
|
||||
|
||||
async onSampleChange(ev) {
|
||||
this.setSample(await this.samples.find(s => s.description === ev.target.value).code());
|
||||
}
|
||||
|
||||
onMouseDown() {
|
||||
const resizer = ev => {
|
||||
this.state.leftPaneWidth = ev.clientX;
|
||||
@@ -305,39 +362,40 @@ class App extends owl.Component {
|
||||
toggleLayout() {
|
||||
this.state.splitLayout = !this.state.splitLayout;
|
||||
}
|
||||
updatePanelHeight(ev) {
|
||||
if (!ev.detail.delta) {
|
||||
return;
|
||||
}
|
||||
let height = this.state.topPanelHeight;
|
||||
if (!height) {
|
||||
height = document.getElementsByClassName("tabbed-editor")[0].clientHeight;
|
||||
}
|
||||
this.state.topPanelHeight = height + ev.detail.delta;
|
||||
updatePanelHeight({ delta }) {
|
||||
let height = this.state.topPanelHeight || document.querySelector(".tabbed-editor").clientHeight;
|
||||
this.state.topPanelHeight = height + delta;
|
||||
}
|
||||
|
||||
async downloadCode() {
|
||||
async exportStandaloneApp() {
|
||||
const { js, css, xml } = this.state;
|
||||
const content = await exportStandaloneApp(js, css, xml);
|
||||
|
||||
await loadJS("libs/jszip.min.js");
|
||||
const zip = new JSZip();
|
||||
zip.file("app.py", await loadFile("./standalone_app/app.py"));
|
||||
zip.file("index.html", await loadFile("./standalone_app/index.html"));
|
||||
zip.file("owl.js", await loadFile("../owl.js"));
|
||||
zip.file("app.js", `const TEMPLATES = await (await fetch('app.xml')).text();\n${js}`);
|
||||
zip.file("app.css", css);
|
||||
zip.file("app.xml", xml);
|
||||
|
||||
await loadJS("libs/FileSaver.min.js");
|
||||
saveAs(content, "app.zip");
|
||||
saveAs(await zip.generateAsync({ type: "blob" }), "app.zip");
|
||||
}
|
||||
}
|
||||
App.components = { TabbedEditor };
|
||||
App.template = "App";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Application initialization
|
||||
//------------------------------------------------------------------------------
|
||||
async function start() {
|
||||
document.title = `${document.title} (v${owl.__info__.version})`;
|
||||
const commit = `https://github.com/odoo/owl/commit/${owl.__info__.hash}`;
|
||||
document.title = `${document.title} (v${__info__.version})`;
|
||||
const commit = `https://github.com/odoo/owl/commit/${__info__.hash}`;
|
||||
console.info(`This application is using Owl built with the following commit:`, commit);
|
||||
const [templates] = await Promise.all([
|
||||
owl.loadFile("templates.xml"),
|
||||
owl.whenReady()
|
||||
loadFile("templates.xml"),
|
||||
whenReady()
|
||||
]);
|
||||
const rootApp = new owl.App(App);
|
||||
const rootApp = new App(Playground);
|
||||
rootApp.addTemplates(templates);
|
||||
|
||||
await rootApp.mount(document.body);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,11 @@
|
||||
tr.danger {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.remove:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
.remove {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Component, mount, useState, onPatched} from "@odoo/owl";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Data generation
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
let idCounter = 1;
|
||||
const adjectives = [
|
||||
"pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain",
|
||||
"quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd",
|
||||
"unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
|
||||
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
|
||||
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
|
||||
|
||||
function _random (max) { return Math.round(Math.random() * 1000) % max; };
|
||||
|
||||
function buildData(count) {
|
||||
const data = new Array(count);
|
||||
for (let i = 0; i < count; i++) {
|
||||
const label = `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`;
|
||||
data[i] = {
|
||||
id: idCounter++,
|
||||
label,
|
||||
};
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Components
|
||||
// -----------------------------------------------------------------------------
|
||||
class Button extends Component {
|
||||
static template = "Button";
|
||||
}
|
||||
|
||||
|
||||
class Row extends Component {
|
||||
static template = "Row";
|
||||
}
|
||||
|
||||
class Root extends Component {
|
||||
static template = "Root";
|
||||
static components = { Button, Row };
|
||||
|
||||
setup() {
|
||||
this.state = useState({
|
||||
rows: [],
|
||||
selectedRowId: null
|
||||
});
|
||||
this.benchmarking = false;
|
||||
onPatched(() => {
|
||||
if (this.benchmarking) {
|
||||
this.stop();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
start(descr) {
|
||||
this.benchmarking = `[${descr}]`;
|
||||
console.time(this.benchmarking);
|
||||
}
|
||||
stop() {
|
||||
console.timeEnd(this.benchmarking);
|
||||
this.benchmarking = false;
|
||||
}
|
||||
|
||||
run() {
|
||||
this.start('add1000');
|
||||
this.state.rows = buildData(1000);
|
||||
this.state.selectedRowId = null;
|
||||
}
|
||||
|
||||
runLots() {
|
||||
this.start('add10_000');
|
||||
this.state.rows = buildData(10_000);
|
||||
this.state.selectedRowId = null;
|
||||
}
|
||||
|
||||
add() {
|
||||
this.start('append1000');
|
||||
this.state.rows = this.state.rows.concat(buildData(1000));
|
||||
}
|
||||
|
||||
update() {
|
||||
this.start('update1/10th');
|
||||
let index = 0;
|
||||
const rows = this.state.rows;
|
||||
while (index < rows.length) {
|
||||
rows[index].label = rows[index].label + " !!!";
|
||||
index += 10;
|
||||
}
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.start('clear');
|
||||
this.state.rows = [];
|
||||
this.state.selectedRowId = null;
|
||||
}
|
||||
|
||||
swapRows() {
|
||||
this.start('swap');
|
||||
const rows = this.state.rows;
|
||||
if (rows.length > 998) {
|
||||
let tmp = rows[1];
|
||||
rows[1] = rows[998];
|
||||
rows[998] = tmp;
|
||||
}
|
||||
}
|
||||
|
||||
selectRow(id) {
|
||||
this.start('select');
|
||||
this.state.selectedRowId = id;
|
||||
}
|
||||
|
||||
removeRow(id) {
|
||||
this.start('remove1');
|
||||
const rows = this.state.rows;
|
||||
rows.splice(rows.findIndex(row => row.id === id), 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// dev=false for benchmarking. we don't want to benchmark dev code!
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: false });
|
||||
@@ -0,0 +1,52 @@
|
||||
<templates>
|
||||
<t t-name="Button">
|
||||
<div class='col-sm-6 smallpad'>
|
||||
<button t-att-id="props.id" class='btn btn-primary btn-block' type='button' t-on-click="props.onClick">
|
||||
<t t-esc="props.text"/>
|
||||
</button>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="Row">
|
||||
<tr t-att-class="props.isSelected ? 'danger' : ''">
|
||||
<td class="col-md-1" t-esc="props.row.id" />
|
||||
<td class="col-md-4">
|
||||
<a t-on-click="() => props.onSelect(props.row.id)" t-esc="props.row.label" />
|
||||
</td>
|
||||
<td class="col-md-1">
|
||||
<a t-on-click="() => props.onRemove(props.row.id)" class="remove">[x]
|
||||
<span class='glyphicon glyphicon-remove' aria-hidden="true" />
|
||||
</a>
|
||||
</td>
|
||||
<td class='col-md-6'/>
|
||||
</tr>
|
||||
</t>
|
||||
<t t-name="Root">
|
||||
<div class='container'>
|
||||
<div class='jumbotron'>
|
||||
<div class='row'>
|
||||
<div class='col-md-6'>
|
||||
<h1>Owl Keyed</h1>
|
||||
</div>
|
||||
<div class='col-md-6'>
|
||||
<div class='row'>
|
||||
<Button id="'run'" onClick.bind="run" text="'Create 1,000 rows'" />
|
||||
<Button id="'runlots'" onClick.bind="runLots" text="'Create 10,000 rows'" />
|
||||
<Button id="'add'" onClick.bind="add" text="'Append 1,000 rows'" />
|
||||
<Button id="'update'" onClick.bind="update" text="'Update every 10th row'" />
|
||||
<Button id="'clear'" onClick.bind="clear" text="'Clear'" />
|
||||
<Button id="'swaprows'" onClick.bind="swapRows" text="'Swap Rows'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class='table table-hover table-striped test-data'>
|
||||
<tbody>
|
||||
<t t-foreach="state.rows" t-as="row" t-key="row.id">
|
||||
<Row row="row" isSelected="row.id === state.selectedRowId" onSelect.bind="selectRow" onRemove.bind="removeRow"/>
|
||||
</t>
|
||||
</tbody>
|
||||
</table>
|
||||
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -0,0 +1,10 @@
|
||||
.greeter {
|
||||
font-size: 20px;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
background-color: #eeeeee;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
// In this example, we show how components can be defined and created.
|
||||
import { Component, useState, mount } from "@odoo/owl";
|
||||
|
||||
class Greeter extends Component {
|
||||
static template = "Greeter";
|
||||
|
||||
setup() {
|
||||
this.state = useState({ word: 'Hello' });
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.state.word = this.state.word === 'Hi' ? 'Hello' : 'Hi';
|
||||
}
|
||||
}
|
||||
|
||||
// Main root component
|
||||
class Root extends Component {
|
||||
static components = { Greeter };
|
||||
static template = "Root"
|
||||
|
||||
setup() {
|
||||
this.state = useState({ name: 'World'});
|
||||
}
|
||||
}
|
||||
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: true });
|
||||
@@ -0,0 +1,9 @@
|
||||
<templates>
|
||||
<div t-name="Greeter" class="greeter" t-on-click="toggle">
|
||||
<t t-esc="state.word"/>, <t t-esc="props.name"/>
|
||||
</div>
|
||||
|
||||
<t t-name="Root">
|
||||
<Greeter name="state.name"/>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -0,0 +1,6 @@
|
||||
|
||||
button {
|
||||
width: 120px;
|
||||
height: 35px;
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
// In this example, we show how hooks can be used or defined.
|
||||
import { Component, mount, useState, onWillDestroy } from "@odoo/owl";
|
||||
|
||||
// We define here a custom behaviour: this hook tracks the state of the mouse
|
||||
// position
|
||||
function useMouse() {
|
||||
const position = useState({x:0, y: 0});
|
||||
|
||||
function update(e) {
|
||||
position.x = e.clientX;
|
||||
position.y = e.clientY;
|
||||
}
|
||||
window.addEventListener('mousemove', update);
|
||||
onWillDestroy(() => {
|
||||
window.removeEventListener('mousemove', update);
|
||||
});
|
||||
|
||||
return position;
|
||||
}
|
||||
|
||||
|
||||
// Main root component
|
||||
class Root extends Component {
|
||||
static template = "Root";
|
||||
|
||||
setup() {
|
||||
// simple state hook (reactive object)
|
||||
this.counter = useState({ value: 0 });
|
||||
|
||||
// this hooks is bound to the 'mouse' property.
|
||||
this.mouse = useMouse();
|
||||
}
|
||||
|
||||
increment() {
|
||||
this.counter.value++;
|
||||
}
|
||||
}
|
||||
|
||||
// Application setup
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: true });
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
<templates>
|
||||
<div t-name="Root">
|
||||
<button t-on-click="increment">Click! <t t-esc="counter.value"/></button>
|
||||
<div>Mouse: <t t-esc="mouse.x"/>, <t t-esc="mouse.y"/></div>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -0,0 +1,22 @@
|
||||
// This example illustrate how the t-model directive can be used to synchronize
|
||||
// data between html inputs (and select/textareas) and the state of a component.
|
||||
// Note that there are two controls with t-model="color": they are totally
|
||||
// synchronized.
|
||||
import { Component, useState, mount } from "@odoo/owl";
|
||||
|
||||
class Form extends Component {
|
||||
static template = "Form";
|
||||
|
||||
setup() {
|
||||
this.state = useState({
|
||||
text: "",
|
||||
othertext: "",
|
||||
number: 11,
|
||||
color: "",
|
||||
bool: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Application setup
|
||||
mount(Form, document.body, { templates: TEMPLATES, dev: true });
|
||||
@@ -0,0 +1,37 @@
|
||||
<templates>
|
||||
<div t-name="Form">
|
||||
<h1>Form</h1>
|
||||
<div>
|
||||
Text (immediate): <input t-model="state.text"/>
|
||||
</div>
|
||||
<div>
|
||||
Other text (lazy): <input t-model.lazy="state.othertext"/>
|
||||
</div>
|
||||
<div>
|
||||
Number: <input t-model.number="state.number"/>
|
||||
</div>
|
||||
<div>
|
||||
Boolean: <input type="checkbox" t-model="state.bool"/>
|
||||
</div>
|
||||
<div>
|
||||
Color, with a select:
|
||||
<select t-model="state.color">
|
||||
<option value="">Select a color</option>
|
||||
<option value="red">Red</option>
|
||||
<option value="blue">Blue</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
Color, with radio buttons:
|
||||
<span><input type="radio" name="color" id="red" value="red" t-model="state.color"/><label for="red">Red</label></span>
|
||||
<span><input type="radio" name="color" id="blue" value="blue" t-model="state.color"/><label for="blue">Blue</label></span>
|
||||
</div>
|
||||
<hr/>
|
||||
<h1>State</h1>
|
||||
<div>Text: <t t-esc="state.text"/></div>
|
||||
<div>Other Text: <t t-esc="state.othertext"/></div>
|
||||
<div>Number: <t t-esc="state.number"/></div>
|
||||
<div>Boolean: <t t-if="state.bool">True</t><t t-else="">False</t></div>
|
||||
<div>Color: <t t-esc="state.color"/></div>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"owl": ["../../../src/index.ts"],
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
button {
|
||||
font-size: 18px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
background-color: #dddddd;
|
||||
width: 250px;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// This example shows all the possible lifecycle hooks
|
||||
//
|
||||
// The root component controls a sub component (DemoComponent). It logs all its lifecycle
|
||||
// methods in the console. Try modifying its state by clicking on it, or by
|
||||
// clicking on the two main buttons, and look into the console to see what
|
||||
// happens.
|
||||
import {
|
||||
Component,
|
||||
useState,
|
||||
mount,
|
||||
useComponent,
|
||||
onWillStart,
|
||||
onMounted,
|
||||
onWillUnmount,
|
||||
onWillUpdateProps,
|
||||
onPatched,
|
||||
onWillPatch,
|
||||
onWillRender,
|
||||
onRendered,
|
||||
onWillDestroy,
|
||||
} from "@odoo/owl";
|
||||
|
||||
function useLogLifecycle() {
|
||||
const component = useComponent();
|
||||
const name = component.constructor.name;
|
||||
onWillStart(() => console.log(`${name}:willStart`));
|
||||
onMounted(() => console.log(`${name}:mounted`));
|
||||
onWillUpdateProps(() => console.log(`${name}:willUpdateProps`));
|
||||
onWillRender(() => console.log(`${name}:willRender`));
|
||||
onRendered(() => console.log(`${name}:rendered`));
|
||||
onWillPatch(() => console.log(`${name}:willPatch`));
|
||||
onPatched(() => console.log(`${name}:patched`));
|
||||
onWillUnmount(() => console.log(`${name}:willUnmount`));
|
||||
onWillDestroy(() => console.log(`${name}:willDestroy`));
|
||||
}
|
||||
|
||||
class DemoComponent extends Component {
|
||||
static template = "DemoComponent";
|
||||
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
this.state = useState({ n: 0 });
|
||||
}
|
||||
increment() {
|
||||
this.state.n++;
|
||||
}
|
||||
}
|
||||
|
||||
class Root extends Component {
|
||||
static template = "Root";
|
||||
static components = { DemoComponent };
|
||||
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
this.state = useState({ n: 0, flag: true });
|
||||
}
|
||||
|
||||
increment() {
|
||||
this.state.n++;
|
||||
}
|
||||
|
||||
toggleSubComponent() {
|
||||
this.state.flag = !this.state.flag;
|
||||
}
|
||||
}
|
||||
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: true });
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
<templates>
|
||||
<div t-name="DemoComponent" t-on-click="increment" class="demo">
|
||||
<div>Demo Sub Component</div>
|
||||
<div>(click on me to update me)</div>
|
||||
<div>Props: <t t-esc="props.n"/>, State: <t t-esc="state.n"/>. </div>
|
||||
</div>
|
||||
|
||||
<div t-name="Root">
|
||||
<button t-on-click="increment">Increment Parent State</button>
|
||||
<button t-on-click="toggleSubComponent">Toggle SubComponent</button>
|
||||
<div t-if="state.flag">
|
||||
<DemoComponent n="state.n"/>
|
||||
</div>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -0,0 +1,56 @@
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app.desktop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
flex: 0 0 30px;
|
||||
height: 30px;
|
||||
background-color: cadetblue;
|
||||
color: white;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.controlpanel {
|
||||
flex: 0 0 100px;
|
||||
height: 100px;
|
||||
background-color: #dddddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.formview {
|
||||
overflow-y: auto;
|
||||
flex: 1 1 60%;
|
||||
min-height: 200px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.chatter {
|
||||
overflow-y: auto;
|
||||
flex: 1 1 40%;
|
||||
background-color: #eeeeee;
|
||||
color: #333333;
|
||||
padding: 8px;
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
// In this example, we show how one can design an application that is responsive:
|
||||
// its UI is different in mobile mode or in desktop mode.
|
||||
//
|
||||
// The main idea is to have a "isMobile" key in the environment, then listen
|
||||
// to resize events and update the env if needed. Then, the whole interface
|
||||
// will be updated, creating and destroying components as needed.
|
||||
//
|
||||
// To see this in action, try resizing the window. The application will switch
|
||||
// to mobile mode whenever it has less than 768px.
|
||||
import { Component, useState, mount, reactive, useEnv } from "@odoo/owl";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
let timeout;
|
||||
return function () {
|
||||
const context = this;
|
||||
const args = arguments;
|
||||
function later() {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
}
|
||||
const callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Responsive hook
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
function createUI() {
|
||||
const getIsMobile = () => window.innerWidth <= 768;
|
||||
|
||||
const ui = reactive({ isMobile: getIsMobile() });
|
||||
|
||||
const updateEnv = debounce(() => {
|
||||
const isMobile = getIsMobile();
|
||||
if (ui.isMobile !== isMobile) {
|
||||
ui.isMobile = isMobile;
|
||||
}
|
||||
}, 15);
|
||||
window.addEventListener("resize", updateEnv);
|
||||
return ui;
|
||||
}
|
||||
|
||||
function useUI() {
|
||||
const env = useEnv();
|
||||
return useState(env.ui);
|
||||
}
|
||||
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Components
|
||||
//------------------------------------------------------------------------------
|
||||
class Navbar extends Component {
|
||||
static template = "Navbar";
|
||||
}
|
||||
|
||||
class MobileSearchView extends Component {
|
||||
static template = "MobileSearchView";
|
||||
}
|
||||
|
||||
class ControlPanel extends Component {
|
||||
static template = "ControlPanel";
|
||||
static components = { MobileSearchView };
|
||||
setup() {
|
||||
this.ui = useUI();
|
||||
}
|
||||
}
|
||||
|
||||
class AdvancedComponent extends Component {
|
||||
static template = "AdvancedComponent";
|
||||
}
|
||||
|
||||
class FormView extends Component {
|
||||
static template = "FormView";
|
||||
static components = { AdvancedComponent };
|
||||
setup() {
|
||||
this.ui = useUI();
|
||||
}
|
||||
}
|
||||
|
||||
class Chatter extends Component {
|
||||
static template = "Chatter";
|
||||
|
||||
setup() {
|
||||
this.messages = Array.from(Array(100).keys());
|
||||
}
|
||||
}
|
||||
|
||||
class Root extends Component {
|
||||
static template = "Root";
|
||||
static components = { Navbar, ControlPanel, FormView, Chatter };
|
||||
|
||||
setup() {
|
||||
this.ui = useUI();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Application Startup
|
||||
//------------------------------------------------------------------------------
|
||||
const env = {
|
||||
ui: createUI()
|
||||
};
|
||||
|
||||
mount(Root, document.body, { templates: TEMPLATES, env, dev: true });
|
||||
@@ -0,0 +1,42 @@
|
||||
<templates>
|
||||
<div t-name="Navbar" class="navbar">Navbar</div>
|
||||
|
||||
<div t-name="ControlPanel" class="controlpanel">
|
||||
<h2>Control Panel</h2>
|
||||
<MobileSearchView t-if="ui.isMobile" />
|
||||
</div>
|
||||
|
||||
<div t-name="FormView" class="formview">
|
||||
<h2>Form View</h2>
|
||||
<AdvancedComponent t-if="!ui.isMobile" />
|
||||
</div>
|
||||
|
||||
<div t-name="Chatter" class="chatter">
|
||||
<h2>Chatter</h2>
|
||||
<t t-foreach="messages" t-as="item" t-key="item"><div>Message <t t-esc="item"/></div></t>
|
||||
</div>
|
||||
|
||||
<div t-name="MobileSearchView">Mobile searchview</div>
|
||||
|
||||
<div t-name="AdvancedComponent">
|
||||
This component is only created in desktop mode.
|
||||
<button>Button!</button>
|
||||
</div>
|
||||
|
||||
<t t-name="maincontent">
|
||||
<FormView />
|
||||
<Chatter />
|
||||
</t>
|
||||
<div t-name="Root" class="app" t-att-class="{mobile: ui.isMobile, desktop: !ui.isMobile}">
|
||||
<Navbar/>
|
||||
<ControlPanel/>
|
||||
<div class="content-wrapper" t-if="!ui.isMobile">
|
||||
<div class="content">
|
||||
<t t-call="maincontent"/>
|
||||
</div>
|
||||
</div>
|
||||
<t t-else="">
|
||||
<t t-call="maincontent"/>
|
||||
</t>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -0,0 +1,28 @@
|
||||
// This example illustrates how one can write Owl components with
|
||||
// inline templates.
|
||||
|
||||
import { Component, useState, xml, mount } from "@odoo/owl";
|
||||
|
||||
// Counter component
|
||||
class Counter extends Component {
|
||||
static template = xml`
|
||||
<button t-on-click="() => state.value++">
|
||||
Click! [<t t-esc="state.value"/>]
|
||||
</button>`;
|
||||
|
||||
state = useState({ value: 0 })
|
||||
}
|
||||
|
||||
// Root
|
||||
class Root extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Counter/>
|
||||
<Counter/>
|
||||
</div>`;
|
||||
|
||||
static components = { Counter };
|
||||
}
|
||||
|
||||
// Application setup
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: true});
|
||||
@@ -0,0 +1,43 @@
|
||||
.main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #eeeeee;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
.card.full {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.card.small {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
flex: 0 0 25px;
|
||||
font-weight: bold;
|
||||
background-color: darkcyan;
|
||||
color: white;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.card-title button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1 1 auto;
|
||||
padding: 5px;
|
||||
border-top: 1px solid white;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: 1px solid white;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
// We show here how slots can be used to create generic components.
|
||||
// In this example, the Card component is basically only a container. It is not
|
||||
// aware of its content. It just knows where it should be (with t-slot).
|
||||
// The parent component define the content with t-set-slot.
|
||||
//
|
||||
// Note that the t-on-click event, defined in the Root template, is executed in
|
||||
// the context of the Root component, even though it is inside the Card component
|
||||
import { Component, useState, mount } from "@odoo/owl";
|
||||
|
||||
class Card extends Component {
|
||||
static template = "Card";
|
||||
|
||||
setup() {
|
||||
this.state = useState({ showContent: true });
|
||||
}
|
||||
|
||||
toggleDisplay() {
|
||||
this.state.showContent = !this.state.showContent;
|
||||
}
|
||||
}
|
||||
|
||||
class Counter extends Component {
|
||||
static template = "Counter";
|
||||
|
||||
setup() {
|
||||
this.state = useState({val: 1});
|
||||
}
|
||||
|
||||
inc() {
|
||||
this.state.val++;
|
||||
}
|
||||
}
|
||||
|
||||
// Main root component
|
||||
class Root extends Component {
|
||||
static template = "Root"
|
||||
static components = { Card, Counter };
|
||||
|
||||
setup() {
|
||||
this.state = useState({a: 1, b: 3});
|
||||
}
|
||||
|
||||
inc(key, delta) {
|
||||
this.state[key] += delta;
|
||||
}
|
||||
}
|
||||
|
||||
// Application setup
|
||||
mount(Root, document.body, { templates: TEMPLATES, dev: true});
|
||||
@@ -0,0 +1,33 @@
|
||||
<templates>
|
||||
<div t-name="Card" class="card" t-att-class="state.showContent ? 'full' : 'small'">
|
||||
<div class="card-title">
|
||||
<t t-esc="props.title"/><button t-on-click="toggleDisplay">Toggle</button>
|
||||
</div>
|
||||
<t t-if="state.showContent">
|
||||
<div class="card-content" >
|
||||
<t t-slot="content"/>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<t t-slot="footer"/>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
<div t-name="Counter">
|
||||
<t t-esc="state.val"/><button t-on-click="inc">Inc</button>
|
||||
</div>
|
||||
|
||||
<div t-name="Root" class="main">
|
||||
<Card title="'Title card A'">
|
||||
<t t-set-slot="content">Content of card 1... [<t t-esc="state.a"/>]</t>
|
||||
<t t-set-slot="footer"><button t-on-click="() => this.inc('a', 1)">Increment A</button></t>
|
||||
</Card>
|
||||
<Card title="'Title card B'">
|
||||
<t t-set-slot="content">
|
||||
<div>Card 2... [<t t-esc="state.b"/>]</div>
|
||||
<Counter />
|
||||
</t>
|
||||
<t t-set-slot="footer"><button t-on-click="() => this.inc('b', -1)">Decrement B</button></t>
|
||||
</Card>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -0,0 +1,379 @@
|
||||
html,body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #f5f5f5;
|
||||
color: #4d4d4d;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todoapp {
|
||||
background: #fff;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp h1 {
|
||||
position: absolute;
|
||||
top: -155px;
|
||||
width: 100%;
|
||||
font-size: 100px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
color: rgba(175, 47, 47, 0.15);
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
border: 1px solid #999;
|
||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border: none; /* Mobile Safari */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.toggle-all + label {
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
top: -52px;
|
||||
left: -13px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.toggle-all + label:before {
|
||||
content: "❯";
|
||||
font-size: 22px;
|
||||
color: #e6e6e6;
|
||||
padding: 10px 27px 10px 27px;
|
||||
}
|
||||
|
||||
.toggle-all:checked + label:before {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.todo-list li.editing .edit {
|
||||
display: block;
|
||||
width: calc(100% - 43px);
|
||||
padding: 12px 16px;
|
||||
margin: 0 0 0 43px;
|
||||
}
|
||||
|
||||
.todo-list li.editing .view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
border: none; /* Mobile Safari */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.todo-list li .toggle + label {
|
||||
/*
|
||||
Firefox requires \`#\` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the \`#\` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||
*/
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
.todo-list li .toggle:checked + label {
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.todo-list li label {
|
||||
word-break: break-all;
|
||||
padding: 15px 15px 15px 60px;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
|
||||
.todo-list li.completed label {
|
||||
color: #d9d9d9;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.todo-list li .destroy {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
font-size: 30px;
|
||||
color: #cc9a9a;
|
||||
margin-bottom: 11px;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:hover {
|
||||
color: #af5b5e;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:after {
|
||||
content: "×";
|
||||
}
|
||||
|
||||
.todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #777;
|
||||
padding: 10px 15px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.footer:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
|
||||
0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
|
||||
0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.filters li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.filters li a {
|
||||
color: inherit;
|
||||
margin: 3px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.filters li a:hover {
|
||||
border-color: rgba(175, 47, 47, 0.1);
|
||||
}
|
||||
|
||||
.filters li a.selected {
|
||||
border-color: rgba(175, 47, 47, 0.2);
|
||||
}
|
||||
|
||||
.clear-completed,
|
||||
html .clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clear-completed:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 65px auto 0;
|
||||
color: #bfbfbf;
|
||||
font-size: 10px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
.toggle-all,
|
||||
.todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.filters a {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
// This example is an implementation of the TodoList application, from the
|
||||
// www.todomvc.com project. This is a non trivial application with some
|
||||
// interesting user interactions. It uses the local storage for persistence.
|
||||
//
|
||||
// In this implementation, we use the owl reactivity mechanism.
|
||||
import { Component, useState, mount, useRef, reactive, useEnv, useEffect } from "@odoo/owl";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Constants, helpers
|
||||
//------------------------------------------------------------------------------
|
||||
const ENTER_KEY = 13;
|
||||
const ESC_KEY = 27;
|
||||
|
||||
function useAutofocus(name) {
|
||||
let ref = useRef(name);
|
||||
useEffect(el => el && el.focus(), () => [ref.el]);
|
||||
}
|
||||
|
||||
function useStore() {
|
||||
const env = useEnv();
|
||||
return useState(env.store);
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Task store
|
||||
//------------------------------------------------------------------------------
|
||||
class TaskList {
|
||||
constructor(tasks) {
|
||||
this.tasks = tasks || [];
|
||||
const taskIds = this.tasks.map((t) => t.id);
|
||||
this.nextId = taskIds.length ? Math.max(...taskIds) + 1 : 1;
|
||||
}
|
||||
|
||||
addTask(text) {
|
||||
text = text.trim();
|
||||
if (text) {
|
||||
const task = {
|
||||
id: this.nextId++,
|
||||
text: text,
|
||||
isCompleted: false,
|
||||
};
|
||||
this.tasks.push(task);
|
||||
}
|
||||
}
|
||||
|
||||
toggleTask(task) {
|
||||
task.isCompleted = !task.isCompleted;
|
||||
}
|
||||
|
||||
toggleTask(id) {
|
||||
const task = this.tasks.find(t => t.id === id);
|
||||
task.isCompleted = !task.isCompleted;
|
||||
}
|
||||
|
||||
toggleAll(value) {
|
||||
for (let task of this.tasks) {
|
||||
task.isCompleted = value;
|
||||
}
|
||||
}
|
||||
|
||||
clearCompleted() {
|
||||
const tasks = this.tasks.filter(t => t.isCompleted);
|
||||
for (let task of tasks) {
|
||||
this.deleteTask(task);
|
||||
}
|
||||
}
|
||||
|
||||
deleteTask(id) {
|
||||
const index = this.tasks.findIndex((t) => t.id === id);
|
||||
this.tasks.splice(index, 1);
|
||||
}
|
||||
|
||||
updateTask(id, text) {
|
||||
const value = text.trim();
|
||||
if (!value) {
|
||||
this.deleteTask(id);
|
||||
} else {
|
||||
const task = this.tasks.find(t => t.id === id);
|
||||
task.text = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createTaskStore() {
|
||||
const saveTasks = () => localStorage.setItem("todoapp", JSON.stringify(taskStore.tasks));
|
||||
const initialTasks = JSON.parse(localStorage.getItem("todoapp") || "[]");
|
||||
const taskStore = reactive(new TaskList(initialTasks), saveTasks);
|
||||
saveTasks();
|
||||
return taskStore;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Todo
|
||||
//------------------------------------------------------------------------------
|
||||
class Todo extends Component {
|
||||
static template = "Todo";
|
||||
|
||||
setup() {
|
||||
useAutofocus("input");
|
||||
this.store = useStore();
|
||||
this.state = useState({
|
||||
isEditing: false
|
||||
});
|
||||
}
|
||||
|
||||
handleKeyup(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
this.updateText(ev.target.value);
|
||||
}
|
||||
if (ev.keyCode === ESC_KEY) {
|
||||
ev.target.value = this.props.text;
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
}
|
||||
|
||||
handleBlur(ev) {
|
||||
this.updateText(ev.target.value);
|
||||
}
|
||||
|
||||
updateText(text) {
|
||||
this.store.updateTask(this.props.id, text);
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// TodoList
|
||||
//------------------------------------------------------------------------------
|
||||
class TodoList extends Component {
|
||||
static template = "TodoList";
|
||||
static components = { Todo };
|
||||
|
||||
setup() {
|
||||
this.store = useStore();
|
||||
this.state = useState({ filter: "all" });
|
||||
}
|
||||
|
||||
get displayedTasks() {
|
||||
const tasks = this.store.tasks;
|
||||
switch (this.state.filter) {
|
||||
case "active":
|
||||
return tasks.filter((t) => !t.isCompleted);
|
||||
case "completed":
|
||||
return tasks.filter((t) => t.isCompleted);
|
||||
case "all":
|
||||
return tasks;
|
||||
}
|
||||
}
|
||||
|
||||
get allChecked() {
|
||||
return this.store.tasks.every(todo => todo.isCompleted);
|
||||
}
|
||||
|
||||
get remaining() {
|
||||
return this.store.tasks.filter(todo => !todo.isCompleted).length;
|
||||
}
|
||||
|
||||
get remainingText() {
|
||||
const items = this.remaining < 2 ? "item" : "items";
|
||||
return ` ${items} left`;
|
||||
}
|
||||
|
||||
addTodo(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
const text = ev.target.value;
|
||||
if (text.trim()) {
|
||||
this.store.addTask(text);
|
||||
}
|
||||
ev.target.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
setFilter(filter) {
|
||||
this.state.filter = filter;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// App Initialization
|
||||
//------------------------------------------------------------------------------
|
||||
const env = { store: createTaskStore() };
|
||||
mount(TodoList, document.body, { env, templates: TEMPLATES, dev: true });
|
||||
@@ -0,0 +1,50 @@
|
||||
<templates>
|
||||
<section t-name="TodoList" class="todoapp">
|
||||
<header class="header">
|
||||
<h1>todos</h1>
|
||||
<input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
|
||||
</header>
|
||||
<section class="main" t-if="store.tasks.length">
|
||||
<input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="() => store.toggleAll(!allChecked)"/>
|
||||
<label for="toggle-all"></label>
|
||||
<ul class="todo-list">
|
||||
<t t-foreach="displayedTasks" t-as="todo" t-key="todo.id">
|
||||
<Todo id="todo.id" isCompleted="todo.isCompleted" text="todo.text"/>
|
||||
</t>
|
||||
</ul>
|
||||
</section>
|
||||
<footer class="footer" t-if="store.tasks.length">
|
||||
<span class="todo-count">
|
||||
<strong>
|
||||
<t t-esc="remaining"/>
|
||||
</strong>
|
||||
<t t-esc="remainingText"/>
|
||||
</span>
|
||||
<ul class="filters">
|
||||
<li>
|
||||
<a t-on-click="() => this.setFilter('all')" t-att-class="{selected: state.filter === 'all'}">All</a>
|
||||
</li>
|
||||
<li>
|
||||
<a t-on-click="() => this.setFilter('active')" t-att-class="{selected: state.filter === 'active'}">Active</a>
|
||||
</li>
|
||||
<li>
|
||||
<a t-on-click="() => this.setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="clear-completed" t-if="store.tasks.length gt remaining" t-on-click="() => store.clearCompleted()">
|
||||
Clear completed
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<li t-name="Todo" class="todo" t-att-class="{completed: props.isCompleted, editing: state.isEditing}">
|
||||
<div class="view">
|
||||
<input class="toggle" type="checkbox" t-on-change="() => store.toggleTask(props.id)" t-att-checked="props.completed"/>
|
||||
<label t-on-dblclick="() => state.isEditing = true">
|
||||
<t t-esc="props.text"/>
|
||||
</label>
|
||||
<button class="destroy" t-on-click="() => store.deleteTask(props.id)"></button>
|
||||
</div>
|
||||
<input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.text" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
|
||||
</li>
|
||||
</templates>
|
||||
@@ -0,0 +1,70 @@
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto 50px;
|
||||
}
|
||||
|
||||
.window-manager {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #eeeeee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menubar {
|
||||
background-color: #875a7b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menubar button {
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.window {
|
||||
display: grid;
|
||||
grid-template-rows: 30px auto;
|
||||
border: 1px solid gray;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
box-shadow: 1px 1px 2px 1px grey;
|
||||
}
|
||||
|
||||
.window.dragging {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.window .header {
|
||||
background-color: #875a7b;
|
||||
display: grid;
|
||||
grid-template-columns: auto 24px;
|
||||
color: white;
|
||||
line-height: 30px;
|
||||
padding-left: 5px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.window .header .close {
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.counter {
|
||||
font-size: 20px;
|
||||
}
|
||||
.counter button {
|
||||
width: 80px;
|
||||
height:40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
// This example is slightly more complex than usual. We demonstrate
|
||||
// here a way to manage sub windows in Owl, declaratively. This is still just a
|
||||
// demonstration. Managing windows can be as complex as we want. For example,
|
||||
// we could implement the following features:
|
||||
// - resizing windows
|
||||
// - minimizing windows
|
||||
// - configuration options for windows to make a window non resizeable
|
||||
// - minimal width/height
|
||||
// - better heuristic for initial window position
|
||||
// - ...
|
||||
import { Component, useState, mount, useRef, reactive, useEnv, onMounted } from "@odoo/owl";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Window manager code
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class WindowManager {
|
||||
// contains all components with metadata
|
||||
static Windows = {};
|
||||
windows = {}; // mapping id => info
|
||||
nextId = 1;
|
||||
|
||||
add(type) {
|
||||
const Comp = WindowManager.Windows[type];
|
||||
const left = 50 + Math.round(Math.random()*(window.innerWidth - 50 - Comp.defaultWidth));
|
||||
const top = 50 + Math.round(Math.random()*(window.innerHeight - 100 - Comp.defaultHeight));
|
||||
const id = this.nextId++;
|
||||
this.windows[id] = {
|
||||
id,
|
||||
title: Comp.defaultTitle,
|
||||
width: Comp.defaultWidth,
|
||||
height: Comp.defaultHeight,
|
||||
left,
|
||||
top,
|
||||
Component: Comp,
|
||||
};
|
||||
}
|
||||
|
||||
close(id) {
|
||||
delete this.windows[id];
|
||||
}
|
||||
|
||||
updatePosition(id, left, top) {
|
||||
const w = this.windows[id];
|
||||
w.left = left;
|
||||
w.top = top;
|
||||
}
|
||||
|
||||
getWindows() {
|
||||
return Object.values(this.windows);
|
||||
}
|
||||
}
|
||||
|
||||
function createWindowService() {
|
||||
return reactive(new WindowManager());
|
||||
}
|
||||
|
||||
function useWindowService() {
|
||||
const env = useEnv();
|
||||
return useState(env.windowService);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Generic Window Component
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class Window extends Component {
|
||||
static template = "Window";
|
||||
static nextZIndex = 1;
|
||||
zIndex = 0;
|
||||
|
||||
setup() {
|
||||
this.windowService = useWindowService();
|
||||
this.root = useRef('root');
|
||||
onMounted(this.updateZIndex);
|
||||
}
|
||||
|
||||
get style() {
|
||||
let { width, height, top, left } = this.props.info;
|
||||
return `width: ${width}px;height: ${height}px;top:${top}px;left:${left}px;z-index:${this.zIndex}`;
|
||||
}
|
||||
|
||||
close() {
|
||||
this.windowService.close(this.props.info.id);
|
||||
}
|
||||
|
||||
startDragAndDrop(ev) {
|
||||
this.updateZIndex();
|
||||
const self = this;
|
||||
const root = this.root;
|
||||
|
||||
const el = root.el;
|
||||
el.classList.add('dragging');
|
||||
|
||||
const current = this.props.info;
|
||||
const offsetX = current.left - ev.pageX;
|
||||
const offsetY = current.top - ev.pageY;
|
||||
let left, top;
|
||||
|
||||
window.addEventListener("mousemove", moveWindow);
|
||||
window.addEventListener("mouseup", stopDnD, { once: true });
|
||||
|
||||
function moveWindow(ev) {
|
||||
left = Math.max(offsetX + ev.pageX, 0);
|
||||
top = Math.max(offsetY + ev.pageY, 0);
|
||||
el.style.left = `${left}px`;
|
||||
el.style.top = `${top}px`;
|
||||
}
|
||||
function stopDnD() {
|
||||
window.removeEventListener("mousemove", moveWindow);
|
||||
el.classList.remove('dragging');
|
||||
|
||||
if (top !== undefined && left !== undefined) {
|
||||
self.windowService.updatePosition(current.id, left, top);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateZIndex() {
|
||||
this.zIndex = Window.nextZIndex++;
|
||||
this.root.el.style['z-index'] = this.zIndex;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Two concrete Window type implementations
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class HelloWorld extends Component {
|
||||
static template = "HelloWorld";
|
||||
static defaultTitle = "Hello Owl!";
|
||||
static defaultWidth = 200;
|
||||
static defaultHeight = 100;
|
||||
}
|
||||
|
||||
|
||||
class Counter extends Component {
|
||||
static template = "Counter";
|
||||
static defaultTitle = "Click Counter";
|
||||
static defaultWidth = 300;
|
||||
static defaultHeight = 120;
|
||||
|
||||
state = useState({ value: 0 });
|
||||
|
||||
inc() {
|
||||
this.state.value++;
|
||||
}
|
||||
}
|
||||
|
||||
// register window components
|
||||
WindowManager.Windows.Hello = HelloWorld;
|
||||
WindowManager.Windows.Counter = Counter;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Window Container
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class WindowContainer extends Component {
|
||||
static template = "WindowContainer";
|
||||
static components = { Window };
|
||||
|
||||
setup() {
|
||||
this.windowService = useWindowService();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Root Component
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class Root extends Component {
|
||||
static template = "Root";
|
||||
static components = { WindowContainer };
|
||||
|
||||
setup() {
|
||||
this.windowService = useWindowService();
|
||||
}
|
||||
|
||||
addWindow(type) {
|
||||
this.windowService.add(type);
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Setup
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
const env = {
|
||||
windowService: createWindowService(),
|
||||
};
|
||||
|
||||
mount(Root, document.body, { templates: TEMPLATES, env, dev: true });
|
||||
@@ -0,0 +1,32 @@
|
||||
<templates>
|
||||
<div t-name="Window" class="window" t-att-style="style" t-on-click="updateZIndex" t-ref="root">
|
||||
<div class="header">
|
||||
<span t-on-mousedown="startDragAndDrop"><t t-esc="props.info.title"/></span>
|
||||
<span class="close" t-on-click.stop="close">×</span>
|
||||
</div>
|
||||
<t t-slot="default"/>
|
||||
</div>
|
||||
|
||||
<div t-name="WindowContainer" class="window-manager">
|
||||
<Window t-foreach="windowService.getWindows()" t-as="w" t-key="w.id" info="w">
|
||||
<t t-component="w.Component"/>
|
||||
</Window>
|
||||
</div>
|
||||
|
||||
<div t-name="Root" class="app">
|
||||
<WindowContainer/>
|
||||
<div class="menubar">
|
||||
<button t-on-click="() => this.addWindow('Hello')">Say Hello</button>
|
||||
<button t-on-click="() => this.addWindow('Counter')">Counter</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div t-name="HelloWorld">
|
||||
Some content here...
|
||||
</div>
|
||||
|
||||
<div t-name="Counter" class="counter">
|
||||
<button t-on-click="inc">Click</button>
|
||||
<span><t t-esc="state.value"/></span>
|
||||
</div>
|
||||
</templates>
|
||||
@@ -0,0 +1,28 @@
|
||||
#!/usr/bin/env python3
|
||||
|
||||
import threading
|
||||
import time
|
||||
|
||||
from http.server import SimpleHTTPRequestHandler, HTTPServer
|
||||
|
||||
httpd = None
|
||||
def start_server():
|
||||
global httpd
|
||||
SimpleHTTPRequestHandler.extensions_map['.js'] = 'application/javascript'
|
||||
httpd = HTTPServer(('0.0.0.0', 3600), SimpleHTTPRequestHandler)
|
||||
httpd.serve_forever()
|
||||
|
||||
url = 'http://127.0.0.1:3600'
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("Owl Application")
|
||||
print("---------------")
|
||||
print("Server running on: {}".format(url))
|
||||
threading.Thread(target=start_server, daemon=True).start()
|
||||
|
||||
while True:
|
||||
try:
|
||||
time.sleep(1)
|
||||
except KeyboardInterrupt:
|
||||
httpd.server_close()
|
||||
quit(0)
|
||||
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OWL App</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<link rel="stylesheet" href="app.css">
|
||||
<script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
|
||||
<script type="module" src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>
|
||||
This app requires a web server, simply opening the html file using your browser will not work.
|
||||
You can run a simple web server with one of the following:
|
||||
- if you have python3 installed, run app.py with python3 or run 'python3 -m http.server' in the app folder
|
||||
- if you have node/npm installed, run 'npx serve' in the app folder
|
||||
- if you have php installed, run 'php -S localhost:8080 -t .' in the app folder
|
||||
</pre>
|
||||
<script>if (window.location.protocol !== "file:") document.querySelector("pre").remove()</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,5 +1,5 @@
|
||||
<templates>
|
||||
<div t-name="TabbedEditor" class="tabbed-editor">
|
||||
<div t-name="TabbedEditor" class="tabbed-editor" t-att-style="props.style">
|
||||
<div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
|
||||
<t t-foreach="['js', 'xml', 'css']" t-as="tab" t-key="tab">
|
||||
<a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="() => setTab(tab)">
|
||||
@@ -10,17 +10,17 @@
|
||||
<div class="code-editor" t-ref="editor"></div>
|
||||
</div>
|
||||
|
||||
<div t-name="App" class="playground">
|
||||
<div t-name="Root" class="playground">
|
||||
<div class="left-bar" t-att-class="{split: state.splitLayout}"
|
||||
t-att-style="leftPaneStyle">
|
||||
<div class="menubar">
|
||||
<a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
|
||||
<select t-on-change="setSample">
|
||||
<option t-foreach="SAMPLES" t-as="sample" t-key="sample_index">
|
||||
<select t-on-change="onSampleChange">
|
||||
<option t-foreach="samples" t-as="sample" t-key="sample_index">
|
||||
<t t-esc="sample.description"/>
|
||||
</option>
|
||||
</select>
|
||||
<a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
|
||||
<a class="btn flash" t-on-click="exportStandaloneApp" title="Download zip that bundles this app with a tiny python web server"><i class="fas fa-download"></i></a>
|
||||
<a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas" t-att-class="state.splitLayout ? 'fa-toggle-on' : 'fa-toggle-off'"></i></a>
|
||||
<a class="btn flash share-code" t-on-click="shareCode" title="Copy a link to this playground"><span>Share</span><span class="copied-notification" t-if="state.copied">Copied link to clipboard!</span></a>
|
||||
</div>
|
||||
@@ -37,19 +37,19 @@
|
||||
css="state.css"
|
||||
xml="state.xml"
|
||||
resizeable="true"
|
||||
onUpdatePanelHeight="updatePanelHeight"
|
||||
updatePanelHeight.bind="updatePanelHeight"
|
||||
updateCode="updateCode"/>
|
||||
</t>
|
||||
</div>
|
||||
<div class="separator vertical" t-on-mousedown="onMouseDown"/>
|
||||
<div class="right-pane" t-att-style="rightPaneStyle">
|
||||
<div class="right-pane">
|
||||
<div class="welcome" t-if="state.displayWelcome">
|
||||
<div>🦉 Odoo Web Library 🦉</div>
|
||||
<div>v<t t-esc="version"/></div>
|
||||
<div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
|
||||
<div class="note">
|
||||
<p>Note: these examples are using recent features of Javascript, and require a recent browser to work without a transpilation step!
|
||||
For example, it makes use of class fields and class static fields. These examples should work in a recent Chrome version.
|
||||
<p>
|
||||
Note: these examples make use of recent features of Javascript, and require a recent browser to work without a transpilation step! Among other things, it uses class fields and import maps. If you encounter issues, make sure your browser is up to date.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,12 +18,6 @@ export function debounce(func, wait, immediate) {
|
||||
};
|
||||
}
|
||||
|
||||
export function useBus(bus, evName, cb) {
|
||||
bus.addEventListener(evName, cb);
|
||||
owl.onWillUnmount(() => {
|
||||
bus.removeEventListener(evName, cb);
|
||||
});
|
||||
}
|
||||
|
||||
const loadedScripts = {};
|
||||
|
||||
|
||||
+2
-2
@@ -15,8 +15,8 @@ URL = 'http://{0}:{1}/tools/playground'.format(HOST, PORT)
|
||||
# we want to update the playground.
|
||||
class OWLHandler(SimpleHTTPRequestHandler):
|
||||
def do_GET(self):
|
||||
if self.path == '/tools/owl.js':
|
||||
self.path = '/dist/owl.iife.js'
|
||||
if self.path == '/tools/owl.js' or self.path == '/tools/playground/owl.js':
|
||||
self.path = '/dist/owl.es.js'
|
||||
return SimpleHTTPRequestHandler.do_GET(self)
|
||||
|
||||
def end_headers(self):
|
||||
|
||||
Reference in New Issue
Block a user