Skip to content

Commit

Permalink
增加历史版本demo页面的访问工具
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiangyuecn
xiangyuecn committed Mar 6, 2022
1 parent 0a7805c commit 388735b
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 45 deletions.
2 changes: 1 addition & 1 deletion QuickStart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
<a class="lb" href="https://xiangyuecn.gitee.io/recorder/assets/工具-代码运行和静态分发Runtime.html" target="_blank">Demo列表(可编辑)</a>
<a class="lb" href="https://jiebian.life/web/h5/github/recordapp.aspx" target="_blank" style="text-decoration: line-through">RecordApp</a>

<a class="lb" href="https://xiangyuecn.gitee.io/recorder/assets/工具-GitHub页面历史版本访问.html#url=xiangyuecn:Recorder,/QuickStart.html" target="_blank">切换到老版本测试</a>
<a class="lb" href="https://xiangyuecn.gitee.io/recorder/assets/工具-GitHub页面历史版本访问.html#url=xiangyuecn:Recorder@1.0.20032600,/QuickStart.html" target="_blank">切换到老版本测试</a>
</div>
</div>

Expand Down
113 changes: 70 additions & 43 deletions assets/工具-GitHub页面历史版本访问.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
</head>

<body>
<div style="padding:10px;background:#fff;border-bottom:4px solid #f60;position:relative;">
<div style="font-size:16px;line-height:1.4">
<div style="padding:10px;background:#fff;border-bottom:4px solid #f60;border-radius: 8px;position:relative;">
<div title="是有多无聊才会写出这个页面，想学吗？Ctrl+U查看源码！"
style="cursor:zoom-in;position:absolute;left:12px;bottom:0px;font-size:12px;color:#f60">
<script>
Expand All @@ -23,7 +24,7 @@

<span style="margin-right:20px;display:inline-block">
仓库路径：
<input class="OldVer_Url" placeholder="格式：user:repo,path" style="height:24px;width:min(340px, 70vw)">
<input class="OldVer_Url" placeholder="格式：`user:repo@*,path` @可选:@提交hash @分支名" style="height:24px;width:340px;width:min(340px, 70vw)">
</span>
<span style="margin-right:20px;display:inline-block">
版本：
Expand All @@ -33,8 +34,9 @@
<button style="padding:5px 30px" onclick="OldVerReload()">加载</button>
</span>
</div>
<div class="OldVer_LogsElem" style="padding:20px">
<div class="OldVer_Logs" style="border:1px solid #f60;background:#fff;padding:10px"></div>
<div class="OldVer_LogsElem" style="padding:15px 20px">
<div class="OldVer_Logs" style="border:1px solid #f5f5f5;background:#fff;padding:12px;border-radius: 6px;box-shadow: 2px 2px 3px #aaa;"></div>
</div>
</div>

