├── .gitignore
├── LICENSE
├── README
├── bower.json
├── fx-listener-test.html
├── fx-listener.html
├── fx-observer-test.html
├── fx-observer.html
├── fx-route.html
├── fx-shared-instance-test.html
├── fx-shared-instance.html
├── fx-task-queue.html
├── fx-view-aware.html
├── fx-view.html
├── fx-worker.html
├── karma.conf.js
├── mocha.conf.js
├── notes.txt.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | bower_components


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2014 The Chromium Authors. All rights reserved.
 2 | 
 3 | Redistribution and use in source and binary forms, with or without
 4 | modification, are permitted provided that the following conditions are
 5 | met:
 6 | 
 7 |    * Redistributions of source code must retain the above copyright
 8 | notice, this list of conditions and the following disclaimer.
 9 |    * Redistributions in binary form must reproduce the above
10 | copyright notice, this list of conditions and the following disclaimer
11 | in the documentation and/or other materials provided with the
12 | distribution.
13 |    * Neither the name of Google Inc. nor the names of its
14 | contributors may be used to endorse or promote products derived from
15 | this software without specific prior written permission.
16 | 
17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
18 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
19 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
20 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
21 | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
24 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
25 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
27 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28 | 


--------------------------------------------------------------------------------
/README:
--------------------------------------------------------------------------------
1 | A framework for rapidly building polymer apps.
2 | 
3 | Depends on sugar.js


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fx-framework",
 3 |   "version": "0.0.0",
 4 |   "authors": [
 5 |     "Elliott Sprehn <esprehn@chromium.org>"
 6 |   ],
 7 |   "description": "A framework for rapidly building polymer apps.",
 8 |   "license": "https://chromium.googlesource.com/chromium/src.git/+/master/LICENSE",
 9 |   "private": true,
