RiotGear / rg

The open source component library for RiotJS
http://riotgear.js.org/
MIT License
297 stars 67 forks source link

Add a time-ago widget? #67

Open ckcollab opened 8 years ago

ckcollab commented 8 years ago

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>
gregorypratt commented 8 years ago

Yeah nice. Might expand on this idea and make use of moment.js...

ckcollab commented 8 years ago

Oh man, I knew there was some library that already did this better than I could :D

Yeah moment JS "Relative Time" seems perfect, is it OK to add dependencies to this project like that?

EDIT: Oh, it's already a dependency, I see... maybe I should try forking this/learning more about Node projects.

gregorypratt commented 8 years ago

I'm thinking create a <rg-moment> tag that essentially wraps the majority of the moment API - as far as moment dependency is concerned its fine to depend on a separate library.