Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 29x 29x 29x | import { customAttribute } from '../decorator/exported';
import { IAttribute, IListener, IBindingContext } from '../interface/exported';
import { BindingEngine } from '../binding/exported';
/**
* simple attribute for misc types of events/attibutes
*
*/
@customAttribute('readonly.bind')
@customAttribute('disabled.bind')
@customAttribute('show.bind')
@customAttribute('class.bind')
@customAttribute('src.bind')
export class MiscAttributes implements IAttribute {
// public
public $element: HTMLElement;
public $attribute: Attr;
public $bindingContext: IBindingContext;
// private
private subscribeInternal: IListener;
private value: string;
private init: boolean;
private name: string;
/**
* created
*
*/
public created() {
this.value = this.$attribute.value;
this.name = this.$attribute.name.replace('.bind', '');
this.init = true;
this.subscribeInternal = {
name: this.name + 'Attribute(misc)',
value: this.value,
call: (newValue: any, oldValue: any) => {
if (oldValue !== newValue || this.init) {
this.init = false;
switch (this.name) {
case 'readonly':
if (newValue) {
(this.$element as HTMLInputElement).readOnly = newValue;
} else {
this.$element.removeAttribute(this.name);
}
break;
case 'src':
if (newValue) {
(this.$element as HTMLImageElement).src = newValue;
} else {
this.$element.removeAttribute(this.name);
}
break;
case 'disabled':
if (newValue) {
(this.$element as HTMLInputElement).disabled = newValue;
} else {
this.$element.removeAttribute(this.name);
}
break;
case 'class':
if (newValue) {
// TODO: do I want to just add/remove classes ?
this.$element.className = newValue;
} else {
this.$element.className = '';
}
break;
case 'show':
if (newValue) {
// TODO: remove or set block, check first, or just have a marker on element?
// or just use a class?
this.$element.style['display'] = 'block';
} else {
this.$element.style['display'] = 'none';
}
break;
default:
this.$element.setAttribute(this.name, newValue);
}
}
}
};
BindingEngine.subscribeClassProperty(this.$bindingContext, this.value, this.subscribeInternal);
}
/**
* detached
*
*/
public detached() {
BindingEngine.unSubscribeClassProperty(this.$bindingContext, this.subscribeInternal);
}
/**
* attached
*
*/
public attached() {
// TODO: do I even need to do this, do I even want to do this?
this.$element.removeAttribute(this.$attribute.name);
}
}
|