Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2017-03-09T10:29:56+01:00Les derniers messages parus sur le forum de Zeste de Savoir.Bien informer l'utilisateur d'un raccourci clavier, message #1438082017-03-09T10:29:56+01:00Deuchnord/@Deuchnordhttps://zestedesavoir.com/forums/sujet/8156/bien-informer-lutilisateur-dun-raccourci-clavier/?page=1#p143808<p>Je me permets de revenir pour proposer le code que j’ai écrit hier, histoire que cela puisse aider d’autres personnes :</p>
<div class="spoiler">
<div><table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 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</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="s1">'use strict'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">Platform</span><span class="p">()</span> <span class="p">{}</span>
<span class="nx">Platform</span><span class="p">.</span><span class="nx">isBrowser</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">browserName</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">browserName</span><span class="p">)</span> <span class="o">!=</span> <span class="o">-</span><span class="mi">1</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">Platform</span><span class="p">.</span><span class="nx">isOS</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">osName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">currentOS</span> <span class="o">=</span> <span class="s2">"unknown"</span><span class="p">;</span>
<span class="k">switch</span><span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">platform</span><span class="p">)</span> <span class="p">{</span>
<span class="k">case</span> <span class="s2">"Win32"</span><span class="o">:</span> <span class="nx">currentOS</span> <span class="o">=</span> <span class="s2">"Windows"</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s2">"Linux"</span><span class="o">:</span> <span class="k">case</span> <span class="s2">"X11"</span><span class="o">:</span> <span class="nx">currentOS</span> <span class="o">=</span> <span class="s2">"Linux"</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s2">"MacIntel"</span><span class="o">:</span> <span class="nx">currentOS</span> <span class="o">=</span> <span class="s2">"macOS"</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">currentOS</span> <span class="o">===</span> <span class="nx">osName</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">Platform</span><span class="p">.</span><span class="nx">getHotKeyFromAccessKey</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">accessKey</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hotKey</span> <span class="o">=</span> <span class="s2">""</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="nx">Platform</span><span class="p">.</span><span class="nx">isOS</span><span class="p">(</span><span class="s2">"Windows"</span><span class="p">)</span> <span class="o">||</span> <span class="nx">Platform</span><span class="p">.</span><span class="nx">isOS</span><span class="p">(</span><span class="s2">"Linux"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">Platform</span><span class="p">.</span><span class="nx">isBrowser</span><span class="p">(</span><span class="s2">"Firefox"</span><span class="p">))</span>
<span class="nx">hotKey</span> <span class="o">=</span> <span class="s2">"Ctrl + Alt + "</span><span class="p">;</span>
<span class="k">else</span>
<span class="nx">hotKey</span> <span class="o">=</span> <span class="s2">"Alt + "</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">Platform</span><span class="p">.</span><span class="nx">isOS</span><span class="p">(</span><span class="s2">"macOS"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">Platform</span><span class="p">.</span><span class="nx">isBrowser</span><span class="p">(</span><span class="s2">"Opera"</span><span class="p">))</span>
<span class="nx">hotKey</span> <span class="o">=</span> <span class="s2">"⌥"</span><span class="p">;</span>
<span class="k">else</span>
<span class="nx">hotKey</span> <span class="o">=</span> <span class="s2">"⌃⌥"</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">hotKey</span> <span class="o">+=</span> <span class="nx">accessKey</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">hotKey</span><span class="p">;</span>
<span class="p">};</span>
</pre></div>
</td></tr></table></div>
</div>
<p>On déclare ainsi un prototype <code>Platform</code> qu’il est ensuite possible d’utiliser comme ceci :</p>
<div><table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">hotkey</span> <span class="o">=</span> <span class="nx">Platform</span><span class="p">.</span><span class="nx">getHotKeyFromAccessKey</span><span class="p">(</span><span class="s2">"e"</span><span class="p">);</span>
</pre></div>
</td></tr></table></div>
<p>Voilà, c’est sûrement perfectible, donc n’hésitez pas si vous voyez des trucs améliorables <img alt=":)" src="/static/smileys/smile.png"></p>Bien informer l'utilisateur d'un raccourci clavier, message #1436112017-03-07T20:07:01+01:00Deuchnord/@Deuchnordhttps://zestedesavoir.com/forums/sujet/8156/bien-informer-lutilisateur-dun-raccourci-clavier/?page=1#p143611<figure>
<blockquote>
<p>Je pose ça là :</p>
<p><a href="http://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript">http://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript</a></p>
<p>Mais de préférence, fait ça coté serveur.
C’est à dire utilise l’User-agent pour afficher les bonnes informations.</p>
<p>Si t’as l’occasion de te passer de JS c’est mieux pour le coup je pense.</p>
</blockquote>
<figcaption><a href="https://zestedesavoir.com/forums/sujet/8156/bien-informer-lutilisateur-dun-raccourci-clavier/?page=1#p143601">ache</a></figcaption>
</figure>
<p>Ça risque d’être compliqué, l’application que je développe repose intensément sur JavaScript <img alt="^^" src="/static/smileys/hihi.png"></p>
<p>Merci pour ton lien, je vais regarder ça <img alt=":)" src="/static/smileys/smile.png"></p>Bien informer l'utilisateur d'un raccourci clavier, message #1436012017-03-07T17:51:25+01:00ache/@achehttps://zestedesavoir.com/forums/sujet/8156/bien-informer-lutilisateur-dun-raccourci-clavier/?page=1#p143601<p>Je pose ça là :</p>
<p><a href="http://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript">http://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript</a></p>
<p>Mais de préférence, fait ça coté serveur.
C’est à dire utilise l’User-agent pour afficher les bonnes informations.</p>
<p>Si t’as l’occasion de te passer de JS c’est mieux pour le coup je pense.</p>Bien informer l'utilisateur d'un raccourci clavier, message #1435712017-03-07T13:19:50+01:00Deuchnord/@Deuchnordhttps://zestedesavoir.com/forums/sujet/8156/bien-informer-lutilisateur-dun-raccourci-clavier/?page=1#p143571<figure>
<blockquote>
<p>Tu peux utiliser l’attribut :hover et faire un truc plus ou moins propre du genre : <a href="https://openclassrooms.com/courses/modifier-l-apparence-d-une-infobulle">https://openclassrooms.com/courses/modifier-l-apparence-d-une-infobulle</a></p>
<p>Je pense que avec :hover et les peusdo-élèment il doit y avoir moyen de bidouiller un truc uniquement en html et css. <img alt=":)" src="/static/smileys/smile.png"></p>
</blockquote>
<figcaption><a href="https://zestedesavoir.com/forums/sujet/8156/bien-informer-lutilisateur-dun-raccourci-clavier/?page=1#p143569">Demandred</a></figcaption>
</figure>
<p>Je me suis peut-être mal exprimé <img alt="^^" src="/static/smileys/hihi.png"></p>
<p>Ce que je cherche à faire, c’est afficher dans l’infobulle (défini par l’attribut <code>title</code>) le raccourci clavier correspondant en fonction du navigateur et de l’OS de l’utilisateur. Quelque chose me dit que je vais devoir me baser sur son User Agent, mais je me demandais s’il existait une méthode plus propre ?</p>Bien informer l'utilisateur d'un raccourci clavier, message #1435692017-03-07T13:14:45+01:00Demandred/@Demandredhttps://zestedesavoir.com/forums/sujet/8156/bien-informer-lutilisateur-dun-raccourci-clavier/?page=1#p143569<p>Tu peux utiliser l’attribut :hover et faire un truc plus ou moins propre du genre : <a href="https://openclassrooms.com/courses/modifier-l-apparence-d-une-infobulle">https://openclassrooms.com/courses/modifier-l-apparence-d-une-infobulle</a></p>
<p>Je pense que avec :hover et les peusdo-élèment il doit y avoir moyen de bidouiller un truc uniquement en html et css. <img alt=":)" src="/static/smileys/smile.png"></p>Bien informer l'utilisateur d'un raccourci clavier, message #1435682017-03-07T12:17:54+01:00Deuchnord/@Deuchnordhttps://zestedesavoir.com/forums/sujet/8156/bien-informer-lutilisateur-dun-raccourci-clavier/?page=1#p143568<p>Bonjour,</p>
<p>Pour mon projet d’application Web, j’aimerais associer à un bouton de ma page un raccourci clavier pour faciliter son accès dont je sais qu’il sera relativement fréquent. Je me suis donc dirigé vers l’attribut HTML <a href="https://www.w3schools.com/tags/att_global_accesskey.asp"><code>accesskey</code></a> qui n’utilise pas une goûte de JavaScript. Voici le code HTML de mon bouton :</p>
<div><table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"mybtn"</span> <span class="na">accesskey</span><span class="o">=</span><span class="s">"e"</span><span class="p">></span>Edit<span class="p"></</span><span class="nt">button</span><span class="p">></span>
</pre></div>
</td></tr></table></div>
<p><em>De facto</em>, le bouton devient accessible avec le raccourci suivant, selon l’OS et le navigateur (selon W3School) :</p>
<ul>
<li><strong>Sous Windows et Linux :</strong><ul>
<li><strong>IE, Chrome, Safari, Opera :</strong> <kbd>Alt</kbd> + <kbd>E</kbd></li>
<li><strong>Firefox :</strong> <kbd>Alt</kbd> + <kbd>⇧</kbd></li>
</ul>
</li>
<li><strong>Sous macOS :</strong><ul>
<li><strong>Opera :</strong> <kbd>⌥</kbd> <kbd>E</kbd></li>
<li><strong>Tous les autres :</strong> <kbd>⌃</kbd> <kbd>⌥</kbd> <kbd>E</kbd></li>
</ul>
</li>
</ul>
<p>J’aimerais maintenant ajouter un attribut <code>title</code> à mon bouton afin de l’agrémenter d’une infobulle pour signaler à l’utilisateur le raccourci clavier à utiliser, tout en s’adaptant au système et au navigateur, de telle sorte que le raccourci affiché dans l’infobulle soit celle que l’utilisateur peut <em>réellement</em> utiliser.</p>
<p>Je me doute qu’il faille du JavaScript pour faire cela, mais je ne trouve pas de moyen simple… Comment faire ?</p>