TC
/
arozos-mirror
огледало от https://github.com/tobychui/arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
							<!DOCTYPE html>
<html>

<head>
    <title locale="title/title">File Properties</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
    <script type="text/javascript" src="../../script/ao_module.js"></script>
    <script type="text/javascript" src="../../script/applocale.js"></script>
    <link rel="stylesheet" href="../../script/ao.css">
    <style>
        body {
            overflow: hidden;
        }

        #filePropertiesWindow {
            background-color: var(--body_background);
            color: var(--body_text);
        }

        #filePropertiesWindow td,
        .header,
        p,
        div {
            color: var(--body_text) !important;
        }

        #filePropertiesWindow input {
            background-color: var(--body_background_secondary) !important;
            color: var(--text_color) !important;
            font-size: 1.2em;
        }

        .hidden {
            display: none !important;
        }

        .vertical-margin {
            margin-top: 4px !important;
        }

        .small.basic.white.fluid.button {
            color: var(--text_color_secondary) !important;
        }

        .small.basic.white.fluid.button:hover {
            background-color: var(--body_background_active) !important;
        }
    </style>
</head>

<body id="filePropertiesWindow">
    <br>
    <div class="ui container">
        <h3 class="ui header">
            <span locale="title/title">File Properties</span>
            <div class="sub header" locale="title/desc">Basic File Information</div>
        </h3>
        <div class="ui divider"></div>
        <div id="properties">

        </div>
        <br>
        <button class="ui small white basic fluid button singleFileOnly hidden" onclick="changeDefaultWebApp();"><i
                class="ui external square alternate icon blue"></i><span locale="button/changeDefault">Change Default
                WebApp</span></button>
        <button class="ui small basic white fluid button singleFileOnly hidden vertical-margin"
            onclick="viewVersionHistory();"><i class="ui undo green icon"></i><span locale="button/versionHistory">View
                Version History</span></button>
        <button class="ui small basic white fluid button linuxonly vertical-margin" onclick="openFilePermissionPanel();"
            locale="button/changeFilePermission">Change File Permissions</button>
        <br>
    </div>
    <div id="filesizeLoader" class="ui active dimmer">
        <div class="ui indeterminate text loader" locale="loader/loadingFileSize">Calculating File Size</div>
    </div>
    <script>
        //Initiate the view model
        var files = ao_module_loadInputFiles();
        var fileProperties = [];
        var fileInfo = {};
        function initFileProperties() {
            $("#properties").html("");
            if (files.length == 1) {
                //There are only 1 file to be shown
                getFileProp(files[0], renderSingleObject);
            } else if (files.length > 1) {
                for (var i = 0; i < files.length; i++) {
                    getFileProp(files[i], function (data) {
                        fileProperties.push(data);
                        if (fileProperties.length == files.length) {
                            renderMultipleObjects();
                        }
                    });
                }
            }
        }

        applocale.init("../locale/file_properties.json", function () {
            applocale.translate();
            initFileProperties();
        });

        //Hide windows / linux only operations
        $.get("/system/info/getArOZInfo", function (data) {
            if (data.HostOS == "windows") {
                $(".linuxonly").hide();
            } else {
                $(".windowsonly").hide();
            }
        });

        function viewVersionHistory() {
            var hashPassthrough = encodeURIComponent(JSON.stringify(files));
            ao_module_newfw({
                url: "SystemAO/file_system/file_versions.html#" + hashPassthrough,
                width: 570,
                height: 480,
                appicon: "SystemAO/file_system/img/properties.png",
                title: "File Version History",
            });
        }

        function getFileProp(vpath, callback) {
            $.ajax({
                url: "../../system/file_system/getProperties",
                data: { path: vpath },
                method: "POST",
                success: function (data) {
                    callback(data);
                    fileInfo = data;
                    //Initialize system theme
                    fpw_loadPreference("file_explorer/theme", function (data) {
                        if (data.error === undefined) {
                            if (data == "darkTheme") {
                                $("body").addClass("darkTheme");
                            } else {
                                $("body").addClass("whiteTheme");
                            }
                        }
                    });

                }
            })
        }

        function openFilePermissionPanel() {
            var hashPassthrough = encodeURIComponent(JSON.stringify(files));
            ao_module_newfw({
                url: "SystemAO/file_system/file_permission.html#" + hashPassthrough,
                width: 340,
                height: 480,
                appicon: "SystemAO/file_system/img/properties.png",
                title: "File Permissions",
            });
        }

        function renderMultipleObjects() {
            hideLoader();

            const filesizeSum = sumProperties(fileProperties, "Filesize");
            let filecount = 0, foldercount = 0;

            // Pre-build HTML
            let html = ui_getInput(fileProperties[0].VirtualDirname + "/", "Root Name");

            // Get counts
            fileProperties.forEach(item => {
                item.IsDirectory ? foldercount++ : filecount++;
            });

            // Add summary table
            html += ui_getText(applocale.getString("selection/multi", "Multiple selections"));
            html += buildCounterElements(filecount, foldercount);
            html += buildSummaryTable(filesizeSum);

            // Inject DOM once
            $("#properties").html(html);
        }

        // Build counter elements
        function buildCounterElements(fileCount, folderCount) {
            return [
                ui_getText(`${fileCount} ${applocale.getString("counter/files", "Files")}`),
                ui_getText(`${folderCount} ${applocale.getString("counter/folders", "Folders")}`)
            ].join("");
        }

        // Build summary table
        function buildSummaryTable(filesizeSum) {
            const totalSizeText = formatSize(filesizeSum);
            return ui_getTable([], [
                ["Virtual Directory", fileProperties[0].VirtualDirname + "/"],
                ["Total Size", totalSizeText]
            ]);
        }

        function sumProperties(data, propName) {
            var sum = 0;
            for (var i = 0; i < data.length; i++) {
                sum += data[i][propName];
            }
            return sum;
        }

        //Render one object property to the ui element
        function renderSingleObject(data) {
            hideLoader();
            let html = ''; // Pre-build html

            if (data.error !== undefined) {
                //Something went wrong
                html = `<h4 class="ui header">
                    <i class="question icon"></i>
                    <div class="content">
                        File Properties Unknown
                        <div class="sub header">The system were unable to read the selected file properties.</div>
                    </div>
                </h4>
                <div class="ui divider"></div>
                <small>${data.error}</small>`;
            } else {
                // Info
                var filesizeText = "File Size";
                const isDir = data.IsDirectory;
                html += ui_getInput(data.Basename, isDir ? "Folder Name" : "File Name");
                html += ui_getText(data.MimeType);;

                if (!isDir && data.Basename.split(".").pop() !== "shortcut") {
                    // Async content placeholder
                    html += '<div id="asyncContent"></div>';
                } else {
                    // Sync content
                    html += buildFileTable(data, isDir);
                }
            }

            // Add DOM once
            $("#properties").html(html);

            // Async content
            if (!data.IsDirectory && data.Basename.split(".").pop() !== "shortcut") {
                loadAsyncContent(data);
            }

        }

        // Build file table
        function buildFileTable(data, isDir) {
            let sizeText = formatSize(data.Filesize);
            let lastModText = generateDisplayLastModTime(data.LastModTime);

            return ui_getTable([], [
                ["Virtual Path", data.VirtualPath],
                [isDir ? "Folder Size" : "File Size", sizeText],
                ["Permission", data.Permission],
                ["Last Modified", lastModText],
                ["File Type", isDir ? "Folder" : "File"],
                ["Owner", data.Owner]
            ]);
        }

        function loadAsyncContent(data) {
            $(".singleFileOnly").show();
            $.ajax({
                url: "../../system/modules/getDefault",
                method: "GET",
                data: {
                    opr: "launch",
                    ext: "." + data.Basename.split(".").pop(),
                    mode: "launch"
                },
                success: function (openerinfo) {
                    const content = buildFileTable(data, openerinfo);
                    $("#asyncContent").replaceWith(content);
                }
            });
        }

        // Format bytes to human readable
        function formatSize(bytes) {
            if (bytes < 0) {
                return `<i class="times circle outline yellow icon"></i> ${applocale.getString(
                    "properties/error/Not available for network folders",
                    "Not available for network folders"
                )}`;
            }
            return bytesToSize(bytes) + ` (${bytes} bytes)`;
        }

        function hideLoader() {
            $("#filesizeLoader").hide();
            $("body").css('overflow-y', "auto");
        }

        //Model rendering scripts
        function ui_getInput(value, placeholder = "", type = "text") {
            return `<div class="ui fluid small input">
                            <input type="${type}" placeholder="${placeholder}" value="${value}" readonly="true">
                        </div>`
        }

        function ui_getText(value, color = "black") {
            return `<p style="color:${color}; margin-bottom:0px;">${value}</p>`;
        }

        function ui_getDivider() {
            return `<div class="ui divider"></div>`;
        }

        //head is a 1D array and table is 2D array
        function ui_getTable(heads, table) {
            // Cache the HTML parts
            const htmlParts = ['<table class="ui very basic fluid table">'];

            // Build thead
            if (heads.length > 0) {
                htmlParts.push(
                    '<thead><tr>',
                    heads.map(head => `<th>${head}</th>`).join(''),
                    '</tr></thead>'
                );
            }

            // Build tbody
            htmlParts.push(
                '<tbody>',
                table.map(row =>
                    `<tr>${row.map((cell, cellIndex) => {
                        // Only translate the first column
                        let content = cell;
                        if (cellIndex === 0 && applocale) {
                            const localeKey = `properties/key/${cell.trim()}`;
                            content = applocale.getString(localeKey, cell);
                        }
                        return `<td style="word-break: break-all;">${content}</td>`;
                    }).join('')
                    }</tr>`
                ).join(''),
                '</tbody></table>'
            );

            return htmlParts.join('');
        }

        function bytesToSize(bytes) {
            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            if (bytes == 0) return '0 Byte';
            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
            return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
        }

        /*

        Updates Oct 2020 - Matching File Explorer Theme on other file system tabs

        */

        function fpw_toggleDarkTheme() {
            $("#filePropertiesWindow").css({
                "background-color": "#242330",
                "color": "white",
            });

            $("#filePropertiesWindow td,.header,p,div").css({
                "color": "white",
            });

            $("#filePropertiesWindow .input").addClass("inverted transparent big")
        }


        function fpw_loadPreference(key, callback) {
            $.get("../../system/file_system/preference?key=" + key, function (data) {
                callback(data);
            });
        }


        /*
            Updates 30 Jan 2021: Added change of file opener
        */

        //Open Opener Selector for the given file
        function changeDefaultWebApp() {
            var ext = fileInfo.Ext;
            var openFileList = [];
            var openFileObject = {
                filepath: fileInfo.VirtualPath,
                filename: fileInfo.Basename,
            }
            openFileList.push(openFileObject);
            var openParamter = encodeURIComponent(JSON.stringify(openFileObject));
            ao_module_newfw({
                url: "SystemAO/file_system/defaultOpener.html#" + openParamter,
                width: 320,
                height: 510,
                appicon: "SystemAO/file_system/img/opener.png",
                title: "Default WebApp for " + ext,
                parent: ao_module_windowID,
                callback: "handleRefresh"
            });
        }

        function handleRefresh() {
            //Default opener changed. Update the display
            initFileProperties();
        }

        // Generate the display text for last modified time
        function generateDisplayLastModTime(lastModTime) {
            // Parse the date 
            const parseDate = (str) => {
                const [datePart] = str.split(" ");
                const [year, month, day] = datePart.split("-");
                return new Date(year, month - 1, day); // Month index
            };

            const modTime = parseDate(lastModTime);
            const now = new Date();
            const [years, months, days] = calcDate(now, modTime);

            let displayText = "Unknown";

            if (years > 0) {
                if (years > 1 && applocale.getString("lastmod/time/s")) {
                    displayText += applocale.getString("lastmod/time/s", "s");
                }
                displayText = `${years}${applocale.getString("lastmod/time/year", "year")}${applocale.getString("lastmod/time/ago")}`;
            } else if (months > 0) {
                if (months > 1 && applocale.getString("lastmod/time/s")) {
                    displayText += applocale.getString("lastmod/time/s", "s");
                }
                displayText = `${months}${applocale.getString("lastmod/time/month", "month")}${applocale.getString("lastmod/time/ago")}`;
            } else if (days > 0) {
                if (days > 1 && applocale.getString("lastmod/time/s")) {
                    displayText += applocale.getString("lastmod/time/s", "s");
                }
                displayText = `${days}${applocale.getString("lastmod/time/days", "day")}${applocale.getString("lastmod/time/ago")}`;
            } else {
                displayText = applocale.getString("lastmod/time/today", "Today");
            }

            return `${displayText} (${lastModTime})`;
        }

        function calcDate(endDate = new Date(), startDate) {
            // Make sure startDate is a Date object
            if (!(startDate instanceof Date)) {
                startDate = new Date(startDate);
            }

            let years = endDate.getFullYear() - startDate.getFullYear();
            let months = endDate.getMonth() - startDate.getMonth();
            let days = endDate.getDate() - startDate.getDate();

            // Cross months
            if (days < 0) {
                const lastMonth = new Date(endDate);
                lastMonth.setMonth(lastMonth.getMonth() - 1);
                days += new Date(
                    lastMonth.getFullYear(),
                    lastMonth.getMonth() + 1,
                    0
                ).getDate();
                months--;
            }

            // Cross years
            if (months < 0) {
                years--;
                months += 12;
            }

            return [years, months, days];
        }
    </script>
</body>

</html>