Issue #11826: jQuery-ise stopwatch and add JavaScript translation fra…

…mework This commit furthers the goal of removing inline JavaScript from within the MantisBT codebase. The time tracking stopwatch has been converted to use jQuery removing the need to insert <script> tags outside the <head> element. A new JavaScript translations framework (javascript_translations.php) has been implemented that allows translation of strings for use in scripts. Scripts can now just use the new translations[] array where the keys match those used in the lang_get() function. For now it's necessary to define which strings need to be translated in javascript_translations.php. This is currently a very simple system as we don't have many strings that need translating.
mantisbt · Jun 28, 2010 · 0551d94 · 0551d94
1 parent b77ea9c
commit 0551d94
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 59 deletions.
diff --git a/bug_change_status_page.php b/bug_change_status_page.php
@@ -349,10 +349,10 @@
 <?php if ( access_has_bug_level( config_get( 'time_tracking_edit_threshold' ), $f_bug_id ) ) { ?>
 <tr <?php echo helper_alternate_class() ?>>
 	<th class="category">
-		<?php echo lang_get( 'time_tracking' ) ?> (HH:MM)
+		<?php echo lang_get( 'time_tracking' ) ?>
 	</th>
 	<td>
-		<input type="text" name="time_tracking" size="5" value="0:00" />
+		<input type="text" name="time_tracking" size="5" value="hh:mm" />
 	</td>
 </tr>
 <?php } ?>

