Skip to content

Commit

Permalink
Improved dom.addRisingParticles()
Browse files Browse the repository at this point in the history
± Added option to pass color of generated particles
± Shortened `particlesDivsContainer` to `particlesDivsWrapper` ↞ [auto-sync from https://github.com/adamlui/ai-web-extensions/tree/main/chatgpt-widescreen]
  • Loading branch information
kudo-sync-bot committed Jan 31, 2025
1 parent dcaba88 commit ea7222d
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 14 deletions.
18 changes: 11 additions & 7 deletions chromium/extension/lib/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,22 @@ window.dom = {
for (const depName in deps) this[depName] = deps[depName] }
},

addRisingParticles(targetNode) { // requires https://assets.aiwebextensions.com/styles/rising-particles/dist/<gray|white>.min.css
addRisingParticles(targetNode, { lightScheme = 'gray', darkScheme = 'white' } = {}) {
// Requires https://assets.aiwebextensions.com/styles/rising-particles/dist/<lightScheme|darkScheme>.min.css

if (targetNode.querySelector('[id*=particles]')) return
const particlesDivsContainer = document.createElement('div')
particlesDivsContainer.style.cssText = 'position: absolute ; top: 0 ; left: 0 ;' // hug targetNode's top-left corner
const particlesDivsWrapper = document.createElement('div')
particlesDivsWrapper.style.cssText = (
'position: absolute ; top: 0 ; left: 0 ;' // hug targetNode's top-left corner
+ 'height: 100% ; width: 100% ; border-radius: 15px ; overflow: clip ;' // bound innards exactly by targetNode
+ 'z-index: -1'; // allow interactive elems to be clicked
+ 'z-index: -1' ); // allow interactive elems to be clicked
['sm', 'med', 'lg'].forEach(particleSize => {
const particlesDiv = document.createElement('div')
particlesDiv.id = `${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'gray' }-particles-${particleSize}`
particlesDivsContainer.append(particlesDiv)
particlesDiv.id = `${ this.imports.env.ui.scheme == 'dark' ? darkScheme
: lightScheme }-particles-${particleSize}`
particlesDivsWrapper.append(particlesDiv)
})
targetNode.prepend(particlesDivsContainer)
targetNode.prepend(particlesDivsWrapper)
},

create: {
Expand Down
18 changes: 11 additions & 7 deletions firefox/extension/lib/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,22 @@ window.dom = {
for (const depName in deps) this[depName] = deps[depName] }
},

addRisingParticles(targetNode) { // requires https://assets.aiwebextensions.com/styles/rising-particles/dist/<gray|white>.min.css
addRisingParticles(targetNode, { lightScheme = 'gray', darkScheme = 'white' } = {}) {
// Requires https://assets.aiwebextensions.com/styles/rising-particles/dist/<lightScheme|darkScheme>.min.css

if (targetNode.querySelector('[id*=particles]')) return
const particlesDivsContainer = document.createElement('div')
particlesDivsContainer.style.cssText = 'position: absolute ; top: 0 ; left: 0 ;' // hug targetNode's top-left corner
const particlesDivsWrapper = document.createElement('div')
particlesDivsWrapper.style.cssText = (
'position: absolute ; top: 0 ; left: 0 ;' // hug targetNode's top-left corner
+ 'height: 100% ; width: 100% ; border-radius: 15px ; overflow: clip ;' // bound innards exactly by targetNode
+ 'z-index: -1'; // allow interactive elems to be clicked
+ 'z-index: -1' ); // allow interactive elems to be clicked
['sm', 'med', 'lg'].forEach(particleSize => {
const particlesDiv = document.createElement('div')
particlesDiv.id = `${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'gray' }-particles-${particleSize}`
particlesDivsContainer.append(particlesDiv)
particlesDiv.id = `${ this.imports.env.ui.scheme == 'dark' ? darkScheme
: lightScheme }-particles-${particleSize}`
particlesDivsWrapper.append(particlesDiv)
})
targetNode.prepend(particlesDivsContainer)
targetNode.prepend(particlesDivsWrapper)
},

create: {
Expand Down

0 comments on commit ea7222d

Please sign in to comment.