symfony-collection-js - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0-js-only

karma_nojquery.conf.js

@@ -44,2 +44,3 @@ // Karma configuration
     coverageReporter: {
+      type : 'html',
       dir : 'coverage/without_jquery/',
@@ -102,2 +103,2 @@ reporters: [
   })
-}
+}

package.json

 {
   "name": "symfony-collection-js",
-  "version": "4.1.0",
+  "version": "4.2.0-js-only",
   "description": "A plugin working with and without jquery to dynamically create elements of a symfony form collection.",
@@ -12,3 +12,3 @@ "main": "symfonyCollectionJs.js",
   "devDependencies": {
-    "karma": "^6.3.2",
+    "karma": "^6.3.4",
     "karma-chrome-launcher": "^3.1.0",
@@ -18,3 +18,3 @@ "karma-coverage": "^2.0.3",
     "karma-qunit": "^4.1.2",
-    "qunit": "^2.15.0"
+    "qunit": "^2.16.0"
   },
@@ -21,0 +21,0 @@ "scripts": {

README.md

@@ -1,2 +0,2 @@
-# symfonyCollectionJs ![GitHub](https://img.shields.io/github/license/ruano-a/symfonyCollectionJs) ![Maintenance](https://img.shields.io/maintenance/yes/2021) ![GitHub last commit](https://img.shields.io/github/last-commit/ruano-a/symfonyCollectionJs) [![](https://data.jsdelivr.com/v1/package/npm/symfony-collection-js/badge)](https://www.jsdelivr.com/package/npm/symfony-collection-js) [![codecov](https://codecov.io/gh/ruano-a/symfonyCollectionJs/branch/master/graph/badge.svg?token=Z93Y3NTP1Q)](https://codecov.io/gh/ruano-a/symfonyCollectionJs) ![npm bundle size](https://img.shields.io/bundlephobia/min/symfony-collection-js) ![Dependencies](https://badgen.net/bundlephobia/dependency-count/symfony-collection-js) ![Badge count](https://img.shields.io/badge/badge%20count-enough%20%3C3-blue)
+# symfonyCollectionJs ![GitHub](https://img.shields.io/github/license/ruano-a/symfonyCollectionJs) ![Maintenance](https://img.shields.io/maintenance/yes/2021) ![GitHub last commit](https://img.shields.io/github/last-commit/ruano-a/symfonyCollectionJs) ![npm](https://img.shields.io/npm/dm/symfony-collection-js?label=npm%20downloads) [![](https://data.jsdelivr.com/v1/package/npm/symfony-collection-js/badge)](https://www.jsdelivr.com/package/npm/symfony-collection-js) [![codecov](https://codecov.io/gh/ruano-a/symfonyCollectionJs/branch/master-js-only/graph/badge.svg?token=Z93Y3NTP1Q)](https://codecov.io/gh/ruano-a/symfonyCollectionJs) ![npm bundle size](https://img.shields.io/bundlephobia/min/symfony-collection-js) ![Dependencies](https://badgen.net/bundlephobia/dependency-count/symfony-collection-js) ![Badge count](https://img.shields.io/badge/badge%20count-enough%20%3C3-blue)
 A plugin working with and without jquery to dynamically create elements of a symfony form collection.
@@ -18,6 +18,6 @@
 ```html
-<script src="https://cdn.jsdelivr.net/gh/ruano-a/symfonyCollectionJs@4.1.0/symfonyCollectionJs.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/ruano-a/symfonyCollectionJs@4.1.0-js-only/symfonyCollectionJs.min.js"></script>
 ```
 
-# Basic usage
+# Basic usage (Check [here](#can-i-use-this-package-without-symfony-) to use without symfony)
 
@@ -49,6 +49,6 @@ Your collection container should have the prototype mentioned in the symfony documentation, and an id or a class. So in your form type:
         call_post_add_on_init:  false,
-        post_add:               function(new_elem, context) { return true; },
-        post_delete:            function(delete_elem, context) { return true; },
-        post_up:                function(elem, switched_elem) { return true; },
-        post_down:              function(elem, switched_elem) { return true; },
+        post_add:               function(new_elem, context, index) { return true; },
+        post_delete:            function(delete_elem, context, index) { return true; },
+        post_up:                function(elem, switched_elem, index) { return true; },
+        post_down:              function(elem, switched_elem, index) { return true; },
         other_btn_add:          null,
@@ -117,8 +117,13 @@ btn_add_selector:       '.collection-add',
 
-Yes ! in the example folder, with and without jQuery, without and without loader.
+Yes ! in the example folder, with and without jQuery, with and without loader.
 
 # Requirement
 
-Symfony (2 or more)
+Symfony 2 or more (For a normal usage, but you can use this without)
 
+# Can I use this package without symfony ?
+
+Absolutely, you only need to have the data-prototype attribute properly set.
+We provide you with [this example](./example/simple_collection_example_without_symfony.php) in php, but you can do this in every language, and most likely with most frameworks.
+
 # Notes
@@ -125,0 +130,0 @@ If you're using this without jQuery, but with a loader (AMD, CommonJS, or anything), you MUST use a version on a branch / tag with "js-only" in the name! Otherwise it WILL NOT BUILD! (I didn't want to make several versions but tests ended showing that it was the best choice... Unless you have a better idea?)

symfonyCollectionJs.js

@@ -46,12 +46,12 @@ // Polyfill from https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
             call_post_add_on_init: false,
-            post_add: function(new_elem, context) {
+            post_add: function(new_elem, context, index) {
                 return true;
             },
-            post_delete: function(delete_elem, context) {
+            post_delete: function(delete_elem, context, index) {
                 return true;
             },
-            post_up: function(elem, switched_elem) {
+            post_up: function(elem, switched_elem, index) {
                 return true;
             },
-            post_down: function(elem, switched_elem) {
+            post_down: function(elem, switched_elem, index) {
                 return true;
@@ -126,3 +126,3 @@ },
                 delete_elem(elem);
-                settings.post_delete(elem, formCollection.POST_DELETE_CONTEXT.DELETE_METHOD);
+                settings.post_delete(elem, formCollection.POST_DELETE_CONTEXT.DELETE_METHOD, param);
             });
@@ -196,2 +196,3 @@
 
+            // note : don't calculate the index outside the listeners
             var init_elem_listeners = function(elem) {
@@ -202,3 +203,3 @@ var btnAdds = elem.querySelectorAll(settings.btn_add_selector);
                         var new_elem = add_elem_down(elem);
-                        settings.post_add(new_elem, formCollection.POST_ADD_CONTEXT.BTN_ADD);
+                        settings.post_add(new_elem, formCollection.POST_ADD_CONTEXT.BTN_ADD, sibling_index(new_elem));
                     });
@@ -209,4 +210,5 @@ }
                     btnDeletes[i].addEventListener('click', function() {
+                        var index = sibling_index(elem);
                         delete_elem(elem);
-                        settings.post_delete(elem, formCollection.POST_DELETE_CONTEXT.BTN_DELETE);
+                        settings.post_delete(elem, formCollection.POST_DELETE_CONTEXT.BTN_DELETE, index);
                     });
@@ -217,5 +219,6 @@ }
                     btnUps[i].addEventListener('click', function() {
+                        var index = sibling_index(elem);
                         var switched_elem = move_elem_up(elem);
                         if (switched_elem) {
-                            settings.post_up(elem, switched_elem);
+                            settings.post_up(elem, switched_elem, index);
                         }
@@ -227,5 +230,6 @@ });
                     btnDowns[i].addEventListener('click', function() {
+                        var index = sibling_index(elem);
                         var switched_elem = move_elem_down(elem);
                         if (switched_elem) {
-                            settings.post_down(elem, switched_elem);
+                            settings.post_down(elem, switched_elem, index);
                         }
@@ -323,3 +327,3 @@ });
                 n++;
