Help me finish building a Countdown Timer Plugin

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!

Comments

  • I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • r0obertr0obert
    edited October 2014

    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?

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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    vrijvlinderBleistivtr0obert
  • r0obertr0obert
    edited October 2014

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

  • peregrineperegrine MVP
    edited October 2014

    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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    r0obertmirX
  • I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • @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 :)

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    Bleistivtvrijvlinderhgtonightr0obert
  • 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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

Sign In or Register to comment.