From bdaf4183700ad1acb147920f21dfd93aa9d4e92f Mon Sep 17 00:00:00 2001
From: Eric Seidel <eseidel@chromium.org>
Date: Thu, 18 Dec 2014 13:01:43 -0800
Subject: [PATCH] Add super-basic sky widgets.

Eventually we'll want to replace these with something
fancier like polymer, but this exercise helped us
find several bugs in the engine as well as
removed one more blocker from using Sky to
replace mojo/views usage in mojo/examples.

R=esprehn@chromium.org
BUG=443439

Review URL: https://codereview.chromium.org/809233002
---
 examples/widgets/index.sky              |  56 +++++++++++++
 framework/sky-box/sky-box.sky           |  33 ++++++++
 framework/sky-button/sky-button.sky     |  49 +++++++++++
 framework/sky-checkbox/sky-checkbox.sky |  49 +++++++++++
 framework/sky-radio/sky-radio.sky       | 103 ++++++++++++++++++++++++
 5 files changed, 290 insertions(+)
 create mode 100644 examples/widgets/index.sky
 create mode 100644 framework/sky-box/sky-box.sky
 create mode 100644 framework/sky-button/sky-button.sky
 create mode 100644 framework/sky-checkbox/sky-checkbox.sky
 create mode 100644 framework/sky-radio/sky-radio.sky

