mirror of
https://github.com/NodeBB/NodeBB.git
synced 2025-11-08 15:05:46 +01:00
removing old post_window (!!) and fixing default focus when the composer is loaded
This commit is contained in:
Julian Lam
@@ -59,7 +59,6 @@ var ajaxify = {};
|
||||
app.process_page();
|
||||
|
||||
jQuery('#content, #footer').fadeIn(200);
|
||||
app.close_post_window();
|
||||
}, url, template);
|
||||
|
||||
return true;
|
||||
|
||||
@@ -167,173 +167,6 @@ var socket,
|
||||
}
|
||||
}
|
||||
|
||||
var post_window = null,
|
||||
submit_post_btn = null,
|
||||
post_title = null,
|
||||
reply_title = null,
|
||||
post_content = null;
|
||||
|
||||
|
||||
app.open_post_window = function(post_mode, id, title, pid) {
|
||||
|
||||
submit_post_btn = submit_post_btn || document.getElementById('submit_post_btn');
|
||||
post_title = post_title || document.getElementById('post_title');
|
||||
reply_title = reply_title || document.getElementById('reply_title');
|
||||
post_content = post_content || document.getElementById('post_content');
|
||||
|
||||
post_window = post_window || document.getElementById('post_window');
|
||||
|
||||
jQuery(post_window).slideDown(250);
|
||||
$(document.body).addClass('composing');
|
||||
|
||||
if (post_mode == 'topic') {
|
||||
post_title.style.display = "block";
|
||||
reply_title.style.display = "none";
|
||||
post_title.focus();
|
||||
submit_post_btn.onclick = function() {
|
||||
app.post_topic(id);
|
||||
}
|
||||
} else if (post_mode === 'edit') {
|
||||
|
||||
if(title === "") {
|
||||
post_title.style.display = "none";
|
||||
}
|
||||
else {
|
||||
post_title.style.display = "block";
|
||||
post_title.value = title;
|
||||
}
|
||||
reply_title.style.display = "none";
|
||||
socket.emit('api:posts.getRawPost', { pid: pid });
|
||||
|
||||
post_content.focus();
|
||||
submit_post_btn.onclick = function() {
|
||||
app.edit_post(pid);
|
||||
}
|
||||
} else {
|
||||
if (post_mode == 'reply') {
|
||||
reply_title.innerHTML = 'You are replying to "' + title + '"';
|
||||
} else if (post_mode == 'quote') {
|
||||
reply_title.innerHTML = 'You are quoting "' + title + '"';
|
||||
}
|
||||
|
||||
post_title.style.display = "none";
|
||||
reply_title.style.display = "block";
|
||||
post_content.focus();
|
||||
submit_post_btn.onclick = function() {
|
||||
app.post_reply(id)
|
||||
}
|
||||
}
|
||||
|
||||
// If there was a saved draft, populate the post content with it now
|
||||
if (localStorage) {
|
||||
var draft = localStorage.getItem(post_mode + '_' + id + '_draft');
|
||||
if (draft && draft.length > 0) {
|
||||
post_content.value = draft;
|
||||
localStorage.removeItem(post_mode + '_' + id + '_draft');
|
||||
}
|
||||
}
|
||||
|
||||
// Override post window behaviour if user is not logged in
|
||||
if (document.getElementById('user_label') === null) {
|
||||
submit_post_btn.innerHTML = '<i class="icon-save"></i> Save & Login</i>';
|
||||
submit_post_btn.onclick = function() {
|
||||
// Save the post content in localStorage and send the user to registration page
|
||||
if (localStorage && post_content.value.length > 0) {
|
||||
localStorage.setItem(post_mode + '_' + id + '_draft', post_content.value);
|
||||
|
||||
app.close_post_window();
|
||||
post_title.value = '';
|
||||
reply_title.value = '';
|
||||
post_content.value = '';
|
||||
|
||||
app.alert({
|
||||
title: 'Post Saved',
|
||||
message: 'We've saved your post as a draft. It will be available again when you log in and post again.',
|
||||
type: 'notify',
|
||||
timeout: 5000
|
||||
});
|
||||
|
||||
ajaxify.go('login');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
app.close_post_window = function() {
|
||||
post_window = post_window || document.getElementById('post_window');
|
||||
jQuery(post_window).slideUp(250);
|
||||
$(document.body).removeClass('composing');
|
||||
}
|
||||
|
||||
app.post_reply = function(topic_id) {
|
||||
var content = document.getElementById('post_content');
|
||||
|
||||
if (content.length < 5) {
|
||||
app.alert({
|
||||
title: 'Reply Failure',
|
||||
message: 'You need to write more dude.',
|
||||
type: 'error',
|
||||
timeout: 2000
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
socket.emit('api:posts.reply', {
|
||||
'topic_id' : topic_id,
|
||||
'content' : content.value
|
||||
});
|
||||
app.close_post_window();
|
||||
content.value = '';
|
||||
};
|
||||
app.post_topic = function(category_id) {
|
||||
var title = $('#post_title'),
|
||||
content = $('#post_content');
|
||||
|
||||
if (title.val().length < 5 || content.val().length < 5) {
|
||||
app.alert({
|
||||
title: 'Topic Post Failure',
|
||||
message: 'You need to write more dude.',
|
||||
type: 'error',
|
||||
timeout: 2000
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
socket.emit('api:topics.post', {
|
||||
'title' : title.val(),
|
||||
'content' : content.val(),
|
||||
'category_id' : category_id
|
||||
});
|
||||
|
||||
app.close_post_window();
|
||||
title.val('');
|
||||
content.val('');
|
||||
};
|
||||
|
||||
app.edit_post = function(pid) {
|
||||
var title = $('#post_title'),
|
||||
content = $('#post_content');
|
||||
|
||||
if (title.val().length < 5 || content.val().length < 5) {
|
||||
app.alert({
|
||||
title: 'Topic Post Failure',
|
||||
message: 'You need to write more dude.',
|
||||
type: 'error',
|
||||
timeout: 2000
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
socket.emit('api:posts.edit', { pid: pid, content: content.val(), title: title.val() });
|
||||
|
||||
app.close_post_window();
|
||||
content.val('');
|
||||
}
|
||||
|
||||
|
||||
app.current_room = null;
|
||||
app.enter_room = function(room) {
|
||||
if (app.current_room === room) return;
|
||||
@@ -399,75 +232,5 @@ var socket,
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
|
||||
// Posting
|
||||
var formattingBar = document.querySelector('.formatting-bar'),
|
||||
postContentEl = document.getElementById('post_content');
|
||||
jQuery('#post_window').slideToggle(0);
|
||||
|
||||
if(formattingBar) {
|
||||
|
||||
formattingBar.addEventListener('click', function(e) {
|
||||
if (e.target.nodeName === 'I' || e.target.nodeName === 'SPAN') {
|
||||
var cursorEnd = postContentEl.value.length,
|
||||
selectionStart = postContentEl.selectionStart,
|
||||
selectionEnd = postContentEl.selectionEnd,
|
||||
selectionLength = selectionEnd - selectionStart,
|
||||
target;
|
||||
if (e.target.nodeName === 'I') target = e.target;
|
||||
else if (e.target.nodeName === 'SPAN') target = e.target.querySelector('i');
|
||||
switch(target.className) {
|
||||
case 'icon-bold':
|
||||
if (selectionStart === selectionEnd) {
|
||||
// Nothing selected
|
||||
postContentEl.value = postContentEl.value + '**bolded text**';
|
||||
postContentEl.selectionStart = cursorEnd+2;
|
||||
postContentEl.selectionEnd = postContentEl.value.length - 2;
|
||||
} else {
|
||||
// Text selected
|
||||
postContentEl.value = postContentEl.value.slice(0, selectionStart) + '**' + postContentEl.value.slice(selectionStart, selectionEnd) + '**' + postContentEl.value.slice(selectionEnd);
|
||||
postContentEl.selectionStart = selectionStart + 2;
|
||||
postContentEl.selectionEnd = selectionEnd + 2;
|
||||
}
|
||||
break;
|
||||
case 'icon-italic':
|
||||
if (selectionStart === selectionEnd) {
|
||||
// Nothing selected
|
||||
postContentEl.value = postContentEl.value + '*italicised text*';
|
||||
postContentEl.selectionStart = cursorEnd+1;
|
||||
postContentEl.selectionEnd = postContentEl.value.length - 1;
|
||||
} else {
|
||||
// Text selected
|
||||
postContentEl.value = postContentEl.value.slice(0, selectionStart) + '*' + postContentEl.value.slice(selectionStart, selectionEnd) + '*' + postContentEl.value.slice(selectionEnd);
|
||||
postContentEl.selectionStart = selectionStart + 1;
|
||||
postContentEl.selectionEnd = selectionEnd + 1;
|
||||
}
|
||||
break;
|
||||
case 'icon-list':
|
||||
// Nothing selected
|
||||
postContentEl.value = postContentEl.value + "\n\n* list item";
|
||||
postContentEl.selectionStart = cursorEnd+4;
|
||||
postContentEl.selectionEnd = postContentEl.value.length;
|
||||
break;
|
||||
case 'icon-link':
|
||||
if (selectionStart === selectionEnd) {
|
||||
// Nothing selected
|
||||
postContentEl.value = postContentEl.value + '[link text](link url)';
|
||||
postContentEl.selectionStart = cursorEnd+12;
|
||||
postContentEl.selectionEnd = postContentEl.value.length - 1;
|
||||
} else {
|
||||
// Text selected
|
||||
postContentEl.value = postContentEl.value.slice(0, selectionStart) + '[' + postContentEl.value.slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.value.slice(selectionEnd);
|
||||
postContentEl.selectionStart = selectionStart + selectionLength + 3;
|
||||
postContentEl.selectionEnd = selectionEnd + 11;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
}());
|
||||
|
||||
@@ -56,14 +56,6 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Post window events
|
||||
var postWindowEl = document.getElementById('post_window'),
|
||||
discardEl = document.getElementById('discard-post');
|
||||
discardEl.addEventListener('click', function() {
|
||||
$(postWindowEl).slideToggle(250);
|
||||
$(document.body).removeClass('composing');
|
||||
}, false);
|
||||
|
||||
// Notifications dropdown
|
||||
var notifContainer = document.getElementsByClassName('notifications')[0],
|
||||
notifTrigger = notifContainer.querySelector('a'),
|
||||
|
||||
@@ -166,10 +166,10 @@ define(function() {
|
||||
composer.postContainer.style.display = 'block';
|
||||
composer.postContainer.style.bottom = composer.btnContainer.offsetHeight + "px";
|
||||
composer.postContainer.setAttribute('data-uuid', post_uuid);
|
||||
if (post_data.tid > 0) {
|
||||
if (parseInt(post_data.tid) > 0) {
|
||||
titleEl.value = 'Replying to: ' + post_data.title;
|
||||
titleEl.readonly = true;
|
||||
} else if (post_data.pid > 0) {
|
||||
} else if (parseInt(post_data.pid) > 0) {
|
||||
console.log(post_data);
|
||||
titleEl.value = 'Editing: ' + post_data.title;
|
||||
titleEl.readonly = true;
|
||||
@@ -182,7 +182,12 @@ define(function() {
|
||||
$('.posts-bar li').removeClass('active');
|
||||
composer.btnContainer.querySelector('[data-uuid="' + post_uuid + '"]').className += ' active';
|
||||
|
||||
//
|
||||
// Direct user focus to the correct element
|
||||
if ((parseInt(post_data.tid) || parseInt(post_data.pid)) > 0) {
|
||||
bodyEl.focus();
|
||||
} else if (parseInt(post_data.cid) > 0) {
|
||||
titleEl.focus();
|
||||
}
|
||||
}
|
||||
|
||||
composer.post = function(post_uuid) {
|
||||
|
||||
@@ -75,35 +75,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="post_window">
|
||||
<div class="post-title-container">
|
||||
<div class="container">
|
||||
<input id="post_title" placeholder="Enter your topic title here." tabIndex="1" />
|
||||
<span id="reply_title"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-content-container">
|
||||
<div class="container">
|
||||
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group formatting-bar">
|
||||
<span class="btn btn-link" tabindex="-1"><i class="icon-bold"></i></span>
|
||||
<span class="btn btn-link" tabindex="-1"><i class="icon-italic"></i></span>
|
||||
<!-- <span class="btn btn-link" tabindex="-1"><i class="icon-font"></i></span> -->
|
||||
<span class="btn btn-link" tabindex="-1"><i class="icon-list"></i></span>
|
||||
<span class="btn btn-link" tabindex="-1"><i class="icon-link"></i></span>
|
||||
</div>
|
||||
<div class="btn-group" style="float: right; margin-right: -12px">
|
||||
<button id="submit_post_btn" class="btn" tabIndex="3"><i class="icon-ok"></i> Submit</button>
|
||||
<button class="btn" id="discard-post" tabIndex="4"><i class="icon-remove"></i> Discard</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea id="post_content" placeholder="Type your message here." tabIndex="2"></textarea>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="disconnect-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
|
||||
Reference in New Issue
Block a user