Add Markdown preview for textarea, see #407

This commit is contained in:
Frédéric Guillot 2014-11-20 22:37:10 -05:00
parent 11b6381cc0
commit 2a850757ee
29 changed files with 393 additions and 28 deletions

View File

@ -4,6 +4,7 @@ namespace Controller;
use Model\Project as ProjectModel;
use Model\SubTask;
use Helper;
/**
* Application controller
@ -153,4 +154,22 @@ class App extends Base
)
);
}
/**
* Render Markdown Text and reply with the HTML Code
*
* @access public
*/
public function preview()
{
$payload = $this->request->getJson();
if (empty($payload['text'])) {
$this->response->html('<p>'.t('Nothing to preview...').'</p>');
}
else {
$this->response->html(Helper\markdown($payload['text']));
}
}
}

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
'Daily project summary export for "%s"' => 'Export du résumé quotidien du projet pour « %s »',
'Exports' => 'Exports',
'This export contains the number of tasks per column grouped per day.' => 'Cet export contient le nombre de tâches par colonne groupé par jour.',
'Nothing to preview...' => 'Rien à prévisualiser...',
'Preview' => 'Prévisualiser',
'Write' => 'Écrire',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -599,4 +599,7 @@ return array(
// 'Daily project summary export for "%s"' => '',
// 'Exports' => '',
// 'This export contains the number of tasks per column grouped per day.' => '',
// 'Nothing to preview...' => '',
// 'Preview' => '',
// 'Write' => '',
);

View File

