By nyumbani_yangu on
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\"> </span>
</div>" ;
return $block;
break;
}
}
</pre>
I think this could be a useful module for the entire community...
Comments
Forgot something important
In the page.tpl.php of your theme template, place
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
Javascript Countdown Timer for Drupal6
6.x-2.13 added a REALLY barebones clock. Strictly boring text at this point.
Javascript Countdown Timer
-John
-John
I am had developed clock
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.
So?
Where is Clock Module that must me better than countdown timer ?
Please send me answer to landike@gmail.com
BUT ....for windows users,
BUT ....for windows users, there's already a clock in the right-bottom ....why need one more ..??