diff --git a/bugnote_add_inc.php b/bugnote_add_inc.php
@@ -100,22 +100,15 @@
 <?php if ( access_has_bug_level( config_get( 'time_tracking_edit_threshold' ), $f_bug_id ) ) { ?>
 <tr <?php echo helper_alternate_class() ?>>
 	<th class="category">
-		<?php echo lang_get( 'time_tracking' ) ?> (HH:MM)
+		<?php echo lang_get( 'time_tracking' ) ?>
 	</th>
 	<td>
 		<?php if ( config_get( 'time_tracking_stopwatch' ) && config_get( 'use_javascript' ) ) { ?>
-		<script type="text/javascript">
-			var time_tracking_stopwatch_lang_start = "<?php echo lang_get( 'time_tracking_stopwatch_start' ) ?>";
-			var time_tracking_stopwatch_lang_stop = "<?php echo lang_get( 'time_tracking_stopwatch_stop' ) ?>";
-		</script>
-		<?php
-			html_javascript_link( 'time_tracking_stopwatch.js' );
-		?>
-		<input type="text" name="time_tracking" size="5" value="00:00" />
-		<input type="button" name="time_tracking_ssbutton" value="<?php echo lang_get( 'time_tracking_stopwatch_start' ) ?>" onclick="time_tracking_swstartstop()" />
-		<input type="button" name="time_tracking_reset" value="<?php echo lang_get( 'time_tracking_stopwatch_reset' ) ?>" onclick="time_tracking_swreset()" />
+		<input type="text" name="time_tracking" class="stopwatch_time" size="8" value="hh:mm:ss" />
+		<input type="button" name="time_tracking_toggle" class="stopwatch_toggle" value="<?php echo lang_get( 'time_tracking_stopwatch_start' ) ?>" />
+		<input type="button" name="time_tracking_reset" class="stopwatch_reset" value="<?php echo lang_get( 'time_tracking_stopwatch_reset' ) ?>" />
 		<?php } else { ?>
-		<input type="text" name="time_tracking" size="5" value="00:00" />
+		<input type="text" name="time_tracking" size="5" value="hh:mm" />
 		<?php } ?>
 	</td>
 </tr>

diff --git a/core/html_api.php b/core/html_api.php
@@ -407,7 +407,7 @@ function html_meta_redirect( $p_url, $p_time = null, $p_sanitize = true ) {
  */
 function html_head_javascript() {
 	if( ON == config_get( 'use_javascript' ) ) {
-		echo '<script type="text/javascript">var loading_lang = "' . lang_get( 'loading' ) . '";</script>';
+		echo '<script type="text/javascript" src="' . helper_mantis_url( 'javascript_translations.php' ) . '"></script>' . "\n";
 		html_javascript_link( 'ajax.js' );
 		html_javascript_link( 'jquery.js' );
 		html_javascript_link( 'jquery-ui.js' );

diff --git a/javascript/dev/common.js b/javascript/dev/common.js
@@ -76,6 +76,65 @@ $(document).ready( function() {
 			});
 		}
 	});
+
+	$('input.autofocus:first').focus();
+
+	var stopwatch = {
+		timerID: null,
+		elapsedTime: 0,
+		tick: function() {
+			this.elapsedTime += 1000;
+			var seconds = Math.floor(this.elapsedTime / 1000) % 60;
+			var minutes = Math.floor(this.elapsedTime / 60000) % 60;
+			var hours = Math.floor(this.elapsedTime / 3600000) % 60;
+			if (seconds < 10) {
+				seconds = '0' + seconds;
+			}
+			if (minutes < 10) {
+				minutes = '0' + minutes;
+			}
+			if (hours < 10) {
+				hours = '0' + hours;
+			}
+			$('input[type=text].stopwatch_time').attr('value', hours + ':' + minutes + ':' + seconds);
+			this.start();
+		},
+		reset: function() {
+			this.stop();
+			this.elapsedTime = 0;
+			$('input[type=text].stopwatch_time').attr('value', '00:00:00');
+		},
+		start: function() {
+			this.stop();
+			var self = this;
+			this.timerID = window.setTimeout(function() {
+				self.tick();
+			}, 1000);
+		},
+		stop: function() {
+			if (typeof this.timerID == 'number') {
+				window.clearTimeout(this.timerID);
+				delete this.timerID;
+			}
+		}
+	}
+	$('input[type=button].stopwatch_toggle').click(function() {
+		if (stopwatch.elapsedTime == 0) {
+			stopwatch.stop();
+			stopwatch.start();
+			$('input[type=button].stopwatch_toggle').attr('value', translations['time_tracking_stopwatch_stop']);
+		} else if (typeof stopwatch.timerID == 'number') {
+			stopwatch.stop();
+			$('input[type=button].stopwatch_toggle').attr('value', translations['time_tracking_stopwatch_start']);
+		} else {
+			stopwatch.start();
+			$('input[type=button].stopwatch_toggle').attr('value', translations['time_tracking_stopwatch_stop']);
+		}
+	});
+	$('input[type=button].stopwatch_reset').click(function() {
+		stopwatch.reset();
+		$('input[type=button].stopwatch_toggle').attr('value', translations['time_tracking_stopwatch_start']);
+	});
 });
 
 /*

diff --git a/javascript/dev/time_tracking_stopwatch.js b/javascript/dev/time_tracking_stopwatch.js
diff --git a/javascript/min/time_tracking_stopwatch.js b/javascript/min/time_tracking_stopwatch.js
diff --git a/javascript_translations.php b/javascript_translations.php
@@ -0,0 +1,36 @@
+<?php
+# MantisBT - A PHP based bugtracking system
+
+# MantisBT is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 2 of the License, or
+# (at your option) any later version.
+#
+# MantisBT is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with MantisBT.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * @package MantisBT
+ * @copyright Copyright (C) 2000 - 2002  Kenzaburo Ito - kenito@300baud.org
+ * @copyright Copyright (C) 2002 - 2010  MantisBT Team - mantisbt-dev@lists.sourceforge.net
+ * @link http://www.mantisbt.org
+ *
+ * @uses lang_api.php
+ */
+
+require_once( 'core.php' );
+require_api( 'lang_api.php' );
+
+function print_translation( $p_lang_key ) {
+	echo "translations['" . $p_lang_key . "'] = '" . addslashes( lang_get( $p_lang_key ) ) . "';\n";
+}
+
+echo "var translations = new Array();\n";
+print_translation( 'time_tracking_stopwatch_start' );
+print_translation( 'time_tracking_stopwatch_stop' );
+print_translation( 'loading' );