way2web-clone - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

js/clone.core.js

@@ -5,16 +5,84 @@ /**
  * @param {object} $scope
+ * @param {object} customElements
+ * @param {object} customClasses
+ * @param {object} customEvents
  *
  * @return {object}
  */
-window.Clone = function($scope) {
+window.Clone = function($scope, customElements, customClasses, customEvents) {
     'use strict';
 
-    var version = '0.0.6';
+    var version = '0.0.7';
 
     var elements = {
-        toggle:   '.js-clone-toggle',
-        original: '.js-clone-element',
-        target:   '.js-clone-target'
+        toggle:      '.js-add-clone-button',
+        remove:      '.js-clone-delete',
+        target:      '.js-clone-target',
+        template:    '.js-clone-template',
+        counter:     '.js-clone-count',
+        removeClone: '.js-remove-target'
     };
 
+    var classes = {
+        hidden: 'is-hidden'
+    };
+
+    var events = {};
+
+    /**
+     * Get all parameters, and merge it with the default values.
+     * Check the click events.
+     *
+     * @return {object}
+     */
+    function init() {
+        elements = $.extend({}, elements, customElements || {});
+        classes = $.extend({}, classes, customClasses || {});
+        events = $.extend({}, events, customEvents || {});
+
+        $scope.find(elements.toggle).on('click', cloneElement);
+        $scope.on('click', elements.remove, removeElement);
+
+        return this;
+    }
+
+    /**
+     * Overrule the default elements.
+     *
+     * @param {object} customElements
+     *
+     * @return {object}
+     */
+    function setElements(customElements) {
+        elements = $.extend({}, elements, customElements || {});
+
+        return this;
+    }
+
+    /**
+     * Overrule the default classes.
+     *
+     * @param {object} customClasses
+     *
+     * @return {object}
+     */
+    function setClasses(customClasses) {
+        elements = $.extend({}, elements, customClasses || {});
+
+        return this;
+    }
+
+    /**
+     * Overrule the default events.
+     *
+     * @param {object} customEvents
+     *
+     * @return {object}
+     */
+    function setEvents(customEvents) {
+        elements = $.extend({}, elements, customEvents || {});
+
+        return this;
+    }
+
      /**
@@ -24,19 +92,91 @@ * Clone the element.
     function cloneElement() {
-        var $clone = $scope.find(elements.original).first().clone();
         var $target = $scope.find(elements.target);
+        var $counter = $scope.children(elements.counter);
+        var $count = $counter.val();
 
-        $target.append(
-             $clone
-                 .removeAttr('hidden')
-                 .removeClass(elements.original)
-         );
+        var $template = $scope.children(elements.template);
+        var $clone = $template
+            .clone(true, true)
+            .removeClass(classes.hidden)
+            .removeClass(
+                removeSelectorPrefix(elements.template)
+            );
+
+        $clone.html(
+            $clone
+                .html()
+                .replace(/\{key\}/g, $count)
+                .replace(/\{key\+1\}/g, ++$count)
+        );
+
+        $counter.val($count);
+
+        if($target) {
+            $target.append($clone);
+        } else {
+            $clone.insertBefore($template);
+        }
+
+        triggerEvent('clone', [$clone, $count]);
     }
 
-    $scope.find(elements.toggle).on('click', cloneElement);
+    /**
+     * When triggered, remove the target element.
+     */
+    function removeElement() {
+        $(this).parent(elements.removeClone).remove();
 
+        triggerEvent('remove', [$(this)]);
+    }
+
+    /**
+     * Trigger an event.
+     *
+     * @param {string} action
+     * @param {array}  eventArguments
+     */
+    function triggerEvent(action, eventArguments) {
+        var event = events[action];
+
+        if(!event) {
+            return;
+        }
+
+        if(typeof event == 'object') {
+            $.each(event, function(index, fn) {
+                fn.apply(this, eventArguments);
+            });
+
+            return;
+        }
+
+        event.apply(this, eventArguments);
+    }
+
+    /**
+    * Remove the first character of a string.
+    *
+    * @param {string} selector
+    *
+    * @return {string}
+    */
+    function removeSelectorPrefix(selector) {
+        var isClass = selector.charAt(0) == '.';
+        var isId = selector.charAt(0) == '#';
+
+        if (isClass || isId) {
+            return selector.substring(1);
+        }
+    }
+
     return {
-        scope:   $scope,
-        click:   cloneElement,
-        version: version
+        init:        init,
+        scope:       $scope,
+        clone:       cloneElement,
+        remove:      removeElement,
+        setElements: setElements,
+        setClasses:  setClasses,
+        setEvents:   setEvents,
+        version:     version
     };
 };

package.json

 {
     "name": "way2web-clone",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "Clone an element.",
@@ -52,4 +52,4 @@ "files": [
    "dependencies": {
-        "jquery": "3.2.1"
+        "jquery": ">=3.2.1"
     }
 }

README.md

@@ -6,4 +6,77 @@ # Clone
 
+With this package you can clone elements on page.
+
+Add this to your javascript file:
+```
+new Clone(element).init();
+```
+
+Example html:
+
+```
+<div class="js-clone">
+    <input class="js-clone-count" name="counter" type="hidden" value="1">
+    <form>
+        <div class="js-remove-target">
+            <button type="button" name="remove-target" class="js-clone-delete">
+                Delete
+            </button>
+            <input name="test[0][id]" type="hidden" value="1">
+        </div>
+
+        <div class="js-clone-target"></div>
+    </form>
+
+    <div class="is-hidden | js-remove-target js-clone-template">
+        <button type="button" name="remove-target" class="js-clone-delete">
+            Delete
+        </button>
+        <input name="test[{key}][id]" type="hidden" value="{key}">
+    </div>
+
+    <button class="btn btn--filled | js-add-clone-button">Add delivery address</button>
+</div>
+
+```
+
+Default elements:
+```
+{
+    toggle:      '.js-add-clone-button',
+    remove:      '.js-clone-delete',
+    target:      '.js-clone-target',
+    template:    '.js-clone-template',
+    counter:     '.js-clone-count',
+    removeClone: '.js-remove-target'
+}
+```
+
+You can overrule this with: `.setElements({ ... })`
+
+Default classes:
+```
+{
+    hidden: 'is-hidden'
+}
+```
+
+You can overrule this with: `.setClasses({ ... })`
+
+When a element is cloned or removed an event is triggered.
+You can set functions to call when the element is cloned or removed.
+The events are `clone` and `remove`.
+
+You can overrule this with: `.setEvents({ ... })`
+
+e.g.
+```
+new Clone(element)
+    .setEvents({
+        clone: testFunction
+    })
+    .init();
+```
+
 [downloads-image]: https://img.shields.io/npm/dm/way2web-clone.svg
 [npm-url]: https://www.npmjs.com/package/way2web-clone
 [npm-image]: https://img.shields.io/npm/v/way2web-clone.svg

No alert changes

Improved metrics

Total package byte prevSize

8653

increased by135.52%

Lines of code

151

increased by344.12%

Number of lines in readme file

82

increased by811.11%

Dependency changes

• + Addedjquery@3.7.1(transitive)

• - Removedjquery@3.2.1(transitive)

• Updatedjquery@>=3.2.1