191 lines
8.8 KiB
HTML
191 lines
8.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block main_content %}
|
|
<div class="container-fluid">
|
|
<form method="POST">
|
|
<div class="row">
|
|
<div class="input-group col">
|
|
|
|
{{CreateSelect( "noo", noo, ["Oldest", "Newest"], "$('#offset').val(0)")|safe }}
|
|
{{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
|
|
<span style="border:0" class="btn btn-outline-info disabled">grouped by:</span>
|
|
{{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"])|safe }}
|
|
</div class="input-group">
|
|
<div class="col my-auto d-flex justify-content-center">
|
|
{% set fd=entry_data[0].file_details[0] %}
|
|
<button id="prev" name="prev" class="btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
|
|
<span class="h-100 my-auto"> {{how_many}} files </span>
|
|
<button id="next" name="next" class="btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></i></button>
|
|
</div>
|
|
<div class="input-group col justify-content-end">
|
|
<div class="input-group-prepend">
|
|
<button style="width:98%" class="btn btn-outline-info disabled" disabled>Size:</button>
|
|
</div>
|
|
{% if size == "64" %}
|
|
{% set bt="btn-info" %}
|
|
{% else %}
|
|
{% set bt="btn-outline-info" %}
|
|
{% endif %}
|
|
<div class="input-group-append">
|
|
<button id="64" class="sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
|
|
</div>
|
|
{% if size == "96" %}
|
|
{% set bt="btn-info" %}
|
|
{% else %}
|
|
{% set bt="btn-outline-info" %}
|
|
{% endif %}
|
|
<div class="input-group-append">
|
|
<button id="96" class="sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
|
|
</div>
|
|
{% if size == "128" %}
|
|
{% set bt="btn-info" %}
|
|
{% else %}
|
|
{% set bt="btn-outline-info" %}
|
|
{% endif %}
|
|
<div class="input-group-append">
|
|
<button id="128" class="sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
|
|
</div>
|
|
{% if size == "192" %}
|
|
{% set bt="btn-info" %}
|
|
{% else %}
|
|
{% set bt="btn-outline-info" %}
|
|
{% endif %}
|
|
<div class="input-group-append">
|
|
<button id="192" class="sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
|
|
</div>
|
|
{% if size == "256" %}
|
|
{% set bt="btn-info" %}
|
|
{% else %}
|
|
{% set bt="btn-outline-info" %}
|
|
{% endif %}
|
|
<div class="input-group-append">
|
|
<button id="256" class="sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button>
|
|
</div>
|
|
</div class="input-group">
|
|
</div class="form-row">
|
|
<input id="offset" type="hidden" name="offset" value="{{offset}}">
|
|
<input id="size" type="hidden" name="size" value="{{size}}">
|
|
</form>
|
|
|
|
{% set last = namespace(printed=0) %}
|
|
{% if grouping == "None" %}
|
|
<div class="row pl-3">
|
|
{% endif %}
|
|
{% for obj in entry_data %}
|
|
{% if grouping == "Day" %}
|
|
{% if last.printed != obj.file_details[0].day %}
|
|
{% if last.printed > 0 %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="row pl-3"><h6>Day: {{obj.file_details[0].day}} of {{obj.file_details[0].month}}/{{obj.file_details[0].year}}</h6></div>
|
|
<div class="row pl-3">
|
|
{% set last.printed = obj.file_details[0].day %}
|
|
{% endif %}
|
|
{% elif grouping == "Week" %}
|
|
{% if last.printed != obj.file_details[0].woy %}
|
|
{% if last.printed > 0 %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="row pl-3"><h6>Week #: {{obj.file_details[0].woy}} of {{obj.file_details[0].year}}</h6></div>
|
|
<div class="row pl-3">
|
|
{% set last.printed = obj.file_details[0].woy %}
|
|
{% endif %}
|
|
{% elif grouping == "Month" %}
|
|
{% if last.printed != obj.file_details[0].month %}
|
|
{% if last.printed > 0 %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="row pl-3"><h6>Month: {{obj.file_details[0].month}} of {{obj.file_details[0].year}}</h6></div>
|
|
<div class="row pl-3">
|
|
{% set last.printed = obj.file_details[0].month %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if obj.type.name != "Directory" %}
|
|
<figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1">
|
|
{% if obj.type.name=="Image" %}
|
|
<a href="{{obj.in_dir[0].path_prefix}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details[0].thumbnail}}"></img></a>
|
|
{% elif obj.type.name == "Video" %}
|
|
<div style="position:relative; width:100%">
|
|
<a href="{{obj.in_dir[0].path_prefix}}/{{obj.name}}"><img class="thumb" style="display:block" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details[0].thumbnail}}"></img></a>
|
|
<div style="position:absolute; top: 2; left: 2;">
|
|
<i style="font-size:32;background-color:black;color:white" class="fas fa-film"></i>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{# finding text distracting, <figcaption style="font-size:12px;" class="figure-caption text-center">{{obj.name}}</figcaption> #}
|
|
</figure>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if grouping == "None" %}
|
|
</div class="row pl-3">
|
|
{% endif %}
|
|
</div class="container">
|
|
{% endblock main_content %}
|
|
{% block script_content %}
|
|
<script>
|
|
function ChangeSize(clicked_button,sz)
|
|
{
|
|
$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info')
|
|
$(clicked_button).addClass('btn-info').removeClass('btn-outline-info')
|
|
$('.thumb').attr( {height: sz, style: 'font-size:'+sz } )
|
|
$('#size').val(sz)
|
|
}
|
|
|
|
// function that finds all next elements of the selector we use - works better
|
|
// than jauery nextAll as it stops when I use any grouping div to break up the
|
|
// .figures
|
|
$.fn.findNextAll = function( selector ){
|
|
var that = this[ 0 ],
|
|
selection = $( selector ).get();
|
|
return this.pushStack(
|
|
// if there are no elements in the original selection return everything
|
|
!that && selection ||
|
|
$.grep( selection, function( n ){
|
|
return [4,12,20].indexOf( that.compareDocumentPosition( n ) ) > -1
|
|
// if you are looking for previous elements it should be [2,10,18]
|
|
})
|
|
);
|
|
}
|
|
|
|
// e == event (can see if shift/ctrl held down while left-clicking
|
|
// el == element the click is on
|
|
// this allows single-click to select, ctrl-click to (de)select 1 item, and
|
|
// shift-click to add all elements between highlighted area and clicked area,
|
|
// whether you click after highlight or before
|
|
function DoSel(e, el)
|
|
{
|
|
if( e.ctrlKey )
|
|
{
|
|
$(el).toggleClass('highlight')
|
|
return
|
|
}
|
|
if( e.shiftKey )
|
|
{
|
|
st=Number($('.highlight').first().attr('img'))
|
|
end=Number($('.highlight').last().attr('img'))
|
|
clicked=Number($(el).attr('img'))
|
|
if( clicked > end )
|
|
$('.figure').slice( end, clicked+1 ).addClass('highlight')
|
|
else
|
|
$('.figure').slice( clicked, st ).addClass('highlight')
|
|
return
|
|
}
|
|
$('.highlight').removeClass('highlight')
|
|
$(el).addClass('highlight')
|
|
}
|
|
|
|
$('.figure').click( function(e) { DoSel(e, this ); return false; });
|
|
$('.figure').contextmenu( function(e) { console.log('do own context-menu'); return false; });
|
|
|
|
|
|
$(document).ready(function() {
|
|
if( {{offset}} == 0 )
|
|
{
|
|
$('#prev').addClass('disabled')
|
|
$('#prev').prop('disabled', true)
|
|
}
|
|
} )
|
|
|
|
|
|
</script>
|
|
{% endblock script_content %}
|