Erster Checkin für die neue Version 2.0
This commit is contained in:
306
js/imageTextEditor.js
Normal file
306
js/imageTextEditor.js
Normal file
@@ -0,0 +1,306 @@
|
||||
/**
|
||||
* 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();
|
||||
}
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user