Created
August 24, 2016 19:50
-
-
Save stoffeastrom/e818469bc0e0d3237b2b6de2c13d2357 to your computer and use it in GitHub Desktop.
Aurelia DBMonster with IntersectionObserver
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="./when-visible"></require> | |
| <div> | |
| <table class="table table-striped latest-data"> | |
| <tbody> | |
| <tr repeat.for="db of databases"> | |
| <td class="dbname"> | |
| ${db.dbname & oneTime & whenVisible} | |
| </td> | |
| <td class="query-count"> | |
| <span class-name.one-time="db.lastSample.countClassName & whenVisible"> | |
| ${db.lastSample.nbQueries & oneTime & whenVisible} | |
| </span> | |
| </td> | |
| <td repeat.for="q of db.lastSample.topFiveQueries & oneTime" | |
| class-name.one-time="q.elapsedClassName & whenVisible"> | |
| ${q.formatElapsed & oneTime & whenVisible} | |
| <div class="popover left"> | |
| <div class="popover-content"> | |
| ${q.query & oneTime & whenVisible} | |
| <foo>hello world</foo> | |
| </div> | |
| <div class="arrow"></div> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class App { | |
| databases = []; | |
| activate() { | |
| let load; | |
| load = () => { | |
| this.databases = ENV.generateData().toArray(); | |
| Monitoring.renderRate.ping(); | |
| setTimeout(load, ENV.timeout); | |
| }; | |
| load(); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://jdanyow.github.io/aurelia-dbmonster/styles/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://jdanyow.github.io/aurelia-dbmonster/styles/styles.css"> | |
| </head> | |
| <body> | |
| <div aurelia-app> | |
| <h1>Loading...</h1> | |
| </div> | |
| <script src="https://jdanyow.github.io/aurelia-dbmonster/lib/ENV.js"></script> | |
| <script src="https://jdanyow.github.io/aurelia-dbmonster/lib/memory-stats.js"></script> | |
| <script src="https://jdanyow.github.io/aurelia-dbmonster/lib/monitor.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script> | |
| <script> | |
| require(['aurelia-bootstrapper']); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function handleIntersectionEvents(entries, observer) { | |
| let i = entries.length; | |
| while (i--) { | |
| const entry = entries[i]; | |
| const inView = entry.intersectionRatio > 0; | |
| const element = entry.target; | |
| element.__inView = inView; | |
| // <debugging-colors> | |
| /*const color = inView ? 'blue' : 'red'; | |
| if (element.style.color !== color) { | |
| element.style.color = color; | |
| }*/ | |
| // </debugging-colors> | |
| if (inView) { | |
| let j = element.bindings.length; | |
| while (j--) { | |
| const binding = element.bindings[j]; | |
| binding.standardUpdateTarget(binding.__lastTargetValue); | |
| } | |
| } | |
| } | |
| } | |
| function observe(root, binding, unobserve) { | |
| let observer = (root || window).__intersectionObserver; | |
| if (observer === undefined) { | |
| observer = (root || window).__intersectionObserver = new IntersectionObserver(handleIntersectionEvents, { root }); | |
| } | |
| let element = binding.target; | |
| if (element.nodeType === 3) { | |
| element = element.parentElement; | |
| } | |
| if (unobserve) { | |
| element.bindings.splice(element.bindings.indexOf(binding), 1); | |
| if (element.bindings.length === 0) { | |
| observer.unobserve(element); | |
| } | |
| return; | |
| } | |
| if (element.bindings === undefined) { | |
| element.bindings = []; | |
| } | |
| if (element.bindings.length === 0) { | |
| observer.observe(element); | |
| } | |
| element.bindings.push(binding); | |
| } | |
| export class WhenVisibleBindingBehavior { | |
| bind(binding, source, intersectionRoot) { | |
| let element = binding.target; | |
| if (element.nodeType === 3) { | |
| element = element.parentElement; | |
| } | |
| element.__inView = !!element.__inView; | |
| binding.__initialized = false; | |
| binding.standardUpdateTarget = binding.updateTarget; | |
| binding.updateTarget = function(value) { | |
| this.__lastTargetValue = value; | |
| let element = binding.target; | |
| if (element.nodeType === 3) { | |
| element = element.parentElement; | |
| } | |
| if (element.__inView || !this.__initialized) { | |
| this.__initialized = true; | |
| this.standardUpdateTarget(value); | |
| } | |
| }; | |
| observe(intersectionRoot, binding, false); | |
| } | |
| unbind(binding, source) { | |
| observe(intersectionRoot, binding, true); | |
| binding.updateTarget = binding.standardUpdateTarget; | |
| binding.standardUpdateTarget = null; | |
| binding.__lastTargetValue = null; | |
| binding.__initialized = false; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment