From 9bf495ad9d29899d1882142a8519c923c35060a0 Mon Sep 17 00:00:00 2001
From: Eike Foken <kontakt@eikefoken.de>
Date: Wed, 14 Sep 2011 23:02:38 +0200
Subject: [PATCH] Implement popup boxes to change titles

---
 application/controllers/ajax.php         |  10 +
 application/views/experiments/detail.php |  46 ++++
 application/views/header.php             |   1 +
 assets/css/style.css                     | 150 ++++++++++
 assets/js/jquery.alerts.js               | 333 +++++++++++++++++++++++
 assets/js/scattport.js                   |  13 -
 6 files changed, 540 insertions(+), 13 deletions(-)
 create mode 100644 assets/js/jquery.alerts.js

diff --git a/application/controllers/ajax.php b/application/controllers/ajax.php
index bcd23d2..20171cd 100644
--- a/application/controllers/ajax.php
+++ b/application/controllers/ajax.php
@@ -83,6 +83,16 @@ class Ajax extends CI_Controller {
 		$this->output->set_output(auto_typography($data['description']));
 	}
 
+	/**
+	 *
+	 * @param string $experimentId
+	 */
+	public function rename_experiment($experimentId) {
+		$this->load->model('experiment');
+		$this->experiment->update(array('name' => $this->input->post('title')), $experimentId);
+		$this->output->set_output(site_url('experiments/detail/' . $experimentId));
+	}
+
 	/**
 	 * Sorts a programs parameters.
 	 */
diff --git a/application/views/experiments/detail.php b/application/views/experiments/detail.php
index fdda633..2db80d2 100644
--- a/application/views/experiments/detail.php
+++ b/application/views/experiments/detail.php
@@ -26,6 +26,52 @@
 ?>
 			<a href="<?=site_url('experiments/copy/' . $experiment['id']);?>" class="button left copy"><?=_('Copy experiment');?>
 			</a><a href="javascript:deleteConfirm('<?=site_url('experiments/delete/' . $experiment['id']);?>');" class="button right delete"><?=_('Delete experiment');?></a>
+			<a href="javascript:changeTitle('<?=$experiment['name'];?>', '<?=site_url('ajax/rename_experiment/' . $experiment['id']);?>');" class="button rename"><?=_('Change title');?></a>
+		</p>
+	</div>
+
+	<div class="box">
+		<h3><?=_('Configuration');?></h3>
+		<p>
+			<div>
+				<table>
+					<thead>
+						<tr>
+							<th scope="col" width="40%"><?=_('Parameter');?></th>
+							<th scope="col" width="40%"><?=_('Value');?></th>
+							<th scope="col"><?=_('Unit');?></th>
+						</tr>
+					</thead>
+					<tbody>
+<?php
+	foreach ($parameters as $param):
+?>
+						<tr>
+							<td width="40%"><?=$param['readable'];?></td>
+							<td width="41%">
+								<input type="text" name="param-<?=$param['parameter_id'];?>" class="long text" value="<?=(!empty($_POST['param-' . $param['parameter_id']]) ? $this->input->post('param-' . $param['parameter_id']) : $param['value']);?>" />
+<?php
+	if (!empty($param['description'])):
+?>
+								<span class="form_info">
+									<a href="<?=site_url('ajax/parameter_help/' . $param['parameter_id']);?>" name="<?=_('Description');?>" id="<?=$param['parameter_id'];?>" class="jtip">&nbsp;</a>
+								</span>
+<?php
+	endif;
+?>
+								<?=form_error('params');?>
+							</td>
+							<td><?=$param['unit'];?></td>
+						</tr>
+<?php
+	endforeach;
+?>
+					</tbody>
+				</table>
+			</div>
+		</p>
+		<p>
+			<a href="javascript:void(0);" class="button save"><?=_('Save changes');?></a>
 		</p>
 	</div>
 
diff --git a/application/views/header.php b/application/views/header.php
index cab8885..72a1ab7 100644
--- a/application/views/header.php
+++ b/application/views/header.php
@@ -15,6 +15,7 @@
 
 <?=js_asset('jquery.editinplace.js');?>
 <?=js_asset('jquery.tablednd.js');?>
+<?=js_asset('jquery.alerts.js');?>
 
 <?=js_asset('minmax.js');?>
 <?=js_asset('jsc3d.min.js');?>
diff --git a/assets/css/style.css b/assets/css/style.css
index 545e4a9..072a8c5 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -560,6 +560,11 @@ a.job_start {
 	padding-left: 30px;
 }
 
