hyperzlib
/
nodebb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

second pass, #981

Browse Source
v1.18.x
Julian Lam 11 years ago
parent e9852a804c
commit 55b39f1eff
3 changed files with 215 additions and 202 deletions
Show Stats Download Patch File Download Diff File

10
public/language/en_GB/topic.json
Unescape Escape View File

@ -61,5 +61,13 @@
"fork_success": "Succesfully forked topic!", "fork_success": "Succesfully forked topic!",
"reputation": "Reputation", "reputation": "Reputation",
"posts": "Posts" "posts": "Posts",
"composer.title_placeholder": "Enter your topic title here...",
"composer.write": "Write",
"composer.preview": "Preview",
"composer.discard": "Discard",
"composer.submit": "Submit",
"composer.replying_to": "Replying to",
"composer.new_topic": "New Topic"
} }

397
public/src/modules/composer.js
Unescape Escape View File

@ -82,9 +82,11 @@ define(['taskbar'], function(taskbar) {
function push(post) { function push(post) {
var uuid = utils.generateUUID(); var uuid = utils.generateUUID();
taskbar.push('composer', uuid, { translator.translate('[[topic:composer.new_topic]]', function(newTopicStr) {
title: post.title ? post.title : 'New Topic', taskbar.push('composer', uuid, {
icon: post.picture title: post.title ? post.title : newTopicStr,
icon: post.picture
});
}); });
composer.posts[uuid] = post; composer.posts[uuid] = post;
@ -103,227 +105,230 @@ define(['taskbar'], function(taskbar) {
composer.createNewComposer = function(post_uuid) { composer.createNewComposer = function(post_uuid) {
templates.preload_template('composer', function() { templates.preload_template('composer', function() {
var composerTemplate = templates['composer'].parse({}); var composerTemplate = templates['composer'].parse({});
composerTemplate = $(composerTemplate); translator.translate(composerTemplate, function(composerTemplate) {
composerTemplate = $(composerTemplate);
composerTemplate.attr('id', 'cmp-uuid-' + post_uuid); composerTemplate.attr('id', 'cmp-uuid-' + post_uuid);
$(document.body).append(composerTemplate); $(document.body).append(composerTemplate);
composer.activateReposition(post_uuid); composer.activateReposition(post_uuid);
var postContainer = $(composerTemplate[0]); var postContainer = $(composerTemplate[0]);
if(config.allowFileUploads || config.hasImageUploadPlugin) {
initializeFileReader(post_uuid);
}
var postData = composer.posts[post_uuid], if(config.allowFileUploads || config.hasImageUploadPlugin) {
titleEl = postContainer.find('.title'), initializeFileReader(post_uuid);
bodyEl = postContainer.find('textarea'); }
if (parseInt(postData.tid) > 0) {
titleEl.val('Replying to: ' + postData.title);
titleEl.prop('disabled', true);
} else if (parseInt(postData.pid) > 0) {
titleEl.val(postData.title);
titleEl.prop('disabled', true);
socket.emit('modules.composer.editCheck', postData.pid, function(err, editCheck) {
if (!err && editCheck.titleEditable) {
titleEl.prop('disabled', false);
}
});
} else {
titleEl.val(postData.title);
titleEl.prop('disabled', false);
}
bodyEl.val(postData.body); var postData = composer.posts[post_uuid],
titleEl = postContainer.find('.title'),
bodyEl = postContainer.find('textarea');
if (parseInt(postData.tid) > 0) {
translator.translate('[[topic:composer.replying_to]]: ' + postData.title, function(newTitle) {
titleEl.val(newTitle);
});
titleEl.prop('disabled', true);
} else if (parseInt(postData.pid) > 0) {
titleEl.val(postData.title);
titleEl.prop('disabled', true);
socket.emit('modules.composer.editCheck', postData.pid, function(err, editCheck) {
if (!err && editCheck.titleEditable) {
titleEl.prop('disabled', false);
}
});
} else {
titleEl.val(postData.title);
titleEl.prop('disabled', false);
}
bodyEl.val(postData.body);
postContainer.on('change', 'input, textarea', function() {
composer.posts[post_uuid].modified = true;
});
postContainer.on('click', '.action-bar button', function() { postContainer.on('change', 'input, textarea', function() {
var action = $(this).attr('data-action'); composer.posts[post_uuid].modified = true;
});
switch(action) { postContainer.on('click', '.action-bar button', function() {
case 'post': var action = $(this).attr('data-action');
$(this).attr('disabled', true);
composer.post(post_uuid); switch(action) {
break; case 'post':
case 'discard': $(this).attr('disabled', true);
if (composer.posts[post_uuid].modified) { composer.post(post_uuid);
bootbox.confirm('Are you sure you wish to discard this post?', function(discard) { break;
if (discard) { case 'discard':
composer.discard(post_uuid); if (composer.posts[post_uuid].modified) {
} bootbox.confirm('Are you sure you wish to discard this post?', function(discard) {
}); if (discard) {
} else { composer.discard(post_uuid);
composer.discard(post_uuid); }
} });
break; } else {
} composer.discard(post_uuid);
}); }
break;
}
});
postContainer.on('click', '.formatting-bar span', function() { postContainer.on('click', '.formatting-bar span', function() {
var postContentEl = postContainer.find('textarea'), var postContentEl = postContainer.find('textarea'),
iconClass = $(this).find('i').attr('class'), iconClass = $(this).find('i').attr('class'),
cursorEnd = postContentEl.val().length, cursorEnd = postContentEl.val().length,
selectionStart = postContentEl[0].selectionStart, selectionStart = postContentEl[0].selectionStart,
selectionEnd = postContentEl[0].selectionEnd, selectionEnd = postContentEl[0].selectionEnd,
selectionLength = selectionEnd - selectionStart; selectionLength = selectionEnd - selectionStart;
function insertIntoInput(element, value) { function insertIntoInput(element, value) {
var start = postContentEl[0].selectionStart; var start = postContentEl[0].selectionStart;
element.val(element.val().slice(0, start) + value + element.val().slice(start, element.val().length)); element.val(element.val().slice(0, start) + value + element.val().slice(start, element.val().length));
postContentEl[0].selectionStart = postContentEl[0].selectionEnd = start + value.length; postContentEl[0].selectionStart = postContentEl[0].selectionEnd = start + value.length;
} }
switch(iconClass) { switch(iconClass) {
case 'fa fa-bold': case 'fa fa-bold':
if (selectionStart === selectionEnd) { if (selectionStart === selectionEnd) {
// Nothing selected // Nothing selected
insertIntoInput(postContentEl, "**bolded text**"); insertIntoInput(postContentEl, "**bolded text**");
} else { } else {
// Text selected // Text selected
postContentEl.val(postContentEl.val().slice(0, selectionStart) + '**' + postContentEl.val().slice(selectionStart, selectionEnd) + '**' + postContentEl.val().slice(selectionEnd)); postContentEl.val(postContentEl.val().slice(0, selectionStart) + '**' + postContentEl.val().slice(selectionStart, selectionEnd) + '**' + postContentEl.val().slice(selectionEnd));
postContentEl[0].selectionStart = selectionStart + 2; postContentEl[0].selectionStart = selectionStart + 2;
postContentEl[0].selectionEnd = selectionEnd + 2; postContentEl[0].selectionEnd = selectionEnd + 2;
} }
break; break;
case 'fa fa-italic': case 'fa fa-italic':
if (selectionStart === selectionEnd) { if (selectionStart === selectionEnd) {
// Nothing selected // Nothing selected
insertIntoInput(postContentEl, "*italicised text*"); insertIntoInput(postContentEl, "*italicised text*");
} else { } else {
// Text selected // Text selected
postContentEl.val(postContentEl.val().slice(0, selectionStart) + '*' + postContentEl.val().slice(selectionStart, selectionEnd) + '*' + postContentEl.val().slice(selectionEnd)); postContentEl.val(postContentEl.val().slice(0, selectionStart) + '*' + postContentEl.val().slice(selectionStart, selectionEnd) + '*' + postContentEl.val().slice(selectionEnd));
postContentEl[0].selectionStart = selectionStart + 1; postContentEl[0].selectionStart = selectionStart + 1;
postContentEl[0].selectionEnd = selectionEnd + 1; postContentEl[0].selectionEnd = selectionEnd + 1;
} }
break; break;
case 'fa fa-list': case 'fa fa-list':
// Nothing selected
insertIntoInput(postContentEl, "\n* list item");
break;
case 'fa fa-link':
if (selectionStart === selectionEnd) {
// Nothing selected // Nothing selected
insertIntoInput(postContentEl, "[link text](link url)"); insertIntoInput(postContentEl, "\n* list item");
} else { break;
// Text selected case 'fa fa-link':
postContentEl.val(postContentEl.val().slice(0, selectionStart) + '[' + postContentEl.val().slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.val().slice(selectionEnd)); if (selectionStart === selectionEnd) {
postContentEl[0].selectionStart = selectionStart + selectionLength + 3; // Nothing selected
postContentEl[0].selectionEnd = selectionEnd + 11; insertIntoInput(postContentEl, "[link text](link url)");
} } else {
break; // Text selected
} postContentEl.val(postContentEl.val().slice(0, selectionStart) + '[' + postContentEl.val().slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.val().slice(selectionEnd));
}); postContentEl[0].selectionStart = selectionStart + selectionLength + 3;
postContentEl[0].selectionEnd = selectionEnd + 11;
}
break;
}
});
postContainer.on('click', '.formatting-bar span .fa-picture-o, .formatting-bar span .fa-upload', function() { postContainer.on('click', '.formatting-bar span .fa-picture-o, .formatting-bar span .fa-upload', function() {
$('#files').click(); $('#files').click();
}); });
$('#files').on('change', function(e) { $('#files').on('change', function(e) {
var files = e.target.files; var files = e.target.files;
if(files) { if(files) {
for (var i=0; i<files.length; i++) { for (var i=0; i<files.length; i++) {
loadFile(post_uuid, files[i]); loadFile(post_uuid, files[i]);
}
} }
} $('#fileForm')[0].reset();
$('#fileForm')[0].reset(); });
});
postContainer.find('.nav-tabs a').click(function (e) { postContainer.find('.nav-tabs a').click(function (e) {
e.preventDefault(); e.preventDefault();
$(this).tab('show'); $(this).tab('show');
var selector = $(this).attr('data-pane'); var selector = $(this).attr('data-pane');
postContainer.find('.tab-content div').removeClass('active'); postContainer.find('.tab-content div').removeClass('active');
postContainer.find(selector).addClass('active'); postContainer.find(selector).addClass('active');
if(selector === '.tab-write') { if(selector === '.tab-write') {
bodyEl.focus(); bodyEl.focus();
} }
return false; return false;
}); });
bodyEl.on('blur', function() { bodyEl.on('blur', function() {
socket.emit('modules.composer.renderPreview', bodyEl.val(), function(err, preview) { socket.emit('modules.composer.renderPreview', bodyEl.val(), function(err, preview) {
postContainer.find('.preview').html(preview); postContainer.find('.preview').html(preview);
}); });
}); });
var resizeActive = false, var resizeActive = false,
resizeCenterY = 0, resizeCenterY = 0,
resizeOffset = 0, resizeOffset = 0,
resizeStart = function(e) { resizeStart = function(e) {
resizeRect = resizeEl.getBoundingClientRect(); resizeRect = resizeEl.getBoundingClientRect();
resizeCenterY = resizeRect.top + (resizeRect.height/2); resizeCenterY = resizeRect.top + (resizeRect.height/2);
resizeOffset = resizeCenterY - e.clientY; resizeOffset = resizeCenterY - e.clientY;
resizeActive = true; resizeActive = true;
$(window).on('mousemove', resizeAction); $(window).on('mousemove', resizeAction);
$(window).on('mouseup', resizeStop); $(window).on('mouseup', resizeStop);
document.body.addEventListener('touchmove', resizeTouchAction); document.body.addEventListener('touchmove', resizeTouchAction);
}, },
resizeStop = function() { resizeStop = function() {
resizeActive = false; resizeActive = false;
bodyEl.focus(); bodyEl.focus();
$(window).off('mousemove', resizeAction); $(window).off('mousemove', resizeAction);
$(window).off('mouseup', resizeStop); $(window).off('mouseup', resizeStop);
document.body.removeEventListener('touchmove', resizeTouchAction); document.body.removeEventListener('touchmove', resizeTouchAction);
}, },
resizeTouchAction = function(e) { resizeTouchAction = function(e) {
e.preventDefault(); e.preventDefault();
resizeAction(e.touches[0]); resizeAction(e.touches[0]);
}, },
resizeAction = function(e) { resizeAction = function(e) {
if (resizeActive) { if (resizeActive) {
position = (e.clientY + resizeOffset); position = (e.clientY + resizeOffset);
var newHeight = $(window).height() - position; var newHeight = $(window).height() - position;
var paddingBottom = parseInt(postContainer.css('padding-bottom'), 10); var paddingBottom = parseInt(postContainer.css('padding-bottom'), 10);
if(newHeight > $(window).height() - $('#header-menu').height() - 20) { if(newHeight > $(window).height() - $('#header-menu').height() - 20) {
newHeight = $(window).height() - $('#header-menu').height() - 20; newHeight = $(window).height() - $('#header-menu').height() - 20;
} else if (newHeight < paddingBottom) { } else if (newHeight < paddingBottom) {
newHeight = paddingBottom; newHeight = paddingBottom;
}
postContainer.css('height', newHeight);
$('body').css({'margin-bottom': newHeight});
resizeSavePosition(newHeight);
} }
e.preventDefault();
return false;
},
resizeSavePosition = function(px) {
var percentage = px / $(window).height();
localStorage.setItem('composer:resizePercentage', percentage);
},
resizeRect;
postContainer.css('height', newHeight); var resizeEl = postContainer.find('.resizer')[0];
$('body').css({'margin-bottom': newHeight});
resizeSavePosition(newHeight);
}
e.preventDefault();
return false;
},
resizeSavePosition = function(px) {
var percentage = px / $(window).height();
localStorage.setItem('composer:resizePercentage', percentage);
},
resizeRect;
var resizeEl = postContainer.find('.resizer')[0]; resizeEl.addEventListener('mousedown', resizeStart);
resizeEl.addEventListener('mousedown', resizeStart); resizeEl.addEventListener('touchstart', function(e) {
e.preventDefault();
resizeEl.addEventListener('touchstart', function(e) { resizeStart(e.touches[0]);
e.preventDefault(); });
resizeStart(e.touches[0]); resizeEl.addEventListener('touchend', function(e) {
}); e.preventDefault();
resizeEl.addEventListener('touchend', function(e) { resizeStop();
e.preventDefault(); });
resizeStop(); // .on('mousedown touchstart', resizeStart)
}); // .on('mouseup touchend', resizeStop)
// .on('mousedown touchstart', resizeStart)
// .on('mouseup touchend', resizeStop)
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
if (composer.active !== undefined) { if (composer.active !== undefined) {
composer.activateReposition(composer.active); composer.activateReposition(composer.active);
} }
});
}); });
}); });
} }

10
public/templates/composer.tpl
Unescape Escape View File

@ -1,6 +1,6 @@
<div class="composer"> <div class="composer">
<div class="composer-container"> <div class="composer-container">
<input class="title form-control" type="text" tabIndex="1" placeholder="Enter your topic title here..." /> <input class="title form-control" type="text" tabIndex="1" placeholder="[[topic:composer.title_placeholder]]" />
<div class="btn-toolbar formatting-bar"> <div class="btn-toolbar formatting-bar">
<div class="btn-group"> <div class="btn-group">
<span class="btn btn-link" tabindex="-1"><i class="fa fa-bold"></i></span> <span class="btn btn-link" tabindex="-1"><i class="fa fa-bold"></i></span>
@ -20,11 +20,11 @@
</div> </div>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a data-pane=".tab-write" data-toggle="tab">Write</a></li> <li class="active"><a data-pane=".tab-write" data-toggle="tab">[[topic:composer.write]]</a></li>
<li><a data-pane=".tab-preview" data-toggle="tab">Preview</a></li> <li><a data-pane=".tab-preview" data-toggle="tab">[[topic:composer.preview]]</a></li>
<li class="btn-group pull-right action-bar"> <li class="btn-group pull-right action-bar">
<button class="btn btn-default" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button> <button class="btn btn-default" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> [[topic:composer.discard]]</button>
<button data-action="post" class="btn btn-default btn-primary" tabIndex="3"><i class="fa fa-check"></i> Submit</button> <button data-action="post" class="btn btn-default btn-primary" tabIndex="3"><i class="fa fa-check"></i> [[topic:composer.submit]]</button>
</li> </li>
</ul> </ul>

Write Preview
Loading…
Cancel
Save