Skip to content

Commit

Permalink
Fixes 4217
Browse files Browse the repository at this point in the history
  • Loading branch information
sreichel committed Sep 22, 2024
1 parent 75cd467 commit aa3eafd
Show file tree
Hide file tree
Showing 3 changed files with 309 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
* Attribute options control
*
* @see Mage_Eav_Block_Adminhtml_Attribute_Edit_Options_Abstract
* @var $this Mage_Eav_Block_Adminhtml_Attribute_Edit_Options_Abstract
* @var Mage_Eav_Block_Adminhtml_Attribute_Edit_Options_Abstract $this
*/
?>
<div>
Expand Down Expand Up @@ -82,8 +82,10 @@
<?php if ($this->isConfigurableSwatchesEnabled()): ?>
<td style="position:relative">
<input type="hidden" disabled class="swatch-value" name="option[swatch][{{id}}]" value="{{swatch}}" />
<input type="color" class="input-color-html5 validate-hex-color-hash {{swatch_class}}" value="{{swatch}}" />
<span class="swatch-delete" data-msg-delete="<?php echo $this->escapeHtml($this->__('Are you sure to delete this fallback color?')) ?>">X</span>
<input type="color" class="input-color-html5 validate-hex-color-hash {{swatch_class}}" value="{{swatch}}" />
<button title="Delete Swatch" type="button" class="scalable delete icon-btn swatch-delete" data-msg-delete="<?php echo $this->escapeHtml($this->__('Are you sure to delete this fallback color?')) ?>">
<span><span><span>X</span></span></span>
</button>
</td>
<?php endif ?>
<?php foreach ($this->getStores() as $_store): ?>
Expand Down Expand Up @@ -114,7 +116,9 @@ var templateText =
'<td style="position:relative">'+
'<input type="hidden" disabled class="swatch-value" name="option[swatch][{{id}}]" value="{{swatch}}" />'+
'<input type="color" class="swatch-option input-color-html5 validate-hex-color-hash {{swatch_class}}" value="{{swatch}}" />'+
'<span class="swatch-delete" data-msg-delete="<?php echo Mage::helper('core')->jsQuoteEscape($this->__('Are you sure to delete this fallback color?')); ?>">X</span>'+
'<button title="Delete Swatch" type="button" class="scalable delete icon-btn swatch-delete" data-msg-delete="<?php echo Mage::helper('core')->jsQuoteEscape($this->__('Are you sure to delete this fallback color?')); ?>">'+
'<span><span><span>X</span></span></span>'+
'</button>'+
'</td>'+
<?php endif ?>
<?php foreach ($this->getStores() as $_store): ?>
Expand Down Expand Up @@ -148,6 +152,7 @@ var attributeOption = {
data.intype = optionDefaultInputType;
}
if (!data.swatch) {
data.swatch = '#ffffff';
data.swatch_class = 'swatch-disabled';
}
let newHTML = this.template.evaluate(data);
Expand Down Expand Up @@ -188,7 +193,7 @@ var attributeOption = {
}
},
swatchremove : function(event){
if (!confirm(event.target.getAttribute('data-msg-delete'))) {
if (!confirm(event.target.closest('button').getAttribute('data-msg-delete'))) {
return;
}
let element = event.target.closest('tr');
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
<?php
/**
* OpenMage
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available at https://opensource.org/license/afl-3-0-php
*
* @category design
* @package default_default
* @copyright Copyright (c) 2006-2020 Magento, Inc. (https://www.magento.com)
* @copyright Copyright (c) 2021-2024 The OpenMage Contributors (https://www.openmage.org)
* @license https://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
*/
?>
<?php
/**
* Attribute options control
*
* @see Mage_Eav_Block_Adminhtml_Attribute_Edit_Options_Abstract
* @var Mage_Eav_Block_Adminhtml_Attribute_Edit_Options_Abstract $this
*/
?>
<div>
<ul class="messages">
<li class="notice-msg">
<ul>
<li><?php echo $this->__('If you do not specify an option value for a specific store view then the default (Admin) value will be used.') ?></li>
</ul>
</li>
</ul>
</div>

<div class="entity-edit">
<div class="entry-edit-head">
<h4 class="icon-head head-edit-form fieldset-legend"><?php echo $this->__('Manage Titles (Size, Color, etc.)') ?></h4>
</div>
<div class="box">
<div class="hor-scroll">
<table class="dynamic-grid" cellspacing="0" id="attribute-labels-table">
<tr>
<?php foreach ($this->getStores() as $_store): ?>
<th><?php echo $this->escapeHtml($_store->getName()); ?></th>
<?php endforeach ?>
</tr>
<tr>
<?php $_labels = $this->getLabelValues() ?>
<?php foreach ($this->getStores() as $_store): ?>
<td>
<input class="input-text<?php if($_store->getId()==0): ?> required-option<?php endif ?>" type="text" name="frontend_label[<?php echo $_store->getId() ?>]" value="<?php echo $this->escapeHtml($_labels[$_store->getId()]); ?>"<?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/>
</td>
<?php endforeach ?>
</tr>
</table>
</div>
</div>
</div>
<br/>
<div class="entity-edit" id="matage-options-panel">
<div class="entry-edit-head">
<h4 class="icon-head head-edit-form fieldset-legend"><?php echo $this->__('Manage Options (values of your attribute)') ?></h4>
</div>
<div class="box">
<div class="hor-scroll">
<table class="dynamic-grid" cellspacing="0" cellpadding="0">
<tr id="attribute-options-table">
<?php if ($this->isConfigurableSwatchesEnabled()): ?>
<th><?php echo $this->escapeHtml($this->__('Swatch')) ?></th>
<?php endif ?>
<?php foreach ($this->getStores() as $_store): ?>
<th><?php echo $this->escapeHtml($_store->getName()); ?></th>
<?php endforeach ?>
<th><?php echo $this->__('Position') ?></th>
<th class="nobr a-center"><?php echo $this->escapeHtml($this->__('Is Default')) ?></th>
<th>
<?php if (!$this->getReadOnly()):?>
<?php echo $this->getAddNewButtonHtml() ?>
<?php endif ?>
</th>
</tr>
<tr class="no-display template" id="row-template">
<?php if ($this->isConfigurableSwatchesEnabled()): ?>
<td style="position:relative">
<input type="hidden" disabled class="swatch-value" name="option[swatch][{{id}}]" value="{{swatch}}" />
<input type="color" class="input-color-html5 validate-hex-color-hash {{swatch_class}}" value="{{swatch}}" />
<span class="swatch-delete" data-msg-delete="<?php echo $this->escapeHtml($this->__('Are you sure to delete this fallback color?')) ?>">X</span>
</td>
<?php endif ?>
<?php foreach ($this->getStores() as $_store): ?>
<td><input name="option[value][{{id}}][<?php echo $_store->getId() ?>]" value="{{store<?php echo $_store->getId() ?>}}" class="input-text<?php if($_store->getId()==0): ?> required-option<?php endif ?>" type="text" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/></td>
<?php endforeach ?>
<td class="a-center"><input class="input-text" type="text" name="option[order][{{id}}]" value="{{sort_order}}" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/></td>
<td><input class="input-radio" type="radio" name="default[]" value="{{id}}" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/></td>
<td class="a-left">
<input type="hidden" class="delete-flag" name="option[delete][{{id}}]" value="" />
<?php if (!$this->getReadOnly()):?>
<?php echo $this->getDeleteButtonHtml() ?>
<?php endif ?>
</td>
</tr>
</table>
</div>
<input type="hidden" id="option-count-check" value="" />
</div>
</div>
<script type="text/javascript">
//<![CDATA[
var optionDefaultInputType = 'radio';

// IE removes quotes from element.innerHTML whenever it thinks they're not needed, which breaks html.
var templateText =
'<tr class="option-row" title="ID: {{id}}">'+
<?php if ($this->isConfigurableSwatchesEnabled()): ?>
'<td style="position:relative">'+
'<input type="hidden" disabled class="swatch-value" name="option[swatch][{{id}}]" value="{{swatch}}" />'+
'<input type="color" class="swatch-option input-color-html5 validate-hex-color-hash {{swatch_class}}" value="{{swatch}}" />'+
'<span class="swatch-delete" data-msg-delete="<?php echo Mage::helper('core')->jsQuoteEscape($this->__('Are you sure to delete this fallback color?')); ?>">X</span>'+
'</td>'+
<?php endif ?>
<?php foreach ($this->getStores() as $_store): ?>
'<td><input name="option[value][{{id}}][<?php echo $_store->getId() ?>]" value="{{store<?php echo $_store->getId() ?>}}" class="input-text<?php if($_store->getId()==0): ?> required-option<?php endif ?>" type="text" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/><\/td>'+
<?php endforeach ?>
'<td><input class="input-text" type="text" name="option[order][{{id}}]" value="{{sort_order}}" <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/><\/td>'+
'<td class="a-center"><input class="input-radio" type="{{intype}}" name="default[]" value="{{id}}" {{checked}} <?php if ($this->getReadOnly()):?> disabled="disabled"<?php endif ?>/><\/td>'+
'<td class="a-left" id="delete_button_container_{{id}}">'+
'<input type="hidden" class="delete-flag" name="option[delete][{{id}}]" value="" />'+
<?php if (!$this->getReadOnly()):?>
'<?php echo Mage::helper('core')->jsQuoteEscape($this->getDeleteButtonHtml()) ?>'+
<?php endif ?>
'<\/td>'+
'<\/tr>';

var attributeOption = {
table : document.getElementById('attribute-options-table'),
templateSyntax : /(^|.|\r|\n)({{(\w+)}})/,
templateText : templateText,
itemCount : 0,
totalItems : 0,
isReadOnly: <?php echo (int)$this->getReadOnly(); ?>,
add : function(data) {
this.template = new Template(this.templateText, this.templateSyntax);
let isNewOption = false;
if (!data.id) {
data.id = 'option_' + this.itemCount;
isNewOption = true;
}
if (!data.intype) {
data.intype = optionDefaultInputType;
}
if (!data.swatch) {
data.swatch = '#ffffff';
data.swatch_class = 'swatch-disabled';
}
let newHTML = this.template.evaluate(data);
this.table.insertAdjacentHTML('afterend', newHTML);
if (isNewOption && !this.isReadOnly) {
this.enableNewOptionDeleteButton(data.id);
}
this.bindRemoveButtons();
this.bindSwatchButtons();
this.bindSwatchRemoveButtons();
this.itemCount++;
this.totalItems++;
this.updateItemsCountField();
},
remove : function(event){
let element = event.target.closest('tr');
if (element) {
let elementFlags = element.querySelectorAll('.delete-flag');
if (elementFlags.length > 0) {
elementFlags[0].value = 1;
}

element.classList.add('no-display', 'template');
this.totalItems--;
this.updateItemsCountField();
}
},
swatch : function(event){
let element = event.target.closest('tr');
if (element) {
let elementSwatchValue = element.querySelector('.swatch-value');
if (elementSwatchValue) {
elementSwatchValue.disabled = false;
elementSwatchValue.value = event.target.value;
}

event.target.classList.remove('swatch-disabled');
}
},
swatchremove : function(event){
if (!confirm(event.target.getAttribute('data-msg-delete'))) {
return;
}
let element = event.target.closest('tr');
if (element) {
let elementSwatchValue = element.querySelector('.swatch-value');
if (elementSwatchValue) {
elementSwatchValue.disabled = false;
elementSwatchValue.value = '';
}

let elementSwatchOption = element.querySelector('.swatch-option');
if (elementSwatchOption) {
elementSwatchOption.value = '';
elementSwatchOption.classList.add('swatch-disabled');
}
}
},
updateItemsCountField: function() {
let optionCountCheck = document.getElementById('option-count-check');
optionCountCheck.value = this.totalItems > 0 ? '1' : '';
},
enableNewOptionDeleteButton: function(id) {
document.querySelectorAll('#delete_button_container_' + id + ' button').forEach(function(button) {
button.disabled = false;
button.classList.remove('disabled');
});
},
bindRemoveButtons: function() {
let buttons = document.querySelectorAll('.delete-option');
buttons.forEach(function(button) {
if (!button.binded) {
button.binded = true;
button.addEventListener('click', attributeOption.remove.bind(attributeOption));
}
});
},
bindSwatchButtons: function() {
let buttons = document.querySelectorAll('.swatch-option');
buttons.forEach(function(button) {
if (!button.dataset.binded) {
button.dataset.binded = true;
button.addEventListener('change', attributeOption.swatch.bind(attributeOption));
}
});
},
bindSwatchRemoveButtons: function() {
let buttons = document.querySelectorAll('.swatch-delete');
buttons.forEach(function(button) {
if (!button.binded) {
button.binded = true;
button.addEventListener('click', attributeOption.swatchremove.bind(attributeOption));
}
});
}
}
let rowTemplate = document.getElementById('row-template');
if (rowTemplate) {
rowTemplate.remove();
}
attributeOption.bindRemoveButtons();
let addNewOptionButton = document.getElementById('add_new_option_button');
if (addNewOptionButton) {
addNewOptionButton.addEventListener('click', attributeOption.add.bind(attributeOption));
}
Validation.addAllThese([
['required-option', '<?php echo $this->jsQuoteEscape($this->__('Failed')) ?>', function(v) {
return !Validation.get('IsEmpty').test(v);
}]]);
Validation.addAllThese([
['required-options-count', '<?php echo $this->jsQuoteEscape($this->__('Options is required')) ?>', function(v) {
return !Validation.get('IsEmpty').test(v);
}]]);
<?php foreach ($this->getOptionValues() as $_value): ?>
attributeOption.add(<?php echo $_value->toJson() ?>);
<?php endforeach ?>
//]]>
</script>
30 changes: 30 additions & 0 deletions skin/adminhtml/default/default/boxes.css
Original file line number Diff line number Diff line change
Expand Up @@ -492,6 +492,36 @@ button.icon-btn span { text-indent:-999em; display:block; width:16px; padding:0;
.buttons-set { margin:0 0 10px; }
.buttons-set button { margin-right:5px; }

/* SWATCHES */
td:has(input.swatch-option) {
display: flex;
gap: 2px;
.swatch-option {
width: 26px !important;
height: 26px;
}
}

td:has(input.swatch-disabled) {
background-image: url('data:image/svg+xml,<svg id="e5490f2e-3f54-4acd-9496-57eed667c240" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28.41093 28.29249"><title>placeholder</title><rect x="1.20546" y="1.08375" width="26" height="26" fill="%23fff" stroke="%23ccc" stroke-miterlimit="10"/><line x1="0.70546" y1="27.58375" x2="27.70546" y2="0.70875" fill="none" stroke="%23ff003a" stroke-miterlimit="10" stroke-width="2"/></svg>');
background-repeat: no-repeat;
outline: 1px solid #c8c8c8;
border: 1px solid #fff;
padding: 0;
margin: 2px;
width: 24px;
height: 24px;
display: block;
background-position: center center;
border-radius: 2px;

.swatch-option {
opacity: 0;
}
.swatch-delete {
display: none;
}
}

/* SWITCHER
*******************************************************************************/
Expand Down

0 comments on commit aa3eafd

Please sign in to comment.