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',
|
2017-01-27 19:10:04 +01:00
|
|
|
|
imagePreview : 'ce-image__preview',
|
|
|
|
|
selectorHolder: 'ce-settings-checkbox',
|
|
|
|
|
selectorButton: 'ce-settings-checkbox__toggler',
|
|
|
|
|
settingsItem: 'ce-image-settings__item',
|
|
|
|
|
imageWrapperBordered : 'ce-image__wrapper--bordered',
|
|
|
|
|
toggled : 'ce-image-settings__item--toggled'
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
};
|
2017-01-28 15:00:02 +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-27 19:10:04 +01:00
|
|
|
|
image : function(file, styles) {
|
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-27 19:10:04 +01:00
|
|
|
|
styles.map(function(item) {
|
|
|
|
|
image.classList.add(item);
|
|
|
|
|
});
|
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
|
|
|
|
|
*/
|
2017-01-27 19:10:04 +01:00
|
|
|
|
makeImage : function(data, imageTypeClasses, stretched, bordered) {
|
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-27 19:10:04 +01:00
|
|
|
|
image = ui_.image(file, imageTypeClasses),
|
2017-01-26 00:41:04 +01:00
|
|
|
|
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;
|
2017-01-27 19:10:04 +01:00
|
|
|
|
wrapper.dataset.bordered = bordered;
|
|
|
|
|
|
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
|
|
|
|
/**
|
|
|
|
|
* @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-27 19:10:04 +01:00
|
|
|
|
// el - settings element
|
|
|
|
|
|
|
|
|
|
switch (type) {
|
|
|
|
|
case 'bordered':
|
|
|
|
|
methods_.toggleBordered(type, this); break;
|
|
|
|
|
case 'stretched':
|
|
|
|
|
methods_.toggleStretched(type, this); break;
|
|
|
|
|
}
|
|
|
|
|
|
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-27 19:10:04 +01:00
|
|
|
|
toggleBordered : function(type, clickedSettingsItem ) {
|
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-27 19:10:04 +01:00
|
|
|
|
img = ui_.getImage(current),
|
2017-01-26 00:41:04 +01:00
|
|
|
|
wrapper = current.querySelector('.' + elementClasses_.imageWrapper);
|
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
if (!img) {
|
2017-01-26 00:41:04 +01:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
/**
|
|
|
|
|
* Add classes to the IMG tag and to the Settings element
|
|
|
|
|
*/
|
|
|
|
|
img.classList.toggle(elementClasses_.imageWrapperBordered);
|
|
|
|
|
clickedSettingsItem.classList.toggle(elementClasses_.toggled);
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
/**
|
|
|
|
|
* Save settings in dataset
|
|
|
|
|
*/
|
|
|
|
|
if (img.classList.contains(elementClasses_.imageWrapperBordered)) {
|
|
|
|
|
wrapper.dataset.bordered = true;
|
|
|
|
|
} else {
|
|
|
|
|
wrapper.dataset.bordered = false;
|
|
|
|
|
}
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
setTimeout(function() {
|
|
|
|
|
codex.toolbar.settings.close();
|
|
|
|
|
}, 200);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
},
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
toggleStretched : function( type, clickedSettingsItem ) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
var current = codex.content.currentNode,
|
|
|
|
|
blockContent = current.childNodes[0],
|
|
|
|
|
img = ui_.getImage(current),
|
|
|
|
|
wrapper = current.querySelector('.' + elementClasses_.imageWrapper);
|
|
|
|
|
|
|
|
|
|
if (!img) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** Clear classList */
|
|
|
|
|
blockContent.classList.add(elementClasses_.blockStretched);
|
|
|
|
|
img.classList.toggle(elementClasses_.uploadedImage.stretched);
|
|
|
|
|
img.classList.toggle(elementClasses_.uploadedImage.centered);
|
|
|
|
|
|
|
|
|
|
clickedSettingsItem.classList.toggle(elementClasses_.toggled);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
if (img.classList.contains(elementClasses_.uploadedImage.stretched)) {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
wrapper.dataset.stretched = true;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
} else {
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
wrapper.dataset.stretched = false;
|
2017-01-27 19:10:04 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
}
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
setTimeout(function() {
|
|
|
|
|
codex.toolbar.settings.close();
|
|
|
|
|
}, 200);
|
|
|
|
|
|
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-26 00:41:04 +01:00
|
|
|
|
/**
|
|
|
|
|
* 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-27 19:10:04 +01:00
|
|
|
|
var holder,
|
|
|
|
|
classes = [];
|
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-27 19:10:04 +01:00
|
|
|
|
if (data.border) {
|
|
|
|
|
classes.push(elementClasses_.imageWrapperBordered);
|
|
|
|
|
}
|
|
|
|
|
|
2017-01-26 00:41:04 +01:00
|
|
|
|
if ( data.isstretch || data.isstretch === 'true') {
|
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
classes.push(elementClasses_.uploadedImage.stretched);
|
|
|
|
|
holder = ui_.makeImage(data, classes, 'true', data.border);
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
2017-01-18 16:12:50 +01:00
|
|
|
|
} else {
|
2017-01-26 00:41:04 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
classes.push(elementClasses_.uploadedImage.centered);
|
|
|
|
|
holder = ui_.makeImage(data, classes, 'false', data.border);
|
2017-01-26 00:41:04 +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
|
|
|
|
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,
|
2017-01-27 19:10:04 +01:00
|
|
|
|
border : content.dataset.bordered === 'true' ? true : false,
|
2017-01-26 00:41:04 +01:00
|
|
|
|
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
|
|
|
|
|
},
|
2017-01-28 15:00:02 +01:00
|
|
|
|
caption : caption.innerHTML,
|
2017-01-26 00:41:04 +01:00
|
|
|
|
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-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-27 19:10:04 +01:00
|
|
|
|
var currentNode = codex.content.currentNode,
|
|
|
|
|
wrapper = currentNode.querySelector('.' + elementClasses_.imageWrapper),
|
|
|
|
|
holder = document.createElement('DIV'),
|
2017-01-18 16:12:50 +01:00
|
|
|
|
types = {
|
2017-01-27 19:10:04 +01:00
|
|
|
|
stretched : "На всю ширину",
|
|
|
|
|
bordered : "Добавить рамку"
|
2017-01-18 16:12:50 +01:00
|
|
|
|
},
|
2017-01-27 19:10:04 +01:00
|
|
|
|
currentImageWrapper = currentNode.querySelector('.' + elementClasses_.imageWrapper ),
|
|
|
|
|
currentImageSettings = currentImageWrapper.dataset;
|
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-27 19:10:04 +01:00
|
|
|
|
/**
|
|
|
|
|
* Settings template
|
|
|
|
|
*/
|
|
|
|
|
var settingsItem = document.createElement('DIV'),
|
|
|
|
|
selectorsHolder = document.createElement('SPAN'),
|
|
|
|
|
selectorsButton = document.createElement('SPAN');
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
settingsItem.classList.add(elementClasses_.settingsItem);
|
|
|
|
|
selectorsHolder.classList.add(elementClasses_.selectorHolder);
|
|
|
|
|
selectorsButton.classList.add(elementClasses_.selectorButton);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
selectorsHolder.appendChild(selectorsButton);
|
|
|
|
|
settingsItem.appendChild(selectorsHolder);
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
selectTypeButton = document.createTextNode(types[type]);
|
|
|
|
|
settingsItem.appendChild(selectTypeButton);
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Activate previously selected settings
|
|
|
|
|
*/
|
|
|
|
|
if ( currentImageSettings[type] == 'true' ){
|
|
|
|
|
settingsItem.classList.add(elementClasses_.toggled);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
methods_.addSelectTypeClickListener(settingsItem, type);
|
|
|
|
|
|
|
|
|
|
holder.appendChild(settingsItem);
|
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-18 16:12:50 +01:00
|
|
|
|
return image;
|
2016-12-25 15:41:57 +01:00
|
|
|
|
|
2017-01-27 19:10:04 +01:00
|
|
|
|
})({});
|