CRY-73 closed #77 now using a bootstrap-themed multiselect

package.json

@@ -15,6 +15,7 @@
     "axios": "0.18.0",
     "bootstrap": "4.1.3",
     "bootstrap-colorpicker": "^3.0.3",
+    "bootstrap-multiselect": "0.9.13-1",
     "browser-sync": "2.26.3",
     "browser-sync-webpack-plugin": "2.2.2",
     "cross-env": "5.2.0",

resources/js/additions.js

@@ -1,4 +1,8 @@
+import baseTranslator from "./baseTranslator";
+
 $(document).ready(function () {
+    window.trans = baseTranslator(window.TRANSLATIONS);
+
     Waves.attach('.btn-primary', ['waves-light']);
     Waves.attach('.btn-secondary', ['waves-light']);
     Waves.attach('.btn-success', ['waves-light']);
@@ -124,4 +128,22 @@ $(document).ready(function () {
             theme: 'bootstrap'
         });
     });
+
+    $('[data-provide="multiselect"]').multiselect({
+        enableClickableOptGroups: true,
+        includeSelectAllOption: true,
+        numberDisplayed: 1,
+        maxHeight: 350,
+        buttonClass: 'btn btn-outline-secondary',
+        nonSelectedText: trans('multiselect.nonSelectedText'),
+        nSelectedText: trans('multiselect.nSelectedText'),
+        allSelectedText: trans('multiselect.allSelectedText'),
+        selectAllText: trans('multiselect.selectAllText'),
+        buttonContainer: '<div class="dropdown" />',
+        templates: {
+            li: '<li class="dropdown-item"><a href="javascript:void(0);"><label></label></a></li>',
+            liGroup: '<li class="dropdown-item"><a href="javascript:void(0);"><label></label></a></li>',
+            divider: '<li class="dropdown-divider"></li>',
+        },
+    });
 });

resources/js/baseTranslator.js

@@ -0,0 +1,13 @@
+import replaceParams from "./replaceParams";
+
+const baseTranslator = (translations) => (lookupKey, params = {}) => {
+    const translatedStr = _.get(translations, lookupKey);
+
+    if (_.isEmpty(translatedStr)) {
+        return `[${lookupKey}]`;
+    }
+
+    return replaceParams(translatedStr, params);
+};
+
+export default baseTranslator;

resources/js/replaceParams.js

@@ -0,0 +1,11 @@
+function replaceParams(str, params = {}) {
+    const paramKey = _.first(Object.keys(params));
+
+    if (paramKey) {
+        return replaceParams(str.replace(`:${paramKey}`, _.get(params, paramKey)))
+    }
+
+    return str;
+};
+
+export default replaceParams;

resources/lang/de/javascript.yml

@@ -0,0 +1,5 @@
+multiselect:
+  nonSelectedText: Nichts ausgewählt
+  nSelectedText: ausgewählt
+  allSelectedText: Alle ausgewählt
+  selectAllText: Alle auswählen

resources/sass/app.scss

@@ -10,4 +10,5 @@
 @import "bootstrap-additions";
 @import "waves";
 @import "boostrap-tablesorter";
-@import "../../node_modules/@claviska/jquery-minicolors/jquery.minicolors.css";
+@import "../../node_modules/@claviska/jquery-minicolors/jquery.minicolors.css";
+@import "bootstrap-multiselect";

resources/sass/bootstrap-multiselect.scss