-                settings.post_add(new_elem, context);
+                settings.post_add(new_elem, context, n - 1);
             };
@@ -363,3 +367,3 @@
                     if (settings.call_post_add_on_init)
-                        settings.post_add(child, formCollection.POST_ADD_CONTEXT.INIT);
+                        settings.post_add(child, formCollection.POST_ADD_CONTEXT.INIT, i);
                 }
@@ -402,33 +406,16 @@ };
 };
-formCollection.jQuery = null;
-// UMD : Uses CommonJS, AMD or browser globals to create a jQuery plugin (if jQuery is there)
+// UMD : Uses CommonJS, AMD or browser globals
 (function(root, factory) {
     if (typeof define === 'function' && define.amd) {
         // AMD. Register as an anonymous module.
-        define(['jquery'], factory);
+        define([], factory);
     } else if (typeof module === 'object' && module.exports) {
         // Node/CommonJS
-        module.exports = factory(require('jquery'));
+        module.exports = factory();
     } else {
         // Browser globals
-        if (typeof jQuery !== 'undefined')
-            root.returnExports = factory(jQuery);
-        else
-            root.returnExports = factory();
+        root.returnExports = factory();
     }
-}(this, function($) {
-    if (typeof jQuery !== 'undefined' && jQuery) {
-        formCollection.jQuery = $; // jQuery is not necessarily global so it's better to know easily if it's available
-        $.fn.formCollection = function (options, param) {
-            var nodeArray = [];
-            for (var i = 0; i < this.length; i++) {
-                nodeArray.push(this[i]);
-            }
-            var ret = formCollection(nodeArray, options, param);
-            if (!Array.isArray(ret))
-                return ret;
-            return $(this);
-        };
-    }
+}(this, function() {
     return formCollection;
 }));

test/README.md

@@ -26,2 +26,5 @@ # symfonyCollectionJs tests
 
-You can find the test coverage informations in the 'coverage' folder.
+You can find the test coverage informations in the 'coverage' folder.
+
+# Notes for Internet explorer
+Some of the tests fail on Internet explorer (tested on IE11, works fine on Edge). It's because the tests are particularly stricts, and IE seems to render things slightly differently (different order of attributes, and different encoding on quotes); but it still works fine.

test/tests.js

@@ -41,3 +41,2 @@ var extend = function (a, b) {
 				prototype_name:     	'__subname__',
-				call_post_add_on_init: 	true,
 				post_add:         		function(new_elem, context) {
@@ -486,2 +485,26 @@ µ(new_elem).find('.sub-sub-collection-root').formCollection({
     });
+
+    QUnit.test('the post_add index should have the right value', function(assert) {
+      µ('#collection-root').append(guessCollectionElementResult(0)); // to preinit the content
+      µ('#collection-root').append(guessCollectionElementResult(1));
+      var test = [];
+      initSimpleCollection({
+        call_post_add_on_init:  true,
+        post_add:         function(µnew_elem, context, index) {
+          test.push(index);
+        }
+      });
+      assert.equal(test.length, 2, 'for a collection with 2 preinit elements, two indexes were given');
+      assert.equal(test[0], 0, 'the given index for the first preinit element is correct');
+      assert.equal(test[1], 1, 'the given index for the second preinit element is correct');
+      test = []; // reset
+      µ('#collection-add-btn').click(); //other_btn_add
+      assert.equal(test[0], 2, 'correct index on other_btn_add');
+      test = []; // reset
+      µ('.collection-elem-add').eq(0).click(); //btn_add_selector
+      assert.equal(test[0], 1, 'correct index on btn_add_selector');
+      test = []; // reset
+      µ('#collection-root').formCollection('add');
+      assert.equal(test[0], 4, 'correct index with add method');
+    });
  });
@@ -525,4 +548,138 @@
     });
