Версия 1.0.2

Quantum-Manager · Jun 1, 2019 · 27094bb · 27094bb
1 parent 978debb
commit 27094bb
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 34 deletions.
diff --git a/administrator/components/com_quantummanager/language/en-GB/en-GB.com_quantummanager.ini b/administrator/components/com_quantummanager/language/en-GB/en-GB.com_quantummanager.ini
@@ -50,6 +50,7 @@ COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_BUTTON_TABLE="Table"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_BUTTON_GRID="Grid"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_DIRECTORY_NAME="Enter the directory name"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_CHANGE_GRID_VIEWS="Click again to switch the grid to another"
+COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_FILTER_NAME="Search by name"
 
 COM_QUANTUMMANAGER_FIELDS_QUANTUMTREECATALOGS_CONFIRM_DELETE="Delete folder?"
 

diff --git a/administrator/components/com_quantummanager/language/en-GB/en-GB.com_quantummanager.sys.ini b/administrator/components/com_quantummanager/language/en-GB/en-GB.com_quantummanager.sys.ini
@@ -50,6 +50,7 @@ COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_BUTTON_TABLE="Table"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_BUTTON_GRID="Grid"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_DIRECTORY_NAME="Enter the directory name"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_CHANGE_GRID_VIEWS="Click again to switch the grid to another"
+COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_FILTER_NAME="Search by name"
 
 COM_QUANTUMMANAGER_FIELDS_QUANTUMTREECATALOGS_CONFIRM_DELETE="Delete folder?"
 

diff --git a/administrator/components/com_quantummanager/language/ru-RU/ru-RU.com_quantummanager.ini b/administrator/components/com_quantummanager/language/ru-RU/ru-RU.com_quantummanager.ini
@@ -50,6 +50,7 @@ COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_BUTTON_TABLE="Таблицей"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_BUTTON_GRID="Сеткой"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_DIRECTORY_NAME="Введите название директории"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_CHANGE_GRID_VIEWS="Нажмите еще раз, чтобы переключить сетку на другую"
+COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_FILTER_NAME="Поиск по названию"
 
 COM_QUANTUMMANAGER_FIELDS_QUANTUMTREECATALOGS_CONFIRM_DELETE="Удалить папку?"
 

diff --git a/administrator/components/com_quantummanager/language/ru-RU/ru-RU.com_quantummanager.sys.ini b/administrator/components/com_quantummanager/language/ru-RU/ru-RU.com_quantummanager.sys.ini
@@ -51,6 +51,7 @@ COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_BUTTON_TABLE="Таблицей"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_BUTTON_GRID="Сеткой"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_DIRECTORY_NAME="Введите название директории"
 COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_CHANGE_GRID_VIEWS="Нажмите еще раз, чтобы переключить сетку на другую"
+COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_FILTER_NAME="Поиск по названию"
 
 COM_QUANTUMMANAGER_FIELDS_QUANTUMTREECATALOGS_CONFIRM_DELETE="Удалить папку?"
 

diff --git a/administrator/components/com_quantummanager/layouts/fields/quantumviewfiles.php b/administrator/components/com_quantummanager/layouts/fields/quantumviewfiles.php
@@ -11,13 +11,16 @@
 defined('JPATH_PLATFORM') or die;
 use Joomla\CMS\Language\Text;
 extract($displayData);
+$id = rand(111111, 999999);
 ?>
 
 <div class="quantummanager-module quantumviewfiles-module" data-type="Quantumviewfiles" data-options="directory:<?php echo $displayData['directory'] ?>;onlyfiles:<?php echo $displayData['onlyfiles'] ?> ">
     <div class="breadcumbs"></div>
     <div class="filters">
-        <div>
-            <input type="text" name="search">
+        <div class="filter-search">
+            <label for="filter-search-<?php echo $id ?>" class="uk-form-icon uk-icon" href="#" uk-icon="icon: pencil">
+                <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>            </label>
+            <input id="filter-search-<?php echo $id ?>" type="text" name="search" placeholder="<?php echo Text::_('COM_QUANTUMMANAGER_FIELDS_QUANTUMVIEWFILES_FILTER_NAME'); ?>">
         </div>
     </div>
     <div class="view"></div>

