Merge pull request #3 from harshniketseta/v2.1-dev

V2.1 dev

examples/index.html

@@ -187,7 +187,8 @@ <h4>Basic Example (Disabled)</h4>
   $(document).ready(function() {
     $("#industries1").multiselect({
       title: "Select Industry",
-      maxSelectionAllowed: 5
+      maxSelectionAllowed: 5,
+      modalSize: "md"
     });
     $("#industries2").multiselect({
       title: "Select Industry",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "popup-multiselect",
   "description": "Popup Multi Select Widget based on Bootstrap.",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "private": false,
   "homepage": "https://github.com/harshniketseta/popupMultiSelect",
   "author": {
@@ -21,7 +21,7 @@
     "grunt-contrib-watch": "^1.1.0"
   },
   "dependencies": {
-    "bootstrap": "~3.3.2",
-    "jquery": "~2.1.3"
+    "bootstrap": ">=3.4.1",
+    "jquery": ">=3.4.0"
   }
 }

src/javascripts/multiselect.js

@@ -4,7 +4,7 @@
  * Popup Multi Select
  * Created By Harshniket Seta
  * Currently maintained by harshniketseta [at] gmail [dot] com
- * Version: 2.0.1
+ * Version: 2.1.0
  * Release: 2019-05-26
  * ======================================================================== */
 
@@ -32,14 +32,15 @@
 
   MultiSelect.DEFAULTS = {
     animation: true,
+    modalSize: "sm",
     selectTemplate:
-      '<div class="selectWrap clearfix"><span class="select-content"></span><a href="#" class="open-options clickable"><span class="glyphicon glyphicon-list" aria-hidden="true"></span></a></div>',
+      '<div class="selectWrap clearfix"><span class="select-content"></span><a href="#" class="open-options clickable"><span class="icon icon-list">&#9776;</span></a></div>',
     selectOptionTemplate:
-      '<span class="addedOption" ><span class="text"></span><span class="clickable removeOption"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span></span>',
+      '<span class="addedOption" ><span class="text"></span><span class="clickable removeOption"><span class="icon icon-remove" aria-hidden="true"></span></span></span>',
     modalTemplate:
-      '<div class="select modal in" aria-hidden="false"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><span class="pull-right clickable close" aria-hidden="true">x</span><h4 class="modal-title"></h4><div class="help-block"></div></div><div class="modal-body"></div></div></div></div>',
+      '<div class="select modal in" aria-hidden="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><div><h5 class="modal-title"></h5><div class="help-block"></div></div><span class="float-right clickable close" aria-hidden="true">x</span></div><div class="modal-body"></div></div></div></div>',
     modalOptionTemplate:
-      '<div class="option clickable"><span class="option-text"></span><span class="option-tick"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></span></div>',
+      '<div class="option clickable"><span class="option-text"></span><span class="option-tick"><span class="icon icon-ok" aria-hidden="true">&#x2713;</span></span></div>',
     title: "Select Options"
   };
 
@@ -116,6 +117,7 @@
     if (!this.multiple) {
       options.maxSelectionAllowed = 1;
     }
+
     return options;
   };
 
@@ -153,7 +155,7 @@
 
   MultiSelect.prototype.getSelectOpenIcon = function() {
     var $openOptions = this.getMultiSelectOpen(),
-      optionsOpenIcon = $openOptions.find("span.glyphicon");
+      optionsOpenIcon = $openOptions.find("span.icon");
     return optionsOpenIcon;
   };
 
@@ -181,6 +183,7 @@
       this.getModalHelpBlock(this.$modal).html(this.getModalHelpTextContent());
       this.getModalTitleBlock(this.$modal).html(this.getModalTitle());
       this.getModalBody(this.$modal).html(this.getModalBodyContent());
+      this.getModalDialog(this.$modal).addClass(this.getModalSizeClass());
       this.initModal(this.$modal);
     }
 
@@ -209,6 +212,12 @@
     return $modal.find(".modal-body");
   };
 
+  MultiSelect.prototype.getModalDialog = function($modal) {
+    $modal = $modal || this.getModal();
+
+    return $modal.find(".modal-dialog");
+  };
+
   MultiSelect.prototype.getModalHelpTextContent = function(jOption, action) {
     var helpText = "",
       currentlySelectedLength = this.getSelected().length,
@@ -231,6 +240,10 @@
     return this.options.title;
   };
 
+  MultiSelect.prototype.getModalSizeClass = function() {
+    return "modal-" + this.options.modalSize;
+  };
+
   MultiSelect.prototype.getModalBodyContent = function() {
     var oMultiSelect = this,
       modalBodyContent = [];

src/stylesheets/multiselect.scss

@@ -51,7 +51,7 @@
     color: #000;
     right: 0px;
 
-    > span.glyphicon {
+    > span.icon {
       font-size: 14px;
     }
   }
@@ -100,3 +100,10 @@
 .clickable {
   cursor: pointer;
 }
+
+.icon {
+  display: inline-block;
+  font-style: normal;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+}

yarn.lock

@@ -78,10 +78,10 @@ body@^5.1.0:
     raw-body "~1.1.0"
     safe-json-parse "~1.0.1"
 
-bootstrap@~3.3.2:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
-  integrity sha1-WjiTlFSfIzMIdaOxUGVldPip63E=
+bootstrap@>=3.4.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
+  integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -653,10 +653,10 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-jquery@~2.1.3:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.1.4.tgz#228bde698a0c61431dc2630a6a154f15890d2317"
-  integrity sha1-IoveaYoMYUMdwmMKahVPFYkNIxc=
+jquery@>=3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
+  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
 
 js-yaml@~3.13.0:
   version "3.13.1"