@ -31,7 +31,7 @@ class Acl extends Base
* @var array
*/
private $user_actions = array(
'app' => array('index'),
'app' => array('index', 'preview'),
'board' => array('index', 'show', 'save', 'check', 'changeassignee', 'updateassignee', 'changecategory', 'updatecategory', 'movecolumn', 'edit', 'update', 'add', 'confirm', 'remove'),
'project' => array('index', 'show', 'exporttasks', 'exportdaily', 'share', 'edit', 'update', 'users', 'remove', 'duplicate', 'disable', 'enable', 'activity', 'search', 'tasks', 'create', 'save'),
'user' => array('edit', 'forbidden', 'logout', 'show', 'external', 'unlinkgoogle', 'unlinkgithub', 'sessions', 'removesession', 'last', 'notifications', 'password'),

View File

@ -6,7 +6,24 @@
<?= Helper\form_csrf() ?>
<?= Helper\form_hidden('task_id', $values) ?>
<?= Helper\form_hidden('user_id', $values) ?>
<?= Helper\form_textarea('comment', $values, $errors, array(! isset($skip_cancel) ? 'autofocus' : '', 'required', 'placeholder="'.t('Leave a comment').'"'), 'comment-textarea') ?><br/>
<div class="form-tabs">
<ul class="form-tabs-nav">
<li class="form-tab form-tab-selected">
<i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
</li>
<li class="form-tab">
<a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
</li>
</ul>
<div class="write-area">
<?= Helper\form_textarea('comment', $values, $errors, array(! isset($skip_cancel) ? 'autofocus' : '', 'required', 'placeholder="'.t('Leave a comment').'"'), 'comment-textarea') ?>
</div>
<div class="preview-area">
<div class="markdown"></div>
</div>
</div>
<div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
<div class="form-actions">

View File

@ -7,7 +7,25 @@
<?= Helper\form_csrf() ?>
<?= Helper\form_hidden('id', $values) ?>
<?= Helper\form_hidden('task_id', $values) ?>
<?= Helper\form_textarea('comment', $values, $errors, array('autofocus', 'required', 'placeholder="'.t('Leave a comment').'"'), 'comment-textarea') ?><br/>
<div class="form-tabs">
<ul class="form-tabs-nav">
<li class="form-tab form-tab-selected">
<i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
</li>
<li class="form-tab">
<a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
</li>
</ul>
<div class="write-area">
<?= Helper\form_textarea('comment', $values, $errors, array('autofocus', 'required', 'placeholder="'.t('Leave a comment').'"'), 'comment-textarea') ?>
</div>
<div class="preview-area">
<div class="markdown"></div>
</div>
</div>
<div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
<div class="form-actions">
<input type="submit" value="<?= t('Update') ?>" class="btn btn-blue"/>

View File

@ -12,7 +12,24 @@
<?= Helper\form_text('title', $values, $errors, array('required')) ?><br/>
<?= Helper\form_label(t('Description'), 'description') ?>
<?= Helper\form_textarea('description', $values, $errors) ?><br/>
<div class="form-tabs">
<ul class="form-tabs-nav">
<li class="form-tab form-tab-selected">
<i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
</li>
<li class="form-tab">
<a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
</li>
</ul>
<div class="write-area">
<?= Helper\form_textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"')) ?>
</div>
<div class="preview-area">
<div class="markdown"></div>
</div>
</div>
<div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
</div>

View File

@ -5,9 +5,25 @@
<form method="post" action="?controller=task&amp;action=description&amp;task_id=<?= $task['id'] ?>&amp;ajax=<?= $ajax ?>" autocomplete="off">
<?= Helper\form_csrf() ?>
<?= Helper\form_hidden('id', $values) ?>
<?= Helper\form_textarea('description', $values, $errors, array('autofocus', 'placeholder="'.t('Leave a description').'"'), 'description-textarea') ?><br/>
<div class="form-tabs">
<ul class="form-tabs-nav">
<li class="form-tab form-tab-selected">
<i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
</li>
<li class="form-tab">
<a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
</li>
</ul>
<div class="write-area">
<?= Helper\form_textarea('description', $values, $errors, array('autofocus', 'placeholder="'.t('Leave a description').'"'), 'description-textarea') ?>
</div>
<div class="preview-area">
<div class="markdown"></div>
</div>
</div>
<div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
<div class="form-actions">

View File

@ -14,7 +14,24 @@
<?= Helper\form_text('title', $values, $errors, array('autofocus', 'required'), 'form-input-large') ?><br/>
<?= Helper\form_label(t('Description'), 'description') ?>
<?= Helper\form_textarea('description', $values, $errors) ?><br/>
<div class="form-tabs">
<ul class="form-tabs-nav">
<li class="form-tab form-tab-selected">
<i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
</li>
<li class="form-tab">
<a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
</li>
</ul>
<div class="write-area">
<?= Helper\form_textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"')) ?>
</div>
<div class="preview-area">
<div class="markdown"></div>
</div>
</div>
<div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
<?php if (! isset($duplicate)): ?>

View File

@ -445,7 +445,6 @@ function form_textarea($name, $values = array(), array $errors = array(), array
$html .= implode(' ', $attributes).'>';
$html .= isset($values->$name) ? escape($values->$name) : isset($values[$name]) ? $values[$name] : '';
$html .= '</textarea>';
if (in_array('required', $attributes)) $html .= '<span class="form-required">*</span>';
$html .= error_list($errors, $name);
return $html;

File diff suppressed because one or more lines are too long

View File

@ -49,7 +49,7 @@ input[type="number"] {
textarea {
border: 1px solid #ccc;
width: 400px;
max-width: 95%;
max-width: 99%;
height: 200px;
font-size: 1.0em;
font-family: sans-serif;
@ -140,7 +140,6 @@ input.form-input-large {
.form-column {
float: left;
margin-bottom: 60px;
padding-right: 50px;
}
@ -166,4 +165,48 @@ input.form-input-large {
.form-checkbox-group label {
display: inline;
}
}
/* preview tabs */
.form-tabs {
width: 100%;
max-width: 800px;
}
.form-tabs-nav {
margin-bottom: 8px;
}
.form-tabs-nav li {
margin-left: 0;
display: inline;
}
.form-tab {
margin-right: 20px;
}
.form-tab a {
color: #ccc;
font-weight: bold;
text-decoration: none;
}
.form-tab a:focus,
.form-tab a:hover {
color: #000;
}
.form-tab-selected a {
color: #333;
}
.preview-area {
border: 1px dashed #000;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 5px;
display: none;
overflow: auto;
}

View File

@ -1,5 +1,5 @@
/* responsive design */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
@media only screen and (min-width : 769px) and (max-width : 1024px) {
.hide-tablet {
display: none;
@ -16,6 +16,14 @@
.task-board-title {
font-size: 1.5em;
}
.form-tab {
max-width: 662px;
}
input.form-date ~ div.form-help {
max-width: 150px;
}
}
@media only screen and (max-width : 768px) {
@ -65,4 +73,8 @@
.task-board-title {
font-size: 1.5em;
}
}
.form-tab {
max-width: 404px;
}
}

View File

@ -171,8 +171,8 @@ a.task-board-nobody {
}
.description-textarea {
width: 80%;
max-width: 800px;
width: 99%;
max-width: 99%;
height: 300px;
}
@ -233,4 +233,4 @@ tr td.task-orange,
.task-orange {
background-color: rgb(255, 215, 179);
border-color: rgb(255, 172, 98);
}
}

View File

@ -80,6 +80,54 @@ var Kanboard = (function() {
return true;
},
// Generate Markdown preview
MarkdownPreview: function(e) {
e.preventDefault();
var link = $(this);
var nav = $(this).closest("ul");
var write = $(".write-area");
var preview = $(".preview-area");
var textarea = $("textarea");
var request = $.ajax({
url: "?controller=app&action=preview",
contentType: "application/json",
type: "POST",
processData: false,
dataType: "html",
data: JSON.stringify({
"text": textarea.val()
}),
});
request.done(function(data) {
nav.find("li").removeClass("form-tab-selected");
link.parent().addClass("form-tab-selected");
preview.find(".markdown").html(data)
preview.css("height", textarea.css("height"));
preview.css("width", textarea.css("width"));
write.hide();
preview.show();
});
},
// Show the Markdown textarea
MarkdownWriter: function(e) {
e.preventDefault();
$(this).closest("ul").find("li").removeClass("form-tab-selected")
$(this).parent().addClass("form-tab-selected");
$(".write-area").show();
$(".preview-area").hide();
},
// Common init
Init: function() {
@ -99,10 +147,15 @@ var Kanboard = (function() {
$("#board-selector").change(function() {
window.location = $(this).attr("data-board-url").replace(/%d/g, $(this).val());
});
// Markdown Preview for textareas
$("#markdown-preview").click(Kanboard.MarkdownPreview);
$("#markdown-write").click(Kanboard.MarkdownWriter);
}
};
})();// Board related functions
})();
// Board related functions
Kanboard.Board = (function() {
var checkInterval = null;
@ -261,13 +314,16 @@ Kanboard.Board = (function() {
Kanboard.Task = (function() {
return {
Init: function() {
// Image preview for attachments
$(".file-popover").click(Kanboard.Popover);
}
};
})();
Kanboard.Analytic = (function() {
return {

View File

@ -65,6 +65,54 @@ var Kanboard = (function() {
return true;
},
// Generate Markdown preview
MarkdownPreview: function(e) {
e.preventDefault();
var link = $(this);
var nav = $(this).closest("ul");
var write = $(".write-area");
var preview = $(".preview-area");
var textarea = $("textarea");
var request = $.ajax({
url: "?controller=app&action=preview",
contentType: "application/json",
type: "POST",
processData: false,
dataType: "html",
data: JSON.stringify({
"text": textarea.val()
}),
});
request.done(function(data) {
nav.find("li").removeClass("form-tab-selected");
link.parent().addClass("form-tab-selected");
preview.find(".markdown").html(data)
preview.css("height", textarea.css("height"));
preview.css("width", textarea.css("width"));
write.hide();
preview.show();
});
},
// Show the Markdown textarea
MarkdownWriter: function(e) {
e.preventDefault();
$(this).closest("ul").find("li").removeClass("form-tab-selected")
$(this).parent().addClass("form-tab-selected");
$(".write-area").show();
$(".preview-area").hide();
},
// Common init
Init: function() {
@ -84,7 +132,11 @@ var Kanboard = (function() {
$("#board-selector").change(function() {
window.location = $(this).attr("data-board-url").replace(/%d/g, $(this).val());
});
// Markdown Preview for textareas
$("#markdown-preview").click(Kanboard.MarkdownPreview);
$("#markdown-write").click(Kanboard.MarkdownWriter);
}
};
})();
})();

View File

@ -2,10 +2,12 @@
Kanboard.Task = (function() {
return {
Init: function() {
// Image preview for attachments
$(".file-popover").click(Kanboard.Popover);
}
};
})();
})();

View File

@ -17,4 +17,4 @@ echo "/* DO NOT EDIT: auto-generated file */" > assets/js/app.js
for file in $js
do
cat "assets/js/${file}.js" >> assets/js/app.js
done
done