enhanced the standard wiki edit view

This commit is contained in:
hyung-hwan 2016-01-15 18:36:21 +00:00
parent 83eb524e5b
commit 093500d58d
5 changed files with 404 additions and 140 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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 ();
}

View File

@ -13,6 +13,7 @@ body {
}
textarea {
font-size: inherit;
font-family: "DejaVu Sans Mono", consolas, monaco, "Andale Mono", monospace;
tab-size: 5;

View File

@ -140,7 +140,3 @@
box-sizing: border-box !important;
}
#wiki_edit_text_editor pre {
white-space: pre-wrap !important;
}