Help me finish building a Countdown Timer Plugin

r0obert

I have managed to incorporate the code into a Vanilla plugin (tested it and its working) but I do have one issue I cannot seem to be able to resolve.

I need uniform behavior across platforms when it comes to the JS Date object.

The time value should be passed between systems to represent the same moment in time.

Here is the code:

jquery.countdown.js

(function() {

  (function($) {
    $.countdown = function(el, options) {
      var getDateData,
        _this = this;
      this.el = el;
      this.$el = $(el);
      this.$el.data("countdown", this);
      this.init = function() {
        _this.options = $.extend({}, $.countdown.defaultOptions, options);
        if (_this.options.refresh) {
          _this.interval = setInterval(function() {
            return _this.render();
          }, _this.options.refresh);
        }
        _this.render();
        return _this;
      };
      getDateData = function(endDate) {
        var dateData, diff;
        endDate = Date.parse($.isPlainObject(_this.options.date) ? _this.options.date : new Date(_this.options.date));
        diff = (endDate - Date.parse(new Date)) / 1000;
        if (diff <= 0) {
          diff = 0;
          if (_this.interval) {
            _this.stop();
          }
          _this.options.onEnd.apply(_this);
        }
        dateData = {
          years: 0,
          days: 0,
          hours: 0,
          min: 0,
          sec: 0,
          millisec: 0
        };
        if (diff >= (365.25 * 86400)) {
          dateData.years = Math.floor(diff / (365.25 * 86400));
          diff -= dateData.years * 365.25 * 86400;
        }
        if (diff >= 86400) {
          dateData.days = Math.floor(diff / 86400);
          diff -= dateData.days * 86400;
        }
        if (diff >= 3600) {
          dateData.hours = Math.floor(diff / 3600);
          diff -= dateData.hours * 3600;
        }
        if (diff >= 60) {
          dateData.min = Math.floor(diff / 60);
          diff -= dateData.min * 60;
        }
        dateData.sec = diff;
        return dateData;
      };
      this.leadingZeros = function(num, length) {
        if (length == null) {
          length = 2;
        }
        num = String(num);
        while (num.length < length) {
          num = "0" + num;
        }
        return num;
      };
      this.update = function(newDate) {
        _this.options.date = newDate;
        return _this;
      };
      this.render = function() {
        _this.options.render.apply(_this, [getDateData(_this.options.date)]);
        return _this;
      };
      this.stop = function() {
        if (_this.interval) {
          clearInterval(_this.interval);
        }
        _this.interval = null;
        return _this;
      };
      this.start = function(refresh) {
        if (refresh == null) {
          refresh = _this.options.refresh || $.countdown.defaultOptions.refresh;
        }
        if (_this.interval) {
          clearInterval(_this.interval);
        }
        _this.render();
        _this.options.refresh = refresh;
        _this.interval = setInterval(function() {
          return _this.render();
        }, _this.options.refresh);
        return _this;
      };
      return this.init();
    };
    $.countdown.defaultOptions = {
      date: "June 7, 2087 15:03:25",
      refresh: 1000,
      onEnd: $.noop,
      render: function(date) {
        return $(this.el).html("" + date.days + " days, " + (this.leadingZeros(date.hours)) + " hours, " + (this.leadingZeros(date.min)) + " min and " + (this.leadingZeros(date.sec)) + " sec");
      }
    };
    $.fn.countdown = function(options) {
      return $.each(this, function(i, el) {
        var $el;
        $el = $(el);
        if (!$el.data('countdown')) {
          return $el.data('countdown', new $.countdown(el, options));
        }
      });
    };
    return void 0;
  })(jQuery);

}).call(this);

default.js

 $(function() {

        var endDate = "June 7, 2087 15:03:25";

        $('.countdown.simple').countdown({ date: endDate });

        $('.countdown.styled').countdown({
          date: endDate,
          render: function(data) {
            $(this.el).html("<div>" + this.leadingZeros(data.days, 3) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>sec</span></div>");
          }
        });

        $('.countdown.callback').countdown({
          date: +(new Date) + 10000,
          render: function(data) {
            $(this.el).text(this.leadingZeros(data.sec, 2) + " sec");
          },
          onEnd: function() {
            $(this.el).addClass('ended');
          }
        }).on("click", function() {
          $(this).removeClass('ended').data('countdown').update(+(new Date) + 10000).start();
        });

      });

I found these articles, but I'm a JS noob:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
https://nulogy.com/articles/dealing-with-timezones-in-javascript#.VDv9RfmSzOA
http://stackoverflow.com/questions/8805613/javascript-countdown-using-absolute-timezone

Anyone willing to help me finish this plugin? Thanks guys!

peregrine

what's wrong with http://vanillaforums.org/addon/963/countdown

r0obert

@peregrine said:
what's wrong with http://vanillaforums.org/addon/963/countdown

It's for comments only, I wanted one to be displayed on the front discussions page and inside vanilla messages. Or is it easier to render the already existing plugin in messages?

peregrine

I put Countdown plugin on the home page. Is that sufficient for you?

r0obert

@peregrine nice! You included it in a Vanilla Message/Pockets/New plugin or hardcoded? Also it it using Localtime or Servertime?

peregrine

I modified the original Countdown plugin, just to display in Content.

Does the original countdown use local time? I think maybe not.

However try this just to see if the time is server time vs. local time. It is totally different then what I posted image of and is not pretty with css.

you can place timer at top with this config.

$Configuration['Modules']['Vanilla']['Content'] = array('CountdownModule');

alot of stuff is hard-coded. but if the local time works, I can fix it up.

you test.

peregrine

peregrine

@r0obert

I had someone test from a different timezone and it reflect the correct local time.

if you want to use this plugin.

you can change time setting via config.php

$Configuration['Plugins']['CountdownTwo']['Time'] = '2014/10/15 22:00:00';

let me know if it works. you can modify css.

if it doesn't work, don't use it

peregrine

also thank you @vrijvlinder for loading on you site for a test, and for @hgtonight for viewing countdown "time" from a different timezone from me, and we both saw different hours as hoped.