+
+    QUnit.test('the post_delete index has the right value', function(assert) {
+      var test = false;
+      initSimpleCollection({
+        post_delete: function(µdelete_elem, context, index) {
+          test = index;
+        }
+      });
+      assert.false(test); // to check that the callback isn't triggered without reason
+      µ('#collection-add-btn').click();
+      µ('.collection-elem-add').eq(0).click();
+      // now we have 2 elements
+      µ('.collection-elem-remove').eq(1).click(); // btn_delete_selector
+      assert.equal(test, 1, 'correct index on btn_delete_selector');
+      test = false; // reset
+      µ('#collection-root').formCollection('delete', 0); // delete method
+      assert.equal(test, 0, 'correct index on delete method');
+    });
 });
 
+QUnit.module('post_up', function() {
+    QUnit.test('post_up is triggered after clicking on btn_up_selector', function(assert) {
+      var test = false;
+      initSimpleCollection({
+        post_up: function(elem, switched_elem, index) {
+          test = true;
+        }
+      });
+      µ('#collection-add-btn').click();
+      µ('.collection-elem-add').eq(0).click();
+      // now we have 2 elements
+      assert.false(test); // to check that the callback isn't triggered without reason
+      µ('.collection-elem-up').eq(1).click(); // btn_up_selector
+      assert.true(test, 'post_up called after click on btn_up_selector');
+    });
+
+    QUnit.test('the post_up elem and switched_elem are correct', function(assert) {
+      var testElem = false;
+      var testSwitchedElem = false;
+      initSimpleCollection({
+        post_up: function(elem, switched_elem, index) {
+          testElem = elem;
+          testSwitchedElem = switched_elem;
+          assert.false(elem.isSameNode(switched_elem));
+        }
+      });
+      µ('#collection-add-btn').click();
+      µ('.collection-elem-add').eq(0).click();
+      µ('.collection-elem-add').eq(0).click();
+      µ('.collection-elem-add').eq(0).click();
+      // now we have 4 elements
+      assert.false(testElem); // to check that the callback isn't triggered without reason
+      assert.false(testSwitchedElem); // to check that the callback isn't triggered without reason again
+      var node2 = µ('#collection-root').children()[1];
+      var node3 = µ('#collection-root').children()[2];
+      µ('.collection-elem-up').eq(2).click(); // btn_up_selector
+      assert.true(node3.isSameNode(testElem), 'correct elem on btn_up_selector');
+      assert.true(node2.isSameNode(testSwitchedElem), 'correct elem on btn_up_selector');
+    });
+
+    QUnit.test('the post_up index has the right value', function(assert) {
+      var test = false;
+      initSimpleCollection({
+        post_up: function(elem, switched_elem, index) {
+          test = index;
+        }
+      });
+      assert.false(test); // to check that the callback isn't triggered without reason
+      µ('#collection-add-btn').click();
+      µ('.collection-elem-add').eq(0).click();
+      µ('.collection-elem-add').eq(0).click();
+      µ('.collection-elem-add').eq(0).click();
+      // now we have 4 elements
+      µ('.collection-elem-up').eq(2).click(); // btn_up_selector
+      assert.equal(test, 2, 'correct index with btn_up_selector');
+    });
+});
+
+QUnit.module('post_down', function() {
+    QUnit.test('post_down is triggered after clicking on btn_down_selector', function(assert) {
+      var test = false;
+      initSimpleCollection({
+        post_down: function(elem, switched_elem, index) {
+          test = true;
+        }
+      });
+      µ('#collection-add-btn').click();
+      µ('.collection-elem-add').eq(0).click();
+      // now we have 2 elements
+      assert.false(test); // to check that the callback isn't triggered without reason
+      µ('.collection-elem-down').eq(0).click(); // btn_down_selector
+      assert.true(test, 'post_down called after click on btn_down_selector');
+    });
+
+    QUnit.test('the post_down elem and switched_elem are correct', function(assert) {
+      var testElem = false;
+      var testSwitchedElem = false;
+      initSimpleCollection({
+        post_down: function(elem, switched_elem, index) {
+          testElem = elem;
+          testSwitchedElem = switched_elem;
+          assert.false(elem.isSameNode(switched_elem));
+        }
+      });
+      µ('#collection-add-btn').click();
+      µ('.collection-elem-add').eq(0).click();
+      µ('.collection-elem-add').eq(0).click();
+      µ('.collection-elem-add').eq(0).click();
+      // now we have 4 elements
+      assert.false(testElem); // to check that the callback isn't triggered without reason
+      assert.false(testSwitchedElem); // to check that the callback isn't triggered without reason again
+      var node2 = µ('#collection-root').children()[1];
+      var node3 = µ('#collection-root').children()[2];
+      µ('.collection-elem-down').eq(1).click(); // btn_down_selector
+      assert.true(node2.isSameNode(testElem), 'correct elem on btn_down_selector');
+      assert.true(node3.isSameNode(testSwitchedElem), 'correct elem on btn_down_selector');
+    });
+
+    QUnit.test('the post_down index has the right value', function(assert) {
+      var test = false;
+      initSimpleCollection({
+        post_down: function(elem, switched_elem, index) {
+          test = index;
+        }
+      });
+      assert.false(test); // to check that the callback isn't triggered without reason
+      µ('#collection-add-btn').click();
+      µ('.collection-elem-add').eq(0).click();
+      µ('.collection-elem-add').eq(0).click();
+      µ('.collection-elem-add').eq(0).click();
+      // now we have 4 elements
+      µ('.collection-elem-down').eq(2).click(); // btn_down_selector
+      assert.equal(test, 2, 'correct index with btn_down_selector');
+    });
+});
+
 QUnit.module('max_elems', function() {
@@ -529,0 +686,0 @@ QUnit.test('max_elems should limit the number of child elements', function(assert) {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

133

increased by3.91%

Worsened metrics

Total package byte prevSize

349541

decreased by-9.07%

Number of package files

28

decreased by-9.68%

Lines of code

5891

decreased by-4.34%

Number of low quality alerts

1

increased byInfinity%

No dependency changes