Updated example

This commit is contained in:
thosakwe 2016-12-27 11:55:17 -05:00
parent d1d96c4b27
commit 8fcdb3841d
10 changed files with 2968 additions and 3 deletions

4
.gitignore vendored
View file

@ -5,8 +5,8 @@
.packages
.project
.pub/
build/
**/packages/
# build/
# **/packages/
# Files created by dart2js
# (Most Dart developers will use pub build to compile Dart, use/modify these

View file

@ -0,0 +1,32 @@
// Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
(function() {
// Bootstrap support for Dart scripts on the page as this script.
if (navigator.userAgent.indexOf('(Dart)') === -1) {
// TODO:
// - Support in-browser compilation.
// - Handle inline Dart scripts.
// Fall back to compiled JS. Run through all the scripts and
// replace them if they have a type that indicate that they source
// in Dart code (type="application/dart").
var scripts = document.getElementsByTagName("script");
var length = scripts.length;
for (var i = 0; i < length; ++i) {
if (scripts[i].type == "application/dart") {
// Remap foo.dart to foo.dart.js.
if (scripts[i].src && scripts[i].src != '') {
var script = document.createElement('script');
script.src = scripts[i].src.replace(/\.dart(?=\?|$)/, '.dart.js');
var parent = scripts[i].parentNode;
// TODO(vsm): Find a solution for issue 8455 that works with more
// than one script.
document.currentScript = script;
parent.replaceChild(script, scripts[i]);
}
}
}
}
})();

View file

@ -0,0 +1,9 @@
// Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
// TODO(jmesserly): remove this script after a deprecation period.
if (typeof console == "object" && typeof console.warn == "function") {
console.warn('<script src="packages/browser/interop.js"> is no longer ' +
'needed for dart:js. See http://pub.dartlang.org/packages/browser.');
}

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,32 @@
// Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
(function() {
// Bootstrap support for Dart scripts on the page as this script.
if (navigator.userAgent.indexOf('(Dart)') === -1) {
// TODO:
// - Support in-browser compilation.
// - Handle inline Dart scripts.
// Fall back to compiled JS. Run through all the scripts and
// replace them if they have a type that indicate that they source
// in Dart code (type="application/dart").
var scripts = document.getElementsByTagName("script");
var length = scripts.length;
for (var i = 0; i < length; ++i) {
if (scripts[i].type == "application/dart") {
// Remap foo.dart to foo.dart.js.
if (scripts[i].src && scripts[i].src != '') {
var script = document.createElement('script');
script.src = scripts[i].src.replace(/\.dart(?=\?|$)/, '.dart.js');
var parent = scripts[i].parentNode;
// TODO(vsm): Find a solution for issue 8455 that works with more
// than one script.
document.currentScript = script;
parent.replaceChild(script, scripts[i]);
}
}
}
}
})();

View file

@ -0,0 +1,9 @@
// Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
// TODO(jmesserly): remove this script after a deprecation period.
if (typeof console == "object" && typeof console.warn == "function") {
console.warn('<script src="packages/browser/interop.js"> is no longer ' +
'needed for dart:js. See http://pub.dartlang.org/packages/browser.');
}

View file

@ -0,0 +1,3 @@
# This needs to be in src/ so the tests can access it using a package: URI.
foo:file:///foo/bar/
bar:http://dartlang.org/bar/

View file

