/
AppsNav.vue.ts
91 lines (72 loc) · 2.37 KB
/
AppsNav.vue.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
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { Inject } from 'util/injector';
import { NavigationService } from 'services/navigation';
import { PlatformAppsService, EAppPageSlot, ILoadedApp } from 'services/platform-apps';
import VueResize from 'vue-resize';
Vue.use(VueResize);
@Component({})
export default class AppsNav extends Vue {
@Inject()
platformAppsService: PlatformAppsService;
@Inject()
navigationService: NavigationService;
$refs: {
app_tabs: HTMLDivElement;
};
isMounted = false;
appTabsContainer: HTMLDivElement = null;
canScroll = false;
hasNext = false;
hasPrev = false;
private scrollIncrement = 100;
mounted() {
this.isMounted = true;
this.appTabsContainer = this.$refs.app_tabs;
}
scrollLeft() {
this.appTabsContainer.scrollLeft = this.appTabsContainer.scrollLeft - this.scrollIncrement;
}
scrollRight() {
this.appTabsContainer.scrollLeft = this.appTabsContainer.scrollLeft + this.scrollIncrement;
}
handleResize() {
if (!this.isMounted) return false;
this.canScroll = this.appTabsContainer.scrollWidth > this.appTabsContainer.clientWidth;
this.hasPrev = this.appTabsContainer.scrollLeft > 0;
const scrollRight =
this.appTabsContainer.scrollWidth -
(this.appTabsContainer.scrollLeft + this.appTabsContainer.clientWidth);
this.hasNext = scrollRight > 0;
}
isSelectedApp(appId: string) {
return (
this.page === 'PlatformAppContainer' && this.navigationService.state.params.appId === appId
);
}
get topNavApps() {
return this.platformAppsService.enabledApps.filter(app => {
return !!app.manifest.pages.find(page => {
return page.slot === EAppPageSlot.TopNav;
});
});
}
isPopOutAllowed(app: ILoadedApp) {
const topNavPage = app.manifest.pages.find(page => page.slot === EAppPageSlot.TopNav);
if (!topNavPage) return false;
// Default result is true
return topNavPage.allowPopout == null ? true : topNavPage.allowPopout;
}
popOut(appId: string) {
this.platformAppsService.popOutAppPage(appId, EAppPageSlot.TopNav);
}
refreshApp(appId: string) {
this.platformAppsService.reloadApp(appId);
}
get page() {
return this.navigationService.state.currentPage;
}
navigateApp(appId: string) {
this.navigationService.navigate('PlatformAppContainer', { appId });
}
}