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 index 50a7858..b86fb9d 100644 --- 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,7 +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_QUANTUMVIEWFILES_FILTER_NAME="Filter by name" COM_QUANTUMMANAGER_FIELDS_QUANTUMTREECATALOGS_CONFIRM_DELETE="Delete folder?" @@ -72,10 +72,14 @@ COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_CLEAR="Clear" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_DISABLE="Block" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_ENABLE="Unlock" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_FREE="Free mode" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_WIDTH="w" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_HEIGHT="h" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_WIDTH="Width" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_HEIGHT="Height" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_IMAGE="Image" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_CROP="Crop" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_SAVEAREA="Saving" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_FILE="File name" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_RATIO="Proportions" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_SAVE_RATIO="Save proportions" COM_QUANTUMMANAGER_HELP_QUESTIONS="Any questions?" COM_QUANTUMMANAGER_HELP_QUESTIONS_CREATE="Ask" 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 index 26f1232..dd5ea61 100644 --- 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,7 +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_QUANTUMVIEWFILES_FILTER_NAME="Filter by name" COM_QUANTUMMANAGER_FIELDS_QUANTUMTREECATALOGS_CONFIRM_DELETE="Delete folder?" @@ -72,10 +72,14 @@ COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_CLEAR="Clear" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_DISABLE="Block" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_ENABLE="Unlock" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_FREE="Free mode" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_WIDTH="w" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_HEIGHT="h" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_WIDTH="Width" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_HEIGHT="Height" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_IMAGE="Image" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_CROP="Crop" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_SAVEAREA="Saving" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_FILE="File name" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_RATIO="Proportions" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_SAVE_RATIO="Save proportions" COM_QUANTUMMANAGER_WRONG_JOOMLA="You need at least Joomla 3.8.1." COM_QUANTUMMANAGER_WRONG_PHP="You need PHP version at least 5.6" 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 index daa1f12..b317b09 100644 --- 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,7 +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_QUANTUMVIEWFILES_FILTER_NAME="Фильтр по названию" COM_QUANTUMMANAGER_FIELDS_QUANTUMTREECATALOGS_CONFIRM_DELETE="Удалить папку?" @@ -61,7 +61,7 @@ COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_MOVE_LEFT="Перемещать вл COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_MOVE_RIGHT="Перемещать влево" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_MOVE_UP="Перемещать вверх" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_MOVE_DOWN="Перемещать вниз" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_CROP="Кроп" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_CROP="Область обрезки" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_ZOOM_IN="Приблизить" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_ZOOM_OUT="Отдалить" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_ROTATE_LEFT="Повернуть влево" @@ -72,10 +72,14 @@ COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_CLEAR="Очистить" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_DISABLE="Заблокировать" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_ENABLE="Разблокировать" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_FREE="Свободный режим" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_WIDTH="ш" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_HEIGHT="в" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_IMAGE="Изображение" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_CROP="Кроп" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_WIDTH="Ширина" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_HEIGHT="Высота" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_IMAGE="Размер изображения" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_CROP="Область обрезки" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_SAVEAREA="Сохранение" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_FILE="Название файла" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_RATIO="Пропорции" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_SAVE_RATIO="Сохранять пропорции" COM_QUANTUMMANAGER_HELP_QUESTIONS="Есть вопросы?" COM_QUANTUMMANAGER_HELP_QUESTIONS_CREATE="Спросить" 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 index 5b8039b..ed6a50b 100644 --- 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,7 +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_QUANTUMVIEWFILES_FILTER_NAME="Фильтр по названию" COM_QUANTUMMANAGER_FIELDS_QUANTUMTREECATALOGS_CONFIRM_DELETE="Удалить папку?" @@ -62,7 +62,7 @@ COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_MOVE_LEFT="Перемещать вл COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_MOVE_RIGHT="Перемещать влево" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_MOVE_UP="Перемещать вверх" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_MOVE_DOWN="Перемещать вниз" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_CROP="Кроп" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_CROP="Область обрезки" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_ZOOM_IN="Приблизить" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_ZOOM_OUT="Отдалить" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_ROTATE_LEFT="Повернуть влево" @@ -73,10 +73,14 @@ COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_CLEAR="Очистить" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_DISABLE="Заблокировать" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_ENABLE="Разблокировать" COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_FREE="Свободный режим" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_WIDTH="ш" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_HEIGHT="в" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_IMAGE="Изображение" -COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_CROP="Кроп" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_WIDTH="Ширина" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_HEIGHT="Высота" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_IMAGE="Размер изображения" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_TOOLTIP_CROP="Область обрезки" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_SAVEAREA="Сохранение" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_FILE="Название файла" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_RATIO="Пропорции" +COM_QUANTUMMANAGER_FIELDS_QUANTUMCROPPERJS_LABEL_SAVE_RATIO="Сохранять пропорции" COM_QUANTUMMANAGER_WRONG_JOOMLA="Ваша версия Joomla слишком старая. Quantum Manager будет работать только на Joomla с версии 3.8.1." COM_QUANTUMMANAGER_WRONG_PHP="Нужна версия PHP не ниже 5.6" diff --git a/administrator/components/com_quantummanager/layouts/fields/quantumcropperjs.php b/administrator/components/com_quantummanager/layouts/fields/quantumcropperjs.php index 733b5b3..67bb860 100644 --- a/administrator/components/com_quantummanager/layouts/fields/quantumcropperjs.php +++ b/administrator/components/com_quantummanager/layouts/fields/quantumcropperjs.php @@ -16,187 +16,131 @@ ?>
+
+
+
-
-
- - +
+ +
+ + + + +
+ +
+
+ + +
+
+ -
-
- - - - - +
+ +
+ + PX
-
-
-
-
-
- - - - - - + +
+ +
+ + PX
-
-
-
-
-
- : - - : - +
+ + +
+ +
+ + PX +
+
+ +
+ +
+ + PX +
+
+ +
-
-
- : - - : - +
+ +
-
-
-
- - -
+
+
+
+
-
- - + -
- -
- - - - -
+ +
-
- - + -
+ +
-
- - + -
+ +
-
- -
- -
\ No newline at end of file diff --git a/administrator/components/com_quantummanager/layouts/fields/quantumviewfiles.php b/administrator/components/com_quantummanager/layouts/fields/quantumviewfiles.php index f40afa1..9b2cb2d 100644 --- a/administrator/components/com_quantummanager/layouts/fields/quantumviewfiles.php +++ b/administrator/components/com_quantummanager/layouts/fields/quantumviewfiles.php @@ -15,14 +15,15 @@ ?>
-
-
+
+
+
diff --git a/changelog.md b/changelog.md index f7e99ee..3ae2f9f 100644 --- a/changelog.md +++ b/changelog.md @@ -4,6 +4,6 @@ - добавлена файлам метаинформация - добавлен поиск по имени для файлов и каталогов текущей директории - Немного доработана сетка просмотра файлов и каталогов (высота меняется от кол-во колонок) +- переработан модуль cropperjs - в cropperJS модуле убран выход за пределы изображения -- в cropperJS модуле добавлен тултип, который позволяет понять какие размеры у изображений - в cropperJS модуле удалена вертикальная прокрутка \ No newline at end of file diff --git a/media/com_quantummanager/css/main.css b/media/com_quantummanager/css/main.css index d486f62..996e6db 100644 --- a/media/com_quantummanager/css/main.css +++ b/media/com_quantummanager/css/main.css @@ -300,6 +300,166 @@ } +/****************************** Loader ********************************/ + +.quantummanager .loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 400px; + height: 100px; + text-transform: uppercase; + line-height: 100px; + text-align: center; + color: #444444; + font-size: 50px; + letter-spacing: 10px; + overflow: hidden + +} +.quantummanager .loader span { + position: absolute; + background: #444444; +} +.quantummanager .loader span:nth-child(1) { + width: 100%; + height: 4px; + top: 0; + left: -100%; + animation: animate1 2s linear infinite; +} + +.quantummanager .loader span:nth-child(3) { + width: 100%; + height: 4px; + bottom: 0; + right: -100%; + animation: animate3 2s linear infinite; +} + +.quantummanager .loader span:nth-child(2) { + width: 4px; + height: 100%; + right: 0; + top: -100%; + animation: animate2 2s linear infinite; +} +.quantummanager .loader span:nth-child(4) { + width: 4px; + height: 100%; + left: 0; + bottom: -100%; + animation: animate4 2s linear infinite; +} +@keyframes animate1 { + 0% + { + left: -100%; + } + 20% + { + left: 0; + } + 40% + { + left: 100%; + } + 60% + { + left: 100%; + } + 80% + { + left: 100%; + } + 100% + { + left: 100%; + } +} + +@keyframes animate2 { + 0% + { + top: -100%; + } + 20% + { + top: -100%; + } + 40% + { + top: 0%; + } + 60% + { + top: 100%; + } + 80% + { + top: 100%; + } + 100% + { + top: 100%; + } +} + + +@keyframes animate3 { + 0% + { + right: -100%; + } + 20% + { + right: -100%; + } + 40% + { + right: -100%; + } + 60% + { + right: 0; + } + 80% + { + right: 100%; + } + 100% + { + right: 100%; + } +} +@keyframes animate4 { + 0% + { + bottom: -100%; + } + 20% + { + bottom: -100%; + } + 40% + { + bottom: -100%; + } + 60% + { + bottom: -100%; + } + 80% + { + bottom: 0%; + } + 100% + { + bottom: 100%; + } +} + @media screen and (max-width: 800px) { .quantummanager .quantummanager-container .quantummanager-left .quantummanager-left-toggle { display: flex; diff --git a/media/com_quantummanager/css/quantumcropperjs.css b/media/com_quantummanager/css/quantumcropperjs.css index a027987..5ccc92f 100644 --- a/media/com_quantummanager/css/quantumcropperjs.css +++ b/media/com_quantummanager/css/quantumcropperjs.css @@ -23,28 +23,46 @@ user-select: none; } .quantumcropperjs-module.active { - display: block; + display: flex; +} +.quantumcropperjs-module .cropper-save { + display: none; + background: rgba(255,255,255,0.7); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 2; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.quantumcropperjs-module .cropper-save .loader { + width: 480px; } .quantumcropperjs-module .toolbar { - display: flex; - align-items: center; - padding: 0 10px; - height: 10%; - background: #fbfbfb; + display: block; + position: relative; + padding: 25px; + width: 15%; + min-width: 290px; + height: calc(100% - 50px); + background: #444; } .quantumcropperjs-module .toolbar > div { display: flex; align-items: center; + flex-wrap: wrap; } .quantumcropperjs-module .toolbar > div:first-child .quantummanager-icon { margin-right: 4px; width: 12px; height: 12px; } -.quantumcropperjs-module .toolbar > div:last-child { - margin-left: auto; - justify-content: flex-end; -} .quantumcropperjs-module .toolbar .btn-primary { background: #4568DC; background: -webkit-linear-gradient(to right, #B06AB3, #4568DC); @@ -76,9 +94,10 @@ .quantumcropperjs-module .toolbar .btn { display: flex; align-items: center; - padding: 0 10px; + padding: 10px 20px; line-height: 0; - height: 30px; + height: 37px; + font-size: 15px; } .quantumcropperjs-module .toolbar .buttons-methods { margin-right: 5px; @@ -95,26 +114,29 @@ .quantumcropperjs-module .name-file-wrap { display: flex; align-items: center; - justify-content: space-between; - margin-left: 15px; - height: 100%; + justify-content: stretch; +} +.quantumcropperjs-module .name-file-wrap label { + width: 100%; + color: #fff; } .quantumcropperjs-module .name-file-wrap .input-wrapper { - /*height: 20px; - margin: 0; - border-radius: 3px 0 0 3px;*/ position: relative; + display: flex; + width: calc(100% - 70px); } .quantumcropperjs-module .name-file-wrap .input-wrapper input { - width: 15em; + width: 100%; + flex: 1; margin: 0; height: 19px; font-size: inherit; font-family: inherit; - background-color: #ffffff; + background-color: #333; + color: #fff; padding: 0.35em 0.45em; border-radius: 3px 0 0 3px; - border: 1px solid #ccc; + border: 1px solid #333; transition: background-color 0.3s ease-in-out; } .quantumcropperjs-module .name-file-wrap .input-wrapper input:focus { @@ -178,20 +200,105 @@ width: 70px; height: 30px; margin: 0; - border-left: 0; border-radius: 0 3px 3px 0; - background: #f3f3f3; + background: #2b2b2b; + color: #ffffff; + border: 1px solid #2b2b2b; + border-left: 0; font-weight: bold; } +.quantumcropperjs-module .change-ratio-wrap { + margin-top: 25px; +} +.quantumcropperjs-module .change-ratio-wrap label { + width: 100%; + color: #fff; +} +.quantumcropperjs-module .change-ratio-wrap .change-ratio { + width: 100%; + margin: 0; + background-color: #333; + color: #fff; + border: 1px solid #333; +} +.quantumcropperjs-module .input-width-height-wrap { + justify-content: space-between; + margin-top: 25px; +} +.quantumcropperjs-module .input-width-height-wrap > label { + width: 100%; + color: #cbcbcb; +} +.quantumcropperjs-module .input-width-height-wrap > div { + width: 48%; +} +.quantumcropperjs-module .input-width-height-wrap > div label { + color: #fff; +} +.quantumcropperjs-module .input-width-height-wrap > div > div { + display: flex; + justify-content: space-between; + align-items: center; +} +.quantumcropperjs-module .input-width-height-wrap input[type='text'], +.quantumcropperjs-module .input-width-height-wrap input[type='number'] { + width: 70%; + margin: 0; + background-color: #333; + border: 1px solid #333; + color: #fff; +} +.quantumcropperjs-module .input-width-height-wrap span { + color: #ffffff; + text-transform: uppercase; + width: 13%; +} +.quantumcropperjs-module .input-width-height-wrap .image-width-height-ratio-checkbox { + margin-top: 13px; + color: #fff; + display: flex; + align-items: center; +} +.quantumcropperjs-module .input-width-height-wrap .image-width-height-ratio-checkbox input { + margin: 0; + margin-right: 5px; +} +.quantumcropperjs-module .button-wrap { + margin-top: 35px; + justify-content: center; +} +.quantumcropperjs-module .button-wrap .btn-save { + background: #4568DC; + color: #fff; + background: -webkit-linear-gradient(to right, #B06AB3, #4568DC); + background: linear-gradient(to right, #B06AB3, #4568DC); + border: none; +} +.quantumcropperjs-module .button-wrap .btn-close { + background: #333; + color: #fff; + border: none; +} .quantumcropperjs-module .editor { + position: relative; + margin: auto; + height: 100%; + flex: 1; +} +.quantumcropperjs-module .editor .cropperjs { + position: relative; margin: auto; - height: 90%; + height: 100%; } .quantumcropperjs-module .toolbar-sizes { position: absolute; - bottom: 10px; - left: 10px; - width: auto; + display: block !important; + bottom: 15px; + width: 65%; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; padding: 10px; border-radius: 5px; background: #4568DC; @@ -202,7 +309,8 @@ } .quantumcropperjs-module .toolbar-sizes > div { display: flex; - justify-content: space-around; + width: 100%; + justify-content: center; text-transform: uppercase; font-size: 10px; line-height: 12px; @@ -224,4 +332,11 @@ } .quantumcropperjs-module .toolbar-footer > div .btn { background: rgba(243, 243, 243, .85); +} + +@media screen and (max-width: 800px) { + .quantumcropperjs-module .toolbar { + width: 30%; + min-width: 230px; + } } \ No newline at end of file diff --git a/media/com_quantummanager/css/quantumviewfiles.css b/media/com_quantummanager/css/quantumviewfiles.css index fadda83..dbe3d39 100644 --- a/media/com_quantummanager/css/quantumviewfiles.css +++ b/media/com_quantummanager/css/quantumviewfiles.css @@ -15,6 +15,11 @@ flex-direction: column; flex: 1 1 auto; } +.quantumviewfiles-module .quantumviewfiles-module-heading { + display: flex; + margin-top: 5px; + margin-bottom: 10px; +} .quantumviewfiles-module .filters { display: flex; margin-top: 8px; @@ -33,13 +38,13 @@ .quantumviewfiles-module .filters > div:last-child { margin-right: 0; } -.quantumviewfiles-module .filters .filter-search { +.quantumviewfiles-module .filter-search { display: inline-block; position: relative; max-width: 100%; vertical-align: middle; } -.quantumviewfiles-module .filters .filter-search .uk-form-icon { +.quantumviewfiles-module .filter-search .uk-form-icon { position: absolute; top: 0; bottom: 0; @@ -52,17 +57,17 @@ align-items: center; color: #999; } -.quantumviewfiles-module .filters .filter-search .uk-icon>* { +.quantumviewfiles-module .filter-search .uk-icon>* { transform: translate(0, 0); } -.quantumviewfiles-module .filters .filter-search svg { +.quantumviewfiles-module .filter-search svg { max-width: 100%; height: auto; box-sizing: border-box; width: 16px; height: 16px; } -.quantumviewfiles-module .filters .filter-search input { +.quantumviewfiles-module .filter-search input { padding: 0 10px; padding-left: 25px; height: 25px; @@ -77,11 +82,8 @@ transition: .2s ease-in-out; transition-property: color,background-color,border; } - -} .quantumviewfiles-module .breadcumbs { margin-top: 0; - margin-bottom: 10px; width: 100%; height: auto; } @@ -502,163 +504,4 @@ } .quantumviewfiles-module .field-list-files .list-table > div:last-child { border-bottom: none; -} - -.quantumviewfiles-module .loader { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 400px; - height: 100px; - text-transform: uppercase; - line-height: 100px; - text-align: center; - color: #444444; - font-size: 50px; - letter-spacing: 10px; - overflow: hidden - -} -.quantumviewfiles-module .loader span { - position: absolute; - background: #444444; -} -.quantumviewfiles-module .loader span:nth-child(1) { - width: 100%; - height: 4px; - top: 0; - left: -100%; - animation: animate1 2s linear infinite; -} - -.quantumviewfiles-module .loader span:nth-child(3) { - width: 100%; - height: 4px; - bottom: 0; - right: -100%; - animation: animate3 2s linear infinite; -} - -.quantumviewfiles-module .loader span:nth-child(2) { - width: 4px; - height: 100%; - right: 0; - top: -100%; - animation: animate2 2s linear infinite; -} -.quantumviewfiles-module .loader span:nth-child(4) { - width: 4px; - height: 100%; - left: 0; - bottom: -100%; - animation: animate4 2s linear infinite; -} -@keyframes animate1 { - 0% - { - left: -100%; - } - 20% - { - left: 0; - } - 40% - { - left: 100%; - } - 60% - { - left: 100%; - } - 80% - { - left: 100%; - } - 100% - { - left: 100%; - } -} - -@keyframes animate2 { - 0% - { - top: -100%; - } - 20% - { - top: -100%; - } - 40% - { - top: 0%; - } - 60% - { - top: 100%; - } - 80% - { - top: 100%; - } - 100% - { - top: 100%; - } -} - - -@keyframes animate3 { - 0% - { - right: -100%; - } - 20% - { - right: -100%; - } - 40% - { - right: -100%; - } - 60% - { - right: 0; - } - 80% - { - right: 100%; - } - 100% - { - right: 100%; - } -} -@keyframes animate4 { - 0% - { - bottom: -100%; - } - 20% - { - bottom: -100%; - } - 40% - { - bottom: -100%; - } - 60% - { - bottom: -100%; - } - 80% - { - bottom: 0%; - } - 100% - { - bottom: 100%; - } -} - +} \ No newline at end of file diff --git a/media/com_quantummanager/js/modaleditor.js b/media/com_quantummanager/js/modaleditor.js index b34cbfa..e52b4dc 100644 --- a/media/com_quantummanager/js/modaleditor.js +++ b/media/com_quantummanager/js/modaleditor.js @@ -93,8 +93,9 @@ document.addEventListener('DOMContentLoaded', function () { if(check.checked) { pathFile = fm.data.path + '/' + name; - name.split('.').pop(); - altFile = name[0]; + name = name.split('.'); + name.pop(); + altFile = name.join('.'); fm.Quantumtoolbar.buttonsList['insertFileEditor'].classList.remove('btn-hide'); } else { fm.Quantumtoolbar.buttonsList['insertFileEditor'].classList.add('btn-hide'); diff --git a/media/com_quantummanager/js/quantumcropperjs.js b/media/com_quantummanager/js/quantumcropperjs.js index 2c067f4..d2233d8 100644 --- a/media/com_quantummanager/js/quantumcropperjs.js +++ b/media/com_quantummanager/js/quantumcropperjs.js @@ -16,31 +16,145 @@ window.Quantumcropperjs = function(Filemanager, QuantumCropperjsElement, options this.pathFile = ''; this.file = ''; this.nameFile = ''; + this.areaSave = QuantumCropperjsElement.querySelector('.cropper-save'); 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.canvasSource; + this.canvasSourceCtx; + this.image; + this.imageChange = document.createElement('img'); + this.checkImageResize = QuantumCropperjsElement.querySelector('.image-width-height-ratio'); + this.editorCropperJS = QuantumCropperjsElement.querySelector('.editor .cropperjs'); + this.currentImage; + this.changeCropperJS = function () { + let canvasData = self.cropperjs.getCanvasData(); + let canvasCropData = self.cropperjs.getCropBoxData(); + let widthContainer = self.editorCropperJS.offsetWidth; + let heightContainer = self.editorCropperJS.offsetHeight; + let canvasWidth = canvasData.width; + let canvasWidthCrop = canvasData.width; + let canvasHeightCrop = canvasData.height; + let canvasHeight = canvasData.height; + let resizeCanvas = false; + let scaleFactorCrop = self.defaultCropperJSOptions.aspectRatio; + + if(canvasWidth === undefined && canvasHeight === undefined) { + return; + } + + if(canvasWidth > self.currentImage.width) { + let scaleFactor = self.currentImage.width / canvasWidth; + canvasWidth = self.currentImage.width; + canvasHeight = canvasHeight * scaleFactor; + resizeCanvas = true; + } + + if(canvasHeight > self.currentImage.height) { + let scaleFactor = self.currentImage.height / canvasHeight; + canvasHeight = self.currentImage.width; + canvasWidth = canvasWidth * scaleFactor; + resizeCanvas = true; + } + + self.ImageWidthValue.value = Math.round(self.currentImage.width); + self.ImageHeightValue.value = Math.round(self.currentImage.height); + self.canvasSource = document.createElement('canvas'); + self.canvasSource.width = self.ImageWidthValue.value; + self.canvasSource.height = self.ImageHeightValue.value; + self.canvasSourceCtx = self.canvasSource.getContext('2d'); + self.canvasSourceCtx.drawImage(self.currentImage, 0, 0, self.canvasSource.width, self.canvasSource.height); + + if(resizeCanvas) { + let left = self.editorCropperJS.offsetWidth / 2 - canvasWidth / 2; + let top = self.editorCropperJS.offsetHeight / 2 - canvasHeight / 2; + canvasData.left = left; + canvasData.top = top; + canvasData.width = canvasWidth; + canvasData.height = canvasHeight; + canvasCropData.left = left; + canvasCropData.top = top; + canvasCropData.width = canvasWidth; + canvasCropData.height = canvasHeight; + self.cropperjs.setCropBoxData(canvasCropData); + self.cropperjs.setCanvasData(canvasData); + } + }; this.defaultCropperJSOptions = { responsive: false, viewMode: 1, background: true, + aspectRatio: NaN, + autoCropArea: 1, ready: function(event) { - self.ImageWidthValue.innerHTML = Math.round(this.width) + ' px'; - self.ImageHeightValue.innerHTML = Math.round(this.height) + ' px'; + self.changeCropperJS(); }, crop: function(event) { - self.CropWidthValue.innerHTML = Math.round(event.detail.width) + ' px'; - self.CropHeightValue.innerHTML = Math.round(event.detail.height) + ' px'; + console.log(event); + self.CropWidthValue.value = parseFloat(event.detail.width); + self.CropHeightValue.value = parseFloat(event.detail.height); + self.CropWidthValue.setAttribute('data-old', self.CropWidthValue.value); + self.CropHeightValue.setAttribute('data-old', self.CropHeightValue.value); } }; this.init = function () { let self = this; + self.areaSave.style.display = 'none'; + + self.ImageWidthValue.addEventListener('change', function () { + let editor = QuantumCropperjsElement.querySelector('.editor .cropperjs'); + let width = parseInt(this.value); + let height = self.ImageHeightValue.value; + let scaleFactor = 1; + this.value = width; + + if(self.checkImageResize.checked) { + scaleFactor = width / self.image.width; + height = self.image.height * scaleFactor; + } + + self.canvasSourceCtx.clearRect(0, 0, self.canvasSource.width, self.canvasSource.height); + self.canvasSource.width = width; + self.canvasSource.height = height; + self.canvasSourceCtx.drawImage(self.image, 0, 0, width, height); + self.imageChange.setAttribute('src', self.canvasSourceCtx.canvas.toDataURL()); + self.cropperjs.destroy(); + editor.innerHTML = ''; + self.currentImage = self.imageChange; + editor.appendChild(self.imageChange); + self.cropperjs = new Cropper(self.imageChange, self.defaultCropperJSOptions); + }); + self.ImageHeightValue.addEventListener('change', function () { + let editor = QuantumCropperjsElement.querySelector('.editor .cropperjs'); + let width = self.ImageWidthValue.value; + let height = parseInt(this.value); + let scaleFactor = 1; + this.value = width; + + if(self.checkImageResize.checked) { + scaleFactor = height / self.image.height; + width = self.image.width * scaleFactor; + } + + self.canvasSourceCtx.clearRect(0, 0, self.canvasSource.width, self.canvasSource.height); + self.canvasSource.width = width; + self.canvasSource.height = height; + self.canvasSourceCtx.drawImage(self.image, 0, 0, width, height); + self.imageChange.setAttribute('src', self.canvasSourceCtx.canvas.toDataURL()); + self.cropperjs.destroy(); + editor.innerHTML = ''; + self.currentImage = self.imageChange; + editor.appendChild(self.imageChange); + self.cropperjs = new Cropper(self.imageChange, self.defaultCropperJSOptions); + self.changeCropperJS(); + }); Filemanager.Quantumtoolbar.buttonAdd('cropperjsEdit', 'left', 'btn-edit btn-hide hidden-label', QuantumviewfilesLang.buttonEdit, 'quantummanager-icon-edit', {}, function (ev) { let image = document.createElement('img'); - let editor = QuantumCropperjsElement.querySelector('.editor'); + let editor = QuantumCropperjsElement.querySelector('.editor .cropperjs'); let fileSource; let exs; let name; @@ -61,7 +175,9 @@ window.Quantumcropperjs = function(Filemanager, QuantumCropperjsElement, options } image.setAttribute('src', '/' + Filemanager.data.path + '/' + fileSource + '?' + QuantumUtils.randomInteger(111111, 999999)); + self.image = image; editor.innerHTML = ''; + self.currentImage = image; editor.append(image); self.cropperjs = new Cropper(image, self.defaultCropperJSOptions); QuantumCropperjsElement.classList.add('active'); @@ -78,6 +194,8 @@ window.Quantumcropperjs = function(Filemanager, QuantumCropperjsElement, options let result = self.cropperjs.getCroppedCanvas(); let blob = ''; + self.areaSave.style.display = 'block'; + if(exs === 'jpg' || exs === 'jpeg') { blob = result.toDataURL("image/jpeg", 1); } @@ -103,9 +221,11 @@ window.Quantumcropperjs = function(Filemanager, QuantumCropperjsElement, options Filemanager.events.trigger('reloadPaths', Filemanager); self.cropperjs.destroy(); QuantumCropperjsElement.classList.remove('active'); + self.areaSave.style.display = 'none'; }, function (response) { console.log('fail'); + self.areaSave.style.display = 'none'; } ); @@ -224,43 +344,15 @@ window.Quantumcropperjs = function(Filemanager, QuantumCropperjsElement, options } } }); - QuantumCropperjsElement.querySelector('.buttons-toggles').addEventListener('change', function (event) { - let e = event || window.event; - let target = e.target || e.srcElement; - let cropBoxData; - let canvasData; - let isCheckbox; - let isRadio; - let image = QuantumCropperjsElement.querySelector('.editor img'); + QuantumCropperjsElement.querySelector('.change-ratio').addEventListener('change', function (event) { if (!self.cropperjs) { return; } - if (target.tagName.toLowerCase() === 'label') { - target = target.querySelector('input'); - } - - 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 () { - cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData); - }; - } else { - options[target.name] = target.value; - } - self.cropperjs.destroy(); - self.cropperjs = new Cropper(image, options); - } + self.defaultCropperJSOptions.aspectRatio = parseFloat(this.value); + self.cropperjs.destroy(); + self.cropperjs = new Cropper(self.currentImage, self.defaultCropperJSOptions); }); }; diff --git a/media/com_quantummanager/js/quantumviewfiles.js b/media/com_quantummanager/js/quantumviewfiles.js index 0fed685..cfb0321 100644 --- a/media/com_quantummanager/js/quantumviewfiles.js +++ b/media/com_quantummanager/js/quantumviewfiles.js @@ -27,7 +27,7 @@ window.Quantumviewfiles = function(Filemanager, ViewfilesElement, options) { this.path = this.options.directory; this.initBreadcrumbs(); this.loadDirectory(); - let searchByName = ViewfilesElement.querySelector('.filters input'); + let searchByName = ViewfilesElement.querySelector('.filter-search input'); if(!parseInt(self.options.onlyfiles)) { @@ -653,6 +653,12 @@ window.Quantumviewfiles = function(Filemanager, ViewfilesElement, options) { }); Filemanager.events.add(this, 'reloadPaths', function (fm, el) { + + //запоминаем позицию прокрутки в директории + if(el.listFiles !== '' && el.listFiles !== null) { + el.bufferTopDirectories[el.path] = el.listFiles.scrollTop; + } + fm.Quantumviewfiles.initBreadcrumbs(fm.Quantumviewfiles.buildBreadcrumbs); fm.Quantumviewfiles.loadDirectory(fm.data.path); });