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