hide multiple selection toggle when integrating with WYSIWYG editors

Author: streamtw

public/css/lfm.css

@@ -38,6 +38,14 @@ a {
   border-left: 1px solid #dee2e6;
 }
 
+#multi_selection_toggle > i.fa-check-double {
+  font-size: 20px;
+}
+
+#multi_selection_toggle > i.fa-times {
+  font-size: 24px;
+}
+
 #main {
   width: 100%;
 }

public/js/script.js

@@ -13,7 +13,7 @@ $.fn.fab = function (options) {
     .append($('<i>').addClass('fas fa-plus'))
     .click(function () {
       menu.toggleClass('fab-expand');
-    })
+    });
 
   menu.append(toggler);
 
@@ -49,6 +49,8 @@ function toggleSelected (e) {
 function clearSelected () {
   selected = [];
 
+  multi_selection_enabled = false;
+
   updateSelectedStyle();
 }
 
@@ -111,6 +113,10 @@ $(document).ready(function () {
   $(window).on('dragenter', function(){
     $('#uploadModal').modal('show');
   });
+
+  if (usingWysiwygEditor()) {
+    $('#multi_selection_toggle').hide();
+  }
 });
 
 // ======================
@@ -121,7 +127,7 @@ $('#multi_selection_toggle').click(function () {
   multi_selection_enabled = !multi_selection_enabled;
 
   $('#multi_selection_toggle i')
-    .toggleClass('fa-ban', multi_selection_enabled)
+    .toggleClass('fa-times', multi_selection_enabled)
     .toggleClass('fa-check-double', !multi_selection_enabled);
 
   if (!multi_selection_enabled) {
@@ -214,16 +220,17 @@ function toggleActions() {
     .filter(function (item) { return !item.is_file; })
     .length === 0;
 
-  $('[data-action=use]').toggleClass('d-none', !(many_selected && only_file))
-  $('[data-action=rename]').toggleClass('d-none', !one_selected)
-  $('[data-action=preview]').toggleClass('d-none', !(many_selected && only_file))
-  $('[data-action=move]').toggleClass('d-none', !many_selected)
-  $('[data-action=download]').toggleClass('d-none', !(many_selected && only_file))
-  $('[data-action=resize]').toggleClass('d-none', !(one_selected && only_image))
-  $('[data-action=crop]').toggleClass('d-none', !(one_selected && only_image))
-  $('[data-action=trash]').toggleClass('d-none', !many_selected)
-  $('#actions').toggleClass('d-none', selected.length === 0)
-  $('#fab').toggleClass('d-none', selected.length !== 0)
+  $('[data-action=use]').toggleClass('d-none', !(many_selected && only_file));
+  $('[data-action=rename]').toggleClass('d-none', !one_selected);
+  $('[data-action=preview]').toggleClass('d-none', !(many_selected && only_file));
+  $('[data-action=move]').toggleClass('d-none', !many_selected);
+  $('[data-action=download]').toggleClass('d-none', !(many_selected && only_file));
+  $('[data-action=resize]').toggleClass('d-none', !(one_selected && only_image));
+  $('[data-action=crop]').toggleClass('d-none', !(one_selected && only_image));
+  $('[data-action=trash]').toggleClass('d-none', !many_selected);
+  $('#multi_selection_toggle').toggleClass('d-none', usingWysiwygEditor() || !many_selected);
+  $('#actions').toggleClass('d-none', selected.length === 0);
+  $('#fab').toggleClass('d-none', selected.length !== 0);
 }
 
 $(document).on('click', '#tree a', function (e) {

src/views/index.blade.php

@@ -35,17 +35,17 @@
     </a>
     <a class="navbar-brand d-block d-lg-none">{{ trans('laravel-filemanager::lfm.nav-home') }}</a>
     <a id="loading" class="navbar-brand"><i class="fas fa-spinner fa-spin"></i></a>
-    <a class="navbar-toggler collapsed border-0 px-1 py-2 m-0 ml-auto" data-toggle="collapse" data-target="#nav-buttons">
+    <div class="ml-auto px-2">
+      <a class="navbar-link d-none" id="multi_selection_toggle">
+        <i class="fa fa-check-double fa-fw"></i>
+        <span class="d-none d-lg-inline">{{ trans('laravel-filemanager::lfm.menu-multiple') }}</span>
+      </a>
+    </div>
+    <a class="navbar-toggler collapsed border-0 px-1 py-2 m-0" data-toggle="collapse" data-target="#nav-buttons">
       <i class="fas fa-cog fa-fw"></i>
     </a>
-    <div class="collapse navbar-collapse" id="nav-buttons">
-      <ul class="navbar-nav ml-auto">
-        <li class="nav-item">
-          <a class="nav-link" id="multi_selection_toggle">
-            <i class="fa fa-check-double fa-fw"></i>
-            <span>{{ trans('laravel-filemanager::lfm.menu-multiple') }}</span>
-          </a>
-        </li>
+    <div class="collapse navbar-collapse flex-grow-0" id="nav-buttons">
+      <ul class="navbar-nav">
         <li class="nav-item">
           <a class="nav-link" data-display="grid">
             <i class="fas fa-th-large fa-fw"></i>