Sebastiaan Janssen
438 lines
14 KiB
JavaScript
438 lines
14 KiB
JavaScript
(function () {
|
|
var converter = new Markdown.getSanitizingConverter();
|
|
var editor = new Markdown.Editor(converter);
|
|
var state = {};
|
|
|
|
// Editor jQuery casche
|
|
var thisEditor = $('#markdown-editor'),
|
|
thisButtonRow = $('.wmd-button-row'),
|
|
thisEditorCreateTopic = $('.create-topic'),
|
|
thisEditorReplyTo = $('.reply-to'),
|
|
thisEditorReplyName = $('.reply-name'),
|
|
thisEditorInput = $('.wmd-input'),
|
|
thisEditorPreview = $('.wmd-preview'),
|
|
thisEditorDraft = $('.draft'),
|
|
thisEditorSpacer = $('.markdown-spacer'),
|
|
thisEditorMobilePreview = $('#mobile-preview'),
|
|
thisEditorSubmit = $('#topic-submit');
|
|
|
|
//image upload
|
|
var $dialog = $('#insert-image-dialog');
|
|
var $loader = $('.span', $dialog);
|
|
var $url = $('input[type=text]', $dialog);
|
|
var $file = $('input[type=file]', $dialog);
|
|
var $cancel = $('input[type=button]', $dialog);
|
|
|
|
|
|
|
|
editor.hooks.set('insertImageDialog', function (callback) {
|
|
|
|
$dialog.show().addClass('show');
|
|
|
|
var uploadStart = function () {
|
|
$loader.show();
|
|
};
|
|
|
|
var uploadComplete = function (response) {
|
|
$loader.hide();
|
|
|
|
if (response.success) {
|
|
callback(response.imagePath);
|
|
$dialog.hide();
|
|
} else {
|
|
alert(response.message);
|
|
$file.val('');
|
|
}
|
|
};
|
|
|
|
$file.unbind('change').ajaxfileupload({
|
|
action: $file.attr('data-action'),
|
|
onStart: uploadStart,
|
|
onComplete: uploadComplete
|
|
});
|
|
|
|
$cancel.click(function () {
|
|
$dialog.hide();
|
|
callback(null);
|
|
});
|
|
return true;
|
|
});
|
|
|
|
$(thisEditorInput).change(function () {
|
|
saveDraft(thisEditorInput.val());
|
|
});
|
|
|
|
if (document.getElementById("markdown-editor") !== null) {
|
|
editor.run();
|
|
}
|
|
|
|
//duplicate code here, needs to be done better
|
|
$("a.create-new-thread").on("click", function (e) {
|
|
e.preventDefault();
|
|
state = {};
|
|
state = $(this).data();
|
|
|
|
$("#markdown-editor div.create-topic").show();
|
|
$("#markdown-editor div.reply-to").hide();
|
|
|
|
initEditor($(this));
|
|
|
|
showEditor(state.controller);
|
|
});
|
|
|
|
$('.forum-single-thread').on('click', '.forum-reply, .edit-post', function (e) {
|
|
e.preventDefault();
|
|
state = {};
|
|
state = $(this).data();
|
|
|
|
$("#markdown-editor div.create-topic").hide();
|
|
$("#markdown-editor div.reply-to").show();
|
|
|
|
|
|
initEditor($(this));
|
|
|
|
showEditor(state.controller);
|
|
|
|
});
|
|
|
|
// Hide editor
|
|
$('.markdown-close').on('click', function () {
|
|
hideEditor();
|
|
if (thisEditorInput.val() == "" || thisEditorInput.val() == null) {
|
|
deleteDraft();
|
|
} else {
|
|
saveDraft(thisEditorInput.val());
|
|
}
|
|
|
|
checkDraft();
|
|
});
|
|
|
|
// Send form to validation
|
|
$("#topic-submit").on("click", function (event) {
|
|
event.preventDefault();
|
|
var valid = true;
|
|
|
|
if (state.controller == "comment") {
|
|
valid = validateComment();
|
|
} else {
|
|
valid = validateThread();
|
|
}
|
|
|
|
if (valid) {
|
|
$(this).attr("disabled", "disabled");
|
|
$(this).attr('value', 'Posting');
|
|
submit();
|
|
}
|
|
});
|
|
|
|
// Relative scrolling
|
|
thisEditorInput.on('scroll', function () {
|
|
var inputScroll = thisEditorInput.scrollTop(),
|
|
scrolledPercentage = (inputScroll / 300) * 100,
|
|
previewScrollHeight = document.getElementById('wmd-preview').scrollHeight,
|
|
previewScroll = (previewScrollHeight / 100) * scrolledPercentage + 2;
|
|
|
|
thisEditorPreview.scrollTop(previewScroll);
|
|
});
|
|
|
|
|
|
/* Draft functionality
|
|
=====================================*/
|
|
|
|
// Open draft
|
|
thisEditorDraft.on('click', function () {
|
|
if (typeof (Storage) !== 'undefined' && localStorage.getItem('ufdraft') != null) {
|
|
var ufdraft = getDraft();
|
|
if (ufdraft.controller == 'comment') {
|
|
thisEditorReplyName.html(ufdraft.author);
|
|
} else {
|
|
if (ufdraft.title) { $('#topic-title').val(ufdraft.title); }
|
|
if (ufdraft.category) { $('#topic-category').val(ufdraft.category); }
|
|
if (ufdraft.version) { $('#topic-version').val(ufdraft.version); }
|
|
}
|
|
}
|
|
thisEditorInput.val(ufdraft.body);
|
|
showEditor(ufdraft.controller);
|
|
|
|
thisEditorDraft.removeClass('show');
|
|
});
|
|
|
|
// Save draft
|
|
function saveDraft(data) {
|
|
if (typeof (Storage) !== 'undefined') {
|
|
var ufdraft;
|
|
|
|
ufdraft = {
|
|
controller: state.controller,
|
|
topic: state.topic,
|
|
author: state.author,
|
|
body: data
|
|
};
|
|
|
|
if (state.controller == "comment" && state.parent) {
|
|
ufdraft.parent = state.parent
|
|
} else if (state.controller == "topic") {
|
|
if ($('#topic-title').val()) { ufdraft.title = $('#topic-title').val(); }
|
|
if ($('#topic-category').val()) { ufdraft.category = $('#topic-category').val(); }
|
|
if ($('#topic-version').val()) { ufdraft.version = $('#topic-version').val(); }
|
|
}
|
|
|
|
localStorage.setItem('ufdraft', JSON.stringify(ufdraft));
|
|
}
|
|
}
|
|
|
|
// Delete draft
|
|
function deleteDraft() {
|
|
if (typeof (Storage) !== 'undefined' && localStorage.getItem('ufdraft') != null) {
|
|
localStorage.removeItem('ufdraft');
|
|
}
|
|
}
|
|
|
|
// Check if draft exists
|
|
function checkDraft() {
|
|
if (typeof (Storage) !== 'undefined' && localStorage.getItem('ufdraft') != null) {
|
|
thisEditorDraft.addClass('show');
|
|
return true;
|
|
} else {
|
|
thisEditorDraft.removeClass('show');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Fetch draft
|
|
function getDraft() {
|
|
if (typeof (Storage) != 'undefined' && localStorage.getItem('ufdraft') != null) {
|
|
return JSON.parse(localStorage.getItem('ufdraft'));
|
|
}
|
|
}
|
|
|
|
if (checkDraft()) {
|
|
state = getDraft();
|
|
}
|
|
|
|
|
|
function initEditor(ent) {
|
|
|
|
var replyTo = "";
|
|
if (ent.closest('.actions').length > 0) {
|
|
replyTo = ent.closest('.actions').prevAll('.meta').find('a').text();
|
|
} else {
|
|
replyTo = $(".question:first .actions").prevAll('.meta').find('a').text()
|
|
}
|
|
|
|
$('.reply-name').html(replyTo);
|
|
|
|
|
|
if (state.id) {
|
|
|
|
if (state.controller == "comment") {
|
|
$("#markdown-editor div.create-topic").hide();
|
|
$("#markdown-editor div.reply-to").show();
|
|
|
|
community.getCommentMarkdown(state.id).done(function (md) {
|
|
thisEditorInput.val(md);
|
|
var converter = new Markdown.Converter();
|
|
var html = converter.makeHtml(md);
|
|
thisEditorPreview.html(html);
|
|
thisEditorSubmit.attr('value', 'Edit reply');
|
|
});
|
|
|
|
}
|
|
else {
|
|
$("#markdown-editor div.create-topic").show();
|
|
$("#markdown-editor div.reply-to").hide();
|
|
|
|
|
|
var threadData = $(".question").data();
|
|
var title = $(".question h2").text();
|
|
|
|
community.getThreadMarkdown(state.id).done(function (md) {
|
|
thisEditorInput.val(md);
|
|
var converter = new Markdown.Converter();
|
|
var html = converter.makeHtml(md);
|
|
thisEditorPreview.html(html);
|
|
thisEditorSubmit.attr('value', 'Edit thread');
|
|
});
|
|
|
|
$("#topic-title").val(title);
|
|
$("#topic-category").val(threadData.cat);
|
|
$("#topic-version").val(threadData.version);
|
|
|
|
}
|
|
|
|
}
|
|
else {
|
|
$("#topic-submit").attr('value', 'Post reply');
|
|
}
|
|
|
|
}
|
|
|
|
function submit() {
|
|
|
|
var type = "Post";
|
|
if (state.id) {
|
|
type = "Put";
|
|
} else {
|
|
state.id = "";
|
|
}
|
|
|
|
var url = "/umbraco/api/forum/" + state.controller + "/" + state.id;
|
|
state.body = thisEditorInput.val();
|
|
state.title = $("#topic-title").val();
|
|
state.forum = parseInt($("#topic-category").val());
|
|
state.version = parseInt($("#topic-version").val());
|
|
|
|
$('#posting').fadeIn();
|
|
|
|
$.ajax({
|
|
url: url,
|
|
type: type,
|
|
data: state
|
|
}).done(function (data) {
|
|
deleteDraft();
|
|
$('#posting').fadeOut();
|
|
|
|
if (type == "Post") {
|
|
|
|
if (state.controller == "comment") {
|
|
|
|
var avatarUrl = '/umbraco/api/Avatar/GetMemberAvatar/?memberId=' + data.authorId;
|
|
$.ajax({
|
|
url: avatarUrl,
|
|
type: "GET"
|
|
}).done(function (avatarData) {
|
|
data.avatar = avatarData;
|
|
|
|
//new comment we'll use mustache to insert it into the dom
|
|
data.lower = function () {
|
|
return function (text, render) {
|
|
return render(text).toLowerCase();
|
|
}
|
|
};
|
|
|
|
data.canHaveChildren = data.parent == 0;
|
|
var template = $('#comment-template').html();
|
|
var rendered = Mustache.render(template, data);
|
|
|
|
if (data.parent == 0) {
|
|
$(".comments").append(rendered);
|
|
|
|
$("div.replybutton").insertAfter($("#comment-" + data.id));
|
|
}
|
|
else {
|
|
var allComments = $("li[data-parent='" + data.parent + "']");
|
|
if (allComments.length > 0) {
|
|
var lastComment;
|
|
for (var i = 0; i < allComments.length; i++) {
|
|
lastComment = allComments[i];
|
|
}
|
|
$(rendered).insertAfter(lastComment);
|
|
} else {
|
|
$(rendered).insertAfter("#comment-" + data.parent);
|
|
}
|
|
}
|
|
if ($("#comment-" + data.id).length) {
|
|
$(document).scrollTop($("#comment-" + data.id).offset().top - 80);
|
|
$("#comment-" + data.id).hide();
|
|
$("#comment-" + data.id).fadeIn();
|
|
}
|
|
});
|
|
} else {
|
|
//new topic, so redirect to it
|
|
window.location.replace(data.url);
|
|
}
|
|
}
|
|
else {
|
|
if (state.controller == "comment") {
|
|
//editing comment so updating the text
|
|
var converter = new Markdown.Converter();
|
|
$(".body", "#comment-" + state.id).html(converter.makeHtml(thisEditorPreview.text()));
|
|
}
|
|
else {
|
|
//editing topic, so redir (since the parent location might have changed)
|
|
window.location.replace(data.url);
|
|
}
|
|
|
|
}
|
|
thisEditorInput.val("");
|
|
thisEditorPreview.text("");
|
|
hideEditor();
|
|
$("#topic-submit").attr("value", "Post reply");
|
|
$("#topic-submit").removeAttr("disabled");
|
|
});
|
|
}
|
|
|
|
function validateComment() {
|
|
var valid = true;
|
|
thisEditorInput.removeClass('warning');
|
|
|
|
if (!thisEditorInput.val()) {
|
|
thisEditorInput.addClass('warning');
|
|
valid = false;
|
|
}
|
|
return valid;
|
|
}
|
|
function validateThread() {
|
|
var valid = true;
|
|
thisEditorInput.removeClass('warning');
|
|
$("#topic-title").removeClass('warning');
|
|
$("#topic-category").removeClass('warning');
|
|
$("#topic-version").removeClass('warning');
|
|
|
|
if (!$("#topic-title").val()) {
|
|
$("#topic-title").addClass('warning');
|
|
valid = false;
|
|
}
|
|
if (!$("#topic-category").val()) {
|
|
$("#topic-category").addClass('warning');
|
|
valid = false;
|
|
}
|
|
if (!$("#topic-version").val()) {
|
|
$("#topic-version").addClass('warning');
|
|
valid = false;
|
|
}
|
|
if (!thisEditorInput.val()) {
|
|
thisEditorInput.addClass('warning');
|
|
valid = false;
|
|
}
|
|
return valid;
|
|
|
|
}
|
|
|
|
function showEditor(controller) {
|
|
if (controller == 'comment') {
|
|
thisEditorCreateTopic.css('display', 'none');
|
|
thisEditorReplyTo.css('display', 'block');
|
|
thisEditorSubmit.val('Post Reply');
|
|
} else {
|
|
thisEditorCreateTopic.css('display', 'block');
|
|
thisEditorReplyTo.css('display', 'none');
|
|
thisEditorSubmit.val('Post topic');
|
|
}
|
|
thisEditorInput.trigger('change');
|
|
thisEditor.addClass('write');
|
|
thisEditorSpacer.addClass('write');
|
|
thisEditorDraft.removeClass('show');
|
|
setTimeout(function () {
|
|
thisEditorInput.focus().delay(600);
|
|
}, 1000);
|
|
}
|
|
|
|
function hideEditor() {
|
|
thisEditor.removeClass('write');
|
|
thisEditorSpacer.removeClass('write')
|
|
}
|
|
|
|
thisEditorMobilePreview.on('click', function (e) {
|
|
e.preventDefault();
|
|
thisEditor.toggleClass('mobile-preview');
|
|
switch ($(this).attr('value')) {
|
|
case 'Preview':
|
|
$(this).attr('value', 'Editor');
|
|
break;
|
|
case 'Editor':
|
|
$(this).attr('value', 'Preview');
|
|
break;
|
|
}
|
|
});
|
|
})(); |