added preview to the standard wiki editor

This commit is contained in:
hyung-hwan 2016-01-16 04:31:03 +00:00
parent 8c275c67d5
commit 0398f36f72
13 changed files with 185 additions and 183 deletions

View File

@ -198,37 +198,6 @@ function show_loc_by_file_graph (response)
$("#code_folder_loc_by_file_spin" ).removeClass ("fa-cog fa-spin");
}
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(/&/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_readme()
{
<?php
@ -247,7 +216,12 @@ function render_readme()
// if the readme file name ends with '.wiki', perform markdown formatting
elseif (strlen($readme_text) > 0 && substr_compare($readme_file, '.md', -3) === 0):
?>
showdown_render_wiki ("code_folder_readme_text", "code_folder_readme");
showdown_render_wiki (
"code_folder_readme_text",
"code_folder_readme",
codepot_merge_path("<?php print site_url(); ?>", "/wiki/show/<?php print $project->id?>/"),
codepot_merge_path("<?php print site_url(); ?>", "/wiki/attachment0/<?php print $project->id?>/")
);
prettyPrint();
<?php endif; ?>
}

View File

@ -41,13 +41,14 @@ function show_alert (outputMsg, titleMsg)
});
}
function render_wiki(input_text)
function preview_new_description(input_text)
{
creole_render_wiki_with_input_text (
input_text,
"file_home_new_description_preview",
"<?php print site_url()?>/wiki/show/<?php print $project->id?>/",
"<?php print site_url()?>/wiki/attachment0/<?php print $project->id?>/"
"<?php print site_url()?>/wiki/attachment0/<?php print $project->id?>/",
true // raw
);
prettyPrint ();
@ -113,7 +114,7 @@ $(function () {
$("#file_home_new_description_tabs").tabs ();
$("#file_home_new_description_tabs").bind ('tabsshow', function (event, ui) {
if (ui.index == 2) render_wiki ($("#file_home_new_description").val());
if (ui.index == 2) preview_new_description ($("#file_home_new_description").val());
});
$('#file_home_new_form_div').dialog (

View File

@ -66,7 +66,8 @@ function preview_edit_description (input_text)
input_text,
"file_show_edit_description_preview",
"<?php print $creole_base; ?>",
"<?php print $creole_file_base; ?>/"
"<?php print $creole_file_base; ?>/",
true // raw
);
prettyPrint ();

View File

@ -67,7 +67,8 @@ function preview_new_description(input_text)
input_text,
"issue_home_new_description_preview",
"<?php print $creole_base; ?>",
"<?php print $creole_file_base; ?>"
"<?php print $creole_file_base; ?>",
true
);
prettyPrint ();

View File

@ -177,7 +177,8 @@ function preview_edit_description (input_text)
input_text,
"issue_show_edit_description_preview",
"<?php print $creole_base; ?>",
"<?php print $creole_file_base; ?>/"
"<?php print $creole_file_base; ?>/",
true // raw
);
prettyPrint ();
@ -1142,7 +1143,8 @@ function preview_issue_change_comment(input_text)
input_text,
"issue_change_comment_preview",
"<?php print $creole_base?>",
"<?php print $creole_file_base?>"
"<?php print $creole_file_base?>",
true
);
prettyPrint ();

View File

