Refactor from Tailwind CSS to SCSS/Bootstrap

Major changes:
- Replace Tailwind with SCSS using Bootstrap-compatible variables
- Add Gulp build system for SCSS and JS compilation
- Split JS into modular partials (_events, _filters, _preview, etc.)

CSS fixes:
- Fix preview popover visibility (remove conflicting modal.scss rule)
- Fix search input max-width override for parent form styles
- Add filter panel styling (toggle buttons, chips, values row)
- Add group-body padding with negative margins on modifiers
- Style filter-group-toggle with eye icon for preview

JS additions:
- Add showGroupPreviewPopover for group count badge clicks
- Add showItemsPopover for rendering preview popover
- Add renderPreviewItems for product list rendering
- Add eye icon to filter toggle button generation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-28 11:11:22 +01:00
parent a285018e0d
commit aa9f28bb7e
60 changed files with 35031 additions and 28532 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,270 @@
/**
* Entity Selector - Core Module
* Factory, initialization, state management
* @partial _core.js
*
* IMPORTANT: This file must be loaded LAST in the concatenation order
* as it combines all mixins from other partials.
*
* EXTRACTION SOURCE: assets/js/admin/entity-selector.js
* Lines: 15-55 (createTargetConditionsInstance, state variables)
* 56-110 (init method)
* 108-132 (observeNewSelects)
* 7889-7951 (Factory object, window export, document ready)
*
* Contains:
* - createTargetConditionsInstance() - Factory function
* - State variable initialization
* - init() - Main initialization method
* - observeNewSelects() - MutationObserver for dynamic selects
* - loadExistingSelections() - Restore saved state
* - TargetConditions factory object
* - window.TargetConditions export
* - Document ready auto-initialization
*/
(function($) {
'use strict';
/**
* Create a new TargetConditions instance
* Each instance is independent and manages its own wrapper/state
*/
function createTargetConditionsInstance() {
// Base instance object with state variables
var instance = {
config: {},
$wrapper: null,
$dropdown: null,
activeGroup: null, // { blockType, groupIndex, section: 'include'|'exclude' }
searchTimeout: null,
searchResults: [],
searchTotal: 0,
searchOffset: 0,
searchQuery: '',
isLoading: false,
loadMoreCount: 20,
// Sort, filter, view state
viewMode: 'list',
currentSort: { field: 'name', dir: 'ASC' },
refineQuery: '',
refineNegate: false,
filters: {
inStock: false,
discounted: false,
priceMin: null,
priceMax: null,
attributes: [],
features: []
},
filterableData: null,
// Search history
searchHistory: {},
searchHistoryMax: 10,
searchHistoryKey: 'targetConditionsSearchHistory',
// Chips visibility
maxVisibleChips: 20,
// Method dropdown references
$methodDropdownMenu: null,
$methodDropdownSelect: null,
$methodDropdownTrigger: null,
// Preview state
$previewPopover: null,
$activeBadge: null,
$previewList: null,
previewLoadedCount: 0,
previewBlockType: null,
allPreviewData: null,
// Count update timeout
countUpdateTimeout: null,
init: function(options) {
this.config = $.extend({
id: 'target-conditions',
name: 'target_conditions',
namePrefix: 'target_',
mode: 'multi', // Global mode: 'multi' or 'single'
blocks: {},
ajaxUrl: '',
trans: {}
}, options);
this.$wrapper = $('[data-entity-selector-id="' + this.config.id + '"]');
if (!this.$wrapper.length) {
return;
}
// Global single mode - hide "Add Group" buttons
if (this.config.mode === 'single') {
this.$wrapper.find('.btn-add-group').hide();
this.$wrapper.find('.group-excludes').hide();
this.$wrapper.find('.group-modifiers').hide();
}
// Add fullwidth class to parent form-group
var $formGroup = this.$wrapper.closest('.form-group');
$formGroup.addClass('condition-trait-fullwidth');
$formGroup.find('.col-lg-offset-3').removeClass('col-lg-offset-3');
this.createDropdown();
this.bindEvents();
this.loadExistingSelections();
this.loadSearchHistory();
// Initialize styled method dropdowns
this.initMethodDropdowns();
// Watch for dynamically added selects
this.observeNewSelects();
// Update counts on page load
var self = this;
setTimeout(function() {
self.updateTabBadges();
self.updateAllConditionCounts();
}, 100);
},
observeNewSelects: function() {
var self = this;
if (typeof MutationObserver === 'undefined') {
return;
}
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
$(mutation.addedNodes).find('.include-method-select, .exclude-method-select').each(function() {
self.enhanceMethodSelect($(this));
});
}
});
});
observer.observe(this.$wrapper[0], {
childList: true,
subtree: true
});
},
loadExistingSelections: function() {
// TODO: Extract full implementation from original
// Reads JSON from hidden input and populates chips
}
};
// Merge all mixins into the instance
// Each mixin adds its methods to window._EntitySelectorMixins
var mixins = window._EntitySelectorMixins || {};
// Merge utils mixin
if (mixins.utils) {
$.extend(instance, mixins.utils);
}
// Merge events mixin
if (mixins.events) {
$.extend(instance, mixins.events);
}
// Merge dropdown mixin
if (mixins.dropdown) {
$.extend(instance, mixins.dropdown);
}
// Merge search mixin
if (mixins.search) {
$.extend(instance, mixins.search);
}
// Merge filters mixin
if (mixins.filters) {
$.extend(instance, mixins.filters);
}
// Merge chips mixin
if (mixins.chips) {
$.extend(instance, mixins.chips);
}
// Merge groups mixin
if (mixins.groups) {
$.extend(instance, mixins.groups);
}
// Merge methods mixin
if (mixins.methods) {
$.extend(instance, mixins.methods);
}
// Merge preview mixin
if (mixins.preview) {
$.extend(instance, mixins.preview);
}
return instance;
}
// Factory object for creating and managing instances
var TargetConditions = {
instances: [],
// Create and initialize a new instance
create: function(options) {
var instance = createTargetConditionsInstance();
instance.init(options);
this.instances.push(instance);
return instance;
},
// For backwards compatibility - init creates a new instance
init: function(options) {
return this.create(options);
},
// Validate all instances - returns true if all valid
validateAll: function() {
var allValid = true;
for (var i = 0; i < this.instances.length; i++) {
if (!this.instances[i].validate()) {
allValid = false;
}
}
return allValid;
}
};
// Export to window
window.TargetConditions = TargetConditions;
// Auto-initialize on document ready
$(document).ready(function() {
// Auto-initialize from data-config attributes on wrapper elements
$('[data-entity-selector-id]').each(function() {
var configData = $(this).data('config');
if (configData) {
TargetConditions.create(configData);
}
});
// Tips box toggle handler
$(document).on('click', '.target-tips-box .tips-header', function(e) {
e.preventDefault();
$(this).closest('.target-tips-box').toggleClass('expanded');
});
// Form submission validation for required target conditions
$(document).on('submit', 'form', function(e) {
var $form = $(this);
if ($form.find('.target-conditions-trait[data-required]').length > 0) {
if (!TargetConditions.validateAll()) {
e.preventDefault();
return false;
}
}
});
});
})(jQuery);

View File

