Skip to content

Commit

Permalink
feat: load styles by default
Browse files Browse the repository at this point in the history
  • Loading branch information
@tefkah
tefkah committed Apr 19, 2022
1 parent 4457911 commit 4798c4a
Show file tree
Hide file tree
Showing 5 changed files with 678 additions and 102 deletions.
296 changes: 204 additions & 92 deletions content/zotero-night.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-magic-numbers */
/* eslint-disable no-constant-condition */
/* eslint-disable @typescript-eslint/indent */
/* eslint-disable @typescript-eslint/no-unused-expressions */
Expand All @@ -6,6 +7,7 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/require-await */
/* eslint-disable @typescript-eslint/no-misused-promises */
import { isDebuggerStatement } from 'typescript'
import { css } from './css'
import { debug } from './debug'

Expand All @@ -29,6 +31,7 @@ class Night {
private globals: Record<string, any>
private strings: any
private _tabsAdded: boolean
private _editorStyled: boolean
public _nordFilter: string
public _darkFilter: string
public _sepiaFilter: string
Expand Down Expand Up @@ -100,7 +103,10 @@ class Night {

// TODO: Figure out some way to remember per window setting
private addToggleButton(readerWindow: Window) {
if (this.hasToggle(readerWindow)) return
if (this.hasToggle(readerWindow)) {
debug('addToggleButton: window already has toggle')
return
}

const toggle: HTMLButtonElement =
readerWindow.document.createElement('button')
Expand Down Expand Up @@ -149,6 +155,7 @@ class Night {
}
public editorNeedsStyle(): boolean {
const editorWin3 = window[(Zotero_Tabs._tabs?.length ?? 0) + 1]
if (!editorWin3) return false
return !this.hasStyle(editorWin3)
}

Expand All @@ -163,6 +170,38 @@ class Night {
this._tabsAdded = true
}
}
public getTabWindowById(id: string): Window | null {
const tabIndex = Zotero_Tabs._tabs.findIndex((tab) => tab.id === id)

debug(`Select tab event tabindex: ${tabIndex}`)

if (tabIndex === -1) return null

const activeTabWindow = window[1 + tabIndex]
return activeTabWindow
}

public getTabNameById(id: string): string {
const name =
(Zotero_Tabs._tabs.find((tab) => tab.id === id)?.title as string) ??
'Not found'
return name
}
private doEverything(tabWindow: Window) {
const doc = tabWindow.document
// if (doc.querySelector('#pageStyle')) return

debug('adding style for added window tab')
const style = doc.createElement('style')
style.setAttribute('id', 'pageStyle')
style.textContent = css
const header = doc.querySelector('head')
header.appendChild(style)
doc.querySelector('html[dir]').setAttribute('theme', 'dark')
this.addToggleButton(tabWindow)

this.editorNeedsStyle() && this.tryToAddStyleToEditor()
}
// eslint-disable-next-line @typescript-eslint/require-await
public async load(globals: Record<string, any>) {
this.globals = globals
Expand Down Expand Up @@ -208,100 +247,173 @@ class Night {

const notifierCallback = {
notify: async (event: string, type, ids: string[], extraData) => {
debug({ event })
debug({ type })
if (event === 'select') {
this.editorNeedsStyle() && this.tryToAddStyleToEditor()
try {
// add stylesheet to the editor window
const id = ids[0] // 'tab-WJgG9Ojg'
// const allTabs = Array.from(
// // there are some "context" vboxes, no clue what they do but i hate m
// document.querySelectorAll('vbox[id^=tab]:not([class])')
// )
const tabIndex = Zotero_Tabs._tabs.findIndex((tab) => tab.id === id)

debug(`Select tab event tabindex: ${tabIndex}`)

if (tabIndex === -1) return

const activeTabWindow = window[1 + tabIndex]
this.addToggleButton(activeTabWindow)

debug(`Select tab event activeTabWindow: ${activeTabWindow}`)

// const reader = Zotero.Reader.getByTabID(ids[0])
// const doc = reader?._iframeWindow?.document
debug('Select tab event window loaded')
const doc = activeTabWindow?.document
if (!doc) return
if (doc.querySelector('#pageStyle')) return

const style = doc.createElement('style')
style.setAttribute('id', 'pageStyle')
style.textContent = css
const header = doc.querySelector('header')
header?.appendChild(style)
doc.querySelector('html[dir]').setAttribute('theme', 'dark')
} catch (e) {
debug('Error in Select tab notifierCallback')
debug(e)
if (event === 'add') {
debug(`Tab with id ${ids[0]} added`)

debug('finding browser tab')
debug('Trying to find window')
// const tabWindow = this.getTabWindowById(ids[0])
const reader = Zotero.Reader.getByTabID(ids[0])
await reader._initPromise
const tabWindow = reader._iframeWindow as Window
debug(tabWindow)
debug(`Added tab "${this.getTabNameById(ids[0])}"`)
debug(
`Added tab window readystate is ${tabWindow.document.readyState}`
)
switch (tabWindow.document.readyState) {
// @ts-expect-error
case 'uninitialized': {
setTimeout(() => {
tabWindow.document.onreadystatechange = () =>
debug('in readystatechange eventlistener:')

debug(
`Added tab windw readystate is ${tabWindow.document.readyState}`
)

this.doEverything(tabWindow)
return
}, 300)
}
case 'complete': {
this.doEverything(tabWindow)
}
}
}
if (event === 'add') {
// debug(`Added tab ${ids[0]}`)
// debug(extraData)
// // const magicNumber = 10000
// const id = ids[0] // 'tab-WJgG9Ojg'
// const allTabs = Array.from(
// // there are some "context" vboxes, no clue what they do but i hate m
// document.querySelectorAll('vbox[id^=tab]:not([class])')
// )
// const tabIndex = allTabs.findIndex((tab) => tab.id === id)
// const activeTabWindow = window[1 + tabIndex]
// debug(activeTabWindow)
// debug(tabIndex)
// // const activeTabWindow = Zotero.Reader.getByTabID(id)._iframeWindow
// if (activeTabWindow.document.readyState === 'complete') {
// try {
// debug(activeTabWindow.document.readyState)
// // const reader = Zotero.Reader.getByTabID(id)
// // debug({ reader: JSON.stringify(reader, null, 2) })
// const style = activeTabWindow.document.createElement('style')
// style.setAttribute('id', 'pageStyle')
// style.textContent = css
// debug(style)
// activeTabWindow.document.head.appendChild(style)
// activeTabWindow.document
// .querySelector('html[dir]')
// .setAttribute('theme', 'dark')
// debug('delayyyy')
// } catch (e) {
// debug('Error in readystate check tab add notifierCallback')
// debug(e)
// }
// return
// }
// activeTabWindow.addEventListener('DOMContentLoaded', (e) => {
// try {
// debug(e)
// // const reader = Zotero.Reader.getByTabID(id)
// // debug({ reader: JSON.stringify(reader, null, 2) })
// const style = activeTabWindow.document.createElement('style')
// style.setAttribute('id', 'pageStyle')
// style.textContent = css
// debug(style)
// activeTabWindow.document.head.appendChild(style)
// activeTabWindow.document
// .querySelector('html[dir]')
// .setAttribute('theme', 'dark')
// } catch (e) {
// debug('Error in readystate check tab add notifierCallback')
// debug(e)
// }
// })
// window.document[2].appendChild(style);
if (event === 'select') {
if (this._editorStyled) {
debug('Editor already has style, skipping...')
return
}
let editorWindow: Window | undefined
let counter = 2
while (counter <= 100 && editorWindow === undefined) {
const wind = window[counter]
if (wind.document.URL.includes('editor.html')) {
editorWindow = wind
break
}
counter++
}
if (!editorWindow) {
debug('well shit')
return
}

if (Zotero.Notes._editorInstances.length > 0) {
this.addStyleToEditor(editorWindow)
this._editorStyled = true
}
// listen for init message
editorWindow.onmessage = (message: any) => {
if (message?.data?.action !== 'init') return
this.addStyleToEditor(editorWindow)

this._editorStyled = true
}
}
// debug('head of the window (select)')
// debug(
// `selected tab ${this.getTabNameById(ids[0])} readystate is ${
// window.document.readyState
// }`
// )
// this.editorNeedsStyle() && this.tryToAddStyleToEditor()
// try {
// // add stylesheet to the editor window
// const id = ids[0] // 'tab-WJgG9Ojg'
// // const allTabs = Array.from(
// // // there are some "context" vboxes, no clue what they do but i hate m
// // document.querySelectorAll('vbox[id^=tab]:not([class])')
// // )
// const tabIndex = Zotero_Tabs._tabs.findIndex((tab) => tab.id === id)

// debug(`Select tab event tabindex: ${tabIndex}`)

// if (tabIndex === -1) return

// const activeTabWindow = window[1 + tabIndex]
// this.addToggleButton(activeTabWindow)

// debug(`Select tab event activeTabWindow: ${activeTabWindow}`)

// // const reader = Zotero.Reader.getByTabID(ids[0])
// // const doc = reader?._iframeWindow?.document
// const doc = activeTabWindow?.document
// if (!doc) {
// debug('select tab: no doc')
// return
// }
// if (doc.querySelector('#pageStyle')) {
// debug('select tab: theres already pagestyle')
// return
// }

// const style = doc.createElement('style')
// style.setAttribute('id', 'pageStyle')
// style.textContent = css
// const header = doc.querySelector('head')
// header?.appendChild(style)
// doc.querySelector('html[dir]').setAttribute('theme', 'dark')
// debug('select tab added style')
// } catch (e) {
// debug('Error in Select tab notifierCallback')
// debug(e)
// }
// }
// // debug(`Added tab ${ids[0]}`)
// // debug(extraData)
// // // const magicNumber = 10000
// // const id = ids[0] // 'tab-WJgG9Ojg'
// // const allTabs = Array.from(
// // // there are some "context" vboxes, no clue what they do but i hate m
// // document.querySelectorAll('vbox[id^=tab]:not([class])')
// // )
// // const tabIndex = allTabs.findIndex((tab) => tab.id === id)
// // const activeTabWindow = window[1 + tabIndex]
// // debug(activeTabWindow)
// // debug(tabIndex)
// // // const activeTabWindow = Zotero.Reader.getByTabID(id)._iframeWindow
// // if (activeTabWindow.document.readyState === 'complete') {
// // try {
// // debug(activeTabWindow.document.readyState)
// // // const reader = Zotero.Reader.getByTabID(id)
// // // debug({ reader: JSON.stringify(reader, null, 2) })
// // const style = activeTabWindow.document.createElement('style')
// // style.setAttribute('id', 'pageStyle')
// // style.textContent = css
// // debug(style)
// // activeTabWindow.document.head.appendChild(style)
// // activeTabWindow.document
// // .querySelector('html[dir]')
// // .setAttribute('theme', 'dark')
// // debug('delayyyy')
// // } catch (e) {
// // debug('Error in readystate check tab add notifierCallback')
// // debug(e)
// // }
// // return
// // }
// // activeTabWindow.addEventListener('DOMContentLoaded', (e) => {
// // try {
// // debug(e)
// // // const reader = Zotero.Reader.getByTabID(id)
// // // debug({ reader: JSON.stringify(reader, null, 2) })
// // const style = activeTabWindow.document.createElement('style')
// // style.setAttribute('id', 'pageStyle')
// // style.textContent = css
// // debug(style)
// // activeTabWindow.document.head.appendChild(style)
// // activeTabWindow.document
// // .querySelector('html[dir]')
// // .setAttribute('theme', 'dark')
// // } catch (e) {
// // debug('Error in readystate check tab add notifierCallback')
// // debug(e)
// // }
// // })
// // window.document[2].appendChild(style);
},
}
Zotero.Notifier.registerObserver(notifierCallback, ['tab'])
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.2",
"description": "Night theme for Zotero UI & Pdf",
"scripts": {
"dev": "nodemon --exec 'node esbuild.js' ./content/* ./skin/*",
"lint": "eslint . --ext .ts --cache --cache-location .eslintcache/",
"prebuild": "npm run lint",
"build": "tsc --noEmit && node esbuild.js ",
Expand Down Expand Up @@ -46,6 +47,7 @@
},
"devDependencies": {
"css-colors-to-vars": "^1.0.2",
"nodemon": "^2.0.15",
"patch-package": "^6.4.7",
"sass": "^1.50.0"
}
Expand Down
1 change: 1 addition & 0 deletions skin/editor-base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
::after {
box-sizing: border-box;
}

body {
font-family: var(--font-family);
font-size: var(--font-size);
Expand Down
6 changes: 5 additions & 1 deletion skin/night.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,11 @@
background: var(--main-background) !important;
color: var(--main-text-color-toolbox-color) !important;
}
#main-window[theme='dark'] .virtualized-table-body .cell:not(:first-child),

#main-window[theme='dark'] .virtualized-table-body {
background: var(--nord0) !important;
}

.drag-image-container .cell:not(:first-child) {
background: none !important;
}
Expand Down
Loading

0 comments on commit 4798c4a

Please sign in to comment.