Andreww1011 v1.2.0 (#8)

* event support * event support * event support
andreww1011 · Feb 27, 2022 · 912334b · 912334b
1 parent d5ba6c2
commit 912334b
Show file tree

Hide file tree

Showing 16 changed files with 185 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@
 <p>
   <ol>
     <li>Load jQuery, Bootstrap, and the plugin bundle in your HTML code.
-    <pre><code>&ltscript src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt&lt/script&gt
+    <pre><code>&ltscript src="https://code.jquery.com/jquery-3.2.1.min.js"&gt&lt/script&gt
 &ltlink rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/&gt
 ...
 &ltlink rel="stylesheet" href="filter_multi_select.css"/&gt
@@ -45,10 +45,18 @@
 &lt/script&gt</code></pre></li>
     <li>Or append the class <code>filter-multi-select</code> to the select element and have it be targeted automatically.
     <pre><code>&ltselect <b>class="filter-multi-select"</b> multiple id="pets" name="pets"&gt</code></pre></li>
+    <p align="center">
+      <img src="./screenshot.png" width="489" title="screenshot">
+    </p>
+    <li>Listen to the events <code>optionselected</code> and <code>optiondeselected</code> to signal changes.
+    <pre><code>&ltscript&gt
+  $(function () {
+    $('#pets').on('optionselected', function(e) {
+      ...
+    });
+  });
+&lt/script&gt</code></pre></li>
   </ol>
-  <p align="center">
-    <img src="./screenshot.png" width="489" title="screenshot">
-  </p>
 </p>
 
 # Options
@@ -87,3 +95,10 @@
     <li><code>$.fn.filterMultiSelect.applied</code> - a collection of all element groups applied by the plugin.</li>
   </ul>
 </p>
+<p>The following data is available on the <code>optionselected</code> and <code>optiondeselected</code> event object <code>e</code>:
+  <ul>
+    <li><code>e.detail.label</code> - the display text of the option that was selected/deselected.</li>
+    <li><code>e.detail.value</code> - the value of the option that was selected/deselected.</li>
+    <li><code>e.detail.name</code> - the name of the select element from which the option was selected/deselected.</li>
+  </ul>
+</p>
diff --git a/dist/FilterMultiSelect.js b/dist/FilterMultiSelect.js
diff --git a/dist/FilterMultiSelect.js.map b/dist/FilterMultiSelect.js.map
diff --git a/dist/example.html b/dist/example.html
@@ -1,6 +1,6 @@
 <!-- /*! 
  *  Multiple select dropdown with filter jQuery plugin.
- *  Copyright (C) 2020  Andrew Wagner  github.com/andreww1011
+ *  Copyright (C) 2022  Andrew Wagner  github.com/andreww1011
  *
  *  This library is free software; you can redistribute it and/or
  *  modify it under the terms of the GNU Lesser General Public
@@ -23,11 +23,14 @@
   <head>
     <meta charset="utf-8">
     <title>Filter Multi Select Plugin</title>
+    <style>
+      .notification {color: red; font-size: 85%;}
+    </style>
   </head>
 
   <body>
     <!-- Load jQuery -->
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
     <!-- Load Bootstrap -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
@@ -55,6 +58,10 @@ <h1>Dropdown Filter Multi-select jQuery plugin</h1>
       <div class="row">
         <h4 class="col-12">Default Dropdown</h4>
       </div>
+      <div class="row">
+        <div class="col-2"></div>
+        <div class="col-10" id="notifications">&nbsp;</div>
+      </div>
       <div class="form-group row">
         <label class="col-2 col-form-label" for="animals">Animals</label>
         <div class="col-10">
@@ -206,7 +213,22 @@ <h4 class="col-12">Dropdown with items added via js</h4>
       // Use the plugin once the DOM has been loaded.
       $(function () {
         // Apply the plugin 
-        // var animals = $('#animals').filterMultiSelect();
+        var notifications = $('#notifications');
+        $('#animals').on("optionselected", function(e) {
+          createNotification("selected", e.detail.label);
+        });
+        $('#animals').on("optiondeselected", function(e) {
+          createNotification("deselected", e.detail.label);
+        });
+        function createNotification(event,label) {
+          var n = $(document.createElement('span'))
+            .text(event + ' ' + label + "  ")
+            .addClass('notification')
+            .appendTo(notifications)
+            .fadeOut(3000, function() {
+              n.remove();
+            });
+        }
         var shapes = $('#shapes').filterMultiSelect({
           selectAllText: 'all...',
           placeholderText: 'click to select a shape',

diff --git a/dist/filter-multi-select-bundle.js b/dist/filter-multi-select-bundle.js
diff --git a/dist/filter-multi-select-bundle.js.map b/dist/filter-multi-select-bundle.js.map
diff --git a/dist/filter-multi-select-bundle.min.js b/dist/filter-multi-select-bundle.min.js
diff --git a/dist/filter-multi-select-bundle.min.js.map b/dist/filter-multi-select-bundle.min.js.map
diff --git a/dist/filter-multi-select.js b/dist/filter-multi-select.js
diff --git a/dist/filter_multi_select.css b/dist/filter_multi_select.css
@@ -1,6 +1,6 @@
 /*! 
  *  Multiple select dropdown with filter jQuery plugin.
- *  Copyright (C) 2020  Andrew Wagner  github.com/andreww1011
+ *  Copyright (C) 2022  Andrew Wagner  github.com/andreww1011
  *
  *  This library is free software; you can redistribute it and/or
  *  modify it under the terms of the GNU Lesser General Public

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "filter-multi-select",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Multiple select dropdown with filter jQuery plugin.",
   "scripts": {
     "clean": "rimraf dist && rimraf coverage",

diff --git a/src/Args.ts b/src/Args.ts
@@ -1,6 +1,6 @@
 /*! 
  *  Multiple select dropdown with filter jQuery plugin.
- *  Copyright (C) 2020  Andrew Wagner  github.com/andreww1011
+ *  Copyright (C) 2022  Andrew Wagner  github.com/andreww1011
  *
  *  This library is free software; you can redistribute it and/or
  *  modify it under the terms of the GNU Lesser General Public

diff --git a/src/FilterMultiSelect.ts b/src/FilterMultiSelect.ts
@@ -1,6 +1,6 @@
 /*! 
  *  Multiple select dropdown with filter jQuery plugin.
- *  Copyright (C) 2020  Andrew Wagner  github.com/andreww1011
+ *  Copyright (C) 2022  Andrew Wagner  github.com/andreww1011
  *
  *  This library is free software; you can redistribute it and/or
  *  modify it under the terms of the GNU Lesser General Public
@@ -165,13 +165,15 @@ export default class FilterMultiSelect {
         private selectNoDisabledCheck(): void {
             this.checkbox.checked = true;
             this.fms.queueOption(this);
+            this.fms.dispatchSelectedEvent(this);
             this.fms.update();
         }
 
         public deselect(): void {
             if (this.isDisabled()) return;
             this.checkbox.checked = false;
             this.fms.unqueueOption(this);
+            this.fms.dispatchDeselectedEvent(this);
             this.fms.update();
         }
 
@@ -317,6 +319,25 @@ export default class FilterMultiSelect {
         } ();
     }
 
+    public static EventType = {
+        SELECTED: "optionselected",
+        DESELECTED: "optiondeselected",
+    } as const;
+
+    private static createEvent(e: string, n: string, v: string, l: string): CustomEvent {
+        const event = new CustomEvent(e, {
+            detail: {
+                name: n,
+                value: v,
+                label: l
+            },
+            bubbles: true,
+            cancelable: true,
+            composed: false,
+        });
+        return event;
+    }
+
     private options: Array<Option>;
     private selectAllOption;
     private div: HTMLDivElement;
@@ -337,7 +358,7 @@ export default class FilterMultiSelect {
     private itemFocus: number;
     private name: string;
 
-    constructor (selectTarget: JQuery<HTMLElement>, args: Args) {
+    constructor (selectTarget: JQuery<HTMLElement>, args: Args) {        
         let t = selectTarget.get(0);
         if (!(t instanceof HTMLSelectElement)) {
             throw new Error("JQuery target must be a select element.");
@@ -858,4 +879,23 @@ export default class FilterMultiSelect {
     public getName(): string {
         return this.name;
     }
+
+    private dispatchSelectedEvent(option: Option): void {
+        this.dispatchEvent(
+            FilterMultiSelect.EventType.SELECTED,
+            option.getValue(),
+            option.getLabel());
+    }
+
+    private dispatchDeselectedEvent(option: Option): void {
+        this.dispatchEvent(
+            FilterMultiSelect.EventType.DESELECTED,
+            option.getValue(),
+            option.getLabel());
+    }
+
+    private dispatchEvent(eventType: string, value: string, label: string): void {
+        let event: CustomEvent = FilterMultiSelect.createEvent(eventType, this.getName(), value, label);
+        this.viewBar.dispatchEvent(event);
+    }
 }