Add Markdown preview for textarea, see #407
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
})();
|
||||
|
||||
@@ -2,10 +2,12 @@
|
||||
Kanboard.Task = (function() {
|
||||
|
||||
return {
|
||||
|
||||
Init: function() {
|
||||
|
||||
// Image preview for attachments
|
||||
$(".file-popover").click(Kanboard.Popover);
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user