347 lines
14 KiB
JavaScript
347 lines
14 KiB
JavaScript
/**
|
|
* KeyVisual-Editor
|
|
* Stellt die Funktionalität für die Bearbeitung des KeyVisual-Bereichs zur Verfügung
|
|
*
|
|
* Created by CS medien- & kommunikationssysteme.
|
|
* @author Christian Steinle
|
|
* @date 13.12.2016
|
|
*
|
|
* @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
|
|
*/
|
|
|
|
var KeyVisual = {
|
|
type: '',
|
|
editorImages: null,
|
|
editorImage: null,
|
|
imageTypes: null,
|
|
imageParams: null,
|
|
origParams: null,
|
|
thumbParams: null,
|
|
fileExtension: null,
|
|
uploadFileName: '',
|
|
mediaPath: '',
|
|
chosenImageID: 0,
|
|
|
|
nameInput: null,
|
|
extensionInput: null,
|
|
origNameInput: null,
|
|
titleInput: null,
|
|
topInput: null,
|
|
leftInput: null,
|
|
heightInput: null,
|
|
widthInput: null,
|
|
uploadFileInput: null,
|
|
requestInput: null,
|
|
|
|
thumbElement: null,
|
|
typeChooser: 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,
|
|
placeHolderWidth: 0,
|
|
editorScale: 1,
|
|
|
|
init: function () {
|
|
KeyVisual.initElements();
|
|
KeyVisual.initVariables();
|
|
KeyVisual.initFunctions();
|
|
},
|
|
|
|
initElements: function () {
|
|
KeyVisual.thumbElement = $('#csEditorThumb');
|
|
KeyVisual.typeChooser = $('#Type');
|
|
KeyVisual.nameInput = $('#imageName');
|
|
KeyVisual.extensionInput = $('#imageExtension');
|
|
KeyVisual.origNameInput = $('#imageOrigName');
|
|
KeyVisual.titleInput = $('#imageTitle');
|
|
KeyVisual.placeHolderElement = $('#csEditorImagePlaceholder');
|
|
KeyVisual.imageElement = $('#csEditorImage');
|
|
KeyVisual.previewElement = $('#csEditorImagePreview');
|
|
KeyVisual.coverElement = $('#csEditorImageCover');
|
|
KeyVisual.coverTopElement = $('#csEditorCoverTop');
|
|
KeyVisual.coverRightElement = $('#csEditorCoverRight');
|
|
KeyVisual.coverBottomElement = $('#csEditorCoverBottom');
|
|
KeyVisual.coverLeftElement = $('#csEditorCoverLeft');
|
|
|
|
KeyVisual.topInput = $('#imageTop');
|
|
KeyVisual.leftInput = $('#imageLeft');
|
|
KeyVisual.heightInput = $('#imageHeight');
|
|
KeyVisual.widthInput = $('#imageWidth');
|
|
KeyVisual.uploadFileInput = $('#changeUploadFile');
|
|
KeyVisual.requestInput = $('#request');
|
|
},
|
|
|
|
initVariables: function () {
|
|
KeyVisual.type = CS.editorData.Type;
|
|
KeyVisual.editorImages = CS.editorData.images;
|
|
KeyVisual.imageParams = csEditorParams.imageDimension.keyVisual;
|
|
KeyVisual.origParams = csEditorParams.imageDimension.orig;
|
|
KeyVisual.thumbParams = csEditorParams.imageDimension.thumb;
|
|
KeyVisual.fileExtension = csEditorParams.fileExtensions;
|
|
KeyVisual.mediaPath = csEditorParams.mediaPrefix + csEditorParams.navID + '/';
|
|
KeyVisual.chosenImageID = CS.editorData.IDs[0];
|
|
KeyVisual.imageFormat = KeyVisual.imageParams.width / KeyVisual.imageParams.height;
|
|
KeyVisual.editorImages[0] = {};
|
|
$.each(KeyVisual.editorImages[KeyVisual.chosenImageID], function(key, value) {
|
|
KeyVisual.editorImages[0][key] = '0';
|
|
});
|
|
$('#navID').val(csEditorParams.navID);
|
|
},
|
|
|
|
initFunctions: function () {
|
|
KeyVisual.typeChooser.on('change', function () {
|
|
KeyVisual.type = $(this).val();
|
|
KeyVisual.showElementsForType();
|
|
})
|
|
},
|
|
|
|
fillEditorContent: function () {
|
|
if (CS.editorData === null || CS.editorHtml === '') {
|
|
window.setTimeout('KeyVisual.fillEditorContent()', 50);
|
|
return true;
|
|
}
|
|
|
|
KeyVisual.init();
|
|
KeyVisual.fillThumbs();
|
|
|
|
$.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);
|
|
});
|
|
|
|
KeyVisual.uploadFileInput.on('change', function (event) {
|
|
var file = event.currentTarget.files[0];
|
|
if ($.inArray(file.type, csEditorParams.imageTypes) === -1) {
|
|
alert('Wrong file type');
|
|
return false;
|
|
}
|
|
|
|
KeyVisual.uploadFileExtension = csEditorParams.fileExtensions[file.type];
|
|
var nameParts = file.name.split('.');
|
|
if (nameParts.length > 1) {
|
|
nameParts.pop();
|
|
}
|
|
KeyVisual.uploadFileName = nameParts.join('.');
|
|
|
|
var reader = new FileReader();
|
|
reader.onloadend = function () {
|
|
KeyVisual.editorImage.src = reader.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
KeyVisual.imageElement.attr('src', csEditorParams.mediaPrefix + csEditorParams.navID + '/' + CS.editorData.imageName + '.' + CS.editorData.imageExtension);
|
|
|
|
KeyVisual.editorImage = new Image();
|
|
KeyVisual.editorImage.onload = function () {
|
|
KeyVisual.placeHolderWidth = KeyVisual.placeHolderElement.innerWidth();
|
|
KeyVisual.editorScale = csEditorParams.imageDimension.keyVisual.width / KeyVisual.placeHolderWidth;
|
|
|
|
KeyVisual.imageWidth = KeyVisual.editorImage.naturalWidth;
|
|
KeyVisual.imageHeight = KeyVisual.editorImage.naturalHeight;
|
|
KeyVisual.previewWidth = KeyVisual.placeHolderWidth;
|
|
KeyVisual.previewHeight = KeyVisual.placeHolderWidth * KeyVisual.imageHeight / KeyVisual.imageWidth;
|
|
|
|
KeyVisual.coverLeft = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageLeft) / KeyVisual.editorScale;
|
|
KeyVisual.coverTop = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageTop) / KeyVisual.editorScale;
|
|
KeyVisual.coverWidth = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageWidth) / KeyVisual.editorScale;
|
|
KeyVisual.coverHeight = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageHeight) / KeyVisual.editorScale;
|
|
KeyVisual.minWidth = KeyVisual.previewWidth * csEditorParams.imageDimension.keyVisual.width / csEditorParams.imageDimension.orig.width;
|
|
KeyVisual.minHeight = KeyVisual.minWidth * csEditorParams.imageDimension.keyVisual.height / csEditorParams.imageDimension.keyVisual.width;
|
|
|
|
if (KeyVisual.previewWidth > KeyVisual.imageWidth || KeyVisual.previewHeight > KeyVisual.imageHeight) {
|
|
alert(csEditorLang.error.wrongImageDimension.replace('%width%', csEditorParams.imageDimension.keyVisual.width).replace('%height%', csEditorParams.imageDimension.keyVisual.height));
|
|
KeyVisual.uploadFileExtension = '';
|
|
KeyVisual.uploadFileName = '';
|
|
return false;
|
|
}
|
|
|
|
if (KeyVisual.uploadFileName !== '') {
|
|
KeyVisual.nameInput.val(KeyVisual.uploadFileName);
|
|
KeyVisual.extensionInput.val(KeyVisual.uploadFileExtension);
|
|
KeyVisual.origNameInput.val(KeyVisual.uploadFileName);
|
|
KeyVisual.titleInput.val(KeyVisual.uploadFileName);
|
|
}
|
|
|
|
KeyVisual.previewElement.attr('src', KeyVisual.editorImage.src);
|
|
KeyVisual.setCover();
|
|
KeyVisual.setResizable();
|
|
KeyVisual.setDraggable();
|
|
};
|
|
},
|
|
|
|
fillThumbs: function () {
|
|
$.each(KeyVisual.editorImages, function (key, value) {
|
|
if (key === '0') {
|
|
return;
|
|
}
|
|
KeyVisual.thumbElement.append('<img onclick="KeyVisual.chosenImageID = ' + key + '; KeyVisual.fillImageEditArea();" class="formNext" src="' + KeyVisual.mediaPath + value.imageName + '_thumb.' + value.imageExtension + '" width="' + KeyVisual.thumbParams.width + '"/>');
|
|
});
|
|
KeyVisual.thumbElement.append('<img onclick="KeyVisual.chosenImageID = 0; KeyVisual.fillImageEditArea();" class="formNext" src="' + KeyVisual.imageParams.standardImage + '" width="' + KeyVisual.thumbParams.width + '"/>');
|
|
|
|
KeyVisual.showElementsForType();
|
|
},
|
|
|
|
fillImageEditArea: function () {
|
|
if (KeyVisual.chosenImageID > 0) {
|
|
KeyVisual.requestInput.val('updateImage');
|
|
}
|
|
else {
|
|
KeyVisual.requestInput.val('appendKeyVisual');
|
|
}
|
|
|
|
var image = KeyVisual.editorImages[KeyVisual.chosenImageID];
|
|
$.each(image, function (key, value) {
|
|
$("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
|
|
});
|
|
|
|
KeyVisual.editorImage.src = csEditorParams.mediaPrefix + csEditorParams.navID + '/' + image.imageName + '_orig.' + image.imageExtension;
|
|
},
|
|
|
|
showForSingle: function () {
|
|
$('img:not(:first)', KeyVisual.thumbElement).hide();
|
|
$('.kenburns').hide();
|
|
$('select', '.kenburns').prop('disabled', true);
|
|
},
|
|
|
|
showForKenburns: function () {
|
|
KeyVisual.showForMultiple();
|
|
$('.kenburns').show();
|
|
$('select', '.kenburns').prop('disabled', false);
|
|
},
|
|
|
|
showForSlider: function () {
|
|
KeyVisual.showForMultiple();
|
|
$('.kenburns').hide();
|
|
$('select', '.kenburns').prop('disabled', true);
|
|
},
|
|
|
|
showForMultiple: function () {
|
|
$('img', KeyVisual.thumbElement).show();
|
|
},
|
|
|
|
showElementsForType: function () {
|
|
switch (KeyVisual.type) {
|
|
case 'Single':
|
|
KeyVisual.showForSingle();
|
|
break;
|
|
case 'Kenburns':
|
|
KeyVisual.showForKenburns();
|
|
break;
|
|
case 'Slider':
|
|
KeyVisual.showForSlider();
|
|
break;
|
|
}
|
|
},
|
|
|
|
setCover: function () {
|
|
if (KeyVisual.coverHeight > KeyVisual.previewHeight) {
|
|
KeyVisual.coverHeight = KeyVisual.previewHeight;
|
|
KeyVisual.coverWidth = KeyVisual.coverHeight * KeyVisual.imageFormat;
|
|
}
|
|
|
|
KeyVisual.placeHolderElement.css({
|
|
width: KeyVisual.placeHolderWidth,
|
|
height: KeyVisual.placeHolderWidth * KeyVisual.editorImage.naturalHeight / KeyVisual.editorImage.naturalWidth
|
|
});
|
|
KeyVisual.coverElement.css({
|
|
left: KeyVisual.coverLeft + 'px',
|
|
top: KeyVisual.coverTop + 'px',
|
|
width: KeyVisual.coverWidth,
|
|
height: KeyVisual.coverHeight
|
|
});
|
|
KeyVisual.coverTopElement.css({
|
|
left: 0,
|
|
top: 0,
|
|
width: KeyVisual.previewWidth,
|
|
height: KeyVisual.coverTop
|
|
});
|
|
KeyVisual.coverRightElement.css({
|
|
right: 0,
|
|
top: KeyVisual.coverTop + 'px',
|
|
width: KeyVisual.previewWidth - KeyVisual.coverLeft - KeyVisual.coverWidth,
|
|
height: KeyVisual.coverHeight
|
|
});
|
|
KeyVisual.coverBottomElement.css({
|
|
left: 0,
|
|
bottom: 0,
|
|
width: KeyVisual.previewWidth,
|
|
height: KeyVisual.previewHeight - KeyVisual.coverTop - KeyVisual.coverHeight
|
|
});
|
|
KeyVisual.coverLeftElement.css({
|
|
left: 0,
|
|
top: KeyVisual.coverTop + 'px',
|
|
width: KeyVisual.coverLeft,
|
|
height: KeyVisual.coverHeight
|
|
});
|
|
|
|
KeyVisual.topInput.val(KeyVisual.coverTop * KeyVisual.editorScale);
|
|
KeyVisual.leftInput.val(KeyVisual.coverLeft * KeyVisual.editorScale);
|
|
KeyVisual.heightInput.val(KeyVisual.coverHeight * KeyVisual.editorScale);
|
|
KeyVisual.widthInput.val(KeyVisual.coverWidth * KeyVisual.editorScale);
|
|
console.log(KeyVisual.heightInput);
|
|
console.log(KeyVisual.heightInput.val());
|
|
console.log(KeyVisual.widthInput);
|
|
console.log(KeyVisual.widthInput.val());
|
|
},
|
|
|
|
setResizable: function () {
|
|
KeyVisual.coverElement.resizable({
|
|
aspectRatio: false,
|
|
containment: KeyVisual.placeHolderElement,
|
|
handles: 'se',
|
|
minWidth: KeyVisual.minWidth,
|
|
create: function () {
|
|
if (KeyVisual.coverWidth < KeyVisual.minWidth) {
|
|
KeyVisual.coverWidth = KeyVisual.minWidth;
|
|
KeyVisual.coverHeight = KeyVisual.minHeight;
|
|
KeyVisual.coverLeft = Math.min(KeyVisual.coverLeft, (KeyVisual.previewWidth - KeyVisual.coverWidth));
|
|
KeyVisual.coverTop = Math.min(KeyVisual.coverTop, (KeyVisual.previewHeight - KeyVisual.coverHeight));
|
|
}
|
|
KeyVisual.setCover();
|
|
},
|
|
resize: function (event, ui) {
|
|
ui.size.height = ui.size.width * KeyVisual.coverHeight / KeyVisual.coverWidth;
|
|
if (ui.position.top + ui.size.height > KeyVisual.previewHeight) {
|
|
ui.size.height = KeyVisual.previewHeight - ui.position.top;
|
|
ui.size.width = ui.size.height * KeyVisual.imageFormat;
|
|
}
|
|
KeyVisual.coverWidth = ui.size.width;
|
|
KeyVisual.coverHeight = ui.size.height;
|
|
KeyVisual.setCover();
|
|
}
|
|
})
|
|
},
|
|
|
|
setDraggable: function () {
|
|
KeyVisual.coverElement.draggable({
|
|
containment: KeyVisual.placeHolderElement,
|
|
cursor: 'crosshair',
|
|
drag: function (event, ui) {
|
|
KeyVisual.coverLeft = ui.position.left;
|
|
KeyVisual.coverTop = ui.position.top;
|
|
KeyVisual.setCover();
|
|
}
|
|
})
|
|
},
|
|
|
|
close: function () {
|
|
|
|
}
|
|
}; |