transform clear position into clear end

lekoala · Jul 5, 2022 · 4b93500 · 4b93500
1 parent 8bd7a9b
commit 4b93500
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/demo.html b/demo.html
@@ -158,9 +158,9 @@
       }
       .mybadge {
         margin-right: 0.5rem;
-        padding: 0 0.25rem;
+        padding: 0.25 0.5rem;
         font-size: 0.85rem;
-        background: #eee;
+        background: #333;
       }
     </style>
   </head>
@@ -488,14 +488,15 @@ <h1>Demo</h1>
         </div>
         <div class="row mb-3 g-3 source-sans">
           <div class="col-md-4">
-            <label for="sourceSansTags" class="form-label">Tags with custom font and custom class</label>
+            <label for="sourceSansTags" class="form-label">Tags with custom font and custom class + clear end</label>
             <select
               class="form-select"
               id="sourceSansTags"
               name="sourceSansTags"
               multiple
               data-base-class="mybadge"
-              data-allow-clear="0"
+              data-clear-end="1"
+              data-allow-clear="1"
               data-suggestions-threshold="0"
             >
               <option value="">Choose a tag...</option>

diff --git a/readme.md b/readme.md
@@ -79,7 +79,7 @@ Options can be either passed to the constructor (eg: optionName) or in data-opti
 | showAllSuggestions   | false          | Show all suggestions even if they don't match. Disables validation.                             |
 | badgeStyle           | primary        | Color of the badge (color can be configured per option as well)                                 |
 | allowClear           | false          | Show a clear icon                                                                               |
-| clearPosition        | 'left'         | Clear icon position                                                           |
+| clearEnd             | false          | Place clear icon at the end                                                                     |
 | server               | ''             | Point to a given endpoint that should provide the list of suggestions                           |
 | liveServer           | false          | Should the endpoint be called dynamically when typing                                           |
 | serverParams         | {}             | Additionnal params to pass alongside the query parameter                                        |

diff --git a/tags.js b/tags.js
@@ -39,7 +39,7 @@ class Tags {
     this.showAllSuggestions = opts.showAllSuggestions ? parseBool(opts.showAllSuggestions) : false;
     this.badgeStyle = opts.badgeStyle || "primary";
     this.allowClear = opts.allowClear ? parseBool(opts.allowClear) : false;
-    this.clearPosition = opts.clearPosition || "left";
+    this.clearEnd = opts.clearEnd ? parseBool(opts.clearEnd) : false;
     this.server = opts.server || false;
     this.liveServer = opts.liveServer ? parseBool(opts.liveServer) : false;
     this.serverParams = opts.serverParams || {};
@@ -904,7 +904,7 @@ class Tags {
       const closeClass = classes.includes("text-dark") ? "btn-close" : "btn-close-white";
       let btnMargin;
       let btnFloat;
-      if (this.clearPosition === "right") {
+      if (this.clearEnd) {
         btnMargin = bver === 5 ? "ms-2" : "ml-2";
         btnFloat = bver === 5 ? "float-end" : "float:right;";
       } else {
@@ -913,10 +913,22 @@ class Tags {
       }
       const btn =
         bver === 5
-          ? '<button type="button" style="font-size:0.65em" class="' + btnMargin + ' ' + btnFloat + ' btn-close ' +
-          closeClass + '" aria-label="' + this.clearLabel + '"></button>'
-          : '<button type="button" style="font-size:1em;' + btnFloat + 'text-shadow:none;color:currentColor;transform:scale(1.2)" class="' + btnMargin + ' close" aria-label="' +
-          this.clearLabel + '"><span aria-hidden="true">&times;</span></button>';
+          ? '<button type="button" style="font-size:0.65em" class="' +
+            btnMargin +
+            " " +
+            btnFloat +
+            " btn-close " +
+            closeClass +
+            '" aria-label="' +
+            this.clearLabel +
+            '"></button>'
+          : '<button type="button" style="font-size:1em;' +
+            btnFloat +
+            'text-shadow:none;color:currentColor;transform:scale(1.2)" class="' +
+            btnMargin +
+            ' close" aria-label="' +
+            this.clearLabel +
+            '"><span aria-hidden="true">&times;</span></button>';
       html = btn + html;
     }