diff --git a/examples/widgets/index.sky b/examples/widgets/index.sky
new file mode 100644
index 00000000000..bce76029887
--- /dev/null
+++ b/examples/widgets/index.sky
@@ -0,0 +1,56 @@
+<!--
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<sky>
+<import src="/sky/framework/sky-element/sky-element.sky"/>
+<import src="/sky/framework/sky-button/sky-button.sky"/>
+<import src="/sky/framework/sky-box/sky-box.sky"/>
+<import src="/sky/framework/sky-checkbox/sky-checkbox.sky"/>
+<import src="/sky/framework/sky-radio/sky-radio.sky"/>
+<sky-element name="widget-root">
+<template>
+  <style>
+  div { display: paragraph; }
+  </style>
+
+  <sky-box title='Buttons'>
+    <sky-button id='button'>Button</sky-button>
+    <div>highlight: {{ myButton.highlight }}</div>
+  </sky-box>
+
+  <sky-box title='Checkboxes'>
+    <div><sky-checkbox id='checkbox' />Checkbox</div>
+    <div>highlight: {{ myCheckbox.highlight }}</div>
+    <div>checked: {{ myCheckbox.checked }}</div>
+
+    <div><sky-checkbox id='checkbox' checked='true'/>Checkbox, default checked.</div>
+  </sky-box>
+
+  <sky-box title='Radios'>
+    <sky-box title='Group One'>
+      <div><sky-radio group='foo'/>one</div>
+      <div><sky-radio group='foo' selected='true' />two</div>
+      <div><sky-radio group='foo'/>three</div>
+    </sky-box>
+    <sky-box title='Group Two'>
+      <div><sky-radio group='bar'/>A</div>
+      <div><sky-radio group='bar'/>B</div>
+      <div><sky-radio group='bar' selected='true' />C</div>
+    </sky-box>
+  </sky-box>
+
+</template>
+<script>
+module.exports = class extends SkyElement {
+  attached() {
+    this.myButton = this.shadowRoot.getElementById('button');
+    this.myCheckbox = this.shadowRoot.getElementById('checkbox');
+  }
+}.register();
+</script>
+</sky-element>
+
+<widget-root />
+</sky>
diff --git a/framework/sky-box/sky-box.sky b/framework/sky-box/sky-box.sky
new file mode 100644
index 00000000000..ed21ebd01ee
--- /dev/null
+++ b/framework/sky-box/sky-box.sky
@@ -0,0 +1,33 @@
+<!--
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="sky-box">
+<template>
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      border-radius: 4px;
+      border: 1px solid gray;
+      margin: 10px;
+    }
+    #title {
+      text-align: center;
+      font-size: 10px;
+    }
+    div {
+      flex: 1 100%;
+    }
+  </style>
+  <div id='title'>{{ title }}</div>
+  <div><content></content></div>
+</template>
+<script>
+module.exports = class extends SkyElement {
+}.register();
+</script>
+</sky-element>
diff --git a/framework/sky-button/sky-button.sky b/framework/sky-button/sky-button.sky
new file mode 100644
index 00000000000..2c747b4c8a4
--- /dev/null
+++ b/framework/sky-button/sky-button.sky
@@ -0,0 +1,49 @@
+<!--
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="sky-button">
+<template>
+  <style>
+    :host {
+      display: inline-flex;
+      border-radius: 4px;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid blue;
+      -webkit-user-select: none;
+      margin: 5px;
+    }
+    :host([highlight=true]) {
+      background-color: orange;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+module.exports = class extends SkyElement {
+  created() {
+    this.tabIndex = 0; // Make focusable.
+    this.setHighlight(false);
+
+    this.addEventListener("mousedown", function() {
+      this.setHighlight(true);
+    });
+    this.addEventListener("mouseup", function() {
+      this.setHighlight(false);
+    });
+    this.addEventListener("mouseout", function() {
+      this.setHighlight(false);
+    });
+  }
+  setHighlight(newValue) {
+    // Set both a property and an attribute to keep both parents happy.
+    this.setAttribute('highlight', newValue);
+    this.highlight = newValue;
+  }
+}.register();
+</script>
+</sky-element>
diff --git a/framework/sky-checkbox/sky-checkbox.sky b/framework/sky-checkbox/sky-checkbox.sky
new file mode 100644
index 00000000000..48067b83c73
--- /dev/null
+++ b/framework/sky-checkbox/sky-checkbox.sky
@@ -0,0 +1,49 @@
+<!--
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-button/sky-button.sky" as="SkyButton" />
+
+<sky-element name="sky-checkbox">
+<template>
+  <style>
+    :host {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      -webkit-user-select: none;
+      width: 20px;
+      height: 20px;
+      border-radius: 4px;
+      border: 1px solid blue;
+      margin: 5px;
+    }
+    :host([highlight=true]) {
+      background-color: orange;
+    }
+  </style>
+  <template if="{{ checked }}">
+    <check>&check;</check>
+  </template>
+</template>
+<script>
+module.exports = class extends SkyButton {
+  created() {
+    super.created();
+    this.setChecked(this.getAttribute('checked') == 'true');
+
+    this.addEventListener("mouseup", function() {
+      this.toggleChecked();
+    });
+  }
+  toggleChecked() {
+    this.setChecked(!this.checked);
+  }
+  setChecked(checked) {
+    this.checked = checked;
+    this.setAttribute('checked', checked);
+  }
+}.register();
+</script>
+</sky-element>
diff --git a/framework/sky-radio/sky-radio.sky b/framework/sky-radio/sky-radio.sky
new file mode 100644
index 00000000000..0be600ae588
--- /dev/null
+++ b/framework/sky-radio/sky-radio.sky
@@ -0,0 +1,103 @@
+<!--
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-button/sky-button.sky" as="SkyButton" />
+
+<sky-element name="sky-radio">
+<template>
+  <style>
+    :host {
+      display: inline-block;
+      -webkit-user-select: none;
+      width: 14px;
+      height: 14px;
+      border-radius: 7px;
+      border: 1px solid blue;
+      margin: 0 5px;
+    }
+    :host([highlight=true]) box {
+      background-color: orange;
+    }
+    dot {
+      -webkit-user-select: none;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+      background-color: black;
+      margin: 2px;
+    }
+  </style>
+  <template if="{{ selected }}">
+    <dot />
+  </template>
+</template>
+<script>
+const kControllerMap = new WeakMap();
+
+class RadioGroupController {
+  static forRadio(radio) {
+    var scope = radio.ownerScope;
+    var controller = kControllerMap.get(scope);
+    if (!controller)
+      kControllerMap.set(scope, new RadioGroupController());
+    return kControllerMap.get(scope);
+  }
+  constructor() {
+    this.radios = new Set();
+  }
+  addRadio(radio) {
+    this.radios.add(radio);
+    // If this new radio is default-selected, take selection from the group.
+    if (radio.selected)
+      this.takeSelectionFromGroup(radio);
+  }
+  removeRadio(radio) {
+    this.radios.remove(radio);
+  }
+  takeSelectionFromGroup(selectedRadio) {
+    // Emtpy/null/undefined group means and isolated radio.
+    if (!selectedRadio.group)
+      return;
+    this.radios.forEach(function(radio) {
+      if (selectedRadio === radio)
+        return;
+      if (radio.group != selectedRadio.group)
+        return;
+      radio.setSelected(false);
+    })
+  }
+};
+
+module.exports = class extends SkyButton {
+  created() {
+    super.created();
+    this.setSelected(this.getAttribute('selected'));
+    this.group = this.getAttribute('group');
+
+    this.addEventListener("mouseup", function() {
+      this.setSelected(true);
+    });
+    this.cachedController = null;
+  }
+  attached() {
+    super.attached();
+    this.cachedController = RadioGroupController.forRadio(this);
+    this.cachedController.addRadio(this);
+  }
+  detached() {
+    super.detached();
+    this.cachedController.removeRadio(this);
+  }
+  setSelected(selected) {
+    if (selected == this.selected)
+      return;
+    this.setAttribute('selected', selected);
+    this.selected = selected;
+    if (selected && this.cachedController)
+      this.cachedController.takeSelectionFromGroup(this);
+  }
+}.register();
+</script>
+</sky-element>