Wiki source code of Exemples de customisation

Last modified by jhurst on 2021/04/21 10:01
Show last authors
1 {{ddtoc/}}
2
3 ----
4
5 = Support du glissement gauche et droite pour changer de page de Tableau de Bord (Tablettes tactiles) =
6
7 Cet exemple montre comment ajouter le support des gestes tactiles ("Gestures") de glissement gauche et droite pour changer de page de tableau de bord sur les tablettes tactiles (iPad et Android).
8
9 Il montre l'ajout de nouveaux styles CSS dans le tableau de bord, ainsi que l'ajout de Javascript custom.
10
11 Dans un premier temps nous mettrons en place l'animation de glissement entre deux pages grâce aux animations CSS supportées par les navigateurs récents des tablettes tactiles, combinées à du code Javascript.
12
13 Ensuite, nous ajouterons la détection de glissement gauche et droite, afin de changer de page par ce geste.
14
15 (% class="box warningmessage" %)
16 (((
17 **Important :**
18
19 Comme expliqué dans les chapitres précédents, il est conseillé de garder une copie de sauvegarde des modifications que vous faites dans les fichiers déployés par des .WAR. Lors d'une prochaine mise à jour, vous perdrez ces modifications et il faudra les ré-incorporer dans les nouveaux fichiers déployés.
20 )))
21
22 (% class="box infomessage" %)
23 (((
24 **Notes :**
25
26 * Vous pouvez tester les modifications dans un navigateur récent. Nous vous conseillons Chrome pour ses outils de développement intégrés (sans installation de plug-in). A mitiger en fonction de votre base d'utilisateur.
27 * La modification de certains types de fichiers pourra entraîner des dysfonctionnements dans l'application. Il est préférable de faire une copie de sauvegarde de vos fichiers avant modifications, afin de pouvoir revenir à un état stable.
28 * Si le navigateur de test choisi n'affiche pas vos modifications après la sauvegarde du ou des fichiers concernés, pensez à effacer le cache du navigateur.
29 )))
30
31
32 == Animation de changement de page (CSS) ==
33
34 Ouvrir le fichier **<DDE install>/apache-tomcat/digdash_dashboard/dashboard.css** en édition. Ajouter à la fin de ce fichier les lignes suivantes :
35
36 {{code language="CSS"}}
37 .in, .out {
38 -webkit-animation-timing-function: ease-in-out;
39 -webkit-animation-duration: 350ms;
40 }
41 .slide.in.right {
42 -webkit-transform: translateX(0);
43 -webkit-animation-name: slideinfromright;
44 }
45 .slide.out.right {
46 -webkit-transform: translateX(100%);
47 -webkit-animation-name: slideouttoright;
48 }
49 .slide.in.left {
50 -webkit-transform: translateX(0);
51 -webkit-animation-name: slideinfromleft;
52 }
53 .slide.out.left {
54 -webkit-transform: translateX(100%);
55 -webkit-animation-name: slideouttoleft;
56 }
57 @-webkit-keyframes slideinfromright {
58 from { -webkit-transform: translateX(100%); }
59 to { -webkit-transform: translateX(0); }
60 }
61 @-webkit-keyframes slideinfromleft {
62 from { -webkit-transform: translateX(-100%); }
63 to { -webkit-transform: translateX(0); }
64 }
65 @-webkit-keyframes slideouttoleft {
66 from { -webkit-transform: translateX(0); }
67 to { -webkit-transform: translateX(-100%); }
68 }
69 @-webkit-keyframes slideouttoright {
70 from { -webkit-transform: translateX(0); }
71 to { -webkit-transform: translateX(100%); }
72 }
73 .x-hide-display.slide.out {
74 position: absolute;
75 left:0px;
76 height: 0px !important;
77 background-color: red;
78 display: block !important;
79 }
80 {{/code}}
81
82 Ces classes définissent les différentes animations CSS que nous allons utiliser pour le déplacement des pages lors d'un changement de page du tableau de bord.
83
84 Sauvegarder le fichier **dashboard.css**.
85
86 == Animation de changement de page (Javascript) ==
87
88 Ouvrir le fichier **<DDE install>/apache-tomcat/digdash_dashboard/js-dashboard.js** en édition. Ajouter à la fin de ce fichier les lignes suivantes :
89
90 {{code language="JAVASCRIPT"}}
91 function canChangeCurrentPage(nextPage)
92 {
93 var currentPage = getCurrentPage();
94 var slideDir = -1; //slide to left
95 if (currentPage && nextPage
96 && ddCtrl.pageList[currentPage] && ddCtrl.pageList[nextPage])
97 {
98 if (ddCtrl.pageList[currentPage].role
99 != ddCtrl.pageList[nextPage].role)
100 { //role change
101 return true; //no slide
102 }
103 //check direction to slide
104 if (ddCtrl.pageList[currentPage].pos
105 > ddCtrl.pageList[nextPage].pos)
106 { //slide to right
107 slideDir = 1; //slide to right
108 }
109 }
110 if (currentPage)
111 {
112 var pageDiv = document.getElementById(currentPage);
113 if (pageDiv && pageDiv.slideable)
114 {
115 pageDiv.className += " slide out "
116 + (slideDir == -1 ? "left" : "right");
117 pageDiv.style.top = pageDiv.parentNode.offsetTop
118 + "px";//fix a shift issue
119 }
120 }
121 if (nextPage)
122 {
123 var pageDiv = document.getElementById(nextPage);
124 if (pageDiv && pageDiv.slideable)
125 {
126 pageDiv.className += " slide in "
127 + (slideDir == -1 ? "right" : "left");
128 }
129 }
130 return true;
131 }
132
133 function animEndListener(ev)
134 { //remove animation styles classes at the end of animation
135 var pObj = ev.target;
136 pObj.className = pObj.className.replace(/\sslide/g, "");
137 pObj.className = pObj.className.replace(/\sin/g, "");
138 pObj.className = pObj.className.replace(/\sout/g, "");
139 pObj.className = pObj.className.replace(/\sright/g, "");
140 pObj.className = pObj.className.replace(/\sleft/g, "");
141 }
142
143 function currentPageChanged(page, firstChange)
144 {
145 if (firstChange && touch
146 /* comment touch condition to debug on chrome */)
147 {
148 var pageDiv = document.getElementById(page);
149 if (pageDiv)
150 {
151 pageDiv.slideable = true;
152 pageDiv.addEventListener("webkitAnimationEnd",
153 animEndListener, false);
154 addSwipeEventListener(pageDiv);
155 pageDiv.style.backgroundColor = "white";
156 }
157 }
158 }
159 {{/code}}
160
161 Ces fonctions Javascript vont permettre de modifier le comportement du changement de page de tableau de bord et d'animer les transitions entre les pages.
162
163 Les fonctions **currentPageChanged(page)** et **canChangeCurrentPage(page, firstChange)** sont appelées par le moteur du tableau de bord. Par défaut elles ne sont pas implémentées :
164
165 * **canChangeCurrenPage(page)** est appelée juste avant un changement de page du tableau de bord. Nous utilisons cette fonction pour démarrer les animations de la page sortante et de la nouvelle page. Ces animations se font juste par l'ajout sur les objet DOM représentant ces pages (DIV) des classes CSS d'animations que nous avons définies dans le CSS.
166 * **currentPageChanged(page, firstChange)** est appelée juste après le changement de page effectif. Nous utilisons cette fonction pour initialiser (si firstChange est à true) un event listener de fin d'animation, nous permettant de "nettoyer" les classes CSS des DIV des pages de toute trace d'animations. C'est aussi dans cette fonction d'initialisation que nous allons accrocher la détection du glissement de doigt **addSwipeEventListener** (voir paragraphe suivant).
167
168 == Détection du geste glissement gauche/droite (Javascript) ==
169
170 Toujours dans le fichier js-dashboard.js, ajouter le Javascript suivant qui implémente la détection d'un glissement du doigt ("Swipe") sur la tablette :
171
172 {{code language="JAVASCRIPT"}}
173 var maxTime = 150, //allow movement if < 150 ms
174 maxDistance = 100, //swipe movement of 100 pixels min to trigger
175 startX = 0,
176 startTime = 0,
177 touch = "ontouchend" in document,
178 startEvent = (touch) ? 'touchstart' : 'mousedown',
179 moveEvent = (touch) ? 'touchmove' : 'mousemove',
180 endEvent = (touch) ? 'touchend' : 'mouseup';
181
182 function addSwipeEventListener(target)
183 {
184 target.addEventListener(startEvent, function(e)
185 {
186 if (startTime != 0)
187 { //already started (multitouch gesture) => cancel
188 startTime = 0;
189 startX = 0;
190 }
191 else
192 {
193 startTime = e.timeStamp;
194 startX = touch ? e.touches[0].pageX : e.pageX;
195 }
196 }, false);
197 target.addEventListener(endEvent, function(e)
198 {
199 startTime = 0;
200 startX = 0;
201 }, false);
202 target.addEventListener(moveEvent, function(e)
203 {
204 if (startTime == 0)
205 {
206 return;
207 }
208 var currentX = touch ? e.touches[0].pageX : e.pageX,
209 currentDistance =
210 (startX === 0) ? 0 : Math.abs(currentX - startX),
211 currentTime = e.timeStamp;
212 if (currentTime - startTime < 50)
213 { //prevent default at the begining of the swipe
214 e.preventDefault();
215 }
216 if (currentTime - startTime < maxTime
217 && currentDistance > maxDistance)
218 {
219 if (currentX < startX)
220 { //swipe left code here
221 e.preventDefault();
222 nextPage();
223 }
224 else if (currentX > startX)
225 { //swipe right code here
226 e.preventDefault();
227 prevPage();
228 }
229 startTime = 0;
230 startX = 0;
231 }
232 }, false);
233 }
234
235 function onChartDrawn(doc, dm, dmsel, chart)
236 {
237 //also add the swipe event listener on each chart content
238 addSwipeEventListener(doc);
239 }
240 {{/code}}
241
242 La détection de glissement est faite sur le DIV de la page via le listener ajouté par la fonction **currentPageChanged(page, firstChange)** ainsi que sur chaque portlet de flux via la fonction **onChartDrawn(doc, dm, dmsel, chart)**. Cette dernière est appelée par le moteur du tableau de bord après chaque affichage d'une portlet de flux. Par défaut elle n'est pas implémentée.
243
244 Sauvegarder le fichier **js-dashboard.js**.