Skip to content

Commit

Permalink
Further templatization
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffposnick
jeffposnick committed Oct 13, 2015
1 parent 56c7222 commit 03a47aa
Show file tree
Hide file tree
Showing 8 changed files with 344 additions and 550 deletions.
10 changes: 4 additions & 6 deletions battery-status/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ var dichargeTimeEl = document.getElementById('dischargeTime');
var levelEl = document.getElementById('level');

function updateBatteryUI(battery) {
battery = battery || this;

levelEl.textContent = (battery.level * 100) + '%';
chargingTimeEl.textContent = battery.chargingTime + ' Seconds';
dichargeTimeEl.textContent = battery.dischargingTime + ' Seconds';
Expand All @@ -22,10 +20,10 @@ function monitorBattery(battery) {
updateBatteryUI(battery);

// Monitor for futher updates.
battery.addEventListener('levelchange', updateBatteryUI);
battery.addEventListener('chargingchange', updateBatteryUI);
battery.addEventListener('dischargingtimechange', updateBatteryUI);
battery.addEventListener('chargingtimechange', updateBatteryUI);
battery.addEventListener('levelchange', updateBatteryUI.bind(null, battery));
battery.addEventListener('chargingchange', updateBatteryUI.bind(null, battery));
battery.addEventListener('dischargingtimechange', updateBatteryUI.bind(null, battery));
battery.addEventListener('chargingtimechange', updateBatteryUI.bind(null, battery));
}

if('getBattery' in navigator) {
Expand Down
2 changes: 1 addition & 1 deletion battery-status/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
feature_name: Battery Status
feature_name: Battery Status API
chrome_version: 38
feature_id: 4537134732017664
---
Expand Down
7 changes: 7 additions & 0 deletions beacon/demo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
if ('sendBeacon' in navigator) {
window.addEventListener('pagehide', function() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/4GE2nVUuDoDGsNyKES2G',
'Sent by a beacon!');
}, false);
}
124 changes: 23 additions & 101 deletions beacon/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,23 @@
<!doctype html>
<!--
Copyright 2014 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="description" content="Sample illustrating the use of Beacon.">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Beacon Sample</title>

<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">

<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-title" content="Beacon Sample">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">

<link rel="icon" href="../images/favicon.ico">

<link rel="stylesheet" href="../styles/main.css">
</head>
<body>
<h1>Beacon Sample</h1>
<p>Available in <a href="https://www.chromestatus.com/feature/5517433905348608">Chrome 39+</a></p>

<p>Beacon lets you asynchronously transfer small HTTP data from
the User Agent to a web server. It can be used e.g. to send analytics
or diagnostics code without delaying the page's unload or affecting
the performance of the next navigation.</p>

<p>The sample below sends a beacon to a sample server at
<code>https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop</code> on unload.
Close this page and visit
<a href="https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop/inspect">PutsReq inspect page</a>
to see if the beacon data was received.
</p>

<pre>
<code>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon("https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop", 'Sent by a beacon!');
}
}();
</code>
</pre>


<!-- // [START code-block] -->
<script>
(function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
})();
</script>
<!-- // [END code-block] -->


<script>
/* jshint ignore:start */
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-53563471-1', 'auto');
ga('send', 'pageview');
/* jshint ignore:end */
</script>
<!-- Built with love using Web Starter Kit -->
</body>
</html>
---
feature_name: Beacon
chrome_version: 39
feature_id: 5517433905348608
---

<h3>Background</h3>
<p>
Beacon lets you asynchronously transfer small HTTP data from
the User Agent to a web server. It can be used e.g. to send analytics
or diagnostics code without delaying the page's unload or affecting
the performance of the next navigation.
</p>

<p>
The sample below sends a beacon to a sample server at
<code>https://putsreq.herokuapp.com/4GE2nVUuDoDGsNyKES2G</code> on unload.
Close this page and visit the
<a href="https://putsreq.herokuapp.com/4GE2nVUuDoDGsNyKES2G/inspect">PutsReq inspect page</a>
to see if the beacon data was received.
</p>

{% include js_snippet.html filename='demo.js' %}
207 changes: 207 additions & 0 deletions classes-es6/demo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
'use strict';

// Example 1: Creating a new class (declaration-form)
// ===============================================================

