Skip to content

N
neuro-images
Commit 1e5c774d authored by Александр Чаплыгин's avatar Александр Чаплыгин
Browse files
Options

Группировка картинок при изменении кол-ва пар, логика расположения в 1-2 ряда.

parent 31a82cbb
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 28 deletions
src/public/css/common-styles.css
View file @ 1e5c774d
...@@ -271,6 +271,11 @@ footer { ...@@ -271,6 +271,11 @@ footer {
.l-header .header-nav a:hover { .l-header .header-nav a:hover {
color: #FDDC9A; color: #FDDC9A;
} }
.l-header .header-nav a.active {
color: #4EC9E5;
cursor: default;
}
select.form-control { select.form-control {
padding: 4px; padding: 4px;
......
src/public/css/styles-main.css
View file @ 1e5c774d
...@@ -23,12 +23,27 @@ ...@@ -23,12 +23,27 @@
.b-list_folders-item .b-list_folders-item
{ {
position: relative;
cursor: pointer; cursor: pointer;
} }
.b-list_folders-item.selected .b-list_folders-item b
{
position: absolute;
font-size: 12px;
line-height: 22px;
right: 0;
}
.b-list_folders-item.viewed
{
opacity: 0.45;
}
.b-list_folders-item.active
{ {
font-weight: bold; font-weight: bold;
opacity: 1;
} }
.b-preview .b-preview
...@@ -48,14 +63,21 @@ ...@@ -48,14 +63,21 @@
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #FFF; background-color: #FFF;
/*opacity: 0.5;*/
z-index: 9999; z-index: 9999;
} }
.b-foto { .b-foto {
padding: 4px; padding: 4px;
} }
.b-foto.order-1 {
flex-grow: 1;
transition: all 800ms ease;
}
.b-foto_inner { .b-foto_inner {
position: relative; position: relative;
height: 300px; height: 300px;
......
src/public/js/script-main.js
View file @ 1e5c774d
$(document).ready(function(){ $(document).ready(function(){
var var
$body = $('body'),
$foldersContentWrap = $('.b-preview'), $foldersContentWrap = $('.b-preview'),
$loading = $('.b-loading'), $loading = $('.b-loading'),
colorsActive = $foldersContentWrap.data('colors'), colorsActive = $foldersContentWrap.data('colors'),
...@@ -21,19 +22,24 @@ $(document).ready(function(){ ...@@ -21,19 +22,24 @@ $(document).ready(function(){
function MarkFolderSelected($folderName) function MarkFolderSelected($folderName)
{ {
$('.b-list_folders-item').removeClass('selected'); $('.b-list_folders-item').removeClass('active');
$folderName.addClass('selected'); $folderName.addClass('active');
}
function MarkFolderViewed($folderName)
{
$folderName.addClass('viewed');
} }
function RenderFilesList(folderName, data) function RenderFilesList(folderName, data)
{ {
// Добавляем содержимое папки: // Добавляем содержимое папки:
var templateFolderContent = _.template('' + var templateFolderContent = _.template('' +
'<div class="b-folder-content row" data-folder="<%= folder %>">' + '<div class="b-folder-content row active" data-folder="<%= folder %>">' +
' <% _.each(files, function(item) { %> \n' + ' <% _.each(files, function(item) { %> \n' +
' <div class="b-foto col-4" data-id="<%= item %>">' + ' <div class="b-foto col-<%= cols %> order-12" data-id="<%= item %>">' +
' <div class="b-foto_inner" style="background-image: url(/fotos/<%= folder %>/<%= item %>)" data-foto="<%= item %>" data-num="">' + ' <div class="b-foto_inner" style="background-image: url(/fotos/<%= folder %>/<%= item %>)" data-foto="<%= item %>" data-num="">' +
' <div class="b-foto_number">1</div>' + ' <div class="b-foto_number"></div>' +
' ' + ' ' +
' </div>' + ' </div>' +
' </div>' + ' </div>' +
...@@ -41,7 +47,29 @@ $(document).ready(function(){ ...@@ -41,7 +47,29 @@ $(document).ready(function(){
'</div>' '</div>'
); );
$foldersContentWrap.append(templateFolderContent({folder: folderName, files: data})); var cols;
switch (data.length) {
case 4:
cols = 6;
break;
case 5:
case 6:
cols = 4;
break;
case 7:
case 8:
cols = 3;
break;
case 9:
case 10:
cols = 2;
break;
default:
cols = 4;
}
$foldersContentWrap.append(templateFolderContent({folder: folderName, files: data, cols: cols}));
currentNumToSelect[folderName] = 1; currentNumToSelect[folderName] = 1;
hasSelectedFoto[folderName] = false; // Выбрали одну картинку (есть подсвеченное фото) hasSelectedFoto[folderName] = false; // Выбрали одну картинку (есть подсвеченное фото)
} }
...@@ -53,6 +81,16 @@ $(document).ready(function(){ ...@@ -53,6 +81,16 @@ $(document).ready(function(){
} }
} }
function SetCountPairedInFolderItemList(folderName)
{
var pairsCount = currentNumToSelect[folderName]-1;
$('.b-list_folders-item[data-folder="' + folderName + '"] b').text((pairsCount == 0) ? '' : pairsCount);
//var $folderContent = $('.b-folder-content[data-folder="' + folderName + '"]');
}
// Клик на папку для загрузки фотографий: // Клик на папку для загрузки фотографий:
$('.b-list_folders-item').on('click', function(){ $('.b-list_folders-item').on('click', function(){
...@@ -67,20 +105,15 @@ $(document).ready(function(){ ...@@ -67,20 +105,15 @@ $(document).ready(function(){
folder: folderName folder: folderName
}; };
$foldersContent.hide(); $foldersContent.hide().removeClass('active');
if ($('.b-folder-content[data-folder="' + folderName + '"]').length>0) { if ($('.b-folder-content[data-folder="' + folderName + '"]').length>0) {
console.log('AAA отображаем'); console.log('AAA отображаем');
$('.b-folder-content[data-folder="' + folderName + '"]').show(); $('.b-folder-content[data-folder="' + folderName + '"]').show().addClass('active');
MarkFolderSelected($this); MarkFolderSelected($this);
} else { } else {
console.log('AAA подгружаем'); console.log('AAA подгружаем');
StartLoading(); StartLoading();
$.ajax(action, { $.ajax(action, {
type: method, type: method,
data: data, data: data,
...@@ -89,6 +122,7 @@ $(document).ready(function(){ ...@@ -89,6 +122,7 @@ $(document).ready(function(){
StopLoading(); StopLoading();
RenderFilesList(folderName, data); RenderFilesList(folderName, data);
MarkFolderSelected($this); MarkFolderSelected($this);
MarkFolderViewed($this);
}, },
error: function(rew, status, err) { error: function(rew, status, err) {
console.log(status, err); console.log(status, err);
...@@ -96,12 +130,8 @@ $(document).ready(function(){ ...@@ -96,12 +130,8 @@ $(document).ready(function(){
}); });
} }
return false;
return false;
}); });
// Клик на фото: // Клик на фото:
$foldersContentWrap.on('click', '.b-foto_inner', function(){ $foldersContentWrap.on('click', '.b-foto_inner', function(){
...@@ -110,7 +140,9 @@ $(document).ready(function(){ ...@@ -110,7 +140,9 @@ $(document).ready(function(){
$this = $(this), $this = $(this),
num, num,
$currentFolderWrap = $this.parents('.b-folder-content'), $currentFolderWrap = $this.parents('.b-folder-content'),
folderName = $currentFolderWrap.data('folder'); folderName = $currentFolderWrap.data('folder'),
$pairedFoto,
fadeDuration = 100;
if (!$this.hasClass('selected')) if (!$this.hasClass('selected'))
{ {
...@@ -124,19 +156,32 @@ $(document).ready(function(){ ...@@ -124,19 +156,32 @@ $(document).ready(function(){
$currentFolderWrap.addClass('has-selected'); $currentFolderWrap.addClass('has-selected');
} else { } else {
// выбор второго фото для пары (пара сформирована): // выбор второго фото для пары (пара сформирована):
console.log('AAA 2-е фото в пару'); console.log('AAA 2-е фото в пару');
num = currentNumToSelect[folderName]; num = currentNumToSelect[folderName];
$pairedFoto = $('.b-foto_inner[data-num="' + num + '"]', $currentFolderWrap);
$this.addClass('paired'); $this.addClass('paired');
$('.b-foto_inner[data-num="' + num + '"]', $currentFolderWrap).addClass('paired'); $pairedFoto.addClass('paired');
$this.fadeOut(fadeDuration, function() {
$this.parent('.b-foto').removeClass('order-12').addClass('order-' + num);
$this.fadeIn(fadeDuration);
});
$pairedFoto.fadeOut(fadeDuration, function() {
$pairedFoto.parent('.b-foto').removeClass('order-12').addClass('order-' + num);
$pairedFoto.fadeIn(fadeDuration);
});
/*
$pairedFoto.parent('.b-foto').removeClass('order-12').addClass('order-' + num);
$this.parent('.b-foto').removeClass('order-12').addClass('order-' + num);
*/
currentNumToSelect[folderName] = getCurrenNumToSelect($currentFolderWrap); currentNumToSelect[folderName] = getCurrenNumToSelect($currentFolderWrap);
hasSelectedFoto[folderName] = false; hasSelectedFoto[folderName] = false;
$currentFolderWrap.removeClass('has-selected'); $currentFolderWrap.removeClass('has-selected');
} }
$('.b-foto_number', $this).text(num); $('.b-foto_number', $this).text(num);
...@@ -167,6 +212,8 @@ $(document).ready(function(){ ...@@ -167,6 +212,8 @@ $(document).ready(function(){
return false; return false;
} }
$pairedFotos.parent('.b-foto').removeClass('order-' + pairedNum).addClass('order-12');
$('.b-foto_number', $pairedFotos).text(''); $('.b-foto_number', $pairedFotos).text('');
$pairedFotos.attr('data-num', '') $pairedFotos.attr('data-num', '')
.removeClass('paired') .removeClass('paired')
...@@ -178,9 +225,46 @@ $(document).ready(function(){ ...@@ -178,9 +225,46 @@ $(document).ready(function(){
currentNumToSelect[folderName] = getCurrenNumToSelect($currentFolderWrap); currentNumToSelect[folderName] = getCurrenNumToSelect($currentFolderWrap);
} }
SetCountPairedInFolderItemList(folderName);
}); });
// Обработка нажатия клавиш:
$body.keyup(function(e) {
// Пробел
if (e.keyCode == 32)
{
var
$activeFolder = $('.b-folder-content.active', $foldersContentWrap),
$fotos = $('.b-foto_inner', $activeFolder);
if ($fotos.length == 2) {
$fotos.first().click();
}
}
// Вниз
if (e.keyCode == 40)
{
var
$activeFolderItemList = $('.b-list_folders-item.active'),
$nextFolderItem = $activeFolderItemList.next();
$nextFolderItem.click();
}
// Вверх
if (e.keyCode == 38)
{
var
$activeFolderItemList = $('.b-list_folders-item.active'),
$previousFolderItem = $activeFolderItemList.prev();
$previousFolderItem.click();
}
});
// Клик на "Сохранить" для объявления: // Клик на "Сохранить" для объявления:
$('.btn.btn-primary.save-folders').on('click', function(){ $('.btn.btn-primary.save-folders').on('click', function(){
......
src/templates/app/main.phtml
View file @ 1e5c774d
...@@ -54,7 +54,7 @@ $dir = $this->dir; ...@@ -54,7 +54,7 @@ $dir = $this->dir;
<ul class="b-list_folders"> <ul class="b-list_folders">
<?php foreach ($folders as $folder): ?> <?php foreach ($folders as $folder): ?>
<li class="b-list_folders-item" data-folder="<?= $folder ?>"><?= $folder ?></li> <li class="b-list_folders-item" data-folder="<?= $folder ?>"><?= $folder ?><b></b></li>
<?php endforeach; ?> <?php endforeach; ?>
</ul> </ul>
......
src/templates/layout/support.phtml
View file @ 1e5c774d
...@@ -59,7 +59,7 @@ $data_request = $layoutInfo->getRequest(); ...@@ -59,7 +59,7 @@ $data_request = $layoutInfo->getRequest();
<header class="l-header container-fluid"> <header class="l-header container-fluid">
<nav class="row align-items-center"> <nav class="row align-items-center">
<ul class="header-nav col-6"> <ul class="header-nav col-6">
<li><a href="<?= $this->url('adm.index', ['lang' => $layoutInfo->getLang()]) ?>" title="" class="text bold"><?= _t("Пары") ?></a></li> <li><a href="<?= $this->url('adm.index', ['lang' => $layoutInfo->getLang()]) ?>" title="" class="text bold active"><?= _t("Пары") ?></a></li>
<li><a href="<?= $this->url('adm.index', ['lang' => $layoutInfo->getLang()]) ?>" title="" class="text bold"><?= _t("Совмещение") ?></a></li> <li><a href="<?= $this->url('adm.index', ['lang' => $layoutInfo->getLang()]) ?>" title="" class="text bold"><?= _t("Совмещение") ?></a></li>
<li><a href="<?= $this->url('adm.index', ['lang' => $layoutInfo->getLang()]) ?>" title="" class="text bold"><?= _t("Маска") ?></a></li> <li><a href="<?= $this->url('adm.index', ['lang' => $layoutInfo->getLang()]) ?>" title="" class="text bold"><?= _t("Маска") ?></a></li>
<li><a href="<?= $this->url('adm.index', ['lang' => $layoutInfo->getLang()]) ?>" title="" class="text bold"><?= _t("Результат") ?></a></li> <li><a href="<?= $this->url('adm.index', ['lang' => $layoutInfo->getLang()]) ?>" title="" class="text bold"><?= _t("Результат") ?></a></li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment