логика выбра пар

parent 733e3efa
<?php
return [
'foto_conf' => [
'formats' => ['jpg', 'jpeg', 'webp'],
'colors_active' => [
1 => '#2CA02C',
2 => '#D62728',
3 => '#1F77B4',
4 => '#FF7F0E',
5 => '#9467BD',
],
]
];
\ No newline at end of file
......@@ -37,11 +37,39 @@
}
.b-foto_inner {
position: relative;
height: 300px;
border: 1px solid #8D9094;
border-radius: 4px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
.b-foto_inner.selected {
border-width: 4px;
}
.b-foto_inner.paired {
opacity: 0.5;
}
.b-foto_number {
display: none;
position: absolute;
top: 2px;
left: 2px;
height: 20px;
width: 20px;
color: #FFF;
text-align: center;
background-color: #0069d9;
border-radius: 4px;
}
.b-foto_inner.selected .b-foto_number {
display: block;
}
\ No newline at end of file
$(document).ready(function(){
var
$foldersContentWrap = $('.b-preview'),
colorsActive = $foldersContentWrap.data('colors');
function RenderFilesList(folderName, data)
{
// Добавляем содержимое папки:
var templateFolderContent = _.template('' +
'<div class="b-folder-content row" data-folder="<%= folder %>">' +
' <% _.each(files, function(item) { %> \n' +
' <div class="b-foto col-4" 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>' +
' </div>' +
' <% }) %> \n' +
'</div>'
);
$foldersContentWrap.append(templateFolderContent({folder: folderName, files: data}));
}
// Клик на папку для загрузки фотографий:
$('.b-list_folders-item').on('click', function(){
......@@ -42,6 +64,107 @@ $(document).ready(function(){
return false;
});
var
currentNumToSelect = 1,
freeNumbers = [1,2,3,4,5],
hasSelectedFoto = false; // Выбрали одну картинку (есть подсвеченное фото)
// Клик на фото:
$foldersContentWrap.on('click', '.b-foto_inner', function(){
var
$this = $(this),
num;
if (!$this.hasClass('selected')) {
// Клик по фото без рамки
if (hasSelectedFoto) {
// выбор второго фото для пары (пара сформирована):
console.log('AAA 2-е фото в пару');
num = currentNumToSelect;
$this.addClass('paired');
$('.b-foto_inner[data-num="' + num + '"]').addClass('paired');
freeNumbers.some(function(el) {
currentNumToSelect = el;
return ($('.b-foto_inner[data-num="' + el + '"]').length == 0);
});
hasSelectedFoto = false;
} else {
// выбор первого фото для пары:
console.log('AAA 1-е фото в пару');
num = currentNumToSelect;
hasSelectedFoto = true;
}
$('.b-foto_number', $this).text(num);
$this.attr('data-num', num);
$this.css('border-color', colorsActive[num]);
$this.addClass('selected');
} else {
// Клик по фото с рамкой
var
pairedNum = $this.attr('data-num'),
$pairedFotos = $('.b-foto_inner[data-num="' + pairedNum + '"]');
/*
$('.b-foto_number', $this).text('');
$this.attr('data-num', '');
$this.css('border-color', '#8D9094');
$this.removeClass('selected');
if (hasSelectedFoto) {
// убираем фото без пары:
console.log('AAA убираем 1-е фото из пары');
if (pairedNum == currentNumToSelect) {
console.log('AAA фото без пары');
freeNumbers.some(function(el) {
currentNumToSelect = el;
return ($('.b-foto_inner[data-num="' + el + '"]').length == 0);
});
hasSelectedFoto = false;
} else {
console.log('AAA фото из пары, но имеется подсвеченное другое');
}
} else {
// Убираем фото из пары:
console.log('AAA убираем 2-е фото из пары');
hasSelectedFoto = true;
currentNumToSelect = pairedNum;
$('.b-foto_inner[data-num="' + pairedNum + '"]').removeClass('paired');
$this.removeClass('paired');
}
*/
console.log('AAA убираем пару');
hasSelectedFoto = false;
$('.b-foto_number', $pairedFotos).text('');
$pairedFotos.attr('data-num', '')
.removeClass('paired')
.removeClass('selected')
.css('border-color', '#8D9094');
freeNumbers.some(function(el) {
currentNumToSelect = el;
return ($('.b-foto_inner[data-num="' + el + '"]').length == 0);
});
}
});
// Клик на "Сохранить" для объявления:
......@@ -83,25 +206,6 @@ $(document).ready(function(){
return false;
});
function RenderFilesList(folderName, data)
{
// Добавляем содержимое папки:
console.log('AAA ', folderName, ' ', data);
var $foldersContentWrap = $('.b-preview');
var templateFolderContent = _.template('' +
'<div class="b-folder-content row" data-folder="<%= folder %>">' +
' <% _.each(files, function(item) { %> \n' +
' <div class="b-foto col-4" data-id="<%= item %>">' +
' <div class="b-foto_inner" style="background-image: url(/fotos/<%= folder %>/<%= item %>)"><%= item %></div>' +
' </div>' +
' <% }) %> \n' +
'</div>'
);
$foldersContentWrap.append(templateFolderContent({folder: folderName, files: data}));
}
});
\ No newline at end of file
......@@ -67,6 +67,7 @@ class Index extends Common
$data = [
'lang' => $request->getAttribute('layoutInfo')->getLang(),
'colors_active' => $this->container->get('config')['foto_conf']['colors_active'],
'folders' => $folders,
'dir' => $dir,
];
......
......@@ -100,10 +100,14 @@ class Main extends Common
chdir('../../..');
$entries = scandir($dir);
$formats = $this->container->get('config')['foto_conf']['formats'];
$filelist = array();
foreach($entries as $entry) {
if ((strpos($entry, ".jpg") > 0) || (strpos($entry, ".jpeg") > 0) || (strpos($entry, ".webp") > 0)) {
$filelist[] = $entry;
foreach($formats as $ext) {
if (strpos($entry, '.'.$ext) > 0) {
$filelist[] = $entry;
}
}
}
......
......@@ -37,6 +37,7 @@ $this->headLink()
$form_save_link = $this->url('adm.main.save',['lang' => $this->lang]);
$form_load_link = $this->url('adm.main.loadfolder',['lang' => $this->lang]);
$colors_active = $this->colors_active;
$folders = $this->folders;
$dir = $this->dir;
......@@ -62,24 +63,9 @@ $dir = $this->dir;
<a class="btn btn-primary save-folders" href="#">Сохранить</a>
</div>
<div class="b-preview col">
<div class="b-preview col" data-colors=<?= ($colors_active ? json_encode($colors_active) : '')?>>
<div class="b-folder-content row">
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
<div class="b-foto col-4"><div class="b-foto_inner">123</div></div>
</div>
</div>
</div>
......
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