Skip to content

F
Front-End
Commit 7b1f56d8 authored by Adam Barth's avatar Adam Barth
Browse files
Options

Clean up examples directory 

This CL removes a bunch of examples that don't actually work in the current
engine. I've also renamed example-element to custom-element and
example-scrollable to scrolling because the word "example" in the name is
redundant with the name of the directory.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/980323003
parent 50c2f883
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 6 additions and 2121 deletions
examples/README.md deleted 100644 → 0
View file @ 50c2f883
Some of these examples are examples of what sky supports now.
Others are examples of what sky hopes to one day support.
Therefore not all these examples actually work today.
examples/city-list/city-data-service.sky deleted 100644 → 0
View file @ 50c2f883
<!--
// 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="../data/cities.sky" as="cities" />
<script>
function CityDataService(cities) {
this.cities = cities;
// sort by state, city name.
this.cities.sort(function(a, b) {
if (a.state != b.state) {
return a.state < b.state ? -1 : 1;
}
return a.name < b.name ? -1 : 1;
});
}
CityDataService.prototype.get = function(index, count) {
var self = this;
return new Promise(function(fulfill) {
var result = [];
while (count-- > 0) {
while (index < 0) {
index += self.cities.length;
}
if (index >= self.cities.length)
index = index % self.cities.length;
result.push(self.cities[index]);
index++;
}
fulfill(result);
});
}
module.exports = {
service: new Promise(function(fulfill) {
fulfill(new CityDataService(cities));
})
};
</script>
examples/city-list/city-list.sky deleted 100644 → 0
View file @ 50c2f883
This diff is collapsed.
examples/city-list/city-sequence.sky deleted 100644 → 0
View file @ 50c2f883
<!--
// 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.
-->
<script>
function StateHeader(state) {
this.state = state;
this.headerOrder = 1;
};
function LetterHeader(letter) {
this.letter = letter;
this.headerOrder = 2;
}
function CitySequence(cities)
{
this.items = [];
this.cursor = 0;
var lastState;
var lastLetter;
for (var i = 0; i < cities.length; i++) {
var city = cities[i];
if (!lastState || lastState.state != city.state) {
lastState = new StateHeader(city.state);
this.items.push(lastState);
lastLetter = undefined;
}
if (!lastLetter || lastLetter.letter != city.name[0]) {
lastLetter = new LetterHeader(city.name[0]);
this.items.push(lastLetter);
}
this.items.push(city);
}
};
CitySequence.prototype = {
append: function(other) {
var lastCity = this.items[this.items.length - 1];
var firstOtherCity = other.items[2];
var index = 0;
if (firstOtherCity.state == lastCity.state) {
// skip StateHeader
if (firstOtherCity.name[0] == lastCity.name[0]) {
// skip LetterHeader
index = 2;
} else {
index = 1;
}
}
for (; index < other.items.length; index++) {
this.items.push(other.items[index]);
}
}
};
module.exports = CitySequence;
</script>
examples/city-list/index.sky deleted 100644 → 0
View file @ 50c2f883
<!--
// 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.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes, width=device-width">
<import src="city-list.sky" />
<style>
html, body {
margin: 0;
padding: 0;
font-family: "Roboto", "HelveticaNeue",sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 13px;
color: #222;
width: 100%;
height: 100%;
-webkit-user-select: none;
}
</style>
</head>
<script>
window.startLoad = new Date().getTime();
</script>
<body>
<city-list></city-list>
<script>
var cityList = document.querySelector('city-list');
var scrollBy = 0;
var toks = location.search.match(/auto=([0-9]+)/);
if (toks) {
scrollBy = Number(toks[1]);
}
function autoScroll() {
cityList.scrollBy(scrollBy);
requestAnimationFrame(autoScroll);
}
if (scrollBy) {
setTimeout(function() {
requestAnimationFrame(autoScroll);
}, 200)
}
</script>
</body>
</html>
examples/dart-mojo.sky deleted 100644 → 0
View file @ 50c2f883
#!mojo mojo:sky_viewer
<sky>
<import src="dart-library.sky" as="library" />
<script>
import 'dart:async';
import '/mojo/public/dart/application.dart';
import 'dart:typed_data';
import 'dart:sky.internals' as internals;
import 'mojo:bindings';
import 'mojo:core';
import 'package:mojo/services/network/public/interfaces/network_service.mojom.dart';
import 'package:mojo/services/network/public/interfaces/url_loader.mojom.dart';
import 'package:mojo/public/interfaces/application/shell.mojom.dart' as shell_mojom;
class WGet extends Application {
NetworkServiceProxy _networkService;
UrlLoaderProxy _urlLoaderProxy;
WGet.fromHandle(MojoHandle handle) : super.fromHandle(handle);
WGet(MojoMessagePipeEndpoint endpoint) : super(endpoint);
void initialize(List<String> args, String url) {
run(args);
}
run(List<String> args) async {
if (args == null || args.length != 2) {
throw "Expected URL argument";
}
ByteData bodyData = await _getUrl(args[1]);
print("read ${bodyData.lengthInBytes} bytes");
_closeProxies();
close();
}
Future<ByteData> _getUrl(String url) async {
_initProxiesIfNeeded();
var urlRequest = new UrlRequest()
..url = url
..autoFollowRedirects = true;
var urlResponse = await _urlLoaderProxy.start(urlRequest);
print("url => ${urlResponse.response.url}");
print("status_line => ${urlResponse.response.statusLine}");
print("mime_type => ${urlResponse.response.mimeType}");
return DataPipeDrainer.drainHandle(urlResponse.response.body);
}
void _initProxiesIfNeeded() {
if (_networkService == null) {
_networkService = new NetworkServiceProxy.unbound();
connectToService("mojo:network_service", _networkService);
}
if (_urlLoaderProxy == null) {
_urlLoaderProxy = new UrlLoaderProxy.unbound();
_networkService.createUrlLoader(_urlLoaderProxy);
}
}
void _closeProxies() {
_urlLoaderProxy.close();
_networkService.close();
_urlLoaderProxy = null;
_networkService = null;
}
}
main() {
var messagePipe = new MojoMessagePipe();
var wget = new WGet(messagePipe.endpoints[1]);
wget.listen();
var shellProxy = new shell_mojom.ShellProxy.fromHandle(new MojoHandle(internals.takeShellProxyHandle()));
wget.initializeFromShellProxy(shellProxy, ["mojo:wget", "http://www.google.com"], "mojo:wget");
}
</script>
</sky>
examples/flights-app/app-header.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-header">
<template>
<style>
:host {
display: flex;
background: linear-gradient(#3E77B7, #6C98C4);
padding: 8px;
color: white;
border-bottom: 1px solid #3E77B7;
}
</style>
<content></content>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-menu-button.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-menu-button">
<template>
<style>
:host {
display: flex;
border-radius: 4px;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
}
</style>
<content></content>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-panel-content.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-panel-content">
<template>
<style>
:host {
display: flex;
}
</style>
<content></content>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-panel-header.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-panel-header">
<template>
<style>
:host {
background-color: #DEDEDE;
padding: 8px;
display: flex;
align-items: center;
}
</style>
<content></content>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-panel.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-panel">
<template>
<style>
:host {
display: flex;
flex-direction: column;
background-color: white;
}
</style>
<content></content>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-scrollable.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-scrollable">
<template>
<style>
:host {
flex: 1;
box-shadow: inset 0px 0px 22px 2px rgba(22, 22, 22, 0.63);
overflow: hidden;
}
</style>
<content></content>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-search-input.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-search-input">
<template>
<style>
:host {
background-color: #F6F6F6;
padding: 4px;
display: flex;
align-items: center;
font-size: 1.2em;
}
.input-text {
margin-left: 8px;
}
</style>
<span class="input-icon">
<img src="/sky/examples/flights/images/magnifying-glass.png" style="width: 16px">
</span>
<span class="input-text"><t>flights today to dc by price</t></span>
</template>
<script>
module.exports = class extends SkyElement {
attached() {
var sel = window.getSelection();
var input = this.shadowRoot.querySelector('t');
sel.selectAllChildren(input);
}
}.register();
</script>
</sky-element>
examples/flights-app/app-title.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-title">
<template>
<style>
:host {
flex: 1;
display: flex;
align-items: center;
font-size: 22px;
margin-left: 8px;
}
</style>
<content></content>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-toast.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-toast">
<template>
<style>
:host {
position: absolute;
bottom: 32px;
right: 32px;
max-width: 55%;
box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4);
background-image: linear-gradient(#E5D658, #DFCF43);
border: 1px solid #AEA477;
padding: 6px;
border-radius: 2px;
display: flex;
align-items: center;
font-size: 0.8em;
overflow: hidden;
}
.header {
flex-shrink: 0;
margin-right: 6px;
}
.close-box {
position: absolute;
top: 3px;
right: 3px;
width: 1em;
overflow: hidden;
text-align: center;
outline: 1px solid #AEA477;
}
</style>
<div class="header">
<content select=".toast-icon" />
</div>
<div class="content">
<content select=".toast-content" />
</div>
<div class="close-box">
X
</div>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-toolbar.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-toolbar">
<template>
<style>
:host {
background-color: #F6F6F6;
padding: 0 8px;
}
</style>
<content></content>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/flights-app.sky deleted 100644 → 0
View file @ 50c2f883
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<import src="app-header.sky" />
<import src="app-title.sky" />
<import src="app-menu-button.sky" />
<import src="app-panel.sky" />
<import src="app-panel-header.sky" />
<import src="app-panel-content.sky" />
<import src="app-toolbar.sky" />
<import src="app-search-input.sky" />
<import src="app-scrollable.sky" />
<import src="app-toast.sky" />
<sky-element name="flights-app">
<template>
<style>
* { box-sizing: border-box; }
t, span {
display: inline;
}
:host {
display: flex;
flex-direction: column;
height: 100%;
background-color: #494949;
font-family: "Helvetica", sans-serif;
font-size: 16px;
color: #2B2B2B;
}
.toast-icon {
font-weight: bold;
font-size: 24px;
border-radius: 16px;
width: 32px;
height: 32px;
border: 2px solid black;
line-height: 30px;
text-align: center;
}
.tip-price {
font-weight: bold;
}
.route-result {
margin: 16px 16px 0 16px;
outline: 1px solid black;
}
.route-title {
flex: 1;
}
.airline {
border-radius: 2px;
align-items: center;
padding: 8px;
}
.airline-name {
flex: 1;
}
.airline-logo-image {
width: 50px;
flex-shrink: 0;
}
.airline-best-price {
color: #ABB4B6;
}
.airline-name,
.airline-best-price {
padding: 8px;
}
a {
text-decoration: none;
color: #1155CC;
}
</style>
<app-header>
<app-title>
<t>Search</t>
</app-title>
<app-menu-button>
<img src="/sky/examples/flights/images/menu-white.png" style="width: 18px" />
</app-menu-button>
</app-header>
<app-toolbar>
<app-search-input />
</app-toolbar>
<app-scrollable>
<app-panel class="route-result">
<app-panel-header>
<div class="route-title">
<t>SFO to DCA</t>
</div>
<app-menu-button>
<img src="/sky/examples/flights/images/menu-enabled.png" style="width: 14px" />
</app-menu-button>
</app-panel-header>
<app-panel-content class="airline">
<div class="airline-logo">
<img class="airline-logo-image" src="/sky/examples/flights/images/virgin-america.jpg" />
</div>
<div class="airline-name">
<t>Virgin America</t>
</div>
<div class="airline-best-price">
<t><a>$800</a></t>
</div>
</app-panel-content>
<app-panel-content class="airline">
<div class="airline-logo">
<img class="airline-logo-image" src="/sky/examples/flights/images/ba.jpg" />
</div>
<div class="airline-name">
<t>British Airways</t>
</div>
<div class="airline-best-price">
<t><a>$700</a></t>
</div>
</app-panel-content>
<app-panel-content class="airline">
<div class="airline-logo">
<img class="airline-logo-image" src="/sky/examples/flights/images/united.jpg" />
</div>
<div class="airline-name">
<t>United</t>
</div>
<div class="airline-best-price">
<t><a>$667</a></t>
</div>
</app-panel-content>
<app-panel-content class="airline">
<div class="airline-logo">
<img class="airline-logo-image" src="/sky/examples/flights/images/delta.jpg" />
</div>
<div class="airline-name">
<t>Delta</t>
</div>
<div class="airline-best-price">
<t><a>$450</a></t>
</div>
</app-panel-content>
</app-panel>
<app-panel class="route-result">
<app-panel-header>
<div class="route-title">
<t>SJC to DCA</t>
</div>
<app-menu-button>
<img src="/sky/examples/flights/images/menu-enabled.png" style="width: 14px" />
</app-menu-button>
</app-panel-header>
<app-panel-content class="airline">
<div class="airline-logo">
<img class="airline-logo-image" src="/sky/examples/flights/images/virgin-america.jpg" />
</div>
<div class="airline-name">
<t>Virgin America</t>
</div>
<div class="airline-best-price">
<t><a>$1500</a></t>
</div>
</app-panel-content>
<app-panel-content class="airline">
<div class="airline-logo">
<img class="airline-logo-image" src="/sky/examples/flights/images/jetblue.jpg" />
</div>
<div class="airline-name">
<t>jetBlue</t>
</div>
<div class="airline-best-price">
<t><a>$650</a></t>
</div>
</app-panel-content>
<app-panel-content class="airline">
<div class="airline-logo">
<img class="airline-logo-image" src="/sky/examples/flights/images/united.jpg" />
</div>
<div class="airline-name">
<t>United</t>
</div>
<div class="airline-best-price">
<t><a>$367</a></t>
</div>
</app-panel-content>
</app-panel>
</app-scrollable>
<app-toast>
<div class="toast-icon">
<t>?</t>
</div>
<div class="toast-content">
<t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t>
</div>
</app-toast>
</template>
<script>
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/index.sky deleted 100644 → 0
View file @ 50c2f883
#!mojo mojo:sky_viewer
<sky>
<import src="flights-app.sky" as="FlightsAppElement"/>
<style>
sky {
height: 100%;
}
</style>
<flights-app />
</sky>
examples/fps-counter.sky deleted 100644 → 0
View file @ 50c2f883
#!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.
-->
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="fps-counter" attributes="showHistory:boolean">
<template>
<template if="{{ showHistory }}">
<template repeat="{{ deltas }}">
<div>{{ roundedValue }} ms</div>
</template>
<div>max = {{ max }} ms</div>
</template>
<div>fps = {{ frameRate }} Hz</div>
</template>
<script>
const kMaxDeltaLength = 10;
class Delta {
constructor(value) {
this.value = value;
this.roundedValue = value.toFixed(2);
Object.preventExtensions(this);
}
}
module.exports = class extends SkyElement {
created() {
this.frameRate = "...";
this.max = 0;
this.sum = 0;
this.lastTimeStamp = 0;
this.rafId = 0;
this.deltas = [];
for (var i = 0; i < kMaxDeltaLength; ++i)
this.deltas[i] = new Delta(0);
}
attached() {
this.scheduleTick();
}
detached() {
cancelAnimationFrame(this.rafId);
this.rafId = 0;
}
scheduleTick() {
this.rafId = requestAnimationFrame(this.tick.bind(this));
}
tick(timeStamp) {
this.scheduleTick();
var lastTimeStamp = this.lastTimeStamp;
this.lastTimeStamp = timeStamp;
if (!lastTimeStamp)
return;
var delta = new Delta(timeStamp - lastTimeStamp);
var removedDelta = this.deltas.shift();
this.deltas.push(delta);
this.sum -= removedDelta.value;
this.sum += delta.value;
var avg = this.sum / this.deltas.length;
this.frameRate = (1000 / avg).toFixed(2);
this.max = Math.max(delta.value, this.max).toFixed(2);
}
}.register();
</script>
</sky-element>
examples/htmlish/framework/element.sky deleted 100644 → 0
View file @ 50c2f883
SKY MODULE - defines an <element> element
<import src="sky:core" as="sky"/>
<!-- usage:
<element name="tagname">
<style> style here (optional) </style>
<template> shadow tree here (optional) </template>
<script> // optional
module.currentScript.parentNode.setPrototype({
init: function () {
// constructor here
},
// rest of api here
});
</script>
</element>
-->
<script>
module.exports.Element = sky.registerElement(
class extends Element {
static get tagName() { return 'element'; }
constructor (hostModule) {
super(hostModule);
this.state = 'loading';
this.module = hostModule;
this.definedPrototype = sky.Element;
}
setPrototype(prototype) {
this.definedPrototype = prototype;
}
endTagParsedCallback() {
let style = null;
let template = null;
let child = this.firstChild;
while (child && !(style && template)) {
if ((!style) && (child instanceof sky.StyleElement))
style = child;
if ((!template) && (template instanceof sky.TemplateElement))
template = child;
child = child.nextSibling;
}
let tagName = this.getAttribute('name');
let constructorName = tagName.charAt(0).toUpperCase() + tagName.slice(1) + 'Element';
let constructor = function (hostModule) {
super(hostModule);
if (this.init)
this.init();
if (style)
this.shadowRoot.append(style.cloneNode(true));
if (template)
this.shadowRoot.append(template.cloneNode(true));
}
};
if (this.definedPrototype)
constructor.prototype = this.definedPrototype;
else
constructor.prototype = sky.Element;
constructor.tagName = this.getAttribute('name');
constructor.shadow = style || template;
this.module.exports[constructorName] = this.registerElement(constructor);
delete this.definedPrototype;
delete this.module;
this.state = 'loaded';
}
}
);
</script>
examples/htmlish/framework/htmlish.sky deleted 100644 → 0
View file @ 50c2f883
SKY MODULE - exports some basic HTML-like elements
<import src="element.sky"/>
<!-- note: accessibility handling is not implemented yet, because the
mojo ax service isn't yet ready -->
<import src="scrollable-block.sky">
<element name=html>
<style>
:host { display: scrollable-block; }
</style>
</element>
<element name=head />
<element name=body />
<element name=p />
<element name=h1>
<style>
:host { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
</style>
</element>
<element name=h2>
<style>
:host { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
</style>
</element>
<element name=h3>
<style>
:host { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
</style>
</element>
<element name=h4>
<style>
:host { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
</style>
</element>
<element name=h5>
<style>
:host { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
</style>
</element>
<element name=h6>
<style>
:host { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }
</style>
</element>
<element name=b>
<style>
:host { font-weight: bold; }
</style>
</element>
<element name=data>
<script>
module.currentScript.parentNode.setPrototype({
get value () {
return this.getAttribute('value');
},
set value (newValue) {
this.setAttribute('value', newValue);
},
});
</script>
</element>
<element name=progress>
<template>
<div> ... </div>
</template>
<script>
module.currentScript.parentNode.setPrototype({
...
});
</script>
</element>
<element name=details>
<style>
:host { display: block; }
.outer { border: solid; }
.header { display: inline; }
.summary { display: inline; }
</style>
<template>
<div class="outer">
<div class="header">
<div class="button">OPEN</div>
<div class="summary"><content select="summary"/></div>
</div>
<div class="contents">
<content/>
</div>
</div>
</template>
<script>
module.currentScript.parentNode.setPrototype({
init: function () {
},
open() {
}
});
</script>
</element>
examples/htmlish/samples/intro.sky deleted 100644 → 0
View file @ 50c2f883
#!mojo mojo:sky
<import src="../framework/htmlish.sky"/>
<html>
<head>
<title>Welcome to Sky</title>
</head>
<body>
<h1>Introduction</h1>
<p>Hello world.</p>
</body>
</html>
examples/example-scrollable/index.sky → examples/scrolling/index.sky
View file @ 7b1f56d8
......@@ -5,6 +5,6 @@
// found in the LICENSE file.
-->
<sky>
<import src="example-scrollable.sky" />
<example-scrollable />
<import src="scrolling.sky" />
<scrolling />
</sky>
examples/example-scrollable/example-scrollable.sky → examples/scrolling/scrolling.sky
View file @ 7b1f56d8
......@@ -7,7 +7,7 @@
<import src="/sky/framework/sky-scrollable.sky" />
<import src="../data/cities.sky" as="cities" />
<sky-element name="example-scrollable">
<sky-element>
<template>
<style>
sky-scrollable {
......@@ -21,8 +21,8 @@
<script>
import "dart:sky";
@Tagname('example-scrollable')
class ExampleScrollable extends SkyElement {
@Tagname('scrolling')
class Scrolling extends SkyElement {
void shadowRootReady() {
Element parent = shadowRoot.querySelector('sky-scrollable');
for (Map city in cities.kData.getRange(0, 300)) {
......@@ -33,6 +33,6 @@ class ExampleScrollable extends SkyElement {
}
}
_init(script) => register(script, ExampleScrollable);
_init(script) => register(script, Scrolling);
</script>
</sky-element>
examples/shell/sensor.sky deleted 100644 → 0
View file @ 50c2f883
<script>
import '/sky/framework/shell.dart' as shell;
import 'dart:sky';
import 'package:sky/services/sensors/sensors.mojom.dart';
class MyListener extends SensorListener {
int count = 0;
void onAccuracyChanged(int accuracy) {
print("onAccuracyChanged $accuracy");
}
void onSensorChanged(SensorData data) {
double value = data.values[0] + data.values[1] + data.values[2];
if (value > 40.0) {
document.querySelector('div').textContent =
"Shake count " + (count++).toString();
}
}
MyListener.unbound() {
stub = new SensorListenerStub.unbound()
..delegate = this;
}
SensorListenerStub stub;
}
void main() {
var sensorService = new SensorServiceProxy.unbound();
shell.requestService(sensorService);
var listener = new MyListener.unbound();
sensorService.ptr.addListener(SensorType_ACCELEROMETER, listener.stub);
listener.stub.listen();
}
</script>
<div>Shake me.</div>
examples/style/block-layout.sky deleted 100644 → 0
View file @ 50c2f883
SKY MODULE
<import src="sky:core" as="sky"/>
<!--
! this module provides trivial vertical block layout
! no margins, padding, borders, etc
!-->
<script>
module.exports.BlockLayoutManager = class BlockLayoutManager extends sky.LayoutManager {
function layout(width, height) {
if (width == null)
width = this.getIntrinsicWidth().value;
let autoHeight = false;
if (height == null) {
height = 0;
autoHeight = true;
}
this.assumeDimensions(width, height);
let children = this.walkChildren();
let loop = children.next();
let y = 0;
while (!loop.done) {
let child = loop.value;
if (child.needsLayout || child.descendantNeedsLayout) {
let dims = child.layoutManager.layout(width, null);
this.setChildSize(child, dims.width, dims.height);
}
this.setChildPosition(child, 0, y);
y += child.height;
loop = children.next();
}
if (autoHeight)
height = y;
this.markAsLaidOut();
return {
width: width,
height: height,
}
}
function layoutDescendants() {
this.layout(node.width, node.height);
}
function getIntrinsicWidth() {
let width = this.node.getProperty('width');
if (typeof width != 'number') {
// e.g. width: auto
width = 0;
let children = this.walkChildren();
let loop = children.next();
while (!loop.done) {
let child = loop.value;
let childWidth = child.layoutManager.getIntrinsicWidth();
if (width < childWidth.value)
width = childWidth.value;
loop = children.next();
}
}
return super(width); // applies and provides our own min-width/max-width rules
}
function getIntrinsicHeight() {
let height = this.node.getProperty('height');
if (typeof height != 'number') {
// e.g. height: auto
height = 0;
let children = this.walkChildren();
let loop = children.next();
while (!loop.done) {
let child = loop.value;
let childHeight = child.layoutManager.getIntrinsicHeight();
if (height < childHeight.value)
height = childHeight.value;
loop = children.next();
}
}
return super(height); // applies and provides our own min-height/max-height rules
}
}
sky.registerLayoutManager('block', module.exports.BlockLayoutManager);
</script>
examples/style/hex-layout.sky deleted 100644 → 0
View file @ 50c2f883
#!mojo mojo:sky
<import src="sky:core" as="sky"/>
<script>
class BeehiveLayoutManager extends sky.LayoutManager {
function layout(width, height) {
if (width == null)
width = this.getIntrinsicWidth().value;
let autoHeight = false;
if (height == null) {
height = 0;
autoHeight = true;
}
this.assumeDimensions(width, height);
let cellCount = this.node.getProperty('beehive-count');
let cellDim = width / cellCount;
let children = this.walkChildren();
let loop = children.next();
let x = 0;
let y = 0;
while (!loop.done) {
let child = loop.value;
if (child.needsLayout) {
child.layoutManager.layout(cellDim, cellDim);
// we ignore the size the child reported from layout(), and force it to the cell dimensions
this.setChildSize(child, cellDim, cellDim);
} else if (child.descendantNeedsLayout) {
child.layoutManager.layoutDescendants();
this.setChildSize(child, cellDim, cellDim);
}
this.setChildPosition(child, x * cellDim + (y % 2) * cellDim/2, y * 3/4 * cellDim);
x += 1;
if (x > cellCount) {
y += 1;
x = 0;
}
loop = children.next();
}
if (height == 0)
height = (1 + y * 3/4) * cellDim;
this.markAsLaidOut();
return {
width: width,
height: height,
}
}
function getIntrinsicHeight() {
let height = this.node.getProperty('height');
if (typeof height != 'number') {
// e.g. height: auto
width = this.getIntrinsicWidth().value;
let cellCount = this.node.getProperty('beehive-count');
let cellDim = width / cellCount;
let children = this.walkChildren();
let loop = children.next();
let childCount = 0;
while (!loop.done) {
childCount += 1;
loop.next();
}
if (childCount > 0)
height = cellDim * (1/4 + Math.ceil(childCount / cellCount) * 3/4);
else
height = 0;
}
return super(height); // does the equivalent of getIntrinsicWidth() above, applying min-height etc
}
function paintChildren(canvas) {
let width = this.node.width;
let cellCount = this.node.getProperty('beehive-count');
let cellDim = width / cellCount;
let children = this.walkChildren();
let loop = children.next();
while (!loop.done) {
let child = loop.value;
canvas.save();
try {
canvas.beginPath();
canvas.moveTo(child.x, child.y + cellDim/4);
canvas.lineTo(child.x + cellDim/2, child.y);
canvas.lineTo(child.x + cellDim, child.y + cellDim/4);
canvas.lineTo(child.x + cellDim, child.y + 3*cellDim/4);
canvas.lineTo(child.x + cellDim/2, child.y + cellDim);
canvas.moveTo(child.x, child.y + 3*cellDim/4);
canvas.closePath();
canvas.clip();
canvas.paintChild(child);
} finally {
canvas.restore();
}
loop = children.next();
}
}
function inHex(topLeftX, topLeftY, width, height, hitX, hitY) {
let centerX = topLeftX - width/2;
let absCenteredHitX = Math.abs(hitX - centerX);
if (absCenteredHitX > width/2)
return false;
let centerY = topLeftY - height/2;
let absCenteredHitY = Math.abs(hitY - centerY);
if (absCenteredHitY > height/2)
return false;
if (absCenteredHitY < height * absCenteredHitX / (2 * width) + height / 2)
return true;
return false;
}
function hitTest(x, y) {
let cellCount = this.node.getProperty('beehive-count');
let cellDim = width / cellCount;
let children = this.walkChildren();
let loop = children.next();
while (!loop.done) {
let child = loop.value;
if (this.inHex(child.x, child.y, child.width, child.height, x, y))
return child.layoutManager.hitTest(x-child.x, y-child.y);
loop = children.next();
}
return this.node;
}
}
sky.registerLayoutManager('beehive', BeehiveLayoutManager);
let BeehiveCountStyleGrammar = new StyleGrammar();
BeehiveCountStyleGrammar.addParser((tokens) => {
let token = tokens.next();
if (token.done)
throw new Error();
if (token.value.kind != 'number')
throw new Error();
if (token.value.value <= 0)
throw new Error();
if (Math.trunc(token.value.value) != token.value.value) // is integer
throw new Error();
return new NumericStyleValue(token.value.value);
});
sky.registerProperty({
name: 'beehive-count',
type: BeehiveCountStyleGrammar,
inherits: true,
initialValue: 5,
needsLayout: true,
});
</script>
<style>
div { display: beehive; beehive-count: 3; }
</style>
<div>
<t>Hello</t>
<t>World</t>
<t>How</t>
<t>Are</t>
<t>You</t>
<t>Today?</t>
</div>
examples/style/sky-core-styles.sky deleted 100644 → 0
View file @ 50c2f883
SKY MODULE
<!-- this is part of sky:core -->
<script>
// "internals" is an object only made visible to this module that exports stuff implemented in C++
module.exports.registerProperty = internals.registerProperty;
internals.registerLayoutManager('none', null);
module.exports.LayoutManager = internals.LayoutManager;
module.exports.InlineLayoutManager = internals.InlineLayoutManager;
internals.registerLayoutManager('inline', internals.InlineLayoutManager);
module.exports.ParagraphLayoutManager = internals.ParagraphLayoutManager;
internals.registerLayoutManager('paragraph', internals.ParagraphLayoutManager);
module.exports.BlockLayoutManager = internals.BlockLayoutManager;
internals.registerLayoutManager('block', internals.BlockLayoutManager);
let displayTypes = new Map();
module.exports.registerLayoutManager = function registerLayoutManager(displayValue, layoutManagerConstructor) {
// TODO(ianh): apply rules for type-checking displayValue is a String
// TODO(ianh): apply rules for type-checking layoutManagerConstructor implements the LayoutManagerConstructor interface (or is null)
if (displayTypes.has(displayValue))
throw new Error();
displayTypes.set(displayValue, layoutManagerConstructor);
};
module.exports.DisplayStyleGrammar = new StyleGrammar(); // value is null or a LayoutManagerConstructor
module.exports.DisplayStyleGrammar.addParser((tokens) => {
let token = tokens.next();
if (token.done)
throw new Error();
if (token.value.kind != 'identifier')
throw new Error();
if (!displayTypes.has(token.value.value))
throw new Error();
return {
value: displayTypes.get(token.value.value),
}
});
internals.registerProperty({
name: 'display',
type: module.exports.DisplayStyleGrammar,
inherits: false,
initialValue: internals.BlockLayoutManager,
needsLayout: true,
});
module.exports.PositiveLengthStyleGrammar = new StyleGrammar(); // value is a ParsedValue whose value (once resolved) is a number in 96dpi pixels, >=0
module.exports.PositiveLengthStyleGrammar.addParser((tokens) => {
// just handle "<number>px"
let token = tokens.next();
if (token.done)
throw new Error();
if (token.value.kind != 'dimension')
throw new Error();
if (token.value.unit != 'px')
throw new Error();
if (token.value.value < 0)
throw new Error();
return {
value: token.value.value;
};
});
internals.registerProperty({
name: 'min-width',
type: module.exports.PositiveLengthStyleGrammar,
inherits: false,
initialValue: 0,
needsLayout: true,
});
internals.registerProperty({
name: 'min-height',
type: module.exports.PositiveLengthStyleGrammar,
inherits: false,
initialValue: 0,
needsLayout: true,
});
module.exports.PositiveLengthOrAutoStyleGrammar = new StyleGrammar(); // value is a ParsedValue whose value (once resolved) is either a number in 96dpi pixels (>=0) or null (meaning 'auto')
module.exports.PositiveLengthOrAutoStyleGrammar.addParser((tokens) => {
// handle 'auto'
let token = tokens.next();
if (token.done)
throw new Error();
if (token.value.kind != 'identifier')
throw new Error();
if (token.value.value != 'auto')
throw new Error();
return {
value: null,
};
});
module.exports.PositiveLengthOrAutoStyleGrammar.addParser((tokens) => {
return module.exports.PositiveLengthStyleGrammar.parse(tokens);
});
internals.registerProperty({
name: 'width',
type: module.exports.PositiveLengthOrAutoStyleGrammar,
inherits: false,
initialValue: null,
needsLayout: true,
});
internals.registerProperty({
name: 'height',
type: module.exporets.PositiveLengthOrAutoStyleGrammar,
inherits: false,
initialValue: null,
needsLayout: true,
});
module.exports.PositiveLengthOrInfinityStyleGrammar = new StyleGrammar(); // value is a ParsedValue whose value (once resolved) is either a number in 96dpi pixels (>=0) or Infinity
module.exports.PositiveLengthOrInfinityStyleGrammar.addParser((tokens) => {
// handle 'infinity'
let token = tokens.next();
if (token.done)
throw new Error();
if (token.value.kind != 'identifier')
throw new Error();
if (token.value.value != 'infinity')
throw new Error();
return {
value: Infinity,
};
});
module.exports.PositiveLengthOrInfinityStyleGrammar.addParser((tokens) => {
return module.exports.PositiveLengthStyleGrammar.parse(tokens);
});
internals.registerProperty({
name: 'width',
type: module.exports.PositiveLengthOrInfinityStyleGrammar,
inherits: false,
initialValue: Infinity,
needsLayout: true,
});
internals.registerProperty({
name: 'height',
type: module.exporets.PositiveLengthOrInfinityStyleGrammar,
inherits: false,
initialValue: Infinity,
needsLayout: true,
});
</script>
examples/style/toolbar-layout.sky deleted 100644 → 0
View file @ 50c2f883
SKY MODULE
<import src="sky:core" as="sky"/>
<script>
// display: toolbar;
// toolbar-spacing: <length>
// display: spring; // remaining space is split equally amongst the springs
// children are vertically centered, layout out left-to-right with toolbar-spacing space between them
// last child is hidden by default unless there's not enough room for the others, then it's shown last, right-aligned
module.exports.SpringLayoutManager = class SpringLayoutManager extends sky.LayoutManager { }
sky.registerLayoutManager('spring', module.exports.SpringLayoutManager);
sky.registerProperty({
name: 'toolbar-spacing',
type: sky.PositiveLengthStyleGrammar,
inherits: true,
initialValue: 8,
needsLayout: true,
});
module.exports.ToolbarLayoutManager = class ToolbarLayoutManager extends sky.LayoutManager {
constructor (styleNode) {
super(styleNode);
this.showingOverflow = false;
this.firstSkippedChild = null;
this.overflowChild = null;
}
function layout(width, height) {
let children = null;
let loop = null;
if (height == null)
height = this.getIntrinsicHeight().value;
if (width == null)
this.assumeDimensions(0, height);
else
this.assumeDimensions(width, height);
let spacing = this.node.getProperty('toolbar-spacing');
if (typeof spacing != 'number')
spacing = 0;
this.overflowChild = null;
this.firstSkippedChild = null;
// layout children and figure out whether we need to truncate the child list and show the overflow child
let springCount = 0;
let minX = 0;
let overflowChildWidth = 0;
let pendingSpacing = 0;
children = this.walkChildren();
loop = children.next();
while (!loop.done) {
let child = loop.value;
let dims = null;
if (child.layoutManager instanceof module.exports.SpringLayoutManager) {
springCount += 1;
pendingSpacing = spacing; // not +=, because we only have one extra spacing per batch of springs
} else {
if (child.needsLayout || child.descendantNeedsLayout) {
childHeight = child.layoutManager.getIntrinsicHeight();
if (childHeight.value < height)
childHeight = childHeight.value;
else
childHeight = height;
dims = child.layoutManager.layout(null, height);
this.setChildSize(child, dims.width, dims.height);
} else {
dims = {
width: child.width,
height: child.height,
};
}
loop = children.next();
if (!loop.done) {
if (minX > 0)
minX += spacing + pendingSpacing;
minX += dims.width;
pendingSpacing = 0;
} else {
overflowChildWidth = spacing + dims.width;
this.overflowChild = child;
}
}
}
// figure out the spacing
this.showingOverflow = false;
let springSize = 0;
if (width != null) {
if (minX <= width) {
if (springCount > 0)
springSize = (width - minX) / sprintCount;
} else {
this.showingOverflow = true;
}
} else {
width = minX;
}
// position the children
// TODO(ianh): support rtl toolbars
let x = 0;
let lastWasNonSpring = false;
children = this.walkChildren();
loop = children.next();
while (!loop.done) {
let child = loop.value;
if (child.layoutManager instanceof module.exports.SpringLayoutManager) {
x += springSize;
if (lastWasNonSpring)
x += spacing;
lastWasNonSpring = false;
} else {
if (!loop.done) {
if (x + child.width + overflowChildWidth > width) {
this.firstSkippedChild = child;
break; // don't display any more children
}
this.setChildPosition(child, x, (height - child.height)/2);
x += child.width + spacing;
lastWasNonSpring = true;
} else {
// assert: this.showingOverflow == false
}
}
}
if (this.showingOverflow)
this.setChildPosition(this.overflowChild, width-this.overflowChild.width, (height - this.overflowChild.height)/2);
else
this.firstSkippedChild = this.overflowChild;
this.markAsLaidOut();
return {
width: width,
height: height,
}
}
function layoutDescendants() {
this.layout(node.width, node.height);
}
function getIntrinsicWidth() {
let width = this.node.getProperty('width');
if (typeof width != 'number') {
let spacing = this.node.getProperty('toolbar-spacing');
if (typeof spacing != 'number')
spacing = 0;
width = 0;
let children = this.walkChildren();
let loop = children.next();
// we exclude the last child because at our ideal width we wouldn't need it
let last1 = null; // last one
let last2 = null; // one before the last one
while (!loop.done) {
if (last1)
width += last1.layoutManager.getIntrinsicWidth().value;
if (last2)
width += spacing;
last2 = last1;
last1 = loop.value;
loop = children.next();
}
}
return super(width); // applies and provides our own min-width/max-width rules
}
function getIntrinsicHeight() {
// we grow our minimum height to be no smaller than the children's
let result = super();
let determineHeight = false;
let heightProperty = this.node.getProperty('height');
if (typeof heightProperty != 'number')
determineHeight = true;
let children = this.walkChildren();
let loop = children.next();
// here we include the last child so that if it pops in our height doesn't change
while (!loop.done) {
let child = loop.value;
let childHeight = child.layoutManager.getIntrinsicHeight();
if (determineHeight) {
if (result.value < childHeight.value)
result.value = childHeight.value;
}
if (result.minimum < childHeight.minimum)
result.minimum = childHeight.minimum;
loop = children.next();
}
if (result.minimum > result.maximum)
result.maximum = result.minimum;
if (result.value > result.maximum)
result.value = result.maximum;
if (result.value < result.minimum)
result.value = result.minimum;
return result;
}
function paintChildren(canvas) {
let width = this.node.width;
let children = this.walkChildren();
let loop = children.next();
while ((!loop.done) && (loop.value != this.firstSkippedChild))
canvas.paintChild(loop.value);
if (this.showingOverflow)
canvas.paintChild(this.overflowChild);
}
function inChild(child, x, y) {
return (x >= child.x) && (y >= child.y) && (x < child.x+child.width) && (y < child.y+child.height);
}
function hitTest(x, y) {
let children = this.walkChildrenBackwards();
let loop = children.next();
while ((!loop.done) && (loop.value != this.firstSkippedChild))
if (this.inChild(loop.value, x, y))
return loop.value;
if (this.showingOverflow)
if (this.inChild(this.overflowChild, x, y))
return this.overflowChild;
return this.node;
}
}
sky.registerLayoutManager('toolbar', module.exports.ToolbarLayoutManager);
</script>
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

HIAST - GitLab