Implemented the hide/show sidebar feature

modules/cms/widgets/MediaManager.php

@@ -349,6 +349,13 @@ class MediaManager extends WidgetBase
         ];
     }
 
+    public function onSetSidebarVisible()
+    {
+        $visible = Input::get('visible');
+
+        $this->setSidebarVisible($visible);
+    }
+
     //
     // Methods for th internal use
     //
@@ -378,6 +385,7 @@ class MediaManager extends WidgetBase
         $this->vars['sortBy'] = $sortBy;
         $this->vars['searchMode'] = $searchMode;
         $this->vars['searchTerm'] = $searchTerm;
+        $this->vars['sidebarVisible'] = $this->getSidebarVisible();
     }
 
     protected function listFolderItems($folder, $filter, $sortBy)
@@ -452,6 +460,16 @@ class MediaManager extends WidgetBase
         return $this->getSession('media_sort_by', MediaLibrary::SORT_BY_TITLE);
     }
 
+    protected function setSidebarVisible($visible)
+    {
+        return $this->putSession('sideba_visible', !!$visible);
+    }
+
+    protected function getSidebarVisible()
+    {
+        return $this->getSession('sideba_visible', true);
+    }
+
     protected function itemTypeToIconClass($item, $itemType)
     {
         if ($item->type == MediaLibraryItem::TYPE_FOLDER)

modules/cms/widgets/mediamanager/assets/css/mediamanager.css

@@ -380,6 +380,11 @@ div[data-control="media-manager"] .upload-progress .progress-controls .controls
 div[data-control="media-manager"] .dz-preview {
   display: none;
 }
+div[data-control="media-manager"] button[data-command="toggle-sidebar"].sidebar-hidden {
+  -webkit-transform: rotate(180deg) translate(0, 0);
+  -ms-transform: rotate(180deg) translate(0, 0);
+  transform: rotate(180deg) translate(0, 0);
+}
 body:not(.no-select) div[data-control="media-manager"] .media-list.tiles li:hover .icon-container {
   background: #4da7e8 !important;
   border-color: #2581b8;
@@ -404,3 +409,8 @@ body:not(.no-select) div[data-control="media-manager"] .media-list .list li:hove
 body:not(.no-select) div[data-control="media-manager"] .media-list .list li:hover .icon-container {
   border-right-color: #4da7e8 !important;
 }
+@media (max-width: 1280px) {
+  div[data-control="media-manager"] .media-list.list li {
+    width: 230px;
+  }
+}

modules/cms/widgets/mediamanager/assets/js/mediamanager.js

@@ -287,7 +287,29 @@
     //
 
     MediaManager.prototype.isPreviewSidebarVisible = function() {
-        return true
+        return !this.$el.find('[data-control="preview-sidebar"]').hasClass('hide')
+    }
+
+    MediaManager.prototype.toggleSidebar = function(ev) {
+        var isVisible = this.isPreviewSidebarVisible(),
+            $sidebar = this.$el.find('[data-control="preview-sidebar"]'),
+            $button = $(ev.target)
+
+        if (!isVisible) {
+            $sidebar.removeClass('hide')
+            this.updateSidebarPreview()
+            $button.removeClass('sidebar-hidden')
+        } 
+        else {
+            $sidebar.addClass('hide')
+            $button.addClass('sidebar-hidden')
+        }
+
+        this.$form.request(this.options.alias+'::onSetSidebarVisible', {
+            data: {
+                visible: (isVisible ? 0 : 1)
+            }
+        })
     }
 
     MediaManager.prototype.updateSidebarMediaPreview = function(items) {
@@ -929,6 +951,9 @@
             case 'move':
                 this.moveItems(ev)
             break;
+            case 'toggle-sidebar':
+                this.toggleSidebar(ev)
+            break;
         }
 
         return false

modules/cms/widgets/mediamanager/assets/less/mediamanager.less

@@ -448,6 +448,12 @@ div[data-control="media-manager"] {
     .dz-preview {
         display: none;
     }
+
+    button[data-command="toggle-sidebar"] {
+        &.sidebar-hidden {
+            .transform( ~'rotate(180deg) translate(0, 0)' );
+        }
+    }
 }
 
 body:not(.no-select) {
@@ -464,4 +470,16 @@ body:not(.no-select) {
             }
         }
     }
+}
+
+@media (max-width: 1280px) {
+    div[data-control="media-manager"] {
+        .media-list {
+            &.list {
+                li {
+                    width: 230px;
+                }
+            }
+        }
+    }
 }

modules/cms/widgets/mediamanager/partials/_body.htm

@@ -41,7 +41,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="layout-cell width-300 panel border-left no-padding" data-control="preview-sidebar">
+                                <div class="layout-cell width-300 panel border-left no-padding <?= !$sidebarVisible ? 'hide' : null ?>" data-control="preview-sidebar">
                                     <!-- Right sidebar -->
                                     <?= $this->makePartial('right-sidebar') ?>
                                 </div>

modules/cms/widgets/mediamanager/partials/_folder-toolbar.htm

@@ -8,7 +8,8 @@
         <div class="layout-cell">
             <button
                 type="button"
-                class="oc-icon-sign-out btn-icon pull-right larger">
+                data-command="toggle-sidebar"
+                class="oc-icon-sign-out btn-icon pull-right larger <?= !$sidebarVisible ? 'sidebar-hidden' : null ?>">
             </button>
         </div>
     </div>