jst_clock.module in Javascript Timer 6

Embeddable clock widget (optional).

File

widgets/jst_clock.module

<?php

/**
 * @file
 * Embeddable clock widget (optional).
 */
define('DEFAULT_CLOCK_TYPE', '0');

/**
 * Implementation of hook_jstwidget().
 *
 * @returns stdClass
 *   Keys include: ->name, ->theme_function, ->js_name, and ->js_code.
 */
function jst_clock_jstwidget() {
  $ret = new stdClass();
  $ret->name = 'jst_clock';
  $ret->theme_function = 'jst_clock_show';
  $ret->js_name = 'Drupal.jstimer.jst_clock';
  $clock_type = "'" . variable_get('jstimer_clock_type', DEFAULT_CLOCK_TYPE) . "'";
  $ret->js_code = <<<JAVASCRIPT_CODE

/*
 * Clock widget
 */
Drupal.jstimer.jst_clock = function() {
  this.selector = ".jst_clock";
  this.attach = function() {
    \$(this.selector).each(
      function(i) {
        var t = new Drupal.jstimer.jst_clock_item(\$(this));
        Drupal.jstimer.timer_stack[Drupal.jstimer.timer_stack.length] = t;
      }
    );
  }
}

Drupal.jstimer.jst_clock_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 browser doesn't support the html canvas element, default to 12-hour clock.
    if ( !supports_canvas() &&  this.props['clock_type'] == 2 ) {
      this.props['clock_type'] = 0;
    }
  }

  this.update = function() {
    var timenow = new Date();
    var hr = timenow.getHours();
    var min = timenow.getMinutes();
    var sec = timenow.getSeconds();
    if ( this.props['clock_type'] == 0 ) {
      var am_pm = ""
      if ( hr <= 12 ) {
        am_pm = "am";
      } else {
        am_pm = "pm";
        hr = hr - 12;
      }
      this.element.html(hr + ":" + LZ(min) + ":" + LZ(sec) + am_pm);
    } else if ( this.props['clock_type'] == 1 ) {
      this.element.html(hr + ":" + LZ(min) + ":" + LZ(sec));
    } else if ( this.props['clock_type'] == 2 ) {
      if ( this.canvas ) {
        var ctx = this.canvas[0].getContext("2d");

        // save original context
        ctx.save(); // 1

        // clear and set defaults.
        ctx.clearRect(0,0,this.props['size'],this.props['size']);
        ctx.translate((this.props['size']/2),(this.props['size']/2));
        ctx.scale(0.4,0.4);
        ctx.rotate(-Math.PI/2);
        ctx.strokeStyle = "black";
        ctx.fillStyle = "white";
        ctx.lineWidth = 8;
        ctx.lineCap = "round";
        ctx.save(); // 2

        // render hour tick marks
        for (var i=0;i<12;i++){
         ctx.beginPath();
         ctx.rotate(Math.PI/6);
         ctx.moveTo(this.props['size']-20,0);
         ctx.lineTo(this.props['size'],0);
         ctx.stroke();
        }
        ctx.restore();  // 1

        ctx.fillStyle = "black";

        // render hour hand
        ctx.save(); // 3
        var hr_hand_size = 0.4 * this.props['size'];
        ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
        ctx.lineWidth = 14;
        ctx.beginPath();
        ctx.moveTo(-20,0);
        ctx.lineTo(hr_hand_size, 0);
        ctx.stroke();
        ctx.restore();   // 2

        // render minute hand
        var min_hand_size = 0.85 * this.props['size'];
        ctx.save(); // 4
        ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.moveTo(-28,0);
        ctx.lineTo(min_hand_size, 0);
        ctx.stroke();
        ctx.restore();  // 3

        // render second hand
        ctx.save(); // 5
        var sec_hand_size = 0.85 * this.props['size'];
        ctx.rotate(sec * Math.PI/30);
        ctx.strokeStyle = "#D40000";
        ctx.fillStyle = "#D40000";
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.moveTo(-30,0);
        ctx.lineTo(sec_hand_size, 0);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0,0,10,0,Math.PI*2,true);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(sec_hand_size, 0, 10, 0, Math.PI*2, true);
        ctx.stroke();
        ctx.fillStyle = "#555";
        ctx.arc(0,0,3,0,Math.PI*2,true);
        ctx.fill();
        ctx.restore();  // 4

        // render clock face circle
        ctx.save(); // 6
        ctx.beginPath();
        ctx.lineWidth = 14;
        ctx.strokeStyle = '#325FA2';
        ctx.arc(0,0,this.props['size'],0,Math.PI*2,true);
        ctx.stroke();
        ctx.restore(); // 5

        // Days box
        //ctx.save(); // 7
        //ctx.rotate(90 * Math.PI / 180);
        //ctx.fillStyle    = '#FFFFFF';
        //ctx.fillRect(0, this.props['size']/3, 100, 60);
        //ctx.strokeStyle = '#325FA2';
        //ctx.strokeRect(0, this.props['size']/3, 100, 60);
        //ctx.restore(); // 6

        // days text
        //ctx.rotate(90 * Math.PI / 180);
        //ctx.fillStyle    = '#0000FF';
        //ctx.font         = 'courier-new 30px';
        //ctx.fillText  ('Days', 110, (this.props['size']/3)+50);
        ctx.restore();  // 7
      }
    }

    return true;
  }

  // begin constructor
  this.element = ele; // jquery ele
  this.props = {clock_type:{<span class="php-variable">$clock_type</span>}, size:200};
  this.loadProps();

  // add canvas if analog.
  if ( this.props['clock_type'] == 2 ) {
    this.canvas = \$('<canvas class="ct_clock_canvas"><p>Your browser doesn\\'t support canvas.</p></canvas>');
    this.canvas.attr("width",this.props['size']);
    this.canvas.attr("height",this.props['size']);
    this.element.append(this.canvas);
  }


}

