Skip to content

Using platform.js to get this working on Firefox #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
geelen wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
Open

Using platform.js to get this working on Firefox #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6b6b03d
Using platform.js to get this working on Firefox
geelen Jul 24, 2014
5f54fc5
Able to move the templates back!
geelen Jul 27, 2014
e411da5
whitespace fixes to make the diffs nicer
geelen Jul 27, 2014
d75714e
and more whitespace fixes
geelen Jul 27, 2014
3e51121
Now works in both Chrome & Firefox!
geelen Jul 28, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions components/todo-app/component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ <h1>Web Components <strong>Todos</strong></h1>
<!-- Interaction -->

<script>
(function(document){
(function(document, owner){

var TodoAppController = function(context){
// save the context to the custom element
Expand All @@ -114,7 +114,7 @@ <h1>Web Components <strong>Todos</strong></h1>
this.shadow = this.context.createShadowRoot();

// stamp out our template in the shadow dom
var template = document.querySelector("#template").content.cloneNode(true);
var template = owner.querySelector("#template").content.cloneNode(true);
this.shadow.appendChild(template);

// Setup event listener
Expand Down Expand Up @@ -164,7 +164,7 @@ <h1>Web Components <strong>Todos</strong></h1>
TodoAppController.prototype.renderList = function(){
// Note: renderList() can be significantly optimized. Leaving
// as a Todo for now.

// Get a reference to the todo container within the shadow DOM
var todoContainer = this.shadow.querySelector(".todo-container");
var self = this;
Expand Down Expand Up @@ -210,5 +210,5 @@ <h1>Web Components <strong>Todos</strong></h1>
// Register our todo-item tag with the document
document.registerElement('todo-app', {prototype: TodoApp});

})(document.currentScript.ownerDocument);
})(document, (document._currentScript || document.currentScript).ownerDocument);
</script>
6 changes: 3 additions & 3 deletions components/todo-item/component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@

<!-- JS - Interaction -->
<script>
(function(document){
(function(document, owner){

var TodoItemController = function(context){
this.context = context;
Expand All @@ -50,7 +50,7 @@
this.shadow = context.createShadowRoot();

// stamp out our template in the shadow dom
var template = document.querySelector("#template").content.cloneNode(true);
var template = owner.querySelector("#template").content.cloneNode(true);
this.shadow.appendChild(template);

// Pick the checkbox
Expand Down Expand Up @@ -116,5 +116,5 @@
// register out todo-item tag with the document
document.registerElement('todo-item', {prototype: TodoItem});

})(document.currentScript.ownerDocument);
})(document, (document._currentScript || document.currentScript).ownerDocument);
</script>
14 changes: 12 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet'>

<script>
if ('registerElement' in document
&& 'createShadowRoot' in HTMLElement.prototype
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// We're using a browser with native WC support!
} else {
document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script>')
}
</script>
<link rel="import" href="components/todo-app/component.html">
</head>
<body>
<todo-app>
<p class="fallback">
Whoops. Your browser doesn't support one or more of the Web Component
features needed to run this demo. Work is underway in Firefox, Safari
features needed to run this demo. Work is underway in Firefox, Safari
and (possibly) IE to change that. Chrome 36+ should run this demo fine
for now. Maybe next time!</p>
</todo-app>
</body>
</html>
</html>