').css({
+ display: 'none'
+ }).appendTo($('body'));
+
+ this.iframe = $('
', {
+ id: 'upload_iframe',
+ name: 'upload_iframe'
+ }).appendTo(this.wrapper);
+
+ this.form = $('
', {
+ id: 'swatch_form_image_upload',
+ name: 'swatch_form_image_upload',
+ target: 'upload_iframe',
+ method: 'post',
+ enctype: 'multipart/form-data',
+ class: 'ignore-validate',
+ action: config.uploadActionUrl
+ }).appendTo(this.wrapper);
+
+ this.inputFile = $('
', {
+ type: 'file',
+ name: 'datafile',
+ class: 'swatch_option_file'
+ }).appendTo(this.form);
+
+ $('
', {
+ type: 'hidden',
+ name: 'form_key',
+ value: FORM_KEY
+ }).appendTo(this.form);
+ }
+ };
+
+ /**
+ * Create swatch components
+ */
+ swatchComponents.create();
+
+ /**
+ * Register event for swatch input[type=file] change
+ */
+ swatchComponents.inputFile.change(function () {
+ var container = $('#' + $(this).attr('data-called-by')).parents().eq(2).children('.swatch_window'),
+
+ /**
+ * @this {iframe}
+ */
+ iframeHandler = function () {
+ var imageParams = $.parseJSON($(this).contents().find('body').html()),
+ fullMediaUrl = imageParams['swatch_path'] + imageParams['file_path'];
+
+ container.prev('input').val(imageParams['file_path']);
+ container.css({
+ 'background-image': 'url(' + fullMediaUrl + ')',
+ 'background-size': 'cover'
+ });
+ container.parent().removeClass('unavailable');
+ };
+
+ swatchComponents.iframe.off('load');
+ swatchComponents.iframe.load(iframeHandler);
+ swatchComponents.form.submit();
+ $(this).val('');
+ });
+
+ /**
+ * Register event for choose "upload image" option
+ */
+ $(document).on('click', '.btn_choose_file_upload', function () {
+ swatchComponents.inputFile.attr('data-called-by', $(this).attr('id'));
+ swatchComponents.inputFile.click();
+ });
+
+ /**
+ * Register event for remove option
+ */
+ $(document).on('click', '.btn_remove_swatch', function () {
+ var optionPanel = $(this).parents().eq(2);
+
+ optionPanel.children('input').val('');
+ optionPanel.children('.swatch_window').css('background', '');
+
+ optionPanel.hide();
+ optionPanel.addClass('unavailable');
+ });
+
+ /**
+ * Toggle color upload chooser
+ */
+ $(document).on('click', '.swatch_window', function () {
+ $(this).next('div').toggle();
+ });
+ });
};
});
diff --git a/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml b/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml
index f3fff8e081c3d..b8054564f60a2 100644
--- a/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml
+++ b/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml
@@ -6,12 +6,17 @@
?>
-
diff --git a/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js b/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js
index 98e9a9211aa4c..03eeded41d6e1 100644
--- a/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js
+++ b/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js
@@ -3,7 +3,12 @@
* See COPYING.txt for license details.
*/
-define(['jquery', 'underscore', 'mage/gallery/preloadImages', 'jquery/ui'], function ($, _, preloadImages) {
+define([
+ 'jquery',
+ 'underscore',
+ 'mage/gallery/preloadImages',
+ 'jquery/ui'
+], function ($, _, preloadImages) {
'use strict';
/**
@@ -11,24 +16,39 @@ define(['jquery', 'underscore', 'mage/gallery/preloadImages', 'jquery/ui'], func
* @param {String} query
* @returns {{}}
*/
- $.parseParams = function (query) {
+ function parseParams(query) {
var re = /([^&=]+)=?([^&]*)/g,
decodeRE = /\+/g, // Regex for replacing addition symbol with a space
+
+ /**
+ * Return decoded URI component
+ *
+ * @param {String} str
+ * @returns {String}
+ */
decode = function (str) {
- return decodeURIComponent(str.replace(decodeRE, " "));
+ return decodeURIComponent(str.replace(decodeRE, ' '));
},
- params = {}, e;
+ params = {},
+ e,
+ k,
+ v;
+
+ while ((e = re.exec(query)) != null) {
+
+ k = decode(e[1]);
+ v = decode(e[2]);
- while (e = re.exec(query)) {
- var k = decode(e[1]), v = decode(e[2]);
if (k.substring(k.length - 2) === '[]') {
k = k.substring(0, k.length - 2);
(params[k] || (params[k] = [])).push(v);
+ } else {
+ params[k] = v;
}
- else params[k] = v;
}
+
return params;
- };
+ }
/**
* Render tooltips by attributes (only to up).
@@ -41,7 +61,7 @@ define(['jquery', 'underscore', 'mage/gallery/preloadImages', 'jquery/ui'], func
$.widget('custom.SwatchRendererTooltip', {
options: {
delay: 200, //how much ms before tooltip to show
- tooltip_class: 'swatch-option-tooltip' //configurable, but remember about css
+ tooltipClass: 'swatch-option-tooltip' //configurable, but remember about css
},
/**
@@ -50,52 +70,60 @@ define(['jquery', 'underscore', 'mage/gallery/preloadImages', 'jquery/ui'], func
_init: function () {
var $widget = this,
$this = this.element,
- $element = $('.' + $widget.options.tooltip_class),
+ $element = $('.' + $widget.options.tooltipClass),
timer,
type = parseInt($this.attr('option-type'), 10),
label = $this.attr('option-label'),
thumb = $this.attr('option-tooltip-thumb'),
- value = $this.attr('option-tooltip-value');
-
- if ($element.size() == 0) {
- $element = $('
');
+ value = $this.attr('option-tooltip-value'),
+ $image,
+ $title,
+ $corner;
+
+ if (!$element.size()) {
+ $element = $('
'
+ );
$('body').append($element);
}
- var $image = $element.find('.image'),
- $title = $element.find('.title'),
- $corner = $element.find('.corner');
+ $image = $element.find('.image');
+ $title = $element.find('.title');
+ $corner = $element.find('.corner');
$this.hover(function () {
if (!$this.hasClass('disabled')) {
timer = setTimeout(
function () {
+ var leftOpt = null,
+ leftCorner = 0,
+ left,
+ $window;
- // Image
- if (type == 2) {
+ if (type === 2) {
+ // Image
$image.css({
'background': 'url("' + thumb + '") no-repeat center', //Background case
'background-size': 'initial'
});
$image.show();
- }
-
- // Color
- else if (type == 1) {
- $image.css({background: value});
+ } else if (type === 1) {
+ // Color
+ $image.css({
+ background: value
+ });
$image.show();
- }
-
- // Textual or Clear
- else if (type == 0 || type == 3) {
+ } else if (type === 0 || type === 3) {
+ // Default
$image.hide();
}
$title.text(label);
- var leftOpt = $this.offset().left,
- left = leftOpt + ($this.width() / 2) - ($element.width() / 2),
- $window = $(window);
+ leftOpt = $this.offset().left;
+ left = leftOpt + $this.width() / 2 - $element.width() / 2;
+ $window = $(window);
// the numbers (5 and 5) is magick constants for offset from left or right page
if (left < 0) {
@@ -105,11 +133,12 @@ define(['jquery', 'underscore', 'mage/gallery/preloadImages', 'jquery/ui'], func
}
// the numbers (6, 3 and 18) is magick constants for offset tooltip
- var leftCorner = 0;
+ leftCorner = 0;
+
if ($element.width() < $this.width()) {
leftCorner = $element.width() / 2 - 3;
} else {
- leftCorner = (leftOpt > left ? leftOpt - left : left - leftOpt) + ($this.width() / 2) - 6;
+ leftCorner = (leftOpt > left ? leftOpt - left : left - leftOpt) + $this.width() / 2 - 6;
}
$corner.css({
@@ -164,16 +193,38 @@ define(['jquery', 'underscore', 'mage/gallery/preloadImages', 'jquery/ui'], func
moreButton: 'swatch-more',
loader: 'swatch-option-loading'
},
- jsonConfig: {}, // option's json config
- jsonSwatchConfig: {}, // swatch's json config
- selectorProduct: '.product-info-main', // selector of parental block of prices and swatches (need to know where to seek for price block)
- selectorProductPrice: '[data-role=priceBox]', // selector of price wrapper (need to know where set price)
- numberToShow: false, // number of controls to show (false or zero = show all)
- onlySwatches: false, // show only swatch controls
- enableControlLabel: true, // enable label for control
- moreButtonText: 'More', // text for more button
- mediaCallback: '', // Callback url for media
- mediaGalleryInitial: [{}] // Cache for BaseProduct images. Needed when option unset
+ // option's json config
+ jsonConfig: {},
+
+ // swatch's json config
+ jsonSwatchConfig: {},
+
+ // selector of parental block of prices and swatches (need to know where to seek for price block)
+ selectorProduct: '.product-info-main',
+
+ // selector of price wrapper (need to know where set price)
+ selectorProductPrice: '[data-role=priceBox]',
+
+ //selector of product images gallery wrapper
+ mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
+
+ // number of controls to show (false or zero = show all)
+ numberToShow: false,
+
+ // show only swatch controls
+ onlySwatches: false,
+
+ // enable label for control
+ enableControlLabel: true,
+
+ // text for more button
+ moreButtonText: 'More',
+
+ // Callback url for media
+ mediaCallback: '',
+
+ // Cache for BaseProduct images. Needed when option unset
+ mediaGalleryInitial: [{}]
},
/**
@@ -189,7 +240,7 @@ define(['jquery', 'underscore', 'mage/gallery/preloadImages', 'jquery/ui'], func
* @private
*/
_init: function () {
- if (this.options.jsonConfig != '' && this.options.jsonSwatchConfig != '') {
+ if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
this._RenderControls();
} else {
console.log('SwatchRenderer: No input data received');
@@ -274,8 +325,14 @@ define(['jquery', 'underscore', 'mage/gallery/preloadImages', 'jquery/ui'], func
// Create new control
container.append(
- '
' + label +
- '
' + options + select + '
' + input + '
'
+ '
' +
+ label +
+ '
' +
+ options + select +
+ '
' + input +
+ '
'
);
$widget.optionsMap[item.id] = {};
@@ -284,7 +341,10 @@ define(['jquery', 'underscore', 'mage/gallery/preloadImages', 'jquery/ui'], func
$.each(item.options, function () {
if (this.products.length > 0) {
$widget.optionsMap[item.id][this.id] = {
- price: parseInt($widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount, 10),
+ price: parseInt(
+ $widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount,
+ 10
+ ),
products: this.products
};
}
@@ -312,73 +372,76 @@ define(['jquery', 'underscore', 'mage/gallery/preloadImages', 'jquery/ui'], func
/**
* Render swatch options by part of config
*
- * @param config
- * @returns {string}
+ * @param {Object} config
+ * @returns {String}
* @private
*/
_RenderSwatchOptions: function (config) {
- if (!this.options.jsonSwatchConfig.hasOwnProperty(config.id)) {
- return '';
- }
-
var optionConfig = this.options.jsonSwatchConfig[config.id],
optionClass = this.options.classes.optionClass,
- moreLimit = this.options.numberToShow,
+ moreLimit = parseInt(this.options.numberToShow, 10),
moreClass = this.options.classes.moreButton,
moreText = this.options.moreButtonText,
countAttributes = 0,
html = '';
+ if (!this.options.jsonSwatchConfig.hasOwnProperty(config.id)) {
+ return '';
+ }
+
$.each(config.options, function () {
+ var id,
+ type,
+ value,
+ thumb,
+ label,
+ attr;
+
if (!optionConfig.hasOwnProperty(this.id)) {
return '';
}
// Add more button
- if (moreLimit != false && moreLimit == countAttributes++) {
+ if (moreLimit === countAttributes++) {
html += '
' + moreText + '';
}
- var id = this.id,
- type = optionConfig[id].type,
- value = optionConfig[id].hasOwnProperty('value') ? optionConfig[id].value : '',
- thumb = optionConfig[id].hasOwnProperty('thumb') ? optionConfig[id].thumb : '',
- label = this.label ? this.label : '',
- attr =
- ' option-type="' + type + '"' +
- ' option-id="' + id + '"' +
- ' option-label="' + label + '"' +
- ' option-tooltip-thumb="' + thumb + '"' +
- ' option-tooltip-value="' + value + '"';
+ id = this.id;
+ type = parseInt(optionConfig[id].type, 10);
+ value = optionConfig[id].hasOwnProperty('value') ? optionConfig[id].value : '';
+ thumb = optionConfig[id].hasOwnProperty('thumb') ? optionConfig[id].thumb : '';
+ label = this.label ? this.label : '';
+ attr =
+ ' option-type="' + type + '"' +
+ ' option-id="' + id + '"' +
+ ' option-label="' + label + '"' +
+ ' option-tooltip-thumb="' + thumb + '"' +
+ ' option-tooltip-value="' + value + '"';
if (!this.hasOwnProperty('products') || this.products.length <= 0) {
attr += ' option-empty="true"';
}
- // Text
- if (type == 0) {
- html += '
' + (value ? value : label) + '
';
- }
-
- // Color
- else if (type == 1) {
+ if (type === 0) {
+ // Text
+ html += '
' + (value ? value : label) +
+ '
';
+ } else if (type === 1) {
+ // Color
html += '
' + '' + '
';
- }
-
- // Image
- else if (type == 2) {
+ '" style="background: ' + value +
+ ' no-repeat center; background-size: initial;">' + '' +
+ '