123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544 |
- <html>
- <head>
- <title>File Selector</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
- <link rel="stylesheet" href="../../script/tocas/tocas.css">
- <link rel="stylesheet" href="../../script/ao.css">
- <script type="text/javascript" src="../../script/tocas/tocas.js"></script>
- <script type="text/javascript" src="../../script/jquery.min.js"></script>
- <script type="text/javascript" src="../../script/ao_module.js"></script>
- <style>
- body{
- background-color:white;
- }
- .navi{
- padding:8px;
- background-color:#fcfcfc;
- border-bottom:2px solid #34b7eb;
- position:fixed;
- left:0px;
- top:0px;
- width:100%;
- z-index:99;
- }
- .pusher{
- margin-top:46px;
- margin-left:200px;
- width: calc(100% - 200px);
- }
- .pusher .fileListWrapper{
- padding-left:20px;
- padding-right:20px;
- }
- .navi .button{
- box-shadow: 0 1px 1px 0px rgb(190, 190, 190) !important;
- }
- .list .item{
- cursor:pointer;
- }
- .list .item:hover{
- color:#c7c7c7 !important;
- }
- .extrapadding{
- padding-left:6px !important;
- padding-right:6px !important;
- }
- .fileObject{
- overflow-wrap: break-word !important;
- display: block !important;
- padding:12px !important;
- font-size:98%;
- }
- .fileObject .fileInfo{
- display:inline-block !important;
- word-break: break-all;
- text-overflow: ellipsis !important;
- overflow: hidden;
- color:black;
- user-select: none;
- }
- .fileObject.selected{
- background-color:#d2f2f7 !important;
- }
- .fileObject.item:hover{
- background-color:#f2f2f2;
- }
- </style>
- </head>
- <body>
- <div class="navi">
- <button id="sidebarToggleBtn" class="ts icon tiny button" onclick="ts('.sidebar').sidebar('toggle');"><i class="content icon"></i></button>
- <button class="ts icon tiny button" onclick="backDir();"><i class="arrow left icon"></i></button>
- <button class="ts icon tiny button" onclick="parentDir();"><i class="arrow up icon"></i></button>
- <button class="ts icon tiny button" onclick="refresh();"><i class="refresh icon"></i></button>
- <div class="ts action fluid tiny input" style="width: calc(100% - 180px); float: right;">
- <input id="addressbar" type="text" placeholder="" onchange="updatePath();">
- <button class="ts positive icon button" onclick="confirmSelection();"><i class="checkmark icon"></i></button>
- </div>
-
- <div id="newfilenameInput" style="width:100%; margin-top:12px;" align="right">
- <div class="ts fluid tiny input" style="width: calc(100% - 180px); float: right;">
- <input id="filename" type="text" placeholder="New Filename">
- </div>
- </div>
- </div>
- <div id="sidebar" class="ts left static visible overlapped sidebar" style="background-color:#f5f5f5 !important;z-index:90 !important; width:200px;">
- <div id="sidebarPadder" style="height:46px;"></div>
- <details class="ts accordion" open>
- <summary>
- <i class="dropdown icon"></i> User
- </summary>
- <div class="content" >
- <div class="ts list" id="userlist">
- </div>
- </div>
- </details>
- <details class="ts accordion" open>
- <summary>
- <i class="dropdown icon"></i> Storage
- </summary>
- <div class="content">
- <div class="ts list" id="storagelist">
- </div>
- </div>
- </details>
- </div>
- <div class="pusher">
- <br>
- <div class="fileListWrapper" style="min-height:300px; width:100%;">
- <div id="folderList" class="ts segmented basic fluid list whiteTheme">
- <div class="fileObject">
- <span class="fileInfo"><i class="loading spinner icon" style="margin-right:12px;"></i> Loading</span>
- </div>
- </div>
- <div id="fileList" class="ts segmented fluid list whiteTheme">
-
- </div>
-
- </div>
- <br><br>
- </div>
- <div id="waitloader" class="ts active dimmer" style="display:none; z-index:999;">
- <div id="waitloadertext" class="ts indeterminate text loader">Waiting Response</div>
- </div>
- <script>
- var multiSelect = false;
- var type = "file";
- var currentDir = "user:/";
- var pathHistory = [];
- var ctrlDown = false;
- var shiftDown = false;
- var lastClickedItemID = 0;
- var listenerUUID = "";
- var fileOptions = {};
- initSelectorObject();
- initRoots();
- updateWindowResize();
- function initSelectorObject(){
- var initInfo = loadSelectorInfoFromHash();
- //Load the initiation directory
- listDir(initInfo.root);
- //init global var
- type = initInfo.type;
- multiSelect = initInfo.allowMultiple;
- listenerUUID = initInfo.listenerUUID;
- if (initInfo.options != undefined){
- fileOptions = JSON.parse(JSON.stringify(initInfo.options));
- }
-
-
- //Load options and parse the UI
- if (type == "new"){
- //Resize the top bar
- $("#sidebarPadder").css("height", "90px");
- $(".fileListWrapper").css("padding-top", "50px");
- if (typeof(fileOptions.defaultName) != "undefined"){
- $("#filename").val(fileOptions.defaultName);
- }else{
- $("#filename").val("newfile.txt");
- }
- }else{
- $("#newfilenameInput").hide();
- }
-
-
- }
- function cancelSelection(){
- localStorage.setItem(listenerUUID, JSON.stringify("&&selection_canceled&&"));
- }
- function confirmSelection(){
- var files = [];
- $(".selected.fileObject").each(function(){
- var filename = decodeURIComponent($(this).attr('filename'));
- var filepath = decodeURIComponent($(this).attr('filepath'));
- files.push({
- filename: filename,
- filepath: filepath
- });
- });
- //Check if currentdir end with "/". If not, append it
- if(currentDir.substr(currentDir.length - 1, 1) != "/"){
- currentDir = currentDir + "/";
- }
- //Check for special cases
- if (files.length == 0 && type == "folder"){
- //Select the current path as target instead
- var currentPathname = currentDir.split("/");
- currentPathname.pop();
- currentPathname = currentPathname.pop();
- if (currentPathname == ""){
- currentPathname = currentDir;
- }
- files.push({
- filename: currentPathname,
- filepath: currentDir
- });
- }else if (files.length == 0 && type == "new"){
- //Push this new file into the return structure
- var newFilename = $("#filename").val();
- files.push({
- filename: newFilename,
- filepath: currentDir + newFilename
- });
- }
- if (ao_module_virtualDesktop){
- if (!ao_module_parentCallback(files)){
- //Parent callback not exists
- alert("Selection Failed. Is parent window alive?")
- }else{
- parent.closeFwProcess(ao_module_windowID);
- }
- }else{
- if (listenerUUID == ""){
- alert("Invalid listener UUID. Please re-open your file selector.")
- return;
- }
- var selectedFilesInJSON = JSON.stringify(files);
- localStorage.setItem(listenerUUID, selectedFilesInJSON);
- $("#waitloader").show();
- $(".pusher").css("overflow","hidden");
- setTimeout(function(){
- $("#waitloadertext").html("<i class='remove icon'></i> System is not responding. <br>Please close this window and retry.");
- },10000)
- }
- }
- //Handle on window close function, cancel current selection
- window.onbeforeunload = function(){
- cancelSelection();
- }
- //Overwrite the ao_module close function
- function ao_module_close(){
- if (!ao_module_virtualDesktop){
- return;
- }
- if (!ao_module_parentCallback(files)){
- alert("Selection Failed. Is parent window alive?")
- }else{
- parent.closeFwProcess(ao_module_windowID);
- }
- }
- function updatePath(){
- var newDir = $("#addressbar").val();
- listDir(newDir);
- }
- function refresh(){
- $("#fileList").html("");
- $("#folderList").html("");
- listDir(currentDir);
- }
- function loadSelectorInfoFromHash(){
- if (window.location.hash.length == 0){
- return {
- root: "user:/",
- type: "file",
- allowMultiple: false
- }
- }else{
- try{
- var selectInfo = JSON.parse(decodeURIComponent(window.location.hash.substring(1)));
- return selectInfo;
- }catch{
- //Error parsing the input. Use default settings
- return {
- root: "user:/",
- type: "file",
- allowMultiple: false
- }
- }
-
- }
- }
- function listDir(dir){
- currentDir = dir;
- pathHistory.push(currentDir);
- $("#addressbar").val(currentDir);
- ao_module_setWindowTitle(`Open`);
- $.get("../../system/file_system/listDir?dir=" + encodeURIComponent(dir),function(data){
- $("#folderList").html("");
- $("#fileList").html("");
- if (data === null){
- $("#folderList").hide();
- $("#fileList").hide();
- return;
- }else{
- $("#folderList").show();
- $("#fileList").show();
- }
- if (data.error !== undefined){
- //Load the index instead
- listDir("user:/");
- }else{
- var folders = [];
- var files = [];
- for (var i =0; i < data.length; i++){
- if (data[i].IsDir == true){
- folders.push(data[i]);
- }else{
- if (fileOptions.filter != undefined){
- var fileExt = data[i].Filename.split(".").pop();
- for (var j = 0; j < fileOptions.filter.length; j++){
- if (fileOptions.filter[j] == fileExt){
- files.push(data[i]);
- break;
- }
- }
- }else{
- files.push(data[i]);
- }
-
- }
- }
- //Append folder first then files
- var count = 0;
- for (var i =0; i < folders.length; i++){
- var filename = folders[i].Filename;
- var filepath = folders[i].Filepath;
- var ext = filename.split(".").pop();
- var icon = ao_module_utils.getIconFromExt(ext);
- var isDir = folders[i].IsDir;
- if (isDir == true){
- icon = "folder";
- }
- var fileSize = folders[i].Displaysize;
- $("#folderList").append(`<div class="fileObject item" fid="${count}" ondblclick="openFolder(event,this);" onclick="selectThis(this,event);" filepath="${encodeURIComponent(filepath)}" filename="${encodeURIComponent(filename)}" isDir="${isDir}">
- <span class="fileInfo" ><i class="${icon} icon" style="margin-right:12px;"></i> ${filename}</span>
- </div>`);
- count++;
- }
- if (folders.length == 0){
- $("#folderList").hide();
- }
- for (var i =0; i < files.length; i++){
- var filename = files[i].Filename;
- var filepath = files[i].Filepath;
- var ext = filename.split(".").pop();
- var icon = ao_module_utils.getIconFromExt(ext);
- var isDir = files[i].IsDir;
- if (isDir == true){
- icon = "folder";
- }
- var fileSize = files[i].Displaysize;
- $("#fileList").append(`<div class="fileObject item" fid="${count}" ondblclick="chooseThisFile(this);" onclick="selectThis(this,event);" filepath="${encodeURIComponent(filepath)}" filename="${encodeURIComponent(filename)}" isDir="${isDir}">
- <span class="fileInfo"><i class="${icon} icon" style="margin-right:12px;"></i> ${filename}</span>
- </div>`);
- count++;
- }
- if (files.length == 0){
- $("#fileList").hide();
- }
- $('.pusher').scrollTop(0);
- }
- });
- }
- //Open folder
- function openFolder(event, object){
- event.preventDefault();
- var filepath = $(object).attr("filepath");
- filepath = decodeURIComponent(filepath);
- listDir(filepath);
- }
- function selectThis(object,event){
- //event.preventDefault();
- //event.stopImmediatePropagation();
- //Check if this object is in suitable selection type
- if ($(object).attr("IsDir") == "true" && type == "file"){
- return;
- }else if ($(object).attr("IsDir") == "false" && type == "folder"){
- return;
- }else if (type == "new" && $(object).attr("IsDir") == "false"){
- //Use this filename as the newfile name (aka overwrite mode)
- var newNewFilename = $(object).attr("filename");
- newNewFilename = decodeURIComponent(newNewFilename);
- $("#filename").val(newNewFilename);
- return;
- }else if (type == "new" && $(object).attr("IsDir") == "true"){
- //Selected a folder in new mode. Ignore it
- return
- }
- if (multiSelect){
- if (ctrlDown){
- //Add this into selection list
- $(object).addClass("selected");
- }else if (shiftDown){
- var start = lastClickedItemID;
- var end = $(object).attr("fid");
- if (start > end){
- start = end;
- end = lastClickedItemID;
- }
- var fileObjects = $(".fileObject");
- for (var k = start; k <= end; k++){
- $(fileObjects[k]).addClass("selected");
- }
- }else{
- //Reset and add this into selection list
- $(".selected").removeClass("selected");
- $(object).addClass("selected");
- }
- }else{
- $(".selected").removeClass("selected");
- $(object).addClass("selected");
- }
- //Update last selected id
- lastClickedItemID = $(object).attr('fid');
- //Update title
- var objectCount = $(".selected").length;
- var typeName = "object"
- if (type == "file"){
- typeName = "file";
- }else if (type == "folder"){
- typeName = "folder";
- }
- var desc = `${typeName} selected`;
- if (objectCount > 1){
- desc = `${typeName + "s"} selected`;
- }
- ao_module_setWindowTitle(`Open (${objectCount} ${desc})`);
- }
- $(window).on("keydown",function(event){
- if (event.which == 17){
- ctrlDown = true;
- }else if (event.which == 16){
- shiftDown = true;
- }
- });
- $(window).on("keyup",function(event){
- if (event.which == 17){
- ctrlDown = false;
- }else if (event.which == 16){
- shiftDown = false;
- }
- });
- $(window).on("resize",function(){
- updateWindowResize();
- });
- function updateWindowResize(){
- if (window.innerWidth < 560){
- $("#sidebar").attr("class", "ts left overlapped sidebar");
- $(".pusher").css("margin-left", "0px").css("width","100%");
- $("#sidebarToggleBtn").show();
- }else{
- $("#sidebar").attr("class", "ts left static visible overlapped sidebar");
- $(".pusher").css("margin-left", "200px").css("width","calc(100% - 200px)");
- $("#sidebarToggleBtn").hide();
- }
- }
- function initAddressBarWidth(){
- $("#addressbar").css("width",window.innerWidth - 220 + "px");
- }
- function chooseThisFile(object){
- $(".selected").removeClass('selected');
- $(object).addClass('selected');
- confirmSelection();
- }
- function parentDir(){
- if (currentDir.substring(currentDir.length - 1) == "/"){
- currentDir = currentDir.substring(0, currentDir.length - 1);
- }
- var tmp = currentDir.split("/");
- tmp.pop();
- var parentPath = tmp.join("/");
- if (parentPath.length == 0){
- //Do nothing. Already at root dir
- }else{
- listDir(parentPath);
- }
- }
- function backDir(){
- if (pathHistory.length > 1){
- pathHistory.pop();
- var targetPath = pathHistory.pop();
- listDir(targetPath);
- }
- }
- //Initialize user shortcuts
- function initRoots(){
- $.get("../../system/file_system/listRoots",function(data){
- $("#storagelist").html("");
- for (var i =0; i < data.length; i++){
- $('#storagelist').append(`<div class="item extrapadding" filepath="${data[i]["RootPath"]}" onclick="openShortcut(this);"><i class="disk outline icon" style="margin-right:8px;"></i> ${data[i]["RootName"]} (${data[i]["RootPath"]})</div>`);
- }
- });
- $.get("../../system/file_system/listRoots?user=true",function(data){
- $("#userlist").html("");
- for (var i =0; i < data.length; i++){
- if (data[i].IsDir == true){
- if (data[i]["Filename"].substring(0,1) == "."){
- //Do not show hidden files
- continue;
- }
- $('#userlist').append(`<div class="item extrapadding" filepath="${data[i]["Filepath"]}" onclick="openShortcut(this);"><i class="folder icon" style="margin-right:8px;"></i> ${data[i]["Filename"]}</div>`);
- }
-
- }
- });
- }
- function openShortcut(object){
- var targetdir = $(object).attr("filepath");
- targetdir = decodeURIComponent(targetdir);
- listDir(targetdir);
- if (window.innerWidth < 560){
- ts('.sidebar').sidebar('hide');
- }
- }
- </script>
- </body>
- </html>
|