Skip to content
This repository was archived by the owner on Dec 22, 2020. It is now read-only.
This repository was archived by the owner on Dec 22, 2020. It is now read-only.

Add a time-ago widget? #67

@ckcollab

Description

@ckcollab

Ah, sorry hit post on accident! Updating...

I just whipped this up for a personal project using RiotJS and I thought you guys might find it useful. Apologies for not taking the time to fork the repo and such, I'm normally a backend guy so it's kind of daunting. I may do just that if I get some more free time this weekend.

Usage:
<time-ago timestamp="2015-11-27T04:02:30.935205+00:00"></time-ago>

Example output:
5m ago

<time-ago>
    <span show={caption}>{ caption } ago</span>

    <script>
        var self = this;

        function timeSince(date) {
            var seconds = Math.floor((new Date() - date) / 1000);
            var interval = Math.floor(seconds / 31536000);

            if (interval > 1) {
                return interval + "yr";
            }
            interval = Math.floor(seconds / 2592000);
            if (interval > 1) {
                return interval + "mon";
            }
            interval = Math.floor(seconds / 86400);
            if (interval > 1) {
                return interval + "d";
            }
            interval = Math.floor(seconds / 3600);
            if (interval > 1) {
                return interval + "hr";
            }
            interval = Math.floor(seconds / 60);
            if (interval > 1) {
                return interval + "m";
            }
            return Math.floor(seconds) + "s";
        }

        var update_caption = function() {
            self.date = new Date(self.opts.timestamp);
            self.caption = timeSince(self.date);
            self.update();
            window.setTimeout(update_caption, 15000);
        };

        if(self.opts.timestamp !== undefined) {
            update_caption();
        }
    </script>

</time-ago>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions