Implemented events (#5)

mdbootstrap · Jul 25, 2014 · 767f296 · 767f296
1 parent 3494210
commit 767f296
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 2 deletions.
diff --git a/examples/bootstrap3/index.html b/examples/bootstrap3/index.html
@@ -500,7 +500,7 @@ <h2>Methods</h2>
         <table class="table table-bordered table-condensed">
           <thead>
             <tr>
-              <th colspan="2">method</th>
+              <th>method</th>
               <th>description</th>
             </tr>
           </thead>
@@ -569,6 +569,60 @@ <h2>Methods</h2>
           </tbody>
         </table>
       </section>
+
+      <section id="methods">
+        <div class="page-header">
+          <h2>Events</h2>
+        </div>
+        <table class="table table-bordered table-condensed">
+          <thead>
+            <tr>
+              <th>event</th>
+              <th>description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>beforeItemAdd</code></td>
+              <td>
+                Triggered just before an item gets added. Example:
+                <pre class="prettyprint linenums">$('input').on('beforeItemAdd', function(event) {
+  // event.item: contains the item
+  // event.cancel: set to true to prevent the item getting added
+});</pre>
+              </td>
+            </tr>
+            <tr>
+              <td><code>itemAdded</code></td>
+              <td>
+                Triggered just after an item got added. Example:
+                <pre class="prettyprint linenums">$('input').on('itemAdded', function(event) {
+  // event.item: contains the item
+});</pre>
+              </td>
+            </tr>
+            <tr>
+              <td><code>beforeItemRemove</code></td>
+              <td>
+                Triggered just before an item gets removed. Example:
+                <pre class="prettyprint linenums">$('input').on('beforeItemRemove', function(event) {
+  // event.item: contains the item
+  // event.cancel: set to true to prevent the item getting removed
+});</pre>
+              </td>
+            </tr>
+            <tr>
+              <td><code>itemRemoved</code></td>
+              <td>
+                Triggered just after an item got removed. Example:
+                <pre class="prettyprint linenums">$('input').on('itemRemoved', function(event) {
+  // event.item: contains the item
+});</pre>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
     </div>
     <footer class="bs-footer">
       <p>Code licensed under <a href="https://raw.github.com/TimSchlechter/bootstrap-tagsinput/master/LICENSE" target="_blank">MIT License</a></p>

diff --git a/examples/index.html b/examples/index.html
@@ -488,7 +488,7 @@ <h2>Methods</h2>
         <table class="table table-bordered table-condensed">
           <thead>
             <tr>
-              <th colspan="2">method</th>
+              <th>method</th>
               <th>description</th>
             </tr>
           </thead>
@@ -557,6 +557,60 @@ <h2>Methods</h2>
           </tbody>
         </table>
       </section>
+
+      <section id="methods">
+        <div class="page-header">
+          <h2>Events</h2>
+        </div>
+        <table class="table table-bordered table-condensed">
+          <thead>
+            <tr>
+              <th>event</th>
+              <th>description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>beforeItemAdd</code></td>
+              <td>
+                Triggered just before an item gets added. Example:
+                <pre class="prettyprint linenums">$('input').on('beforeItemAdd', function(event) {
+  // event.item: contains the item
+  // event.cancel: set to true to prevent the item getting added
+});</pre>
+              </td>
+            </tr>
+            <tr>
+              <td><code>itemAdded</code></td>
+              <td>
+                Triggered just after an item got added. Example:
+                <pre class="prettyprint linenums">$('input').on('itemAdded', function(event) {
+  // event.item: contains the item
+});</pre>
+              </td>
+            </tr>
+            <tr>
+              <td><code>beforeItemRemove</code></td>
+              <td>
+                Triggered just before an item gets removed. Example:
+                <pre class="prettyprint linenums">$('input').on('beforeItemRemove', function(event) {
+  // event.item: contains the item
+  // event.cancel: set to true to prevent the item getting removed
+});</pre>
+              </td>
+            </tr>
+            <tr>
+              <td><code>itemRemoved</code></td>
+              <td>
+                Triggered just after an item got removed. Example:
+                <pre class="prettyprint linenums">$('input').on('itemRemoved', function(event) {
+  // event.item: contains the item
+});</pre>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
     </div>
       <footer class="footer">
       <p>Code licensed under <a href="https://raw.github.com/TimSchlechter/bootstrap-tagsinput/master/LICENSE" target="_blank">MIT License</a></p>

diff --git a/src/bootstrap-tagsinput.js b/src/bootstrap-tagsinput.js
@@ -113,6 +113,12 @@
       if (self.items().toString().length + item.length + 1 > self.options.maxInputLength)
         return;
 
+      // raise beforeItemAdd arg
+      var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false });
+      self.$element.trigger(beforeItemAddEvent);
+      if (beforeItemAddEvent.cancel)
+        return;
+
       // register item in internal array and map
       self.itemsArray.push(item);
 
@@ -155,6 +161,11 @@
       }
 
       if (item) {
+        var beforeItemRemoveEvent = $.Event('beforeItemRemove', { item: item, cancel: false });
+        self.$element.trigger(beforeItemRemoveEvent);
+        if (beforeItemRemoveEvent.cancel)
+          return;
+
         $('.tag', self.$container).filter(function() { return $(this).data('item') === item; }).remove();
         $('option', self.$element).filter(function() { return $(this).data('item') === item; }).remove();
         if($.inArray(item, self.itemsArray) !== -1)

diff --git a/test/bootstrap-tagsinput/events.tests.js b/test/bootstrap-tagsinput/events.tests.js
@@ -0,0 +1,24 @@
+describe("bootstrap-tagsinput", function() {
+
+  describe("events", function() {
+    testTagsInput('<input type="text" />', function() {
+      it("beforeItemAdd canceled", function() {
+        this.$element.on('beforeItemAdd', function(event) {
+          event.cancel = true;
+        });
+        this.$element.tagsinput('add', 'some');
+        expect(this.$element.tagsinput('items').length).toBe(0);
+      });
+    });
+
+    testTagsInput('<input type="text" value="1" />', function() {
+      it("beforeItemRemove canceled", function() {
+        this.$element.on('beforeItemRemove', function(event) {
+          event.cancel = true;
+        });
+        this.$element.tagsinput('remove', '1');
+        expect(this.$element.tagsinput('items').length).toBe(1);
+      });
+    });
+  });
+});
diff --git a/test/index.html b/test/index.html
@@ -20,6 +20,7 @@
     <script type="text/javascript" src="bootstrap-tagsinput/select_with_string_items.tests.js"></script>
     <script type="text/javascript" src="bootstrap-tagsinput/select_with_object_items.tests.js"></script>
     <script type="text/javascript" src="bootstrap-tagsinput/reproduced_bugs.tests.js"></script>
+    <script type="text/javascript" src="bootstrap-tagsinput/events.tests.js"></script>
 
     <script type="text/javascript" src="bootstrap-tagsinput-angular.tests.js"></script>
   </head>