De PHPhulp kroeg
Copyright-code verbetering?
Maar ik vraag mij af of dit nog netter kan?
Code (php)
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
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
$("body").bind('copy', function (e) {
var body_element = document.getElementsByTagName('body')[0];
var selection = window.getSelection();
//if the selection is short let's not annoy our users
if (("" + selection).length < 30) return;
//create a div outside of the visible area
var newdiv = document.createElement('div');
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
body_element.appendChild(newdiv);
newdiv.appendChild(selection.getRangeAt(0).cloneContents());
//we need a < pre> tag workaround
//otherwise the text inside "pre" loses all the line breaks!
if (selection.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {}
newdiv.innerHTML += "
Lees hier meer: <a href='"
+ document.location.href + "'>"
+ document.location.href + "</a> Copyright: Bladiebla.nl";
selection.selectAllChildren(newdiv);
window.setTimeout(function () { body_element.removeChild(newdiv); }, 200);
});
var body_element = document.getElementsByTagName('body')[0];
var selection = window.getSelection();
//if the selection is short let's not annoy our users
if (("" + selection).length < 30) return;
//create a div outside of the visible area
var newdiv = document.createElement('div');
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
body_element.appendChild(newdiv);
newdiv.appendChild(selection.getRangeAt(0).cloneContents());
//we need a < pre> tag workaround
//otherwise the text inside "pre" loses all the line breaks!
if (selection.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {}
newdiv.innerHTML += "
Lees hier meer: <a href='"
+ document.location.href + "'>"
+ document.location.href + "</a> Copyright: Bladiebla.nl";
selection.selectAllChildren(newdiv);
window.setTimeout(function () { body_element.removeChild(newdiv); }, 200);
});
>> Maar ik vraag mij af of dit nog netter kan? --- Deze tekst werd gekopieerd en geplakt via www.phphulp.nl. © phphulp.nl 2022 --- Ook een tekst met automatische copyrightmelding kopiëren en plakken? Ga naar www.phphulp.nl en beleef het avontuur. ---
Mijn advies is ... niet doen, het is irritant ;-)
Ik kan mij herinneren dat het ook op PHPhulp toegepast werd, en dat er veel klachten over kwamen. Ik geloof dat de oorzaak toen bij een externe add-on lag. Iets met ShareIt of iets dergelijks waarmee je inhoud kon delen met sociale media. Die ontwikkelaars hadden die functie toen zomaar (zonder overleg) toegevoegd.
Ja, maar dan zou ik het ook echt als functie aanbieden. Via een knopje 'Kopieer bericht'. Dan valt er (bij een nieuwssite) iets voor te zeggen. Echter zou ik het niet doen als iemand handmatig kopieert (door tekst te selecteren). Als je op dat moment zomaar ongevraagd iets toevoegt aan de geselecteerde en gekopieerde tekst, bewerkstellig je onverwachts gedrag (hé, dit had ik helemaal niet gekopieerd!). En onverwachts gedrag wil je juist voorkomen op je website.
Als jij in een auto zit en je drukt op de claxon, wil je een 'toet'-geluid horen. Je wil niet dat gelijktijdig ook je gevarenlichten gaan branden en je rem automatisch wordt geactiveerd. Misschien vond de ontwikkelaar van die 'feature' dat wel een goed idee en was het goed bedoeld, maar jij zit daar niet op te wachten. Drukken op de claxon = toet! En zo is het ook met tekst selecteren en kopiëren. Mensen hebben daarbij een bepaalde verwachting en vinden het niet prettig als daarmee 'gerommeld' wordt ... hoe goed bedoeld ook.
Het is een nieuwssite, en geen community. En ik denk dat de doelgroep er zich ook niet aan zal storen.
Ik ga er zeker over nadenken. Maar toch wou ik weten of die code nog wel een beetje netjes is. Of zou iemand het beter doen?
- Ariën - op 04/08/2022 02:00:17:
Als ik het via een knopje presenteer, dan lijkt het net alsof ik iedereen aanspoor om mijn berichten te kopiëren. Dat is niet wat ik wil. Ik houd het liever bij een verrassings-effect.
Je kunt het natuurlijk subtiel vormgeven aan de onderkant van het nieuwsbericht.
Verrassingseffect is leuk op een kermis of in een spookhuis, maar niet op een website met nieuwsberichten. Maar goed, it's up to you.
- Ariën - op 04/08/2022 02:00:17:
Maar toch wou ik weten of die code nog wel een beetje netjes is. Of zou iemand het beter doen?
Deze vraag laat ik staan voor anderen, want ik heb hier geen ervaring mee.
- Ariën - op 04/08/2022 01:43:19:
Het gaat erom dat er meteen bronvermelding bij staat.
Wat bied je nu aan mogelijkheden om nieuwsberichten te delen via social media? Dan denk ik in de allereerste plaats aan het Open Graph-protocol van Facebook en de extensies van Twitter.
Niet alleen bieden die je de mogelijkheid om zelf te bepalen welke titel, tekst en eventuele foto worden doorgezet naar andere media. In ruil daarvoor krijg je bovendien vaak een aantrekkelijke opgemaakte card die uitnodigt tot doorklikken, een backlink terug naar je site als de bron en een vermelding als de auteur of uitgever.
In plaats van iets verbieden of onmogelijk maken kun je het misschien beter in goede banen leiden.
Verder blokkeer ik niks, maar pas ik enkel een tekst met bronvermelding toe aan de copy/paste. Ik heb mijn twijfels of die tijdelijke div niet beter kan?
Code (php)
1
nodeName == "PRE"
Kan je document.getElementsByTagName('body')[0] niet vervangen door document.body ? Als je dat ook doet met $("body") kan je zelfs heel jQuery weglaten, scheelt weer een apart HTTP-verzoek.
Code (php)
1
innerHTML +=
De div is wel een hack, zoals zoveel met JS. Tegenwoordig is er ook een Clipboard API, zodat je met JS calls de inhoud kan aanpassen. Alleen Firefox loopt op dit moment nog achter met schrijven naar het klembord volgens CanIUse.com. Bij mij zou het dan niet werken, misschien is de hack dan toch niet zo erg?
Een ongevraagd stijladvies, "Lees meer" is lelijk omgezet vanuit "Read more". "Lees verder" staat natuurlijker.
1. Je gebruikt jQuery en vanilla JavaScript door elkaar
2. Je gebruikt var om variabelen te declareren. Tegenwoordig is let of const beter. Zie https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
3. Je gebruik van single en double quotes is een beetje gek
Paar aanpassingen:
Code (php)
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
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
$('body').bind('copy', function(e) {
const selection = window.getSelection();
if (('' + selection).length < 30) return;
const body_element = document.getElementsByTagName('body')[0];
const newdiv = document.createElement('div');
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
body_element.appendChild(newdiv);
newdiv.appendChild(selection.getRangeAt(0).cloneContents());
if (selection.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {
// todo
}
newdiv.innerHTML += 'Lees hier meer: <a href="' +
document.location.href + '">' +
document.location.href + '</a> Copyright: Bladiebla.nl';
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
}, 200);
});
const selection = window.getSelection();
if (('' + selection).length < 30) return;
const body_element = document.getElementsByTagName('body')[0];
const newdiv = document.createElement('div');
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
body_element.appendChild(newdiv);
newdiv.appendChild(selection.getRangeAt(0).cloneContents());
if (selection.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {
// todo
}
newdiv.innerHTML += 'Lees hier meer: <a href="' +
document.location.href + '">' +
document.location.href + '</a> Copyright: Bladiebla.nl';
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
}, 200);
});