-
Notifications
You must be signed in to change notification settings - Fork 44
/
Copy pathindex-up.html
209 lines (180 loc) · 7.53 KB
/
index-up.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
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!-- @noodom / menu Mobile Sub Menu Json Frame (gestion par Json et Frame)
- inspiré par https://codepen.io/berdejitendra/pen/AgEzJ
- ajout de la gestion des boutons par un paramétrage JSon
- ajout de la navigation par frame à l'aide de htmlDisplay
- Installation du menu : https://github.com/noodom/jeedom_menus/blob/master/menuMobileSubMenuFrame/README.md
- Pensez au café pour les nuits blanches de codage ;) https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=noodom.fr%40gmail.com¤cy_code=EUR&source=url
-->
<link rel="stylesheet" href="data/menusNoodom/menuMobileSubMenuFrame/css/perso-up.css" type="text/css" />
<div id="mobile">
<nav id="submenu">
</nav>
<nav id="mainmenu">
</nav>
</div>
<script id="menuMobileSubMenuFrame-js">
$(document).ready(function () {
let jsonPath = 'data/menusNoodom/menuMobileSubMenuFrame/json/perso-h.json';
let menuMobile = $('#mobile');
let link_id = (location.search.split('link_id' + '=')[1] || '').split('&')[0];
menuMobile.append('<div id="msg">Chargement du menu..</div>');
// load Json configuration file (perso.json)
// uses cache
//$.getJSON(jsonPath, function (data) {
// force reload at loading : Date()).getTime(), every minute : Date()).getMinutes(), every hour : Date()).getHours(), every day : Date()).getDay(), ..
$.getJSON(jsonPath + '?v=' + (new Date()).getTime(), function (data) {
let topDesignId = (location.search.split('plan_id' + '=')[1] || '').split('&')[0];
// head
let navSubmenu = $('#submenu');
let buttons = data.buttons.map(function (button) {
if (button.link === topDesignId) {
alertMsg("!!! Attention, corrigez le lien " + button.link + " du bouton " + button.label + " qui pointe vers le menu principal (boucle sans fin)");
}
else {
return '<li class="" id="' + button.link + '" onClick="gotoPlan(this.id)">'
+ '<div>'
+ '<i class="' + button.icon + '"></i>'
+ '<span>'
+ button.label
+ '</span>'
+ '</div>'
+ '</li>';
}
});
navSubmenu.empty();
if (buttons.length) {
let listButtons = buttons.join(' ');
let menuList = $('<ul class="ul-menu"/>').html(listButtons);
navSubmenu.append(menuList);
// css delay
for (let bton = 0; bton < buttons.length; bton++) {
$('#submenu>ul.ul-menu>li:nth-child(' + (bton + 1) + ')').css('--nth-child', 1 + bton * 0.2)
}
}
// bottom
let i = 0;
let menuLink = -1;
navSubmenu = $('#mainmenu');
buttons = data.buttons_bottom.map(function (button) {
if (button.link === topDesignId) {
alertMsg("!!! Attention, corrigez le lien " + button.link + " du bouton " + button.label + " qui pointe vers le menu principal (boucle sans fin)");
}
else {
// double click on menu link
if (i == 1 && button.link != undefined && button.link != "") {
menuLink = button.link;
}
let idAttr = (i == 1) ? 'id="menu" class="noactive" ondblclick="gotoPlan(' + menuLink + ');" onClick="menuSelection(this.id)"' : 'id="' + button.link + '" onClick="gotoPlan(this.id)"';
i++;
return '<li ' + idAttr + '>'
+ '<i class="' + button.icon + '"></i>'
+ '<span>'
+ button.label
+ '</span>'
+ '</li>';
}
});
navSubmenu.empty();
if (buttons.length) {
let listButtons = buttons.join(' ');
let menuList = $('<ul class="ul-menu"/>').html(listButtons);
navSubmenu.append(menuList);
}
if (data.parameters) {
// get perso.json parameters
let button_head_color = data.parameters.button_head_color ? data.parameters.button_head_color : "#fff";
let button_bottom_color = data.parameters.button_bottom_color ? data.parameters.button_bottom_color : "#fff";
let button_head_bgcolor = data.parameters.button_head_bgcolor ? data.parameters.button_head_bgcolor : "#fff";
let button_bottom_bgcolor = data.parameters.button_bottom_bgcolor ? data.parameters.button_bottom_bgcolor : "#fff";
let button_head_hovercolor = data.parameters.button_head_hovercolor ? data.parameters.button_head_hovercolor : "#5fa2db";
let button_bottom_hovercolor = data.parameters.button_bottom_hovercolor ? data.parameters.button_bottom_hovercolor : "#555555";
// set CSS parameters
// menu parameters
let htmlDisplayId = '[data-eqlogic_id="#id#"]';
$(htmlDisplayId)[0].style.left = data.parameters.menu_x ? data.parameters.menu_x : "0px";
$(htmlDisplayId)[0].style.top = data.parameters.menu_y ? data.parameters.menu_y : "396px";
$(htmlDisplayId)[0].style.width = data.parameters.menu_width ? data.parameters.menu_width : "320px";
$(htmlDisplayId)[0].style.height = data.parameters.menu_height ? data.parameters.menu_height : "104px";
// frame parameters
$("#menuFrame").offsetParent().style().left = data.parameters.content_x ? data.parameters.content_x : "0px";
$("#menuFrame").offsetParent().style().top = data.parameters.content_y ? data.parameters.content_y : "0px";
$("#menuFrame").offsetParent().style().width = data.parameters.content_width ? data.parameters.content_width : "320px";
$("#menuFrame").offsetParent().style().height = data.parameters.content_height ? data.parameters.content_height : "500px";
// buttons colors
document.documentElement.style.setProperty('--button-head-color', button_head_color);
document.documentElement.style.setProperty('--button-bottom-color', button_bottom_color);
document.documentElement.style.setProperty('--button-head-bgcolor', button_head_bgcolor);
document.documentElement.style.setProperty('--button-bottom-bgcolor', button_bottom_bgcolor);
document.documentElement.style.setProperty('--button-head-hovercolor', button_head_hovercolor);
document.documentElement.style.setProperty('--button-bottom-hovercolor', button_bottom_hovercolor);
}
// remove loading message
$("#msg").html("")
let frameDestination = document.getElementById('menuFrame');
if (frameDestination == null) {
// frame navigation missing
alertMsg("Attention, il manque la création de l'équipement htmlDisplay pour la gestion par frame");
}
else {
// first frame loading
if (link_id == "") {
if (menuLink == -1) {
// set focus on first button
$('#' + data.buttons_bottom[0].link).click();
}
else {
// set focus on Menu button
gotoPlan(menuLink);
}
}
else {
// frame navigation : goto design id (url parameter link_id)
gotoPlan(link_id);
}
}
});
});
// create url destination
function getUrlDestination(urlParam) {
if (isNaN(urlParam)) {
return urlParam;
} else {
return 'index.php?v=d&p=plan&plan_id=' + urlParam + '&fullscreen=1';
}
}
// menu redirection
function gotoPlan(id) {
if (id == -1) {
return;
}
let urlDestination = getUrlDestination(id);
// get frame in htmlDisplay equipment
let frameDestination = document.getElementById('menuFrame');
if (frameDestination != null) {
// display focus
//$('.monmenu').removeClass('selected');
//$('#' + id + ' li').addClass('selected');
// reduce menu
menuSelection(id);
// frame redirection
if (frameDestination.src.split('?')[1] != urlDestination.split('?')[1]) {
frameDestination.src = urlDestination;
}
}
}
function menuSelection(menuId) {
if ($("#" + menuId).attr("class") == "noactive") {
$("#menu").removeClass("noactive");
$("#submenu li").addClass("activeli");
}
else {
$("#menu").addClass("noactive");
$("#submenu li").removeClass("activeli");
}
}
function alertMsg(msg) {
console.error(msg);
alert(msg);
}
//# sourceURL=menuMobileSubMenuFrame.js
</script>