新增下載瀏覽排序

api-list.php

@@ -61,12 +61,28 @@ if (!isset($_SESSION['loggedin'])) {
 							<div class="inner-toolbar">
 								<ul>
 									<search-bar></search-bar>
+
+									
+									<li>
+										<ul class="button-group nav nav-pills nav-pills-primary sort-by-button-group" data-filter-group="type">
+											<li>
+												<label>排序</label>
+											</li>
+											<li class="active">
+												<button data-sort-by="downloadTimes" class="btn btn-primary">下載熱門</button>
+											</li>
+											<li class="active">
+												<button data-sort-by="viewTimes" class="btn btn-primary">瀏覽熱門</button>
+											</li>
+										</ul>
+									</li>
+									
 									<filter-bar></filter-bar>
 								</ul>
 							</div>
 							<filter-content2></filter-content2>
 							<div class="row mg-files" data-sort-destination="" data-sort-id="media-gallery" id="content" style="position: relative; height: 720.5px;">
-								<isotope-item v-for="item in list" v-bind:name="item.APIName" v-bind:folder="item.APIID + item.APIName" v-bind:id="item.id" v-bind:object="item.object" v-bind:usage="item.usage" v-bind:software="item.software" v-bind:detail="item.detail" v-bind:operate="item.operate" v-bind:source="item.source">
+								<isotope-item v-for="item in list" v-bind:name="item.APIName" v-bind:folder="item.APIID + item.APIName" v-bind:id="item.id" v-bind:object="item.object" v-bind:usage="item.usage" v-bind:software="item.software" v-bind:detail="item.detail" v-bind:operate="item.operate" v-bind:source="item.source" v-bind:view-times="item.viewTimes" v-bind:download-times="item.downloadTimes" >
 								</isotope-item>
 
 							</div>
@@ -107,6 +123,8 @@ if (!isset($_SESSION['loggedin'])) {
 				listObj["detail"] = table[i].detail;
 				listObj["operate"] = table[i].operate;
 				listObj["source"] = table[i].source;
+				listObj["viewTimes"] = table[i].viewTimes;
+				listObj["downloadTimes"] = table[i].downloadTimes;
 				list.push(listObj);
 			}
 
@@ -145,15 +163,25 @@ if (!isset($_SESSION['loggedin'])) {
 			layoutMode: 'fitRows',
 			getSortData: {
 				name: '.name',
+				viewTimes: '.viewTimes parseInt',
+				downloadTimes: '.downloadTimes parseInt',
 			}
 		})
 
 		setTimeout(() => {
 			$grid.isotope({
-				sortBy: 'name'
+				sortBy: 'name',
 			})
 		}, 100);
 
+		$('.sort-by-button-group').on( 'click', 'button', function() {
+			var sortByValue = $(this).attr('data-sort-by');			
+			$grid.isotope({ 
+				sortBy: sortByValue,
+				sortAscending: false,
+
+			 });
+		});
 		//	});
 	</script>
 

script/js/global.js

@@ -609,6 +609,8 @@ vm.component('isotope-item', {
         detail: String,
         source: String,
         operate: String,
+        viewTimes: Number,
+        downloadTimes: Number,
     },
     computed: {
         addClass() {
@@ -630,6 +632,8 @@ vm.component('isotope-item', {
             <div><img v-bind:href="bindHref(software,name,folder)" v-bind:src="bindHref(software,name,folder)" class="img-responsive" alt="Project" onerror="this.src='assets/images/not-found-image.jpg'" style="transform: scale(1);"></div>
             
         </div>
+        <p class="viewTimes" hidden>{{viewTimes}}</p>
+        <p class="downloadTimes" hidden>{{downloadTimes}}</p>
         <a class="name" v-bind:href="hrefLink(id)">{{name}}</a>
         <div class="mg-description"><small style="display:none;">{{detail}}</small><small class="operate" style="display:none;">{{operate}}</small><small class="source" style="display:none;">{{source}}</small><small class="pull-right text-muted software" >{{software}}</small></div>
     </div>