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"); $("#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() function render_readme()
{ {
<?php <?php
@ -247,7 +216,12 @@ function render_readme()
// if the readme file name ends with '.wiki', perform markdown formatting // if the readme file name ends with '.wiki', perform markdown formatting
elseif (strlen($readme_text) > 0 && substr_compare($readme_file, '.md', -3) === 0): 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(); prettyPrint();
<?php endif; ?> <?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 ( creole_render_wiki_with_input_text (
input_text, input_text,
"file_home_new_description_preview", "file_home_new_description_preview",
"<?php print site_url()?>/wiki/show/<?php print $project->id?>/", "<?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 (); prettyPrint ();
@ -113,7 +114,7 @@ $(function () {
$("#file_home_new_description_tabs").tabs (); $("#file_home_new_description_tabs").tabs ();
$("#file_home_new_description_tabs").bind ('tabsshow', function (event, ui) { $("#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 ( $('#file_home_new_form_div').dialog (

View File

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

View File

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

View File

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

View File

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

View File

@ -24,22 +24,23 @@
<script type="text/javascript"> <script type="text/javascript">
function render_wiki(input_text) function preview_site_text(input_text)
{ {
creole_render_wiki_with_input_text ( creole_render_wiki_with_input_text (
input_text, input_text,
"site_edit_mainarea_text_preview", "site_edit_text_preview",
"<?php print site_url()?>/site/wiki/", "<?php print site_url()?>/site/wiki/",
"<?php print site_url()?>/site/image/" "<?php print site_url()?>/site/image/",
true // raw
); );
prettyPrint (); prettyPrint ();
} }
$(function () { $(function () {
$("#site_edit_mainarea_text_preview_button").button().click( $("#site_edit_text_preview_button").button().click(
function () { 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'> <div class='form_input_label'>
<?php print form_label($this->lang->line('Text').': ', 'site_text')?> <?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')?> <?php print form_error('site_text')?>
</div> </div>
<div class='form_input_field'> <div class='form_input_field'>
<?php print form_textarea('site_text', <?php print form_textarea('site_text',
set_value('site_text', $site->text), set_value('site_text', $site->text),
'class="text" id="site_edit_mainarea_text"') 'class="text" id="site_edit_text"')
?> ?>
</div> </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'); ?> <?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/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/prettify.js')?>"></script>
<script type="text/javascript" src="<?php print base_url_make('/js/prettify/lang-css.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"); var editor_container = $("#wiki_edit_result");
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"); if (previewing_text)
var files = $("#wiki_edit_files"); {
var footer = $("#codepot_footer"); editor_container.height('auto');
}
else
{
var editor = $("#wiki_edit_text_area");
var titleband = $("wiki_edit_titleband");
var footer = $("#codepot_footer");
var ioff = titleband.offset(); editor_container.height(0);
var foff = footer.offset(); 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); function preview_text (input_text)
editor.innerWidth (titleband.innerWidth()); {
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 = []; var populated_file_obj_for_adding = [];
@ -102,7 +159,7 @@ function populate_selected_files_for_adding ()
} }
populated_file_max_for_adding = f_no; populated_file_max_for_adding = f_no;
resize_editor (); resize_text_editor ();
} }
function cancel_out_add_file (no) function cancel_out_add_file (no)
@ -110,7 +167,7 @@ function cancel_out_add_file (no)
$('#wiki_edit_add_file_row_' + no).remove (); $('#wiki_edit_add_file_row_' + no).remove ();
populated_file_obj_for_adding[no] = null; populated_file_obj_for_adding[no] = null;
resize_editor (); resize_text_editor ();
} }
function kill_file (no) 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({ $('#wiki_edit_files').accordion({
collapsible: true, collapsible: true,
heightStyle: "content", heightStyle: "content",
activate: function() { resize_editor(); } activate: function() { resize_text_editor(); }
}); });
$('#wiki_edit_add_files_button').button().click (function () { $('#wiki_edit_add_files_button').button().click (function () {
@ -234,7 +291,7 @@ $(function () {
<?php endif; ?> <?php endif; ?>
$("#wiki_edit_preview_button").button().click (function() { $("#wiki_edit_preview_button").button().click (function() {
// TODO: preview_text ($('#wiki_edit_text_area').val());
return false; return false;
}); });
$("#wiki_edit_save_button").button().click (function() { $("#wiki_edit_save_button").button().click (function() {
@ -351,8 +408,8 @@ $(function () {
// return null; // this line caused firefox to show the default message. // return null; // this line caused firefox to show the default message.
}); });
$(window).resize(resize_editor); $(window).resize(resize_text_editor);
resize_editor (); resize_text_editor ();
}); });
</script> </script>
@ -444,10 +501,8 @@ $this->load->view (
</div> </div>
</div> </div>
<div id="wiki_edit_toolbar">
</div>
<div id="wiki_edit_result" class="codepot-relative-container-view"> <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> <textarea id='wiki_edit_text_area' style='resize: none;'></textarea>
</div> <!-- wiki_edit_result --> </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() function render_wiki()
{ {
var column_count = '<?php print $wiki->columns ?>'; var column_count = '<?php print $wiki->columns ?>';
@ -108,7 +77,12 @@ function render_wiki()
} }
<?php if ($wiki->doctype == 'M'): ?> <?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: ?> <?php else: ?>
creole_render_wiki ( creole_render_wiki (
"wiki_show_wiki_text", "wiki_show_wiki_text",

View File

@ -403,6 +403,8 @@ pre, code, tt {
font-size: inherit; font-size: inherit;
border: 0 none; border: 0 none;
padding: 0.2em 0.2em 0.2em 0.2em; padding: 0.2em 0.2em 0.2em 0.2em;
width: 100%;
} }
.content .mainarea .form_input_label { .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; 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; 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; border: none !important;
background: none !important; background: none !important;
padding: 0em !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; padding: 0em !important;
} }
@ -77,33 +82,3 @@
border-bottom: 1px solid #fbd850 !important; 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; 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) function decodeEntities(str)
{ {
return str.replace(/&amp;/g, '&'). return str.replace(/&lt;/g, '<').
replace(/&lt;/g, '<').
replace(/&gt;/g, '>'). replace(/&gt;/g, '>').
replace(/&quot;/g, '"'); replace(/&quot;/g, '"').
replace(/&amp;/g, '&'); /* &amp; replacement must be the last */
} }
var input = $(inputid); var output = document.getElementById(outputid);
var output = $(outputid);
var creole = new Parse.Simple.Creole( var creole = new Parse.Simple.Creole(
{ {
forIE: document.all, forIE: document.all,
@ -580,40 +577,19 @@ function creole_render_wiki (inputid, outputid, linkbase, imgbase)
Wikipedia: 'http://en.wikipedia.org/wiki/' Wikipedia: 'http://en.wikipedia.org/wiki/'
},*/ },*/
linkFormat: linkbase, 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 = ''; output.innerHTML = '';
creole.parse (output, xinput); 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); } var input = document.getElementById(inputid);
return creole_render_wiki_with_input_text (input.innerHTML, outputid, linkbase, imgbase, raw);
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);
} }

View File

@ -2508,3 +2508,42 @@ if (typeof module !== 'undefined' && module.exports) {
}).call(this); }).call(this);
//# sourceMappingURL=showdown.js.map //# 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);
}