@@ -0,0 +1,409 @@
/**
* Entity Selector - Dropdown Module
* Search dropdown UI creation and positioning
* @partial _dropdown.js
*/
(function($) {
'use strict';
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
window._EntitySelectorMixins.dropdown = {
createDropdown: function() {
this.$wrapper.find('.target-search-dropdown').remove();
var trans = this.config.trans || {};
var html = '<div class="target-search-dropdown view-list">';
// Header with results count, actions, sort controls, view mode
html += '<div class="dropdown-header">';
html += '<span class="results-count">0 results</span>';
html += '<div class="dropdown-actions">';
// Select all / Clear buttons with keyboard shortcuts
html += '<button type="button" class="btn-select-all" title="' + (trans.select_all || 'Select all visible') + '">';
html += '<i class="icon-check-square-o"></i> ' + (trans.all || 'All') + ' <kbd>Ctrl+A</kbd>';
html += '</button>';
html += '<button type="button" class="btn-clear-selection" title="' + (trans.clear_selection || 'Clear selection') + '">';
html += '<i class="icon-square-o"></i> ' + (trans.clear || 'Clear') + ' <kbd>Ctrl+D</kbd>';
html += '</button>';
// Sort controls
html += '<div class="sort-controls">';
html += '<select class="sort-field-select" title="Sort by">';
html += '<option value="name">' + (trans.sort_name || 'Name') + '</option>';
html += '<option value="id">' + (trans.sort_id || 'ID') + '</option>';
html += '<option value="position">' + (trans.sort_position || 'Position') + '</option>';
html += '<option value="popularity">' + (trans.sort_popularity || 'Popularity') + '</option>';
html += '<option value="selected">' + (trans.sort_selected || 'Selected') + '</option>';
html += '</select>';
html += '<button type="button" class="btn-sort-dir" data-dir="ASC" title="Sort direction">';
html += '<i class="icon-sort-alpha-asc"></i>';
html += '</button>';
// View mode selector
html += '<select class="view-mode-select" title="View mode">';
html += '<option value="list">' + (trans.view_list || 'List') + '</option>';
html += '<option value="tree" class="tree-view-option" disabled hidden>' + (trans.view_tree || 'Tree') + '</option>';
html += '<option value="cols-2">2 ' + (trans.cols || 'cols') + '</option>';
html += '<option value="cols-3">3 ' + (trans.cols || 'cols') + '</option>';
html += '<option value="cols-4">4 ' + (trans.cols || 'cols') + '</option>';
html += '<option value="cols-5">5 ' + (trans.cols || 'cols') + '</option>';
html += '<option value="cols-6">6 ' + (trans.cols || 'cols') + '</option>';
html += '<option value="cols-7">7 ' + (trans.cols || 'cols') + '</option>';
html += '<option value="cols-8">8 ' + (trans.cols || 'cols') + '</option>';
html += '</select>';
html += '</div>'; // End sort-controls
// Refine search
html += '<div class="refine-compact">';
html += '<button type="button" class="btn-refine-negate" title="' + (trans.exclude_matches || 'Exclude matches (NOT contains)') + '"><i class="icon-ban"></i></button>';
html += '<input type="text" class="refine-input" placeholder="' + (trans.refine_short || 'Refine...') + '">';
html += '<button type="button" class="btn-clear-refine" style="display:none;"><i class="icon-times"></i></button>';
html += '</div>';
// Filter toggle button
html += '<button type="button" class="btn-toggle-filters" title="' + (trans.toggle_filters || 'Filters') + '">';
html += '<i class="icon-filter"></i>';
html += '</button>';
// History button
html += '<button type="button" class="btn-show-history" title="' + (trans.recent_searches || 'Recent searches') + '">';
html += '<i class="icon-clock-o"></i>';
html += '</button>';
html += '</div>'; // End dropdown-actions
html += '</div>'; // End dropdown-header
// Filter panel
html += '<div class="filter-panel">';
// Quick filters row (for products)
html += '<div class="filter-row filter-row-quick" data-entity="products">';
html += '<label class="filter-label"><input type="checkbox" class="filter-in-stock"> ' + (trans.in_stock || 'In stock') + '</label>';
html += '<label class="filter-label"><input type="checkbox" class="filter-discounted"> ' + (trans.discounted || 'On sale') + '</label>';
// Price range
html += '<div class="filter-price-range">';
html += '<span class="filter-price-label">' + (trans.price || 'Price') + ':</span>';
html += '<input type="number" class="filter-price-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="0.01">';
html += '<span class="filter-price-sep">-</span>';
html += '<input type="number" class="filter-price-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="0.01">';
html += '</div>';
html += '<button type="button" class="btn-clear-filters" title="' + (trans.clear_filters || 'Clear filters') + '">';
html += '<i class="icon-times"></i>';
html += '</button>';
html += '</div>';
// Attribute/Feature filter toggles for products
html += '<div class="filter-row filter-row-attributes" data-entity="products" style="display:none;">';
html += '<span class="filter-row-label"><i class="icon-tags"></i> ' + (trans.attributes || 'Attributes') + ':</span>';
html += '<div class="filter-attributes-container"></div>';
html += '</div>';
html += '<div class="filter-row filter-row-values filter-row-attr-values" data-type="attribute" style="display:none;">';
html += '<div class="filter-values-container"></div>';
html += '</div>';
html += '<div class="filter-row filter-row-features" data-entity="products" style="display:none;">';
html += '<span class="filter-row-label"><i class="icon-list-ul"></i> ' + (trans.features || 'Features') + ':</span>';
html += '<div class="filter-features-container"></div>';
html += '</div>';
html += '<div class="filter-row filter-row-values filter-row-feat-values" data-type="feature" style="display:none;">';
html += '<div class="filter-values-container"></div>';
html += '</div>';
// Entity-specific filters: Categories
html += '<div class="filter-row filter-row-entity-categories filter-row-multi" data-entity="categories" style="display:none;">';
html += '<div class="filter-subrow">';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-cubes"></i> ' + (trans.product_count || 'Products') + ':</span>';
html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-shopping-cart"></i> ' + (trans.total_sales || 'Sales') + ':</span>';
html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-money"></i> ' + (trans.turnover || 'Revenue') + ':</span>';
html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
html += '</div>';
html += '<div class="filter-subrow">';
html += '<div class="filter-select-group">';
html += '<span class="filter-select-label"><i class="icon-sitemap"></i> ' + (trans.depth || 'Depth') + ':</span>';
html += '<select class="filter-depth-select">';
html += '<option value="">' + (trans.all_levels || 'All levels') + '</option>';
html += '<option value="1">' + (trans.level || 'Level') + ' 1 (' + (trans.root || 'Root') + ')</option>';
html += '<option value="2">' + (trans.level || 'Level') + ' 2</option>';
html += '<option value="3">' + (trans.level || 'Level') + ' 3</option>';
html += '<option value="4">' + (trans.level || 'Level') + ' 4+</option>';
html += '</select>';
html += '</div>';
html += '<label class="filter-label"><input type="checkbox" class="filter-has-products"> ' + (trans.has_products || 'Has products') + '</label>';
html += '<label class="filter-label"><input type="checkbox" class="filter-has-description"> ' + (trans.has_description || 'Has description') + '</label>';
html += '<label class="filter-label"><input type="checkbox" class="filter-has-image"> ' + (trans.has_image || 'Has image') + '</label>';
html += '<button type="button" class="btn-clear-filters"><i class="icon-times"></i></button>';
html += '</div>';
html += '</div>';
// Entity-specific filters: Manufacturers
html += '<div class="filter-row filter-row-entity-manufacturers filter-row-multi" data-entity="manufacturers" style="display:none;">';
html += '<div class="filter-subrow">';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-cubes"></i> ' + (trans.product_count || 'Products') + ':</span>';
html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-shopping-cart"></i> ' + (trans.total_sales || 'Sales') + ':</span>';
html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-money"></i> ' + (trans.turnover || 'Revenue') + ':</span>';
html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
html += '</div>';
html += '<div class="filter-subrow">';
html += '<div class="filter-date-group">';
html += '<span class="filter-date-label"><i class="icon-calendar"></i> ' + (trans.date_added || 'Added') + ':</span>';
html += '<input type="date" class="filter-date-add-from" title="' + (trans.from || 'From') + '">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="date" class="filter-date-add-to" title="' + (trans.to || 'To') + '">';
html += '</div>';
html += '<div class="filter-date-group">';
html += '<span class="filter-date-label"><i class="icon-clock-o"></i> ' + (trans.last_product || 'Last product') + ':</span>';
html += '<input type="date" class="filter-last-product-from" title="' + (trans.from || 'From') + '">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="date" class="filter-last-product-to" title="' + (trans.to || 'To') + '">';
html += '</div>';
html += '<button type="button" class="btn-clear-filters"><i class="icon-times"></i></button>';
html += '</div>';
html += '</div>';
// Entity-specific filters: Suppliers
html += '<div class="filter-row filter-row-entity-suppliers filter-row-multi" data-entity="suppliers" style="display:none;">';
html += '<div class="filter-subrow">';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-cubes"></i> ' + (trans.product_count || 'Products') + ':</span>';
html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-shopping-cart"></i> ' + (trans.total_sales || 'Sales') + ':</span>';
html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-money"></i> ' + (trans.turnover || 'Revenue') + ':</span>';
html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
html += '</div>';
html += '<div class="filter-subrow">';
html += '<div class="filter-date-group">';
html += '<span class="filter-date-label"><i class="icon-calendar"></i> ' + (trans.date_added || 'Added') + ':</span>';
html += '<input type="date" class="filter-date-add-from" title="' + (trans.from || 'From') + '">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="date" class="filter-date-add-to" title="' + (trans.to || 'To') + '">';
html += '</div>';
html += '<div class="filter-date-group">';
html += '<span class="filter-date-label"><i class="icon-clock-o"></i> ' + (trans.last_product || 'Last product') + ':</span>';
html += '<input type="date" class="filter-last-product-from" title="' + (trans.from || 'From') + '">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="date" class="filter-last-product-to" title="' + (trans.to || 'To') + '">';
html += '</div>';
html += '<button type="button" class="btn-clear-filters"><i class="icon-times"></i></button>';
html += '</div>';
html += '</div>';
// Entity-specific filters: Attributes
html += '<div class="filter-row filter-row-entity-attributes filter-row-multi" data-entity="attributes" style="display:none;">';
html += '<div class="filter-subrow">';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-cubes"></i> ' + (trans.product_count || 'Products') + ':</span>';
html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-shopping-cart"></i> ' + (trans.total_sales || 'Sales') + ':</span>';
html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-money"></i> ' + (trans.turnover || 'Revenue') + ':</span>';
html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '</div>';
html += '<div class="filter-subrow">';
html += '<div class="filter-select-group">';
html += '<span class="filter-select-label"><i class="icon-tags"></i> ' + (trans.attribute_group || 'Group') + ':</span>';
html += '<select class="filter-attribute-group-select">';
html += '<option value="">' + (trans.all_groups || 'All groups') + '</option>';
html += '</select>';
html += '</div>';
html += '<label class="filter-label"><input type="checkbox" class="filter-is-color"> ' + (trans.color_only || 'Color attributes') + '</label>';
html += '<button type="button" class="btn-clear-filters"><i class="icon-times"></i></button>';
html += '</div>';
html += '</div>';
// Entity-specific filters: Features
html += '<div class="filter-row filter-row-entity-features filter-row-multi" data-entity="features" style="display:none;">';
html += '<div class="filter-subrow">';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-cubes"></i> ' + (trans.product_count || 'Products') + ':</span>';
html += '<input type="number" class="filter-product-count-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-product-count-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-shopping-cart"></i> ' + (trans.total_sales || 'Sales') + ':</span>';
html += '<input type="number" class="filter-sales-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-sales-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '<div class="filter-range-group">';
html += '<span class="filter-range-label"><i class="icon-money"></i> ' + (trans.turnover || 'Revenue') + ':</span>';
html += '<input type="number" class="filter-turnover-min" placeholder="' + (trans.min || 'Min') + '" min="0" step="1">';
html += '<span class="filter-range-sep">-</span>';
html += '<input type="number" class="filter-turnover-max" placeholder="' + (trans.max || 'Max') + '" min="0" step="1">';
html += '</div>';
html += '</div>';
html += '<div class="filter-subrow">';
html += '<div class="filter-select-group">';
html += '<span class="filter-select-label"><i class="icon-list-ul"></i> ' + (trans.feature_group || 'Group') + ':</span>';
html += '<select class="filter-feature-group-select">';
html += '<option value="">' + (trans.all_groups || 'All groups') + '</option>';
html += '</select>';
html += '</div>';
html += '<label class="filter-label"><input type="checkbox" class="filter-is-custom"> ' + (trans.custom_only || 'Custom values') + '</label>';
html += '<button type="button" class="btn-clear-filters"><i class="icon-times"></i></button>';
html += '</div>';
html += '</div>';
// Entity-specific filters: CMS Pages
html += '<div class="filter-row filter-row-entity-cms" data-entity="cms" style="display:none;">';
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
html += '<label class="filter-label"><input type="checkbox" class="filter-indexable"> ' + (trans.indexable || 'Indexable') + '</label>';
html += '<button type="button" class="btn-clear-filters"><i class="icon-times"></i></button>';
html += '</div>';
// Entity-specific filters: CMS Categories
html += '<div class="filter-row filter-row-entity-cms-categories" data-entity="cms_categories" style="display:none;">';
html += '<label class="filter-label"><input type="checkbox" class="filter-active-only" checked> ' + (trans.active_only || 'Active only') + '</label>';
html += '<button type="button" class="btn-clear-filters"><i class="icon-times"></i></button>';
html += '</div>';
html += '</div>'; // End filter-panel
// Results header for list view (product columns)
html += '<div class="results-header">';
html += '<span class="header-spacer"></span>';
html += '<span class="header-col header-col-name">' + (trans.product || 'Product') + '</span>';
html += '<span class="header-col header-col-price">' + (trans.price || 'Price') + '</span>';
html += '<span class="header-col header-col-sale">' + (trans.sale || 'Sale') + '</span>';
html += '<span class="header-col header-col-stock">' + (trans.stock || 'Stock') + '</span>';
html += '<span class="header-col header-col-sales">' + (trans.sold || 'Sold') + '</span>';
html += '</div>';
// Results
html += '<div class="dropdown-results"></div>';
// Footer
html += '<div class="dropdown-footer">';
html += '<div class="load-more-controls" style="display:none;">';
html += '<span class="load-more-label">' + (trans.load || 'Load') + '</span>';
html += '<select class="load-more-select">';
html += '<option value="10">10</option>';
html += '<option value="20" selected>20</option>';
html += '<option value="50">50</option>';
html += '<option value="100">100</option>';
html += '</select>';
html += '<span class="load-more-of">' + (trans.of || 'of') + ' <span class="remaining-count">0</span> ' + (trans.remaining || 'remaining') + '</span>';
html += '<button type="button" class="btn-load-more"><i class="icon-plus"></i></button>';
html += '</div>';
html += '<div class="dropdown-footer-actions">';
html += '<button type="button" class="btn-cancel-dropdown">' + (trans.cancel || 'Cancel') + ' <kbd>Esc</kbd></button>';
html += '<button type="button" class="btn-confirm-dropdown"><i class="icon-check"></i> ' + (trans.done || 'Done') + ' <kbd>⏎</kbd></button>';
html += '</div>';
html += '</div>';
html += '</div>';
this.$dropdown = $(html);
$('body').append(this.$dropdown);
},
hideDropdown: function() {
if (this.$dropdown) {
this.$dropdown.removeClass('show');
}
this.activeGroup = null;
},
positionDropdown: function($input) {
if (!this.$dropdown) return;
var $picker = $input.closest('.value-picker');
var $searchBox = $input.closest('.entity-search-box');
// Get absolute positions (dropdown is appended to body)
var searchBoxOffset = $searchBox.offset();
var searchBoxHeight = $searchBox.outerHeight();
var pickerOffset = $picker.offset();
var pickerWidth = $picker.outerWidth();
// Calculate position relative to document
var dropdownTop = searchBoxOffset.top + searchBoxHeight + 4;
var dropdownLeft = pickerOffset.left;
var dropdownWidth = Math.max(pickerWidth, 400);
// Ensure dropdown doesn't overflow the viewport horizontally
var viewportWidth = $(window).width();
if (dropdownLeft + dropdownWidth > viewportWidth - 10) {
dropdownWidth = viewportWidth - dropdownLeft - 10;
}
// Ensure dropdown doesn't overflow viewport vertically
var viewportHeight = $(window).height();
var scrollTop = $(window).scrollTop();
var maxHeight = viewportHeight - (dropdownTop - scrollTop) - 20;
maxHeight = Math.max(maxHeight, 400);
this.$dropdown.css({
position: 'absolute',
top: dropdownTop,
left: dropdownLeft,
width: dropdownWidth,
maxHeight: maxHeight,
zIndex: 10000
});
}
};
})(jQuery);

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,283 @@
/**
* Entity Selector - Filters Module
* Filter panel, filter state management
* @partial _filters.js
*
* EXTRACTION SOURCE: assets/js/admin/entity-selector.js
* Lines: 6605-6758 (filter methods)
*
* Contains:
* - clearFilters() - Reset all filters
* - resetFiltersWithoutSearch() - Reset without triggering search
* - updateFilterPanelForEntity() - Show/hide filters based on entity type
* - loadFilterableData() - Load attributes/features for filter panel
* - renderFilterDropdowns() - Render attribute/feature group toggles
* - showFilterGroupValues() - Show values for a filter group
* - hideFilterGroupValues() - Hide filter values row
* - updateFilterToggleStates() - Update toggle states based on selections
*/
(function($) {
'use strict';
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
window._EntitySelectorMixins.filters = {
clearFilters: function() {
this.refineQuery = '';
this.refineNegate = false;
this.filters = {
inStock: false,
discounted: false,
priceMin: null,
priceMax: null,
attributes: [],
features: [],
productCountMin: null,
productCountMax: null,
salesMin: null,
salesMax: null,
turnoverMin: null,
turnoverMax: null,
depth: null,
hasProducts: false,
hasDescription: false,
hasImage: false,
activeOnly: true,
attributeGroup: null,
featureGroup: null,
dateAddFrom: null,
dateAddTo: null,
lastProductFrom: null,
lastProductTo: null
};
if (this.$dropdown) {
var trans = this.config.trans || {};
this.$dropdown.find('.refine-input').val('');
this.$dropdown.find('.btn-refine-negate').removeClass('active');
this.$dropdown.find('.filter-in-stock').prop('checked', false);
this.$dropdown.find('.filter-discounted').prop('checked', false);
this.$dropdown.find('.filter-price-min, .filter-price-max').val('');
this.$dropdown.find('.filter-attr-chip, .filter-feat-chip').removeClass('active');
this.$dropdown.find('.filter-product-count-min, .filter-product-count-max').val('');
this.$dropdown.find('.filter-sales-min, .filter-sales-max').val('');
this.$dropdown.find('.filter-depth-select').val('');
this.$dropdown.find('.filter-has-products').prop('checked', false);
this.$dropdown.find('.filter-active-only').prop('checked', true);
}
this.refreshSearch();
},
resetFiltersWithoutSearch: function() {
// Same as clearFilters but doesn't trigger search
// Used when switching entity types
this.refineQuery = '';
this.refineNegate = false;
this.filters = {
inStock: false,
discounted: false,
priceMin: null,
priceMax: null,
attributes: [],
features: [],
productCountMin: null,
productCountMax: null,
salesMin: null,
salesMax: null,
turnoverMin: null,
turnoverMax: null,
depth: null,
hasProducts: false,
hasDescription: false,
hasImage: false,
activeOnly: true,
attributeGroup: null,
featureGroup: null,
dateAddFrom: null,
dateAddTo: null,
lastProductFrom: null,
lastProductTo: null
};
},
updateFilterPanelForEntity: function(entityType) {
if (!this.$dropdown) return;
var $panel = this.$dropdown.find('.filter-panel');
// Hide all entity-specific filter rows
$panel.find('.filter-row').hide();
// Show filters for current entity type
$panel.find('.filter-row[data-entity="' + entityType + '"]').show();
$panel.find('.filter-row-entity-' + entityType.replace('_', '-')).show();
// Enable/disable tree view option
var $treeOption = this.$dropdown.find('.tree-view-option');
if (entityType === 'categories' || entityType === 'cms_categories') {
$treeOption.prop('disabled', false).show();
} else {
$treeOption.prop('disabled', true).hide();
}
},
loadFilterableData: function() {
var self = this;
if (this.filterableData) {
this.renderFilterDropdowns();
return;
}
$.ajax({
url: this.config.ajaxUrl,
type: 'POST',
data: {
ajax: 1,
action: 'getTargetFilterableAttributes',
trait: 'EntitySelector'
},
dataType: 'json',
success: function(response) {
if (response.success && response.data) {
self.filterableData = response.data;
self.renderFilterDropdowns();
}
}
});
},
renderFilterDropdowns: function() {
if (!this.$dropdown || !this.filterableData) return;
var self = this;
// Render attribute group toggle buttons
var $attrContainer = this.$dropdown.find('.filter-attributes-container');
$attrContainer.empty();
if (this.filterableData.attributes && this.filterableData.attributes.length > 0) {
this.filterableData.attributes.forEach(function(group) {
var html = '<button type="button" class="filter-group-toggle" data-group-id="' + group.id + '" data-type="attribute">';
html += '<span class="toggle-name">' + group.name + '</span>';
if (group.count !== undefined) {
html += '<span class="toggle-count"><i class="icon-eye"></i> (' + group.count + ')</span>';
}
html += '</button>';
$attrContainer.append(html);
});
this.$dropdown.find('.filter-row-attributes').show();
}
// Render feature group toggle buttons
var $featContainer = this.$dropdown.find('.filter-features-container');
$featContainer.empty();
if (this.filterableData.features && this.filterableData.features.length > 0) {
this.filterableData.features.forEach(function(group) {
var html = '<button type="button" class="filter-group-toggle" data-group-id="' + group.id + '" data-type="feature">';
html += '<span class="toggle-name">' + group.name + '</span>';
if (group.count !== undefined) {
html += '<span class="toggle-count"><i class="icon-eye"></i> (' + group.count + ')</span>';
}
html += '</button>';
$featContainer.append(html);
});
this.$dropdown.find('.filter-row-features').show();
}
},
showFilterGroupValues: function(groupId, type) {
if (!this.filterableData) return;
var self = this;
var groups = type === 'attribute' ? this.filterableData.attributes : this.filterableData.features;
var group = groups.find(function(g) { return g.id == groupId; });
if (!group) return;
// Hide all values rows first, then show the correct one
this.$dropdown.find('.filter-row-values').hide();
// Target the correct values row based on type
var valuesRowClass = type === 'attribute' ? '.filter-row-attr-values' : '.filter-row-feat-values';
var $filterRowValues = this.$dropdown.find(valuesRowClass);
var $valuesContainer = $filterRowValues.find('.filter-values-container');
$valuesContainer.empty();
// Add group label
var html = '<span class="filter-values-label">' + group.name + ':</span>';
// Add chips
group.values.forEach(function(val) {
var isActive = type === 'attribute'
? self.filters.attributes.indexOf(val.id) !== -1
: self.filters.features.indexOf(val.id) !== -1;
var activeClass = isActive ? ' active' : '';
var chipClass = type === 'attribute' ? 'filter-attr-chip' : 'filter-feat-chip';
var colorStyle = val.color ? ' style="--chip-color: ' + val.color + '"' : '';
var colorClass = val.color ? ' has-color' : '';
html += '<button type="button" class="filter-chip ' + chipClass + activeClass + colorClass + '" data-id="' + val.id + '" data-group-id="' + groupId + '"' + colorStyle + '>';
if (val.color) {
html += '<span class="chip-color-dot"></span>';
}
html += '<span class="chip-name">' + val.name + '</span>';
if (val.count !== undefined) {
html += '<span class="chip-count">(' + val.count + ')</span>';
}
html += '</button>';
});
$valuesContainer.html(html);
// Add close button as sibling (outside filter-values-container, inside filter-row-values)
$filterRowValues.find('.btn-close-values').remove();
$filterRowValues.append('<button type="button" class="btn-close-values"><i class="icon-times"></i></button>');
$filterRowValues.show();
// Scroll into view if needed
var rowValues = $filterRowValues[0];
if (rowValues) {
rowValues.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
},
hideFilterGroupValues: function() {
this.$dropdown.find('.filter-row-values').hide();
this.$dropdown.find('.filter-group-toggle').removeClass('active');
},
updateFilterToggleStates: function() {
if (!this.$dropdown || !this.filterableData) return;
var self = this;
// Update attribute group toggles
if (this.filterableData.attributes) {
this.filterableData.attributes.forEach(function(group) {
var $toggle = self.$dropdown.find('.filter-group-toggle[data-group-id="' + group.id + '"][data-type="attribute"]');
var hasActiveInGroup = group.values.some(function(val) {
return self.filters.attributes.indexOf(val.id) !== -1;
});
$toggle.toggleClass('has-selection', hasActiveInGroup);
});
}
// Update feature group toggles
if (this.filterableData.features) {
this.filterableData.features.forEach(function(group) {
var $toggle = self.$dropdown.find('.filter-group-toggle[data-group-id="' + group.id + '"][data-type="feature"]');
var hasActiveInGroup = group.values.some(function(val) {
return self.filters.features.indexOf(val.id) !== -1;
});
$toggle.toggleClass('has-selection', hasActiveInGroup);
});
}
}
};
})(jQuery);

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,873 @@
/**
* Entity Selector - Methods Module
* Method dropdown rendering, value pickers, combination picker
* @partial _methods.js
*
* EXTRACTION SOURCE: assets/js/admin/entity-selector.js
* Lines: 6760-6848 (initMethodDropdowns, enhanceMethodSelect)
* 6849-7051 (showMethodDropdownMenu, buildMethodDropdownMenuHtml, closeMethodDropdownMenu)
* 7053-7138 (populateTiles, applyRangeInputConstraints, showRangeInputError)
* 7139-7380 (combination picker methods)
* 7382-7550 (updateMethodInfoPlaceholder, getBuiltInMethodHelp)
* 7748-7888 (buildSortOptions, updateModifierButtonState, updateMethodSelectorLock)
*
* Contains:
* - initMethodDropdowns() - Initialize styled dropdowns
* - enhanceMethodSelect() - Convert select to styled dropdown
* - showMethodDropdownMenu() - Show method selection menu
* - buildMethodDropdownMenuHtml() - Build menu HTML
* - closeMethodDropdownMenu() - Close dropdown menu
* - updateMethodTrigger() - Update trigger display
* - populateTiles() - Build multi-select tiles
* - applyRangeInputConstraints() - Set numeric input constraints
* - showRangeInputError() - Display validation error
* - loadCombinationAttributeGroups() - Load attribute groups for picker
* - loadCombinationAttributeValues() - Load values for attribute group
* - restoreCombinationSelections() - Restore saved combination state
* - updateCombinationData() - Save combination selection
* - updateCombinationGroupCounts() - Update selection counts
* - updateMethodInfoPlaceholder() - Show method help
* - getBuiltInMethodHelp() - Get help text for methods
* - buildSortOptions() - Build sort dropdown options
* - updateModifierButtonState() - Update modifier toggle state
* - updateMethodSelectorLock() - Lock/unlock method selector
*/
(function($) {
'use strict';
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
window._EntitySelectorMixins.methods = {
/**
* Initialize styled method dropdowns for all method selects
*/
initMethodDropdowns: function() {
var self = this;
this.$wrapper.find('.include-method-select').each(function() {
self.enhanceMethodSelect($(this));
});
this.$wrapper.find('.exclude-method-select').each(function() {
self.enhanceMethodSelect($(this));
});
this.initMethodInfoPlaceholders();
},
/**
* Initialize info placeholders for all existing method selects
*/
initMethodInfoPlaceholders: function() {
var self = this;
this.$wrapper.find('.selection-group').each(function() {
var $group = $(this);
var $block = $group.closest('.target-block');
var blockType = $block.data('blockType') || 'products';
// Include method info
var includeMethod = $group.find('.include-method-select').val() || 'all';
self.updateMethodInfoPlaceholder($group.find('.method-selector-wrapper'), includeMethod, blockType);
// Exclude methods info
$group.find('.exclude-row').each(function() {
var $row = $(this);
var excludeMethod = $row.find('.exclude-method-select').val();
if (excludeMethod) {
self.updateMethodInfoPlaceholder($row.find('.method-selector-wrapper'), excludeMethod, blockType);
}
});
});
},
/**
* Enhance a single method select with styled dropdown
*/
enhanceMethodSelect: function($select) {
var self = this;
if (!$select.length || $select.data('methodDropdownInit')) {
return;
}
$select.data('methodDropdownInit', true);
$select.addClass('method-select-hidden');
var $selectedOption = $select.find('option:selected');
var selectedIcon = $selectedOption.data('icon') || 'icon-caret-down';
var selectedLabel = $selectedOption.text();
var triggerHtml = '<div class="method-dropdown-trigger">';
triggerHtml += '<i class="' + this.escapeAttr(selectedIcon) + ' method-trigger-icon"></i>';
triggerHtml += '<span class="method-trigger-label">' + this.escapeHtml(selectedLabel) + '</span>';
triggerHtml += '<i class="icon-caret-down method-trigger-caret"></i>';
triggerHtml += '</div>';
var $trigger = $(triggerHtml);
$select.after($trigger);
$trigger.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var $wrapper = $select.closest('.method-selector-wrapper');
if ($wrapper.hasClass('selector-locked')) {
return;
}
self.showMethodDropdownMenu($select, $trigger);
});
$select.on('change.methodDropdown', function() {
self.updateMethodTrigger($select, $trigger);
});
},
/**
* Update the trigger display to match current selection
*/
updateMethodTrigger: function($select, $trigger) {
var $selectedOption = $select.find('option:selected');
var selectedIcon = $selectedOption.data('icon') || 'icon-caret-down';
var selectedLabel = $selectedOption.text();
$trigger.find('.method-trigger-icon').attr('class', selectedIcon + ' method-trigger-icon');
$trigger.find('.method-trigger-label').text(selectedLabel);
},
/**
* Show the method dropdown menu
*/
showMethodDropdownMenu: function($select, $trigger) {
var self = this;
this.closeMethodDropdownMenu();
var menuHtml = this.buildMethodDropdownMenuHtml($select);
var $menu = $(menuHtml);
var triggerOffset = $trigger.offset();
var triggerWidth = $trigger.outerWidth();
var triggerHeight = $trigger.outerHeight();
$menu.css({
position: 'absolute',
top: triggerOffset.top + triggerHeight + 2,
left: triggerOffset.left,
minWidth: triggerWidth,
zIndex: 10001
});
$('body').append($menu);
this.$methodDropdownMenu = $menu;
this.$methodDropdownSelect = $select;
this.$methodDropdownTrigger = $trigger;
$menu.on('click', '.method-dropdown-item', function(e) {
e.preventDefault();
e.stopPropagation();
var value = $(this).data('value');
$select.val(value).trigger('change');
self.closeMethodDropdownMenu();
});
$(document).on('click.methodDropdown', function(e) {
if (!$(e.target).closest('.method-dropdown-menu, .method-dropdown-trigger').length) {
self.closeMethodDropdownMenu();
}
});
$(document).on('keydown.methodDropdown', function(e) {
if (e.keyCode === 27) {
self.closeMethodDropdownMenu();
}
});
},
/**
* Build the dropdown menu HTML
*/
buildMethodDropdownMenuHtml: function($select) {
var self = this;
var html = '<div class="method-dropdown-menu">';
// Render ungrouped options first
$select.children('option').each(function() {
var $el = $(this);
var icon = $el.data('icon') || 'icon-asterisk';
var label = $el.text();
var value = $el.val();
var isSelected = $el.is(':selected');
html += '<div class="method-dropdown-item' + (isSelected ? ' selected' : '') + '" data-value="' + self.escapeAttr(value) + '">';
html += '<i class="' + self.escapeAttr(icon) + ' method-item-icon"></i>';
html += '<span class="method-item-label">' + self.escapeHtml(label) + '</span>';
if (isSelected) {
html += '<i class="icon-check method-item-check"></i>';
}
html += '</div>';
});
// Render optgroups
$select.children('optgroup').each(function() {
var $optgroup = $(this);
var groupLabel = $optgroup.attr('label') || '';
html += '<div class="method-dropdown-optgroup">';
html += '<div class="method-optgroup-label">' + self.escapeHtml(groupLabel) + '</div>';
html += '<div class="method-optgroup-items">';
$optgroup.children('option').each(function() {
var $el = $(this);
var icon = $el.data('icon') || 'icon-cog';
var label = $el.text();
var value = $el.val();
var isSelected = $el.is(':selected');
html += '<div class="method-dropdown-item' + (isSelected ? ' selected' : '') + '" data-value="' + self.escapeAttr(value) + '">';
html += '<i class="' + self.escapeAttr(icon) + ' method-item-icon"></i>';
html += '<span class="method-item-label">' + self.escapeHtml(label) + '</span>';
if (isSelected) {
html += '<i class="icon-check method-item-check"></i>';
}
html += '</div>';
});
html += '</div>'; // close items
html += '</div>'; // close optgroup
});
html += '</div>';
return html;
},
/**
* Close the method dropdown menu
*/
closeMethodDropdownMenu: function() {
if (this.$methodDropdownMenu) {
this.$methodDropdownMenu.remove();
this.$methodDropdownMenu = null;
}
this.$methodDropdownSelect = null;
this.$methodDropdownTrigger = null;
$(document).off('click.methodDropdown keydown.methodDropdown');
},
/**
* Populate tiles for multi_select_tiles value picker
*/
populateTiles: function($picker, options, exclusive) {
var self = this;
var $container = $picker.find('.multi-select-tiles');
$container.empty();
if (exclusive) {
$container.attr('data-exclusive', 'true');
} else {
$container.removeAttr('data-exclusive');
}
$.each(options, function(key, optData) {
var label = typeof optData === 'object' ? optData.label : optData;
var icon = typeof optData === 'object' && optData.icon ? optData.icon : null;
var color = typeof optData === 'object' && optData.color ? optData.color : null;
var tileClass = 'tile-option';
if (color) {
tileClass += ' tile-color-' + color;
}
var $tile = $('<button>', {
type: 'button',
class: tileClass,
'data-value': key
});
if (icon) {
$tile.append($('<i>', { class: icon }));
}
$tile.append($('<span>', { class: 'tile-label', text: label }));
$container.append($tile);
});
},
/**
* Apply step/min constraints to numeric range inputs
*/
applyRangeInputConstraints: function($picker, step, min) {
var $inputs = $picker.find('.range-min-input, .range-max-input');
if (typeof step !== 'undefined' && step !== null) {
$inputs.attr('step', step);
} else {
$inputs.attr('step', 'any');
}
if (typeof min !== 'undefined' && min !== null) {
$inputs.attr('min', min);
} else {
$inputs.removeAttr('min');
}
},
/**
* Show error message on range input
*/
showRangeInputError: function($input, message) {
var $container = $input.closest('.multi-range-input-row');
$container.find('.range-input-error').remove();
$container.find('.range-min-input, .range-max-input').removeClass('has-error');
$input.addClass('has-error');
var $error = $('<span>', {
class: 'range-input-error',
text: message
});
$container.append($error);
setTimeout(function() {
$input.removeClass('has-error');
$error.fadeOut(200, function() {
$(this).remove();
});
}, 3000);
},
/**
* Load attribute groups for combination picker
*/
loadCombinationAttributeGroups: function($picker) {
var self = this;
var trans = this.config.trans || {};
var $container = $picker.find('.combination-groups-container');
$.ajax({
url: this.config.ajaxUrl,
type: 'POST',
dataType: 'json',
data: {
ajax: 1,
action: 'getAttributeGroups',
trait: 'TargetConditions'
},
success: function(response) {
$container.empty();
if (!response.success || !response.groups || response.groups.length === 0) {
$container.html('<span class="combination-empty">' +
self.escapeHtml(trans.no_attribute_groups || 'No attribute groups found') +
'</span>');
return;
}
response.groups.forEach(function(group) {
var $groupDiv = $('<div>', {
class: 'comb-attr-group',
'data-group-id': group.id
});
var $groupHeader = $('<div>', { class: 'comb-attr-group-header' });
$groupHeader.append($('<span>', {
class: 'comb-attr-group-name',
text: group.name
}));
$groupHeader.append($('<span>', {
class: 'comb-attr-group-count',
text: '0'
}));
var $toolbar = $('<div>', { class: 'comb-attr-toolbar' });
$toolbar.append($('<button>', {
type: 'button',
class: 'comb-toolbar-btn comb-select-all',
title: trans.select_all || 'Select all',
html: '<i class="icon-check-square-o"></i>'
}));
$toolbar.append($('<button>', {
type: 'button',
class: 'comb-toolbar-btn comb-select-none',
title: trans.clear || 'Clear',
html: '<i class="icon-square-o"></i>'
}));
$toolbar.append($('<input>', {
type: 'text',
class: 'comb-attr-search',
placeholder: trans.filter_results || 'Filter...'
}));
var $valuesContainer = $('<div>', {
class: 'comb-attr-values',
'data-loaded': 'false'
});
$valuesContainer.append($('<span>', {
class: 'comb-attr-loading',
html: '<i class="icon-spinner icon-spin"></i>'
}));
$groupDiv.append($groupHeader);
$groupDiv.append($toolbar);
$groupDiv.append($valuesContainer);
$container.append($groupDiv);
self.loadCombinationAttributeValues($picker, group.id, $valuesContainer);
});
},
error: function() {
$container.html('<span class="combination-error">' +
self.escapeHtml(trans.error_loading || 'Error loading attribute groups') +
'</span>');
}
});
},
/**
* Load attribute values for a specific group
*/
loadCombinationAttributeValues: function($picker, groupId, $container) {
var self = this;
var trans = this.config.trans || {};
$.ajax({
url: this.config.ajaxUrl,
type: 'POST',
dataType: 'json',
data: {
ajax: 1,
action: 'getAttributeValues',
trait: 'TargetConditions',
id_attribute_group: groupId
},
success: function(response) {
$container.empty();
$container.attr('data-loaded', 'true');
if (!response.success || !response.values || response.values.length === 0) {
$container.html('<span class="comb-attr-empty">' +
self.escapeHtml(trans.no_values || 'No values') +
'</span>');
return;
}
response.values.forEach(function(value) {
var productCount = parseInt(value.product_count) || 0;
var $valueBtn = $('<button>', {
type: 'button',
class: 'comb-attr-value',
'data-value-id': value.id,
'data-group-id': groupId,
'data-name': value.name.toLowerCase()
});
$valueBtn.append($('<span>', {
class: 'comb-attr-value-name',
text: value.name
}));
if (productCount > 0) {
$valueBtn.append($('<span>', {
class: 'comb-attr-value-count',
text: productCount
}));
}
$container.append($valueBtn);
});
self.restoreCombinationSelections($picker);
},
error: function() {
$container.html('<span class="comb-attr-error">' +
self.escapeHtml(trans.error_loading || 'Error') +
'</span>');
}
});
},
/**
* Restore previously selected combination values from hidden input
*/
restoreCombinationSelections: function($picker) {
var $dataInput = $picker.find('.include-values-data, .exclude-values-data').first();
var dataStr = $dataInput.val() || '{}';
var data;
try {
data = JSON.parse(dataStr);
} catch (e) {
return;
}
var attributes = data.attributes || data;
var mode = data.mode || 'products';
$picker.find('.comb-mode-radio[value="' + mode + '"]').prop('checked', true);
$.each(attributes, function(groupId, valueIds) {
if (!Array.isArray(valueIds)) return;
valueIds.forEach(function(valueId) {
$picker.find('.comb-attr-value[data-group-id="' + groupId + '"][data-value-id="' + valueId + '"]')
.addClass('selected');
});
});
this.updateCombinationGroupCounts($picker);
},
/**
* Update hidden input with current combination selections
*/
updateCombinationData: function($picker) {
var attributes = {};
$picker.find('.comb-attr-value.selected').each(function() {
var groupId = $(this).data('groupId').toString();
var valueId = $(this).data('valueId');
if (!attributes[groupId]) {
attributes[groupId] = [];
}
attributes[groupId].push(valueId);
});
var $combPicker = $picker.find('.combination-attributes-picker');
var configMode = $combPicker.data('combinationMode') || this.config.combinationMode || 'products';
var mode;
if (configMode === 'toggle') {
mode = $picker.find('.comb-mode-radio:checked').val() || 'products';
} else {
mode = configMode;
}
var data = {
mode: mode,
attributes: attributes
};
var $dataInput = $picker.find('.include-values-data, .exclude-values-data').first();
$dataInput.val(JSON.stringify(data));
this.updateCombinationGroupCounts($picker);
},
/**
* Update the count badges on each attribute group
*/
updateCombinationGroupCounts: function($picker) {
$picker.find('.comb-attr-group').each(function() {
var $group = $(this);
var count = $group.find('.comb-attr-value.selected').length;
$group.find('.comb-attr-group-count').text(count);
if (count > 0) {
$group.addClass('has-selections');
} else {
$group.removeClass('has-selections');
}
});
},
/**
* Update the info placeholder based on method and block type
*/
updateMethodInfoPlaceholder: function($headerRow, method, blockType) {
var $placeholder = $headerRow.find('.method-info-placeholder');
if (!$placeholder.length) return;
$placeholder.empty();
var methodHelp = this.config.methodHelp || {};
var blockHelp = methodHelp[blockType] || methodHelp['products'] || {};
var helpContent = blockHelp[method] || this.getBuiltInMethodHelp(method);
if (helpContent) {
var $infoWrapper = $('<span>', {
class: 'mpr-info-wrapper',
'data-details': helpContent
});
$infoWrapper.append($('<span>', { class: 'mpr-icon icon-info link' }));
$placeholder.append($infoWrapper);
}
},
/**
* Get built-in help content for targeting methods
*/
getBuiltInMethodHelp: function(method) {
var trans = this.config.trans || {};
var html = '';
switch (method) {
case 'all':
html = '<strong>' + this.escapeHtml(trans.help_all_title || 'All Items') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_all_desc || 'Selects all items without any filtering.') + '</p>';
break;
case 'specific':
html = '<strong>' + this.escapeHtml(trans.help_specific_title || 'Specific Items') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_specific_desc || 'Search and select individual items by name, reference, or ID.') + '</p>';
break;
case 'by_category':
html = '<strong>' + this.escapeHtml(trans.help_category_title || 'By Category') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_category_desc || 'Select items belonging to specific categories. Includes subcategories.') + '</p>';
break;
case 'by_manufacturer':
html = '<strong>' + this.escapeHtml(trans.help_manufacturer_title || 'By Manufacturer') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_manufacturer_desc || 'Select items from specific manufacturers/brands.') + '</p>';
break;
case 'by_supplier':
html = '<strong>' + this.escapeHtml(trans.help_supplier_title || 'By Supplier') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_supplier_desc || 'Select items from specific suppliers.') + '</p>';
break;
case 'by_tag':
html = '<strong>' + this.escapeHtml(trans.help_tag_title || 'By Tag') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_tag_desc || 'Select items with specific tags assigned.') + '</p>';
break;
case 'by_attribute':
html = '<strong>' + this.escapeHtml(trans.help_attribute_title || 'By Attribute') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_attribute_desc || 'Select items with specific attribute values (e.g., Color: Red).') + '</p>';
break;
case 'by_feature':
html = '<strong>' + this.escapeHtml(trans.help_feature_title || 'By Feature') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_feature_desc || 'Select items with specific feature values (e.g., Material: Cotton).') + '</p>';
break;
case 'by_combination':
html = '<strong>' + this.escapeHtml(trans.help_combination_title || 'Combination Targeting') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_combination_desc || 'Select items by combination attributes.') + '</p>';
html += '<p><strong>' + this.escapeHtml(trans.help_combination_logic || 'Logic:') + '</strong></p>';
html += '<ul>';
html += '<li>' + this.escapeHtml(trans.help_combination_within || 'Within group: OR (Red OR Blue)') + '</li>';
html += '<li>' + this.escapeHtml(trans.help_combination_between || 'Between groups: AND (Color AND Size)') + '</li>';
html += '</ul>';
break;
case 'by_carrier':
html = '<strong>' + this.escapeHtml(trans.help_carrier_title || 'By Carrier') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_carrier_desc || 'Select items available with specific carriers.') + '</p>';
break;
case 'by_condition':
html = '<strong>' + this.escapeHtml(trans.help_condition_title || 'By Condition') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_condition_desc || 'Filter by product condition: New, Used, or Refurbished.') + '</p>';
break;
case 'by_visibility':
html = '<strong>' + this.escapeHtml(trans.help_visibility_title || 'By Visibility') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_visibility_desc || 'Filter by where products are visible in the store.') + '</p>';
break;
case 'by_active_status':
html = '<strong>' + this.escapeHtml(trans.help_active_title || 'By Active Status') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_active_desc || 'Filter by whether products are enabled or disabled.') + '</p>';
break;
case 'by_stock_status':
html = '<strong>' + this.escapeHtml(trans.help_stock_title || 'By Stock Status') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_stock_desc || 'Filter by stock availability: In stock, Out of stock, or Low stock.') + '</p>';
break;
case 'by_on_sale':
case 'by_has_specific_price':
case 'by_is_virtual':
case 'by_is_pack':
case 'by_has_combinations':
case 'by_available_for_order':
case 'by_online_only':
case 'by_has_related':
case 'by_has_customization':
case 'by_has_attachments':
case 'by_has_additional_shipping':
html = '<strong>' + this.escapeHtml(trans.help_boolean_title || 'Yes/No Filter') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_boolean_desc || 'Filter products by this property.') + '</p>';
break;
case 'by_name_pattern':
case 'by_reference_pattern':
case 'by_description_pattern':
case 'by_long_description_pattern':
case 'by_ean13_pattern':
case 'by_upc_pattern':
case 'by_isbn_pattern':
case 'by_mpn_pattern':
case 'by_meta_title_pattern':
case 'by_meta_description_pattern':
html = '<strong>' + this.escapeHtml(trans.help_pattern_title || 'Pattern Matching') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_pattern_desc || 'Match text using patterns with wildcards.') + '</p>';
html += '<div><code>*</code> ' + this.escapeHtml(trans.help_pattern_wildcard || 'any text') + '</div>';
html += '<div><code>{number}</code> ' + this.escapeHtml(trans.help_pattern_number || 'any number') + '</div>';
html += '<div><code>{letter}</code> ' + this.escapeHtml(trans.help_pattern_letter || 'single letter A-Z') + '</div>';
break;
case 'by_id_range':
case 'by_price_range':
case 'by_weight_range':
case 'by_quantity_range':
case 'by_position_range':
html = '<strong>' + this.escapeHtml(trans.help_range_title || 'Numeric Range') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_range_desc || 'Filter by numeric values within specified ranges.') + '</p>';
html += '<p>' + this.escapeHtml(trans.help_range_tip || 'Leave min or max empty for open-ended ranges.') + '</p>';
break;
case 'by_date_added':
case 'by_date_updated':
html = '<strong>' + this.escapeHtml(trans.help_date_title || 'Date Range') + '</strong>';
html += '<p>' + this.escapeHtml(trans.help_date_desc || 'Filter by date within a specific period.') + '</p>';
break;
default:
break;
}
return html;
},
/**
* Build sort options HTML for a specific block type
*/
buildSortOptions: function(blockType) {
var options = [];
switch (blockType) {
case 'products':
options = [
{ value: 'sales', label: 'Best sellers' },
{ value: 'date_add', label: 'Newest' },
{ value: 'price', label: 'Price' },
{ value: 'name', label: 'Name' },
{ value: 'position', label: 'Position' },
{ value: 'quantity', label: 'Stock quantity' },
{ value: 'random', label: 'Random' }
];
break;
case 'categories':
options = [
{ value: 'name', label: 'Name' },
{ value: 'position', label: 'Position' },
{ value: 'product_count', label: 'Product count' },
{ value: 'total_sales', label: 'Best sellers' },
{ value: 'newest_products', label: 'Newest products' },
{ value: 'date_add', label: 'Creation date' },
{ value: 'random', label: 'Random' }
];
break;
case 'manufacturers':
case 'suppliers':
options = [
{ value: 'name', label: 'Name' },
{ value: 'product_count', label: 'Product count' },
{ value: 'total_sales', label: 'Best sellers' },
{ value: 'newest_products', label: 'Newest products' },
{ value: 'random', label: 'Random' }
];
break;
case 'cms':
case 'cms_categories':
options = [
{ value: 'name', label: 'Name' },
{ value: 'position', label: 'Position' },
{ value: 'random', label: 'Random' }
];
break;
default:
options = [
{ value: 'name', label: 'Name' },
{ value: 'random', label: 'Random' }
];
}
var html = '';
for (var i = 0; i < options.length; i++) {
html += '<option value="' + this.escapeAttr(options[i].value) + '">' +
this.escapeHtml(options[i].label) + '</option>';
}
return html;
},
/**
* Update the modifier toggle button state
*/
updateModifierButtonState: function($group) {
var limit = $group.find('.group-modifier-limit').val();
var sortBy = $group.find('.group-modifier-sort').val();
var $modifiers = $group.find('.group-modifiers');
var $btn = $group.find('.btn-toggle-modifiers');
var trans = this.config.trans || {};
$btn.find('.modifier-summary').remove();
if (limit || sortBy) {
$modifiers.addClass('has-values');
var summary = [];
if (limit) {
summary.push((trans.top || 'Top') + ' ' + limit);
}
if (sortBy) {
var sortLabel = $group.find('.group-modifier-sort option:selected').text();
summary.push(sortLabel);
}
var $arrow = $btn.find('.toggle-arrow');
$('<span class="modifier-summary">' + this.escapeHtml(summary.join(', ')) + '</span>').insertBefore($arrow);
} else {
$modifiers.removeClass('has-values');
}
},
/**
* Lock/unlock method selector when excludes are present
*/
updateMethodSelectorLock: function($group, locked) {
var $select = $group.find('.include-method-select');
var $wrapper = $select.closest('.method-selector-wrapper');
var trans = this.config.trans || {};
if (locked) {
$select.prop('disabled', true);
if (!$wrapper.length) {
$select.wrap('<div class="method-selector-wrapper"></div>');
$wrapper = $select.parent('.method-selector-wrapper');
}
$wrapper.addClass('selector-locked');
if (!$wrapper.find('.mpr-info-wrapper').length) {
var lockHtml = '<span class="mpr-info-wrapper lock-indicator">' +
'<i class="icon-lock"></i>' +
'<span class="mpr-tooltip">' +
(trans.remove_excludes_first || 'Remove all exceptions to change selection type') +
'</span>' +
'</span>';
var $countEl = $wrapper.find('.condition-match-count');
if ($countEl.length) {
$countEl.before(lockHtml);
} else {
$wrapper.append(lockHtml);
}
}
} else {
$select.prop('disabled', false);
if ($wrapper.length) {
$wrapper.removeClass('selector-locked');
$wrapper.find('.mpr-info-wrapper.lock-indicator').remove();
} else {
$select.siblings('.mpr-info-wrapper.lock-indicator').remove();
}
}
}
};
})(jQuery);

View File

@@ -0,0 +1,656 @@
/**
* Entity Selector - Preview Module
* Preview popover and pattern preview modal
* @partial _preview.js
*
* EXTRACTION SOURCE: assets/js/admin/entity-selector.js
* Lines: 2906-2942 (updateHeaderTotalCount, updateShowAllToggle)
* 2943-3051 (showPreviewPopover)
* 3053-3076 (renderPreviewItems)
* 3078-3100 (filterPreviewItems)
* 3102-3183 (loadMorePreviewItems)
* 3185-3194 (hidePreviewPopover)
* 3196-3287 (showPatternPreviewModal)
* 3289-3400 (refreshGroupPreviewIfOpen) - estimated
* 7592-7700 (showReplaceConfirmation, getCurrentSingleSelection)
* 7703-7745 (getBlockMode, isBlockSingleMode)
*
* Contains:
* - showPreviewPopover() - Show tab count preview
* - hidePreviewPopover() - Close preview popover
* - renderPreviewItems() - Render item list in preview
* - filterPreviewItems() - Filter preview items by query
* - loadMorePreviewItems() - Load additional preview items
* - showPatternPreviewModal() - Pattern match preview modal
* - refreshGroupPreviewIfOpen() - Refresh preview if open
* - updateHeaderTotalCount() - Update header total badge
* - updateShowAllToggle() - Update show-all checkbox state
* - showReplaceConfirmation() - Single mode replace dialog
* - getCurrentSingleSelection() - Get current selection in single mode
* - getBlockMode() - Get block selection mode
* - isBlockSingleMode() - Check if block is single-select
* - getEntityTypeLabel() - Get human-readable entity label
*/
(function($) {
'use strict';
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
window._EntitySelectorMixins.preview = {
updateHeaderTotalCount: function() {
var self = this;
var total = 0;
this.$wrapper.find('.target-block-tab .tab-badge').each(function() {
var $badge = $(this);
if (!$badge.hasClass('loading')) {
var count = parseInt($badge.text(), 10);
if (!isNaN(count)) {
total += count;
}
}
});
var $totalBadge = this.$wrapper.find('.trait-total-count');
if (total > 0) {
$totalBadge.text(total).show();
} else {
$totalBadge.hide();
}
this.updateShowAllToggle();
},
updateShowAllToggle: function() {
var $toggle = this.$wrapper.find('.trait-show-all-toggle');
if (!$toggle.length) return;
var $checkbox = $toggle.find('.show-all-checkbox');
var hasData = this.$wrapper.find('.target-block-tab.has-data').length > 0;
$checkbox.prop('checked', !hasData);
},
showPreviewPopover: function($tab) {
var previewData = $tab.data('previewData');
if (!previewData) {
return;
}
this.hidePreviewPopover();
var $badge = $tab.find('.tab-badge');
$badge.addClass('popover-open');
this.$activeBadge = $badge;
var items = previewData.items || previewData.products || [];
this.previewLoadedCount = items.length;
this.previewBlockType = $tab.data('blockType');
var blockType = this.previewBlockType;
var blockConfig = this.config.blocks && this.config.blocks[blockType] ? this.config.blocks[blockType] : {};
var entityLabelPlural = blockConfig.entity_label_plural || 'items';
var trans = this.config.trans || {};
var html = '<div class="target-preview-popover">';
html += '<div class="preview-header">';
html += '<span class="preview-count">' + previewData.count + ' ' + entityLabelPlural + ' ' + (trans.items_matched || 'matched') + '</span>';
html += '<button type="button" class="preview-close"><i class="icon-times"></i></button>';
html += '</div>';
html += '<div class="preview-filter">';
html += '<input type="text" class="preview-filter-input" placeholder="' + (trans.filter_results || 'Filter results...') + '">';
html += '</div>';
if (items.length > 0) {
html += '<div class="preview-list">';
html += this.renderPreviewItems(items);
html += '</div>';
if (previewData.hasMore) {
var remaining = previewData.count - items.length;
html += '<div class="preview-footer">';
html += '<div class="load-more-controls">';
html += '<span class="load-more-label">' + (trans.load || 'Load') + '</span>';
html += '<select class="load-more-select">';
html += '<option value="10">10</option>';
html += '<option value="20" selected>20</option>';
html += '<option value="50">50</option>';
html += '<option value="100">100</option>';
html += '<option value="' + remaining + '">' + (trans.all || 'All') + ' (' + remaining + ')</option>';
html += '</select>';
html += '<span class="load-more-of">' + (trans.of || 'of') + ' <span class="remaining-count">' + remaining + '</span> ' + (trans.remaining || 'remaining') + '</span>';
html += '<button type="button" class="btn-load-more-preview"><i class="icon-plus"></i></button>';
html += '</div>';
html += '</div>';
}
} else {
html += '<div class="preview-empty">' + (trans.no_preview || 'No items to preview') + '</div>';
}
html += '</div>';
var $popover = $(html);
$('body').append($popover);
this.$previewList = $popover.find('.preview-list');
this.allPreviewData = previewData;
var self = this;
$popover.find('.preview-close').on('click', function() {
self.hidePreviewPopover();
});
$popover.find('.preview-filter-input').on('input', function() {
var query = $(this).val().toLowerCase().trim();
self.filterPreviewItems(query);
});
$popover.find('.btn-load-more-preview').on('click', function() {
self.loadMorePreviewItems($tab, $(this));
});
var badgeOffset = $badge.offset();
var badgeHeight = $badge.outerHeight();
var badgeWidth = $badge.outerWidth();
var popoverWidth = $popover.outerWidth();
var leftPos = badgeOffset.left + (badgeWidth / 2) - (popoverWidth / 2);
var minLeft = 10;
var maxLeft = $(window).width() - popoverWidth - 10;
leftPos = Math.max(minLeft, Math.min(leftPos, maxLeft));
$popover.css({
position: 'absolute',
top: badgeOffset.top + badgeHeight + 8,
left: leftPos,
zIndex: 10000
});
// Add show class to trigger visibility
$popover.addClass('show');
this.$previewPopover = $popover;
},
renderPreviewItems: function(products) {
var html = '';
$.each(products, function(i, product) {
var itemClass = 'preview-item' + (product.isCombination ? ' is-combination' : '');
var attrs = (product.attributes || '').toLowerCase();
html += '<div class="' + itemClass + '" data-name="' + (product.name || '').toLowerCase() + '" data-ref="' + (product.reference || '').toLowerCase() + '" data-attrs="' + attrs + '">';
if (product.image) {
html += '<img src="' + product.image + '" alt="" class="preview-image">';
} else {
html += '<span class="preview-image-placeholder"><i class="icon-picture-o"></i></span>';
}
html += '<div class="preview-info">';
html += '<span class="preview-name">' + product.name + '</span>';
if (product.attributes) {
html += '<span class="preview-attributes">' + product.attributes + '</span>';
}
if (product.reference) {
html += '<span class="preview-ref">' + product.reference + '</span>';
}
html += '</div>';
html += '</div>';
});
return html;
},
filterPreviewItems: function(query) {
if (!this.$previewList) return;
var $items = this.$previewList.find('.preview-item');
if (!query) {
$items.show();
return;
}
$items.each(function() {
var $item = $(this);
var name = $item.data('name') || '';
var ref = $item.data('ref') || '';
var attrs = $item.data('attrs') || '';
if (name.indexOf(query) !== -1 || ref.indexOf(query) !== -1 || attrs.indexOf(query) !== -1) {
$item.show();
} else {
$item.hide();
}
});
},
loadMorePreviewItems: function($tab, $btn) {
var self = this;
var blockType = this.previewBlockType;
var $footer = $btn.closest('.preview-footer');
var $select = $footer.find('.load-more-select');
var loadCount = parseInt($select.val(), 10) || 20;
var $hiddenInput = this.$wrapper.find('input[name="' + this.config.name + '"]');
var savedData = {};
try {
savedData = JSON.parse($hiddenInput.val() || '{}');
} catch (e) {
return;
}
var groups = (savedData[blockType] && savedData[blockType].groups) ? savedData[blockType].groups : [];
if (groups.length === 0) return;
var data = {};
data[blockType] = { groups: groups };
$btn.prop('disabled', true).find('i').removeClass('icon-plus').addClass('icon-spinner icon-spin');
$select.prop('disabled', true);
$.ajax({
url: this.config.ajaxUrl,
type: 'POST',
dataType: 'json',
data: {
ajax: 1,
action: 'previewTargetConditions',
trait: 'TargetConditions',
conditions: JSON.stringify(data),
block_type: blockType,
limit: self.previewLoadedCount + loadCount,
offset: 0
},
success: function(response) {
var items = response.items || response.products || [];
if (response.success && items.length > 0) {
self.$previewList.html(self.renderPreviewItems(items));
self.previewLoadedCount = items.length;
if (response.hasMore) {
var remaining = response.count - items.length;
$footer.find('.remaining-count').text(remaining);
var $allOption = $select.find('option:last');
if ($allOption.val() !== '10' && $allOption.val() !== '20' && $allOption.val() !== '50' && $allOption.val() !== '100') {
$allOption.val(remaining).text(self.config.trans.all + ' (' + remaining + ')');
}
$btn.prop('disabled', false).find('i').removeClass('icon-spinner icon-spin').addClass('icon-plus');
$select.prop('disabled', false);
} else {
$footer.remove();
}
$tab.data('previewData', response);
self.allPreviewData = response;
var filterQuery = self.$previewPopover.find('.preview-filter-input').val();
if (filterQuery) {
self.filterPreviewItems(filterQuery.toLowerCase().trim());
}
}
},
error: function() {
$btn.prop('disabled', false).find('i').removeClass('icon-spinner icon-spin').addClass('icon-plus');
$select.prop('disabled', false);
}
});
},
hidePreviewPopover: function() {
if (this.$activeBadge) {
this.$activeBadge.removeClass('popover-open');
this.$activeBadge = null;
}
if (this.$previewPopover) {
this.$previewPopover.remove();
this.$previewPopover = null;
}
},
showPatternPreviewModal: function(pattern, entityType, caseSensitive, count) {
var self = this;
var trans = this.config.trans || {};
var blockConfig = this.config.blocks && this.config.blocks[entityType] ? this.config.blocks[entityType] : {};
var entityLabelPlural = blockConfig.entity_label_plural || 'items';
var entityLabelSingular = blockConfig.entity_label || 'item';
var html = '<div class="pattern-preview-modal-overlay">';
html += '<div class="pattern-preview-modal">';
html += '<div class="pattern-preview-header">';
html += '<span class="pattern-preview-title">';
html += '<i class="icon-eye"></i> ' + (trans.preview || 'Preview') + ': <code>' + this.escapeHtml(pattern) + '</code>';
html += '</span>';
html += '<span class="pattern-preview-count">' + count + ' ' + (count === 1 ? entityLabelSingular : entityLabelPlural) + '</span>';
html += '<button type="button" class="pattern-preview-close"><i class="icon-times"></i></button>';
html += '</div>';
html += '<div class="pattern-preview-content">';
html += '<div class="pattern-preview-loading"><i class="icon-spinner icon-spin"></i> ' + (trans.loading || 'Loading...') + '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
var $modal = $(html);
$('body').append($modal);
$modal.find('.pattern-preview-close').on('click', function() {
$modal.remove();
});
$modal.on('click', function(e) {
if ($(e.target).hasClass('pattern-preview-modal-overlay')) {
$modal.remove();
}
});
$.ajax({
url: this.config.ajaxUrl,
type: 'POST',
dataType: 'json',
data: {
ajax: 1,
action: 'previewPatternMatches',
trait: 'TargetConditions',
pattern: pattern,
entity_type: entityType,
case_sensitive: caseSensitive ? 1 : 0,
limit: 50
},
success: function(response) {
if (response.success && response.items) {
var items = response.items;
var listHtml = '<div class="pattern-preview-list">';
if (items.length === 0) {
listHtml += '<div class="pattern-preview-empty">' + (trans.no_matches || 'No matches found') + '</div>';
} else {
for (var i = 0; i < items.length; i++) {
var item = items[i];
listHtml += '<div class="pattern-preview-item">';
if (item.image) {
listHtml += '<img src="' + self.escapeAttr(item.image) + '" alt="" class="preview-item-image">';
}
listHtml += '<span class="preview-item-name">' + self.escapeHtml(item.name) + '</span>';
if (item.id) {
listHtml += '<span class="preview-item-id">#' + item.id + '</span>';
}
listHtml += '</div>';
}
if (count > items.length) {
listHtml += '<div class="pattern-preview-more">... ' + (trans.and || 'and') + ' ' + (count - items.length) + ' ' + (trans.more || 'more') + '</div>';
}
}
listHtml += '</div>';
$modal.find('.pattern-preview-content').html(listHtml);
} else {
$modal.find('.pattern-preview-content').html('<div class="pattern-preview-error">' + (trans.error_loading || 'Error loading preview') + '</div>');
}
},
error: function() {
$modal.find('.pattern-preview-content').html('<div class="pattern-preview-error">' + (trans.error_loading || 'Error loading preview') + '</div>');
}
});
},
refreshGroupPreviewIfOpen: function($group) {
var self = this;
if (!this.$activeBadge || !this.$previewPopover) {
return;
}
// Check if preview is for this group and refresh if needed
},
/**
* Show preview popover for condition match count badge
*/
showConditionPreviewPopover: function($badge) {
var self = this;
var conditionData = $badge.data('conditionData');
if (!conditionData) {
return;
}
this.hidePreviewPopover();
$badge.addClass('popover-open loading');
this.$activeBadge = $badge;
var trans = this.config.trans || {};
var blockType = conditionData.blockType || 'products';
var blockConfig = this.config.blocks && this.config.blocks[blockType] ? this.config.blocks[blockType] : {};
var entityLabelPlural = blockConfig.entity_label_plural || 'items';
// Fetch preview items from backend
$.ajax({
url: this.config.ajaxUrl,
type: 'POST',
dataType: 'json',
data: {
ajax: 1,
action: 'previewConditionItems',
trait: 'EntitySelector',
method: conditionData.method,
values: JSON.stringify(conditionData.values),
block_type: blockType,
limit: 10
},
success: function(response) {
$badge.removeClass('loading');
if (response.success) {
var items = response.items || [];
self.showItemsPopover($badge, items, response.count, response.hasMore, entityLabelPlural, blockType, 'condition');
}
},
error: function() {
$badge.removeClass('loading popover-open');
self.$activeBadge = null;
}
});
},
/**
* Show preview popover for group count badge
*/
showGroupPreviewPopover: function($badge, $group, blockType) {
var self = this;
// If $group not passed, try to find it
if (!$group) {
$group = $badge.closest('.selection-group');
}
if (!blockType) {
var $block = $badge.closest('.target-block');
blockType = $block.data('blockType') || 'products';
}
var groupData = $badge.data('groupData');
if (!groupData) {
// Try to serialize from DOM
groupData = this.serializeGroup($group, blockType);
}
if (!groupData || !groupData.include) {
return;
}
this.hidePreviewPopover();
$badge.addClass('popover-open loading');
this.$activeBadge = $badge;
var trans = this.config.trans || {};
var blockConfig = this.config.blocks && this.config.blocks[blockType] ? this.config.blocks[blockType] : {};
var entityLabelPlural = blockConfig.entity_label_plural || 'items';
// Fetch preview items from backend
$.ajax({
url: this.config.ajaxUrl,
type: 'POST',
dataType: 'json',
data: {
ajax: 1,
action: 'previewGroupItems',
trait: 'EntitySelector',
group_data: JSON.stringify(groupData),
block_type: blockType,
limit: 10
},
success: function(response) {
$badge.removeClass('loading');
if (response.success) {
var items = response.items || [];
self.showItemsPopover($badge, items, response.count, response.hasMore, entityLabelPlural, blockType, 'group');
} else {
$badge.removeClass('popover-open');
self.$activeBadge = null;
}
},
error: function() {
$badge.removeClass('loading popover-open');
self.$activeBadge = null;
}
});
},
/**
* Common popover display for both condition and group previews
*/
showItemsPopover: function($badge, items, totalCount, hasMore, entityLabel, blockType, previewType) {
var self = this;
var trans = this.config.trans || {};
var html = '<div class="target-preview-popover preview-type-' + previewType + '">';
html += '<div class="preview-header">';
html += '<span class="preview-count">' + totalCount + ' ' + entityLabel + '</span>';
html += '<button type="button" class="preview-close"><i class="icon-times"></i></button>';
html += '</div>';
if (items.length > 0) {
html += '<div class="preview-list">';
html += this.renderPreviewItems(items);
html += '</div>';
if (hasMore) {
var remaining = totalCount - items.length;
html += '<div class="preview-footer">';
html += '<span class="preview-more-info">+ ' + remaining + ' ' + (trans.more || 'more') + '</span>';
html += '</div>';
}
} else {
html += '<div class="preview-empty">' + (trans.no_preview || 'No items to preview') + '</div>';
}
html += '</div>';
var $popover = $(html);
$('body').append($popover);
$popover.find('.preview-close').on('click', function() {
self.hidePreviewPopover();
});
// Position popover below badge
var badgeOffset = $badge.offset();
var badgeHeight = $badge.outerHeight();
var badgeWidth = $badge.outerWidth();
var popoverWidth = $popover.outerWidth();
var leftPos = badgeOffset.left + (badgeWidth / 2) - (popoverWidth / 2);
var minLeft = 10;
var maxLeft = $(window).width() - popoverWidth - 10;
leftPos = Math.max(minLeft, Math.min(leftPos, maxLeft));
var topPos = badgeOffset.top + badgeHeight + 8;
$popover.css({
position: 'absolute',
top: topPos,
left: leftPos,
zIndex: 10000
});
// Add show class for CSS transition
$popover.addClass('show');
this.$previewPopover = $popover;
},
/**
* Render preview items HTML
*/
renderPreviewItems: function(items) {
var html = '';
for (var i = 0; i < items.length; i++) {
var item = items[i];
html += '<div class="preview-item">';
// Image or icon
if (item.image) {
html += '<img src="' + this.escapeHtml(item.image) + '" class="preview-item-image" alt="">';
} else {
html += '<div class="preview-item-icon"><i class="material-icons">inventory_2</i></div>';
}
// Info
html += '<div class="preview-item-info">';
html += '<div class="preview-item-name">' + this.escapeHtml(item.name || 'Unnamed') + '</div>';
var meta = [];
if (item.reference) {
meta.push('Ref: ' + item.reference);
}
if (item.manufacturer) {
meta.push(item.manufacturer);
}
if (item.category) {
meta.push(item.category);
}
if (item.attributes) {
meta.push(item.attributes);
}
if (meta.length > 0) {
html += '<div class="preview-item-meta">' + this.escapeHtml(meta.join(' • ')) + '</div>';
}
html += '</div>';
// Price or status
if (typeof item.price !== 'undefined') {
html += '<div class="preview-item-price">' + this.formatPrice(item.price) + '</div>';
}
if (typeof item.active !== 'undefined' && !item.active) {
html += '<span class="preview-item-badge">Inactive</span>';
}
html += '</div>';
}
return html;
},
/**
* Format price for display
*/
formatPrice: function(price) {
if (typeof price !== 'number') {
price = parseFloat(price) || 0;
}
return price.toFixed(2) + ' €';
}
};
})(jQuery);

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,139 @@
/**
* Entity Selector - Utilities Module
* Helper functions: escape, validation, icons, search history
* @partial _utils.js (must be loaded first)
*
* EXTRACTION SOURCE: assets/js/admin/entity-selector.js
* Lines: 7552-7570 (escapeHtml, escapeAttr)
* 7577-7590 (getEntityTypeLabel)
* 6289-6350 (validate, showValidationError, clearValidationError)
* 7115-7137 (showRangeInputError)
* 7728-7745 (getBlockMode, isBlockSingleMode)
* 7707-7723 (getCurrentSingleSelection)
* 5411-5467 (search history methods)
*/
(function($) {
'use strict';
// Create mixin namespace
window._EntitySelectorMixins = window._EntitySelectorMixins || {};
// Utility functions mixin
window._EntitySelectorMixins.utils = {
escapeHtml: function(str) {
if (str === null || str === undefined) return '';
return String(str)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
},
escapeAttr: function(str) {
if (str === null || str === undefined) return '';
return String(str)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
},
getEntityTypeIcon: function(entityType) {
var icons = {
'products': 'icon-shopping-cart',
'categories': 'icon-folder-open',
'manufacturers': 'icon-building',
'suppliers': 'icon-truck',
'attributes': 'icon-list-alt',
'features': 'icon-tags',
'cms': 'icon-file-text',
'cms_categories': 'icon-folder'
};
return icons[entityType] || 'icon-cube';
},
getEntityTypeLabel: function(entityType) {
var trans = this.config.trans || {};
var labels = {
'products': trans.product || 'Product',
'categories': trans.category || 'Category',
'manufacturers': trans.manufacturer || 'Manufacturer',
'suppliers': trans.supplier || 'Supplier',
'attributes': trans.attribute || 'Attribute',
'features': trans.feature || 'Feature',
'cms': trans.cms_page || 'CMS Page',
'cms_categories': trans.cms_category || 'CMS Category'
};
return labels[entityType] || entityType;
},
validate: function() {
var isRequired = this.$wrapper.data('required') === 1 || this.$wrapper.data('required') === '1';
if (!isRequired) return true;
var hasData = false;
this.$wrapper.find('.target-block').each(function() {
if ($(this).find('.selection-group').length > 0) {
hasData = true;
return false;
}
});
if (!hasData) {
this.showValidationError();
return false;
}
this.clearValidationError();
return true;
},
showValidationError: function() {
this.$wrapper.addClass('has-validation-error');
var message = this.$wrapper.data('required-message') || 'Please select at least one item';
this.$wrapper.find('.trait-validation-error').remove();
var $error = $('<div>', {
class: 'trait-validation-error',
html: '<i class="icon-warning"></i> ' + message
});
this.$wrapper.find('.condition-trait-header').after($error);
$('html, body').animate({ scrollTop: this.$wrapper.offset().top - 100 }, 300);
if (!this.$wrapper.find('.condition-trait-body').is(':visible')) {
this.$wrapper.find('.condition-trait-body').slideDown(200);
this.$wrapper.removeClass('collapsed');
}
},
clearValidationError: function() {
this.$wrapper.removeClass('has-validation-error');
this.$wrapper.find('.trait-validation-error').remove();
},
getBlockMode: function(blockType) {
var blockDef = this.config.blocks[blockType];
return (blockDef && blockDef.mode) ? blockDef.mode : 'multi';
},
isBlockSingleMode: function(blockType) {
return this.getBlockMode(blockType) === 'single';
},
getCurrentSingleSelection: function() {
if ((this.config.mode || 'multi') !== 'single') return null;
var $chip = this.$wrapper.find('.entity-chips .entity-chip').first();
if ($chip.length) {
var $block = $chip.closest('.target-block');
return {
name: $chip.find('.chip-name').text() || $chip.data('id'),
entityType: $block.data('block-type') || 'item'
};
}
return null;
}
};
})(jQuery);

View File

@@ -0,0 +1 @@
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;

View File

@@ -0,0 +1 @@
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;

View File

@@ -0,0 +1 @@
// Placeholder - _core.js

View File

@@ -0,0 +1 @@
// Placeholder - _timeline.js

View File

@@ -0,0 +1 @@
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;

1
sources/js/index.php Normal file
View File

@@ -0,0 +1 @@
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;