// A base class is defined using the new reserved 'class' keyword
class Polygon {
// ..and an (optional) custom class constructor. If one is
// not supplied, a default constructor is used instead:
// constructor() { }
constructor(height, width) {
this.name = 'Polygon';
this.height = height;
this.width = width;
}

// Simple class instance methods using short-hand method
// declaration
sayName() {
ChromeSamples.log('Hi, I am a ', this.name + '.');
}

sayHistory() {
ChromeSamples.log('"Polygon" is derived from the Greek polus (many) and gonia (angle).');
}

// We will look at static and subclassed methods shortly
}

// Classes are used just like ES5 constructor functions:
let p = new Polygon(300,400);
p.sayName();
ChromeSamples.log('The width of this polygon is ' + p.width);


// Example 2: Creating a new class (expression-form)
// ===============================================================

// Our Polygon class above is an example of a Class declaration.
// ES6 classes also support Class expressions - just another way
// of defining a new class. For example:
const MyPoly = class Poly {
getPolyName() {
ChromeSamples.log('Hi. I was created with a Class expression. My name is ' + Poly.name);
}
};

let inst = new MyPoly();
inst.getPolyName();


// Example 3: Extending an existing class
// ===============================================================

// Classes support extending other classes, but can also extend
// other objects. Whatever you extend must be a constructor.
//
// Let's extend the Polygon class to create a new derived class
// called Square.
class Square extends Polygon {
constructor(length) {
// The reserved 'super' keyword is for making super-constructor
// calls and allows access to parent methods.
//
// Here, it will call the parent class' constructor with lengths
// provided for the Polygon's width and height
super(length, length);
// Note: In derived classes, super() must be called before you
// can use 'this'. Leaving this out will cause a reference error.
this.name = 'Square';
}

// Getter/setter methods are supported in classes,
// similar to their ES5 equivalents
get area() {
return this.height * this.width;
}

set area(value) {
this.area = value;
}
}

let s = new Square(5);

s.sayName();
ChromeSamples.log('The area of this square is ' + s.area);

// Example 4: Subclassing methods of a parent class
// ===============================================================

class Rectangle extends Polygon {
constructor(height, width) {
super(height, width);
this.name = 'Rectangle';
}
// Here, sayName() is a subclassed method which
// overrides their superclass method of the same name.
sayName() {
ChromeSamples.log('Sup! My name is ', this.name + '.');
super.sayHistory();
}
}

let r = new Rectangle(50, 60);
r.sayName();

// Example 5: Defining static methods
// ===============================================================

// Classes support static members which can be accessed without an
// instance being present.
class Tripple {
// Using the 'static' keyword creates a method which is associated
// with a class, but not with an instance of the class.
static tripple(n) {
n = n | 1;
return n * 3;
}
}

// super.prop in this example is used for accessing super-properties from
// a parent class. This works fine in static methods too:
class BiggerTripple extends Tripple {
static tripple(n) {
return super.tripple(n) * super.tripple(n);
}
}

ChromeSamples.log(Tripple.tripple());
ChromeSamples.log(Tripple.tripple(6));
ChromeSamples.log(BiggerTripple.tripple(3));
var tp = new Tripple();
// ChromeSamples.log(tp.tripple()); tp.tripple is not a function


// Example 6: Subclassing built-in classes and DOM
// ===============================================================

// Extend Date built-in
class myDate extends Date {
constructor() {
super();
}

getFormattedDate() {
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
}
}

var aDate = new myDate();
ChromeSamples.log(aDate.getTime());
ChromeSamples.log(aDate.getFormattedDate());

// Extend Uint8Array
class ExtendedUint8Array extends Uint8Array {
constructor() {
super(10);
this[0] = 255;
this[1] = 0xFFA;
}
}

var eua = new ExtendedUint8Array();
ChromeSamples.log(eua.byteLength);

// Extend DOM Audio element
class myAudio extends Audio {
constructor() {
super();
this._lyrics = '';
}

get lyrics() {
return this._lyrics;
}

set lyrics(str) {
this._lyrics = str;
}
}

var player = new myAudio();
player.controls = true;
player.lyrics = 'Never gonna give you up';
document.querySelector('body').appendChild(player);
ChromeSamples.log(player.lyrics);

// Note: The V8 in Chrome 42 supports subclassing built-ins but Arrays.
// Subclassing arrays supported in Chrome 43.

class Stack extends Array {
constructor() {
super();
}

top() {
return this[this.length - 1];
}
}

var stack = new Stack();
stack.push('world');
stack.push('hello');
ChromeSamples.log(stack.top());
ChromeSamples.log(stack.length);
Loading

0 comments on commit 03a47aa

Please sign in to comment.