Discussions » Creation Requests

add some text to an element based on the title property

q1k
§
Posted: 2015-10-13

add some text to an element based on the title property

so there is this

wOxxOmMod
§
Posted: 2015-10-13
Edited: 2015-10-13

Using MutationObserver wrapper:

// ==UserScript==
// @name         Full date/time
// @include      http://somesite/*
// @run-at       document-start
// @require      https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==

setMutationHandler(document, 'time[title]', function(nodes) {
    nodes.forEach(function(n) {
        if (n.textContent.indexOf(' (') < 0)
            n.textContent = n.title + ' (' + n.textContent + ')';
    });
    return true;
});

Changing after page load:

// ==UserScript==
// @name         Full date/time
// @include      http://somesite/*
// @run-at       document-end
// ==/UserScript==

[].forEach.call(document.querySelectorAll('time[title]'), function(n) {
    n.textContent = n.title + ' (' + n.textContent + ')';
});

Don't forget to replace // @include http://somesite/*.

q1k
§
Posted: 2015-10-13

I used the second code but removed the meta tag @ran-at

What is the difference between the two?
And what does the @run-at do?

wOxxOmMod
§
Posted: 2015-10-13
  • @run-at document-end guarantees to execute the script after DOMContentLoaded event
  • @run-at document-start attempts to execute the script as early as possible, often even before <body> element is present.

See also the documentation.

q1k
§
Posted: 2015-10-13

Ok.
One other thing.
Can it be made so that if the date is less than a day old, to not add the full date, i.e. simply just show the "2 hours ago", "10 hours ago", etc.
And if it says yesterday, to only show the time but not the full date, i.e. yesterday, 17:41

And for dates older than 2 days, add the full date and time like my initial request.

q1k
§
Posted: 2015-10-13

Great,
Only a couple of issues to be resolved.
It seems that it adds the seconds from the clock on the yesterday time.

And for dates older than that it changes the text to the title text and not append the title text to the original. (I only get the Date and not the 'ago' part)

q1k
§
Posted: 2015-10-13
Edited: 2015-10-13

I'm trying to get this to work on kat.cr
I open a few pages just to check the different possibilities, i.e. 1 hour ago, 10 hours ago, yesterday, 2 days ago, etc, etc.

EDIT:
I have just found out that, they make the dates relative to hours, and not actual dates.
So if the post is made on 11 October 2015 at 23:00 (or about 46 hours ago) it would show yesterday, but in reality it isn't actually true.

q1k
§
Posted: 2015-10-13

I thought it would be easier to change the display of dates only in the tags?
because some dates are in , no need to change those.

But the ones in the tags , I wanted them to show the date pretty much like many forums do, e.g. like on dev.dota2.com. Posts that were from today would show the date as Today, TIME, for yesterday to be Yesterday, TIME, and older than that to be 2 days ago, DATE, TIME.

And maybe the ones that are displayed in seconds or minutes (less than an hour old) to be untouched.

Am I asking too much? :( I hope not...

wOxxOmMod
§
Posted: 2015-10-13

Well, it was tricky: KAT: smart full date/time

q1k
§
Posted: 2015-10-13
Edited: 2015-10-13

I don't know what's worse,
The fact that it doesn't work properly on palemoon.
or
that when you are logged in, it doesn't work at all.

and I think it would be better if it showed the 24hour clock, instead of AM, PM.

wOxxOmMod
§
Posted: 2015-10-14

Fixed the assues except for Palemoon. Because it has lots of problems with the modern features, this one is due to its buggy/incomplete implementation of toLocaleTimeString(). I'll look into it some day later. Maybe :-)

q1k
§
Posted: 2015-10-14
Edited: 2015-10-14

Just another thing needs to be done.
For the dates up til 1 week old, it just copies the current string, like it should, but sometimes it's wrong because it says yesterday and is actually the day before that.
So there is 12 Oct 15 yesterday, which is wrong.
Could you fix the display of dates up til a week old, because afterwards the mistake is not noticeable.

And possibly a few other things,
When the year differs from the current add the year in full, not just 2 digits.
And, instead of having the FULL DATE, and than the relative date (ago) appear, to be the other way around, like so:
1 year and 5 months ago, 28 Apr 2014, 19:28
but please make sure to add that comma after the date. Or it might be better to use the word 'at' (1 year and 5 months ago, 28 Apr 2014, at 19:28)

thank you very much.

q1k
§
Posted: 2015-10-14

ok, so i've made the year appear in full (4 digits), but,
i can't seem to figure out how to make the date appear after the ago part and after that add the word ", at" and the time,
so that it would look like this
1 year and 5 months ago, 28 Apr 2014, at 19:28

wOxxOmMod
§
Posted: 2015-10-14

wrong because it says yesterday and is actually the day before that.

Well, their site script apparently calculates the relative dates without taking timezone offset into account so they should fix it

Anyway, I'm done with this script.

q1k
§
Posted: 2015-10-14
Edited: 2015-10-14

can you just make 1 small change in it
so the date appears after the 'ago' part, like this
1 year and 5 months ago, 28 Apr 2014, at 19:28

and year:'2-digit' to year:'numeric', so the year would be full 4 digits

thanks in advance, and have a nice day, or night, whichever timezone you are at. :)

