multiSnow
/
aria2-WIOW
1
0
Fork 0
Code Issues Pull Requests Releases Activity

vertical view for download status and option

This commit is contained in:
multiSnow 2023-12-27 11:08:24 +08:00
parent af92d34432
commit db71fc07e9
Signed by: multiSnow
GPG Key ID: 18EDAC29CAA2DBCE
3 changed files with 94 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
css/style.css
View File

@ -33,6 +33,20 @@ body
font-family:sans;
align-items:stretch;
}
body.horizontal
{
flex-direction:row;
align-content:flex-start;
justify-content:flex-start;
}
body.vertical
{
flex-direction:column;
align-content:flex-end;
justify-content:flex-end;
}
sub,sup
{
font-size:8px;
@ -70,6 +84,18 @@ input:not([type="file"])
color:#f37a86;
bottom:0px;
}
#side.horizontal
{
flex-direction:column;
order:0;
}
#side.vertical
{
flex-direction:row;
order:2;
}
#showoption
{
transition-duration:.5s;
@ -82,38 +108,61 @@ input:not([type="file"])
border-width:20px;
background-color:rgba(15,15,15,.8);
position:fixed;
top:20px;
bottom:20px;
overflow:auto;
}
#showoption_status:not(.stop)
#showoption_status
{
top:20px;
left:20px;
}
#showoption_status.stop
{
border-radius:5px;
right:20px;
}
#showoption.horizontal>#showoption_status:not(.stop)
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
border-right-width:10px;
float:left;
left:20px;
bottom:20px;
right:50%;
}
#showoption_status.stop
#showoption.vertical>#showoption_status:not(.stop)
{
border-radius:5px;
left:20px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-width:10px;
bottom:50%;
right:20px;
}
#showoption_option:not(.stop)
#showoption_option
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
border-left-width:10px;
float:right;
left:50%;
bottom:20px;
right:20px;
}
#showoption_option.stop
{
display:none!important;
}
#showoption.horizontal>#showoption_option:not(.stop)
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
border-left-width:10px;
top:20px;
left:50%;
}
#showoption.vertical>#showoption_option:not(.stop)
{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-width:10px;
top:50%;
left:20px
}
#showoption_status_announcelist
{

4
index.html
View File

@ -33,9 +33,9 @@
<script type="text/javascript" src="js/function.option.js"></script>
<script type="text/javascript" src="js/function.show.js"></script>
<script>
window.onload=(function(){onloadfunction();setaria2params();});
window.onload=onloadfunction;
window.onhashchange=setaria2params;
window.onresize=onloadfunction;
window.onresize=setdirection;
</script>
<title>aria2 WIOW</title>
</head>

55
js/function.common.js
View File

@ -57,6 +57,11 @@ function popattr(node,attr){
return value;
};
function replace_class(node,oldcls,newcls){
node.classList.remove(oldcls);
node.classList.add(newcls);
};
function warning_dialog(string){
return 0;
};
@ -164,38 +169,38 @@ function autoinputsize(node){
function setaria2params(){
let hostname=location.hostname;
let hashlist=location.hash.substring(1).split('&');
let hashdata={};
let hashdata={
'aria2_host':(!hostname)?'127.0.0.1':hostname,
'aria2_port':'6800',
'aria2_token':'',
};
for(let [match,key,value] of hashlist.map(n=>n.match(/^([^=]*)=?(.*)$/))){
hashdata[key]=value;
};
document.getElementById('wshost').value=hashdata['aria2_host']||(hostname===''?'127.0.0.1':hostname);
document.getElementById('wsport').value=hashdata['aria2_port']||'6800';
document.getElementById('rpctoken').value=hashdata['aria2_token']||'';
document.getElementById('wshost').value=hashdata['aria2_host'];
document.getElementById('wsport').value=hashdata['aria2_port'];
document.getElementById('rpctoken').value=hashdata['aria2_token'];
};
function setdirection(){
let is_horizontal=window.outerWidth>window.outerHeight;
let direction_del=is_horizontal?'vertical':'horizontal';
let direction_add=is_horizontal?'horizontal':'vertical'
// cls may not exists in classList (on startup), thus using add/remove instead of replace
replace_class(document.body,direction_del,direction_add);
replace_class(document.getElementById('side'),direction_del,direction_add);
replace_class(document.getElementById('showoption'),direction_del,direction_add);
};
function onloadfunction(){
let w=window.innerWidth;
let h=window.innerHeight;
let stl=document.querySelectorAll('.sidetag');
let main=document.getElementById('main');
let side=document.getElementById('side');
let wss_scheme=document.getElementById('wss_scheme');
let body=document.body;
let is_https=location.protocol==='https:';
close_option(document.getElementById('close_option'));
wss_scheme.checked=(location.protocol==='https:');
wss_scheme.disabled=(location.protocol==='https:');
if(w>h){
body.style.flexDirection='row';
body.style.alignContent='flex-start';
body.style.justifyContent='flex-start';
side.style.flexDirection='column';
side.style.order=0;
}else{
body.style.flexDirection='column';
body.style.alignContent='flex-end';
body.style.justifyContent='flex-end';
side.style.flexDirection='row';
side.style.order=2;
};
wss_scheme.checked=is_https;
wss_scheme.disabled=is_https;
setaria2params();
setdirection();
return 0;
};