function jst_timer_jstwidget in Javascript Timer 8

Same name and namespace in other branches

1. 6 widgets/jst_timer.module \jst_timer_jstwidget()
2. 7 widgets/jst_timer.module \jst_timer_jstwidget()

Implementation of hook_jstwidget().

@returns stdClass Keys include: ->name, ->theme_function, ->js_name, and ->js_code.

File

widgets/jst_timer.module, line 16

Default widget implementation for an up and down timer. This widget does not use hook_ctwidget as it is always included.

Code

function jst_timer_jstwidget() {
  $ret = new stdClass();
  $ret->name = 'jst_timer';
  $ret->label = t('Countdown timer');
  $ret->settings = array(
    'dir' => 'down',
    'format_txt' => '',
  );
  $ret->theme_function = 'jst_timer_show';
  $ret->js_name = 'Drupal.jstimer.jst_timer';
  $timer_formats = jst_timer_get_js_formats();

  // clean php variables for javascript injection
  $timer_complete_message = "'" . jstimer_clean_for_javascript(\Drupal::config('jstimer.settings')
    ->get('jst_timer_complete_message')) . "'";
  $timer_complete_alert_message = "'" . jstimer_clean_for_javascript(\Drupal::config('jstimer.settings')
    ->get('jst_timer_complete_alert_message')) . "'";
  $highlight = "'" . jstimer_clean_for_javascript(\Drupal::config('jstimer.settings')
    ->get('jstimer_highlight')) . "'";
  $highlight_threshold = "'" . jstimer_clean_for_javascript(\Drupal::config('jstimer.settings')
    ->get('jstimer_highlight_threshold')) . "'";
  $highlight_down = "'" . jstimer_clean_for_javascript(\Drupal::config('jstimer.settings')
    ->get('jstimer_highlight_down')) . "'";
  $highlight_up = "'" . jstimer_clean_for_javascript(\Drupal::config('jstimer.settings')
    ->get('jstimer_highlight_up')) . "'";
  $redirect_path = "'" . \Drupal::config('jstimer.settings')
    ->get('jst_timer_redirect_path') . "'";
  $redirect_delay = "'" . \Drupal::config('jstimer.settings')
    ->get('jst_timer_redirect_delay') . "'";
  $ret->js_code = <<<JAVASCRIPT_CODE

/*
 * Timer widget
 */
Drupal.jstimer.formats = {<span class="php-variable">$timer_formats</span>};

Drupal.jstimer.jst_timer = function() {
  this.selector = ".jst_timer";
  this.attach = function() {
    jQuery(this.selector).each(
      function(i) {  // i is the position in the each fieldset
        var t = new Drupal.jstimer.jst_timer_item(jQuery(this));
        if ( t.parse_microformat_success == 1 ) {
          Drupal.jstimer.timer_stack[Drupal.jstimer.timer_stack.length] = t;
        }
      }
    );
  }
}

Drupal.jstimer.jst_timer_item = function(ele) {

  // class methods first so you can use them in the constructor.
  this.loadProps = function() {
    for (var prop in this.props) {
      var prop_selector = "span[class="+prop+"]";
      if ( this.element.children(prop_selector).length > 0 ) {
        this.props[prop] = this.element.children(prop_selector).html();
      }
    }

    if ( String(this.props['format_txt']).match("'") ) {
      this.props['format_txt'] = "<span style=\\"color:red;\\">Format may not contain single quotes(').</span>";
    }

    // format_txt overrides format_num.
    if ( this.props['format_txt'] != "" ) {
      this.outformat = this.props['format_txt'];
    } else {
      if (Drupal.jstimer.formats[this.props['format_num']] != undefined) {
        this.outformat = Drupal.jstimer.formats[this.props['format_num']];
      }
      else {
        this.outformat = Drupal.jstimer.formats[0];
      }
    }

  }

  this.parse_microformat = function() {

    // ajax calls re-run autoattach, make sure the selector is gone.
    if ( this.element.hasClass("jst_timer") ) {
      this.element.removeClass("jst_timer")
    }

    // If there is an interval, always use it.
    if ( this.props['interval'] != "" ) {
      var interval_val = parseInt(this.props['interval']);
      var date = new Date();
      this.to_date = date;
      this.to_date.setTime(date.getTime() + (interval_val*1000));
    } else {
      if ( this.props['datetime'] == "" ) {
        this.parse_microformat_success = 0;
        throw new Object({name:"NoDate",message:"Javascript Timer: Span with class=datetime not found within the timer span."});
      }
      var date = new Date();
      try {
        date.jstimer_set_iso8601_date(this.props['datetime']);
      }
      catch(e) {
        throw(e);
      }
      this.to_date = date;
      if ( this.props['current_server_time'] != "" ) {
        // this is a feedback time from the server to correct for small server-client time differences.
        // not used for normal block and node timers.
        var date_server = new Date();
        date_server.jstimer_set_iso8601_date(this.props['current_server_time']);
        var date_client = new Date();
        var adj = date_client.getTime() - date_server.getTime();
        // adjust target date to clients domain
        this.to_date.setTime(this.to_date.getTime() + adj);
      }
    }

    this.parse_microformat_success = 1;
  }



  this.update = function() {
    var now_date = new Date();
    var duration = this.get_duration(now_date, this.to_date);

    // If counting down and timer is completed, set timer complete statement, check for redirect, and end.
    if ( this.props['dir'] == "down" && duration.sign > 0 ) {

      // Set the timer complete statement.
      if (this.props['timer_complete_message'] != '') {
        this.element.html(this.props['timer_complete_message'] + '');
        // Clear message as we don't need to reset it again.
        this.props['timer_complete_message'] = '';
      }

      // If there is a complete message, alert it.
      if (this.props['tc_msg'] != '') {
        alert(this.props['tc_msg']);
        // Clear alert msg as we don't need to alert it again.
        this.props['tc_msg'] = '';
      }

      // If there is a redirect url and delay has been met, redirect.
      if (this.props['tc_redir'] != '' && (duration.diff >= this.props['tc_redir_delay'])) {
        if (this.props['tc_redir'].match('<reload>')) {
            window.location.reload(true);
        }
        else {
            window.location = this.props['tc_redir'];
        }
        return false;
      }
      // Timer is completed
      return true;
    }


    var outhtml = new String(this.outformat);

    // try to handle counts with units first, use a try block because Drupal.formatPlural breaks javascript sometimes
    try {
      outhtml = outhtml.replace(/%years% years/,  Drupal.formatPlural(duration.years, "1 year", "@count years"));
      outhtml = outhtml.replace(/%ydays% days/,   Drupal.formatPlural(duration.days, "1 day", "@count days"));
      outhtml = outhtml.replace(/%days% days/,    Drupal.formatPlural(duration.tot_days, "1 day", "@count days"));
      outhtml = outhtml.replace(/%hours% hours/,  Drupal.formatPlural(duration.hours, "1 hour", "@count hours"));
      outhtml = outhtml.replace(/%mins% minutes/, Drupal.formatPlural(duration.minutes, "1 minute", "@count minutes"));
      outhtml = outhtml.replace(/%secs% seconds/, Drupal.formatPlural(duration.seconds, "1 second", "@count seconds"));
      outhtml = outhtml.replace(/%months% months/, Drupal.formatPlural(duration.months, "1 month", "@count months"));
      outhtml = outhtml.replace(/%tot_months% months/, Drupal.formatPlural(duration.tot_months, "1 month", "@count months"));
      outhtml = outhtml.replace(/%tot_hours% hours/, Drupal.formatPlural(duration.tot_months, "1 hour", "@count hours"));
      outhtml = outhtml.replace(/%tot_mins% minutes/, Drupal.formatPlural(duration.tot_mins, "1 minute", "@count minutes"));
      outhtml = outhtml.replace(/%tot_hours% seconds/, Drupal.formatPlural(duration.tot_secs, "1 second", "@count seconds"));
    }
    catch(e){
      // suppress errors
    }

    //handle counts without units
    outhtml = outhtml.replace(/%years%/, duration.years);
    outhtml = outhtml.replace(/%ydays%/, duration.days);
    outhtml = outhtml.replace(/%days%/, duration.tot_days);
    outhtml = outhtml.replace(/%hours%/, LZ(duration.hours));
    outhtml = outhtml.replace(/%mins%/, LZ(duration.minutes));
    outhtml = outhtml.replace(/%secs%/, LZ(duration.seconds));
    outhtml = outhtml.replace(/%hours_nopad%/, duration.hours);
    outhtml = outhtml.replace(/%mins_nopad%/, duration.minutes);
    outhtml = outhtml.replace(/%secs_nopad%/, duration.seconds);
    outhtml = outhtml.replace(/%sign%/, duration.sign < 0 ? '-' : '+');
    outhtml = outhtml.replace(/%months%/, duration.months);
    outhtml = outhtml.replace(/%tot_months%/, duration.tot_months);
    outhtml = outhtml.replace(/%tot_hours%/, duration.tot_hours);
    outhtml = outhtml.replace(/%tot_mins%/, duration.tot_mins);
    outhtml = outhtml.replace(/%tot_secs%/, duration.tot_secs);

    // Proximity styling
    if (this.props['dir'] == "down"
        && {<span class="php-variable">$highlight_down</span>} =="1"
        && (duration.diff <= (this.props['threshold'] * 60))
        && this.props['highlight'][0]) {
      this.element.html('<span ' + this.props['highlight'][0] + '=' + this.props['highlight'][1] + '>' +  outhtml + '</span>');
    }
    else if (this.props['dir'] == "up"
        && {<span class="php-variable">$highlight_up</span>} =="1"
        && (duration.sign > 0 || (duration.diff <= (this.props['threshold'] * 60)))
        && this.props['highlight'][0]) {
      this.element.html('<span ' + this.props['highlight'][0] + '=' + this.props['highlight'][1] + '>' +  outhtml + '</span>');
    }
    // No proximity styling
    else {
      this.element.html(outhtml);
    }

    return true;
  }

  this.get_duration = function(now, target) {
    var dur = {diff:0, sign:0, years:0, months:0, days:0, hours:0, minutes:0, seconds:0, tot_months:0, tot_days:0, tot_hours:0, tot_mins:0, tot_secs:0};
    dur.diff = Math.floor((now.getTime() - target.getTime()) / 1000);
    if ( dur.diff < 0 ) {
      dur.sign = -1;
      dur.diff = Math.abs(dur.diff);
    } else {
      dur.sign = 1;
    }

    dur.years = Math.floor(dur.diff / 60 / 60 / 24 / 365.25);

    // Total hours
    dur.tot_hours = Math.floor(dur.diff / 60.0 / 60.0);
    // Total minutes
    dur.tot_mins = Math.floor(dur.diff / 60.0);
    // Total seconds
    dur.tot_secs = Math.floor(dur.diff);

    // Use calendar months, using months based on seconds is problematic.
    if(now.getFullYear() == target.getFullYear()) {
       dur.tot_months = Math.abs(target.getMonth() - now.getMonth());
       dur.months = dur.tot_months;
    } else {
      dur.tot_months = 11 - now.getMonth();
      dur.tot_months += target.getMonth() + 1;
      dur.tot_months += (target.getFullYear() - now.getFullYear() - 1) * 12;
      dur.months = dur.tot_months - (dur.years * 12);
    }

    dur.tot_days = Math.floor(dur.diff / 60 / 60 / 24);
    dur.days = Math.ceil(dur.tot_days - (dur.years * 365.25));
    dur.hours = Math.floor(dur.diff / 60 / 60) - (dur.tot_days * 24);
    dur.minutes = Math.floor(dur.diff / 60) - (dur.hours * 60) - (dur.tot_days * 24 * 60);
    dur.seconds = dur.diff - (dur.minutes * 60) - (dur.hours * 60 * 60) - (dur.tot_days * 24 * 60 * 60);
    return dur;
  }



  // begin constructor
  this.element = ele;

  // Defaults for each timer.
  this.props = {
    datetime: '',
    dir: 'down',
    format_num: 0,
    format_txt: '',
    timer_complete_message: new String({<span class="php-variable">$timer_complete_message</span>}),
    highlight: new String({<span class="php-variable">$highlight</span>}).split(/=/),
    threshold: new Number({<span class="php-variable">$highlight_threshold</span>}),
    tc_redir: new String({<span class="php-variable">$redirect_path</span>}),
    tc_redir_delay: new Number({<span class="php-variable">$redirect_delay</span>}),
    tc_msg: new String({<span class="php-variable">$timer_complete_alert_message</span>}),
    interval: '',
    current_server_time: ''
  };
  this.loadProps();


  /* bootstrap, parse microformat, load object */
  try {
    this.parse_microformat();
  }
  catch(e) {
    alert(e.message);
    alert(jQuery(ele).html());
    this.parse_microformat_success = 0;
    return;
  }

  // replace the static stuff in the format string
  // this only needs to be done once, so here is a good spot.
  this.outformat = this.outformat.replace(/%day%/,   this.to_date.getDate());
  this.outformat = this.outformat.replace(/%month%/, this.to_date.getMonth() + 1);
  this.outformat = this.outformat.replace(/%year%/,  this.to_date.getFullYear());
  this.outformat = this.outformat.replace(/%moy%/,   this.to_date.jstimer_get_moy());
  this.outformat = this.outformat.replace(/%dow%/,   this.to_date.jstimer_get_dow());
}
// End of timer widget.

JAVASCRIPT_CODE;
  return $ret;
}