fab modified and type select added

public/css/lfm.css

@@ -6,7 +6,7 @@ a {
   cursor: pointer;
 }
 
-#nav a, #fab a {
+#nav a, #fab a, #type-select a{
   color: white;
 }
 
@@ -324,11 +324,19 @@ time {
 
 .fab-wrapper {
   margin: 1.5rem;
-  right: 0;
-  bottom: 0;
   position: fixed;
 }
 
+.fab-wrapper.right-bottom{
+    right: 0;
+    bottom: 0;
+}
+
+.fab-wrapper.left-bottom{
+    left: 0;
+    bottom: 0;
+}
+
 .fab-wrapper .fab-button {
   position: relative;
   background-color: #333844;
@@ -353,20 +361,34 @@ time {
   transition: transform 350ms;
 }
 
-.fab-wrapper.fab-expand .fab-toggle i {
+.fab-wrapper.fab-expand .fab-toggle i.rotate {
   -webkit-transform: scale(1) rotate(-225deg);
   transform: scale(1) rotate(-225deg);
   -webkit-transition: -webkit-transform 350ms;
   transition: transform 350ms;
 }
 
+.fab-wrapper.fab-expand .fab-toggle i.scale {
+    -webkit-transform: scale(1);
+    transform: scale(1.2);
+    -webkit-transition: -webkit-transform 350ms;
+    transition: transform 350ms;
+}
+
 .fab-wrapper .fab-action {
   z-index: -1;
   margin-bottom: -3.5rem;
   opacity: 0;
   transition: margin-bottom 350ms, opacity 350ms;
 }
 
+.fab-wrapper .fab-action.disabled{
+    pointer-events: none;
+    cursor: default;
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
 .fab-wrapper.fab-expand .fab-action {
   margin-bottom: 1rem;
   opacity: 1;
@@ -385,3 +407,8 @@ time {
   white-space: nowrap;
   content: attr(data-label);
 }
+
+.fab-wrapper.left-bottom .fab-action:before{
+    right: auto;
+    left: 4rem;
+}

public/js/script.js

@@ -4,24 +4,29 @@ var sort_type = 'alphabetic';
 var multi_selection_enabled = false;
 var selected = [];
 var items = [];
+var default_parameters = defaultParameters();
 
 $.fn.fab = function (options) {
   var menu = this;
-  menu.addClass('fab-wrapper');
+  menu.addClass('fab-wrapper '+options.wrapper.position);
 
   var toggler = $('<a>')
     .addClass('fab-button fab-toggle')
-    .append($('<i>').addClass('fas fa-plus'))
+    .append($('<i>')
+    .addClass(options.wrapper.icon)
+    .addClass(options.wrapper.animation))
     .click(function () {
       menu.toggleClass('fab-expand');
     });
 
   menu.append(toggler);
 
   options.buttons.forEach(function (button) {
+    console.log(typeof button.disabled)
     toggler.before(
-      $('<a>').addClass('fab-button fab-action')
+      $('<a>').addClass(`fab-button fab-action${button.disabled == true ? ' disabled' : ''}`)
         .attr('data-label', button.label)
+        .attr('href', button.attrs.href)
         .attr('id', button.attrs.id)
         .append($('<i>').addClass(button.icon))
         .click(function () {
@@ -32,7 +37,13 @@ $.fn.fab = function (options) {
 };
 
 $(document).ready(function () {
+
   $('#fab').fab({
+    wrapper: {
+        icon: 'fas fa-plus',
+        position: 'right-bottom',
+        animation: 'rotate'
+    },
     buttons: [
       {
         icon: 'fas fa-upload',
@@ -47,6 +58,28 @@ $(document).ready(function () {
     ]
   });
 
+  $('#type-select').fab({
+    wrapper: {
+        icon: 'fas fa-filter',
+        position: 'left-bottom',
+        animation: 'scale'
+    },
+    buttons: [
+      {
+        icon: 'fas fa-image',
+        label: lang['nav-type-image'],
+        attrs: {href: '?type=image'},
+        disabled: default_parameters.type === 'image' ? true : false
+      },
+      {
+        icon: 'fas fa-file',
+        label: lang['nav-type-file'],
+        attrs: {href: '?type=file'},
+        disabled: default_parameters.type === 'file' ? true : false
+      }
+    ]
+  });
+
   actions.reverse().forEach(function (action) {
     $('#nav-buttons > ul').prepend(
       $('<li>').addClass('nav-item').append(

src/lang/az/lfm.php

@@ -9,6 +9,8 @@
     'nav-sort'          => 'Sırala',
     'nav-sort-alphabetic'=> 'A-Z Sırala',
     'nav-sort-time'     => 'Zamana Görə Sırala',
+    'nav-type-image'     => 'şəkillər',
+    'nav-type-file'     => 'Qovluqlar',
 
     'menu-rename'       => 'Ad dəyişmək',
     'menu-delete'       => 'Sil',

src/lang/en/lfm.php

@@ -9,6 +9,8 @@
     'nav-sort'          => 'Sort',
     'nav-sort-alphabetic'=> 'Sort By Alphabets',
     'nav-sort-time'     => 'Sort By Time',
+    'nav-type-image'     => 'Images',
+    'nav-type-file'     => 'Files',
 
     'menu-rename'       => 'Rename',
     'menu-delete'       => 'Delete',

src/lang/tr/lfm.php

@@ -9,6 +9,8 @@
     'nav-sort'          => 'Sırala',
     'nav-sort-alphabetic'=> 'A-Z Sırala',
     'nav-sort-time'     => 'Zamana Göre Sırala',
+    'nav-type-image'     => 'Resimler',
+    'nav-type-file'     => 'Dosyalar',
 
     'menu-rename'       => 'Ad değiştir',
     'menu-delete'       => 'Sil',

src/views/index.blade.php

@@ -105,6 +105,7 @@
     </div>
 
     <div id="fab"></div>
+    <div id="type-select"></div>
   </div>
 
   <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">