mirror of
https://github.com/flutter/flutter
synced 2024-08-27 03:50:33 +00:00
Docs: add an example that uses the current APIs to define an <element>
element; an example that uses that example to define some HTMLy elements; and an example to use those HTMLy elements to display a hello world doc. Highly incomplete WIP. Review URL: https://codereview.chromium.org/698293003
This commit is contained in:
parent
61f4494e25
commit
1da15583c5
72
examples/htmlish/framework/element.sky
Normal file
72
examples/htmlish/framework/element.sky
Normal file
|
@ -0,0 +1,72 @@
|
|||
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({
|
||||
tagName: 'element',
|
||||
prototype: class extends Element {
|
||||
constructor (module) {
|
||||
super();
|
||||
this.state = 'loading';
|
||||
this.module = module;
|
||||
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 (module) {
|
||||
super(module);
|
||||
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;
|
||||
this.module.exports[constructorName] = this.registerElement({
|
||||
tagName: this.getAttribute('name'),
|
||||
shadow: style || template,
|
||||
constructor: constructor,
|
||||
});
|
||||
delete this.definedPrototype;
|
||||
delete this.module;
|
||||
this.state = 'loaded';
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
109
examples/htmlish/framework/htmlish.sky
Normal file
109
examples/htmlish/framework/htmlish.sky
Normal file
|
@ -0,0 +1,109 @@
|
|||
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 -->
|
||||
|
||||
<element name=html>
|
||||
<!-- implement a scrollable viewport -->
|
||||
</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>
|
11
examples/htmlish/samples/intro.sky
Normal file
11
examples/htmlish/samples/intro.sky
Normal file
|
@ -0,0 +1,11 @@
|
|||
#!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>
|
Loading…
Reference in a new issue