q1k
§
Posted: 2015-10-16
Edited: 2015-10-16

OK, so I have ended up with this code.
I know it may not be the most efficient way to do what I did, but it works.

Also if I change anything in this part the whole script doesn't work
var text = prefix ? prefix + time : time + ', ' + n.innerHTML + '';
What I was actually trying to do is have the ago part before the full date.

Thank you for your help.



// ==UserScript==
// @name KAT: smart full date/time
// @description Today: "1 hour ago", yesterday: "yesterday, 11:44", earlier: "12 days ago, 01 Oct 2015, 10:45"
// @include https://kat.cr/*
// @version 1.0.3
// @author wOxxOm
// @namespace https://greasyfork.org/en/users/2159-woxxom
// @license MIT License
// @run-at document-start
// @grant GM_addStyle
// @require https://greasyfork.org/scripts/12228/code/setMutationHandler2.js
// ==/UserScript==

var dateLocale = 'en-BZ'; // i used this because it didn't show the comma after the year -> 1 Oct 2015, 10:45 (seamonkey)
//var dateLocale = 'en-GB';
//var dateLocale = navigator.language;

GM_addStyle('.wOxxOmified {opacity:0.7}');

var today = new Date();
today.setHours(0, 0, 0, 0);

var onehour = new Date();
onehour.setHours(onehour.getHours() - 2 );



var yesterday = new Date();
yesterday.setDate(today.getDate() - 1);
yesterday.setHours(0, 0, 0, 0);


var days2 = new Date();
days2.setDate(today.getDate() - 2);
days2.setHours(0, 0, 0, 0);

var days3 = new Date();
days3.setDate(today.getDate() - 3);
days3.setHours(0, 0, 0, 0);

var days4 = new Date();
days4.setDate(today.getDate() - 4);
days4.setHours(0, 0, 0, 0);

var days5 = new Date();
days5.setDate(today.getDate() - 5);
days5.setHours(0, 0, 0, 0);

var days6 = new Date();
days6.setDate(today.getDate() - 6);
days6.setHours(0, 0, 0, 0);

var days7 = new Date();
days7.setDate(today.getDate() - 7);
days7.setHours(0, 0, 0, 0);


var year = new Date();
year.setMonth(0, 1);
year.setHours(0, 0, 0, 0);

var timestamps; // = [].slice.call(document.getElementsByTagName('time'));
setMutationHandler(document, 'time', datify);

function datify(nodes) {
nodes.forEach(function(n) {
if (n.wOxxOm == n.textContent)
return;
var d = new Date(n.getAttribute('datetime') || n.title);

if (d >= onehour){
// no change :)
}
else if (d >= today) {
// no change, ------ yes change :P
setContent(n, 'today, ', d, {hour:'2-digit', minute:'2-digit'});
} else if (d >= yesterday) {
setContent(n, 'yesterday, ', d, {hour:'2-digit', minute:'2-digit'});
} else if (d >= days2){
setContent(n, '2 days ago, ', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'});
} else if (d >= days3){
setContent(n, '3 days ago, ', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'});
} else if (d >= days4){
setContent(n, '4 days ago, ', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'});
} else if (d >= days5){
setContent(n, '5 days ago, ', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'});
} else if (d >= days6){
setContent(n, '6 days ago, ', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'});
} else if (d >= days7){
setContent(n, '7 days ago, ', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'});
} else if (d >= year) {
setContent(n, '' + n.innerHTML + ', ', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'});
} else {
setContent(n, '' + n.innerHTML + ', ', d, {day:'numeric', month:'short', year:'numeric', hour:'2-digit', minute:'2-digit'});
}
});
return true;

function setContent(n, prefix, d, options) {
var time = d.toLocaleTimeString(dateLocale, options);
var text = prefix ? prefix + time : time + ', ' + n.innerHTML + '';
if (n.innerHTML != text) {
var pristine = !n.wOxxOm;
n.innerHTML = text;
n.wOxxOm = n.textContent;
if (pristine)
setMutationHandler(n, datify, 'time', {
characterData: true,
attributes: true, attributeFilter: ['title'],
childList: true,
subtree: true
});
}
}
}

Post reply

Sign in to post a reply.