clone.js

/* Clone pattern */
import $ from "jquery";
import Parser from "../../core/parser";
import registry from "../../core/registry";
import Base from "../../core/base";
import logging from "../../core/logging";

const log = logging.getLogger("pat-clone");
const TEXT_NODE = 3;

export const parser = new Parser("clone");
parser.addArgument("max");
parser.addArgument("template", ":first");
parser.addArgument("trigger-element", ".add-clone");
parser.addArgument("remove-element", ".remove-clone");
parser.addArgument("remove-behaviour", "confirm", ["confirm", "none"]);
parser.addArgument(
    "remove-confirmation",
    "Are you sure you want to remove this element?"
);
parser.addArgument("clone-element", ".clone");
parser.addAlias("remove-behavior", "remove-behaviour");

export default Base.extend({
    name: "clone",
    trigger: ".pat-clone",

    init($el, opts) {
        this.options = parser.parse(this.$el, opts);
        if (this.options.template.lastIndexOf(":", 0) === 0) {
            this.$template = this.$el.find(this.options.template);
        } else {
            this.$template = $(this.options.template);
        }
        $(document).on(
            "click",
            this.options.triggerElement,
            this.clone.bind(this)
        );

        const $clones = this.$el.find(this.options.cloneElement);
        this.num_clones = $clones.length;
        $clones.each(
            function (idx, clone) {
                const $clone = $(clone);
                $clone
                    .find(this.options.remove.element)
                    .on("click", this.confirmRemoval.bind(this, $clone));
            }.bind(this)
        );
    },

    clone() {
        if (this.num_clones >= this.options.max) {
            alert("Sorry, only " + this.options.max + " elements allowed.");
            return;
        }
        this.num_clones += 1;
        const $clone = this.$template.safeClone();
        const ids = ($clone.attr("id") || "").split(" ");
        $clone.removeAttr("id").removeClass("cant-touch-this");
        $.each(
            ids,
            function (idx, id) {
                // Re-add all ids that have the substring #{1} in them, while
                // also replacing that substring with the number of clones.
                if (id.indexOf("#{1}") !== -1) {
                    $clone.attr(
                        "id",
                        $clone.attr("id")
                            ? $clone.attr("id") + " "
                            : "" + id.replace("#{1}", this.num_clones)
                    );
                }
            }.bind(this)
        );

        $clone.appendTo(this.$el);
        $clone
            .children()
            .addBack()
            .contents()
            .addBack()
            .filter(this.incrementValues.bind(this));
        $clone
            .find(this.options.remove.element)
            .on("click", this.confirmRemoval.bind(this, $clone));

        $clone.prop("hidden", false);
        registry.scan($clone);

        $clone.trigger("pat-update", {
            pattern: "clone",
            action: "clone",
            $el: $clone,
        });
        if (this.num_clones >= this.options.max) {
            $(this.options.triggerElement).hide();
        }
    },

    incrementValues(idx, el) {
        const $el = $(el);
        $el.children()
            .addBack()
            .contents()
            .filter(this.incrementValues.bind(this));
        const callback = function (idx, attr) {
            if (attr.name === "type" || !$el.attr(attr.name)) {
                return;
            }
            try {
                $el.attr(
                    attr.name,
                    $el.attr(attr.name).replace("#{1}", this.num_clones)
                );
            } catch (e) {
                log.warn(e);
            }
        };
        if (el.nodeType !== TEXT_NODE) {
            $.each(el.attributes, callback.bind(this));
        } else if (el.data.length) {
            el.data = el.data.replace("#{1}", this.num_clones);
        }
    },

    confirmRemoval($el) {
        if (this.options.remove.behaviour === "confirm") {
            if (window.confirm(this.options.remove.confirmation) === true) {
                this.remove($el);
            }
        } else {
            this.remove($el);
        }
    },

    remove($el) {
        $el.remove();
        this.num_clones -= 1;
        if (this.num_clones < this.options.max) {
            $(this.options.triggerElement).show();
        }
        this.$el.trigger("pat-update", {
            pattern: "clone",
            action: "remove",
            $el: $el,
        });
    },
});