307 lines
12 KiB
JavaScript
307 lines
12 KiB
JavaScript
/**
|
|
* ImageText-Editor
|
|
* Stellt die Funktionalität für die Bearbeitung des zusammengesetzten Editors Bild + Text zur Verfügung
|
|
*
|
|
* Created by CS medien- & kommunikationssysteme.
|
|
* @author Christian Steinle
|
|
* @date 13.10.2016
|
|
*
|
|
* @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
|
|
*/
|
|
|
|
var ImageText = {
|
|
textEditor: null,
|
|
editorImage: null,
|
|
|
|
textInput: null,
|
|
nameInput: null,
|
|
extensionInput: null,
|
|
origNameInput: null,
|
|
titleInput: null,
|
|
formatInput: null,
|
|
topInput: null,
|
|
leftInput: null,
|
|
heightInput: null,
|
|
widthInput: null,
|
|
uploadFileInput: null,
|
|
|
|
placeHolderElement: null,
|
|
imageElement: null,
|
|
previewElement: null,
|
|
coverElement: null,
|
|
coverTopElement: null,
|
|
coverRightElement: null,
|
|
coverBottomElement: null,
|
|
coverLeftElement: null,
|
|
|
|
previewWidth: 0,
|
|
previewHeight: 0,
|
|
imageWidth: 0,
|
|
imageHeight: 0,
|
|
imageFormat: 0,
|
|
coverTop: 0,
|
|
coverLeft: 0,
|
|
coverWidth: 0,
|
|
coverHeight: 0,
|
|
minWidth: 0,
|
|
minHeight: 0,
|
|
|
|
uploadFileName: '',
|
|
uploadFileExtension: '',
|
|
|
|
init: function () {
|
|
ImageText.initElements();
|
|
},
|
|
|
|
initElements: function () {
|
|
ImageText.textInput = $('#text');
|
|
ImageText.nameInput = $('#imageName');
|
|
ImageText.extensionInput = $('#imageExtension');
|
|
ImageText.origNameInput = $('#imageOrigName');
|
|
ImageText.titleInput = $('#imageTitle');
|
|
ImageText.formatInput = $('#imageFormat');
|
|
ImageText.topInput = $('#imageTop');
|
|
ImageText.leftInput = $('#imageLeft');
|
|
ImageText.heightInput = $('#imageHeight');
|
|
ImageText.widthInput = $('#imageWidth');
|
|
ImageText.uploadFileInput = $('#changeUploadFile');
|
|
|
|
ImageText.placeHolderElement = $('#csEditorImagePlaceholder');
|
|
ImageText.imageElement = $('#csEditorImage');
|
|
ImageText.previewElement = $('#csEditorImagePreview');
|
|
ImageText.coverElement = $('#csEditorImageCover');
|
|
ImageText.coverTopElement = $('#csEditorCoverTop');
|
|
ImageText.coverRightElement = $('#csEditorCoverRight');
|
|
ImageText.coverBottomElement = $('#csEditorCoverBottom');
|
|
ImageText.coverLeftElement = $('#csEditorCoverLeft');
|
|
},
|
|
|
|
fillEditorContent: function () {
|
|
if (CS.editorData === null || CS.editorHtml === '') {
|
|
window.setTimeout('ImageText.fillEditorContent()', 50);
|
|
return true;
|
|
}
|
|
ImageText.init();
|
|
|
|
$('#navID').val(csEditorParams.navID);
|
|
CS.editorData.text = '<p>' + CS.editorData.text + '</p>';
|
|
$.each(CS.editorData, function (key, value) {
|
|
$("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
|
|
});
|
|
|
|
ImageText.imageFormat = CS.editorData.imageWidth / CS.editorData.imageHeight;
|
|
ImageText.setFormatInput();
|
|
|
|
ImageText.formatInput.on('click', function () {
|
|
$(this).data('current', $(this).val());
|
|
});
|
|
|
|
ImageText.formatInput.on('change', function () {
|
|
var selectedFormat = $(this).val();
|
|
ImageText.setImageFormat(selectedFormat);
|
|
});
|
|
|
|
ImageText.textEditor = ImageText.textInput.ckeditor({
|
|
enterMode: CKEDITOR.ENTER_BR,
|
|
extraPlugins: 'divarea',
|
|
height: '240px',
|
|
removeButtons: 'Redo,Font,FontSize',
|
|
removePlugins: 'elementspath',
|
|
toolbarGroups: [
|
|
{name: 'clipboard', groups: ['clipboard', 'undo']},
|
|
{name: 'editing', groups: ['find', 'selection', 'spellchecker']},
|
|
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
|
|
{name: 'paragraph', groups: ['list']},
|
|
{name: 'links'}
|
|
]
|
|
}).editor;
|
|
|
|
ImageText.uploadFileInput.on('change', function (event) {
|
|
var file = event.currentTarget.files[0];
|
|
if ($.inArray(file.type, csEditorParams.imageTypes) === -1) {
|
|
alert('Wrong file type');
|
|
return false;
|
|
}
|
|
ImageText.imageFormat = 3 / 2;
|
|
ImageText.setFormatInput();
|
|
|
|
ImageText.uploadFileExtension = csEditorParams.fileExtensions[file.type];
|
|
var nameParts = file.name.split('.');
|
|
if (nameParts.length > 1) {
|
|
nameParts.pop();
|
|
}
|
|
ImageText.uploadFileName = nameParts.join('.');
|
|
|
|
var reader = new FileReader();
|
|
reader.onloadend = function () {
|
|
ImageText.editorImage.src = reader.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
ImageText.imageElement.attr('src', csEditorParams.mediaPrefix + csEditorParams.navID + '/' + CS.editorData.imageName + '.' + CS.editorData.imageExtension);
|
|
|
|
ImageText.editorImage = new Image();
|
|
ImageText.editorImage.onload = function () {
|
|
ImageText.imageWidth = ImageText.editorImage.naturalWidth;
|
|
ImageText.imageHeight = ImageText.editorImage.naturalHeight;
|
|
ImageText.previewWidth = csEditorParams.imageDimension.image.width;
|
|
ImageText.previewHeight = ImageText.previewWidth * ImageText.imageHeight / ImageText.imageWidth;
|
|
ImageText.coverLeft = parseFloat(CS.editorData.imageLeft);
|
|
ImageText.coverTop = parseFloat(CS.editorData.imageTop);
|
|
ImageText.coverWidth = parseFloat(CS.editorData.imageWidth);
|
|
ImageText.coverHeight = parseFloat(CS.editorData.imageHeight);
|
|
ImageText.minWidth = ImageText.previewWidth * ImageText.previewWidth / csEditorParams.imageDimension.orig.width;
|
|
ImageText.minHeight = ImageText.minWidth / ImageText.imageFormat;
|
|
|
|
if (ImageText.previewWidth > ImageText.imageWidth || ImageText.previewWidth / ImageText.imageFormat > ImageText.imageHeight) {
|
|
alert(csEditorLang.error.wrongImageDimension.replace('%width%', ImageText.previewWidth).replace('%height%', ImageText.previewWidth / ImageText.imageFormat));
|
|
ImageText.uploadFileExtension = '';
|
|
ImageText.uploadFileName = '';
|
|
return false;
|
|
}
|
|
|
|
if (ImageText.uploadFileName !== '') {
|
|
ImageText.nameInput.val(ImageText.uploadFileName);
|
|
ImageText.extensionInput.val(ImageText.uploadFileExtension);
|
|
ImageText.origNameInput.val(ImageText.uploadFileName);
|
|
ImageText.titleInput.val(ImageText.uploadFileName);
|
|
}
|
|
|
|
ImageText.previewElement.attr('src', ImageText.editorImage.src);
|
|
ImageText.setCover();
|
|
ImageText.setResizable();
|
|
ImageText.setDraggable();
|
|
};
|
|
ImageText.editorImage.src = csEditorParams.mediaPrefix + csEditorParams.navID + '/' + CS.editorData.imageName + '_orig.' + CS.editorData.imageExtension;
|
|
|
|
},
|
|
|
|
close: function () {
|
|
|
|
},
|
|
|
|
setCover: function () {
|
|
if (ImageText.coverHeight > ImageText.previewHeight) {
|
|
ImageText.coverHeight = ImageText.previewHeight;
|
|
ImageText.coverWidth = ImageText.coverHeight * ImageText.imageFormat;
|
|
}
|
|
|
|
ImageText.placeHolderElement.css({width: ImageText.previewWidth, height: ImageText.previewHeight});
|
|
ImageText.coverElement.css({
|
|
left: ImageText.coverLeft + 'px',
|
|
top: ImageText.coverTop + 'px',
|
|
width: ImageText.coverWidth,
|
|
height: ImageText.coverHeight
|
|
});
|
|
ImageText.coverTopElement.css({
|
|
left: 0,
|
|
top: 0,
|
|
width: ImageText.previewWidth,
|
|
height: ImageText.coverTop
|
|
});
|
|
ImageText.coverRightElement.css({
|
|
right: 0,
|
|
top: ImageText.coverTop + 'px',
|
|
width: ImageText.previewWidth - ImageText.coverLeft - ImageText.coverWidth,
|
|
height: ImageText.coverHeight
|
|
});
|
|
ImageText.coverBottomElement.css({
|
|
left: 0,
|
|
bottom: 0,
|
|
width: ImageText.previewWidth,
|
|
height: ImageText.previewHeight - ImageText.coverTop - ImageText.coverHeight
|
|
});
|
|
ImageText.coverLeftElement.css({
|
|
left: 0,
|
|
top: ImageText.coverTop + 'px',
|
|
width: ImageText.coverLeft,
|
|
height: ImageText.coverHeight
|
|
});
|
|
|
|
ImageText.topInput.val(ImageText.coverTop);
|
|
ImageText.leftInput.val(ImageText.coverLeft);
|
|
ImageText.heightInput.val(ImageText.coverHeight);
|
|
ImageText.widthInput.val(ImageText.coverWidth);
|
|
},
|
|
|
|
setFormatInput: function () {
|
|
if (ImageText.imageFormat < 1) {
|
|
ImageText.formatInput.val('portrait');
|
|
}
|
|
else if (ImageText.imageFormat === 1) {
|
|
ImageText.formatInput.val('square');
|
|
}
|
|
else if (ImageText.imageFormat > 1) {
|
|
ImageText.formatInput.val('landscape');
|
|
}
|
|
},
|
|
|
|
setResizable: function () {
|
|
ImageText.coverElement.resizable({
|
|
aspectRatio: false,
|
|
containment: ImageText.placeHolderElement,
|
|
handles: 'se',
|
|
minWidth: ImageText.minWidth,
|
|
create: function () {
|
|
if (ImageText.coverWidth < ImageText.minWidth) {
|
|
ImageText.coverWidth = ImageText.minWidth;
|
|
ImageText.coverHeight = ImageText.previewHeight * ImageText.previewHeight / ImageText.previewWidth;
|
|
ImageText.coverLeft = Math.min(ImageText.coverLeft, (ImageText.previewWidth - ImageText.coverWidth));
|
|
ImageText.coverTop = Math.min(ImageText.coverTop, (ImageText.previewHeight - ImageText.coverHeight));
|
|
}
|
|
ImageText.setCover();
|
|
},
|
|
resize: function (event, ui) {
|
|
ui.size.height = ui.size.width * ImageText.coverHeight / ImageText.coverWidth;
|
|
if (ui.position.top + ui.size.height > ImageText.previewHeight) {
|
|
ui.size.height = ImageText.previewHeight - ui.position.top;
|
|
ui.size.width = ui.size.height * ImageText.imageFormat;
|
|
}
|
|
ImageText.coverWidth = ui.size.width;
|
|
ImageText.coverHeight = ui.size.height;
|
|
ImageText.setCover();
|
|
}
|
|
})
|
|
},
|
|
|
|
setDraggable: function () {
|
|
ImageText.coverElement.draggable({
|
|
containment: ImageText.placeHolderElement,
|
|
cursor: 'crosshair',
|
|
drag: function (event, ui) {
|
|
ImageText.coverLeft = ui.position.left;
|
|
ImageText.coverTop = ui.position.top;
|
|
ImageText.setCover();
|
|
}
|
|
})
|
|
},
|
|
|
|
setImageFormat: function (selectedFormat) {
|
|
var tempFormat;
|
|
switch (selectedFormat) {
|
|
case 'portrait':
|
|
tempFormat = 2 / 3;
|
|
break;
|
|
case 'square':
|
|
tempFormat = 1;
|
|
break;
|
|
case 'landscape':
|
|
tempFormat = 3 / 2;
|
|
break;
|
|
}
|
|
|
|
if (ImageText.imageHeight < ImageText.minWidth / tempFormat) {
|
|
alert(csEditorLang.error.wrongImageDimension.replace('%width%', ImageText.previewWidth).replace('%height%', ImageText.previewWidth / tempFormat));
|
|
ImageText.formatInput.val(ImageText.formatInput.data('current'));
|
|
return false;
|
|
}
|
|
|
|
ImageText.imageFormat = tempFormat;
|
|
ImageText.minHeight = ImageText.minWidth / ImageText.imageFormat;
|
|
ImageText.coverHeight = ImageText.coverWidth / ImageText.imageFormat;
|
|
ImageText.setCover();
|
|
}
|
|
|
|
};
|