164 lines
6.2 KiB
React
164 lines
6.2 KiB
React
|
//TOOLS
|
||
|
import DataUtils, {
|
||
|
REQUEST_TYPE_GET,
|
||
|
REQUEST_TYPE_PUT,
|
||
|
REQUEST_TYPE_POST,
|
||
|
REQUEST_TYPE_DELETE,
|
||
|
CONTENT_TYPE_JSON,
|
||
|
CONTENT_TYPE_FORM
|
||
|
} from '../tools/utilities/DataUtils';
|
||
|
import * as DataEvent from '../tools/events/DataEvent';
|
||
|
import Animate from '../tools/effects/Animate';
|
||
|
import * as Ease from '../tools/effects/Animate';
|
||
|
import TextEffects from '../tools/effects/TextEffects';
|
||
|
import EntryTasks from '../tasks/EntryTasks';
|
||
|
import TextEditor from '../tools/utilities/TextEditor';
|
||
|
class Entry {
|
||
|
//--------------------------
|
||
|
// constructor
|
||
|
//--------------------------
|
||
|
constructor() {
|
||
|
reframe('iframe');
|
||
|
this.uploadFiles;
|
||
|
this.start();
|
||
|
this.editor = new TextEditor();
|
||
|
}
|
||
|
//--------------------------
|
||
|
// methods
|
||
|
//--------------------------
|
||
|
start() {
|
||
|
new Animate().object({
|
||
|
targets: document.getElementById('loader'),
|
||
|
duration: 300,
|
||
|
opacity: 0,
|
||
|
easing: 'easeInOutQuad',
|
||
|
complete: function() {
|
||
|
document.getElementById('loader').style.display = 'none';
|
||
|
document.getElementById('loader').style.visibility = 'hidden';
|
||
|
new Animate().object({
|
||
|
targets: document.getElementById('header'),
|
||
|
duration: 10,
|
||
|
opacity: 1,
|
||
|
easing: 'easeInOutQuad',
|
||
|
complete: function() {
|
||
|
new TextEffects().scramble(document.getElementById('the-title'), 50, function() {
|
||
|
|
||
|
if (document.getElementById('the-intro'))
|
||
|
document.getElementById('the-intro').style.opacity = 1;
|
||
|
if (document.getElementById('blog-entry'))
|
||
|
document.getElementById('blog-entry').style.opacity = 1;
|
||
|
//START SEcTION
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
|
||
|
if (document.getElementById('featured-image-drop')) {
|
||
|
document.getElementById('featured-image-drop').addEventListener('dragover', this.handleDragOver, false);
|
||
|
document.getElementById('featured-image-drop').addEventListener('drop', this.handleDrop, false);
|
||
|
document.getElementById('featured-click').addEventListener('change', this.handleClicked, false);
|
||
|
|
||
|
if(document.getElementById('new-upload-link'))
|
||
|
{
|
||
|
document.getElementById('new-upload-link').addEventListener('click', e=>{
|
||
|
document.getElementById('featured-click').click();
|
||
|
})
|
||
|
}
|
||
|
document.getElementById("post-sumbit-btn").addEventListener('click', f => {
|
||
|
f.preventDefault();
|
||
|
let edit = false;
|
||
|
if (f.target.getAttribute('data-action') == 'blog-update')
|
||
|
edit = true;
|
||
|
console.log('clicked')
|
||
|
new EntryTasks().submitPost(edit, Entry.uploadFiles).then((response) => {
|
||
|
let note = JSON.parse(response['response']['request'].response);
|
||
|
console.log(note.message);
|
||
|
}).catch((err) => {
|
||
|
console.log(err)
|
||
|
});
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
//--------------------------
|
||
|
// event handlers
|
||
|
//--------------------------
|
||
|
handleDragOver(e) {
|
||
|
e.stopPropagation();
|
||
|
e.preventDefault();
|
||
|
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
|
||
|
}
|
||
|
handleClicked(e) {
|
||
|
e.stopPropagation();
|
||
|
e.preventDefault();
|
||
|
//console.log("IMAGES " + e.target.files);
|
||
|
Entry.uploadFiles = e.target.files;
|
||
|
for (var i = 0, f; f = Entry.uploadFiles[i]; i++) {
|
||
|
// Only process image files.
|
||
|
if (!f.type.match('image.*')) {
|
||
|
continue;
|
||
|
}
|
||
|
var reader = new FileReader();
|
||
|
// Closure to capture the file information.
|
||
|
reader.onload = (function(theFile) {
|
||
|
return function(f) {
|
||
|
// Render thumbnail.
|
||
|
var span = document.createElement('span');
|
||
|
span.innerHTML = [
|
||
|
'<img src="',
|
||
|
f.target.result,
|
||
|
'" title="',
|
||
|
escape(theFile.name),
|
||
|
'"/>'
|
||
|
].join('');
|
||
|
//document.getElementById('featured-image-drop').insertBefore(span, null);
|
||
|
document.getElementById('featured-image-drop').innerHTML = '';
|
||
|
document.getElementById('featured-image-drop').appendChild(span);
|
||
|
};
|
||
|
})(f);
|
||
|
// Read in the image file as a data URL.
|
||
|
reader.readAsDataURL(f);
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
handleDrop(e) {
|
||
|
e.stopPropagation();
|
||
|
e.preventDefault();
|
||
|
Entry.uploadFiles = e.dataTransfer.files;
|
||
|
//console.log(MemberArea.uploadFiles.length);
|
||
|
for (var i = 0, f; f = Entry.uploadFiles[i]; i++) {
|
||
|
// Only process image files.
|
||
|
if (!f.type.match('image.*')) {
|
||
|
continue;
|
||
|
}
|
||
|
var reader = new FileReader();
|
||
|
// Closure to capture the file information.
|
||
|
reader.onload = (function(theFile) {
|
||
|
return function(f) {
|
||
|
// Render thumbnail.
|
||
|
var span = document.createElement('span');
|
||
|
span.innerHTML = [
|
||
|
'<img src="',
|
||
|
f.target.result,
|
||
|
'" title="',
|
||
|
escape(theFile.name),
|
||
|
'"/>'
|
||
|
].join('');
|
||
|
//document.getElementById('featured-image-drop').insertBefore(span, null);
|
||
|
document.getElementById('featured-image-drop').innerHTML = '';
|
||
|
document.getElementById('featured-image-drop').appendChild(span);
|
||
|
};
|
||
|
})(f);
|
||
|
// Read in the image file as a data URL.
|
||
|
reader.readAsDataURL(f);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
Entry.uploadFiles = [];
|
||
|
export {
|
||
|
Entry as
|
||
|
default
|
||
|
}
|