I'm trying to develop a module which will display a clock. The clock is implemented in Javascript by using the client time and updating every second.

I am trying to integrate this into a module which will allow to expose the time whenever required. The idea is probably through the use of a form with hidden fields... but I'm not sure...

Could someone put in some advice?

I've got 3 files:

  • clock.css
  • clock.js
  • clock.module

They respectively look like:

clock.css

<pre>

#clock { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; color: white; 
	background-color: black; border: 2px solid purple; padding: 4px; }

</pre>

clock.js

<pre>




function init ( )
{
  timeDisplay = document.createTextNode ( "" );
  document.getElementById("clock").appendChild ( timeDisplay );
}

function updateClock ( )
{
  var currentTime = new Date ( );

  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( );
  var currentSeconds = currentTime.getSeconds ( );

  // Pad the minutes and seconds with leading zeros, if required
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate
  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  // Convert an hours component of "0" to "12"
  currentHours = ( currentHours == 0 ) ? 12 : currentHours;

  // Compose the string for display
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

  // Update the time display
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
  
  if (document.getElementById("start_text")) {
  	document.getElementById("start_text").nodeValue = currentTimeString;
  }

  
}



</pre>

clock.module

<pre>

<?php
// $Id: nice_menus.module,v 1.9 2006/03/30 09:52:58 jakeg Exp $
/*
  By Jake Gordon (jakeg)
  Module to enable nice navigation menus
  Modifications and help by Simon Rawson.
*/

// Implementation of hook_help()
function clock_help($section) {
  switch ($section) {
    case 'admin/modules#description':
      $output = t('gdf df gdf frdg d  dfg  dfg d gd ');
      break;
    case 'admin/settings/clock':
      $output = t('jhg  jgh ghj gh gh g jgh j');
      break;
  }
  return $output;
}


// Implemention of hook_menu()
function clock_menu($may_cache) {
  if (!$may_cache) {
    drupal_add_js(drupal_get_path('module', 'clock').'/clock.js');
    //theme_add_style(drupal_get_path('module', 'clock').'/clock.css');
     drupal_add_css(drupal_get_path('module', 'clock').'/clock.css');
  }
}




// Implementation of hook_block().
function clock_block($op = 'list', $delta = 0, $edit = array()) {
  global $user;

  switch ($op) {
    case 'list':
      for ($i=1;$i<=variable_get('clock_number', '2');$i++) {
        $blocks[$i]['info'] = variable_get('clock_name_'. $i, 'Clock' . $i) . ' (Clock)';
      }
      return $blocks;
    break;

    case 'configure':
      $form['clock_name_'. $delta] = array(
        '#type' => 'textfield', 
        '#title' => t('Menu Name'), 
        '#default_value' => variable_get('clock_name_'. $delta, 'Nice Menu ' . $delta)
      );
      $form['clock_menu_'. $delta] = array(
        '#type' => 'select', 
        '#title' => t('Source Menu Tree'), 
        '#description' => t('The menu tree from which to show a nice menu.'),
        '#default_value' => variable_get('clock_menu_'. $delta, '1'),
        '#options' => menu_parent_options(0)
      );
      $form['clock_type_'. $delta] = array(
        '#type' => 'select', 
        '#title' => t('Menu Style'), 
        '#description' => t('right: menu items are listed on top of each other and expand to the right <br />left: menu items are listed on top of each other and expand to the left<br />down: menu items are listed side by side and expand down'),
        '#default_value' => variable_get('clock_type_'. $delta, 'right'),
        '#options' => drupal_map_assoc(array('right','left','down'))
      );
      return $form;
    break;

    case 'save':
      variable_set('clock_name_'. $delta, $edit['clock_name_'.$delta]);
      variable_set('clock_menu_'. $delta, $edit['clock_menu_'.$delta]);
      variable_set('clock_type_'. $delta, $edit['clock_type_'.$delta]);
    break;

    case 'view':
    
	$block['content'] = "  <div style=\"clear: both;\"> </div>
			<div style=\"width: 10em; text-align: center; margin: 20px auto;\">
  			<span id=\"clock\">&nbsp;</span>
			</div>"  ; 
      return $block;
    break;
  }
}





</pre>

I think this could be a useful module for the entire community...

Comments

nyumbani_yangu’s picture

In the page.tpl.php of your theme template, place


<body onload="updateClock(); setInterval('updateClock()', 1000 )">

You need this for the first instance of the clock.. I didnt find a nicer way of placing this but I'm open to suggestions..

Awaiting for any comments, ideas...

Ciao

Simplicity is the ultimate sophistication, Leonardo da Vinci

jvandervort’s picture

6.x-2.13 added a REALLY barebones clock. Strictly boring text at this point.

Javascript Countdown Timer

-John

-John

stokito’s picture

I am had developed clock module. My module is more better that your. Please wait one mounth and I will upload this module into repository.

landike’s picture

Where is Clock Module that must me better than countdown timer ?

Please send me answer to landike@gmail.com

mm167’s picture

BUT ....for windows users, there's already a clock in the right-bottom ....why need one more ..??