v1.0.0

.gitignore

@@ -0,0 +1,3 @@
+.idea
+bower_components
+node_modules

CHANGELOG.md

@@ -0,0 +1,24 @@
+# CHANGELOG
+
+## v1.0.0
+### Breaking changes
+- Plugin file name changed from `addel.jquery.js` to `addel.jquery.js`
+- CSS classes moved to their own`classes`  object inside the `options` object
+- `del` property changed to `delete`
+- When adding, `clone()` is not called with `true` anymore and form elements receive the value of `null`
+
+### Added
+- Bower package, install using `bower install addel --save`
+
+- Custom events: `addel:add`, `addel:added`, `addel:delete` and `addel:deleted`
+- Enable defaults override via `$.fn.addel.defaults`
+- `hide` option (addel no longer hides by default)
+- `animation` options object
+- HTML example
+- addel now follows [Semantic Versioning](http://semver.org/)
+
+### Removed
+- Hardcoded `alert()` on delete
+
+### Dependencies
+- jQuery updated to v2.2.3

README.md

@@ -6,35 +6,72 @@ addel is a very simple & lightweight jQuery plugin for powering UIs that enable
 
 ..Because it's all in the details, people!
 
+![addel Example](demo.gif)
+
+## Features
+- Lightweight
+- Allows for maximum flexibility with your HTML structure
+- Triggers custom events you can hook on
+- Provides keyboard convenience through smart default focus behaviour
+- Enables animation customization
+
+## Installation
+There are multiple options:
+
+- Download `addel.jquery.js` or `addel.jquery.min.js`
+- Use [`bower`](http://bower.io/): `bower install addel --save`
+- Use [`npm`](https://www.npmjs.com/): `npm install addel --save`
+
+And include it:
+`<script src="/path/to/file/addel.jquery.js"></script>`
 
 ## Initialization
 
 ```javascript
-$('.addel-container').addel();
+$('.addel-container').addel({
+  // optional options object
+});
 ```
 
+## Options
 
-## Options & defaults
+### Defaults
 
 ```javascript
 $('.addel-container').addel({
-  target: 'addel-target',
-  add: 'addel-add',
-  del: 'addel-del',
-  delAlert: 'למחוק?'
+    hide: false,
+    classes: {
+        target: 'addel-target',
+        add: 'addel-add',
+        delete: 'addel-delete'
+    },
+    animation: {
+        duration: 0,
+        easing: 'swing'
+    }
 });
 ```
 
-* `target:` the class name of the element to be dynamically "addeled"
-* `add:` the class name of the element that adds a `target` on click
-* `del:` the class name of the element that deletes a `target` on click
-* `delAlert:` the alert text that pops up when clicking `del`
+* `hide`: Whether to initially hide the `target` (and disable its form elements)
+* `classes.target`: The class name of the element to be dynamically `addeled`™
+* `classes.add`: The class name of the element that adds a `target` on click
+* `classes.delete`: The class name of the element that deletes a `target` on click
+* `animation.duration`: The animation's duration when `addeling`™
+* `animation.easing`: The animation's easing when `addeling`™
 
+For `animation` customization, see jQuery's [`.fadeIn()`](http://api.jquery.com/fadein/) and [`.fadeOut`](http://api.jquery.com/fadeout/)
 
-## Default behaviour
+### Global override
+Override the entire object:
+```javascript
+$.fn.addel.defaults = {
+    // options
+}
+```
 
-Upon initialization addel takes care of hiding the target & disabling any form elements it might contain.
+Or a specific key:
 
+`$.fn.addel.defaults.option = value`
 
 ## HTML structure & restrictions
 
@@ -48,21 +85,43 @@ Upon initialization addel takes care of hiding the target & disabling any form e
 ```
 
 * `.addel-container` **must** be the element addel is initialized upon
-* `.addel-container` **must** contain everything else: `.addel-target`, `.addel-del` & `.addel-add`
-* `.addel-target` **should** also contain your own elements, this is after all what we are here for
-* `.addel-del` **must** be `.addel-container`'s & `.addel-target`'s descendant 
-* `.addel-add` **must** be `.addel-container`'s descendant & can't be `.addel-target`'s descedant
+* `.addel-container` **must** contain everything else: `.addel-target`, `.addel-delete` & `.addel-add`
+* `.addel-target` **should** also contain your own element/s, this is after all what we are here for
+* `.addel-delete` **must** be `.addel-container`'s & `.addel-target`'s descendant
+* `.addel-add` **must** be `.addel-container`'s descendant & can't be `.addel-target`'s descendant
+
+## Custom events
+- `addel:add`: Triggered when `classes.add` is clicked
+- `addel:added`: Triggered when `classes.target` is added to the DOM
+- `addel:delete`: Triggered when `classes:delete` is clicked
+- `addel:deleted`: Triggered when `classes.target` is deleted from the DOM
 
+All custom events are triggered on the element initialized as the container.
+
+### Example
+Display an `alert()` confirmation message before deletion:
+```javascript
+$('.addel').addel({
+  // optional options
+})
+.on('addel:delete', function (event) {
+  if (!window.confirm('Are you absolutely positive you would like to delete: ' + '"' + event.target.find(':input').val() + '"?')) {
+    event.preventDefault();
+}
+});
+````
 
 ## Dependencies
 
-Developed with a sole dependency on jQuery (v2.1.3).
+jQuery (v2.2.3).
 
 
 ## Browser support
 
-Developed using Chrome (v42). Should work properly on all modern browsers.
+Developed and tested using Chrome (v50). Should work properly on all modern browsers.
 
+## Release policy
+See [Semantic Versioning](http://semver.org/).
 
 ## License
 

addel.jquery.js

@@ -0,0 +1,122 @@
+;(function ($) {
+
+    'use strict';
+
+    var pluginName = 'addel';
+
+    var formElements = 'input, select, textarea';
+
+    function Plugin(element, options) {
+
+        // vars
+        var container = $(element);
+
+        var settings = $.extend(true, {}, $.fn[pluginName].defaults, options);
+
+        var targetClass = '.' + settings.classes.target;
+        var addButtonClass = '.' + settings.classes.add;
+        var deleteButtonClass = '.' + settings.classes.delete;
+
+        var animation = {};
+        animation.duration = settings.animation.duration;
+        animation.easing = settings.animation.easing;
+
+        // hide feature
+        if (settings.hide) {
+            container.find(targetClass).hide().find(formElements).prop('disabled', true);
+        }
+
+        // add
+        container.on('click', addButtonClass, function () {
+
+            var target = container.find(targetClass).last();
+
+            // addel:add event
+            var addEvent = $.Event('addel:add', {target: target});
+            container.trigger(addEvent);
+            if (addEvent.isDefaultPrevented()) {
+                return
+            }
+
+            // no visible targets
+            if (target.filter(':visible').length === 0) {
+                target.fadeIn(animation).find(formElements).prop('disabled', false);
+
+            // visible target/s
+            } else {
+                target.clone().insertAfter(target).hide().fadeIn(animation).find(formElements).val(null);
+            }
+
+            container.find(targetClass).last().find(':input:enabled:visible:first').focus();
+
+            // addel:added event
+            container.trigger($.Event('addel:added', {target: target}));
+
+        });
+
+        // del
+        container.on('click', deleteButtonClass, function () {
+
+            var target = $(this).closest(targetClass);
+            var prevTarget = target.prev(targetClass);
+            var nextTarget = target.next(targetClass);
+
+            // addel:delete event
+            var deleteEvent = $.Event('addel:delete', {target: target});
+            container.trigger(deleteEvent);
+            if (deleteEvent.isDefaultPrevented()) {
+                return
+            }
+
+            // 1 target exists
+            if (container.find(targetClass).length === 1) {
+
+                target.fadeOut(animation).find(formElements).prop('disabled', true);
+                container.find(addButtonClass).focus();
+
+                // >1 targets exist
+            } else {
+
+                target.fadeOut(animation.duration, animation.easing, function () {
+                    $(this).remove();
+                });
+
+                if (prevTarget.length === 1) {
+                    prevTarget.find(deleteButtonClass).focus();
+                } else {
+                    nextTarget.find(deleteButtonClass).focus();
+                }
+
+            }
+
+            // addel:deleted event
+            container.trigger($.Event('addel:deleted', {target: target}));
+
+        });
+
+
+    }
+
+    $.fn[pluginName] = function (options) {
+        return this.each(function () {
+            if (!$.data(this, "plugin_" + pluginName)) {
+                $.data(this, "plugin_" + pluginName,
+                    new Plugin(this, options));
+            }
+        });
+    };
+
+    $.fn[pluginName].defaults = {
+        hide: false,
+        classes: {
+            target: 'addel-target',
+            add: 'addel-add',
+            delete: 'addel-delete'
+        },
+        animation: {
+            duration: 0,
+            easing: 'swing'
+        }
+    };
+
+})(jQuery);