diff --git a/changelog.md b/changelog.md
@@ -2,7 +2,8 @@
 - картинки переведены на lazyload
 - если нет превью для картинок, то при загрузке они сгенерируются на лету в lazyoad
 - добавлена файлам метаинформация
-- добавлена поиск по имени для файлов и каталогов текущей директории 
+- добавлен поиск по имени для файлов и каталогов текущей директории 
+- Немного доработана сетка просмотра файлов и каталогов (высота меняется от кол-во колонок)
 - в cropperJS модуле убран выход за пределы изображения
 - в cropperJS модуле добавлен тултип, который позволяет понять какие размеры у изображений
 - в cropperJS модуле удалена вертикальная прокрутка
diff --git a/components/com_quantummanager/views/index.html b/components/com_quantummanager/views/index.html
diff --git a/media/com_quantummanager/css/quantumviewfiles.css b/media/com_quantummanager/css/quantumviewfiles.css
@@ -17,6 +17,7 @@
 }
 .quantumviewfiles-module .filters {
     display: flex;
+    margin-top: 8px;
     margin-bottom: 8px;
     width: 100%;
     height: auto;
@@ -32,11 +33,51 @@
 .quantumviewfiles-module .filters > div:last-child {
     margin-right: 0;
 }
-.quantumviewfiles-module .filters > div input {
+.quantumviewfiles-module .filters .filter-search {
+    display: inline-block;
+    position: relative;
+    max-width: 100%;
+    vertical-align: middle;
+}
+.quantumviewfiles-module .filters .filter-search .uk-form-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 25px;
+    height: 28px;
+    margin: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: #999;
+}
+.quantumviewfiles-module .filters .filter-search .uk-icon>* {
+    transform: translate(0, 0);
+}
+.quantumviewfiles-module .filters .filter-search svg {
+    max-width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+}
+.quantumviewfiles-module .filters .filter-search input {
+    padding: 0 10px;
+    padding-left: 25px;
+    height: 25px;
     margin: 0;
-    height: 14px;
-    line-height: 14px;
     width: 200px;
+    vertical-align: middle;
+    display: inline-block;
+    max-width: 100%;
+    background: #fff;
+    color: #666;
+    border: 1px solid #e5e5e5;
+    transition: .2s ease-in-out;
+    transition-property: color,background-color,border;
+}
+
 }
 .quantumviewfiles-module .breadcumbs {
     margin-top: 0;

diff --git a/media/com_quantummanager/js/quantumcropperjs.js b/media/com_quantummanager/js/quantumcropperjs.js
@@ -9,12 +9,30 @@
 
 window.Quantumcropperjs = function(Filemanager, QuantumCropperjsElement, options) {
 
+    let self = this;
     this.options = options;
     this.cropperjs = '';
     this.buttons = '';
     this.pathFile = '';
     this.file = '';
     this.nameFile = '';
+    this.ImageWidthValue = QuantumCropperjsElement.querySelector('.image-width-value');
+    this.ImageHeightValue = QuantumCropperjsElement.querySelector('.image-height-value');
+    this.CropWidthValue = QuantumCropperjsElement.querySelector('.crop-width-value');
+    this.CropHeightValue = QuantumCropperjsElement.querySelector('.crop-height-value');
+    this.defaultCropperJSOptions =  {
+        responsive: false,
+        viewMode: 1,
+        background: true,
+        ready: function(event) {
+            self.ImageWidthValue.innerHTML = Math.round(this.width) + ' px';
+            self.ImageHeightValue.innerHTML = Math.round(this.height) + ' px';
+        },
+        crop: function(event) {
+            self.CropWidthValue.innerHTML = Math.round(event.detail.width) + ' px';
+            self.CropHeightValue.innerHTML = Math.round(event.detail.height) + ' px';
+        }
+    };
 
     this.init = function () {
         let self = this;
@@ -26,10 +44,6 @@ window.Quantumcropperjs = function(Filemanager, QuantumCropperjsElement, options
             let fileSource;
             let exs;
             let name;
-            let ImageWidthValue = QuantumCropperjsElement.querySelector('.image-width-value');
-            let ImageHeightValue = QuantumCropperjsElement.querySelector('.image-height-value');
-            let CropWidthValue = QuantumCropperjsElement.querySelector('.crop-width-value');
-            let CropHeightValue = QuantumCropperjsElement.querySelector('.crop-height-value');
 
             if(self.file === '') {
                 fileSource = self.nameFile;
@@ -49,21 +63,7 @@ window.Quantumcropperjs = function(Filemanager, QuantumCropperjsElement, options
             image.setAttribute('src', '/' + Filemanager.data.path + '/' + fileSource + '?' + QuantumUtils.randomInteger(111111, 999999));
             editor.innerHTML = '';
             editor.append(image);
-            self.cropperjs = new Cropper(
-                image,
-                {
-                    responsive: false,
-                    viewMode: 1,
-                    background: true,
-                    ready: function(event) {
-                        ImageWidthValue.innerHTML = Math.round(this.width) + ' px';
-                        ImageHeightValue.innerHTML = Math.round(this.height) + ' px';
-                    },
-                    crop: function(event) {
-                        CropWidthValue.innerHTML = Math.round(event.detail.width) + ' px';
-                        CropHeightValue.innerHTML = Math.round(event.detail.height) + ' px';
-                    }
-            });
+            self.cropperjs = new Cropper(image, self.defaultCropperJSOptions);
             QuantumCropperjsElement.classList.add('active');
             QuantumCropperjsElement.querySelector('.quantumcropperjs-name-file').value = name;
             QuantumCropperjsElement.querySelector('.quantumcropperjs-name-exs').value = exs;
@@ -233,8 +233,6 @@ window.Quantumcropperjs = function(Filemanager, QuantumCropperjsElement, options
             let isRadio;
             let image = QuantumCropperjsElement.querySelector('.editor img');
 
-            console.log(self);
-
             if (!self.cropperjs) {
                 return;
             }
@@ -246,21 +244,19 @@ window.Quantumcropperjs = function(Filemanager, QuantumCropperjsElement, options
             isCheckbox = target.type === 'checkbox';
             isRadio = target.type === 'radio';
 
+            options = self.defaultCropperJSOptions;
+
             if (isCheckbox || isRadio) {
                 if (isCheckbox) {
                     options[target.name] = target.checked;
                     cropBoxData = cropper.getCropBoxData();
                     canvasData = cropper.getCanvasData();
 
                     options.ready = function () {
-                        console.log('ready');
                         cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
                     };
                 } else {
                     options[target.name] = target.value;
-                    options.ready = function () {
-                        console.log('ready');
-                    };
                 }
                 self.cropperjs.destroy();
                 self.cropperjs = new Cropper(image, options);

diff --git a/media/com_quantummanager/js/quantumviewfiles.js b/media/com_quantummanager/js/quantumviewfiles.js
@@ -587,19 +587,20 @@ window.Quantumviewfiles = function(Filemanager, ViewfilesElement, options) {
         }
 
         if(find) {
-            if(fm.Quantumtoolbar !== undefined) {
+            if(fm.Quantumtoolbar !== undefined && fm.Quantumtoolbar.buttonsList['viewfilesDelete'] !== undefined) {
                 fm.Quantumtoolbar.buttonsList['viewfilesDelete'].classList.remove('btn-hide');
             }
         } else {
-            if(fm.Quantumtoolbar !== undefined) {
+            if(fm.Quantumtoolbar !== undefined && fm.Quantumtoolbar.buttonsList['viewfilesDelete'] !== undefined) {
                 fm.Quantumtoolbar.buttonsList['viewfilesDelete'].classList.add('btn-hide');
             }
         }
     });
 
     Filemanager.events.add(this, 'updatePath', function (fm, el) {
         //вырубаем кнопки для выделенного
-        if(fm.Quantumtoolbar !== undefined) {
+
+        if(fm.Quantumtoolbar !== undefined && fm.Quantumtoolbar.buttonsList['viewfilesDelete'] !== undefined) {
             fm.Quantumtoolbar.buttonsList['viewfilesDelete'].classList.add('btn-hide');
         }