Привет, незнакомец!

Похоже, вы здесь новенький. Чтобы принять участие, нажмите одну из кнопок ниже!

add some text to an element based on the title property

so there is this
-
-
I would like it to be like this
<time datetime="2015-09-16T15:41:14+02:00" title="September 16, 2015 17:41">September 16, 2015 17:41 (1 month ago)</time>
this is how that looks

Комментарии

  • отредактировано October 2015 Chrome

    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/*.

  • 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?
    • @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.

  • 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.
  • 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)
  • q1kq1k
    отредактировано October 2015 Firefox
    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.
  • I thought it would be easier to change the display of dates only in the <time></time> tags?
    because some dates are in <span>, no need to change those.

    But the ones in the <time> 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...
  • q1kq1k
    отредактировано October 2015 Firefox
    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.
  • 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 :-)

  • q1kq1k
    отредактировано October 2015 SeaMonkey
    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.
  • 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
  • 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.

  • q1kq1k
    отредактировано October 2015 Firefox
    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. :)
  • q1kq1k
    отредактировано October 2015 Firefox
    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 + ', <span class="wOxxOmified">' + n.innerHTML + '</span>';
    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, '<span class="wOxxOmified">today, </span>', d, {hour:'2-digit', minute:'2-digit'}); } else if (d >= yesterday) { setContent(n, '<span class="wOxxOmified">yesterday, </span>', d, {hour:'2-digit', minute:'2-digit'}); } else if (d >= days2){ setContent(n, '<span class="wOxxOmified">2 days ago, </span>', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'}); } else if (d >= days3){ setContent(n, '<span class="wOxxOmified">3 days ago, </span>', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'}); } else if (d >= days4){ setContent(n, '<span class="wOxxOmified">4 days ago, </span>', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'}); } else if (d >= days5){ setContent(n, '<span class="wOxxOmified">5 days ago, </span>', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'}); } else if (d >= days6){ setContent(n, '<span class="wOxxOmified">6 days ago, </span>', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'}); } else if (d >= days7){ setContent(n, '<span class="wOxxOmified">7 days ago, </span>', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'}); } else if (d >= year) { setContent(n, '<span class="wOxxOmified">' + n.innerHTML + ', </span>', d, {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'}); } else { setContent(n, '<span class="wOxxOmified">' + n.innerHTML + ', </span>', 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 + ', <span class="wOxxOmified">' + n.innerHTML + '</span>'; 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 }); } } }
Войдите или Зарегистрируйтесь чтобы комментировать.