mirror of
https://github.com/NodeBB/NodeBB.git
synced 2025-11-08 15:05:46 +01:00
new composer window template (WIP!)
This commit is contained in:
Julian Lam
@@ -112,163 +112,167 @@ define(['taskbar'], function(taskbar) {
|
|||||||
|
|
||||||
composer.init = function() {
|
composer.init = function() {
|
||||||
if (!composer.initialized) {
|
if (!composer.initialized) {
|
||||||
var taskbar = document.getElementById('taskbar');
|
templates.preload_template('composer', function() {
|
||||||
|
$(document.body).append(templates['composer'].parse({}));
|
||||||
|
composer.postContainer = $('.composer')[0];
|
||||||
|
|
||||||
composer.postContainer = document.createElement('div');
|
if(config.imgurClientIDSet) {
|
||||||
composer.postContainer.className = 'post-window row';
|
initializeFileReader();
|
||||||
composer.postContainer.innerHTML = '<div class="col-md-5">' +
|
|
||||||
'<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
|
|
||||||
'<div class="btn-toolbar formatting-bar">' +
|
|
||||||
'<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-italic"></i></span>' +
|
|
||||||
'<span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span>' +
|
|
||||||
'<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>' +
|
|
||||||
'<textarea tabIndex="2"></textarea>' +
|
|
||||||
'<div class="imagedrop"><div>Drag and Drop Images Here</div></div>'+
|
|
||||||
'<div class="btn-toolbar action-bar">' +
|
|
||||||
'<div class="btn-group" style="float: right; margin-right: -8px">' +
|
|
||||||
'<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="fa fa-download"></i> Minimize</button>' +
|
|
||||||
'<button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>' +
|
|
||||||
'<button data-action="post" class="btn" tabIndex="3"><i class="fa fa-check"></i> Submit</button>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>';
|
|
||||||
|
|
||||||
document.body.insertBefore(composer.postContainer, taskbar);
|
|
||||||
|
|
||||||
if(config.imgurClientIDSet) {
|
|
||||||
initializeFileReader();
|
|
||||||
}
|
|
||||||
|
|
||||||
socket.on('api:composer.push', function(threadData) {
|
|
||||||
if (!threadData.error) {
|
|
||||||
var uuid = utils.generateUUID();
|
|
||||||
|
|
||||||
composer.taskbar.push('composer', uuid, {
|
|
||||||
title: (!threadData.cid ? (threadData.title || '') : 'New Topic'),
|
|
||||||
icon: threadData.picture
|
|
||||||
});
|
|
||||||
|
|
||||||
composer.posts[uuid] = {
|
|
||||||
tid: threadData.tid,
|
|
||||||
cid: threadData.cid,
|
|
||||||
pid: threadData.pid,
|
|
||||||
title: threadData.title || '',
|
|
||||||
body: threadData.body || '',
|
|
||||||
modified: false
|
|
||||||
};
|
|
||||||
composer.load(uuid);
|
|
||||||
} else {
|
|
||||||
app.alert({
|
|
||||||
type: 'danger',
|
|
||||||
timeout: 5000,
|
|
||||||
alert_id: 'post_error',
|
|
||||||
title: 'Please Log In to Post',
|
|
||||||
message: 'Posting is currently restricted to registered members only, click here to log in',
|
|
||||||
clickfn: function() {
|
|
||||||
ajaxify.go('login');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('api:composer.editCheck', function(editCheck) {
|
socket.on('api:composer.push', function(threadData) {
|
||||||
if (editCheck.titleEditable === true) composer.postContainer.querySelector('input').readOnly = false;
|
if (!threadData.error) {
|
||||||
});
|
var uuid = utils.generateUUID();
|
||||||
|
|
||||||
// Post Window events
|
composer.taskbar.push('composer', uuid, {
|
||||||
var jPostContainer = $(composer.postContainer),
|
title: (!threadData.cid ? (threadData.title || '') : 'New Topic'),
|
||||||
postContentEl = composer.postContainer.querySelector('textarea');
|
icon: threadData.picture
|
||||||
|
});
|
||||||
|
|
||||||
jPostContainer.on('change', 'input, textarea', function() {
|
composer.posts[uuid] = {
|
||||||
var uuid = $(this).parents('.post-window')[0].getAttribute('data-uuid');
|
tid: threadData.tid,
|
||||||
if (this.nodeName === 'INPUT') composer.posts[uuid].title = this.value;
|
cid: threadData.cid,
|
||||||
else if (this.nodeName === 'TEXTAREA') composer.posts[uuid].body = this.value;
|
pid: threadData.pid,
|
||||||
|
title: threadData.title || '',
|
||||||
|
body: threadData.body || '',
|
||||||
|
modified: false
|
||||||
|
};
|
||||||
|
composer.load(uuid);
|
||||||
|
} else {
|
||||||
|
app.alert({
|
||||||
|
type: 'danger',
|
||||||
|
timeout: 5000,
|
||||||
|
alert_id: 'post_error',
|
||||||
|
title: 'Please Log In to Post',
|
||||||
|
message: 'Posting is currently restricted to registered members only, click here to log in',
|
||||||
|
clickfn: function() {
|
||||||
|
ajaxify.go('login');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Mark this post window as having been changed
|
socket.on('api:composer.editCheck', function(editCheck) {
|
||||||
composer.posts[uuid].modified = true;
|
if (editCheck.titleEditable === true) composer.postContainer.querySelector('input').readOnly = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
jPostContainer.on('click', '.action-bar button', function() {
|
// Post Window events
|
||||||
var action = this.getAttribute('data-action'),
|
var jPostContainer = $(composer.postContainer),
|
||||||
uuid = $(this).parents('.post-window').attr('data-uuid');
|
postContentEl = composer.postContainer.querySelector('textarea');
|
||||||
switch(action) {
|
|
||||||
case 'post': composer.post(uuid); break;
|
jPostContainer.on('change', 'input, textarea', function() {
|
||||||
case 'minimize': composer.minimize(uuid); break;
|
var uuid = $(this).parents('.post-window')[0].getAttribute('data-uuid');
|
||||||
case 'discard':
|
if (this.nodeName === 'INPUT') composer.posts[uuid].title = this.value;
|
||||||
if (composer.posts[uuid].modified) {
|
else if (this.nodeName === 'TEXTAREA') composer.posts[uuid].body = this.value;
|
||||||
bootbox.confirm('Are you sure you wish to discard this post?', function(discard) {
|
|
||||||
if (discard) composer.discard(uuid);
|
// Mark this post window as having been changed
|
||||||
});
|
composer.posts[uuid].modified = true;
|
||||||
} else {
|
});
|
||||||
composer.discard(uuid);
|
|
||||||
}
|
jPostContainer.on('click', '.action-bar button', function() {
|
||||||
|
var action = this.getAttribute('data-action'),
|
||||||
|
uuid = $(this).parents('.post-window').attr('data-uuid');
|
||||||
|
switch(action) {
|
||||||
|
case 'post': composer.post(uuid); break;
|
||||||
|
case 'minimize': composer.minimize(uuid); break;
|
||||||
|
case 'discard':
|
||||||
|
if (composer.posts[uuid].modified) {
|
||||||
|
bootbox.confirm('Are you sure you wish to discard this post?', function(discard) {
|
||||||
|
if (discard) composer.discard(uuid);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
composer.discard(uuid);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
jPostContainer.on('click', '.formatting-bar span', function() {
|
||||||
|
var iconClass = this.querySelector('i').className,
|
||||||
|
cursorEnd = postContentEl.value.length,
|
||||||
|
selectionStart = postContentEl.selectionStart,
|
||||||
|
selectionEnd = postContentEl.selectionEnd,
|
||||||
|
selectionLength = selectionEnd - selectionStart;
|
||||||
|
|
||||||
|
function insertIntoInput(element, value) {
|
||||||
|
var start = postContentEl.selectionStart;
|
||||||
|
element.value = element.value.slice(0, start) + value + element.value.slice(start, element.value.length);
|
||||||
|
postContentEl.selectionStart = postContentEl.selectionEnd = start + value.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch(iconClass) {
|
||||||
|
case 'fa fa-bold':
|
||||||
|
if (selectionStart === selectionEnd) {
|
||||||
|
// Nothing selected
|
||||||
|
insertIntoInput(postContentEl, "**bolded text**");
|
||||||
|
} 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;
|
break;
|
||||||
}
|
case 'fa fa-italic':
|
||||||
});
|
if (selectionStart === selectionEnd) {
|
||||||
|
// Nothing selected
|
||||||
jPostContainer.on('click', '.formatting-bar span', function() {
|
insertIntoInput(postContentEl, "*italicised text*");
|
||||||
var iconClass = this.querySelector('i').className,
|
} else {
|
||||||
cursorEnd = postContentEl.value.length,
|
// Text selected
|
||||||
selectionStart = postContentEl.selectionStart,
|
postContentEl.value = postContentEl.value.slice(0, selectionStart) + '*' + postContentEl.value.slice(selectionStart, selectionEnd) + '*' + postContentEl.value.slice(selectionEnd);
|
||||||
selectionEnd = postContentEl.selectionEnd,
|
postContentEl.selectionStart = selectionStart + 1;
|
||||||
selectionLength = selectionEnd - selectionStart;
|
postContentEl.selectionEnd = selectionEnd + 1;
|
||||||
|
}
|
||||||
function insertIntoInput(element, value) {
|
break;
|
||||||
var start = postContentEl.selectionStart;
|
case 'fa fa-list':
|
||||||
element.value = element.value.slice(0, start) + value + element.value.slice(start, element.value.length);
|
|
||||||
postContentEl.selectionStart = postContentEl.selectionEnd = start + value.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
switch(iconClass) {
|
|
||||||
case 'fa fa-bold':
|
|
||||||
if (selectionStart === selectionEnd) {
|
|
||||||
// Nothing selected
|
// Nothing selected
|
||||||
insertIntoInput(postContentEl, "**bolded text**");
|
insertIntoInput(postContentEl, "\n\n* list item");
|
||||||
} else {
|
break;
|
||||||
// Text selected
|
case 'fa fa-link':
|
||||||
postContentEl.value = postContentEl.value.slice(0, selectionStart) + '**' + postContentEl.value.slice(selectionStart, selectionEnd) + '**' + postContentEl.value.slice(selectionEnd);
|
if (selectionStart === selectionEnd) {
|
||||||
postContentEl.selectionStart = selectionStart + 2;
|
// Nothing selected
|
||||||
postContentEl.selectionEnd = selectionEnd + 2;
|
insertIntoInput(postContentEl, "[link text](link url)");
|
||||||
}
|
} else {
|
||||||
break;
|
// Text selected
|
||||||
case 'fa fa-italic':
|
postContentEl.value = postContentEl.value.slice(0, selectionStart) + '[' + postContentEl.value.slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.value.slice(selectionEnd);
|
||||||
if (selectionStart === selectionEnd) {
|
postContentEl.selectionStart = selectionStart + selectionLength + 3;
|
||||||
// Nothing selected
|
postContentEl.selectionEnd = selectionEnd + 11;
|
||||||
insertIntoInput(postContentEl, "*italicised text*");
|
}
|
||||||
} else {
|
break;
|
||||||
// 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 'fa fa-list':
|
|
||||||
// Nothing selected
|
|
||||||
insertIntoInput(postContentEl, "\n\n* list item");
|
|
||||||
break;
|
|
||||||
case 'fa fa-link':
|
|
||||||
if (selectionStart === selectionEnd) {
|
|
||||||
// Nothing selected
|
|
||||||
insertIntoInput(postContentEl, "[link text](link url)");
|
|
||||||
} 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;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('resize', function() {
|
window.addEventListener('resize', function() {
|
||||||
if (composer.active !== undefined) composer.reposition(composer.active);
|
if (composer.active !== undefined) composer.reposition(composer.active);
|
||||||
});
|
});
|
||||||
|
|
||||||
composer.initialized = true;
|
composer.initialized = true;
|
||||||
|
});
|
||||||
|
// var taskbar = document.getElementById('taskbar');
|
||||||
|
|
||||||
|
// composer.postContainer = document.createElement('div');
|
||||||
|
// composer.postContainer.className = 'post-window row';
|
||||||
|
// composer.postContainer.innerHTML = '<div class="col-md-5">' +
|
||||||
|
// '<input type="text" tabIndex="1" placeholder="Enter your topic title here..." />' +
|
||||||
|
// '<div class="btn-toolbar formatting-bar">' +
|
||||||
|
// '<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-italic"></i></span>' +
|
||||||
|
// '<span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span>' +
|
||||||
|
// '<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span>' +
|
||||||
|
// '</div>' +
|
||||||
|
// '</div>' +
|
||||||
|
// '<textarea tabIndex="2"></textarea>' +
|
||||||
|
// '<div class="imagedrop"><div>Drag and Drop Images Here</div></div>'+
|
||||||
|
// '<div class="btn-toolbar action-bar">' +
|
||||||
|
// '<div class="btn-group" style="float: right; margin-right: -8px">' +
|
||||||
|
// '<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="fa fa-download"></i> Minimize</button>' +
|
||||||
|
// '<button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>' +
|
||||||
|
// '<button data-action="post" class="btn" tabIndex="3"><i class="fa fa-check"></i> Submit</button>' +
|
||||||
|
// '</div>' +
|
||||||
|
// '</div>' +
|
||||||
|
// '</div>';
|
||||||
|
|
||||||
|
// document.body.insertBefore(composer.postContainer, taskbar);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -122,6 +122,27 @@
|
|||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
templates.preload_template = function(tpl_name, callback) {
|
||||||
|
// TODO: This should be "load_template", and the current load_template
|
||||||
|
// should be named something else
|
||||||
|
// TODO: The "Date.now()" in the line below is only there for development purposes.
|
||||||
|
// It should be removed at some point.
|
||||||
|
jQuery.get(RELATIVE_PATH + '/templates/' + tpl_name + '.tpl?v=' + Date.now(), function (html) {
|
||||||
|
var template = function () {
|
||||||
|
this.toString = function () {
|
||||||
|
return this.html;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
template.prototype.parse = parse;
|
||||||
|
template.prototype.html = String(html);
|
||||||
|
template.prototype.blocks = {};
|
||||||
|
|
||||||
|
templates[tpl_name] = new template;
|
||||||
|
|
||||||
|
callback();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
templates.load_template = function (callback, url, template) {
|
templates.load_template = function (callback, url, template) {
|
||||||
var location = document.location || window.location,
|
var location = document.location || window.location,
|
||||||
@@ -137,19 +158,7 @@
|
|||||||
var timestamp = new Date().getTime(); //debug
|
var timestamp = new Date().getTime(); //debug
|
||||||
|
|
||||||
if (!templates[tpl_url]) {
|
if (!templates[tpl_url]) {
|
||||||
jQuery.get(RELATIVE_PATH + '/templates/' + tpl_url + '.tpl?v=' + timestamp, function (html) {
|
templates.preload_template(tpl_url, function() {
|
||||||
var template = function () {
|
|
||||||
this.toString = function () {
|
|
||||||
return this.html;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
template.prototype.parse = parse;
|
|
||||||
template.prototype.html = String(html);
|
|
||||||
template.prototype.blocks = {};
|
|
||||||
|
|
||||||
templates[tpl_url] = new template;
|
|
||||||
|
|
||||||
parse_template();
|
parse_template();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
22
public/templates/composer.tpl
Normal file
22
public/templates/composer.tpl
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<div class="composer">
|
||||||
|
<input class="title" type="text" tabIndex="1" placeholder="Enter your topic title here..." />
|
||||||
|
<div class="btn-toolbar formatting-bar">
|
||||||
|
<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-italic"></i></span>
|
||||||
|
<span class="btn btn-link" tabindex="-1"><i class="fa fa-list"></i></span>
|
||||||
|
<span class="btn btn-link" tabindex="-1"><i class="fa fa-link"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="btn btn-link pull-right">Preview</div>
|
||||||
|
</div>
|
||||||
|
<textarea tabIndex="2"></textarea>
|
||||||
|
<div class="imagedrop"><div>Drag and Drop Images Here</div></div>
|
||||||
|
<div class="btn-toolbar action-bar">
|
||||||
|
<div class="btn-group pull-right">
|
||||||
|
<button data-action="minimize" class="btn hidden-xs" tabIndex="4"><i class="fa fa-download"></i> Minimize</button>
|
||||||
|
<button class="btn" data-action="discard" tabIndex="5"><i class="fa fa-times"></i> Discard</button>
|
||||||
|
<button data-action="post" class="btn" tabIndex="3"><i class="fa fa-check"></i> Submit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="resizer"><div class="trigger"><i class="fa fa-chevron-left"></i></div></div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user