Generalize markdown preview.

This commit is contained in:
takezoe
2013-06-05 15:09:12 +09:00
parent 927ff5f8c1
commit e7ab61685b
4 changed files with 50 additions and 41 deletions

View File

@@ -32,6 +32,17 @@ trait RepositoryViewerControllerBase extends ControllerBase {
}
}
/**
* Returns converted HTML from Markdown for preview.
*/
post("/:owner/:repository/_preview")(readableRepository {
val owner = params("owner")
val repository = params("repository")
val content = params("content")
contentType = "text/html"
view.helpers.markdown(content, getRepository(owner, repository, servletContext).get, true)
})
/**
* Displays the file list of the repository root and the default branch.
*/

View File

@@ -146,14 +146,6 @@ trait WikiControllerBase extends ControllerBase {
}
})
post("/:owner/:repository/wiki/_preview")(writableRepository {
val owner = params("owner")
val repository = params("repository")
val content = params("content")
contentType = "text/html"
view.helpers.markdown(content, getRepository(owner, repository, servletContext).get, true)
})
/**
* Constraint for the wiki page name.
*/

View File

@@ -0,0 +1,30 @@
@(repository: service.RepositoryService.RepositoryInfo, content: String, style: String = "")(implicit context: app.Context)
@import context._
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Write</a></li>
<li><a href="#tab2" data-toggle="tab" id="preview">Preview</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<span id="error-content" class="error"></span>
<textarea id="content" name="content"@if(style.nonEmpty){ style="@style"}>@content</textarea>
</div>
<div class="tab-pane" id="tab2">
<div class="markdown-body" id="preview-area">
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#preview').click(function(){
$('#preview-area').html('<img src="@path/assets/common/images/indicator.gif"> Previewing...');
$.post('@path/@repository.owner/@repository.name/_preview', {
content: $('#content').val()
}, function(data){
$('#preview-area').html(data);
});
});
});
</script>

View File

@@ -19,40 +19,16 @@
</li>
</ul>
<form action="@path/@repository.owner/@repository.name/wiki/@if(pageName == ""){_new} else {_edit}" method="POST" validate="true">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Edit</a></li>
<li><a href="#tab2" data-toggle="tab" id="preview">Preview</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<span id="error-pageName" class="error-message"></span>
<span id="error-pageName" class="error"></span>
<input type="text" name="pageName" value="@pageName" style="width: 900px; font-weight: bold;" placeholder="Input a page name."/>
<span id="error-content" class="error-message"></span>
<textarea id="content" name="content" style="width: 900px; height: 400px;">@page.map(_.content)</textarea>
@html.preview(repository, page.map(_.content).getOrElse(""), "width: 900px; height: 400px;")
<input type="text" name="message" value="" style="width: 900px;" placeholder="Write a small message here explaining this change. (Optional)"/>
<input type="hidden" name="currentPageName" value="@pageName"/>
<input type="submit" value="Save" class="btn btn-primary">
</div>
<div class="tab-pane" id="tab2">
<div class="markdown-body" id="preview-area">
</div>
</div>
</div>
</div>
</form>
}
<script>
$(function(){
$('#preview').click(function(){
$('#preview-area').html('<img src="@path/assets/common/images/indicator.gif"> Previewing...');
$.post('@path/@repository.owner/@repository.name/wiki/_preview', {
content: $('#content').val()
}, function(data){
$('#preview-area').html(data);
});
});
$('#delete').click(function(){
return confirm('Are you sure you want to delete this page?');
});