10 |   "dependencies": {
11 |     "polymer": "Polymer/polymer",
12 |     "sugar": "andrewplummer/sugar#~1.4.1"
13 |   },
14 |   "ignore": [
15 |     "**/.*",
16 |     "node_modules",
17 |     "bower_components",
18 |     "test",
19 |     "tests"
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------
/fx-listener-test.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 |     Copyright 2014 The Chromium Authors. All rights reserved.
  3 |     Use of this source code is governed by a BSD-style license that can be
  4 |     found in the LICENSE file.
  5 |  -->
  6 | <link rel="import" href="fx-listener.html">
  7 | 
  8 | <script>
  9 | "use strict";
 10 | 
 11 | describe("fx-listener", function() {
 12 |     var container;
 13 | 
 14 |     beforeEach(function() {
 15 |         container = document.body.appendChild(document.createElement("div"));
 16 |     });
 17 | 
 18 |     afterEach(function() {
 19 |         if (container)
 20 |             container.remove();
 21 |         container = null;
 22 |     });
 23 | 
 24 |     it("should listen for events on the window", function() {
 25 |         var events = [];
 26 |         var listener = new FxListener();
 27 |         listener.setAttribute("on-test-event", "ignored");
 28 |         listener.addEventListener("test-event", function(event) {
 29 |             events.push(event);
 30 |         });
 31 |         window.dispatchEvent(new CustomEvent("test-event"));
 32 |         container.appendChild(listener);
 33 |         var event = new CustomEvent("test-event");
 34 |         window.dispatchEvent(event);
 35 |         listener.remove();
 36 |         window.dispatchEvent(new CustomEvent("test-event"));
 37 |         assert.equal(events.length, 1);
 38 |         assert.equal(events[0].detail, event);
 39 |     });
 40 | 
 41 |     it("should listen for events on child objects", function() {
 42 |         var events = [];
 43 |         var listener = new FxListener();
 44 |         listener.target = "document.body";
 45 |         listener.setAttribute("on-click", "ignored");
 46 |         listener.addEventListener("click", function(event) {
 47 |             events.push(event);
 48 |         });
 49 |         document.body.click();
 50 |         container.appendChild(listener);
 51 |         document.body.click();
 52 |         listener.remove();
 53 |         document.body.click();
 54 |         assert.equal(events.length, 1);
 55 |     });
 56 | 
 57 |     it("should fire listeners in registration order", function() {
 58 |         var events = [];
 59 |         function handleEvent(event) {
 60 |             events.push({
 61 |                 listener: this,
 62 |                 event: event,
 63 |             });
 64 |         }
 65 |         var a = new FxListener();
 66 |         var b = new FxListener();
 67 |         a.addEventListener("example", handleEvent);
 68 |         b.addEventListener("example", handleEvent);
 69 |         a.setAttribute("on-example", "");
 70 |         b.setAttribute("on-example", "");
 71 |         container.appendChild(b);
 72 |         container.appendChild(a);
 73 |         window.dispatchEvent(new CustomEvent("example"));
 74 |         assert.equal(events.length, 2);
 75 |         assert.equal(events[0].listener, b);
 76 |         assert.equal(events[1].listener, a);
 77 |     });
 78 | 
 79 |     it("should not mix listeners", function() {
 80 |         var events = [];
 81 |         function handleEvent(event) {
 82 |             events.push({
 83 |                 listener: this,
 84 |                 event: event,
 85 |             });
 86 |         }
 87 |         var a = new FxListener();
 88 |         var b = new FxListener();
 89 |         a.addEventListener("example1", handleEvent);
 90 |         b.addEventListener("example2", handleEvent);
 91 |         a.setAttribute("on-example1", "");
 92 |         b.setAttribute("on-example2", "");
 93 |         container.appendChild(a);
 94 |         container.appendChild(b);
 95 |         window.dispatchEvent(new CustomEvent("example2"));
 96 |         assert.equal(events.length, 1);
 97 |         assert.equal(events[0].listener, b);
 98 |         window.dispatchEvent(new CustomEvent("example1"));
 99 |         assert.equal(events.length, 2);
100 |         assert.equal(events[1].listener, a);
101 |     });
102 | });
103 | </script>
104 | 


--------------------------------------------------------------------------------
/fx-listener.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 |     Listens for external elements and notifies locally. Target can be any window
  3 |     accessible property path, for example "document" or "screen.orientation". By
  4 |     default if no path is specified events are listened for on the window
  5 |     itself.
  6 | 
  7 |     The presence of an attribute that starts with "on-" will trigger a listener
  8 |     on the target for the event name following the dash. This works implicitly
  9 |     in polymer's declarative event handlers. If you're not using polymer, or are
 10 |     creating an element programatically you can add an attribute
 11 |     "on-{eventname}" to the element with no value.
 12 | 
 13 |     Dynamically changing the target or event attributes after inserting into the
 14 |     document is not supported.
 15 | 
 16 |     Usage:
 17 | 
 18 |     <fx-listener on-hashchange="{{ handleHashChange }}"></fx-listener>
 19 |     <fx-listener
 20 |         target="screen.orientation"
 21 |         on-orientationchange="{{ handleHashChange }}"></fx-listener>
 22 | -->
 23 | <link href="../polymer/polymer.html" rel="import">
 24 | 
 25 | <polymer-element name="fx-listener" constructor="FxListener" attributes="target">
 26 | <script>
 27 | (function() {
 28 |     var listeners = {};
 29 | 
 30 |     function addEventListener(target, eventName, listener) {
 31 |         if (!target || !target.addEventListener || !eventName)
 32 |             return;
 33 |         var data = findListenerData(target, eventName);
 34 |         if (!data) {
 35 |             data = {
 36 |                 target: target,
 37 |                 listeners: [],
 38 |                 handler: function(event) {
 39 |                     dispatchEvents(event, data.listeners);
 40 |                 },
 41 |             };
 42 |             listeners[eventName] = listeners[eventName] || [];
 43 |             listeners[eventName].push(data);
 44 |             target.addEventListener(eventName, data.handler);
 45 |         }
 46 |         if (!data.listeners.find(listener))
 47 |             data.listeners.add(listener);
 48 |     }
 49 | 
 50 |     function removeEventListener(target, eventName, listener) {
 51 |         if (!target || !target.addEventListener || !eventName)
 52 |             return;
 53 |         var data = findListenerData(target, eventName);
 54 |         if (!data)
 55 |             return;
 56 |         data.listeners.remove(listener);
 57 |         if (!data.listeners.length) {
 58 |             listeners[eventName].remove(data);
 59 |             target.removeEventListener(eventName, data.handler);
 60 |         }
 61 |     }
 62 | 
 63 |     function dispatchEvents(event, listeners) {
 64 |         listeners.forEach(function(listener) {
 65 |             if (!listener.active)
 66 |                 return;
 67 |             listener.fire(event.type, event, /*onNode*/ null, /*bubbles*/ false,
 68 |                 /*cancelable*/ false);
 69 |         });
 70 |     }
 71 | 
 72 |     function findListenerData(target, eventName) {
 73 |         var entries = listeners[eventName] || [];
 74 |         for (var i = 0; i < entries.length; ++i) {
 75 |             if (entries[i].target == target)
 76 |                 return entries[i];
 77 |         }
 78 |         return null;
 79 |     }
 80 | 
 81 |     function findTarget(path) {
 82 |         var object = window;
 83 |         var parts = path.split(".");
 84 |         for (var i = 0; i < parts.length && object; ++i) {
 85 |             if (parts[i])
 86 |                 object = object[parts[i]];
 87 |         }
 88 |         return object;
 89 |     }
 90 | 
 91 |     function findEventNames(element) {
 92 |         var eventsNames = [];
 93 |         for (var i = 0; i < element.attributes.length; ++i) {
 94 |             var name = element.attributes[i].name;
 95 |             if (name.to(3) != "on-")
 96 |                 return;
 97 |             var eventName = name.from(3);
 98 |             if (eventName)
 99 |                 eventsNames.push(eventName);
100 |         }
101 |         return eventsNames;
102 |     }
103 | 
104 |     Polymer({
105 |         target: "",
106 |         events: null,
107 |         active: false,
108 |         created: function() {
109 |             this.style.display = "none";
110 |         },
111 |         attached: function() {
112 |             this.active = true;
113 |             this.events = findEventNames(this);
114 |             if (!this.events.length)
115 |                 return;
116 |             var target = findTarget(this.target);
117 |             for (var i = 0; i < this.events.length; ++i)
118 |                 addEventListener(target, this.events[i], this);
119 |         },
120 |         detached: function() {
121 |             if (!this.events || !this.events.length)
122 |                 return;
123 |             var target = findTarget(this.target);
124 |             for (var i = 0; i < this.events.length; ++i)
125 |                 removeEventListener(target, this.events[i], this);
126 |             this.active = false;
127 |         },
128 |     });
129 | })();
130 | </script>
131 | </polymer-element>


--------------------------------------------------------------------------------
/fx-observer-test.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 |     Copyright 2014 The Chromium Authors. All rights reserved.
  3 |     Use of this source code is governed by a BSD-style license that can be
  4 |     found in the LICENSE file.
  5 |  -->
  6 | <link rel="import" href="fx-observer.html">
  7 | 
  8 | <script>
  9 | "use strict";
 10 | 
 11 | describe("fx-observer", function() {
 12 |     var container;
 13 | 
 14 |     beforeEach(function() {
 15 |         container = document.body.appendChild(document.createElement("div"));
 16 |     });
 17 | 
 18 |     afterEach(function() {
 19 |         container.remove();
 20 |         container = null;
 21 |     });
 22 | 
 23 |     function createObserver(type, listener) {
 24 |         var observer = new FxObserver();
 25 |         observer.for = type;
 26 |         if (listener)
 27 |             observer.addEventListener("notify", listener);
 28 |         return observer;
 29 |     }
 30 | 
 31 |     it("should broadcast events to instances", function() {
 32 |         var events = [];
 33 | 
 34 |         function listener(event) {
 35 |             events.push(event);
 36 |             assert.ok(event.detail);
 37 |             assert.ok(event.detail.data, "this is data");
 38 |         }
 39 | 
 40 |         var observer1 = container.appendChild(createObserver("example", listener));
 41 |         var observer2 = container.appendChild(createObserver("example", listener));
 42 | 
 43 |         observer2.notify({data: "this is data"});
 44 |         assert.equal(events.length, 2);
 45 |         assert.equal(events[0].target, observer1);
 46 |         assert.equal(events[1].target, observer2);
 47 |     });
 48 | 
 49 |     it("should only broadcast to and from attached instances", function() {
 50 |         var events = [];
 51 | 
 52 |         function listener(event) {
 53 |             events.push(event);
 54 |             assert.ok(event.detail);
 55 |             assert.ok(event.detail.data, "this is data");
 56 |         }
 57 | 
 58 |         var observer1 = createObserver("example", listener);
 59 |         var observer2 = container.appendChild(createObserver("example", listener));
 60 | 
 61 |         observer1.notify({data: "this should not send"});
 62 |         observer2.notify({data: "this is data"});
 63 |         assert.equal(events.length, 1);
 64 |         assert.equal(events[0].target, observer2);
 65 | 
 66 |         events = [];
 67 |         container.appendChild(observer1);
 68 | 
 69 |         observer1.notify({data: "this is data"});
 70 |         assert.equal(events.length, 2);
 71 |         assert.equal(events[0].target, observer2);
 72 |         assert.equal(events[1].target, observer1);
 73 |     });
 74 | 
 75 |     it("should support async notify", function() {
 76 |         var events = [];
 77 | 
 78 |         function listener(event) {
 79 |             events.push(event);
 80 |         }
 81 | 
 82 |         var observer = container.appendChild(createObserver("example", listener));
 83 | 
 84 |         return observer.notifyAsync({value: 100}).then(function(value) {
 85 |             assert.notOk(value);
 86 |             assert.equal(events.length, 1);
 87 |             assert.ok(events[0].detail);
 88 |             assert.equal(events[0].detail.value, 100);
 89 |         });
 90 |     });
 91 | 
 92 |     it("should allow static notification", function() {
 93 |         var events = [];
 94 | 
 95 |         function listener(event) {
 96 |             events.push(event);
 97 |         }
 98 | 
 99 |         FxObserver.notify("example", {value: 1});
100 | 
101 |         var observer = container.appendChild(createObserver("example", listener));
102 | 
103 |         FxObserver.notify("example", {value: 2});
104 |         FxObserver.notify("example2", {value: 2});
105 | 
106 |         assert.equal(events.length, 1);
107 |         assert.equal(events[0].detail.value, 2);
108 | 
109 |         return FxObserver.notifyAsync("example", {value:3}).then(function() {
110 |             assert.equal(events.length, 2);
111 |             assert.equal(events[1].detail.value, 3);
112 |         });
113 |     });
114 | });
115 | </script>
116 | 


--------------------------------------------------------------------------------
/fx-observer.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |     Copyright 2014 The Chromium Authors. All rights reserved.
 3 |     Use of this source code is governed by a BSD-style license that can be
 4 |     found in the LICENSE file.
 5 |  -->
 6 | <!--
 7 |     Sends and observes notifications by broadcasting notify events.
 8 | 
 9 |     Changing the `for` attribute dynamically is not supported and will cause
10 |     leaks.
11 | 
12 |     Usage:
13 | 
14 |     <fx-observer for="example" on-notify="{{ handleHashChange }}"></fx-observer>
15 | 
16 |     FxObserver.notify("example", relatedData);
17 | 
18 |     FxObserver.notifyAsync("example", relatedData).then(function() {
19 |         // ...
20 |     });
21 | -->
22 | <link href="../polymer/polymer.html" rel="import">
23 | 
24 | <polymer-element name="fx-observer" constructor="FxObserver" attributes="for">
25 | <script>
26 | "use strict";
27 | (function() {
28 |     var instances = {};
29 | 
30 |     function registerInstance(object, type) {
31 |         instances[type] = instances[type] || [];
32 |         instances[type].add(object);
33 |     }
34 | 
35 |     function unregisterInstance(object, type) {
36 |         if (!instances[type])
37 |             return;
38 |         instances[type].remove(object);
39 |     }
40 | 
41 |     function notify(type, data) {
42 |         var receivers = instances[type] || [];
43 |         for (var i = 0; i < receivers.length; ++i)
44 |             notifyInternal(receivers[i], type, data);
45 |     }
46 | 
47 |     // FIXME: Hack for v8 since it can't optimize functions with try/catch.
48 |     function notifyInternal(receiver, type, data) {
49 |         try {
50 |             receiver.fire("notify", data);
51 |         } catch (e) {
52 |             console.log("Failed notification", type, e);
53 |         }
54 |     }
55 | 
56 |     function notifyAsync(type, data) {
57 |         return Promise.resolve().then(function() {
58 |             notify(type, data);
59 |         });
60 |     }
61 | 
62 |     Polymer({
63 |         for: "",
64 |         active: false,
65 |         created: function() {
66 |             this.style.display = "none";
67 |         },
68 |         attached: function() {
69 |             registerInstance(this, this.for);
70 |             this.active = true;
71 |         },
72 |         detached: function() {
73 |             unregisterInstance(this, this.for);
74 |             this.active = false;
75 |         },
76 |         notify: function(data) {
77 |             if (!this.active)
78 |                 return;
79 |             notify(this.for, data);
80 |         },
81 |         notifyAsync: function(data) {
82 |             if (!this.active)
83 |                 return Promise.reject(new Error("Observer is detached"));
84 |             return notifyAsync(this.for, data);
85 |         },
86 |     });
87 | 
88 |     document.addEventListener("polymer-ready", function() {
89 |         // Static API
90 |         FxObserver.notify = notify;
91 |         FxObserver.notifyAsync = notifyAsync;
92 |     });
93 | })();
94 | </script>
95 | </polymer-element>
96 | 


--------------------------------------------------------------------------------
/fx-route.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |     Declares a route in a fx-view map. When the route path is matched the
 3 |     specified element will be created.
 4 | 
 5 |     Usage:
 6 | 
 7 |     <fx-route path="/issue/{id:\d+}" element="cr-issue-view"></fx-route>
 8 | -->
 9 | <link href="../polymer/polymer.html" rel="import">
10 | 
11 | <polymer-element name="fx-route" constructor="FxRoute">
12 | </polymer-element>


--------------------------------------------------------------------------------
/fx-shared-instance-test.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 |     Copyright 2014 The Chromium Authors. All rights reserved.
  3 |     Use of this source code is governed by a BSD-style license that can be
  4 |     found in the LICENSE file.
  5 |  -->
  6 | <link rel="import" href="fx-shared-instance.html">
  7 | 
  8 | <polymer-element name="fx-shared-instance-test" extends="fx-shared-instance" noscript></polymer>
  9 | 
 10 | <script>
 11 | "use strict";
 12 | 
 13 | describe("fx-shared-instance", function() {
 14 |     var container;
 15 |     var events;
 16 | 
 17 |     beforeEach(function() {
 18 |         container = document.body.appendChild(document.createElement("div"));
 19 |         events = [];
 20 |     });
 21 | 
 22 |     afterEach(function() {
 23 |         container.remove();
 24 |         container = null;
 25 |         events = null;
 26 |     });
 27 | 
 28 |     function defaultCallback(data) {
 29 |         events.push({
 30 |             instance: this,
 31 |             data: data
 32 |         });
 33 |     }
 34 | 
 35 |     function createInstance(type, method, callback) {
 36 |         var observer = document.createElement("fx-shared-instance-test");
 37 |         if (type)
 38 |             observer.instanceType = type;
 39 |         if (method && callback)
 40 |             observer[method] = callback;
 41 |         else if (method)
 42 |             observer[method] = defaultCallback;
 43 |         return observer;
 44 |     }
 45 | 
 46 |     it("should notify all instances", function() {
 47 |         var a = container.appendChild(createInstance("", "example"));
 48 |         var b = container.appendChild(createInstance("", "example"));
 49 |         a.notifyInstances("example", {value: 100});
 50 | 
 51 |         assert.equal(events.length, 2);
 52 |         assert.equal(events[0].instance, a);
 53 |         assert.equal(events[0].data.value, 100);
 54 |         assert.equal(events[1].instance, b);
 55 |         assert.equal(events[1].data.value, 100);
 56 |     });
 57 | 
 58 |     it("should not fail when message type is not a function", function() {
 59 |         var a = container.appendChild(createInstance(""));
 60 |         a.notifyInstances("not a function");
 61 |         a.notifyInstances("__proto__");
 62 |         assert.equal(events.length, 0);
 63 |     });
 64 | 
 65 |     it("should only notify attached instances", function() {
 66 |         var a = container.appendChild(createInstance("", "example"));
 67 |         var b = container.appendChild(createInstance("", "example"));
 68 | 
 69 |         a.remove();
 70 |         a.notifyInstances("example");
 71 | 
 72 |         assert.equal(events.length, 1);
 73 |         assert.equal(events[0].instance, b);
 74 | 
 75 |         events = [];
 76 |         b.remove();
 77 |         b.notifyInstances("example");
 78 |         assert.equal(events.length, 0);
 79 | 
 80 |         container.appendChild(b);
 81 |         container.appendChild(a);
 82 | 
 83 |         events = [];
 84 |         b.notifyInstances("example");
 85 |         assert.equal(events.length, 2);
 86 |         assert.equal(events[0].instance, b);
 87 |         assert.equal(events[1].instance, a);
 88 |     });
 89 | 
 90 |     it("should notify all instances async", function() {
 91 |         var a = container.appendChild(createInstance("", "example"));
 92 |         var b = container.appendChild(createInstance("", "example"));
 93 |         return a.notifyInstancesAsync("example", {value: 100}).then(function(value) {
 94 |             assert.equal(value, undefined);
 95 |             assert.equal(events.length, 2);
 96 |             assert.equal(events[0].instance, a);
 97 |             assert.equal(events[0].data.value, 100);
 98 |             assert.equal(events[1].instance, b);
 99 |             assert.equal(events[1].data.value, 100);
100 |         });
101 |     });
102 | 
103 |     it("should allow static notification", function() {
104 |         FxSharedInstance.notify("fx-shared-instance-test", {value: 1});
105 | 
106 |         var a = container.appendChild(createInstance("", "example"));
107 | 
108 |         FxSharedInstance.notify("fx-shared-instance-test", "example", {value: 2});
109 |         FxSharedInstance.notify("not-an-element", "example", {value: 2});
110 | 
111 |         assert.equal(events.length, 1);
112 |         assert.equal(events[0].instance, a);
113 |         assert.equal(events[0].data.value, 2);
114 | 
115 |         return FxSharedInstance.notifyAsync("fx-shared-instance-test", "example", {value:3}).then(function() {
116 |             assert.equal(events.length, 2);
117 |             assert.equal(events[1].instance, a);
118 |             assert.equal(events[1].data.value, 3);
119 |         });
120 |     });
121 | 
122 |     it("should allow getting all instances", function() {
123 |         var a = container.appendChild(createInstance());
124 |         var b = container.appendChild(createInstance());
125 | 
126 |         assert.equal(a.getInstances().length, 2);
127 |         assert.deepEqual(a.getInstances(), [a, b]);
128 |         var instances = FxSharedInstance.getInstances("fx-shared-instance-test");
129 |         assert.equal(instances.length, 2);
130 |         assert.deepEqual(instances, [a, b]);
131 | 
132 |         a.remove();
133 | 
134 |         assert.equal(a.getInstances().length, 1);
135 |         assert.deepEqual(a.getInstances(), [b]);
136 |         var instances = FxSharedInstance.getInstances("fx-shared-instance-test");
137 |         assert.equal(instances.length, 1);
138 |         assert.deepEqual(instances, [b]);
139 | 
140 |         b.remove();
141 | 
142 |         assert.equal(b.getInstances().length, 0);
143 |         var instances = FxSharedInstance.getInstances("fx-shared-instance-test");
144 |         assert.equal(instances.length, 0);
145 |     });
146 | 
147 |     it("should allow setting an explicit instance type", function() {
148 |         var a = container.appendChild(createInstance("ex-test"));
149 | 
150 |         assert.equal(a.getInstances().length, 1);
151 |         assert.deepEqual(a.getInstances(), [a]);
152 |         var instances = FxSharedInstance.getInstances("ex-test");
153 |         assert.equal(instances.length, 1);
154 |         assert.deepEqual(instances, [a]);
155 |     });
156 | });
157 | </script>
158 | 


--------------------------------------------------------------------------------
/fx-shared-instance.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 |     Implements the monostate pattern. Allows notifying all instances of a
  3 |     given instanceType (tagName by default) of some event.
  4 | 
  5 |     Note that the default of tagName is not friendly to subclassing so you
  6 |     should specify an explicit instanceType if you expect your component to
  7 |     be subclassed.
  8 | 
  9 |     Usage:
 10 | 
 11 |     <polymer-element name="app-example" extends="fx-shared-instance">
 12 |         <template>
 13 |             ..
 14 |         </template>
 15 |         <script>
 16 |             Polymer({
 17 |                 doStuff: function() {
 18 |                     this.notifyInstances("updateRect", {
 19 |                         data: // ...
 20 |                     });
 21 |                 },
 22 |                 updateRect: function(data) {
 23 |                     // do something with the notification.
 24 |                 },
 25 |             });
 26 |         </script>
 27 |     </polymer-element>
 28 | -->
 29 | <link href="../polymer/polymer.html" rel="import">
 30 | 
 31 | <polymer-element name="fx-shared-instance" constructor="FxSharedInstance">
 32 | <script>
 33 | "use strict";
 34 | (function() {
 35 |     var instances = {};
 36 | 
 37 |     function registerInstance(object, type) {
 38 |         instances[type] = instances[type] || [];
 39 |         instances[type].add(object);
 40 |     }
 41 | 
 42 |     function unregisterInstance(object, type) {
 43 |         if (!instances[type])
 44 |             return;
 45 |         instances[type].remove(object);
 46 |     }
 47 | 
 48 |     function getInstances(type) {
 49 |         return instances[type] || [];
 50 |     }
 51 | 
 52 |     function notify(type, method, data) {
 53 |         var receivers = getInstances(type);
 54 |         for (var i = 0; i < receivers.length; ++i)
 55 |             notifyInternal(receivers[i], type, method, data);
 56 |     }
 57 | 
 58 |     // FIXME: Hack for v8 since it can't optimize functions with try/catch.
 59 |     function notifyInternal(receiver, type, method, data) {
 60 |         try {
 61 |             if (typeof receiver[method] == "function")
 62 |                 receiver[method](data);
 63 |         } catch (e) {
 64 |             console.log("Failed notification", type, method, e);
 65 |         }
 66 |     }
 67 | 
 68 |     function notifyAsync(type, method, data) {
 69 |         return Promise.resolve().then(function() {
 70 |             notify(type, method, data);
 71 |         });
 72 |     }
 73 | 
 74 |     Polymer({
 75 |         created: function() {
 76 |             this.instanceType = this.tagName.toLowerCase();
 77 |         },
 78 |         attached: function() {
 79 |             registerInstance(this, this.instanceType);
 80 |         },
 81 |         detached: function() {
 82 |             unregisterInstance(this, this.instanceType);
 83 |         },
 84 |         notifyInstances: function(method, data) {
 85 |             notify(this.instanceType, method, data);
 86 |         },
 87 |         notifyInstancesAsync: function(method, data) {
 88 |             return notifyAsync(this.instanceType, method, data);
 89 |         },
 90 |         getInstances: function() {
 91 |             return getInstances(this.instanceType);
 92 |         },
 93 |     });
 94 | 
 95 |     document.addEventListener("polymer-ready", function() {
 96 |         // Static API
 97 |         FxSharedInstance.notify = notify;
 98 |         FxSharedInstance.notifyAsync = notifyAsync;
 99 |         FxSharedInstance.getInstances = getInstances;
100 |     });
101 | })();
102 | </script>
103 | </polymer-element>
104 | 


--------------------------------------------------------------------------------
/fx-task-queue.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 |     Schedules work to execute, will run the passed function, and replace it
  3 |     with the newly returned function, repeatedly until the work runs out or
  4 |     the workLimit is reached in ms. If the limit is reached and there are still
  5 |     functions to run then it will schedule a completion with setTimeout.
  6 | 
  7 |     Usage:
  8 | 
  9 |     // asyncForEach is similar to:
 10 | 
 11 |     var i = 0;
 12 |     var array = [ ... ];
 13 |     function nextElement() {
 14 |         if (i >= array.length)
 15 |             return;
 16 |         process(array[i++]);
 17 |         return nextElement;
 18 |     }
 19 |     this.$.taskQueue.scheduleWork(nextElement);
 20 | -->
 21 | <link href="../polymer/polymer.html" rel="import">
 22 | 
 23 | <polymer-element name="fx-task-queue" constructor="FxTaskQueue">
 24 | <script>
 25 | (function() {
 26 |     var tasks = [];
 27 | 
 28 |     function findTasks(element) {
 29 |         return tasks.filter(function(task) {
 30 |             return task.element = element;
 31 |         });
 32 |     }
 33 | 
 34 |     function suspendTasks(priority) {
 35 |         if (priority == undefined)
 36 |             priority = -1;
 37 |         tasks.forEach(function(task) {
 38 |             if (priority < 0 || task.element.priority <= priority)
 39 |                 task.suspend();
 40 |         });
 41 |     }
 42 | 
 43 |     function resumeTasks(priority) {
 44 |         if (priority == undefined)
 45 |             priority = -1;
 46 |         tasks.forEach(function(task) {
 47 |             if (priority < 0 || task.element.priority <= priority)
 48 |                 task.resume();
 49 |         });
 50 |     }
 51 | 
 52 |     function ScheduledTask(element, fn) {
 53 |         this.callback = fn;
 54 |         this.suspendCount = 0;
 55 |         this.element = element;
 56 |         this.scheduled = false;
 57 |         this.canceled = false;
 58 |         this.promise = new Promise(function(resolve, reject) {
 59 |             this.resolve = resolve;
 60 |             this.reject = reject;
 61 |         }.bind(this));
 62 |     }
 63 | 
 64 |     ScheduledTask.prototype.cancel = function() {
 65 |         this.canceled = true;
 66 |     };
 67 | 
 68 |     ScheduledTask.prototype.suspend = function() {
 69 |         this.suspendCount++;
 70 |     };
 71 | 
 72 |     ScheduledTask.prototype.resume = function() {
 73 |         this.suspendCount--;
 74 |         if (!this.suspendCount)
 75 |             this.schedule();
 76 |     };
 77 | 
 78 |     ScheduledTask.prototype.schedule = function() {
 79 |         if (this.scheduled || this.canceled)
 80 |             return;
 81 |         this.scheduled = true;
 82 |         setTimeout(function() {
 83 |             this.execute();
 84 |         }.bind(this), this.element.delayTime);
 85 |     };
 86 | 
 87 |     ScheduledTask.prototype.execute = function() {
 88 |         try {
 89 |             this.executeInternal();
 90 |         } catch (e) {
 91 |             this.reject(e);
 92 |         }
 93 |     };
 94 | 
 95 |     ScheduledTask.prototype.executeInternal = function() {
 96 |         if (this.suspendCount || this.canceled)
 97 |             return;
 98 |         var endTime = Date.now() + this.element.sliceTime;
 99 |         var result = this.callback();
100 |         while (result instanceof Function && Date.now() < endTime)
101 |             result = result();
102 |         if (result instanceof Function) {
103 |             this.callback = result;
104 |             this.schedule();
105 |         } else {
106 |             this.resolve();
107 |         }
108 |     };
109 | 
110 |     Polymer({
111 |         created: function() {
112 |             this.sliceTime = 100; // ms
113 |             this.delayTime = 0; // ms
114 |             this.priority = 100;
115 |         },
116 |         detach: function() {
117 |             this.cancel();
118 |         },
119 |         scheduleWork: function(fn) {
120 |             var task = new ScheduledTask(this, fn);
121 |             tasks.push(task);
122 |             return task.schedule();
123 |         },
124 |         asyncForEach: function(array, fn) {
125 |             var i = 0;
126 |             function next() {
127 |                 if (i >= array.length)
128 |                     return;
129 |                 fn(array[i], i);
130 |                 i++;
131 |                 return next;
132 |             }
133 |             return this.scheduleWork(next);
134 |         },
135 |         cancel: function() {
136 |             findTasks(this).forEach(function(task) {
137 |                 task.cancel();
138 |             });
139 |         },
140 |         suspend: function() {
141 |             findTasks(this).forEach(function(task) {
142 |                 task.suspend();
143 |             });
144 |         },
145 |         resume: function() {
146 |             findTasks(this).forEach(function(task) {
147 |                 task.resume();
148 |             });
149 |         },
150 |     });
151 | 
152 |     document.addEventListener("polymer-ready", function() {
153 |         // Static API
154 |         FxTaskQueue.suspendTasks = suspendTasks;
155 |         FxTaskQueue.resumeTasks = resumeTasks;
156 |     });
157 | </script>
158 | </polymer-element>
159 | 


--------------------------------------------------------------------------------
/fx-view-aware.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |     Put this component inside other components that contain <a> elements
 3 |     (inside the same ShadowRoot) where clicks on those links should instead
 4 |     navigate to views instead of reloading the page.
 5 | -->
 6 | <link href="../polymer/polymer.html" rel="import">
 7 | 
 8 | <polymer-element name="fx-view-aware" constructor="FxViewAware">
 9 | </polymer-element>
10 | 


--------------------------------------------------------------------------------
/fx-view.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |     Declares the view map for an application. There should only be one per
 3 |     application. Components that want same domain links to instead route to
 4 |     views should embed a <fx-view-aware> component.
 5 | 
 6 |     Events:
 7 |         "viewchange": Before the view is changed.
 8 | 
 9 |     Usage:
10 | 
11 |     <fx-view>
12 |         <fx-route path="/issue/{id:\d+}" element="cr-issue-view"></fx-route>
13 |     </fx-view>
14 | -->
15 | <link href="../polymer/polymer.html" rel="import">
16 | 
17 | <polymer-element name="fx-view" constructor="FxView">
18 | </polymer-element>
19 | 


--------------------------------------------------------------------------------
/fx-worker.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |     Declares a web worker to execute async work. Supports the following worker
 3 |     message protocol:
 4 | 
 5 |     {
 6 |         type: string,
 7 |         data: any,
 8 |     }
 9 | 
10 |     The worker will be killed when the element is detached unless disconnect()
11 |     is called.
12 | 
13 |     Note that all messages sent with send() expect a reply by default and will
14 |     reject without a "timeout" error after the specified timeout unless you
15 |     specify noreply = true.
16 | 
17 |     Usage:
18 | 
19 |     <fx-worker id="worker">
20 |         <script type="worker">
21 |             onmessage = function(event) {
22 |                 
23 |             };
24 |         </script>
25 |     </fx-worker>
26 | 
27 |     this.$.worker.send("doWork", [stuff]).then(function() {
28 |         // ... done.
29 |     });
30 | -->
31 | <link href="../polymer/polymer.html" rel="import">
32 | 
33 | <polymer-element name="fx-worker" constructor="FxWorker">
34 | </polymer-element>
35 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(config) {
 2 |   config.set({
 3 |     // Up a level since we expect to be embedded inside bower_components/ in
 4 |     // parallel to polymer itself.
 5 |     basePath: "../",
 6 |     frameworks: ["mocha"],
 7 |     files: [
 8 |       // Test runner deps.
 9 |       "fx-framework/node_modules/chai/chai.js",
10 |       "fx-framework/mocha.conf.js",
11 | 
12 |       // Framework core deps.
13 |       "platform/platform.js",
14 |       "sugar/release/sugar.min.js",
15 | 
16 |       // The actual tests.
17 |       "fx-framework/*-test.html",
18 | 
19 |       // We need to be able to serve these files, but don't want to have them
20 |       // loaded automatically.
21 |       {pattern: "fx-framework/*.html", included: false},
22 |       {pattern: "platform/*", included: false},
23 |       {pattern: "polymer/*", included: false},
24 |     ],
25 |     reporters: ["progress"],
26 |     port: 9876,
27 |     colors: true,
28 |     logLevel: config.LOG_INFO,
29 |     autoWatch: true,
30 |     browsers: ["ChromeCanary"],
31 |     singleRun: false,
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------
/mocha.conf.js:
--------------------------------------------------------------------------------
1 | mocha.setup({
2 |   ui: 'bdd',
3 |   ignoreLeaks: true
4 | });
5 | 
6 | var assert = chai.assert;
7 | 


--------------------------------------------------------------------------------
/notes.txt.js:
--------------------------------------------------------------------------------
  1 | 
  2 | /*
  3 |     Sends and observes notifications by broadcasting notify events.
  4 | 
  5 |     Usage:
  6 | 
  7 |     <fx-observer for="example" on-notify="{{ handleHashChange }}"></fx-observer>
  8 | 
  9 |     FxObserver.notify("example", relatedData);
 10 | 
 11 |     FxObserver.notifyAsync("example", relatedData).then(function() {
 12 |         // ...
 13 |     });
 14 | */
 15 | @Element("fx-observer")
 16 | @Event("notify")
 17 | class FxObserver extends HTMLElement {
 18 |     string for;
 19 | 
 20 |     void notify(optional Object data);
 21 |     Promise<void> notifyAsync(optional Object data);
 22 | 
 23 |     static void notify(string type, optional Object data);
 24 |     static Promise<void> notifyAsync(string type, option Object data);
 25 | }
 26 | 
 27 | /*
 28 |     Implements the monostate pattern. Allows notifying all instances of a
 29 |     given instanceType (tagName by default) of some event.
 30 | 
 31 |     Note that the default of tagName is not friendly to subclassing so you
 32 |     should specify an explicit instanceType if you expect your component to
 33 |     be subclassed.
 34 | 
 35 |     Usage:
 36 | 
 37 |     <polymer-element name="app-example" extends="fx-shared-instance">
 38 |         <template>
 39 |             ..
 40 |         </template>
 41 |         <script>
 42 |             Polymer({
 43 |                 doStuff: function() {
 44 |                     this.notifyInstances({
 45 |                         data: // ...
 46 |                     });
 47 |                 },
 48 |                 notified: function(data) {
 49 |                     // do something with the notification.
 50 |                 },
 51 |             });
 52 |         </script>
 53 |     </polymer-element>
 54 | */
 55 | @Element("fx-shared-instance")
 56 | class FxSharedInstance extends HTMLElement {
 57 |     string instanceType;
 58 | 
 59 |     void notifyInstances(string method, optional Object data);
 60 |     Promise<void> notifyInstancesAsync(string method, optional Object data);
 61 | 
 62 |     Array getInstances();
 63 | 
 64 |     static getInstances(string instanceType);
 65 |     static void notify(string instanceType, string method, optional Object data);
 66 |     static Promise<void> notifyAsync(string instanceType, string method, optional Object data);
 67 | }
 68 | 
 69 | /*
 70 |     Listens for external elements and notifies locally. Target can be any window
 71 |     accessible property path, for example "document" or "screen.orientation". By
 72 |     default if no path is specified events are listened for on the window
 73 |     itself.
 74 | 
 75 |     The presence of an attribute that starts with "on-" will trigger a listener
 76 |     on the target for the event name following the dash. This works implicitly
 77 |     in polymer's declarative event handlers. If you're not using polymer, or are
 78 |     creating an element programatically you can add an attribute
 79 |     "on-{eventname}" to the element with no value.
 80 | 
 81 |     Usage:
 82 | 
 83 |     <fx-listener on-hashchange="{{ handleHashChange }}"></fx-listener>
 84 | */
 85 | @Element("fx-listener")
 86 | class FxListener extends FxSharedInstance {
 87 |     string target;
 88 | }
 89 | 
 90 | /*
 91 |     Declares a route in a fx-view map. When the route path is matched the
 92 |     specified element will be created.
 93 | 
 94 |     Usage:
 95 | 
 96 |     <fx-route path="/issue/{id:\d+}" element="cr-issue-view"></fx-route>
 97 | */
 98 | @Element("fx-route")
 99 | class FxRoute extends HTMLElement {
100 |     string path;
101 |     string element;
102 |     Element createView(Object params);
103 |     boolean matchPath(string path);
104 | }
105 | 
106 | /*
107 |     Declares the view map for an application. There should only be one per
108 |     application. Components that want same domain links to instead route to
109 |     views should embed a <fx-view-aware> component.
110 | 
111 |     Events:
112 |         "viewchange": Before the view is changed.
113 | 
114 |     Usage:
115 | 
116 |     <fx-view>
117 |         <fx-route path="/issue/{id:\d+}" element="cr-issue-view"></fx-route>
118 |     </fx-view>
119 | */
120 | @Element("fx-view")
121 | class FxView extends HTMLElement {
122 |     Element activeView;
123 |     Promise<Element> createView();
124 |     void loadRoute(string path);
125 | }
126 | 
127 | /*
128 |     Put this component inside other components that contain <a> elements
129 |     (inside the same ShadowRoot) where clicks on those links should instead
130 |     navigate to views instead of reloading the page.
131 | */
132 | @Element("fx-view-aware")
133 | class FxViewAware extends HTMLElement { }
134 | 
135 | /*
136 |     Schedules work to execute, will run the passed function, and replace it
137 |     with the newly returned function, repeatedly until the work runs out or
138 |     the workLimit is reached in ms. If the limit is reached and there are still
139 |     functions to run then it will schedule a completion with setTimeout.
140 | 
141 |     Usage:
142 | 
143 |     // asyncForEach is similar to:
144 | 
145 |     var i = 0;
146 |     var array = [ ... ];
147 |     function nextElement() {
148 |         if (i >= array.length)
149 |             return;
150 |         process(array[i++]);
151 |         return nextElement;
152 |     }
153 |     this.$.taskQueue.scheduleWork(nextElement);
154 | */
155 | @Element("fx-task-queue")
156 | class FxTaskQueue extends HTMLElement {
157 |     number workLimit = 100; // ms
158 |     number priority = 100;
159 | 
160 |     Promise<any> scheduleWork(function fn -> optional fn);
161 |     Promise<any> asyncForEach(Array elements, function fn);
162 |     void abort();
163 | 
164 |     static void delayQueues(number priority = -1);
165 |     static void resumeQueues(number priority = -1);
166 | }
167 | 
168 | /*
169 |     Declares a web worker to execute async work. Supports the following worker
170 |     message protocol:
171 | 
172 |     {
173 |         type: string,
174 |         data: any,
175 |     }
176 | 
177 |     The worker will be killed when the element is detached unless disconnect()
178 |     is called.
179 | 
180 |     Note that all messages sent with send() expect a reply by default and will
181 |     reject without a "timeout" error after the specified timeout unless you
182 |     specify noreply = true.
183 | 
184 |     Usage:
185 | 
186 |     <fx-worker id="worker">
187 |         <script type="worker">
188 |             onmessage = function(event) {
189 |                 
190 |             };
191 |         </script>
192 |     </fx-worker>
193 | 
194 |     this.$.worker.send("doWork", [stuff]).then(function() {
195 |         // ... done.
196 |     });
197 | */
198 | @Element("fx-worker")
199 | @Event("message")
200 | @Event("error")
201 | class FxWorker extends HTMLElement {
202 |     Worker worker;
203 | 
204 |     dictionary SendOptions {
205 |         boolean noreply = false;
206 |         number timeout = 100;
207 |         Array transferList = [];
208 |     }
209 | 
210 |     Promise<any> send(string type, optional Object data, optional SendOptions options);
211 |     void disconnect();
212 | }
213 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fx-framework",
 3 |   "version": "0.0.0",
 4 |   "description": "A framework for rapidly building polymer apps.",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git@github.com:esprehn/fx-framework.git"
 8 |   },
 9 |   "author": "Elliott Sprehn <esprehn@chromium.org>",
10 |   "license": "https://chromium.googlesource.com/chromium/src.git/+/master/LICENSE",
11 |   "devDependencies": {
12 |     "chai": "*",
13 |     "karma": "^0.12.17",
14 |     "karma-chrome-launcher": "^0.1.4",
15 |     "karma-mocha": "^0.1.3",
16 |     "mocha": ">=1.9"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------