ISO download dialog

SilverRainZ · Nov 13, 2016 · f1b49c4 · f1b49c4
1 parent 6fdccd2
commit f1b49c4
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 51 deletions.
diff --git a/_config.yml b/_config.yml
@@ -27,6 +27,8 @@ gems:
     - jekyll-babel
     - jekyll-sitemap
 
+babel_js_extensions: 'es6'
+
 exclude: [Gemfile, Gemfile.lock, README.md, gen_robot.sh, vendor]
 
 # Content Related

diff --git a/index.html b/index.html
@@ -6,9 +6,10 @@
 	{% include head.html %}
 	<body>
 		{% include nav.html %}
-
+	
 		<div id="mirrors">
 			<div class="spacing hidden-xs"></div>
+
 			<div class="container">
 				<div class="row">
 					<div class="col-md-8 table-responsive">
@@ -27,10 +28,6 @@ <h3><span class="fa fa-cube"></span> 镜像列表 </h3>
 					<div class="col-md-4">
 						<div class="spacing hidden-xs"></div>
 						<div id="wizard">
-							<!-- Button trigger iso modal -->
-							<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#isoModal">
-								获取安装镜像
-							</button>
 						</div>
 						<div id="news">
 							<h4><span class="fa fa-bullhorn"></span> 新闻公告 </h4>
@@ -49,6 +46,13 @@ <h4> <span class="fa fa-link"></span> 域名选择 </h4>
 								<li><a href="https://mirrors4.tuna.tsinghua.edu.cn/">https://mirrors4.tuna.tsinghua.edu.cn/</a> 只解析 IPv4</li>
 							</ul>
 						</div>
+						<div>
+							<h4><span class="fa fa-file-archive-o"></span> 下载链接 </h4>
+							<p>常用发行版 iso 和应用工具安装包直接下载</p>
+							<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#isoModal">
+								获取下载链接
+							</button>
+						</div>
 						<div>
 							<h4> <span class="fa fa-envelope-o"></span> 联系我们 </h4>
 							<ul>
@@ -76,6 +80,7 @@ <h4> <span class="fa fa-external-link"></span> 相关链接 </h4>
 		{% include footer.html %}
 		<!-- iso download wizard modal -->
 		<!-- Modal -->
+		{% raw %}
 		<div class="modal fade" id="isoModal" tabindex="-1" role="dialog" aria-labelledby="isoModalLabel" aria-hidden="true">
 		  <div class="modal-dialog" role="document">
 		    <div class="modal-content">
@@ -86,18 +91,35 @@ <h4> <span class="fa fa-external-link"></span> 相关链接 </h4>
 		        <h4 class="modal-title" id="isoModalLabel">获取安装镜像</h4>
 		      </div>
 		      <div class="modal-body">
-						<p>选择安装发行版： <select class="selectpicker" id="isodistro" ></select></p>
-						<p>选择发行版版本： <select class="selectpicker" id="isoversion">
-								<option value="none">-</option>
-						</select>
-						</p>
-		      </div>
-		      <div class="modal-footer">
-		        <button type="button" class="btn btn-primary" id="btn_download">下载</button>
+					<div class="row">
+						<div class="col-md-12">
+							<ul class="nav nav-tabs">
+								<li role="presentation" :class="[curCategory === 'os' ? 'active' : '']" @click="switchCategory('os')"><a href="#">操作系统</a></li>
+								<li role="presentation" :class="[curCategory === 'app' ? 'active' : '']" @click="switchCategory('app')"><a href="#">应用软件</a></li>
+							</ul>
+						</div>
+						<div class="col-md-4">
+							<ul class="nav nav-pills nav-stacked">
+								<li v-for="distro in curDistroList" :class="[selected.distro == distro.distro ? 'active' : '']">
+									<a href="#" @click="switchDistro(distro)">{{ distro.distro }}</a>
+								</li>
+							</ul>
+						</div>
+						<div class="col-md-8">
+							<h3>{{selected.distro}}</h3>
+							<ul>
+								<template v-for="url in selected.urls">
+								<li><a :href="url.url">{{url.name}}</a></li>
+								</template>
+							</ul>
+						</div>
+					</div>
+
 		      </div>
 		    </div>
 		  </div>
 		</div><!-- /iso download wizard modal -->
+		{% endraw %}
 
 	</body>
 	{% raw %}

diff --git a/static/js/index.es6 b/static/js/index.es6
@@ -89,48 +89,38 @@ window.refreshMirrorList = () => {
 	setTimeout(refreshMirrorList, 10000);
 }
 
-window.modal = () => {
-	var bx = document.getElementById("isomodal");
-	bx.style.visibility = (bx.style.visibility == "visible") ? "hidden" : "visible";
-}
-
-window.switchDistro = () => {
-	var distro = document.getElementById("isodistro");
-	var idx = distro.selectedIndex;
-	var s = document.getElementById('isoversion');
-	s.options.length = 0;
-	for (var i = 0; i < isoinfo[idx].urls.length; i++) {
-		s.options[s.options.length] = new Option(isoinfo[idx].urls[i].name, i)
-	}
-	$('.selectpicker').selectpicker('refresh')
-
-}
+refreshMirrorList();
 
-var refreshISOList = () => {
-	$.getJSON("/static/isoinfo.json", (isoinfo) => {
-		window.isoinfo = isoinfo;
-		window.s = document.getElementById("isodistro");
-		s.options.length = 0;
-		for (var i = 0; i < isoinfo.length; i++) {
-			s.options[s.options.length] = new Option(isoinfo[i].distro, i);
+var vm = new Vue({
+	el: "#isoModal",
+	data: {
+		distroList: [],
+		selected: null,
+		curCategory: "os"
+	},
+	created: function () {
+		var self = this;
+		$.getJSON("/static/isoinfo.json", function (isoinfo) {
+			self.distroList = isoinfo;
+			self.selected = self.curDistroList[0];
+		});
+	},
+	computed: {
+		curDistroList () {
+			return this.distroList.filter((x)=> x.category === this.curCategory);
 		}
-		$('.selectpicker').selectpicker('refresh')
-		switchDistro();
-	});
-}
+	},
+	methods: {
+		switchDistro (distro) {
+			this.selected = distro;
+		},
+		switchCategory (category) {
+			this.curCategory = category;
+			this.selected = this.curDistroList[0];
+		}
+	}
 
-$('#isodistro').change(switchDistro);
-$('#btn_download').click(() => {
-	var distro = document.getElementById("isodistro");
-	var version = document.getElementById("isoversion");
-	var i = distro.selectedIndex;
-	var j = version.selectedIndex;
-	var link = isoinfo[i].urls[j].url;
-	window.open(link);
-	$('#isoModal').modal('toggle');
 });
-refreshISOList();
-refreshMirrorList();
 
 });