Commit c3aeac0e authored by Adam Barth's avatar Adam Barth

Remove some more Sky examples that don't run

These examples don't work anymore and have been replaced with
color-chooser.sky.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/987443002
parent b23b62af
#!mojo mojo:sky_viewer
<!--
// 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.
-->
<sky>
<import src="color-picker.sky" />
<color-picker />
</sky>
<!--
// 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.
-->
<sky>
<import src="/sky/framework/sky-box.sky"/>
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
<import src="color-wheel.sky" />
<import src="color-samples.sky" />
<sky-element name="color-picker" on-color-change="updateColorSamples">
<template>
<style>
color-samples {
height: 80px;
margin-top: 10px;
}
</style>
<sky-box title='Choose a Color'>
<color-wheel id="color-wheel-element" color="{{ inputColor }}"/>
<color-samples id="color-samples-element"/>
</sky-box>
</template>
<script>
module.exports = class extends SkyElement {
created() {
this.inputColor = "#FFFFFF";
this.colorSamplesElt = null;
// Show the 6 most recently selected colors
var colorSample = {cssColor: this.inputColor};
this.colorSamples = new Array(6);
this.colorSamples.fill({cssColor: this.inputColor});
}
shadowRootReady() {
this.colorSamplesElt = this.shadowRoot.getElementById('color-samples-element');
}
updateColorSamples(e) {
this.colorSamples.push({cssColor: e.detail});
this.colorSamples.shift();
this.colorSamplesElt.colors = this.colorSamples;
}
}.register();
</script>
</sky-element>
</sky>
<!--
// 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-sample" attributes="color:string">
<template>
<style>
:host {
background-color: {{ color }};
}
</style>
</template>
<script>
module.exports = class extends SkyElement {
created() {
this.color = "blue"; // "#FFFFFF";
}
}.register();
</script>
</sky-element>
<!--
// 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" />
<import src="color-sample.sky" />
<sky-element name="color-samples">
<template>
<style>
:host {
display: flex;
}
color-sample {
height: 100%;
flex: 1;
margin-left: 2px;
margin-right: 2px;
}
</style>
<template repeat="{{ colors }}">
<color-sample color="{{ cssColor }}" />
</template>
</template>
<script>
module.exports = class extends SkyElement {
created() {
this.colors = [];
}
}.register();
</script>
</sky-element>
<!--
// 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment