From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 25 Apr 2025 08:26:55 +0000 (+0200)
Subject: wip #7498 @0.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=0c47474522aeff9401b7a00f7f8603994b19bc25;p=cubist_cms-back.git

wip #7498 @0.5
---

diff --git a/src/public/bunchmultiple/bunchmultiplemodule.js b/src/public/bunchmultiple/bunchmultiplemodule.js
new file mode 100644
index 0000000..31f7869
--- /dev/null
+++ b/src/public/bunchmultiple/bunchmultiplemodule.js
@@ -0,0 +1,397 @@
+window.$ = window.jQuery = require('jquery');
+import Sortable from 'sortablejs';
+
+function JQbunchmultiple(element) {
+    this.element = element;
+    this.init();
+}
+
+JQbunchmultiple.prototype = {
+    init: function () {
+        this.inited = false;
+        var $this = this;
+        this.id = $(this.element).attr('id');
+        this.bmidselector = '[data-bmid="' + this.id + '"]';
+
+        this.cleanTemplate();
+
+        $(document).on('click', '.nav-link', function () {
+            $this.resize();
+        });
+
+        var initValues = this.element.data('values');
+
+        if (initValues.length === 0) {
+            if (this.element.hasClass('showEmpty')) {
+                this.initItem();
+            }
+        } else {
+            $.each(initValues, function (k, v) {
+                $this.initItem(v, true);
+            });
+        }
+
+        $(window).on('resize', function () {
+            $this.resize();
+        });
+        $(document).on('bunchmultiple.toresize', function () {
+            $this.resize();
+        });
+
+
+        this.element.on('click', '.additem' + this.bmidselector, function () {
+            $this.initItem();
+            return false;
+        });
+
+        this.element.on('click', '.remove' + this.bmidselector, function () {
+            $this.removeItem($(this).closest('.item'));
+            return false;
+        });
+
+        this.element.on('click', '.duplicate' + this.bmidselector, function () {
+            $this.duplicateItem($(this).closest('.item'));
+            return false;
+        });
+
+        this.element.on('click', '.legend' + this.bmidselector, function () {
+            if ($(this).closest('.bunchmultiple_oneline').length > 0) {
+                return true;
+            }
+            var item = $(this).closest('.item');
+            var subform = item.find('.subform' + this.bmidselector);
+            if (!item.hasClass('collapsed')) {
+                subform.css('height', subform.outerHeight());
+                setTimeout(function () {
+                    item.addClass('collapsed');
+                }, 10);
+            } else {
+                item.removeClass('collapsed');
+            }
+            return false;
+        });
+
+        this.element.on('change', 'input' + this.bmidselector + ',select' + this.bmidselector + ',textarea' + this.bmidselector + ',.dropzone' + this.bmidselector, function () {
+            $this.updateAndChange();
+            return true;
+        });
+
+        $(this.element).on('change', '.bunchmultiple', function () {
+            $this.update();
+            return true;
+        });
+
+        this.element.on('keyup', 'input' + this.bmidselector + ',select' + this.bmidselector + ',textarea' + this.bmidselector, function () {
+            $this.updateLegends();
+            return true;
+        });
+
+        this.initSort();
+
+        if ($(this.element).parent().closest('.bunchmultiple').length === 0) {
+            $(this.element).find('.bunchmultiple__wrapper:eq(0)').addClass('bunchmultiple_root');
+            $(this.element).addClass('bunchmultiple_root');
+        }
+
+        setTimeout(function () {
+            $this.inited = true;
+            $this.updateAndChange();
+
+        }, 1000);
+        this.resize();
+
+        setInterval(function () {
+            $this.serialize();
+        }, 2000);
+    },
+
+    cleanTemplate: function () {
+        this.element.find('.sample' + this.bmidselector).find('[data-init-function]').removeAttr('data-init-function');
+    },
+
+    update: function () {
+        if (!this.inited) {
+            return;
+        }
+        this.serialize();
+        this.updateLegends();
+        this.resize();
+    },
+
+    resize: function () {
+        this.element.find('.legendsize').each(function () {
+            var parent = $(this).closest('.legend');
+            var aw = $(parent).innerWidth() - 160;
+            $(this).css({width: aw, maxWidth: aw, minWidth: aw});
+        });
+    },
+
+    serialize: function () {
+        var val = [];
+        var $this = this;
+        var id = this.element.attr('id');
+        var selector = '.item' + this.bmidselector + ':not(.sample) ' + this.bmidselector + '>.bunchfields';
+        var list = this.element.find(selector);
+        if (list.length === 0) {
+            selector = '.item' + this.bmidselector + ':not(.sample) ' + this.bmidselector + '>.legendsize>.bunchfields';
+            list = this.element.find(selector);
+        }
+
+        $.each(list, function () {
+            $(this).find('.bunchmultiple').each(function () {
+                try {
+                    $(this).data('bunchmultiple').serialize();
+                } catch (e) {
+
+                }
+            });
+
+            var data = $(this).find(':input' + $this.bmidselector).serializeArray();
+            var filteredData = {};
+            $.each(data, function (k, v) {
+                var name = v.name.replace(id + '___', '');
+                filteredData[name] = v.value;
+            });
+
+            $(this).find('.hiddenfield').each(function () {
+                var e = $(this).attr('name').split('___');
+                var name = e.pop();
+                filteredData[name] = JSON.parse($(this).attr('value'));
+            });
+
+            val.push(filteredData);
+        });
+        if (this.element.is('.bunchmultiple_keyvalue')) {
+            var kvval = {};
+
+            $.each(val, function (k, v) {
+                kvval[v.key] = v.value;
+            });
+            val = kvval;
+        }
+        var hidden = this.element.find('.hiddenfield' + this.bmidselector);
+
+        var jsonval = JSON.stringify(val);
+        $(hidden).val(jsonval);
+    },
+
+    updateLegends: function () {
+        const sizeLimit = 60;
+        $('[data-legend]' + this.bmidselector).each(function () {
+            var item = $(this).closest('.item');
+            var form = item.find('.subform');
+            var txt = $(this).data('legend').replace(/\%([a-zA-Z0-9_]+)/gm, function (match, varname) {
+                var input = form.find('[name="' + varname + '"]');
+                if (input.length === 0) {
+                    input = form.find('[name="' + form.data('bmid') + '___' + varname + '"]');
+                }
+                // All fields
+                let res = $(input).val();
+                // Select2 fields
+                if ($(input).closest('.form-group').find('.select2-selection__rendered').length > 0) {
+                    res = $(input).closest('.form-group').find('.select2-selection__rendered').text();
+                }
+                if (res.length > sizeLimit) {
+                    res = res.substring(0, sizeLimit) + '...';
+                }
+                return res;
+            });
+            $(this).html(txt);
+        });
+    },
+
+    onSort: function (e) {
+        this.update();
+    },
+
+    initSort: function () {
+        var $this = this;
+
+        new Sortable(this.element.find('.bunchmultiple__items' + this.bmidselector).get(0), {
+            handle: '.sort-handle', ghostClass: 'ghost', onSort: function (evt) {
+                $this.onSort(evt);
+            },
+        });
+    },
+
+    removeItem: function (item) {
+        $(item).remove();
+        if (this.element.hasClass('showEmpty') && this.element.find('.item' + this.bmidselector + ':not(.sample)').length === 0) {
+            this.initItem();
+        }
+
+        var $this = this;
+        setTimeout(function () {
+            $this.updateAndChange();
+        }, 250);
+        this.updateAndChange();
+    },
+
+    duplicateItem: function (item) {
+        let copy = $(item).clone();
+        console.log(copy);
+        $(copy).insertAfter(item);
+        this.updateAndChange();
+    },
+
+    empty: function (update) {
+        $(this.element).find('.item:not(.sample)').remove();
+        if (update !== false) {
+            this.updateAndChange();
+        }
+    },
+
+    replaceData: function (data) {
+        console.log(data);
+        this.empty(false);
+        var $this = this;
+        $.each(data, function (k, v) {
+            $this.initItem(v);
+        });
+        this.updateAndChange();
+    },
+
+    updateAndChange: function () {
+        if (!this.inited) {
+            return;
+        }
+        this.update();
+        $(this.element).trigger('change');
+    },
+
+    initItem: function (values) {
+
+        var $this = this;
+        var collapsed = true;
+        var isNew = false;
+        if (values === undefined) {
+            values = [];
+            collapsed = false;
+            isNew = true;
+        }
+        var item = this.element.find('.sample' + this.bmidselector).clone(false);
+        if (isNew) {
+            $(item).find('[data-reset-value]').val('');
+        }
+        $(item).removeClass('sample');
+        if (collapsed) {
+            $(item).addClass('collapsed');
+        }
+        // Handle nested multiple bunch
+        var nested = [];
+        $(item).find('.subform>.bunchfields>.bunchmultiple').each(function () {
+            var newrand = $this.id + '_' + Math.round(Math.random() * 10000000);
+            var sampleId = $(this).attr('id');
+            var html = replaceAll(sampleId, newrand, $(this).html());
+            $(this).html(html);
+            $(this).attr('id', newrand);
+            nested.push(newrand);
+        });
+
+        $(this.element).find(".bunchmultiple__items" + this.bmidselector).append($(item));
+        this.setValues(item, values);
+
+        $.each(nested, function (k, v) {
+            if (isNew) {
+                $('#' + v).find('.item:not(.sample)').remove();
+            }
+            $("#" + v).bunchmultiple();
+        });
+
+
+        $(item).find('.form-group').find('input, select, .dropzone, textarea').each(function () {
+            if ($(this).closest('.bunchmultiple').attr('id') !== $this.id) {
+                return;
+            }
+            $(this).attr('data-bmid', $this.id);
+        });
+
+        setTimeout(function () {
+            $this.setValues(item, values, false);
+            $(document).trigger('cubist.bunchmultiple.added');
+            $($this).trigger('change');
+        }, 10);
+    },
+
+    setValues(item, values) {
+        let $this = this;
+        var id = this.element.attr('id');
+        try {
+            $.each(values, function (k, v) {
+                var input = $(item).find('[name="' + id + '___' + k + '"]');
+                if (input.length === 0) {
+                    var bunch = $(item).find('[bp-field-name="' + id + '___' + k + '"][bp-field-type="bunch"]');
+                    var bunchName = $(bunch).attr('data-name');
+                    $.each(v, function (kk, vv) {
+                        let bunchInput = $(bunch).find('[name="' + bunchName + '___' + kk + '"]');
+                        if (bunchInput.length > 0) {
+                            $this.setInputVal(bunchInput, kk, vv);
+                        }
+                    });
+                } else {
+                    $this.setInputVal(input, k, v);
+                }
+            });
+        } catch (e) {
+            console.log(e);
+        }
+        this.updateAndChange();
+    },
+
+    setInputVal: function (input, k, v) {
+        if (input.is('.hiddenfield')) {
+            $(input).parent().attr('data-values', JSON.stringify(v));
+        } else if ($(input).nextAll('[type="checkbox"]').length > 0) {
+            var cb = $(input).nextAll('[type="checkbox"]');
+            cb.attr('name', cb.prev('[type="hidden"]').attr('name')).attr('value', '1');
+            cb.prop('checked', v === true || v === '1' || v === 1);
+        } else if ($(input).is('.select2_from_array')) {
+            try {
+                if ($(input).is("[data-ajax]") && $(input).find('option[value="' + k + '"]').length === 0) {
+                    var options = $(input).data('options');
+                    var newOption = new Option(options[v], v, false, false);
+                    $(input).append(newOption).trigger('change');
+                }
+            } catch (e) {
+
+            }
+            input.val(v);
+        } else if (input) {
+            input.val(v);
+            if ($(input).next('.hidden-visible-value').length > 0) {
+                $(input).next('.hidden-visible-value').text(v);
+            }
+        }
+    },
+};
+
+jQuery.fn.bunchmultiple = function () {
+    return this.each(function () {
+        var $this = $(this);
+        if ($(this).data('bunchmultiple') === undefined) {
+            $(this).data('bunchmultiple', new JQbunchmultiple($this));
+        }
+    })
+};
+
+jQuery(document).ready(function ($) {
+    $(".bunchmultiple").bunchmultiple();
+
+});
+
+jQuery.cachedScript = function (url, options) {
+
+    // Allow user to set any option except for dataType, cache, and url
+    options = $.extend(options || {}, {
+        dataType: "script", cache: true, url: url
+    });
+
+    // Use $.ajax() since it is more flexible than $.getScript
+    // Return the jqXHR object so we can chain callbacks
+    return jQuery.ajax(options);
+};
+
+function replaceAll(from, to, str) {
+    var e = str.split(from);
+    return e.join(to);
+}