Index: sky/examples/color/color-wheel.sky |
diff --git a/sky/examples/color/color-wheel.sky b/sky/examples/color/color-wheel.sky |
deleted file mode 100644 |
index da10a116c8b9050edefac17bdd3f02f0069a956d..0000000000000000000000000000000000000000 |
--- a/sky/examples/color/color-wheel.sky |
+++ /dev/null |
@@ -1,88 +0,0 @@ |
-<!-- |
-// Copyright 2015 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="color-wheel" |
- attributes="color:string" |
- on-pointerdown="handlePointerDown"> |
-<template> |
- <style> |
- img { |
- min-width: 100%; |
- height: auto; |
- } |
- </style> |
- <img class="color-wheel-img" src="color-wheel.png"> |
-</template> |
-<script> |
-function hsvToRgb(h, s, v) { |
- var i = Math.floor(h * 6); |
- var f = h * 6 - i; |
- var p = v * (1 - s); |
- var q = v * (1 - f * s); |
- var t = v * (1 - (1 - f) * s); |
- var r, g, b; |
- switch (i % 6) { |
- case 0: r = v, g = t, b = p; break; |
- case 1: r = q, g = v, b = p; break; |
- case 2: r = p, g = v, b = t; break; |
- case 3: r = p, g = q, b = v; break; |
- case 4: r = t, g = p, b = v; break; |
- case 5: r = v, g = p, b = q; break; |
- } |
- return { |
- r: Math.floor(r * 255), |
- g: Math.floor(g * 255), |
- b: Math.floor(b * 255) |
- }; |
-} |
- |
-function xyToRgb(x, y, radius) { |
- var rx = x - radius; |
- var ry = y - radius; |
- var d = radius * radius; |
- if (rx * rx + ry * ry > d) |
- return undefined; |
- var h = (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI); |
- var s = Math.sqrt(d) / radius; |
- return hsvToRgb(h, s, 1); |
-} |
- |
-function toHexString(n) { |
- var s = Number(n).toString(16).toUpperCase(); |
- return (s.length == 1) ? "0" + s : s; |
-} |
- |
-function rgbToString(rgb) { |
- return "#" + toHexString(rgb.r) + toHexString(rgb.g) + toHexString(rgb.b); |
-} |
- |
-module.exports = class extends SkyElement { |
- created() { |
- super.created(); |
- this.color = "#xFF00FF"; |
- this.colorChanged = function() { |
- this.dispatchEvent(new CustomEvent('color-change', { |
- bubbles: true, |
- detail: this.color, |
- })); |
- }; |
- } |
- updateColor(event) { |
- var bounds = event.target.getBoundingClientRect(); |
- var x = event.x - bounds.left; |
- var y = event.y - bounds.top; |
- var radius = Math.min(bounds.width, bounds.height) / 2.0; |
- var rgb = xyToRgb(x, y, radius); |
- if (rgb) |
- this.color = rgbToString(rgb); |
- } |
- handlePointerDown(event) { |
- this.updateColor(event); |
- } |
-}.register(); |
-</script> |
-</sky-element> |