+a.rename {
+	background: url(../images/icons/document-rename.png) 10px center no-repeat #f3f3f3;
+	padding-left: 30px;
+}
+
 a.results {
 	background: url(../images/icons/blue-folder-open-document-text.png) 10px center no-repeat #f3f3f3;
 	padding-left: 30px;
@@ -870,6 +875,151 @@ div.progress_bar strong {
 	cursor: help;
 }
 
+/* Popup windows */
+
+#popup_container {
+	font: 12px Arial, sans-serif;
+	min-width: 300px; /* Dialog will be no smaller than this */
+	max-width: 600px; /* Dialog will wrap after this width */
+	background: #fff;
+	border: solid 1px #ccc;
+	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+	-ms-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+	-o-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+#popup_title {
+	color: #6e6e6e;
+	font-size: 14px;
+	font-weight: bold;
+	text-align: center;
+	line-height: 1.75em;
+	text-shadow: 0 1px 0 #fff;
+	background: #f3f3f3;
+	background: -webkit-gradient(
+		linear,
+		0% 40%,
+		0% 70%,
+		from(#f5f5f5),
+		to(#f1f1f1)
+	);
+	background: -webkit-linear-gradient(
+		0 40% 270deg,
+		#f5f5f5,
+		#f1f1f1,
+		#f1f1f1 100%
+	);
+	background: -moz-linear-gradient(
+		0 40% 270deg,
+		#f5f5f5,
+		#f1f1f1,
+		#f1f1f1 100%
+	);
+	background: -ms-linear-gradient(
+		0 40% 270deg,
+		#f5f5f5,
+		#f1f1f1,
+		#f1f1f1 100%
+	);
+	background: -o-linear-gradient(
+		0 40% 270deg,
+		#f5f5f5,
+		#f1f1f1,
+		#f1f1f1 100%
+	);
+	border-bottom: solid 1px #ccc;
+	cursor: default;
+	padding: 0;
+	margin: 0;
+}
+
+#popup_content {
+	background: url('../images/icons-big/information.png') 16px 16px no-repeat;
+	padding: 1em 1.75em;
+	margin: 0;
+}
+
+#popup_content.alert {
+	background-image: url('../images/icons-big/information.png');
+}
+
+#popup_content.confirm {
+	background-image: url('../images/icons-big/exclamation.png');
+}
+
+#popup_content.prompt {
+	background-image: none;
+}
+
+#popup_message {
+	padding-left: 48px;
+}
+
+#popup_content.prompt > div {
+	padding-left: 0;
+}
+
+#popup_panel {
+	text-align: center;
+	margin: 1em 0 0 1em;
+}
+
+#popup_prompt {
+	margin: .5em 0;
+}
+
+#popup_panel input {
+	cursor: pointer;
+	color: #6e6e6e;
+	font: bold 12px Helvetica, Arial, sans-serif;
+	padding: 7px 12px;
+	position: relative;
+	display: inline-block;
+	text-shadow: 0 1px 0 #fff;
+	-webkit-transition: border-color .218s;
+	-moz-transition: border .218s;
+	-ms-transition: border-color .218s;
+	-o-transition: border-color .218s;
+	transition: border-color .218s;
+	background-color: #f3f3f3;
+	border: solid 1px #dcdcdc;
+	-webkit-border-radius: 2px;
+	-moz-border-radius: 2px;
+	-ms-border-radius: 2px;
+	-o-border-radius: 2px;
+	border-radius: 2px;
+	margin-right: 10px;
+}
+
+#popup_panel input:hover {
+	color: #333;
+	border-color: #999;
+	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+	-ms-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+	-o-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+#popup_panel input:active {
+	color: #000;
+	border-color: #444;
+}
+
+#popup_ok {
+	background: url(../images/icons/tick.png) 10px center no-repeat;
+	padding-left: 30px !important;
+}
+
+#popup_cancel {
+	background: url(../images/icons/slash.png) 10px center no-repeat;
+	padding-left: 30px !important;
+}
+
+/* Dashboard */
+
 #dashboard a.button {
 	text-align: center;
 }