@ -23,22 +23,23 @@
<link type="text/css" rel="stylesheet" href="<?php print base_url_make('/css/jquery-ui.css')?>" />
<script type="text/javascript">
function render_wiki(input_text)
function preview_description(input_text)
{
creole_render_wiki_with_input_text (
input_text,
"project_edit_mainarea_description_preview",
"project_edit_description_preview",
"<?php print site_url()?>/wiki/show/<?php print $project->id?>/",
"<?php print site_url()?>/wiki/attachment0/<?php print $project->id?>/"
"<?php print site_url()?>/wiki/attachment0/<?php print $project->id?>/",
true // raw
);
prettyPrint ();
}
$(function() {
$("#project_edit_mainarea_description_preview_button").button().click(
$("#project_edit_description_preview_button").button().click(
function () {
render_wiki ($("#project_edit_mainarea_description").val());
preview_description ($("#project_edit_description").val());
}
);
});
@ -116,7 +117,7 @@ $this->load->view (
<div class='form_input_label'>
<?php print form_label($this->lang->line('Description').': ', 'project_description')?>
<a href='#' id='project_edit_mainarea_description_preview_button'><?php print $this->lang->line('Preview')?></a>
<a href='#' id='project_edit_description_preview_button'><?php print $this->lang->line('Preview')?></a>
<?php print form_error('project_description')?>
</div>
<div class='form_input_field'>
@ -124,14 +125,14 @@ $this->load->view (
$xdata = array (
'name' => 'project_description',
'value' => set_value ('project_description', $project->description),
'id' => 'project_edit_mainarea_description',
'id' => 'project_edit_description',
'rows' => 20,
'cols' => 80
);
print form_textarea ($xdata);
?>
</div>
<div id='project_edit_mainarea_description_preview' class='codepot-styled-text-preview'></div>
<div id='project_edit_description_preview' class='codepot-styled-text-preview'></div>
<div class='form_input_field'>
<?php print form_label($this->lang->line('Commitable').': ', 'project_commitable')?>
@ -161,7 +162,7 @@ $this->load->view (
$xdata = array (
'name' => 'project_members',
'value' => set_value ('project_members', $member_string),
'id' => 'project_edit_mainarea_members',
'id' => 'project_edit_members',
'rows' => 2,
'cols' => 80
);

View File

@ -24,22 +24,23 @@
<script type="text/javascript">
function render_wiki(input_text)
function preview_site_text(input_text)
{
creole_render_wiki_with_input_text (
input_text,
"site_edit_mainarea_text_preview",
"site_edit_text_preview",
"<?php print site_url()?>/site/wiki/",
"<?php print site_url()?>/site/image/"
"<?php print site_url()?>/site/image/",
true // raw
);
prettyPrint ();
}
$(function () {
$("#site_edit_mainarea_text_preview_button").button().click(
$("#site_edit_text_preview_button").button().click(
function () {
render_wiki ($("#site_edit_mainarea_text").val());
preview_site_text ($("#site_edit_text").val());
}
);
});
@ -119,16 +120,16 @@ $this->load->view (
<div class='form_input_label'>
<?php print form_label($this->lang->line('Text').': ', 'site_text')?>
<a href='#' id='site_edit_mainarea_text_preview_button'><?php print $this->lang->line('Preview')?></a>
<a href='#' id='site_edit_text_preview_button'><?php print $this->lang->line('Preview')?></a>
<?php print form_error('site_text')?>
</div>
<div class='form_input_field'>
<?php print form_textarea('site_text',
set_value('site_text', $site->text),
'class="text" id="site_edit_mainarea_text"')
'class="text" id="site_edit_text"')
?>
</div>
<div id='site_edit_mainarea_text_preview' class='codepot-styled-text-preview'></div>
<div id='site_edit_text_preview' class='codepot-styled-text-preview'></div>
<?php $caption = ($mode == 'update')? $this->lang->line('Update'): $this->lang->line('Create'); ?>

View File

@ -10,6 +10,7 @@
<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>
@ -45,23 +46,79 @@ function show_alert (outputMsg, titleMsg)
});
}
function resize_editor()
var previewing_text = false;
function resize_text_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 editor_container = $("#wiki_edit_result");
var titleband = $("#wiki_edit_title_band");
var files = $("#wiki_edit_files");
var footer = $("#codepot_footer");
if (previewing_text)
{
editor_container.height('auto');
}
else
{
var editor = $("#wiki_edit_text_area");
var titleband = $("wiki_edit_titleband");
var footer = $("#codepot_footer");
var ioff = titleband.offset();
var foff = footer.offset();
editor_container.height(0);
var coff = editor_container.offset();
var foff = footer.offset();
ioff.top += titleband.outerHeight() + files.outerHeight() + 10;
var editor_height = foff.top - coff.top - 10;
editor_container.innerHeight (editor_height);
editor.innerHeight (editor_height);
editor.innerWidth (titleband.innerWidth());
}
}
editor.offset (ioff);
editor.innerHeight (foff.top - ioff.top - 5);
editor.innerWidth (titleband.innerWidth());
function preview_text (input_text)
{
if (previewing_text)
{
// switch to editing mode
previewing_text = false;
$("#wiki_edit_text_preview").empty();
$("#wiki_edit_text_area").show();
$("#wiki_edit_text_show").hide();
$("#wiki_edit_preview_button").button("option", "label", "<?php print $this->lang->line('Preview'); ?>");
}
else
{
// switch to preview mode
previewing_text = true;
$("#wiki_edit_text_preview").show();
$("#wiki_edit_text_area").hide();
$("#wiki_edit_preview_button").button("option", "label", "<?php print $this->lang->line('Edit'); ?>");
if ($('#wiki_edit_doctype').val() == 'M')
{
showdown_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/attachment0/<?php print $project->id?>/",
true // raw
);
}
else
{
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/attachment0/<?php print $project->id?>/",
true // raw
);
}
prettyPrint ();
}
resize_text_editor ();
}
var populated_file_obj_for_adding = [];
@ -102,7 +159,7 @@ function populate_selected_files_for_adding ()
}
populated_file_max_for_adding = f_no;
resize_editor ();
resize_text_editor ();
}
function cancel_out_add_file (no)
@ -110,7 +167,7 @@ function cancel_out_add_file (no)
$('#wiki_edit_add_file_row_' + no).remove ();
populated_file_obj_for_adding[no] = null;
resize_editor ();
resize_text_editor ();
}
function kill_file (no)
@ -130,7 +187,7 @@ function kill_file (no)
}
}
resize_editor ();
resize_text_editor ();
}
@ -217,7 +274,7 @@ $(function () {
$('#wiki_edit_files').accordion({
collapsible: true,
heightStyle: "content",
activate: function() { resize_editor(); }
activate: function() { resize_text_editor(); }
});
$('#wiki_edit_add_files_button').button().click (function () {
@ -234,7 +291,7 @@ $(function () {
<?php endif; ?>
$("#wiki_edit_preview_button").button().click (function() {
// TODO:
preview_text ($('#wiki_edit_text_area').val());
return false;
});
$("#wiki_edit_save_button").button().click (function() {
@ -330,7 +387,7 @@ $(function () {
{
show_alert ('<pre>NOT SUPPORTED</pre>', "<?php print $this->lang->line('Error')?>");
}
return false;
});
@ -351,8 +408,8 @@ $(function () {
// return null; // this line caused firefox to show the default message.
});
$(window).resize(resize_editor);
resize_editor ();
$(window).resize(resize_text_editor);
resize_text_editor ();
});
</script>
@ -444,10 +501,8 @@ $this->load->view (
</div>
</div>
<div id="wiki_edit_toolbar">
</div>
<div id="wiki_edit_result" class="codepot-relative-container-view">
<div id='wiki_edit_text_preview' class='codepot-styled-text-view'></div>
<textarea id='wiki_edit_text_area' style='resize: none;'></textarea>
</div> <!-- wiki_edit_result -->

View File

@ -59,37 +59,6 @@ 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 ?>';
@ -108,7 +77,12 @@ function render_wiki()
}
<?php if ($wiki->doctype == 'M'): ?>
showdown_render_wiki ("wiki_show_wiki_text", "wiki_show_wiki");
showdown_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 else: ?>
creole_render_wiki (
"wiki_show_wiki_text",

View File

@ -403,6 +403,8 @@ pre, code, tt {
font-size: inherit;
border: 0 none;
padding: 0.2em 0.2em 0.2em 0.2em;
width: 100%;
}
.content .mainarea .form_input_label {

View File

@ -48,23 +48,28 @@
}
/*-----------------------------------------------
* file home view - new file dialog
* file home/show view - new/edit file dialog
*-----------------------------------------------*/
#file_home_mainarea_new_description_tabs {
#file_home_new_description_tabs,
#file_show_edit_description_tabs {
border: none !important;
}
#file_home_mainarea_new_description_tabs .ui-tabs-panel {
#file_home_new_description_tabs .ui-tabs-panel,
#file_show_edit_description_tabs .ui-tabs-panel {
padding: 0.2em 0em 0em 0em !important;
}
#file_home_mainarea_new_description_tabs .ui-widget-header {
#file_home_new_description_tabs .ui-widget-header,
#file_show_edit_description_tabs .ui-widget-header {
border: none !important;
background: none !important;
padding: 0em !important;
}
#file_home_mainarea_new_description_tabs .ui-tabs-nav {
#file_home_new_description_tabs .ui-tabs-nav,
#file_show_edit_description_tabs .ui-tabs-nav {
padding: 0em !important;
}
@ -77,33 +82,3 @@
border-bottom: 1px solid #fbd850 !important;
}
/*-----------------------------------------------
* file home show - edit file dialog
*-----------------------------------------------*/
#file_show_edit_description_tabs {
border: none !important;
}
#file_show_edit_description_tabs .ui-tabs-panel {
padding: 0.2em 0em 0em 0em !important;
}
#file_show_edit_description_tabs .ui-widget-header {
border: none !important;
background: none !important;
padding: 0em !important;
}
#file_show_edit_description_tabs .ui-tabs-nav {
padding: 0em !important;
}
/* #file_show_edit_description_tabs .ui-tabs-nav li { */
.ui-tabs .ui-tabs-nav li.ui-state-default {
border-bottom: 1px solid #cccccc !important;
}
.ui-tabs .ui-tabs-nav li.ui-state-active {
border-bottom: 1px solid #fbd850 !important;
}

