TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#f76c5d" />
    <meta name="description" content="ArozOS Photo" />
    <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
    <title>Photo</title>
    <link rel="stylesheet" href="../script/semantic/semantic.min.css">
    <script src="../script/alpine.min.js"></script>
    <script src="../script/jquery.min.js"></script>
    <script src="../script/semantic/semantic.min.js"></script>
    <script src="../script/ao_module.js"></script>
    <style>
        @media only screen and (min-width: 1200px) {
            #menu {
                flex: 1;
                max-width: 200px;
                min-width: 200px;
                height: 100vh;
                display: block;
            }
            #showmenuBtn {
                display: none;
            }
        }
        
        @media only screen and (max-width: 1200px) {
            #menu {
                display: none;
                height: 100vh;
            }
            #showmenuBtn {
                position: fixed;
                bottom: 1.8em;
                left: 1em;
            }
        }
        
        #display {
            flex: 1;
            margin: 0 0;
            height: 100vh;
        }
        
        #main {
            display: flex;
        }
        
        body {
            /*
                overflow: hidden;
            */
        }

        .imagecard{
            border: 1px solid transparent;
        }

        .imagecard img{
            width: 100%;
        }

        #viewbox{
            margin-left: 0px !important;
            margin-top: 0px !important;
            position: relative;
        }

        #fadeplate{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: rgba(20,20,20,0.8);
            backdrop-filter: blur(2px);
        }
    </style>

</head>
<body>
    <script src="photo.js"></script>
    <div id="main" x-data='photoListObject()'>
        <div class="ui left vertical menu" id="menu">
            <div class="item" style="background-color: #f76c5d;">
                <img class="ui fluid image" src="img/banner.png">
            </div>
            <div class="item">
                Browse Photos
                <div class="menu">
                    <template x-for="vroot in vroots" x-init="getRootInfo()">
                        <a class="item" :rootpath="vroot[1]" x-on:click="updateRenderingPath(vroot[2]);"><i class="ui disk icon"></i> <span x-text="vroot[0] + ' (' + vroot[1] + ')'"></span></a>
                    </template>
                    
                </div>
            </div>
            <a id="parentFolderButton" class="item" x-on:click="parentFolder();" style="display:none;">
                <i class="reply icon"></i> Parent Folder
            </a>
            <div class="item">
                Sub Folders
                <div class="menu">
                    <div class="item" id="nosubfolder" style="display:none;">No Sub Folders</div>
                    <template x-for="folder in folders">
                        <a class="item" x-on:click="updateRenderingPath(folder);" ><i class="ui folder open icon"></i> <span x-text="extractFolderName(folder);"></span></a>
                    </template>
                    
                </div>
            </div>

            <div class="item">
                Tags by AI
                <div class="menu">
                    <a class="active item">#a</a>
                    <a class="item">#b</a>
                    <a class="item">#c</a>
                    <a class="item">See More</a>
                </div>
            </div>


        </div>

        <div id="display" x-init="init()">
            <div id="noimg" class="ui basic segment" style="display:none;">
                <h4 class="ui header">
                    <i class="red question icon"></i>
                    <div class="content">
                        Empty Folder
                        <div class="sub header">There are no photo stored in <span x-text="currentPath + '/'"></span></div>
                    </div>
                </h4>
            </div>
            <div id="viewbox" class="ui six cards viewbox">
                <template x-for="image in images" :key="image">
                    <div class="imagecard" style="cursor: pointer;" x-on:click="showImage($el);" :style="{width: renderSize + 'px', height: renderSize + 'px'}" :filedata="encodeURIComponent(JSON.stringify({'filename':image.split('/').pop(),'filepath':image}))">
                        <a class="image" x-init="updateImageSizes();">
                            <img :src="'../system/file_system/loadThumbnail?bytes=true&vpath=' + image">
                        </a>
                    </div>
                </template>
            </div>
        </div>
    </div>
    <button id="showmenuBtn" class="ui basic big icon button" onclick="toggleMenu();"><i class="ui content icon"></i></button>

    <!-- Photo Viewing Modal -->
    <div class="ui basic small modal">
        <i class="close icon" style="margin-top: -2em;"></i>
        <div class="image content">
            <img id="fullImage" class="ui fluid image" src="" onload="ShowModal();"/>
        </div>
    </div>
</body>
<script>
    //Calculate image size on document ready

    $(window).on("resize ", function() {
        //check if the menu is opened
        if (window.innerWidth < 1200) {
            $('#menu').slideUp('fast',function(){
            });
        }
        if (window.innerWidth >= 1200) {
            $('#menu').slideDown('fast',function(){
            });
        }

        updateImageSizes();
    });

    function toggleMenu(){
        $('#menu').toggle('fast',function(){
            updateImageSizes();
            setTimeout(function(){
                updateImageSizes();
            }, 100);
        });
    }

    
</script>

</html>