view release on metacpan or  search on metacpan

lib/Mojolicious/Command/Author/generate/obrazi.pm  view on Meta::CPAN

%    while(my @row = splice @$images, 0, $cols) {
    <div class="row">
    <%   for my $img(@row) {
        $img_idx++;
my $prev = path($linked->{$img->[1]}{prev}[1])->dirname->child($linked->{$img->[1]}{prev}[-2]);
my $next
  = $linked->{$img->[1]}{next}
  ? path($linked->{$img->[1]}{next}[1])->dirname->child($linked->{$img->[1]}{next}[-2])
  : '';
    %>
        <div class="col card"
            data-index="<%= $img_idx %>"
            title="<%= $img->[2] %>"
            style="background-image :url('<%= path($img->[1])->dirname->child($img->[-1])%>')">
            <div class="image" id="<%= $img_idx %>" data-category_id="#cat<%= $idx %>"
                style="background-image: url('<%= path($img->[1])->dirname->child($img->[-2]) %>')">
                    <div data-index="<%= $img_idx %>" class="prev pull-left text-left text-light">
                        <a class="text-light" href="<%= $prev %>.html">⏴</a>
                    </div>
                    <div data-index="<%= $img_idx %>" class="next pull-right text-right text-light">
                        <a class="text-light" href="<%= $next %>.html">⏵</a>
                    </div>
		        <h3 class="category text-right text-light"><%= $cat->[2] %></h3>
                <div class="meta">
                    <h4><%= $img->[2] %></h4>
                    <a class="button sharer pull-right"
                        target="_blank" href="https://www.facebook.com/share.php"
                        title="Споделяне">f Споделяне</a>
                    <p><%= $img->[3] %></p>
                </div>
                <a class="button closer" href="<%= $p_url.'#cat' . $idx %>">🗴</a>                
            </div>
        </div>
    % }
    </div>
% } # end of while
</section>
% } # end for @$categories
        </section><!-- end section class="obrazi"-->
        <script src="<%= $js_file %>"></script>
    </body>
</html>

@@ obrazi.js

jQuery(function($){
/*
    Clicking on a category title shows/hides the category's <section> element.
    Window.location reflects the current category #id.
*/

$('h1,h2,h3').click(function(e) {
    e.stopPropagation();
    let idx = $(e.target).data('index');
    let section = $('section.idx' + idx);
    section.toggle('slow');
})

/*
    Clicking on a thumbnail opens a full-sized image in a 100%x100% screen-sized
    overlay box. Sets a more visible border on the thumbnail to remind the user
    where he/she was.
*/
$('section .card').click(function(e){
    e.stopPropagation();
    let self = $(e.target);
    let id = self.data('index');
    $('#' + id).toggle('slow');
    $('section .card').css({border:"0px"});
    self.css({border: "1px solid #333"});
    // let url  = location.toString().replace(/#.*?$/,'');
    // location = `${url}#${id}`;    
});

/*
    Clicking anywhere on the full-sized image box (or on the X link, or on the Category title) toggles the visibility of the
    box. Effectively hiding it.
*/
$('section .card .image').click(function(e) {
    e.stopPropagation();
    $(e.target).toggle('slow');
});

$('.image > a.closer').click(function(e) {
    e.stopPropagation();
    $(e.target).parent().toggle('slow');
    return true;
});
/*
    To be bound to the keydown event, the sections need to have the attribute
    tabindex, set to a meaningful sequence.
    This event is handled for every <section>. It handles the right/left and
    up/down keypresses. When the corresponding key is pressed, the image box is
    replaced with the respectively previous or next image.
*/
$('section.obrazi').keydown(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('section .card').css({border:"0px"});
    // close the currently visible image...
    let img = $('section .card .image:visible');
    // alert(img.prop('id'));
    if(img.get(0) === undefined) return;
    if(e.key === 'Escape') {
        img.hide();
        return;
    }
    let id = img.attr('id');
    re_prev = /^Arrow(Left|Up)$/;
    re_next = /^Arrow(Right|Down)$/;
    // ... and open
    if(e.key.match(re_prev) ){
        id--;
    }
    else if(e.key.match(re_next) ){
        id++;
    }
    $('#' + id).toggle('slow');
    $('#' + id).parent().css({border: "1px solid #333"});
    // Changing the location hash somehow disables the keydown event
    // let url  = location.toString().replace(/#.*?$/,'');