@ -0,0 +1,69 @@
// Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
// This script runs in HTML files and loads the corresponding test scripts for
// either Dartium or a JS browser. It's used by "pub serve" and user-authored
// HTML files; when running without "pub serve", the default HTML file manually
// chooses between serving a Dart or JS script tag.
window.onload = function() {
// Sends an error message to the server indicating that the script failed to
// load.
//
// This mimics a MultiChannel-formatted message.
var sendLoadException = function(message) {
window.parent.postMessage({
"href": window.location.href,
"data": [0, {"type": "loadException", "message": message}]
}, window.location.origin);
}
// The basename of the current page.
var name = window.location.href.replace(/.*\//, '').replace(/#.*/, '');
// Find <link rel="x-dart-test">.
var links = document.getElementsByTagName("link");
var testLinks = [];
var length = links.length;
for (var i = 0; i < length; ++i) {
if (links[i].rel == "x-dart-test") testLinks.push(links[i]);
}
if (testLinks.length != 1) {
sendLoadException(
'Expected exactly 1 <link rel="x-dart-test"> in ' + name + ', found ' +
testLinks.length + '.');
return;
}
var link = testLinks[0];
if (link.href == '') {
sendLoadException(
'Expected <link rel="x-dart-test"> in ' + name + ' to have an "href" ' +
'attribute.');
return;
}
var script = document.createElement('script');
// Load the compiled JS for a normal browser, and the Dart code for Dartium.
if (navigator.userAgent.indexOf('(Dart)') === -1) {
script.src = link.href + '.browser_test.dart.js';
} else {
script.src = link.href + '.browser_test.dart';
script.type = 'application/dart';
}
script.onerror = function(event) {
var message = "Failed to load script at " + script.src +
(event.message ? ": " + event.message : ".");
sendLoadException(message);
}
var parent = link.parentNode;
document.currentScript = script;
parent.replaceChild(script, link);
};

View file

@ -0,0 +1,314 @@
/* Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file
* for details. All rights reserved. Use of this source code is governed by a
* BSD-style license that can be found in the LICENSE file. */
iframe {
/* We would use display: none here, but then Firefox fails to properly compute
* styles. See #274 */
visibility: hidden;
}
#play {
display: none;
cursor: pointer;
}
#dark {
display: none;
}
.paused #play {
display: block;
z-index: 1;
}
.paused #dark {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.paused #right-flank, .paused #right-ear, .paused #right-paw,
.paused #left-flank, .paused #left-ear, .paused #left-paw {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.debug body {
margin: 0;
padding: 0;
}
.debug iframe {
visibility: visible;
border: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Compiled output from
* http://codepen.io/mknadler/pen/11b75cb014a3c382f54abf527655af21. */
svg {
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
#right-flank {
fill: #0074C1;
stroke-color: #0074C1;
-webkit-animation: right-flank 8s ease infinite alternate;
animation: right-flank 8s ease infinite alternate;
}
#right-ear {
fill: #00B5AB;
stroke-color: #00B5AB;
-webkit-animation: right-ear 8s ease-in infinite alternate;
animation: right-ear 8s ease-in infinite alternate;
}
#right-paw {
fill: #00A6E4;
stroke-color: #00A6E4;
-webkit-animation: right-paw 8s ease-out infinite alternate;
animation: right-paw 8s ease-out infinite alternate;
}
#left-flank {
fill: #00B5AB;
stroke-color: #00B5AB;
-webkit-animation: left-flank 8s ease-in-out infinite alternate;
animation: left-flank 8s ease-in-out infinite alternate;
}
#left-ear {
fill: #0074C1;
stroke-color: #0074C1;
-webkit-animation: left-ear 8s linear infinite alternate;
animation: left-ear 8s linear infinite alternate;
}
#left-paw {
fill: #41C1BC;
stroke-color: #41C1BC;
-webkit-animation: left-paw 8s ease infinite alternate;
animation: left-paw 8s ease infinite alternate;
}
@-webkit-keyframes left-ear {
20% {
-webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
fill: #00A6E4;
}
50% {
-webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
fill: #41C1BC;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #0074C1;
}
}
@keyframes left-ear {
20% {
-webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
fill: #00A6E4;
}
50% {
-webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
fill: #41C1BC;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #0074C1;
}
}
@-webkit-keyframes right-ear {
20% {
-webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00B5AB;
}
}
@keyframes right-ear {
20% {
-webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00B5AB;
}
}
@-webkit-keyframes left-paw {
20% {
-webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
fill: #00B5AB;
}
50% {
-webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
fill: #00B5AB;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #41C1BC;
}
}
@keyframes left-paw {
20% {
-webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
fill: #00B5AB;
}
50% {
-webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
fill: #00B5AB;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #41C1BC;
}
}
@-webkit-keyframes right-paw {
20% {
-webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
fill: #41C1BC;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00A6E4;
}
}
@keyframes right-paw {
20% {
-webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
fill: #41C1BC;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00A6E4;
}
}
@-webkit-keyframes left-flank {
20% {
-webkit-transform: translate(0px, 100px) scale(0.6);
transform: translate(0px, 100px) scale(0.6);
fill: #00A6E4;
}
50% {
-webkit-transform: translate(0px, 100px) scale(0.4);
transform: translate(0px, 100px) scale(0.4);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00B5AB;
}
}
@keyframes left-flank {
20% {
-webkit-transform: translate(0px, 100px) scale(0.6);
transform: translate(0px, 100px) scale(0.6);
fill: #00A6E4;
}
50% {
-webkit-transform: translate(0px, 100px) scale(0.4);
transform: translate(0px, 100px) scale(0.4);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #00B5AB;
}
}
@-webkit-keyframes right-flank {
20% {
-webkit-transform: translate(100px, -25px) scale(0.6);
transform: translate(100px, -25px) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(110px, 0px) scale(0.4);
transform: translate(110px, 0px) scale(0.4);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #0074C1;
}
}
@keyframes right-flank {
20% {
-webkit-transform: translate(100px, -25px) scale(0.6);
transform: translate(100px, -25px) scale(0.6);
fill: #41C1BC;
}
50% {
-webkit-transform: translate(110px, 0px) scale(0.4);
transform: translate(110px, 0px) scale(0.4);
fill: #00A6E4;
}
80% {
-webkit-transform: translate(0px, 0px) scale(1);
transform: translate(0px, 0px) scale(1);
fill: #0074C1;
}
}

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<title>test Browser Host</title>
<link rel="stylesheet" type="text/css" href="host.css" />
</head>
<body>
<svg id="dart" version="1.1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<path id="right-flank" fill="#0083C9" d="M249.379,226.486l-6.676,15.572L166.174,166h58.82c0,0,2.807-0.409,3.645,1.966L249.379,226.486z"/>
<path id="right-ear" fill="#00D2B8" d="M201.84,141.906L166.174,166h58.82c0,0,2.168-0.25,2.645,0.566l-2.694-8.848l-15.024-14.68C207.555,140.329,203.578,140.744,201.84,141.906z"/>
<path id="left-flank" fill="#00D2B8" d="M242.616,241.856l-15.022,6.799l-60.493-21.429c-1.035-0.395-1.101-3.696-1.101-3.696v-57.932L242.616,241.856z"/>
<path id="left-paw" fill="#55DECA" d="M167.003,227.098l60.636,21.558l15.064-6.799L237.224,259h-43.856c0,0-14.077-13.929-18.141-17.993C171.162,236.943,169.162,233.989,167.003,227.098z"/>
<path id="right-paw" fill="#00A4E4" d="M227.676,166.365c0.963,1.401,1.361,2.473,1.361,2.473l20.352,57.648l-6.711,15.37L259,236.463v-44.854c0,0-13.678-13.965-17.741-17.882C237.193,169.811,231.466,166.319,227.676,166.365z"/>
<path id="left-ear" fill="#0083C9" d="M166.769,227.098c0,0-0.769-1.104-0.769-4.355v-57.144l-23.115,34.877c-1.626,1.774-1.567,6.538,1.595,9.755l13.636,13.892L166.769,227.098z"/>
</svg>
<div id="dark"></div>
<svg id="play" version="1.1" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 25 25">
<defs><filter id="blur"><feGaussianBlur stdDeviation="0.3" id="feGaussianBlur5097" /></filter></defs>
<path d="M 3.777014,1.3715789 A 1.1838119,1.1838119 0 0 0 2.693923,2.5488509 V 22.444746 a 1.1838119,1.1838119 0 0 0 1.765908,1.035999 l 17.235259,-9.95972 a 1.1838119,1.1838119 0 0 0 0,-2.071998 L 4.459831,1.5128519 A 1.1838119,1.1838119 0 0 0 3.777014,1.3715789 z" style="opacity:0.5;stroke:#000000;stroke-width:1;filter:url(#blur)" />
<path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.32722104" d="M 3.4770491,1.0714664 A 1.1838119,1.1838119 0 0 0 2.3939589,2.2487382 V 22.144633 a 1.1838119,1.1838119 0 0 0 1.7659079,1.035999 l 17.2352602,-9.95972 a 1.1838119,1.1838119 0 0 0 0,-2.071998 L 4.1598668,1.2127389 A 1.1838119,1.1838119 0 0 0 3.4770491,1.0714664 z" />
</svg>
<script src="host.dart.js"></script>
</body>
</html>