Skip to content

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

Правка для логики группировки пар

parent 1e5c774d
Show whitespace changes
Inline Side-by-side
Showing with 115 additions and 14 deletions
src/public/css/styles-main.css
View file @ c2228127
...@@ -66,17 +66,24 @@ ...@@ -66,17 +66,24 @@
z-index: 9999; z-index: 9999;
} }
.b-folder-content .sorted
{
margin-left: -10px;
margin-right: 20px;
}
.b-folder-content .not-sorted
{
margin-left: -20px;
}
.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;
......
src/public/js/script-main.js
View file @ c2228127
...@@ -34,22 +34,43 @@ $(document).ready(function(){ ...@@ -34,22 +34,43 @@ $(document).ready(function(){
function RenderFilesList(folderName, data) function RenderFilesList(folderName, data)
{ {
// Добавляем содержимое папки: // Добавляем содержимое папки:
var templateFolderContent = _.template('' +
'<div class="b-folder-content row active" data-folder="<%= folder %>">' +
' <div class="sorted">' +
' </div>' +
' <div class="not-sorted col row">' +
' <% _.each(files, function(item, ind) { %> \n' +
' <div class="b-foto col-<%= cols %> order-<%= ind+1 %>" data-id="<%= item %>" data-ind="<%= ind+1 %>">' +
' <div class="b-foto_inner" style="background-image: url(/fotos/<%= folder %>/<%= item %>)" data-foto="<%= item %>" data-num="">' +
' <div class="b-foto_number"></div>' +
' </div>' +
' </div>' +
' <% }) %> \n' +
' </div>' +
'</div>'
);
/*
var templateFolderContent = _.template('' + var templateFolderContent = _.template('' +
'<div class="b-folder-content row active" 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-<%= cols %> order-12" 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"></div>' + ' <div class="b-foto_number"></div>' +
' ' +
' </div>' + ' </div>' +
' </div>' + ' </div>' +
' <% }) %> \n' + ' <% }) %> \n' +
'</div>' '</div>'
); );
*/
var cols; var cols;
switch (data.length) { switch (data.length) {
case 2:
case 3:
cols = 4;
break;
case 4: case 4:
cols = 6; cols = 6;
break; break;
...@@ -66,7 +87,7 @@ $(document).ready(function(){ ...@@ -66,7 +87,7 @@ $(document).ready(function(){
cols = 2; cols = 2;
break; break;
default: default:
cols = 4; cols = 2;
} }
$foldersContentWrap.append(templateFolderContent({folder: folderName, files: data, cols: cols})); $foldersContentWrap.append(templateFolderContent({folder: folderName, files: data, cols: cols}));
...@@ -87,6 +108,57 @@ $(document).ready(function(){ ...@@ -87,6 +108,57 @@ $(document).ready(function(){
$('.b-list_folders-item[data-folder="' + folderName + '"] b').text((pairsCount == 0) ? '' : pairsCount); $('.b-list_folders-item[data-folder="' + folderName + '"] b').text((pairsCount == 0) ? '' : pairsCount);
//var $folderContent = $('.b-folder-content[data-folder="' + folderName + '"]'); //var $folderContent = $('.b-folder-content[data-folder="' + folderName + '"]');
}
function SetDataGroupContents($currentFolderWrap)
{
var
$sorted = $('.sorted', $currentFolderWrap),
$notSorted = $('.not-sorted', $currentFolderWrap),
$fotoSorted = $('.b-foto', $sorted),
$fotoNotSorted = $('.b-foto', $notSorted),
$fotoAll = $('.b-foto', $currentFolderWrap),
sorted = $fotoSorted.length,
notSorted = $('.b-foto', $fotoNotSorted).length,
common = $fotoAll.length,
sortedCol, notSortedCol, fotoSortedCol, fotoNotSortedCol;
// [sorted-Col, notSorted-Col, fotoSorted-Col, fotoNotSorted-Col]
var configColNumbers = {
2: {0:[0,12,0,4], 2:[12,0,4,0]},
3: {0:[0,12,0,4], 2:[8,4,6,12]},
4: {0:[0,12,0,6], 2:[6,6,12,12], 4: [12,0,6,0]},
5: {0:[0,12,0,4], 2:[4,8,12,6], 4: [8,4,6,12]},
6: {0:[0,12,0,4], 2:[4,8,12,6], 4: [8,4,6,12], 6: [12,0,4,0]},
7: {0:[0,12,0,3], 2:[3,9,12,4], 4: [6,6,6,6], 6: [9,3,4,12]},
8: {0:[0,12,0,3], 2:[3,9,12,4], 4: [6,6,6,6], 6: [9,3,4,12], 8: [12,0,3,0]},
9: {0:[0,12,0,2], 2:[3,9,12,3], 4: [5,7,6,4], 6: [6,6,4,5], 8: [9,3,3,12]},
10: {0:[0,12,0,2], 2:[2,10,12,4], 4: [4,8,6,4], 6: [6,6,4,5], 8: [10,2,3,12]},
}
console.log('AAA common = ', common, ' ', sorted, ' ', notSorted);
if (sorted == 0) {
$sorted.removeClass('row');
} else {
$sorted.addClass('row');
}
for (let i = 0; i <= 12; i++) {
$sorted.removeClass('col-' + i);
$notSorted.removeClass('col-' + i);
$fotoAll.removeClass('col-' + i);
}
sortedCol = configColNumbers[common][sorted][0];
notSortedCol = configColNumbers[common][sorted][1];
fotoSortedCol = configColNumbers[common][sorted][2];
fotoNotSortedCol = configColNumbers[common][sorted][3];
$sorted.addClass('col-' + sortedCol);
$notSorted.addClass('col-' + notSortedCol);
$fotoSorted.addClass('col-' + fotoSortedCol);
$fotoNotSorted.addClass('col-' + fotoNotSortedCol);
} }
...@@ -154,8 +226,6 @@ $(document).ready(function(){ ...@@ -154,8 +226,6 @@ $(document).ready(function(){
num = currentNumToSelect[folderName]; num = currentNumToSelect[folderName];
hasSelectedFoto[folderName] = true; hasSelectedFoto[folderName] = true;
$currentFolderWrap.addClass('has-selected'); $currentFolderWrap.addClass('has-selected');
} else { } else {
// выбор второго фото для пары (пара сформирована): // выбор второго фото для пары (пара сформирована):
console.log('AAA 2-е фото в пару'); console.log('AAA 2-е фото в пару');
...@@ -164,7 +234,7 @@ $(document).ready(function(){ ...@@ -164,7 +234,7 @@ $(document).ready(function(){
$this.addClass('paired'); $this.addClass('paired');
$pairedFoto.addClass('paired'); $pairedFoto.addClass('paired');
/*
$this.fadeOut(fadeDuration, function() { $this.fadeOut(fadeDuration, function() {
$this.parent('.b-foto').removeClass('order-12').addClass('order-' + num); $this.parent('.b-foto').removeClass('order-12').addClass('order-' + num);
$this.fadeIn(fadeDuration); $this.fadeIn(fadeDuration);
...@@ -173,11 +243,25 @@ $(document).ready(function(){ ...@@ -173,11 +243,25 @@ $(document).ready(function(){
$pairedFoto.parent('.b-foto').removeClass('order-12').addClass('order-' + num); $pairedFoto.parent('.b-foto').removeClass('order-12').addClass('order-' + num);
$pairedFoto.fadeIn(fadeDuration); $pairedFoto.fadeIn(fadeDuration);
}); });
/*
$pairedFoto.parent('.b-foto').removeClass('order-12').addClass('order-' + num); $pairedFoto.parent('.b-foto').removeClass('order-12').addClass('order-' + num);
$this.parent('.b-foto').removeClass('order-12').addClass('order-' + num); $this.parent('.b-foto').removeClass('order-12').addClass('order-' + num);
*/ */
var
$fotoThis = $this.parent('.b-foto'),
$fotoPair = $pairedFoto.parent('.b-foto'),
foto1 = $pairedFoto.parent('.b-foto').remove(),
foto2 = $this.parent('.b-foto').remove();
$fotoPair.removeClass('order-' + $fotoPair.data('ind') ).addClass('order-' + num);
$fotoThis.removeClass('order-' + $fotoThis.data('ind') ).addClass('order-' + (num+5));
//var foto1 = $pairedFoto.parent('.b-foto').remove();
//var foto2 = $this.parent('.b-foto').remove();
foto1.appendTo($('.sorted',$currentFolderWrap));
foto2.appendTo($('.sorted',$currentFolderWrap));
SetDataGroupContents($currentFolderWrap);
currentNumToSelect[folderName] = getCurrenNumToSelect($currentFolderWrap); currentNumToSelect[folderName] = getCurrenNumToSelect($currentFolderWrap);
hasSelectedFoto[folderName] = false; hasSelectedFoto[folderName] = false;
$currentFolderWrap.removeClass('has-selected'); $currentFolderWrap.removeClass('has-selected');
...@@ -204,7 +288,7 @@ $(document).ready(function(){ ...@@ -204,7 +288,7 @@ $(document).ready(function(){
console.log('AAA Клик по фото с рамкой'); console.log('AAA Клик по фото с рамкой');
var var
pairedNum = $this.attr('data-num'), pairedNum = parseInt($this.attr('data-num')),
$pairedFotos = $('.b-foto_inner[data-num="' + pairedNum + '"]', $currentFolderWrap), $pairedFotos = $('.b-foto_inner[data-num="' + pairedNum + '"]', $currentFolderWrap),
isFromPair = $this.hasClass('paired'); isFromPair = $this.hasClass('paired');
...@@ -212,7 +296,17 @@ $(document).ready(function(){ ...@@ -212,7 +296,17 @@ $(document).ready(function(){
return false; return false;
} }
$pairedFotos.parent('.b-foto').removeClass('order-' + pairedNum).addClass('order-12'); if ($this.hasClass('paired')) {
//$pairedFotos.parent('.b-foto').removeClass('order-' + pairedNum).addClass('order-12');
$pairedFotos.each(function(){
var
$this = $(this).parent('.b-foto'),
foto = $this.remove();
$this.removeClass('order-' + pairedNum).removeClass('order-' + (pairedNum+5)).addClass('order-' + $this.data('ind') );
foto.appendTo($('.not-sorted',$currentFolderWrap));
});
SetDataGroupContents($currentFolderWrap);
}
$('.b-foto_number', $pairedFotos).text(''); $('.b-foto_number', $pairedFotos).text('');
$pairedFotos.attr('data-num', '') $pairedFotos.attr('data-num', '')
......
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