Help: how to make it work when occur a dynamically change in the page ????
Since the page is not reloaded you need to use MutationObserver or recheck the page periodically in setTimeout.
// ==UserScript==
// @name TEST - FREE Programme TV v.1
// @namespace https://greasyfork.org/fr/users/7434-janvier56
// @homepage https://greasyfork.org/fr/users/7434-janvier56
// @description Just script - Companion for FREE Programme TV
//
// @version v.01.00
//
// @include http://portail.free.fr/programme-tv/grille-tv/*
//
// @run-at document-start
// ==/UserScript==
(() => {
onIdOnce('listechaines', () => {
onSelector('.titre + br + .type', els => els.forEach(el => {
el.dataset.txt = el.innerHTML;
el.classList.add('DEL');
}));
onSelector('#listechaines img[src^="/_/img/tv/chaines/"]', els => els.forEach(el => {
el.dataset.txt = el.title;
el.classList.add('DEL2');
}));
});
///////////////////////////////////////////////////////////////
// superfast one-time detection by id
function onIdOnce(id, callback) {
new MutationObserver((_, ob) => {
const el = document.getElementById(id);
if (el) {
ob.disconnect();
callback(el);
}
}).observe(document, {subtree: true, childList: true});
}
///////////////////////////////////////////////////////////////
// slow detection by selector
function onSelector(selector, callback) {
if (onSelector.selectors) {
const all = onSelector.selectors;
onSelector.selectors = [[selector, callback]];
onSelector.onMutation([{addedNodes: [document.documentElement]}]);
onSelector.selectors = all;
all.push([selector, callback]);
return;
}
onSelector.selectors = [];
onSelector.onMutation = mutations => {
var selectors = onSelector.selectors;
var found = selectors.map(() => []);
for (var i = 0, m; (m = mutations[i++]);) {
for (var j = 0, node, added = m.addedNodes; (node = added[j++]);) {
if (node instanceof Element) {
for (var k = 0, s; (s = selectors[k]); k++) {
var sel = s[0];
if (node.matches(sel)) {
found[k].push(node);
}
if (node.firstElementChild && node.querySelector(sel)) {
found[k].push(...node.querySelectorAll(sel));
}
}
}
}
}
found.forEach((els, i) => els.length && selectors[i][1](els));
};
onSelector.observer = new MutationObserver(onSelector.onMutation);
onSelector.observer.observe(document, {
subtree: true,
childList: true,
});
}
})();
Ha, i am without voice: Thanks wOxxOm ! ;-) I test that and i try to understand how it work...
PS: Markdown is great but more difficult for me. And yes, i need an extra coffee : I have not see the format icon for code here.....
1 - Test with code icon from here (seems not provide syntax highlighting): // superfast one-time detection by id function onIdOnce(id, callback) { new MutationObserver((_, ob) => { const el = document.getElementById(id); if (el) { ob.disconnect(); callback(el); } }).observe(document, {subtree: true, childList: true}); }
2 - Test from your link: Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.
var s = "JavaScript syntax highlighting";
alert(s);
// slow detection by selector
function onSelector(selector, callback) {
if (onSelector.selectors) {
const all = onSelector.selectors;
onSelector.selectors = [[selector, callback]];
onSelector.onMutation([{addedNodes: [document.documentElement]}]);
onSelector.selectors = all;
all.push([selector, callback]);
return;
}
onSelector.selectors = [];
onSelector.onMutation = mutations => {
var selectors = onSelector.selectors;
var found = selectors.map(() => []);
for (var i = 0, m; (m = mutations[i++]);) {
for (var j = 0, node, added = m.addedNodes; (node = added[j++]);) {
if (node instanceof Element) {
for (var k = 0, s; (s = selectors[k]); k++) {
var sel = s[0];
if (node.matches(sel)) {
found[k].push(node);
}
if (node.firstElementChild && node.querySelector(sel)) {
found[k].push(...node.querySelectorAll(sel));
}
}
}
}
}
found.forEach((els, i) => els.length && selectors[i][1](els));
};
onSelector.observer = new MutationObserver(onSelector.onMutation);
onSelector.observer.observe(document, {
subtree: true,
childList: true,
});
}
})();
I tested very quickly your script example: It seems not working (it didn't add the .DEL).
I use it to make an userstyle like:
.type.DEL[data-txt="Documentaire"] {
background: darkseagreen none repeat scroll 0 0;
color: #2d2d2d;
font-family: "CarroisGothic";
font-size: 12px;
}
.type.DEL {
color: #2d2d2d;
display: inline-block;
font-family: "CarroisGothic";
font-size: 12px;
padding: 5px;
text-align: center;
width: 180px;
}
Maybe it is possible to transform directly the innerHTML to a class attribute:
Documentaire became .Documentaire ????
Help: how to make it work when occur a dynamically change in the page ????
It's a little script i test for: http://portail.free.fr/programme-tv/grille-tv/
It help me to highlight these elements (film /serie etc) with CSS
But if i navigate in the Tv programe (without refresh the page) it don't take the change in it.
What i need to add in the script?
PS: Why in the code displaying here (in Geasyfork Forum) show additional visible br and p in it ? Usually i used the balise "code" but .... How put code with markdown inside disscussion ?