Skip to content

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

Правка в структуре верстки под колонки одиноковой ширины для всех значений

parent 7f3b7510
Show whitespace changes
Inline Side-by-side
Showing with 149 additions and 111 deletions
src/public/css/styles-main.css
View file @ 337f8add
...@@ -49,6 +49,11 @@ ...@@ -49,6 +49,11 @@
/*opacity: 1 !important;*/ /*opacity: 1 !important;*/
} }
.b-list_folders-item.active b
{
font-weight: bold;
}
/*.b-list_folders.new .b-list_folders-item.viewed*/ /*.b-list_folders.new .b-list_folders-item.viewed*/
.b-list_folders-item.viewed .b-list_folders-item.viewed
{ {
...@@ -89,19 +94,27 @@ ...@@ -89,19 +94,27 @@
.b-folder-content .sorted .b-folder-content .sorted
{ {
margin: 0;
/*
margin-left: -10px; margin-left: -10px;
margin-right: 20px; margin-right: 20px;*/
} }
.b-folder-content .not-sorted .b-folder-content .not-sorted
{ {
margin: 0;
/*
margin-left: -20px; margin-left: -20px;
*/
} }
.b-foto-double
{
padding: 0;
}
.b-foto { .b-foto {
padding: 4px; padding: 4px;
} }
......
src/public/js/script-main.js
View file @ 337f8add
...@@ -13,9 +13,9 @@ $(document).ready(function(){ ...@@ -13,9 +13,9 @@ $(document).ready(function(){
$saveButton = $('.btn.btn-primary.save-folders'), $saveButton = $('.btn.btn-primary.save-folders'),
colorsActive = $foldersContentWrap.data('colors'), colorsActive = $foldersContentWrap.data('colors'),
pairsCount = $foldersContentWrap.data('pairs_count'), pairsCount = $foldersContentWrap.data('pairs_count'),
currentNumToSelect = {}, currentNumToSelect = {}, // Номер пары для очередного выбора
hasSelectedFoto = {}, hasSelectedFoto = {}, // Выбрали одну картинку (есть подсвеченное фото)
archiveData = {}; archiveData = {}; // Данные о фото, находящихся в архиве
function StartLoading() function StartLoading()
{ {
...@@ -52,7 +52,7 @@ $(document).ready(function(){ ...@@ -52,7 +52,7 @@ $(document).ready(function(){
function MarkArchFolderViewed(folderName, $this) function MarkArchFolderViewed(folderName, $this)
{ {
if ($this.parents('.b-preview_inner').hasClass('arch')) { if ($this.parents('.b-preview_inner').hasClass('arch')) {
console.log('AAA MarkArchFolderViewed ', folderName); //console.log('AAA MarkArchFolderViewed ', folderName);
$('.b-list_folders-item[data-folder="' + folderName + '"]').addClass('viewed'); $('.b-list_folders-item[data-folder="' + folderName + '"]').addClass('viewed');
$saveButton.removeClass('disabled'); $saveButton.removeClass('disabled');
} }
...@@ -64,24 +64,41 @@ $(document).ready(function(){ ...@@ -64,24 +64,41 @@ $(document).ready(function(){
var var
$target, $target,
folder, folder,
cols, templateFolderContent,
templateFolderContent = _.template('' + templateFolderContentCommon = _.template('' +
'<div class="b-folder-content row active" data-folder="<%= folderName %>">' + '<div class="b-folder-content row active" data-folder="<%= folderName %>">' +
' <div class="sorted">' + ' <div class="b-foto-double col">' +
' </div>' +
' <div class="not-sorted col row">' +
' <% _.each(files, function(item, ind) { %> \n' + ' <% _.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" data-id="<%= item %>" data-ind="<%= ind+1 %>">' +
' <div class="b-foto_inner" data-foto="<%= item %>" data-num="">' + ' <div class="b-foto_inner" data-foto="<%= item %>" data-num="">' +
' <img class="b-foto_img" src="<%= folder %>/<%= item %>" >' + ' <img class="b-foto_img" src="<%= folder %>/<%= item %>" >' +
' <div class="b-foto_number"></div>' + ' <div class="b-foto_number"></div>' +
' </div>' + ' </div>' +
' </div>' + ' </div>' +
' <% if (((ind % 2) != 0) && (ind<files.length-1)) { %>' +
' </div>' +
' <div class="b-foto-double col">' +
' <% } %>' +
' <% }) %> \n' + ' <% }) %> \n' +
' </div>' + ' </div>' +
'</div>' '</div>'
),
templateFolderContent23 = _.template('' +
'<div class="b-folder-content row active" data-folder="<%= folderName %>">' +
' <% _.each(files, function(item, ind) { %> \n' +
' <div class="b-foto-double col">' +
' <div class="b-foto" data-id="<%= item %>" data-ind="<%= ind+1 %>">' +
' <div class="b-foto_inner" data-foto="<%= item %>" data-num="">' +
' <img class="b-foto_img" src="<%= folder %>/<%= item %>" >' +
' <div class="b-foto_number"></div>' +
' </div>' +
' </div>' +
' </div>' +
' <% }) %> \n' +
'</div>'
); );
if (folderType == 'new') { if (folderType == 'new') {
folder = '/fotos/' + folderName; folder = '/fotos/' + folderName;
$target = $foldersNewContentWrap; $target = $foldersNewContentWrap;
...@@ -91,33 +108,16 @@ $(document).ready(function(){ ...@@ -91,33 +108,16 @@ $(document).ready(function(){
$target = $foldersArchContentWrap; $target = $foldersArchContentWrap;
} }
switch (data.length) { if (data.length > 3) {
case 2: templateFolderContent = templateFolderContentCommon;
case 3: } else {
cols = 4; templateFolderContent = templateFolderContent23;
break; }
case 4:
cols = 6;
break; $target.append(templateFolderContent({folderName: folderName, folder: folder, files: data}));
case 5:
case 6:
cols = 4;
break;
case 7:
case 8:
cols = 3;
break;
case 9:
case 10:
cols = 2;
break;
default:
cols = 2;
}
$target.append(templateFolderContent({folderName: folderName, folder: folder, files: data, cols: cols}));
currentNumToSelect[folderName] = 1; currentNumToSelect[folderName] = 1;
hasSelectedFoto[folderName] = false; // Выбрали одну картинку (есть подсвеченное фото) hasSelectedFoto[folderName] = false;
} }
function SetPairedFotos(folderName, folderType) function SetPairedFotos(folderName, folderType)
...@@ -128,16 +128,10 @@ $(document).ready(function(){ ...@@ -128,16 +128,10 @@ $(document).ready(function(){
if (pairs.length > 0) if (pairs.length > 0)
{ {
var $folderContentWrap = $('.b-folder-content[data-folder="' + folderName + '"]', $foldersArchContentWrap); var $folderContentWrap = $('.b-folder-content[data-folder="' + folderName + '"]', $foldersArchContentWrap);
pairs.forEach(function(pair){ pairs.forEach(function(pair){
//$('.b-foto_inner[data-foto="' + archiveData[folderName][pair][0] + '"] ', $folderContentWrap).click();
//$('.b-foto_inner[data-foto="' + archiveData[folderName][pair][1] + '"] ', $folderContentWrap).click();
$('.b-foto_inner[data-foto="' + archiveData[folderName][pair][0] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'}); $('.b-foto_inner[data-foto="' + archiveData[folderName][pair][0] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'});
$('.b-foto_inner[data-foto="' + archiveData[folderName][pair][1] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'}); $('.b-foto_inner[data-foto="' + archiveData[folderName][pair][1] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'});
}); });
//$('.b-list_folders-item[data-folder="' + folderName + '"]').removeClass('viewed');
//$saveButton.addClass('disabled');
} }
} }
} }
...@@ -160,7 +154,7 @@ $(document).ready(function(){ ...@@ -160,7 +154,7 @@ $(document).ready(function(){
function getCurrenNumToSelect($folderWrap) function getCurrenNumToSelect($folderWrap)
{ {
for (let n = 1; n <= pairsCount; n++) { for (let n = 1; n <= pairsCount+1; n++) {
if ($('.b-foto_inner[data-num="' + n + '"]', $folderWrap).length == 0) return n; if ($('.b-foto_inner[data-num="' + n + '"]', $folderWrap).length == 0) return n;
} }
} }
...@@ -175,57 +169,107 @@ $(document).ready(function(){ ...@@ -175,57 +169,107 @@ $(document).ready(function(){
$('b', $folderListItem).text((pairsCount == 0) ? '' : pairsCount); $('b', $folderListItem).text((pairsCount == 0) ? '' : pairsCount);
} }
function SetDataGroupContents($currentFolderWrap) function CreatePair($currentFolderWrap, $pairedFoto, $this)
{ {
console.log('AAA CreatePair ', $currentFolderWrap);
$pairedFoto.addClass('paired');
$this.addClass('paired');
var countFotosInFolder = $('.b-foto', $currentFolderWrap).length;
if (countFotosInFolder == 2) {
return false;
}
if (countFotosInFolder == 3) {
var var
$sorted = $('.sorted', $currentFolderWrap), $divDoublePair1 = $('<div class="b-foto-double col pair">'),
$notSorted = $('.not-sorted', $currentFolderWrap), $divDoublePair2 = $('<div class="b-foto-double col pair">'),
$fotoSorted = $('.b-foto', $sorted), $fotoPair = $pairedFoto.parent('.b-foto'),
$fotoNotSorted = $('.b-foto', $notSorted), $fotoThis = $this.parent('.b-foto'),
$fotoAll = $('.b-foto', $currentFolderWrap), foto1 = $fotoPair.remove(),
sorted = $fotoSorted.length, foto2 = $fotoThis.remove();
notSorted = $('.b-foto', $fotoNotSorted).length,
common = $fotoAll.length, foto1.appendTo($divDoublePair1);
sortedCol, notSortedCol, fotoSortedCol, fotoNotSortedCol; foto2.appendTo($divDoublePair2);
// [sorted-Col, notSorted-Col, fotoSorted-Col, fotoNotSorted-Col] $divDoublePair2.prependTo($currentFolderWrap);
var configColNumbers = { $divDoublePair1.prependTo($currentFolderWrap);
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]}, RegroupRemainingFotos($currentFolderWrap);
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]}, return false;
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,3], 4: [4,8,6,4], 6: [6,6,4,5], 8: [10,2,3,12], 10: [12,0,2,0]}, var
} $divDoublePair = $('<div class="b-foto-double col pair">'),
$fotoPair = $pairedFoto.parent('.b-foto'),
$fotoThis = $this.parent('.b-foto'),
//console.log('AAA common = ', common, ' ', sorted, ' ', notSorted); foto1 = $fotoPair.remove(),
if (sorted == 0) { foto2 = $fotoThis.remove();
$sorted.removeClass('row');
foto1.appendTo($divDoublePair);
foto2.appendTo($divDoublePair);
var $doublePaired = $('.b-foto-double.pair', $currentFolderWrap);
if ($doublePaired.length > 0) {
$divDoublePair.insertAfter($doublePaired.last());
} else { } else {
$sorted.addClass('row'); $divDoublePair.prependTo($currentFolderWrap);
} }
for (let i = 0; i <= 12; i++) { RegroupRemainingFotos($currentFolderWrap);
$sorted.removeClass('col-' + i);
$notSorted.removeClass('col-' + i);
$fotoAll.removeClass('col-' + i);
} }
sortedCol = configColNumbers[common][sorted][0]; function DestroyPair($currentFolderWrap, $pairedFotos)
notSortedCol = configColNumbers[common][sorted][1]; {
fotoSortedCol = configColNumbers[common][sorted][2]; $pairedFotos.parents('.b-foto-double').removeClass('pair');
fotoNotSortedCol = configColNumbers[common][sorted][3];
var countFotosInFolder = $('.b-foto', $currentFolderWrap).length;
if (countFotosInFolder == 2) {
return false;
}
if (countFotosInFolder == 3) {
return false;
}
RegroupRemainingFotos($currentFolderWrap);
}
function RegroupRemainingFotos($currentFolderWrap)
{
// Перегруппируем оставшиеся фото:
var
$remainingFotos = $('.b-foto-double:not(.pair) .b-foto', $currentFolderWrap);
console.log('AAA $remainingFotos ', $remainingFotos.length);
$remainingFotos.remove();
$('.b-foto-double:not(.pair)', $currentFolderWrap).remove();
$sorted.addClass('col-' + sortedCol);
$notSorted.addClass('col-' + notSortedCol);
$fotoSorted.addClass('col-' + fotoSortedCol);
$fotoNotSorted.addClass('col-' + fotoNotSortedCol);
if ($remainingFotos.length>0) {
var
$divDoublePair = $('<div class="b-foto-double col">');
$remainingFotos.each(function(ind){
//console.log('AAA $remainingFotos ', ind);
$(this).appendTo($divDoublePair);
if (((ind % 2) != 0) && (ind<$remainingFotos.length-1)) {
$divDoublePair.appendTo($currentFolderWrap);
$divDoublePair = $('<div class="b-foto-double col">');
}
});
$divDoublePair.appendTo($currentFolderWrap);
}
} }
function ShowFoldersNew() function ShowFoldersNew()
...@@ -281,11 +325,9 @@ $(document).ready(function(){ ...@@ -281,11 +325,9 @@ $(document).ready(function(){
$foldersContentWrap.on('click', '.b-foto_inner', function(event, param){ $foldersContentWrap.on('click', '.b-foto_inner', function(event, param){
var isEmul = false; var isEmul = false;
if (param) { if (param && (param['data'] == 'emul')) {
if (param['data'] == 'emul') {
isEmul = true; isEmul = true;
} }
}
var var
$this = $(this), $this = $(this),
...@@ -309,25 +351,13 @@ $(document).ready(function(){ ...@@ -309,25 +351,13 @@ $(document).ready(function(){
//console.log('AAA выбор 2-е фото для пары (пара сформирована)'); //console.log('AAA выбор 2-е фото для пары (пара сформирована)');
num = currentNumToSelect[folderName]; num = currentNumToSelect[folderName];
$pairedFoto = $('.b-foto_inner[data-num="' + num + '"]', $currentFolderWrap); $pairedFoto = $('.b-foto_inner[data-num="' + num + '"]', $currentFolderWrap);
$this.addClass('paired');
$pairedFoto.addClass('paired');
var CreatePair($currentFolderWrap, $pairedFoto, $this);
$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));
foto1.appendTo($('.sorted',$currentFolderWrap));
foto2.appendTo($('.sorted',$currentFolderWrap));
SetDataGroupContents($currentFolderWrap);
if (!isEmul) { if (!isEmul) {
MarkArchFolderViewed(folderName, $this); MarkArchFolderViewed(folderName, $this);
} }
currentNumToSelect[folderName] = getCurrenNumToSelect($currentFolderWrap); currentNumToSelect[folderName] = getCurrenNumToSelect($currentFolderWrap);
hasSelectedFoto[folderName] = false; hasSelectedFoto[folderName] = false;
$currentFolderWrap.removeClass('has-selected'); $currentFolderWrap.removeClass('has-selected');
...@@ -363,14 +393,9 @@ $(document).ready(function(){ ...@@ -363,14 +393,9 @@ $(document).ready(function(){
} }
if ($this.hasClass('paired')) { if ($this.hasClass('paired')) {
$pairedFotos.each(function(){ //console.log('AAA расформировываем пару');
var DestroyPair($currentFolderWrap, $pairedFotos);
$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);
MarkArchFolderViewed(folderName, $this); MarkArchFolderViewed(folderName, $this);
} }
......
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