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 {
.l-header .header-nav a:hover {
color: #FDDC9A;
}
.l-header .header-nav a.active {
color: #4EC9E5;
cursor: default;
}
select.form-control {
padding: 4px;
......
src/public/css/styles-main.css
View file @ 1e5c774d
......@@ -23,12 +23,27 @@
.b-list_folders-item
{
position: relative;
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;
opacity: 1;
}
.b-preview
......@@ -48,14 +63,21 @@
background-position: center center;
background-repeat: no-repeat;
background-color: #FFF;
/*opacity: 0.5;*/
z-index: 9999;
}
.b-foto {
padding: 4px;
}
.b-foto.order-1 {
flex-grow: 1;
transition: all 800ms ease;
}
.b-foto_inner {
position: relative;
height: 300px;
......
src/public/js/script-main.js
View file @ 1e5c774d
$(document).ready(function(){
var
$body = $('body'),
$foldersContentWrap = $('.b-preview'),
$loading = $('.b-loading'),
colorsActive = $foldersContentWrap.data('colors'),
......@@ -21,19 +22,24 @@ $(document).ready(function(){
function MarkFolderSelected($folderName)
{
$('.b-list_folders-item').removeClass('selected');
$folderName.addClass('selected');
$('.b-list_folders-item').removeClass('active');
$folderName.addClass('active');
}
function MarkFolderViewed($folderName)
{
$folderName.addClass('viewed');
}
function RenderFilesList(folderName, data)
{
// Добавляем содержимое папки:
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' +
' <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_number">1</div>' +
' <div class="b-foto_number"></div>' +
' ' +
' </div>' +
' </div>' +
......@@ -41,7 +47,29 @@ $(document).ready(function(){
'</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;
hasSelectedFoto[folderName] = false; // Выбрали одну картинку (есть подсвеченное фото)
}
......@@ -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(){
......@@ -67,20 +105,15 @@ $(document).ready(function(){
folder: folderName
};
$foldersContent.hide();
$foldersContent.hide().removeClass('active');
if ($('.b-folder-content[data-folder="' + folderName + '"]').length>0) {
console.log('AAA отображаем');
$('.b-folder-content[data-folder="' + folderName + '"]').show();
$('.b-folder-content[data-folder="' + folderName + '"]').show().addClass('active');
MarkFolderSelected($this);
} else {
console.log('AAA подгружаем');
StartLoading();
$.ajax(action, {
type: method,
data: data,
......@@ -89,6 +122,7 @@ $(document).ready(function(){
StopLoading();
RenderFilesList(folderName, data);
MarkFolderSelected($this);
MarkFolderViewed($this);
},
error: function(rew, status, err) {
console.log(status, err);
......@@ -96,12 +130,8 @@ $(document).ready(function(){
});
}
return false;
return false;
});
// Клик на фото:
$foldersContentWrap.on('click', '.b-foto_inner', function(){
......@@ -110,7 +140,9 @@ $(document).ready(function(){
$this = $(this),
num,
$currentFolderWrap = $this.parents('.b-folder-content'),
folderName = $currentFolderWrap.data('folder');
folderName = $currentFolderWrap.data('folder'),
$pairedFoto,
fadeDuration = 100;
if (!$this.hasClass('selected'))
{
......@@ -124,19 +156,32 @@ $(document).ready(function(){
$currentFolderWrap.addClass('has-selected');
} else {
// выбор второго фото для пары (пара сформирована):
console.log('AAA 2-е фото в пару');
num = currentNumToSelect[folderName];
$pairedFoto = $('.b-foto_inner[data-num="' + num + '"]', $currentFolderWrap);
$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);
hasSelectedFoto[folderName] = false;
$currentFolderWrap.removeClass('has-selected');
}
$('.b-foto_number', $this).text(num);
......@@ -167,6 +212,8 @@ $(document).ready(function(){
return false;
}
$pairedFotos.parent('.b-foto').removeClass('order-' + pairedNum).addClass('order-12');
$('.b-foto_number', $pairedFotos).text('');
$pairedFotos.attr('data-num', '')
.removeClass('paired')
......@@ -178,9 +225,46 @@ $(document).ready(function(){
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(){
......
src/templates/app/main.phtml
View file @ 1e5c774d
......@@ -54,7 +54,7 @@ $dir = $this->dir;
<ul class="b-list_folders">
<?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; ?>
</ul>
......
src/templates/layout/support.phtml
View file @ 1e5c774d
......@@ -59,7 +59,7 @@ $data_request = $layoutInfo->getRequest();
<header class="l-header container-fluid">
<nav class="row align-items-center">
<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>
......
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