/*globals define, window*/
define('de_epages/product/inc/variationuploadimages', [
'jquery',
'$dict!de_epages/product/inc/variationuploadimages',
'ep/ui/dialog',
'de_epages/presentation/ui/uploadimage'
], function ($, dict) {
'use strict';
var defaults = {
objectId: undefined,
optgroup: undefined,
productImageLarge: {},
masterProductImage: ''
};
/**
* Initiate a new varaitionuploadimages dialog
*
* @since 6.17.2
* @cfg {Object} options Options to pass to the setup
* @cfg {Integer} options.objectId=undefined ObjectID
* @cfg {String} options.optgroup=undefined HTML fo building the attribute select box
* @cfg {Object} options.productImageLarge={} Dimensions of the resulting product image
* @cfg {Integer} options.productImageLarge.width Width of the resulting product image
* @cfg {Integer} options.productImageLarge.height Height of the resulting product image
* @cfg {String} options.masterProductImage='' Path to the master product's image
* @return {Function}
*/
return function (options) {
var optionSelected,
valueID,
attr,
o = $.extend(true, {}, defaults, options),
uploadData = {
ObjectID: o.objectId,
ChangeAction: 'JSONUploadImageForSameVariations',
SCALE_WIDTH_l: o.productImageLarge.width,
SCALE_HEIGHT_l: o.productImageLarge.height,
SCALE_WIDTH_m: 500,
SCALE_HEIGHT_m: 500,
SCALE_QUALITY_m: 30,
SCALE_WIDTH_ms: 200,
SCALE_HEIGHT_ms: 200,
SCALE_WIDTH_ml: 1000,
SCALE_HEIGHT_ml: 1000,
SCALE_QUALITY_ml: 30,
SCALE_WIDTH_s: 100,
SCALE_HEIGHT_s: 100,
SCALE_WIDTH_h: 150,
SCALE_HEIGHT_h: 150,
SCALE_WIDTH_xs: 50,
SCALE_HEIGHT_xs: 33,
SCALE_NAME_m: 'ImageMedium',
SCALE_NAME_ms: 'ImageMediumSmall',
SCALE_NAME_ml: 'ImageMediumLarge',
SCALE_NAME_s: 'ImageSmall',
SCALE_NAME_h: 'ImageHotDeal'
},
optionsContainer = $('<div class="ep-uiUploadImage-Options" />'),
useImageButton = $('<button class="de_epages-presentationUiUploader-button Disabled" disabled="disabled">{UseImage}</button>'),
confirmation = $('<div class="DialogMessage MessageConfirm UploadImageConfirmation SmallTopMargin" style="display: none;"><p>{ImageIsUsed}</p></div>'),
attributeSelect = $('<select size="20" class="FullWidth MaxWidth200" />'),
left = $('<div class="Left FloatLeft MaxWidth200"><h4>1. {SelectAValue}</h4></div>'),
right = $('<div class="Right FloatRight" />')
.presentationUiUploadImage({
title: '2. {UploadANewImage}',
subtitle: '{UploadANewImageInfo}',
uploadButtonText: '{UploadImage}',
confirmation: '{ImageUploaded}'
})
.append(
'<h4>{UseMainProductImage}</h4><div class="BottomPadding">{UseMainProductImageExplanation}</div>',
'<div class="ep-uiUploadImage-Container"><img src="' + o.masterProductImage + '" alt="" /></div>',
optionsContainer.append(useImageButton, confirmation)
),
dialog = $('<div class="LeftPaddingWide RightPaddingWide"><header class="BottomPadding TopPadding">{InfoText}</header></div>')
.append(left, right);
useImageButton.on('click', function () {
if (optionSelected && valueID && attr) {
$.ajax({
url: '?',
data: {
ChangeAction: 'JSONSetProductImageForSameVariations',
ObjectID: o.objectId,
Attribute: attr,
ValueID: valueID
},
dataType: 'json'
})
.done(function () {
confirmation.fadeIn('slow').delay(4000).fadeOut('slow');
});
}
});
attributeSelect.append(o.optgroup).on('change', function () {
optionSelected = $(this).find('option:selected');
if (optionSelected.length > 0) {
valueID = optionSelected.attr('value');
attr = optionSelected.parent().data('alias');
useImageButton.prop('disabled', false).removeClass('Disabled');
right.presentationUiUploadImage('option', {
uploadData: $.extend(uploadData, {
Attribute: attr,
ValueID: valueID
}),
imagePath: null
});
} else {
useImageButton.prop('disabled', true).addClass('Disabled');
right.presentationUiUploadImage('option', {
uploadData: null,
imagePath: null
});
}
}).appendTo(left);
dialog.uiDialog({
minWidth: 700,
title: dict.translate('UploadImages'),
modal: true,
buttons: [{
text: dict.translate('Close'),
click: function () {
dialog.uiDialog('close');
}
}],
beforeClose: function () {
// reload from server, ignore cache
// forceGet=false results in not opening the dialog. If someone knows why, give me a call.
window.location.reload(true);
}
}).dictParse(dict, true);
};
});