View File

@ -558,20 +558,17 @@ Parse.Simple.Creole.prototype = new Parse.Simple.Base();
Parse.Simple.Creole.prototype.constructor = Parse.Simple.Creole;
function creole_render_wiki (inputid, outputid, linkbase, imgbase)
function creole_render_wiki_with_input_text (input_text, outputid, linkbase, imgbase, raw = false)
{
function $(id) { return document.getElementById(id); }
function decodeEntities(str)
{
return str.replace(/&amp;/g, '&').
replace(/&lt;/g, '<').
return str.replace(/&lt;/g, '<').
replace(/&gt;/g, '>').
replace(/&quot;/g, '"');
replace(/&quot;/g, '"').
replace(/&amp;/g, '&'); /* &amp; replacement must be the last */
}
var input = $(inputid);
var output = $(outputid);
var output = document.getElementById(outputid);
var creole = new Parse.Simple.Creole(
{
forIE: document.all,
@ -580,40 +577,19 @@ function creole_render_wiki (inputid, outputid, linkbase, imgbase)
Wikipedia: 'http://en.wikipedia.org/wiki/'
},*/
linkFormat: linkbase,
imgFormat: imgbase
imgFormat: imgbase
} );
var xinput = decodeEntities(input.innerHTML);
var xinput;
if (raw) xinput = input_text;
else xinput = decodeEntities(input_text);
output.innerHTML = '';
creole.parse (output, xinput);
}
function creole_render_wiki_with_input_text (input_text, outputid, linkbase, imgbase)
function creole_render_wiki (inputid, outputid, linkbase, imgbase, raw = false)
{
function $(id) { return document.getElementById(id); }
function decodeEntities(str)
{
return str.replace(/&amp;/g, '&').
replace(/&lt;/g, '<').
replace(/&gt;/g, '>').
replace(/&quot;/g, '"');
}
//var input = $(inputid);
var output = $(outputid);
var creole = new Parse.Simple.Creole(
{
forIE: document.all,
/*interwiki: {
WikiCreole: 'http://www.wikicreole.org/wiki/',
Wikipedia: 'http://en.wikipedia.org/wiki/'
},*/
linkFormat: linkbase,
imgFormat: imgbase
} );
var xinput = decodeEntities(input_text);
output.innerHTML = '';
creole.parse (output, xinput);
var input = document.getElementById(inputid);
return creole_render_wiki_with_input_text (input.innerHTML, outputid, linkbase, imgbase, raw);
}

View File

@ -2508,3 +2508,42 @@ if (typeof module !== 'undefined' && module.exports) {
}).call(this);
//# sourceMappingURL=showdown.js.map
function showdown_render_wiki_with_input_text (input_text, outputid, linkbase, imgbase, raw = false)
{
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(/&lt;/g, '<').
replace(/&gt;/g, '>').
replace(/&quot;/g, '"').
replace(/&amp;/g, '&');
}
if (raw) xinput = input_text;
else xinput = decodeEntities(input_text);
var output = document.getElementById(outputid);
output.innerHTML = sd.makeHtml(xinput);
}
function showdown_render_wiki (inputid, outputid, linkbase, imgbase, raw = false)
{
var input = document.getElementById(inputid);
return showdown_render_wiki_with_input_text (input.innerHTML, outputid, linkbase, imgbase, raw);
}