All files / src aurelia-ux.ts

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
1x
1x
 
 
 
 
 
 
 
1x
 
1x
1x
 
1x
 
 
 
 
 
 
1x
1x
 
1x
1x
1x
1x
 
 
1x
1x
1x
1x
1x
 
 
 
 
 
 
 
 
1x
1x
 
 
 
1x
1x
1x
1x
 
1x
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
1x
1x
 
1x
1x
 
 
1x
 
 
 
 
 
 
1x
 
import { Container, inject } from 'aurelia-dependency-injection';
import {
  FrameworkConfiguration,
  bindingMode,
  ObserverLocator,
  InternalPropertyObserver
} from 'aurelia-framework';
import { SyntaxInterpreter } from 'aurelia-templating-binding';
 
import { Design } from './designs/design';
import { Host } from './hosts/host';
import { Platform } from './platforms/platform';
import { Cordova } from './hosts/cordova';
import { Web } from './hosts/web';
import { Electron } from './hosts/electron';
import { UXConfiguration } from './ux-configuration';
import { DesignProcessor } from './designs/design-processor';
 
export type GetElementObserver = (
  obj: Element,
  propertyName: string,
  observerLocator: ObserverLocator,
  descriptor?: PropertyDescriptor | null) => InternalPropertyObserver | null;
 
export interface UxElementObserverAdapter {
  tagName: string;
  properties: Record<string, UxElementPropertyObserver>;
}
 
export interface UxElementPropertyObserver {
  defaultBindingMode: bindingMode;
  getObserver: GetElementObserver;
}
 
@inject(UXConfiguration, Container, DesignProcessor, ObserverLocator)
export class AureliaUX {
  private availableHosts: Host[];
  private adapterCreated: boolean = false;
  private adapters: Record<string, UxElementObserverAdapter> = {};
  private bindingModeIntercepted: boolean;
 
  public host: Host;
  public platform: Platform;
  public design: Design;
 
  constructor(
    public use: UXConfiguration,
    container: Container,
    private designProcessor: DesignProcessor,
    private observerLocator: ObserverLocator
  ) {
    this.availableHosts = [
      container.get(Cordova),
      container.get(Electron),
      container.get(Web)
    ];
  }
 
  private createAdapter() {
    this.observerLocator.addAdapter({
      getObserver: (obj: Element, propertyName: string, descriptor: PropertyDescriptor) => {
        Eif (obj instanceof Element) {
          const tagName = obj.getAttribute('as-element') || obj.tagName;
          const elAdapters = this.adapters[tagName];
          Iif (!elAdapters) {
            return null;
          }
          const propertyAdapter = elAdapters.properties[propertyName];
          Eif (propertyAdapter) {
            const observer = propertyAdapter.getObserver(obj, propertyName, this.observerLocator, descriptor);
            Eif (observer) {
              return observer;
            }
          }
        }
        return null as any;
      }
    });
  }
 
  private getOrCreateUxElementAdapters(tagName: string): UxElementObserverAdapter {
    Iif (!this.adapterCreated) {
      this.createAdapter();
      this.adapterCreated = true;
    }
    const adapters = this.adapters;
    let elementAdapters = adapters[tagName] || adapters[tagName.toLowerCase()];
    Eif (!elementAdapters) {
      elementAdapters = adapters[tagName] = adapters[tagName.toLowerCase()] = { tagName, properties: {} };
    }
    return elementAdapters;
  }
 
  private interceptDetermineDefaultBindingMode(): void {
    // tslint:disable-next-line
    const ux = this;
    const originalFn = SyntaxInterpreter.prototype.determineDefaultBindingMode;
 
    SyntaxInterpreter.prototype.determineDefaultBindingMode = function(
      this: SyntaxInterpreter,
      element: Element,
      attrName: string,
      context?: any
    ) {
      const tagName = element.getAttribute('as-element') || element.tagName;
      const elAdapters = ux.adapters[tagName];
      if (elAdapters) {
        const propertyAdapter = elAdapters.properties[attrName];
        if (propertyAdapter) {
          return propertyAdapter.defaultBindingMode;
        }
      }
      return originalFn.call(this, element, attrName, context);
    };
  }
 
  public start(config: FrameworkConfiguration) {
    const found = this.availableHosts.find(x => x.isAvailable);
 
    if (found === undefined) {
      throw new Error('Could not determine host environment');
    }
 
    this.host = found;
 
    return this.host.start(config).then(platform => {
      this.platform = platform;
      this.design = platform.design;
 
      this.designProcessor.setSwatchVariables();
      this.designProcessor.setDesignVariables(platform.design);
      this.designProcessor.setDesignWatches(platform.design);
      return this;
    });
  }
 
  public addUxElementObserverAdapter(tagName: string, properties: Record<string, UxElementPropertyObserver>): void {
    Eif (!this.adapterCreated) {
      this.createAdapter();
      this.adapterCreated = true;
    }
    const elementAdapters = this.getOrCreateUxElementAdapters(tagName);
    Object.assign(elementAdapters.properties, properties);
  }
 
  public registerUxElementConfig(observerAdapter: UxElementObserverAdapter) {
    if (!this.bindingModeIntercepted) {
      this.interceptDetermineDefaultBindingMode();
      this.bindingModeIntercepted = true;
    }
    this.addUxElementObserverAdapter(observerAdapter.tagName.toUpperCase(), observerAdapter.properties);
  }
}