diff --git a/assets/js/jquery.alerts.js b/assets/js/jquery.alerts.js
new file mode 100644
index 0000000..57b48dd
--- /dev/null
+++ b/assets/js/jquery.alerts.js
@@ -0,0 +1,333 @@
+/*
+ * jQuery Alert Dialogs Plugin
+ *
+ * Version 1.1
+ *
+ * Cory S.N. LaViska
+ * A Beautiful Site (http://abeautifulsite.net/)
+ * 14 May 2009
+ *
+ * Visit http://abeautifulsite.net/notebook/87 for more information
+ *
+ * Usage:
+ * 		jAlert(message, [title, callback])
+ * 		jConfirm(message, [title, callback])
+ * 		jPrompt(message, [value, title, callback])
+ *
+ * License:
+ *
+ * This plugin is dual-licensed under the GNU General Public License and the MIT License and
+ * is copyright 2008 A Beautiful Site, LLC.
+ */
+(function($) {
+
+	$.alerts = {
+		/**
+		 * Vertical offset (in pixels) of the dialog from center screen.
+		 */
+		verticalOffset: -75,
+
+		/**
+		 * Horizontal offset (in pixels) of the dialog from center screen.
+		 */
+		horizontalOffset: 0,
+
+		/**
+		 * Re-centers the dialog on window resize.
+		 */
+		repositionOnResize: true,
+
+		/**
+		 * Transparency level of overlay.
+		 */
+		overlayOpacity: .5,
+
+		/**
+		 * Base color of overlay.
+		 */
+		overlayColor: '#fff',
+
+		/**
+		 * Text for the OK button.
+		 */
+		okButton: '&nbsp;OK&nbsp;',
+
+		/**
+		 * Text for the cancel button.
+		 */
+		cancelButton: '&nbsp;Cancel&nbsp;',
+
+		/**
+		 * If specified, this class will be applied to all dialogs.
+		 */
+		dialogClass: null,
+
+		/**
+		 * Shows an alert box.
+		 *
+		 * @param message
+		 * @param title
+		 * @param callback
+		 */
+		alert: function(message, title, callback) {
+			if (title == null) title = 'Alert';
+			$.alerts._show(title, message, null, 'alert', function(result) {
+				if (callback) callback(result);
+			});
+		},
+
+		/**
+		 * Shows a confirmation box.
+		 *
+		 * @param message
+		 * @param title
+		 * @param callback
+		 */
+		confirm: function(message, title, callback) {
+			if (title == null) title = 'Confirmation';
+			$.alerts._show(title, message, null, 'confirm', function(result) {
+				if (callback) callback(result);
+			});
+		},
+
+		/**
+		 * Shows a prompt box.
+		 *
+		 * @param message
+		 * @param value
+		 * @param title
+		 * @param callback
+		 */
+		prompt: function(message, value, title, callback) {
+			if (title == null) title = 'Prompt';
+			$.alerts._show(title, message, value, 'prompt', function(result) {
+				if (callback) callback(result);
+			});
+		},
+
+		/**
+		 * Shows a popup box with the specified options.
+		 *
+		 * @param title
+		 * @param msg
+		 * @param value
+		 * @param type
+		 * @param callback
+		 */
+		_show: function(title, msg, value, type, callback) {
+			$.alerts._hide();
+			$.alerts._overlay('show');
+
+			$('BODY').append('<div id="popup_container"><h1 id="popup_title"></h1>'
+					+ '<div id="popup_content"><div id="popup_message"></div></div></div>');
+
+			if ($.alerts.dialogClass) {
+				$('#popup_container').addClass($.alerts.dialogClass);
+			}
+
+			// IE6 Fix
+			var pos = ($.browser.msie && parseInt($.browser.version) <= 6) ? 'absolute' : 'fixed';
+
+			$('#popup_container').css({
+				position: pos,
+				zIndex: 99999,
+				padding: 0,
+				margin: 0
+			});
+
+			$('#popup_title').text(title);
+			$('#popup_content').addClass(type);
+			$('#popup_message').text(msg);
+			$('#popup_message').html($('#popup_message').text().replace(/\n/g, '<br />'));
+
+			$('#popup_container').css({
+				minWidth: $('#popup_container').outerWidth(),
+				maxWidth: $('#popup_container').outerWidth()
+			});
+
+			$.alerts._reposition();
+			$.alerts._maintainPosition(true);
+
+			switch (type) {
+			case 'alert':
+				$('#popup_message').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');
+				$('#popup_ok').click(function() {
+					$.alerts._hide();
+					callback(true);
+				});
+				$('#popup_ok').focus().keypress(function(e) {
+					if (e.keyCode == 13 || e.keyCode == 27) {
+						$('#popup_ok').trigger('click');
+					}
+				});
+				break;
+			case 'confirm':
+				$('#popup_message').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
+				$('#popup_ok').click(function() {
+					$.alerts._hide();
+					if (callback) callback(true);
+				});
+				$('#popup_cancel').click(function() {
+					$.alerts._hide();
+					if (callback) callback(false);
+				});
+				$('#popup_ok').focus();
+				$('#popup_ok, #popup_cancel').keypress(function(e) {
+					if (e.keyCode == 13) $("#popup_ok").trigger('click');
+					if (e.keyCode == 27) $("#popup_cancel").trigger('click');
+				});
+				break;
+			case 'prompt':
+				$('#popup_message').append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
+				$('#popup_prompt').width($('#popup_message').width());
+				$('#popup_ok').click(function() {
+					var val = $('#popup_prompt').val();
+					$.alerts._hide();
+					if (callback) callback(val);
+				});
+				$('#popup_cancel').click(function() {
+					$.alerts._hide();
+					if (callback) callback(null);
+				});
+				$('#popup_prompt, #popup_ok, #popup_cancel').keypress(function(e) {
+					if (e.keyCode == 13) $('#popup_ok').trigger('click');
+					if (e.keyCode == 27) $('#popup_cancel').trigger('click');
+				});
+				if (value) $('#popup_prompt').val(value);
+				$('#popup_prompt').focus().select();
+				break;
+			}
+		},
+
+		/**
+		 * Hides the popup box.
+		 */
+		_hide: function() {
+			$('#popup_container').remove();
+			$.alerts._overlay('hide');
+			$.alerts._maintainPosition(false);
+		},
+
+		/**
+		 * Toggles the overlay.
+		 *
+		 * @param status
+		 */
+		_overlay: function(status) {
+			switch (status) {
+			case 'show':
+				$.alerts._overlay('hide');
+				$('BODY').append('<div id="popup_overlay"></div>');
+				$('#popup_overlay').css({
+					position: 'absolute',
+					zIndex: 99998,
+					top: 0,
+					left: 0,
+					width: '100%',
+					height: $(document).height(),
+					background: $.alerts.overlayColor,
+					opacity: $.alerts.overlayOpacity
+				});
+				break;
+			case 'hide':
+				$('#popup_overlay').remove();
+				break;
+			}
+		},
+
+		/**
+		 * Repositions the popup box on window resize.
+		 */
+		_reposition: function() {
+			var top = (($(window).height() / 2) - ($('#popup_container').outerHeight() / 2)) + $.alerts.verticalOffset;
+			var left = (($(window).width() / 2) - ($('#popup_container').outerWidth() / 2)) + $.alerts.horizontalOffset;
+
+			if (top < 0) {
+				top = 0;
+			}
+			if (left < 0) {
+				left = 0;
+			}
+
+			// IE6 fix
+			if ($.browser.msie && parseInt($.browser.version) <= 6) {
+				top = top + $(window).scrollTop();
+			}
+
+			$('#popup_container').css({
+				top: top + 'px',
+				left: left + 'px'
+			});
+			$('#popup_overlay').height($(document).height());
+		},
+
+		/**
+		 *
+		 * @param status
+		 */
+		_maintainPosition: function(status) {
+			if ($.alerts.repositionOnResize) {
+				switch(status) {
+				case true:
+					$(window).bind('resize', $.alerts._reposition);
+					break;
+				case false:
+					$(window).unbind('resize', $.alerts._reposition);
+					break;
+				}
+			}
+		}
+	};
+
+	/**
+	 * Shortcut function for alert boxes.
+	 */
+	jAlert = function(message, title, callback) {
+		$.alerts.alert(message, title, callback);
+	};
+
+	/**
+	 * Shortcut function for confirm boxes.
+	 */
+	jConfirm = function(message, title, callback) {
+		$.alerts.confirm(message, title, callback);
+	};
+
+	/**
+	 * Asks the user if he is sure to delete an item.
+	 *
+	 * @param url
+	 */
+	deleteConfirm = function(url) {
+		var title = 'Delete Confirmation';
+
+		$.alerts.confirm('Are you sure you want to delete this item?', title, function(answer) {
+			if (answer) {
+				window.location = url;
+			}
+		});
+	};
+
+	/**
+	 * Allows users to change titles.
+	 */
+	changeTitle = function(value, url) {
+		var title = 'Change title';
+
+		$.alerts.prompt('Enter the new title:', value, title, function(text) {
+			if (text) {
+				$.post(url, { title: text }, function(data) {
+					window.location = data;
+				});
+			}
+		});
+	};
+
+	/**
+	 * Shortcut function for prompt boxes.
+	 */
+	jPrompt = function(message, value, title, callback) {
+		$.alerts.prompt(message, value, title, callback);
+	};
+
+})(jQuery);
diff --git a/assets/js/scattport.js b/assets/js/scattport.js
index 7936684..563381b 100644
--- a/assets/js/scattport.js
+++ b/assets/js/scattport.js
@@ -9,19 +9,6 @@ function getNotifications() {
 	});
 }
 
-/**
- * Asks the user if he is sure to delete an item.
- *
- * @param url
- */
-function deleteConfirm(url) {
-	var answer = confirm('Are you sure?');
-
-	if (answer) {
-		window.location = url;
-	}
-}
-
 /**
  * Sets a cookie.
  *