2016-12-25 15:41:57 +01:00
|
|
|
|
/**
|
2017-01-26 00:41:04 +01:00
|
|
|
|
* Image plugin for codex-editor
|
|
|
|
|
* @author CodeX Team <team@ifmo.su>
|
|
|
|
|
*
|
|
|
|
|
* @version 1.2.0
|
|
|
|
|
*/
|
2017-01-18 16:12:50 +01:00
|
|
|
|
var image = (function(image) {
|
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
/**
|
|
|
|
|
* @private
|
|
|
|
|
*
|
|
|
|
|
* CSS classNames
|
|
|
|
|
*/
|
|
|
|
|
var elementClasses_ = {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
|
|
|
|
ce_image : 'ce-image',
|
|
|
|
|
loading : 'ce-plugin-image__loader',
|
|
|
|
|
blockStretched: 'ce-block--stretched',
|
|
|
|
|
uploadedImage : {
|
2017-01-26 00:41:04 +01:00
|
|
|
|
centered : 'ce-plugin-image__uploaded--centered',
|
2017-01-18 16:12:50 +01:00
|
|
|
|
stretched : 'ce-plugin-image__uploaded--stretched'
|
2016-12-25 15:41:57 +01:00
|
|
|
|
},
|
|
|
|
|
imageCaption : 'ce-plugin-image__caption',
|
|
|
|
|
imageWrapper : 'ce-plugin-image__wrapper',
|
|
|
|
|
formHolder : 'ce-plugin-image__holder',
|
2017-01-26 00:41:04 +01:00
|
|
|
|
uploadButton : 'ce-plugin-image__button',
|
|
|
|
|
imagePreview : 'ce-image__preview'
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
};
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
* @private
|
|
|
|
|
*
|
|
|
|
|
* UI methods
|
|
|
|
|
*/
|
|
|
|
|
var ui_ = {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
holder : function(){
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
var element = document.createElement('DIV');
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
element.classList.add(elementClasses_.formHolder);
|
|
|
|
|
element.classList.add(elementClasses_.ce_image);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return element;
|
|
|
|
|
},
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
uploadButton : function(){
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
var button = document.createElement('SPAN');
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
button.classList.add(elementClasses_.uploadButton);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
button.innerHTML = '<i class="ce-icon-picture"> </i>';
|
|
|
|
|
button.innerHTML += 'Загрузить фотографию';
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return button;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
},
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/**
|
2017-01-26 00:41:04 +01:00
|
|
|
|
* @param {object} file - file path
|
2017-01-18 16:12:50 +01:00
|
|
|
|
* @param {string} style - css class
|
|
|
|
|
* @return {object} image - document IMG tag
|
|
|
|
|
*/
|
2017-01-26 00:41:04 +01:00
|
|
|
|
image : function(file, style) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
var image = document.createElement('IMG');
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
image.classList.add(style);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
image.src = file.url;
|
|
|
|
|
image.dataset.bigUrl = file.bigUrl;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return image;
|
|
|
|
|
},
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
wrapper : function() {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
var div = document.createElement('div');
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
div.classList.add(elementClasses_.imageWrapper);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return div;
|
|
|
|
|
},
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
caption : function() {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
var div = document.createElement('div');
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
div.classList.add(elementClasses_.imageCaption);
|
2017-01-18 16:12:50 +01:00
|
|
|
|
div.contentEditable = true;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return div;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* Draws form for image upload
|
|
|
|
|
*/
|
|
|
|
|
makeForm : function() {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
var holder = ui_.holder(),
|
|
|
|
|
uploadButton = ui_.uploadButton();
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
holder.appendChild(uploadButton);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
uploadButton.addEventListener('click', uploadButtonClicked_, false );
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
image.holder = holder;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return holder;
|
|
|
|
|
},
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/**
|
|
|
|
|
* wraps image and caption
|
|
|
|
|
* @param {object} data - image information
|
|
|
|
|
* @param {string} imageTypeClass - plugin's style
|
|
|
|
|
* @param {boolean} stretched - stretched or not
|
|
|
|
|
* @return wrapped block with image and caption
|
|
|
|
|
*/
|
|
|
|
|
makeImage : function(data, imageTypeClass, stretched) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
var file = data.file,
|
2017-01-18 16:12:50 +01:00
|
|
|
|
text = data.caption,
|
|
|
|
|
type = data.type,
|
2017-01-26 00:41:04 +01:00
|
|
|
|
image = ui_.image(file, imageTypeClass),
|
|
|
|
|
caption = ui_.caption(),
|
|
|
|
|
wrapper = ui_.wrapper();
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
caption.textContent = text;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
wrapper.dataset.stretched = stretched;
|
|
|
|
|
/** Appeding to the wrapper */
|
|
|
|
|
wrapper.appendChild(image);
|
|
|
|
|
wrapper.appendChild(caption);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return wrapper;
|
|
|
|
|
},
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/**
|
|
|
|
|
* @param {HTML} data - Rendered block with image
|
|
|
|
|
*/
|
|
|
|
|
getImage : function(data) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
var image = data.querySelector('.' + elementClasses_.uploadedImage.centered) ||
|
|
|
|
|
data.querySelector('.' + elementClasses_.uploadedImage.stretched);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return image;
|
|
|
|
|
},
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/**
|
|
|
|
|
* wraps image and caption
|
|
|
|
|
* @deprecated
|
|
|
|
|
* @param {object} data - image information
|
|
|
|
|
* @return wrapped block with image and caption
|
|
|
|
|
*/
|
|
|
|
|
centeredImage : function(data) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
var file = data.file,
|
2017-01-18 16:12:50 +01:00
|
|
|
|
text = data.caption,
|
|
|
|
|
type = data.type,
|
2017-01-26 00:41:04 +01:00
|
|
|
|
image = ui_.image(file, elementClasses_.uploadedImage.centered),
|
|
|
|
|
caption = ui_.caption(),
|
|
|
|
|
wrapper = ui_.wrapper();
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
caption.textContent = text;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
wrapper.dataset.stretched = 'false';
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/** Appeding to the wrapper */
|
|
|
|
|
wrapper.appendChild(image);
|
|
|
|
|
wrapper.appendChild(caption);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return wrapper;
|
|
|
|
|
},
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/**
|
|
|
|
|
* wraps image and caption
|
|
|
|
|
* @deprecated
|
|
|
|
|
* @param {object} data - image information
|
|
|
|
|
* @return stretched image
|
|
|
|
|
*/
|
|
|
|
|
stretchedImage : function(data) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
var file = data.file,
|
2017-01-18 16:12:50 +01:00
|
|
|
|
text = data.caption,
|
|
|
|
|
type = data.type,
|
2017-01-26 00:41:04 +01:00
|
|
|
|
image = ui_.image(file, elementClasses_.uploadedImage.stretched),
|
|
|
|
|
caption = ui_.caption(),
|
|
|
|
|
wrapper = ui_.wrapper();
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
caption.textContent = text;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
wrapper.dataset.stretched = 'true';
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/** Appeding to the wrapper */
|
|
|
|
|
wrapper.appendChild(image);
|
|
|
|
|
wrapper.appendChild(caption);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return wrapper;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
}
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
};
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
/**
|
|
|
|
|
* @private
|
|
|
|
|
*
|
|
|
|
|
* After render callback
|
|
|
|
|
*/
|
|
|
|
|
var uploadButtonClicked_ = function(event) {
|
|
|
|
|
|
2017-01-26 01:10:36 +01:00
|
|
|
|
var beforeSend = uploadingCallbacks_.ByClick.beforeSend,
|
|
|
|
|
success = uploadingCallbacks_.ByClick.success,
|
|
|
|
|
error = uploadingCallbacks_.ByClick.error;
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
|
|
|
|
/** Define callbacks */
|
|
|
|
|
codex.transport.selectAndUpload({
|
|
|
|
|
beforeSend: beforeSend,
|
|
|
|
|
success: success,
|
|
|
|
|
error: error
|
|
|
|
|
});
|
|
|
|
|
};
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
var methods_ = {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
addSelectTypeClickListener : function(el, type) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
el.addEventListener('click', function() {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
methods_.selectTypeClicked(type);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
}, false);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
},
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
selectTypeClicked : function(type) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
var current = codex.content.currentNode,
|
2017-01-18 16:12:50 +01:00
|
|
|
|
blockContent = current.childNodes[0],
|
2017-01-26 00:41:04 +01:00
|
|
|
|
image = ui_.getImage(current),
|
|
|
|
|
inFeed = false,
|
|
|
|
|
wrapper = current.querySelector('.' + elementClasses_.imageWrapper);
|
|
|
|
|
|
|
|
|
|
if (!image) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/** Clear classList */
|
|
|
|
|
current.className = '';
|
2017-01-26 00:41:04 +01:00
|
|
|
|
image.className = '';
|
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/** Add important first-level class ce_block */
|
|
|
|
|
current.classList.add(codex.ui.className.BLOCK_CLASSNAME);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
if (type === 'stretched') {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
image.classList.add(elementClasses_.uploadedImage.stretched);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
blockContent.classList.add(elementClasses_.blockStretched);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/** Setting dataset for saver */
|
|
|
|
|
wrapper.dataset.stretched = true;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
} else if (type === 'centered') {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
image.classList.add(elementClasses_.uploadedImage.centered);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
blockContent.classList.remove(elementClasses_.blockStretched);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/** Setting dataset for saver */
|
|
|
|
|
wrapper.dataset.stretched = false;
|
|
|
|
|
}
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
|
|
|
|
codex.toolbar.settings.close();
|
2017-01-18 16:12:50 +01:00
|
|
|
|
}
|
|
|
|
|
};
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
/**
|
|
|
|
|
* @private
|
|
|
|
|
* Callbacks
|
|
|
|
|
*/
|
|
|
|
|
var uploadingCallbacks_ = {
|
2017-01-18 16:12:50 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
ByClick : {
|
2017-01-18 16:12:50 +01:00
|
|
|
|
|
|
|
|
|
/**
|
2017-01-26 00:41:04 +01:00
|
|
|
|
* Before sending ajax request
|
2017-01-18 16:12:50 +01:00
|
|
|
|
*/
|
2017-01-26 00:41:04 +01:00
|
|
|
|
beforeSend : function() {
|
|
|
|
|
|
|
|
|
|
var input = codex.transport.input,
|
|
|
|
|
files = input.files;
|
|
|
|
|
|
2017-01-26 01:12:00 +01:00
|
|
|
|
var validFileExtensions = ["jpg", "jpeg", "bmp", "gif", "png"];
|
2017-01-18 16:12:50 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
var type = files[0].type.split('/');
|
|
|
|
|
|
2017-01-26 01:12:00 +01:00
|
|
|
|
var result = validFileExtensions.some(function(ext) {
|
2017-01-26 00:41:04 +01:00
|
|
|
|
return ext == type[1]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!result) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var reader = new FileReader();
|
|
|
|
|
reader.readAsDataURL(files[0]);
|
|
|
|
|
|
|
|
|
|
reader.onload = function(e) {
|
|
|
|
|
|
|
|
|
|
var data = {
|
|
|
|
|
background : false,
|
|
|
|
|
border : false,
|
|
|
|
|
isstretch : false,
|
|
|
|
|
file : {
|
|
|
|
|
url : e.target.result,
|
|
|
|
|
bigUrl : null,
|
|
|
|
|
width : null,
|
|
|
|
|
height : null,
|
|
|
|
|
additionalData : null
|
|
|
|
|
},
|
|
|
|
|
caption : '',
|
|
|
|
|
cover : null
|
|
|
|
|
};
|
|
|
|
|
|
2017-01-26 01:10:36 +01:00
|
|
|
|
var newImage = make_(data);
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
2017-01-26 01:10:36 +01:00
|
|
|
|
codex.content.switchBlock(image.holder, newImage, 'image_extended');
|
|
|
|
|
newImage.classList.add(elementClasses_.imagePreview);
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Change holder to image
|
|
|
|
|
*/
|
2017-01-26 01:10:36 +01:00
|
|
|
|
image.holder = newImage;
|
2017-01-26 00:41:04 +01:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/** Photo was uploaded successfully */
|
|
|
|
|
success : function(result) {
|
|
|
|
|
|
|
|
|
|
var parsed = JSON.parse(result),
|
|
|
|
|
data,
|
|
|
|
|
currentBlock = codex.content.currentNode;
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Preparing {Object} data to draw an image
|
|
|
|
|
* @uses ceImage.make method
|
|
|
|
|
*/
|
|
|
|
|
data = parsed.data;
|
|
|
|
|
|
|
|
|
|
image.holder.classList.remove(elementClasses_.imagePreview);
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Change src of image
|
|
|
|
|
*/
|
2017-01-26 01:10:36 +01:00
|
|
|
|
var newImage = image.holder.getElementsByTagName('IMG')[0];
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
2017-01-26 15:02:30 +01:00
|
|
|
|
newImage.src = parsed.data.file.url;
|
2017-01-26 01:10:36 +01:00
|
|
|
|
newImage.dataset.bigUrl = parsed.data.file.bigUrl;
|
2017-01-26 15:02:30 +01:00
|
|
|
|
newImage.dataset.width = parsed.data.file.width;
|
|
|
|
|
newImage.dataset.height = parsed.data.file.height;
|
|
|
|
|
newImage.dataset.additionalData = parsed.data.file.additionalData;
|
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/** Error callback. Sends notification to user that something happend or plugin doesn't supports method */
|
|
|
|
|
error : function(result) {
|
|
|
|
|
|
|
|
|
|
var oldHolder = image.holder;
|
|
|
|
|
var form = ui_.makeForm();
|
|
|
|
|
|
|
|
|
|
codex.content.switchBlock(oldHolder, form, 'image_extended');
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ByPaste : {
|
2017-01-18 16:12:50 +01:00
|
|
|
|
|
|
|
|
|
/**
|
2017-01-26 00:41:04 +01:00
|
|
|
|
* Direct upload
|
|
|
|
|
* Any URL that contains image extension
|
|
|
|
|
* @param url
|
2017-01-18 16:12:50 +01:00
|
|
|
|
*/
|
2017-01-26 00:41:04 +01:00
|
|
|
|
uploadImageFromUrl : function(path) {
|
|
|
|
|
|
|
|
|
|
var ajaxUrl = image.config.uploadUrl,
|
|
|
|
|
file,
|
|
|
|
|
image_plugin,
|
|
|
|
|
current = codex.content.currentNode,
|
|
|
|
|
beforeSend,
|
|
|
|
|
success_callback;
|
|
|
|
|
|
|
|
|
|
/** When image is uploaded to redactors folder */
|
|
|
|
|
success_callback = function(data) {
|
|
|
|
|
|
|
|
|
|
var imageInfo = JSON.parse(data);
|
|
|
|
|
|
2017-01-26 15:02:30 +01:00
|
|
|
|
var newImage = image_plugin.getElementsByTagName('IMG')[0];
|
|
|
|
|
|
|
|
|
|
newImage.dataset.stretched = false;
|
|
|
|
|
newImage.dataset.src = imageInfo.file.url;
|
|
|
|
|
newImage.dataset.bigUrl = imageInfo.file.bigUrl;
|
|
|
|
|
newImage.dataset.width = imageInfo.file.width;
|
|
|
|
|
newImage.dataset.height = imageInfo.file.height;
|
|
|
|
|
newImage.dataset.additionalData = imageInfo.file.additionalData;
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
|
|
|
|
image_plugin.classList.remove(elementClasses_.imagePreview);
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** Before sending XMLHTTP request */
|
|
|
|
|
beforeSend = function() {
|
|
|
|
|
|
|
|
|
|
var content = current.querySelector('.ce-block__content');
|
|
|
|
|
|
|
|
|
|
var data = {
|
|
|
|
|
background: false,
|
|
|
|
|
border: false,
|
|
|
|
|
isStretch: false,
|
|
|
|
|
file: {
|
|
|
|
|
url: path,
|
|
|
|
|
bigUrl: null,
|
|
|
|
|
width: null,
|
|
|
|
|
height: null,
|
|
|
|
|
additionalData: null
|
|
|
|
|
},
|
|
|
|
|
caption: '',
|
|
|
|
|
cover: null
|
|
|
|
|
};
|
|
|
|
|
|
2017-01-26 01:10:36 +01:00
|
|
|
|
image_plugin = codex.tools.image_extended.render(data);
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
|
|
|
|
image_plugin.classList.add(elementClasses_.imagePreview);
|
|
|
|
|
|
|
|
|
|
var img = image_plugin.querySelector('img');
|
|
|
|
|
|
|
|
|
|
codex.content.switchBlock(codex.content.currentNode, image_plugin, 'image_extended');
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** Preparing data for XMLHTTP */
|
|
|
|
|
var data = {
|
|
|
|
|
url: image.config.uploadUrl,
|
|
|
|
|
type: "POST",
|
|
|
|
|
data : {
|
|
|
|
|
url: path
|
|
|
|
|
},
|
|
|
|
|
beforeSend : beforeSend,
|
|
|
|
|
success : success_callback
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
codex.core.ajax(data);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
2017-01-18 16:12:50 +01:00
|
|
|
|
};
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/**
|
2017-01-26 00:41:04 +01:00
|
|
|
|
* Default image holder which will be replaced after image upload
|
|
|
|
|
* @type {null}
|
|
|
|
|
*/
|
|
|
|
|
image.holder = null;
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Image path
|
|
|
|
|
* @type {null}
|
|
|
|
|
*/
|
|
|
|
|
image.path = null;
|
|
|
|
|
|
2017-01-26 13:56:37 +01:00
|
|
|
|
/**
|
2017-01-26 00:41:04 +01:00
|
|
|
|
* Plugin configuration
|
|
|
|
|
*/
|
|
|
|
|
image.config = null;
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
* @private
|
|
|
|
|
*
|
|
|
|
|
* @param data
|
|
|
|
|
* @return {*}
|
|
|
|
|
*
|
2017-01-18 16:12:50 +01:00
|
|
|
|
*/
|
2017-01-26 00:41:04 +01:00
|
|
|
|
var make_ = function ( data ) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
var holder;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
if (data) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
if ( data.isstretch || data.isstretch === 'true') {
|
|
|
|
|
|
|
|
|
|
holder = ui_.makeImage(data, elementClasses_.uploadedImage.stretched, 'true');
|
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
} else {
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
|
|
|
|
holder = ui_.makeImage(data, elementClasses_.uploadedImage.centered, 'false');
|
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
}
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
return holder;
|
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
} else {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
holder = ui_.makeForm();
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
return holder;
|
2017-01-18 16:12:50 +01:00
|
|
|
|
}
|
2017-01-26 00:41:04 +01:00
|
|
|
|
};
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 01:22:53 +01:00
|
|
|
|
/**
|
|
|
|
|
* @private
|
|
|
|
|
*
|
|
|
|
|
* Prepare clear data before save
|
|
|
|
|
*
|
|
|
|
|
* @param data
|
|
|
|
|
*/
|
|
|
|
|
var prepareDataForSave_ = function(data) {
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
/**
|
|
|
|
|
* @public
|
|
|
|
|
* @param config
|
|
|
|
|
*/
|
|
|
|
|
image.prepare = function(config) {
|
|
|
|
|
image.config = config;
|
2017-01-18 16:12:50 +01:00
|
|
|
|
};
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
|
|
|
|
/**
|
2017-01-26 00:41:04 +01:00
|
|
|
|
* @public
|
|
|
|
|
*
|
2017-01-18 16:12:50 +01:00
|
|
|
|
* this tool works when tool is clicked in toolbox
|
|
|
|
|
*/
|
|
|
|
|
image.appendCallback = function(event) {
|
|
|
|
|
|
|
|
|
|
/** Upload image and call success callback*/
|
2017-01-26 00:41:04 +01:00
|
|
|
|
uploadButtonClicked_(event);
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @public
|
|
|
|
|
*
|
|
|
|
|
* @param data
|
|
|
|
|
* @return {*}
|
|
|
|
|
*/
|
|
|
|
|
image.render = function( data ) {
|
|
|
|
|
|
|
|
|
|
return make_(data);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @public
|
|
|
|
|
*
|
|
|
|
|
* @param block
|
|
|
|
|
* @return {{background: boolean, border: boolean, isstretch: boolean, file: {url: (*|string|Object), bigUrl: (null|*), width: *, height: *, additionalData: null}, caption: (string|*|string), cover: null}}
|
|
|
|
|
*/
|
|
|
|
|
image.save = function ( block ) {
|
|
|
|
|
|
|
|
|
|
var content = block,
|
|
|
|
|
image = ui_.getImage(content),
|
|
|
|
|
caption = content.querySelector('.' + elementClasses_.imageCaption);
|
|
|
|
|
|
|
|
|
|
var data = {
|
|
|
|
|
background : false,
|
|
|
|
|
border : false,
|
|
|
|
|
isstretch : content.dataset.stretched === 'true' ? true : false,
|
|
|
|
|
file : {
|
2017-01-26 15:02:30 +01:00
|
|
|
|
url : image.dataset.src || image.src,
|
2017-01-26 00:41:04 +01:00
|
|
|
|
bigUrl : image.dataset.bigUrl,
|
|
|
|
|
width : image.width,
|
|
|
|
|
height : image.height,
|
|
|
|
|
additionalData :null
|
|
|
|
|
},
|
|
|
|
|
caption : caption.textContent,
|
|
|
|
|
cover : null
|
|
|
|
|
};
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
return data;
|
2017-01-18 16:12:50 +01:00
|
|
|
|
};
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/**
|
2017-01-26 00:41:04 +01:00
|
|
|
|
* @public
|
|
|
|
|
*
|
2017-01-18 16:12:50 +01:00
|
|
|
|
* Settings panel content
|
|
|
|
|
* @return {Element} element contains all settings
|
|
|
|
|
*/
|
|
|
|
|
image.makeSettings = function () {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
var holder = document.createElement('DIV'),
|
|
|
|
|
types = {
|
|
|
|
|
centered : 'По центру',
|
|
|
|
|
stretched : 'На всю ширину'
|
|
|
|
|
},
|
|
|
|
|
selectTypeButton;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/** Add holder classname */
|
|
|
|
|
holder.className = 'ce_plugin_image--settings';
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
/** Now add type selectors */
|
|
|
|
|
for (var type in types){
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
selectTypeButton = document.createElement('SPAN');
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
selectTypeButton.textContent = types[type];
|
|
|
|
|
selectTypeButton.className = 'ce_plugin_image--select_button';
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
methods_.addSelectTypeClickListener(selectTypeButton, type);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
holder.appendChild(selectTypeButton);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
}
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return holder;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
};
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 01:10:36 +01:00
|
|
|
|
/**
|
|
|
|
|
* Share as API
|
|
|
|
|
*/
|
|
|
|
|
image.uploadImageFromUri = uploadingCallbacks_.ByPaste.uploadImageFromUrl;
|
|
|
|
|
|
2017-01-26 01:47:19 +01:00
|
|
|
|
image.urlPastedCallbacks = {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
|
|
|
|
/**
|
2017-01-26 01:47:19 +01:00
|
|
|
|
* Upload image by URL
|
|
|
|
|
*
|
|
|
|
|
* @uses codex Image tool
|
|
|
|
|
* @param filename
|
|
|
|
|
* @returns {Element}
|
2016-12-25 15:41:57 +01:00
|
|
|
|
*/
|
2017-01-26 01:47:19 +01:00
|
|
|
|
uploadedImage : function(filename) {
|
|
|
|
|
|
|
|
|
|
var data = {
|
|
|
|
|
background: false,
|
|
|
|
|
border: false,
|
|
|
|
|
isStretch: false,
|
|
|
|
|
file: {
|
|
|
|
|
url: "upload/redactor_images/" + filename,
|
|
|
|
|
bigUrl: "upload/redactor_images/" + filename,
|
|
|
|
|
width: null,
|
|
|
|
|
height: null,
|
|
|
|
|
additionalData: "null"
|
|
|
|
|
},
|
|
|
|
|
caption: '',
|
|
|
|
|
cover: null
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** Using Image plugin make method */
|
|
|
|
|
var image = ceImage.make(data);
|
|
|
|
|
|
|
|
|
|
return image;
|
2017-01-12 14:56:06 +01:00
|
|
|
|
|
2017-01-26 01:47:19 +01:00
|
|
|
|
},
|
2017-01-12 14:56:06 +01:00
|
|
|
|
|
|
|
|
|
|
2017-01-26 01:47:19 +01:00
|
|
|
|
/**
|
|
|
|
|
* Direct upload from pasted path
|
|
|
|
|
* @param path
|
|
|
|
|
*/
|
|
|
|
|
uploadImage : function(path) {
|
|
|
|
|
|
|
|
|
|
var ajaxUrl = location.protocol + '//' + location.hostname + ':32769',
|
|
|
|
|
file,
|
|
|
|
|
image,
|
|
|
|
|
current = codex.content.currentNode,
|
|
|
|
|
beforeSend,
|
|
|
|
|
success_callback;
|
|
|
|
|
|
|
|
|
|
/** When image is uploaded to redactors folder */
|
|
|
|
|
success_callback = function(data) {
|
|
|
|
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
return;
|
|
|
|
|
var file = JSON.parse(data);
|
|
|
|
|
image = ceImage.urlPastedCallbacks.uploadedImage(file.filename);
|
|
|
|
|
codex.content.switchBlock(current, image, 'image');
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** Before sending XMLHTTP request */
|
|
|
|
|
beforeSend = function() {
|
|
|
|
|
var content = current.querySelector('.ce-block__content');
|
|
|
|
|
content.classList.add('ce-plugin-image__loader');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** Preparing data for XMLHTTP */
|
|
|
|
|
var data = {
|
|
|
|
|
url: '/club/fetchImage',
|
|
|
|
|
type: "POST",
|
|
|
|
|
data : {
|
|
|
|
|
url: path
|
|
|
|
|
},
|
|
|
|
|
beforeSend : beforeSend,
|
|
|
|
|
success : success_callback
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
codex.core.ajax(data);
|
|
|
|
|
}
|
|
|
|
|
};
|
2017-01-12 14:56:06 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
return image;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 01:47:19 +01:00
|
|
|
|
})({});
|