From 27debda0e72154965848988ce698f1585cb434f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Tue, 2 Apr 2019 16:15:29 +0200
Subject: [PATCH] add: add responsive example

---
 src/samples.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/src/samples.js b/src/samples.js
index 7c021b35..b183a6c2 100644
--- a/src/samples.js
+++ b/src/samples.js
@@ -374,6 +374,75 @@ const STATE_MANAGEMENT_CSS = `.action {
 }
 `;
 
+const RESPONSIVE = `const { Component, QWeb, utils } = owl.core;
+
+class SubWidget extends Component {
+  constructor() {
+    super(...arguments);
+    this.template = "subwidget";
+  }
+}
+
+class ResponsiveWidget extends Component {
+  constructor() {
+    super(...arguments);
+    this.template = "responsivewidget";
+    this.widgets = { SubWidget };
+  }
+}
+
+function isMobile() {
+  return window.innerWidth <= 768;
+}
+
+const env = {
+  qweb: new QWeb(TEMPLATES),
+  isMobile: isMobile()
+};
+
+const widget = new ResponsiveWidget(env);
+widget.mount(document.body);
+
+window.addEventListener(
+  "resize",
+  utils.debounce(function() {
+    const _isMobile = isMobile();
+    if (_isMobile !== env.isMobile) {
+      widget.updateEnv({ isMobile: _isMobile });
+    }
+  }, 20)
+);
+`;
+
+const RESPONSIVE_XML = `<templates>
+    <div t-name="responsivewidget">
+        <div class="info">
+            <span class="mobile" t-if="env.isMobile">Mobile</span>
+            <span class="desktop" t-else="1">Desktop</span>
+            mode
+        </div>
+        <t t-widget="SubWidget" t-if="!env.isMobile"/>
+    </div>
+    <div t-name="subwidget" class="subwidget">
+        This widget is only instantiated in desktop mode.  It will be destroyed
+        and recreated if the mode changes from destop to mobile, and back to desktop
+    </div>
+</templates>
+`;
+
+const RESPONSIVE_CSS = `.info {
+    font-size: 30px;
+}
+.desktop {
+    color: green;
+}
+.mobile {
+    color: blue;
+}
+.subwidget {
+    margin: 30px;
+}`;
+
 const EMPTY = `const {Component, QWeb} = owl.core;
 class Widget extends Component {
 }
@@ -413,6 +482,12 @@ export const SAMPLES = [
     css: STATE_MANAGEMENT_CSS,
     xml: STATE_MANAGEMENT_XML
   },
+  {
+    description: "Responsive app",
+    code: RESPONSIVE,
+    css: RESPONSIVE_CSS,
+    xml: RESPONSIVE_XML
+  },
   {
     description: "Empty",
     code: EMPTY