Notification HTML5

Par Nairolf, il y a 10 ans

Javascript

Voilà j'ai créer un petit code JS pour me notifier de la chanson en cours sur Spotify, le script fonctionne bien mais juste un petit détail me gène, c'est que par moment la Notification déconne, au lieu de se mettre en Haut à Droite, avec une marge, elle se colle en Haut à Gauche, vraiment dans le coin.

Capture Notification

Donc si queulqu'un a déjà eu ce type de problème, et qui sait le résoudre je suis tout ouïe

4 réponses

betaWeb, il y a 10 ans

Salut,

C'est un plugin qur tu as codé ? Comment marche ton système ?
Il faudrait avoir le code de génération de ta notif pour voir :)

Nairolf, il y a 10 ans

C'est un script Greasemonkey, donc le script est directement mis au chargement de la page.

function titleChange() { if ((document.title.indexOf("▶") != -1) /*&& (document.visibilityState == "hidden")*/) notif(); } document.documentElement.addEventListener("DOMSubtreeModified", function(e) { if (e.target === document.getElementsByTagName("title")[0] || (e.target.parentNode && e.target.parentNode === document.getElementsByTagName("title")[0])) titleChange(); }, false); var Notification = window.Notification || window.mozNotification || window.webkitNotification; Notification.requestPermission(); function notif(obj) { setTimeout(function(){ var obj = { track: document.getElementById('app-player').contentDocument.getElementById('track-name').textContent, artist: document.getElementById('app-player').contentDocument.getElementById('track-artist').textContent, cover: window.getComputedStyle(document.getElementById('app-player').contentDocument.getElementsByTagName('div')['cover-art'].getElementsByClassName('sp-image-img')[0], false).backgroundImage.slice(4, -1).replace(/"/g, ""), }; var track = obj.track || "Track not defined", artist = obj.artist || "Artist not defined", cover = obj.cover || spotifyLogo; var instance = new Notification( track, { body: artist, icon: cover, tag: "spotify", dir: "ltr" } ); }, 2000) return false; }
betaWeb, il y a 10 ans

Ah je ne connaissais pas cette extension, pas mal !

L'objet Notification vient d'où ? Tu l'as fait toi-même ou c'est natif dans l'extension ?

EDIT: J'ai fait mes recherches, et l'objet HTML5 Notification ne peut pas être restylé, donc je ne pense pas qu'il soit possible de le posotionner. Néanmoins, tu peux essayer d'utiliser ton propre système de notifs et de le placer toi-même (je pense que c'est possible à faire, mais je ne sais pas dans quel mesure avec l'extension 'Greasemonkey')

Nairolf, il y a 10 ans

Non aucune. La notification se construit comme ça new Notification(title {, options}).

Le titre est bien sûr obligatoire après comme option il y a:

  • dir: Permet d'aligner à gauche ou droite le texte et l'image dans la Notifcation.
  • lang: Informe sur la langue utilisée
  • body: C'est le message en dessous du titre en gras.
  • tag: Pour mettre plusieurs Notifications dans le même groupe, donc pour pas avoir des Notifications l'une sous l'autre, mais juste la même qui change.
  • icon: Qui permet de mettre une image.