function supports_canvas() {
  return !!document.createElement('canvas').getContext;
}


// End of clock widget.

JAVASCRIPT_CODE;
  return $ret;
}

/**
 * Implementation of hook_form_alter().
 * Add the clock widget specific settings to admin screen.
 */
function jst_clock_form_alter(&$form, $form_state, $form_id) {
  switch ($form_id) {

    //change this to form_id of the form you want to alter
    case 'jstimer_admin_settings':
      $form['jst_clock'] = array(
        '#type' => 'fieldset',
        '#title' => t('Clock widget'),
        '#weight' => 1,
      );
      $form['jst_clock']['jstimer_jst_clock_type'] = array(
        '#type' => 'radios',
        '#title' => t('Clock type') . ' (<span class="ct_clock"></span>)',
        '#default_value' => variable_get('jstimer_jst_clock_type', DEFAULT_CLOCK_TYPE),
        '#options' => array(
          0 => t('12-hour plain text'),
          1 => t('24-hour plain text'),
          2 => t('Analog plain'),
        ),
        '#description' => t("The analog clock is experimental and only works on Firefox, Opera, and Safari.  IE will degrade to the 12-hour text clock."),
      );
      $form['buttons']['#weight'] = 2;
      break;
  }
}
function jst_clock_show($widget_args) {
  $output = '<span class="jst_clock">';
  $valid_atts = array(
    'clock_type',
    'size',
  );
  foreach ($valid_atts as $att) {
    if (isset($widget_args[$att])) {
      $output .= '<span style="display:none" class="' . $att . '">' . $widget_args[$att] . '</span>';
    }
  }
  $output .= '</span>';
  return $output;
}

/**
 * Implementation of hook_enable().
 */
function jst_clock_enable() {
  jstimer_build_js_cache();
}

Functions

Name	Description
jst_clock_enable	Implementation of hook_enable().
jst_clock_form_alter	Implementation of hook_form_alter(). Add the clock widget specific settings to admin screen.
jst_clock_jstwidget	Implementation of hook_jstwidget().
jst_clock_show

Constants

Name	Description
DEFAULT_CLOCK_TYPE	@file Embeddable clock widget (optional).