<script>
Expand All @@ -43,10 +45,22 @@
window.OldVerReload=function(){
var url=document.querySelector(".OldVer_Url").value;
var ver=document.querySelector(".OldVer_Ver").value;
if(url && !parseUrl(url)){
var info=parseUrl(url);
if(url && !info){
alert("仓库路径无效");
return;
}
if(info && info.inVer){
if(info.inVer!=urlInfo.inVer){//已修改路径中的ver
ver="";
}else if(ver!=inVerTxt){//下拉选择了版本号
info.inVer="";
url=toUrl(info);
}
}
if(ver==inVerTxt){
ver="";
}
location.href="#ver="+encodeURIComponent(ver)+"&url="+encodeURIComponent(url);
location.reload();
};
Expand All @@ -56,22 +70,32 @@
var args_ver=decodeURIComponent((/\bver=([^&#]+)/.exec(location.href)||[])[1]||"");
document.querySelector(".OldVer_Url").value=args_url;

var toUrl=function(o){
return o.owner+":"+o.repo+(o.inVer?"@"+o.inVer:"")+","+o.path;
};
var parseUrl=function(url){
var m=/([^:]+):([^,]+),(.+)/i.exec(url);
var m=/([^:]+):([^,@]+)(?:@([^,]+))?,(.+)/i.exec(url);
if(!m)return null;
return {
owner:m[1]
,repo:m[2]
,path:m[3]||"/"
,url:"https://"+m[1]+".github.io/"+m[2]+m[3]
,inVer:m[3]||""
,path:m[4]
,url:"https://"+m[1]+".github.io/"+m[2]+m[4]
};
};
var urlInfo=parseUrl(args_url)||{};
if(urlInfo.inVer){
args_ver=urlInfo.inVer;
}
var inVerTxt="_InVer_";
var rootUrl="";

reclog("地址解析："+JSON.stringify(urlInfo),urlInfo.repo?2:1);
reclog("本工具支持简单处理 GitHub 页面的历史版本页面的访问展示，当前处理的地址为："+ToA(urlInfo.url)+" 指定的版本号："+(args_ver||"未指定"));
reclog("如果JsDelivr CDN无法访问，本工具将无法运行","#f60");
console.log("urlInfo",urlInfo);
reclog('<span style="font-weight:bold">本工具支持简单处理 GitHub 页面的历史版本页面的访问展示</span>'
+'；<span style="color:#f60">如果JsDelivr CDN无法访问，本工具将无法运行</span>'
+'；【用法】：仓库路径中填写 <span style="color:#cb05ff">GitHub 用户名 + : + 仓库名 + 可选@（@Release版本号、@提交Hash、@分支名称） + , + /文件路径</span> （仓库路径中填写的@值比选择的版本号优先级高），版本可以先不选，然后点击加载。首次加载好后，可以切换版本号（或明确在仓库路径中指定分支、某次提交）来查看不同历史的页面效果。');
reclog("当前处理的地址为："+ToA(urlInfo.url)+" 指定的版本号："+(args_ver||"未指定"));


//简单拦截处理地址
Expand Down Expand Up @@ -143,7 +167,7 @@
return;
}
var url="https://cdn.jsdelivr.net/gh/"+urlInfo.owner+"/"+urlInfo.repo+"/";
reclog('正在拉取版本号列表... [sync]'+ToA(url));
reclog('正在拉取版本号列表... [sync]'+ToA(url),"#bbb");
Load(url,function(txt){
txt=txt.replace(/\r|\n/g,"");
var m=/<select[^>]*versions\b.+?<\/select/.exec(txt);
Expand All @@ -162,28 +186,35 @@
return;
};
console.log("版本号列表",vers);
reclog("版本号列表加载完成，发现"+vers.length+"个版本");

var defaultVer=vers[0];//有些页面可以指定版本号
if(urlInfo.path=="/"){
defaultVer=vers[vers.length-1];
}else if(urlInfo.path=="/QuickStart.html"){
defaultVer="1.0.20032600";
};
if(vers.indexOf(defaultVer)==-1){
defaultVer=vers[0];
};
args_ver=args_ver||defaultVer;
args_ver=args_ver||vers[0];
rootUrl="https://cdn.jsdelivr.net/gh/"+urlInfo.owner+"/"+urlInfo.repo+"@"+args_ver;

var slcVer=args_ver;//下拉选中的值
if(vers.indexOf(args_ver)!=-1){
//值在列表中 NOOP
}else if(urlInfo.inVer){//路径中提供的
slcVer=inVerTxt;
}else{//不在列表中
opts.splice(0,0,'<option value="'+args_ver+'">[未知版本]'+args_ver+'</option>');
}

opts.splice(0,0,'<option value="'+inVerTxt+'">路径中填写@分支名、提交Hash</option>');
opts.splice(0,0,'<option value="">==不选==</option>');
var elem=document.querySelector(".OldVer_Ver");
elem.innerHTML=opts.join(" ");
elem.value=args_ver;
elem.value=slcVer;

var id="a"+Math.random().toString(16).substr(2);
reclog('要不要查看 ver:'+args_ver
+' 的<input class="in_'+id+'" value="/README.md" style="width:300px;height:20px">文件内容？'
+'<button onclick="OldVerLoadReadme(\''+id+'\')">拉取此文件</button>'
+'<div class="div_'+id+'"></div>');

reclog("版本号列表加载完成，发现"+vers.length+"个版本",2);
reclog('<span style="font-size:24px">要不要查看 ver:'+args_ver+' 的README.md？<button onclick="OldVerLoadReadme()">拉取README.md</button></span>',"#ffa0a0");
Step_LoadPage();
},function(err){
reclog("拉取列表失败："+err);
reclog("拉取列表失败："+err,"red;font-size:30px");
},true);
};

Expand All @@ -192,36 +223,32 @@
if(/\/$/.test(url)){
url+="index.html";
};
reclog("正在拉取 ver:"+args_ver+" 页面... [sync]"+ToA(url));
reclog("正在拉取 ver:"+args_ver+" 页面... [sync]"+ToA(url),"#bbb");
Load(url,function(html){
var title=(/>([^<>]+)<\/title>/.exec(html)||[])[1]||"";
if(title)document.title="[版本:"+args_ver+"] "+title;
reclog("拉取成功【"+title.replace(/<|'|"/g,"")+"】，已开始执行原始页面内容。",2);
reclog("拉取成功【"+title.replace(/<|'|"/g,"")+"】，已开始执行原始页面内容↓↓↓↓↓↓",2);

html=html.replace(/<!DOCTYPE.*?>/ig,"");
html=replaceHtmlAllSrc(html);
document.write(html);

var logsElem=document.querySelector(".OldVer_LogsElem");
for(var i=0;i<60;i++)
setTimeout(function(){ !abortLogsEnd&&document.body.appendChild(logsElem); },i*1000);
},function(err){
reclog("拉取页面失败："+err);
reclog("拉取页面失败："+err,"red;font-size:30px");
},true);
};


var abortLogsEnd=0;
window.OldVerLoadReadme=function(){
abortLogsEnd=true;
var url=rootUrl+"/README.md";
reclog("正在拉取 ver:"+args_ver+" README.md... [async]"+ToA(url));
window.OldVerLoadReadme=function(id){
var div=document.querySelector(".div_"+id);
var path=document.querySelector(".in_"+id).value;
if(!/^\//.test(path))path="/"+path;
var url=rootUrl+path;
div.innerHTML="正在拉取 ver:"+args_ver+" "+path+" ... [async]"+ToA(url);
Load(url,function(txt){
var id="a"+Math.random().toString(16).substr(2);
reclog("已拉取 ver:"+args_ver+' 的README.md ： <div><textarea class="'+id+'" style="width:90%;height:90vh"></textarea></div>');
document.querySelector("."+id).value=txt;
div.innerHTML="已拉取 ver:"+args_ver+' 的 '+path+' ： <div><textarea class="txt_'+id+'" style="width:90%;height:90vh"></textarea></div>';
document.querySelector(".txt_"+id).value=txt;
},function(err){
reclog("拉取README失败："+err);
div.innerHTML+='<div style="font-size:24px;color:red">拉取 '+path+" 失败："+err+"</div>";
});
};

Expand All @@ -238,7 +265,7 @@
+":"+("0"+now.getSeconds()).substr(-2);
var div=document.createElement("div");
var elem=document.querySelector(".OldVer_Logs");
elem.prepend(div);
elem.appendChild(div);
div.innerHTML='<div style="color:'+(!color?"":color==1?"red":color==2?"#0b1":color)+'">['+t+']'+s+'</div>';
};
function ToA(url,txt){
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@
<a href="https://xiangyuecn.gitee.io/recorder/QuickStart.html" target="_blank">QuickStart.html</a>
<span style="font-size:12px;color:#999">(Copy即用，更适合入门学习)</span>

<span class="lb">老版本 :</span> <a href="https://xiangyuecn.gitee.io/recorder/assets/工具-GitHub页面历史版本访问.html#url=xiangyuecn:Recorder,/" target="_blank">切换到老版本测试</a>
<span class="lb">老版本 :</span> <a href="https://xiangyuecn.gitee.io/recorder/assets/工具-GitHub页面历史版本访问.html#url=xiangyuecn:Recorder@1.0.19120600,/" target="_blank">切换到老版本测试</a>
</div>
</div>
</div>
Expand Down

0 comments on commit 388735b

Please sign in to comment.