All files / components/upp-thumb upp-thumb.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Component, forwardRef, OnDestroy } from '@angular/core';
import { Input, Output, EventEmitter } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 
import { AppConstants } from '@unpispas/upp-defs';
import { ViewModeDirective } from '../upp-grid/upp-grid';
 
@Component({
    selector: 'upp-thumb-top-left',
    template: `
        <ng-content></ng-content>
    `,
    styleUrls: []
})
export class UppThumbTopLeftComponent {
    // nothing to do
}
 
@Component({
    selector: 'upp-thumb-top-right',
    template: `
        <ng-content></ng-content>
    `,
    styleUrls: []
})
export class UppThumbTopRightComponent {
    // nothing to do
}
 
@Component({
    selector: 'upp-thumb-bottom',
    template: `
        <ng-content></ng-content>
    `,
    styleUrls: []
})
export class UppThumbBottomComponent {
    // nothing to do
}
 
@Component({
    selector: 'upp-thumb',
    providers: [{ 
        provide: ViewModeDirective, 
        useExisting: forwardRef(() => UppThumbComponent)  
    }],    
    templateUrl: './upp-thumb.html',
    styleUrls: ['./upp-thumb.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class UppThumbComponent extends ViewModeDirective implements OnDestroy {
    @Input() title: string | null = null;
    @Input() color = 'medium';
    @Input() shape: 'default' | 'round' = 'default';
    @Input() wait = false;
    @Input() card: string | null = null;
    @Input() icon: string | null = null;
    @Input() foot: string | null = null;
    @Input() detail: string | null = null;
    @Input() press = false;
 
    private _pressed_timeout: ReturnType<typeof setTimeout> | null  = null;
    private _ignore_selected = false;
 
    constructor(private change: ChangeDetectorRef){
        super()
    }
 
    ngOnDestroy() {
        Iif (this._pressed_timeout) {
            clearTimeout(this._pressed_timeout);
            this._pressed_timeout = null;
        }
    }
 
    /**
     * Gets the current view mode.
     */ 
    override get viewMode(): 'GRID' | 'LIST' {
        return super.viewMode;
    }
 
    /**
     * Sets the view mode and updates child items if the value has changed.
     * @param value - The new view mode ('GRID' or 'LIST').
     */      
    override set viewMode(value: 'GRID' | 'LIST'){
        Iif (super.viewMode != value){
            super.viewMode = value;
            this.change.markForCheck();
        }
    }
 
    get avatar(): string | null {
        const _bg = 'd3c79b';
        const _fg = '000000';
 
        Iif (!this.title){
            return null;
        }
 
        return AppConstants.baseURL + 'avatar?size=128&background=' + _bg + '&color=' + _fg + '&name=' + encodeURIComponent(this.title);
    }
 
    @Output() Pressed = new EventEmitter<void>();         
    async OnPressed(down: boolean){
        if (down){
            Iif (!this.press){
                return;     // this item is not suitable for log press functionality
            }
 
            Iif (this._pressed_timeout){
                clearTimeout(this._pressed_timeout);
                this._pressed_timeout = null;
            }
 
            this._pressed_timeout = setTimeout(() => {
                this.Pressed.emit();
                
                this._ignore_selected = true;
                setTimeout(() => {      // only ignore on current loop
                    this._ignore_selected = false;
                }, 0);
            }, 1000)
        }
        else {
            Iif (this._pressed_timeout){
                clearTimeout(this._pressed_timeout);
                this._pressed_timeout = null;
            }
        }
    }   
 
    @Output() Select = new EventEmitter<void>();         
    async OnSelect(){
        Iif (!this._ignore_selected){
            this.Select.emit();
        }
        this._ignore_selected = false;
    }
}