rogers/angular.js at main · a11yfred/rogers · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { mountFocusDebugger }      from './overlay/focus.js'
import { mountNamesDebugger }      from './overlay/names.js'
import { mountHeadingMapDebugger } from './overlay/headings.js'
import { mountTabStopsDebugger }   from './overlay/tabstops.js'
import { mountDebugLauncher }      from './overlay/launcher.js'
import { mountDebugHelp }          from './overlay/help.js'
import { mountDeployBanner }       from './overlay/banner.js'

// Angular service factories for @a11yfred/rogers.
// Angular lifecycle methods are injected by the caller — no top-level Angular import.
// Usage: import { createServices } from '@a11yfred/rogers/angular'
//        const services = createServices({ DestroyRef, inject })
//        Use each service via Angular's inject() in a component or directive.

export function createServices({ DestroyRef, inject }) {

  function makeOverlayService(mountFn) {
    return class {
      #overlay = null
      #destroyRef = inject(DestroyRef)

      enable(options) {
        this.#overlay?.destroy()
        this.#overlay = mountFn(options)
        this.#destroyRef.onDestroy(() => {
          this.#overlay?.destroy()
          this.#overlay = null
        })
      }

      disable() {
        this.#overlay?.destroy()
        this.#overlay = null
      }
    }
  }

  const FocusDebuggerService      = makeOverlayService(() => mountFocusDebugger())
  const NamesDebuggerService      = makeOverlayService(() => mountNamesDebugger())
  const HeadingMapDebuggerService = makeOverlayService(() => mountHeadingMapDebugger())
  const TabStopsDebuggerService   = makeOverlayService(() => mountTabStopsDebugger())

  class DebugLauncherService {
    #overlay = null
    #destroyRef = inject(DestroyRef)

    enable({ position = 'bottom-right', onCommand, customSections = [] } = {}) {
      this.#overlay?.destroy()
      this.#overlay = mountDebugLauncher({ position, onCommand, customSections })
      this.#destroyRef.onDestroy(() => {
        this.#overlay?.destroy()
        this.#overlay = null
      })
    }

    disable() {
      this.#overlay?.destroy()
      this.#overlay = null
    }
  }

  class DebugHelpService {
    #panel = null
    #destroyRef = inject(DestroyRef)

    mount({ onClose, customCommands = [] } = {}) {
      this.#panel = mountDebugHelp({ onClose, customCommands })
      this.#destroyRef.onDestroy(() => {
        this.#panel?.destroy()
        this.#panel = null
      })
    }

    open()  { this.#panel?.open() }
    close() { this.#panel?.close() }
  }

  class DeployBannerService {
    #banner = null
    #destroyRef = inject(DestroyRef)

    mount(target) {
      this.#banner = mountDeployBanner(target)
      this.#destroyRef.onDestroy(() => {
        this.#banner?.destroy()
        this.#banner = null
      })
    }

    setTarget(target) { this.#banner?.setTarget(target) }
  }

  return {
    FocusDebuggerService,
    NamesDebuggerService,
    HeadingMapDebuggerService,
    TabStopsDebuggerService,
    DebugLauncherService,
    DebugHelpService,
    DeployBannerService,
  }
}