composer refactor
barisusakli
11 years ago
parent
2e49fe9f50
commit
e869a6a15a
@ -0,0 +1,63 @@
|
||||
'use strict';
|
||||
|
||||
/* globals define */
|
||||
|
||||
define(function() {
|
||||
|
||||
var drafts = {};
|
||||
|
||||
var saving = false;
|
||||
|
||||
drafts.init = function(postContainer, postData) {
|
||||
var saveThrottle;
|
||||
var bodyEl = postContainer.find('textarea');
|
||||
bodyEl.on('keyup', function() {
|
||||
if (saveThrottle) {
|
||||
clearTimeout(saveThrottle);
|
||||
}
|
||||
|
||||
saveThrottle = setTimeout(function() {
|
||||
saveDraft(postContainer, postData);
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
drafts.getDraft = function(save_id) {
|
||||
return localStorage.getItem(save_id);
|
||||
};
|
||||
|
||||
function saveDraft(postContainer, postData) {
|
||||
var raw;
|
||||
|
||||
if (canSave() && postData && postData.save_id && postContainer.length) {
|
||||
raw = postContainer.find('textarea').val();
|
||||
if (raw.length) {
|
||||
localStorage.setItem(postData.save_id, raw);
|
||||
} else {
|
||||
drafts.removeDraft(postData.save_id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drafts.removeDraft = function(save_id) {
|
||||
return localStorage.removeItem(save_id);
|
||||
};
|
||||
|
||||
function canSave() {
|
||||
if (saving) {
|
||||
return saving;
|
||||
}
|
||||
|
||||
try {
|
||||
localStorage.setItem('test', 'test');
|
||||
localStorage.removeItem('test');
|
||||
saving = true;
|
||||
return true;
|
||||
} catch(e) {
|
||||
saving = false;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return drafts;
|
||||
});
|
||||
@ -0,0 +1,94 @@
|
||||
'use strict';
|
||||
|
||||
/* globals define */
|
||||
|
||||
define(['composer/controls'], function(controls) {
|
||||
|
||||
var formatting = {};
|
||||
|
||||
var formattingDispatchTable = {
|
||||
'fa fa-bold': function(textarea, selectionStart, selectionEnd){
|
||||
if(selectionStart === selectionEnd){
|
||||
controls.insertIntoTextarea(textarea, '**bolded text**');
|
||||
controls.updateTextareaSelection(textarea, selectionStart + 2, selectionStart + 13);
|
||||
} else {
|
||||
controls.wrapSelectionInTextareaWith(textarea, '**');
|
||||
controls.updateTextareaSelection(textarea, selectionStart + 2, selectionEnd + 2);
|
||||
}
|
||||
},
|
||||
|
||||
'fa fa-italic': function(textarea, selectionStart, selectionEnd){
|
||||
if(selectionStart === selectionEnd){
|
||||
controls.insertIntoTextarea(textarea, "*italicised text*");
|
||||
controls.updateTextareaSelection(textarea, selectionStart + 1, selectionStart + 16);
|
||||
} else {
|
||||
controls.wrapSelectionInTextareaWith(textarea, '*');
|
||||
controls.updateTextareaSelection(textarea, selectionStart + 1, selectionEnd + 1);
|
||||
}
|
||||
},
|
||||
|
||||
'fa fa-list': function(textarea, selectionStart, selectionEnd){
|
||||
if(selectionStart === selectionEnd){
|
||||
controls.insertIntoTextarea(textarea, "\n* list item");
|
||||
|
||||
// Highlight "list item"
|
||||
controls.updateTextareaSelection(textarea, selectionStart + 3, selectionStart + 12);
|
||||
} else {
|
||||
controls.wrapSelectionInTextareaWith(textarea, '\n* ', '');
|
||||
controls.updateTextareaSelection(textarea, selectionStart + 3, selectionEnd + 3);
|
||||
}
|
||||
},
|
||||
|
||||
'fa fa-link': function(textarea, selectionStart, selectionEnd){
|
||||
if(selectionStart === selectionEnd){
|
||||
controls.insertIntoTextarea(textarea, "[link text](link url)");
|
||||
|
||||
// Highlight "link url"
|
||||
controls.updateTextareaSelection(textarea, selectionStart + 12, selectionEnd + 20);
|
||||
} else {
|
||||
controls.wrapSelectionInTextareaWith(textarea, '[', '](link url)');
|
||||
|
||||
// Highlight "link url"
|
||||
controls.updateTextareaSelection(textarea, selectionEnd + 3, selectionEnd + 11);
|
||||
}
|
||||
},
|
||||
|
||||
'fa fa-picture-o': function(){
|
||||
$('#files').click();
|
||||
},
|
||||
|
||||
'fa fa-upload': function(){
|
||||
$('#files').click();
|
||||
}
|
||||
};
|
||||
|
||||
var customButtons = [];
|
||||
|
||||
formatting.addComposerButtons = function() {
|
||||
for (var button in customButtons) {
|
||||
if (customButtons.hasOwnProperty(button)) {
|
||||
$('.formatting-bar .btn-group form').before('<span class="btn btn-link" tabindex="-1"><i class="' + customButtons[button].iconClass + '"></i></span>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
formatting.addButton = function(iconClass, onClick) {
|
||||
formattingDispatchTable[iconClass] = onClick;
|
||||
customButtons.push({
|
||||
iconClass: iconClass
|
||||
});
|
||||
}
|
||||
|
||||
formatting.addHandler = function(postContainer) {
|
||||
postContainer.on('click', '.formatting-bar span', function () {
|
||||
var iconClass = $(this).find('i').attr('class');
|
||||
var textarea = $(this).parents('.composer').find('textarea')[0];
|
||||
|
||||
if(formattingDispatchTable.hasOwnProperty(iconClass)){
|
||||
formattingDispatchTable[iconClass](textarea, textarea.selectionStart, textarea.selectionEnd);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return formatting;
|
||||
});
|
||||
@ -0,0 +1,343 @@
|
||||
'use strict';
|
||||
|
||||
/* globals define, utils, config, app */
|
||||
|
||||
define(function() {
|
||||
var uploads = {};
|
||||
|
||||
uploads.initialize = function(post_uuid) {
|
||||
|
||||
initializeDragAndDrop(post_uuid);
|
||||
initializePaste(post_uuid);
|
||||
|
||||
addChangeHandlers(post_uuid);
|
||||
addTopicThumbHandlers(post_uuid);
|
||||
};
|
||||
|
||||
function addChangeHandlers(post_uuid) {
|
||||
var postContainer = $('#cmp-uuid-' + post_uuid);
|
||||
|
||||
postContainer.find('#files').on('change', function(e) {
|
||||
var files = (e.target || {}).files || ($(this).val() ? [{name: $(this).val(), type: utils.fileMimeType($(this).val())}] : null);
|
||||
if(files) {
|
||||
uploadContentFiles({files: files, post_uuid: post_uuid, route: '/api/post/upload'});
|
||||
}
|
||||
});
|
||||
|
||||
postContainer.find('#topic-thumb-file').on('change', function(e) {
|
||||
var files = (e.target || {}).files || ($(this).val() ? [{name: $(this).val(), type: utils.fileMimeType($(this).val())}] : null),
|
||||
fd;
|
||||
|
||||
if(files) {
|
||||
if (window.FormData) {
|
||||
fd = new FormData();
|
||||
for (var i = 0; i < files.length; ++i) {
|
||||
fd.append('files[]', files[i], files[i].name);
|
||||
}
|
||||
}
|
||||
uploadTopicThumb({files: files, post_uuid: post_uuid, route: '/api/topic/thumb/upload', formData: fd});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addTopicThumbHandlers(post_uuid) {
|
||||
var postContainer = $('#cmp-uuid-' + post_uuid);
|
||||
|
||||
postContainer.on('click', '.topic-thumb-clear-btn', function(e) {
|
||||
postContainer.find('input#topic-thumb-url').val('').trigger('change');
|
||||
resetInputFile(postContainer.find('input#topic-thumb-file'));
|
||||
$(this).addClass('hide');
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
postContainer.on('paste change keypress', 'input#topic-thumb-url', function() {
|
||||
var urlEl = $(this);
|
||||
setTimeout(function(){
|
||||
var url = urlEl.val();
|
||||
if (url) {
|
||||
postContainer.find('.topic-thumb-clear-btn').removeClass('hide');
|
||||
} else {
|
||||
resetInputFile(postContainer.find('input#topic-thumb-file'));
|
||||
postContainer.find('.topic-thumb-clear-btn').addClass('hide');
|
||||
}
|
||||
postContainer.find('img.topic-thumb-preview').attr('src', url);
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
uploads.toggleThumbEls = function(postContainer, url) {
|
||||
var thumbToggleBtnEl = postContainer.find('.topic-thumb-toggle-btn');
|
||||
|
||||
postContainer.find('input#topic-thumb-url').val(url);
|
||||
postContainer.find('img.topic-thumb-preview').attr('src', url);
|
||||
if (url) {
|
||||
postContainer.find('.topic-thumb-clear-btn').removeClass('hide');
|
||||
}
|
||||
thumbToggleBtnEl.removeClass('hide');
|
||||
thumbToggleBtnEl.off('click').on('click', function() {
|
||||
var container = postContainer.find('.topic-thumb-container');
|
||||
container.toggleClass('hide', !container.hasClass('hide'));
|
||||
});
|
||||
};
|
||||
|
||||
function resetInputFile($el) {
|
||||
$el.wrap('<form />').closest('form').get(0).reset();
|
||||
$el.unwrap();
|
||||
}
|
||||
|
||||
function initializeDragAndDrop(post_uuid) {
|
||||
|
||||
function onDragEnter() {
|
||||
if(draggingDocument) {
|
||||
return;
|
||||
}
|
||||
drop.css('top', postContainer.find('.tab-content').position().top + 'px');
|
||||
drop.css('height', textarea.height());
|
||||
drop.css('line-height', textarea.height() + 'px');
|
||||
drop.show();
|
||||
|
||||
drop.on('dragleave', function() {
|
||||
drop.hide();
|
||||
drop.off('dragleave');
|
||||
});
|
||||
}
|
||||
|
||||
function onDragDrop(e) {
|
||||
e.preventDefault();
|
||||
var files = e.files || (e.dataTransfer || {}).files || (e.target.value ? [e.target.value] : []),
|
||||
fd;
|
||||
|
||||
if(files.length) {
|
||||
if (window.FormData) {
|
||||
fd = new FormData();
|
||||
for (var i = 0; i < files.length; ++i) {
|
||||
fd.append('files[]', files[i], files[i].name);
|
||||
}
|
||||
}
|
||||
|
||||
uploadContentFiles({
|
||||
files: files,
|
||||
post_uuid: post_uuid,
|
||||
route: '/api/post/upload',
|
||||
formData: fd
|
||||
});
|
||||
}
|
||||
|
||||
drop.hide();
|
||||
return false;
|
||||
}
|
||||
|
||||
function cancel(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
if($.event.props.indexOf('dataTransfer') === -1) {
|
||||
$.event.props.push('dataTransfer');
|
||||
}
|
||||
|
||||
var draggingDocument = false;
|
||||
|
||||
var postContainer = $('#cmp-uuid-' + post_uuid),
|
||||
drop = postContainer.find('.imagedrop'),
|
||||
textarea = postContainer.find('textarea');
|
||||
|
||||
$(document).off('dragstart').on('dragstart', function() {
|
||||
draggingDocument = true;
|
||||
}).off('dragend').on('dragend', function() {
|
||||
draggingDocument = false;
|
||||
});
|
||||
|
||||
textarea.on('dragenter', onDragEnter);
|
||||
|
||||
drop.on('dragover', cancel);
|
||||
drop.on('dragenter', cancel);
|
||||
drop.on('drop', onDragDrop);
|
||||
}
|
||||
|
||||
function initializePaste(post_uuid) {
|
||||
$(window).off('paste').on('paste', function(event) {
|
||||
|
||||
var items = (event.clipboardData || event.originalEvent.clipboardData || {}).items,
|
||||
fd;
|
||||
|
||||
if(items && items.length) {
|
||||
|
||||
var blob = items[0].getAsFile();
|
||||
if(blob) {
|
||||
blob.name = 'upload-' + utils.generateUUID();
|
||||
|
||||
if (window.FormData) {
|
||||
fd = new FormData();
|
||||
fd.append('files[]', blob, blob.name);
|
||||
}
|
||||
|
||||
uploadContentFiles({
|
||||
files: [blob],
|
||||
post_uuid: post_uuid,
|
||||
route: '/api/post/upload',
|
||||
formData: fd
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function escapeRegExp(text) {
|
||||
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
|
||||
}
|
||||
|
||||
function maybeParse(response) {
|
||||
if (typeof response === 'string') {
|
||||
try {
|
||||
return $.parseJSON(response);
|
||||
} catch (e) {
|
||||
return {status: 500, message: 'Something went wrong while parsing server response'};
|
||||
}
|
||||
}
|
||||
return response;
|
||||
}
|
||||
|
||||
function uploadContentFiles(params) {
|
||||
var files = params.files,
|
||||
post_uuid = params.post_uuid,
|
||||
route = params.route,
|
||||
formData = params.formData,
|
||||
callback = params.callback,
|
||||
postContainer = $('#cmp-uuid-' + post_uuid),
|
||||
textarea = postContainer.find('textarea'),
|
||||
text = textarea.val(),
|
||||
uploadForm = postContainer.find('#fileForm');
|
||||
|
||||
uploadForm.attr('action', route);
|
||||
|
||||
for(var i = 0; i < files.length; ++i) {
|
||||
var isImage = files[i].type.match(/image./);
|
||||
text += (isImage ? '!' : '') + '[' + files[i].name + '](uploading...) ';
|
||||
|
||||
if(files[i].size > parseInt(config.maximumFileSize, 10) * 1024) {
|
||||
uploadForm[0].reset();
|
||||
return app.alertError('[[error:file-too-big, ' + config.maximumFileSize + ']]');
|
||||
}
|
||||
}
|
||||
|
||||
textarea.val(text);
|
||||
|
||||
uploadForm.off('submit').submit(function() {
|
||||
function updateTextArea(filename, text) {
|
||||
var current = textarea.val();
|
||||
var re = new RegExp(escapeRegExp(filename) + "]\\([^)]+\\)", 'g');
|
||||
textarea.val(current.replace(re, filename + '](' + text + ')'));
|
||||
}
|
||||
|
||||
$(this).find('#postUploadCsrf').val($('#csrf_token').val());
|
||||
|
||||
if (formData) {
|
||||
formData.append('_csrf', $('#csrf_token').val());
|
||||
}
|
||||
|
||||
uploads[post_uuid] = uploads[post_uuid] || [];
|
||||
uploads[post_uuid].push(1);
|
||||
|
||||
$(this).ajaxSubmit({
|
||||
resetForm: true,
|
||||
clearForm: true,
|
||||
formData: formData,
|
||||
|
||||
error: function(xhr) {
|
||||
xhr = maybeParse(xhr);
|
||||
|
||||
app.alertError('Error uploading file!\nStatus : ' + xhr.status + '\nMessage : ' + xhr.responseText);
|
||||
if (typeof callback === 'function') {
|
||||
callback(xhr);
|
||||
}
|
||||
},
|
||||
|
||||
uploadProgress: function(event, position, total, percent) {
|
||||
for(var i=0; i < files.length; ++i) {
|
||||
updateTextArea(files[i].name, 'uploading ' + percent + '%');
|
||||
}
|
||||
},
|
||||
|
||||
success: function(uploads) {
|
||||
uploads = maybeParse(uploads);
|
||||
|
||||
if(uploads && uploads.length) {
|
||||
for(var i=0; i<uploads.length; ++i) {
|
||||
updateTextArea(uploads[i].name, uploads[i].url);
|
||||
}
|
||||
}
|
||||
|
||||
textarea.focus();
|
||||
if (typeof callback === 'function') {
|
||||
callback(null, uploads);
|
||||
}
|
||||
},
|
||||
|
||||
complete: function() {
|
||||
uploadForm[0].reset();
|
||||
uploads[post_uuid].pop();
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
uploadForm.submit();
|
||||
}
|
||||
|
||||
function uploadTopicThumb(params) {
|
||||
var post_uuid = params.post_uuid,
|
||||
route = params.route,
|
||||
formData = params.formData,
|
||||
callback = params.callback,
|
||||
postContainer = $('#cmp-uuid-' + post_uuid),
|
||||
spinner = postContainer.find('.topic-thumb-spinner'),
|
||||
thumbForm = postContainer.find('#thumbForm');
|
||||
|
||||
thumbForm.attr('action', route);
|
||||
|
||||
thumbForm.off('submit').submit(function() {
|
||||
var csrf = $('#csrf_token').val();
|
||||
$(this).find('#thumbUploadCsrf').val(csrf);
|
||||
|
||||
if(formData) {
|
||||
formData.append('_csrf', csrf);
|
||||
}
|
||||
|
||||
spinner.removeClass('hide');
|
||||
|
||||
uploads[post_uuid] = uploads[post_uuid] || [];
|
||||
uploads[post_uuid].push(1);
|
||||
|
||||
$(this).ajaxSubmit({
|
||||
formData: formData,
|
||||
error: function(xhr) {
|
||||
xhr = maybeParse(xhr);
|
||||
|
||||
app.alertError('Error uploading file!\nStatus : ' + xhr.status + '\nMessage : ' + xhr.responseText);
|
||||
if (typeof callback === 'function') {
|
||||
callback(xhr);
|
||||
}
|
||||
},
|
||||
success: function(uploads) {
|
||||
uploads = maybeParse(uploads);
|
||||
|
||||
postContainer.find('#topic-thumb-url').val((uploads[0] || {}).url || '').trigger('change');
|
||||
if (typeof callback === 'function') {
|
||||
callback(null, uploads);
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
uploads[post_uuid].pop();
|
||||
spinner.addClass('hide');
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
thumbForm.submit();
|
||||
}
|
||||
|
||||
return uploads;
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue