From 093500d58de27c0f42cb20dee628338e14799f2f Mon Sep 17 00:00:00 2001
From: hyung-hwan <hyunghwan.chung@gmail.com>
Date: Fri, 15 Jan 2016 18:36:21 +0000
Subject: [PATCH] enhanced the standard wiki edit view

---
 codepot/src/codepot/views/wiki_edit.php | 501 +++++++++++++++++-------
 codepot/src/codepot/views/wiki_home.php |   2 +-
 codepot/src/codepot/views/wiki_show.php |  36 ++
 codepot/src/css/common.css              |   1 +
 codepot/src/css/wiki.css                |   4 -
 5 files changed, 404 insertions(+), 140 deletions(-)

diff --git a/codepot/src/codepot/views/wiki_edit.php b/codepot/src/codepot/views/wiki_edit.php
index 4b07cbde..9447e9c0 100644
--- a/codepot/src/codepot/views/wiki_edit.php
+++ b/codepot/src/codepot/views/wiki_edit.php
@@ -24,57 +24,335 @@
 
 <?php
 $hex_wikiname = $this->converter->AsciiToHex ($wiki->name);
+$file_count = count($wiki->attachments);
 ?>
 
 <script type="text/javascript">
 
-function render_wiki(input_text)
+function show_alert (outputMsg, titleMsg) 
 {
-	var column_count = $("#wiki_edit_text_column_count").val();
-	var x_column_count = parseInt (column_count);
-	if (isNaN(x_column_count) || x_column_count < 1) x_column_count = 1;
-	else if (x_column_count > 9) x_column_count = 9; // sync this max value with wiki_show. TODO: put this into codepot.ini
-
-	column_count = x_column_count.toString();
-	$("#wiki_edit_text_column_count").val(column_count);
-
-	$("#wiki_edit_text_preview").css ({
-		"-moz-column-count":    column_count,
-		"-webkit-column-count": column_count,
-		"column-count":         column_count
+	$('#wiki_edit_alert').html(outputMsg).dialog({
+		title: titleMsg,
+		resizable: true,
+		modal: true,
+		width: 'auto',
+		height: 'auto',
+		buttons: {
+			"OK": function () {
+				$(this).dialog("close");
+			}
+		}
 	});
-
-	creole_render_wiki_with_input_text (
-		input_text,
-		"wiki_edit_text_preview", 
-		"<?php print site_url()?>/wiki/show/<?php print $project->id?>/",
-		"<?php print site_url()?>/wiki/attachment/<?php print $project->id?>/<?php print $hex_wikiname?>/"
-	);
-
-	prettyPrint ();
 }
 
-var new_attachment_no = 0;
+function resize_editor()
+{
+	var editor = $("#wiki_edit_text_area");
+	editor.height(0); // to prevent from continuous growing. it seems to affect footer placement when not set to 0.
+
+	var titleband = $("#wiki_edit_title_band");
+	var files = $("#wiki_edit_files");
+	var footer = $("#codepot_footer");
+
+	var ioff = titleband.offset();
+	var foff = footer.offset();
+
+	ioff.top += titleband.outerHeight() + files.outerHeight() + 10;
+
+	editor.offset (ioff);
+	editor.innerHeight (foff.top - ioff.top - 5);
+	editor.innerWidth (titleband.innerWidth());
+}
+
+var populated_file_obj_for_adding = [];
+var populated_file_max_for_adding = 0;
+
+var original_file_name_array = [
+	<?php
+	for ($i = 0; $i < $file_count; $i++)
+	{
+		$f = $wiki->attachments[$i];
+		printf ("%s\t'%s'", (($i == 0)? '': ",\n"), addslashes($f->name));
+	}
+	print "\n";
+	?>
+];
+
+function populate_selected_files_for_adding ()
+{
+	$('#wiki_edit_add_file_list').empty();
+	populated_file_obj_for_adding = [];
+
+	var f = $('#wiki_edit_add_files').get(0);
+	var f_no = 0;
+	for (var n = 0; n < f.files.length; n++)
+	{
+		if (f.files[n] != null) 
+		{
+			$('#wiki_edit_add_file_list').append (
+				codepot_sprintf (
+					'<li id="wiki_edit_add_file_row_%d"><a href="#" id="wiki_edit_add_file_cancel_%d" onClick="cancel_out_add_file(%d); return false;"><i class="fa fa-trash"></i></a> %s</li>', 
+					f_no, f_no, f_no, codepot_htmlspecialchars(f.files[n].name)
+				)
+			);
+
+			populated_file_obj_for_adding[f_no] = f.files[n];
+			f_no++;
+		}
+	}
+
+	populated_file_max_for_adding = f_no;
+	resize_editor ();
+}
+
+function cancel_out_add_file (no)
+{
+	$('#wiki_edit_add_file_row_' + no).remove ();
+	populated_file_obj_for_adding[no] = null;
+
+	resize_editor ();
+}
+
+function kill_file (no)
+{
+	var n = $('#wiki_edit_file_name_' + no);
+	if (n)
+	{
+		if (n.prop('disabled'))
+		{
+			n.css ('text-decoration', '');
+			n.prop ('disabled', false);
+		}
+		else
+		{
+			n.css ('text-decoration', 'line-through');
+			n.prop ('disabled', true);
+		}
+	}
+
+	resize_editor ();
+}
+
+
+function update_original_file_name_array ()
+{
+	$('#wiki_edit_add_file_list').empty();
+
+	for (var i = 0; i < populated_file_max_for_adding; i++)
+	{
+		var f = populated_file_obj_for_adding[i];
+		if (f != null) original_file_name_array.push (f.name);
+	}
+
+	populated_file_obj_for_adding = [];
+	populated_file_max_for_adding = 0;
+	$('#wiki_edit_add_files').empty();
+
+	var f_no = 0;
+	var file_name_array = [];
+	for (var i = 0; i < original_file_name_array.length; i++)
+	{
+		var n = $('#wiki_edit_file_name_' + i);
+		if (n)
+		{
+			if (n.prop('disabled'))
+			{
+				// skip
+			}
+			else
+			{
+				file_name_array.push (original_file_name_array[i]);
+			}
+		}
+	}
+
+	$('#wiki_edit_file_list').empty();
+	original_file_name_array = file_name_array;
+	for (var i = 0; i < original_file_name_array.length; i++)
+	{
+		var anchor = codepot_sprintf ("<a href='%s'>%s</a>", 
+			'<?php print site_url() . "/wiki/attachment/{$project->id}/" ?>' +
+			codepot_string_to_hex(wiki_original_name) + '/' + codepot_string_to_hex(original_file_name_array[i]),
+			codepot_htmlspecialchars(original_file_name_array[i])
+		);
+		$('#wiki_edit_file_list').append (
+			codepot_sprintf (
+				'<li><a href="#" onClick="kill_file(%d); return false;"><i class="fa fa-trash"></i></a><span id="wiki_edit_file_name_%d">%s</span></li>',
+				i, i, anchor
+			)
+		);
+	}
+}
+
+var wiki_text_editor = null;
+var work_in_progress = false;
+var wiki_original_name = '<?php print addslashes($wiki->name); ?>';
+var wiki_new_name = '';
+var wiki_original_text = <?php print codepot_json_encode($wiki->text); ?>;
+
+function show_in_progress_message (outputMsg, titleMsg)
+{
+	if (titleMsg == null || outputMsg == null)
+	{
+		$('#wiki_edit_alert').dialog('close');
+	}
+	else
+	{
+		$('#wiki_edit_alert').html(outputMsg).dialog({
+			title: titleMsg,
+			resizable: false,
+			modal: true,
+			width: 'auto',
+			height: 'auto',
+
+			beforeClose: function() { 
+				// if importing is in progress, prevent dialog closing
+				return !work_in_progress;
+			}
+		});
+	}
+}
 
 $(function () {
-	$('#wiki_edit_more_new_attachment').button().click (
-		function () {
-			var html = [
-				'<li><input type="file" name="wiki_new_attachment_',
-				++new_attachment_no,
-				'" /></li>'
-			].join("");
-			$('#wiki_edit_new_attachment_list').append (html);
-			return false;
-		}
-	);
+	$('#wiki_edit_files').accordion({
+		collapsible: true,
+		heightStyle: "content",
+		activate: function() { resize_editor(); }
+	});
 
-	$("#wiki_edit_text_preview_button").button().click(
-		function () {
-			render_wiki ($("#wiki_edit_text_area").val());
-			return false;
+	$('#wiki_edit_add_files_button').button().click (function () {
+		$('#wiki_edit_add_files').trigger('click');
+		return false;
+	});
+	$('#wiki_edit_add_files').change (function () {
+		populate_selected_files_for_adding ();
+	});
+
+<?php if ($mode == 'update'): ?>
+	$('#wiki_edit_text_area').val (wiki_original_text);
+	$('#wiki_edit_doctype').val ('<?php print $wiki->doctype; ?>');
+<?php endif; ?>
+
+	$("#wiki_edit_preview_button").button().click (function() {
+		// TODO:
+		return false;
+	});
+	$("#wiki_edit_save_button").button().click (function() {
+		if (work_in_progress) return;
+
+		if (!!window.FormData)
+		{
+			// FormData is supported
+			work_in_progress = true;
+			show_in_progress_message ('Saving in progress. Please wait...', 'Saving...');
+
+			wiki_new_name = $('#wiki_edit_name').val();
+			wiki_new_text = $('#wiki_edit_text_area').val();
+
+			var form_data = new FormData();
+
+			var f_no = 0;
+			for (var i = 0; i < populated_file_max_for_adding; i++)
+			{
+				var f = populated_file_obj_for_adding[i];
+				if (f != null)
+				{
+					form_data.append ('wiki_file_' + f_no, f);
+					f_no++;
+				}
+			}
+			form_data.append ('wiki_file_count', f_no);
+
+			f_no = 0;
+			for (var i = 0; i < original_file_name_array.length; i++)
+			{
+				var n = $('#wiki_edit_file_name_' + i);
+				if (n)
+				{
+					if (n.prop('disabled'))
+					{
+						form_data.append ('wiki_kill_file_name_' + f_no, original_file_name_array[i]);
+						f_no++;
+					}
+				}
+			}
+			form_data.append ('wiki_kill_file_count', f_no);
+
+			form_data.append ('wiki_doctype', $('#wiki_edit_doctype').val()); 
+			form_data.append ('wiki_name', wiki_new_name);
+			form_data.append ('wiki_original_name', wiki_original_name);
+			form_data.append ('wiki_text', wiki_new_text);
+
+			$.ajax({
+				url: codepot_merge_path('<?php print site_url() ?>', '<?php print "/wiki/xhr_edit/{$project->id}"; ?>'),
+				type: 'POST',
+				data: form_data,
+				mimeType: 'multipart/form-data',
+				contentType: false,
+				processData: false,
+				cache: false,
+
+				success: function (data, textStatus, jqXHR) { 
+					work_in_progress = false;
+
+					if (data == 'ok') 
+					{
+						var name_changed = (wiki_original_name != wiki_new_name);
+						wiki_original_name = wiki_new_name;
+						wiki_original_text = wiki_new_text;
+						update_original_file_name_array ();
+						show_in_progress_message (null, null);
+						if (name_changed)
+						{
+							// reload the whole page if the name has changed.
+							$(location).attr ('href', codepot_merge_path('<?php print site_url(); ?>', '<?php print "/wiki/update/{$project->id}/"; ?>' + codepot_string_to_hex(wiki_new_name)));
+						}
+					}
+					else
+					{
+						show_in_progress_message (null, null);
+						show_alert ('<pre>' + codepot_htmlspecialchars(data) + '</pre>', "<?php print $this->lang->line('Error')?>");
+					}
+				},
+
+				error: function (jqXHR, textStatus, errorThrown) { 
+					work_in_progress = false;
+					show_in_progress_message (null, null);
+					var errmsg = '';
+					if (errmsg == '' && errorThrown != null) errmsg = errorThrown;
+					if (errmsg == '' && textStatus != null) errmsg = textStatus;
+					if (errmsg == '') errmsg = 'Unknown error';
+					show_alert ('Failed - ' + errmsg, "<?php print $this->lang->line('Error')?>");
+				}
+			});
 		}
-	);
+		else
+		{
+			show_alert ('<pre>NOT SUPPORTED</pre>', "<?php print $this->lang->line('Error')?>");
+		}
+	
+		return false;
+	});
+
+	$("#wiki_edit_exit_button").button().click (function() {
+		if (wiki_original_name == '')
+			$(location).attr ('href', codepot_merge_path('<?php print site_url(); ?>', '<?php print "/wiki/home/{$project->id}"; ?>'));
+		else
+			$(location).attr ('href', codepot_merge_path('<?php print site_url(); ?>', '<?php print "/wiki/show/{$project->id}/"; ?>' + codepot_string_to_hex(wiki_original_name)));
+		return false;
+	});
+
+	$(window).on ("beforeunload", function (e) {
+		var wiki_new_text = $('#wiki_edit_text_area').val();
+		if (wiki_original_text != wiki_new_text) 
+		{
+			return 'Do you want to discard changes?';
+		}
+		// return null;  // this line caused firefox to show the default message.
+	});
+
+	$(window).resize(resize_editor);
+	resize_editor ();
 });
 </script>
 
@@ -112,115 +390,69 @@ $this->load->view (
 
 <div class="mainarea" id="wiki_edit_mainarea">
 
-<?php if ($message != "") print '<div id="wiki_edit_message" class="form_message">'.htmlspecialchars($message).'</div>'; ?>
-
-<div class="form_container">
-<?php print form_open_multipart("wiki/{$mode}/{$project->id}/".$this->converter->AsciiToHex($wiki->name))?>
-
-	<div class='form_input_label'>
-		<?php print form_label($this->lang->line('Name').': ', 'wiki_name')?>
-		<?php print form_error('wiki_name');?>
-	</div>
-	<div class='form_input_field'>
-		<?php 
-			$extra = 'maxlength="80" size="40" id="wiki_edit_name"';
-			//$extra .= ($mode == 'update')? ' readonly="readonly"': ''; 
-		?>
-		<?php print form_input('wiki_name', set_value('wiki_name', $wiki->name), $extra)?>
-		<?php print ($mode == 'update')? form_hidden('wiki_original_name', set_value('wiki_original_name', $wiki->name)): ''?>
+<div class="codepot-title-band" id="wiki_edit_title_band">
+	<div class="title">
+		<select id="wiki_edit_doctype" name="wiki_doctype">
+			<option value="C">WikiCreole</option>
+			<option value="M">Markdown</option>
+		</select>
+		<input type="text" name="wiki_name" value="<?php print addslashes($wiki->name); ?>" maxlength="80" size="40" id="wiki_edit_name" placeholder="<?php print $this->lang->line('Name'); ?>" />
 	</div>
 
-	<div class='form_input_label'>
-		<?php print form_label($this->lang->line('Text').': ', 'wiki_text')?>
-		<a href='#' id='wiki_edit_text_preview_button'><?php print $this->lang->line('Preview')?></a>
-
-		<?php
-			$attrs = array (
-				'name' => 'wiki_columns',
-				'id' => 'wiki_edit_text_column_count',
-				'value' => set_value('wiki_columns', $wiki->columns),
-				'size' => '2',
-				'min' => '1',
-				'max' => '9',
-				'type' => 'number');
-			print form_input ($attrs);
-		?>
-		
-		<?php print $this->lang->line('Columns')?>(1-9)
-
-		<?php print form_error('wiki_text');?>
-	</div>
-	<div class='form_input_field'>
-		<?php
-			$xdata = array (
-				'name' => 'wiki_text',
-				'value' => set_value ('wiki_text', $wiki->text),
-				'id' => 'wiki_edit_text_area',
-				'rows' => 20,
-				'cols' => 80
-			);
-			print form_textarea ($xdata);
-		?>
-	</div>
-	<div id='wiki_edit_text_preview' class='codepot-styled-text-preview'></div>
-
-	<?php if (!empty($wiki->attachments)): ?>
-	<div class='form_input_label'>
-		<?php print form_label($this->lang->line('WIKI_ATTACHMENTS').': ', 'wiki_edit_attachment_list')?> 
-		<?php print form_error('wiki_attachment_list');?>
+	<div class="actions">
+		<a id="wiki_edit_preview_button" href='#'><?php print $this->lang->line('Preview')?></a>
+		<a id="wiki_edit_save_button" href='#'><?php print $this->lang->line('Save')?></a>
+		<a id="wiki_edit_exit_button" href='#'><?php print $this->lang->line('Exit')?></a>
 	</div>
 
-	<div class='form_input_field'>
-		<ul id='wiki_edit_attachment_list'>
-		<?php
-			foreach ($wiki->attachments as $att)
+	<div style='clear: both'></div>
+</div>
+
+<div id='wiki_edit_files' class='collapsible-box'>
+	<div id='wiki_edit_files_header' class='collapsible-box-header'>
+		<?php print $this->lang->line('WIKI_ATTACHMENTS')?>
+		<a href='#' id='wiki_edit_add_files_button'><?php print $this->lang->line('New')?></a>
+	</div>
+	<div id='wiki_edit_files_body'>
+		<input type='file' id='wiki_edit_add_files' name='wiki_add_files' multiple='' autocomplete='off' style='color: transparent; visibility: hidden; display: none;' />
+
+		<ul id='wiki_edit_file_list'>
+		<?php if (!empty($wiki->attachments)): ?>
+			<?php
+			for ($i = 0; $i < $file_count; $i++)
 			{
-				$hexattname = 
-					$this->converter->AsciiToHex($att->name) . 
-					'@' .
-					$this->converter->AsciiToHex($att->encname);
-				$escattname = htmlspecialchars($att->name);
-
+				$att = $wiki->attachments[$i];;
 				print '<li>';
-				print "<input type='checkbox' name='wiki_delete_attachment[]' value='{$hexattname}' title='Check to delete {$escattname}'/>";
-				print $escattname;
+				printf ('<a href="#" onClick="kill_file(%d); return false;"><i class="fa fa-trash"></i></a>', $i);
+
+				//printf (' <span id="wiki_edit_file_name_%d">%s</span>', $i, htmlspecialchars($att->name));
+				$hexattname = $this->converter->AsciiToHex ($att->name);
+				printf (' <span id="wiki_edit_file_name_%d">%s</span>', $i, 
+					anchor (
+						"wiki/attachment/{$project->id}/{$hex_wikiname}/{$hexattname}", 
+						htmlspecialchars($att->name)
+					)
+				);
 				print '</li>';
 			}
-		?>
+			?>
+		<?php endif; ?>
+		</ul>
+
+		<ul id='wiki_edit_add_file_list'>
 		</ul>
 	</div>
-	<?php endif; ?>
+</div>
 
-	<div class='form_input_label'>
-		<?php print form_label($this->lang->line('WIKI_NEW_ATTACHMENTS').': ', 'wiki_edit_new_attachment_list')?> 
-		<a href='#' id='wiki_edit_more_new_attachment'>
-			<?php print $this->lang->line('WIKI_MORE_NEW_ATTACHMENTS')?>
-		</a>
-		<?php print form_error('wiki_edit_new_attachment_list');?>
-	</div>
+<div id="wiki_edit_toolbar">
+</div>
 
-	<div class='form_input_field'>
-	<ul id='wiki_edit_new_attachment_list'>
-	<li>	
-		<input type='file' name='wiki_new_attachment_0' />
-		<!--<input type='checkbox' name='wiki_delete_attachment[]' value='delete'/>Delete-->
-	</li>
-	</ul>
+<div id="wiki_edit_result" class="codepot-relative-container-view">
+	<textarea id='wiki_edit_text_area' style='resize: none;'></textarea>
+</div> <!-- wiki_edit_result -->
 
-	</div>
-	
-	<div>
-		<?php print form_hidden('wiki_projectid', set_value('wiki_projectid', $wiki->projectid))?>
-	</div>
-
-	<div>
-		<?php $caption = ($mode == 'update')? $this->lang->line('Update'): $this->lang->line('Create'); ?>
-		<?php print form_submit('wiki', $caption)?>
-	</div>
-
-<?php print form_close();?>
-</div> <!-- form_container -->
 
+<div id='wiki_edit_alert'></div>
 
 </div> <!-- wiki_edit_mainarea -->
 
@@ -234,7 +466,6 @@ $this->load->view (
 
 <!---------------------------------------------------------------------------->
 
-
 </body>
 
 </html>
diff --git a/codepot/src/codepot/views/wiki_home.php b/codepot/src/codepot/views/wiki_home.php
index 1a8fb13a..15d03d3a 100644
--- a/codepot/src/codepot/views/wiki_home.php
+++ b/codepot/src/codepot/views/wiki_home.php
@@ -96,7 +96,7 @@ $this->load->view (
 	<div class="actions">
 		<?php if (isset($login['id']) && $login['id'] != ''): ?>
 		<a id="wiki_home_new_h_button" href='#'><?php print $this->lang->line('New')?> [H]</a>
-		<a id="wiki_home_new_c_button" href='#'><?php print $this->lang->line('New')?> [WC]</a>
+		<a id="wiki_home_new_c_button" href='#'><?php print $this->lang->line('New')?> [W]</a>
 		<?php endif; ?>
 		<!-- <a id="wiki_home_search_button" href='#'><?php print $this->lang->line('Search')?></a> -->
 	</div>
diff --git a/codepot/src/codepot/views/wiki_show.php b/codepot/src/codepot/views/wiki_show.php
index c46e4569..10291dbf 100644
--- a/codepot/src/codepot/views/wiki_show.php
+++ b/codepot/src/codepot/views/wiki_show.php
@@ -9,6 +9,7 @@
 <link type="text/css" rel="stylesheet" href="<?php print base_url_make('/css/font-awesome.min.css')?>" />
 
 <script type="text/javascript" src="<?php print base_url_make('/js/creole.js')?>"></script>
+<script type="text/javascript" src="<?php print base_url_make('/js/showdown.js')?>"></script>
 
 <script type="text/javascript" src="<?php print base_url_make('/js/prettify/prettify.js')?>"></script>
 <script type="text/javascript" src="<?php print base_url_make('/js/prettify/lang-css.js')?>"></script>
@@ -58,6 +59,37 @@ function show_alert (outputMsg, titleMsg)
 	});
 }
 
+function showdown_render_wiki (inputid, outputid)
+{
+	var sd = new showdown.Converter ({
+		omitExtraWLInCodeBlocks: false,
+		noHeaderId: true,
+		prefixHeaderId: false,
+		parseImgDimensions: true,
+		headerLevelStart: 1,
+		simplifiedAutoLink: false,
+		literalMidWordUnderscores: false,
+		strikethrough: true,
+		tables: true,
+		tablesHeaderId: false,
+		ghCodeBlocks: true,
+		tasklists: true
+	});
+
+	function decodeEntities(str)
+	{
+		return str.replace(/&amp;/g, '&').
+				replace(/&lt;/g, '<').
+				replace(/&gt;/g, '>').
+				replace(/&quot;/g, '"');
+	}
+
+	var input = document.getElementById(inputid);
+	var output = document.getElementById(outputid);
+
+	output.innerHTML = sd.makeHtml(decodeEntities(input.innerHTML));
+}
+
 function render_wiki()
 {
 	var column_count = '<?php print  $wiki->columns ?>';
@@ -75,12 +107,16 @@ function render_wiki()
 		});
 	}
 
+<?php if ($wiki->doctype == 'M'): ?>
+	showdown_render_wiki ("wiki_show_wiki_text", "wiki_show_wiki");
+<?php else: ?>
 	creole_render_wiki (
 		"wiki_show_wiki_text", 
 		"wiki_show_wiki", 
 		"<?php print site_url()?>/wiki/show/<?php print $project->id?>/",
 		"<?php print site_url()?>/wiki/attachment/<?php print $project->id?>/<?php print $hex_wikiname?>/"
 	);
+<?php endif; ?>
 
 	prettyPrint ();
 }
diff --git a/codepot/src/css/common.css b/codepot/src/css/common.css
index 49e89279..c965d705 100644
--- a/codepot/src/css/common.css
+++ b/codepot/src/css/common.css
@@ -13,6 +13,7 @@ body {
 }
 
 textarea {
+	font-size: inherit;
 	font-family: "DejaVu Sans Mono", consolas, monaco, "Andale Mono", monospace;
 
 	tab-size: 5;
diff --git a/codepot/src/css/wiki.css b/codepot/src/css/wiki.css
index b0919a89..7a081aa2 100644
--- a/codepot/src/css/wiki.css
+++ b/codepot/src/css/wiki.css
@@ -140,7 +140,3 @@
 	box-sizing: border-box !important;
 }
 
-#wiki_edit_text_editor pre {
-	white-space: pre-wrap !important;
-}
-