Skip to content

F
Front-End
Commit 5f6c32c2 authored by Elliott Sprehn's avatar Elliott Sprehn
Browse files
Options

Make SkyElement more classy. 

The syntax for implementing a SkyElement is now:

<sky-element name="element-name">
<template>
  <!-- template here -->
</template>
<script>
module.exports = class extends SkyElement {
  attached() {
     // ...
  }
  // .. methods here ..
}.register();
</script>
</sky-element>

The register() static method on SkyElement subclasses calls
document.registerElement() and returns the generated constructor.
It uses the parent <sky-element>'s name attribute to set the name
of the element.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/788943003
parent 8cd1801d
Hide whitespace changes
Inline Side-by-side
Showing with 112 additions and 83 deletions
examples/city-list/city-list.sky
View file @ 5f6c32c2
......@@ -7,6 +7,12 @@
<import src="city-data-service.sky" as="CityDataService" />
<import src="city-sequence.sky" as="CitySequence" />
<script>
// TODO(esprehn): exports should start as the empty object.
module.exports = {};
</script>
<sky-element name="state-header">
<template>
<style>
div {
......@@ -20,15 +26,15 @@
<div>{{ state }}</div>
</template>
<script>
SkyElement({
name: 'state-header',
module.exports.StateHeaderElement = class extends SkyElement {
set datum(datum) {
this.state = datum.state;
}
});
}.register();
</script>
</sky-element>
<sky-element name="letter-header">
<template>
<style>
div {
......@@ -42,15 +48,15 @@ SkyElement({
<div>{{ letter }}</div>
</template>
<script>
SkyElement({
name: 'letter-header',
module.exports.LetterHeaderElement = class extends SkyElement {
set datum(datum) {
this.letter = datum.letter;
}
});
}.register();
</script>
</sky-element>
<sky-element name="city-item">
<template>
<style>
:host {
......@@ -85,16 +91,16 @@ SkyElement({
</div>
</template>
<script>
SkyElement({
name: 'city-item',
set datum(datum) {
this.name = datum.name;
this.population = datum.population;
}
});
module.exports.CityItemElement = class extends SkyElement {
set datum(datum) {
this.name = datum.name;
this.population = datum.population;
}
}.register();
</script>
</sky-element>
<sky-element name="city-list">
<template>
<style>
......@@ -146,14 +152,12 @@ SkyElement({
}
</style>
<div id="scroller" fit>
<div id="scrollarea">
<div id="contentarea">
</div>
</div>
</div>
</template>
<script>
......@@ -540,16 +544,18 @@ SkyElement({
this.drawBottom = 0;
}
SkyElement({
name: 'city-list',
loader: null,
scroller: null,
tiler: null,
date: null,
month: null,
views: null,
module.exports.CityListElement = class extends SkyElement {
created() {
this.loader = null;
this.scroller = null;
this.tiler = null;
this.date = null;
this.month = null;
this.views = null;
}
attached: function() {
attached() {
this.views = {};
this.loader = new Loader(this);
this.scroller = new Scroller();
......@@ -570,44 +576,43 @@ SkyElement({
self.domReady();
self.loader.maybeLoadMoreData(self.dataLoaded);
});
},
}
domReady: function() {
domReady() {
this.scroller.setup(this.shadowRoot.getElementById('scroller'),
this.shadowRoot.getElementById('scrollarea'),
this.shadowRoot.getElementById('contentarea'));
var scrollFrame = this.scroller.getCurrentFrame();
this.tiler.setupViews(scrollFrame);
},
}
updateView: function(data, scrollChanged) {
updateView(data, scrollChanged) {
var scrollFrame = this.scroller.getCurrentFrame();
this.tiler.drawTiles(scrollFrame, data);
var datum = scrollChanged ?
this.tiler.getFirstVisibleDatum(scrollFrame) : null;
this.loader.maybeLoadMoreData(this.dataLoaded, datum);
},
}
dataLoaded: function(data, indexOffset) {
dataLoaded(data, indexOffset) {
var scrollFrame = this.scroller.getCurrentFrame();
this.tiler.updateFirstItem(indexOffset);
this.updateView(data.items, false);
},
}
handleScroll: function(event) {
handleScroll(event) {
if (!this.scroller.captureNewFrame(event))
return;
this.updateView(this.loader.getItems(), true);
},
}
scrollBy: function(amount) {
scrollBy(amount) {
this.scrollerElement.scrollTop += amount;
this.handleScroll({ target: this.scrollerElement });
}
});
}.register();
})(this);
</script>
</sky-element>
examples/file-browser.sky
View file @ 5f6c32c2
......@@ -6,6 +6,7 @@
<import src="../framework/sky-element/sky-element.sky" as="SkyElement" />
<import src="../framework/xmlhttprequest.sky" as="XMLHttpRequest" />
<sky-element name="file-browser">
<template>
<style>
heading {
......@@ -21,12 +22,13 @@
</template>
</template>
<script>
SkyElement({
name: 'file-browser',
url: '',
files: [],
directories: [],
attached: function() {
module.exports = class extends SkyElement {
created() {
this.url = '';
this.files = [];
this.directories = [];
}
attached() {
this.url = this.ownerDocument.URL;
var xhr = new XMLHttpRequest();
xhr.open('GET', this.url + '?format=json');
......@@ -37,5 +39,6 @@ SkyElement({
}).bind(this);
xhr.send();
}
});
}.register();
</script>
</sky-element>
examples/flights-app/app-header.sky
View file @ 5f6c32c2
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-header">
<template>
<style>
:host {
......@@ -12,7 +14,7 @@
<content></content>
</template>
<script>
SkyElement({
name: "app-header"
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-menu-button.sky
View file @ 5f6c32c2
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-menu-button">
<template>
<style>
:host {
......@@ -13,7 +15,7 @@
<content></content>
</template>
<script>
SkyElement({
name: "app-menu-button"
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-panel-content.sky
View file @ 5f6c32c2
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-panel-content">
<template>
<style>
:host {
......@@ -8,7 +10,7 @@
<content></content>
</template>
<script>
SkyElement({
name: "app-panel-content"
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-panel-header.sky
View file @ 5f6c32c2
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-panel-header">
<template>
<style>
:host {
......@@ -11,7 +13,7 @@
<content></content>
</template>
<script>
SkyElement({
name: "app-panel-header"
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-panel.sky
View file @ 5f6c32c2
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-panel">
<template>
<style>
:host {
......@@ -10,7 +12,7 @@
<content></content>
</template>
<script>
SkyElement({
name: "app-panel"
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-scrollable.sky
View file @ 5f6c32c2
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-scrollable">
<template>
<style>
:host {
......@@ -10,7 +12,7 @@
<content></content>
</template>
<script>
SkyElement({
name: "app-scrollable"
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-search-input.sky
View file @ 5f6c32c2
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-search-input">
<template>
<style>
:host {
......@@ -19,7 +21,7 @@
<span class="input-text"><t>flights today to dc by price</t></span>
</template>
<script>
SkyElement({
name: "app-search-input"
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-title.sky
View file @ 5f6c32c2
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-title">
<template>
<style>
:host {
......@@ -12,7 +14,7 @@
<content></content>
</template>
<script>
SkyElement({
name: "app-title"
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-toast.sky
View file @ 5f6c32c2
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-toast">
<template>
<style>
:host {
......@@ -30,7 +32,7 @@
</div>
</template>
<script>
SkyElement({
name: "app-toast"
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/app-toolbar.sky
View file @ 5f6c32c2
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
<sky-element name="app-toolbar">
<template>
<style>
:host {
......@@ -9,7 +11,7 @@
<content></content>
</template>
<script>
SkyElement({
name: "app-toolbar"
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/flights-app.sky
View file @ 5f6c32c2
......@@ -10,6 +10,7 @@
<import src="app-scrollable.sky" />
<import src="app-toast.sky" />
<sky-element name="flights-app">
<template>
<style>
* { box-sizing: border-box; }
......@@ -200,7 +201,7 @@
</app-toast>
</template>
<script>
SkyElement({
name: "flights-app",
});
module.exports = class extends SkyElement {
}.register();
</script>
</sky-element>
examples/flights-app/index.sky
View file @ 5f6c32c2
<sky>
<import src="flights-app.sky" />
<import src="flights-app.sky" as="FlightsAppElement"/>
<style>
sky {
height: 100%;
......@@ -8,8 +8,8 @@
<script>
// TODO(esprehn): Work around a bug where having <flights-app /> in the
// page doesn't render anything until the first input event.
addEventListener("load", function() {
document.querySelector("sky").appendChild(document.createElement("flights-app"));
window.addEventListener("load", function() {
document.querySelector("sky").appendChild(new FlightsAppElement());
});
</script>
</sky>
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