@@ -0,0 +1,208 @@
+/**
+ * Bootstrap Multiselect (http://davidstutz.de/bootstrap-multiselect/)
+ *
+ * Apache License, Version 2.0:
+ * Copyright (c) 2012 - 2018 David Stutz
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a
+ * copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * BSD 3-Clause License:
+ * Copyright (c) 2012 - 2018 David Stutz
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *    - Redistributions of source code must retain the above copyright notice,
+ *      this list of conditions and the following disclaimer.
+ *    - Redistributions in binary form must reproduce the above copyright notice,
+ *      this list of conditions and the following disclaimer in the documentation
+ *      and/or other materials provided with the distribution.
+ *    - Neither the name of David Stutz nor the names of its contributors may be
+ *      used to endorse or promote products derived from this software without
+ *      specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+ * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
+ * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+$dropdown-link-active-hover-bg: darken($dropdown-link-active-bg, 10%);
+
+$dropdown-link-group-bg: darken($dropdown-link-hover-bg, 5%);
+$dropdown-link-group-hover-bg: darken($dropdown-link-group-bg, 10%);
+
+$dropdown-link-group-active-bg: darken(desaturate($dropdown-link-active-bg, 25%), 7%);
+$dropdown-link-group-active-hover-bg: darken($dropdown-link-group-active-bg, 10%);
+
+span.multiselect-native-select{
+  position:relative
+}
+
+span.multiselect-native-select select{
+  border :0 !important;
+  clip: rect(0 0 0 0) !important;
+  height: 1px !important;
+  margin: -1px -1px -1px -3px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  left: 50%;
+  top: 30px;
+}
+
+.multiselect-container {
+  position: absolute;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  .input-group {
+    margin: 5px;
+  }
+
+  .multiselect-reset {
+    .input-group {
+      width: 93%;
+    }
+  }
+
+  > li {
+    &.active {
+      > a {
+        > label {
+          color: $dropdown-link-active-color;
+          background-color: $dropdown-link-active-bg;
+        }
+
+        &:hover {
+          > label {
+            background-color: $dropdown-link-active-hover-bg;
+          }
+        }
+      }
+    }
+
+    padding: 0;
+
+    &.multiselect-all {
+      border-bottom: 1px solid $gray-500 !important;
+
+      &.active {
+        border-bottom: 1px solid darken($dropdown-link-group-active-hover-bg, 5%) !important;
+      }
+    }
+
+    > a.multiselect-all label {
+      font-weight: bold;
+      padding: $dropdown-item-padding-y * .4 $dropdown-item-padding-x * .4 !important;
+    }
+
+    &.multiselect-group {
+      > a {
+        > label {
+          margin: 0;
+          padding: $dropdown-item-padding-y * .4 $dropdown-item-padding-x * .4;
+          height: 100%;
+          font-weight: bold;
+          background-color: $dropdown-link-group-bg !important;
+        }
+
+        &:hover {
+          > label {
+            background-color: $dropdown-link-group-hover-bg !important;
+          }
+        }
+      }
+
+      &.active {
+        > a {
+          > label {
+            background-color: $dropdown-link-group-active-bg !important;
+          }
+
+          &:hover {
+            > label {
+              background-color: $dropdown-link-group-active-hover-bg !important;
+            }
+          }
+        }
+      }
+    }
+
+    &.multiselect-group-clickable label {
+      cursor: pointer;
+    }
+
+    > a {
+      padding: 0;
+      text-decoration: none;
+
+      &:hover {
+        > label {
+          @include _transition(all, 150ms, linear);
+
+          background-color: $dropdown-link-hover-bg;
+        }
+      }
+
+
+      > label {
+        @include _transition(all, 400ms, ease-out);
+
+        display: block;
+        color: $dropdown-link-color;
+        margin: 0;
+        height: 100%;
+        cursor: pointer;
+        font-weight: normal;
+        padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+        background-color: $dropdown-bg;
+
+        &.radio, &.checkbox {
+          margin: 0;
+        }
+
+        > input[type="checkbox"] {
+          margin-bottom: 0.2rem;
+        }
+      }
+    }
+  }
+}
+
+.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
+  border-top-left-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+}
+
+.form-inline .multiselect-container{
+
+  label.checkbox, label.radio{
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  }
+
+  li a label{
+
+    &.checkbox input[type="checkbox"], &.radio input[type="radio"]{
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}

resources/views/feed/_search_form.blade.php

@@ -17,7 +17,7 @@
         {{ Form::label('feed_ids', __('feed.search.feed_ids'), ['class' => 'col-lg-2 col-form-label']) }}
 
         <div class="col-lg-5">
-            {{ Form::select('feed_ids[]', $feeds, request()->query('feed_ids') ?? $feedIds, ['multiple' => true, 'size' => 15]) }}
+            {{ Form::select('feed_ids[]', $feeds, request()->query('feed_ids') ?? $feedIds, ['multiple' => true, 'size' => 15, 'data-provide' => 'multiselect', 'class' => 'd-none']) }}
         </div>
     </div>
 

resources/views/layouts/app.blade.php

@@ -25,6 +25,10 @@
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/fusioncharts.js" charset="utf-8"></script>
 
+    {{ Html::script('js/app.js') }}
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js" charset="utf-8"></script>
+
     @include('shared._javascript_config')
 </head>
 <body>
@@ -68,9 +72,11 @@
     </div>
 </div>
 
-{{ Html::script('js/app.js') }}
-
 @yield('scripts')
 
+<script type="text/javascript">
+    window.TRANSLATIONS = {!! json_encode(__('javascript')) !!}
+</script>
+
 </body>
 </html>