-
Notifications
You must be signed in to change notification settings - Fork 35
/
Copy pathindex.html
115 lines (109 loc) · 5.48 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Extension with Shell navigation</title>
<link href="https://unpkg.com/fundamental-styles@latest/dist/fundamental-styles.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body style="margin: 0;">
<div>
<div>
<div id="top-bar" class="fd-shellbar">
<div class="fd-shellbar__group fd-shellbar__group--product">
<span class="fd-shellbar__logo"><img src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png" srcset="//unpkg.com/fundamental-styles/dist/images/[email protected] 1x, //unpkg.com/fundamental-styles/dist/images/[email protected] 2x, //unpkg.com/fundamental-styles/dist/images/[email protected] 3x" width="48" height="24" alt="SAP"></span>
<span id="extension-title" class="fd-shellbar__title"></span>
</div>
<div class="fd-shellbar__group fd-shellbar__group--actions">
<div class="fd-shellbar__action">
<select id="language-select" onchange="newLanguageSelected(event)">
<option value="en">English</option>
<option value="de">German</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="extension-body">
<div id="side-nav" class="extension-nav">
<div class="fd-side-nav">
<a class="fd-side-nav__skip-link" href="#content">Skip navigation</a>
<nav class="fd-side-nav__main-navigation" aria-label="Main Menu">
<ul class="fd-nested-list fd-nested-list--text-only" aria-label="Main Menu">
<li class="fd-nested-list__item">
<a id="side-home" class="fd-nested-list__link" href="#/">
<i role="presentation" class="fd-nested-list__icon sap-icon--home"></i>
<span id="side-home-title" class="fd-nested-list__title"></span>
</a>
</li>
<li class="fd-nested-list__item">
<div class="fd-nested-list__content has-child">
<a id="side-actions" class="fd-nested-list__link">
<i role="presentation" class="fd-nested-list__icon sap-icon--activity-2"></i>
<span id="side-actions-title" class="fd-nested-list__title"></span>
</a>
<button id="side-actions-button" class="fd-button fd-nested-list__button" aria-controls="SUB1" aria-haspopup="true" aria-expanded="false" aria-label="Expand submenu" onclick="toggleNestedListSubmenu(event)">
<i class="sap-icon--navigation-right-arrow" role="presentation"></i>
</button>
</div>
<ul class="fd-nested-list level-2" id="SUB1" aria-hidden="true">
<li class="fd-nested-list__item">
<a id="side-edit" class="fd-nested-list__link" href="#/actions/edit">
<span id="side-edit-title" class="fd-nested-list__title"></span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div id="extension-main" class="extension-main">
<section id="section-home" class="section-hidden">
<h2 class="fd-title fd-title--h2" id="home-title"></h2>
<p id="home-text"></p>
<a id="link-to-edit-text" href="#/actions/edit" onclick="syncWithLuigi('/actions/edit')"></a>
</section>
<section id="section-actions-edit" class="section-hidden">
<h2 class="fd-title fd-title--h2" id="actions-edit-title"></h2>
<p id="actions-edit-text"></p>
<a id="link-to-home-text" href="#/" onclick="syncWithLuigi('/home')"></a>
</section>
<section id="section-not-found" class="section-hidden">
<h2 class="fd-title fd-title--h2" id="not-found-title"></h2>
<p id="not-found-text"></p>
</section>
</div>
</div>
<script src="https://unpkg.com/fsm-shell"></script>
<script src="https://unpkg.com/@luigi-project/client/luigi-client.js"></script>
<script src="helpers.js"></script>
<script>
// Import ShellSDK and events list from FSMShell global variable
// see https://github.com/SAP/fsm-shell for more details.
const { ShellSdk, SHELL_EVENTS } = FSMShell;
// Initialize English as the current language
translate('en');
if (ShellSdk.isInsideShell()) {
// Hide the top bar and the side navigation from the extension as the top bar and the side navigation from the Shell are used
hideSideNavAndTopBar();
// Listen to route change events triggered by Luigi through interacting with the Shell side navigation
window.addEventListener('popstate', router);
// Initialize ShellSDK to connect with parent shell library
const SHELL_SDK = ShellSdk.init(parent, '*');
// Request current Shell language
const PAYLOAD = 'Cockpit_SelectedLocale';
SHELL_SDK.emit(SHELL_EVENTS.Version1.GET_STORAGE_ITEM, PAYLOAD);
// Register listener for Shell language response
SHELL_SDK.on(SHELL_EVENTS.Version1.GET_STORAGE_ITEM, (locale) => {
if (locale !== undefined) {
const LOCALE_CONFIG = getLanguageByLocale(locale);
const LANG_CODE = LOCALE_CONFIG.language ? LOCALE_CONFIG.language : LOCALE_CONFIG.code;
translate(LANG_CODE);
}
});
}
</script>
</body>
</html>