line trigger and intersectionObserver test

3 years ago · e95aa3e137
commit e95aa3e137
5 changed files with 110 additions and 0 deletions
--- a/carillon.js
+++ b/carillon.js
@ -0,0 +1,61 @@
+
+var boxes = document.querySelectorAll(".box")
+
+//line trigger for the carillon
+
+let line = document.createElement("div")
+line.id = "line"
+line.style.position = "fixed"
+line.style.top = "0"
+line.style.width ="100%"
+line.style.height = "10px"
+line.style.backgroundColor ="green"
+line.style.opacity ="0.5"
+line.style.zIndex ="9999999999999999"
+
+document.body.appendChild(line)
+
+// some space at the bottom to be able to scroll all the elements of the page
+let finale = document.createElement("div")
+finale.style.height = "100vh"
+document.body.appendChild(finale)
+  
+let observer = new IntersectionObserver(
+    entries => {
+        console.log(entries);
+    },
+    {
+        root: line,
+    }
+);
+
+//inbuild funct
+boxes.forEach((box)=>{
+    observer.observe(box);
+})
+
+
+
+
+
+
+
+
+
+
+// following code relates to the test html page
+
+
+
+boxes.forEach((box) => {
+    let randomCol = '#'+(Math.floor(Math.random()*16777215).toString(16));
+    box.style.backgroundColor = randomCol;
+
+
+});
+
+
+// sound?
+//upload as webextension
+
+//web audio API to do synthesis
--- a/icons/carillon.png
+++ b/icons/carillon.png
--- a/index_test.html
+++ b/index_test.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="carillon.js" defer></script>
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+    <div class="box"></div>
+</body>
+</html>
--- a/manifest.json
+++ b/manifest.json
@ -0,0 +1,19 @@
+{
+
+    "manifest_version": 2,
+    "name" : "Carillon",
+    "version" : "1.0",
+
+    "description": "Carillon for webpages",
+
+    "icons" : {
+        "48": "icons/carillon.png"
+    },
+
+    "content_scripts": [
+        {
+            "matches": ["*://*.mozilla.org/*"],
+            "js": ["carillon.js"]
+        }
+    ]
+}
--- a/style.css
+++ b/style.css
@ -0,0 +1,11 @@
+html, body{
+    margin: 0;
+}
+
+.box {
+    width: 300px;
+    height: 300px;
+    margin: 200px;
+    background-color: cornflowerblue;
+
+}