commit e95aa3e1372095431bdb4ce2bbe34f18389d96b5 Author: grgr Date: Mon May 23 15:54:13 2022 +0200 line trigger and intersectionObserver test diff --git a/carillon.js b/carillon.js new file mode 100644 index 0000000..030c953 --- /dev/null +++ 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 \ No newline at end of file diff --git a/icons/carillon.png b/icons/carillon.png new file mode 100644 index 0000000..9d19f37 Binary files /dev/null and b/icons/carillon.png differ diff --git a/index_test.html b/index_test.html new file mode 100644 index 0000000..1cc9d5c --- /dev/null +++ b/index_test.html @@ -0,0 +1,19 @@ + + + + + + + + + Document + + +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..cdd777a --- /dev/null +++ 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"] + } + ] +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..393274b --- /dev/null +++ b/style.css @@ -0,0 +1,11 @@ +html, body{ + margin: 0; +} + +.box { + width: 300px; + height: 300px; + margin: 200px; + background-color: cornflowerblue; + +} \ No newline at end of file