Clear all notifications button

kokororin · kokororin · commit 96cacafaaeb7 · 2017-06-16T09:01:08.000+08:00
diff --git a/popup.css b/popup.css
@@ -3,15 +3,69 @@ body {
 	padding: 0;
 }
 
+#popup {
+	margin-top: 10px;
+}
+
 h1, h2, h3, h4, h5, h6 {
 	font-family: inherit;
 	font-weight: 500;
 	line-height: 1.2;
 	color: inherit;
 }
 
-button {
-	display: none;
+.btn {
+	display: inline-block;
+	margin-bottom: 0;
+	font-weight: normal;
+	text-align: center;
+	vertical-align: middle;
+	cursor: pointer;
+	background-image: none;
+	border: 1px solid transparent;
+	white-space: nowrap;
+	padding: 6px 12px;
+	font-size: 14px;
+	line-height: 1.42857;
+	border-radius: 4px;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	padding: 1px 5px;
+	font-size: 12px;
+	line-height: 1.5;
+	border-radius: 3px;
+}
+
+.btn-default {
+	color: #333;
+	background-color: #fff;
+	border-color: #ccc;
+}
+
+.btn-default:hover,
+.btn-default:focus,
+.btn-default:active,
+.btn-default.active,
+.open > .btn-default.dropdown-toggle {
+	color: #333;
+	background-color: #e6e6e6;
+	border-color: #adadad;
+}
+
+.btn:hover, .btn:focus {
+	color: #333;
+	text-decoration: none;
+}
+
+.btn.disabled, .btn[disabled] {
+	cursor: not-allowed;
+	pointer-events: none;
+	opacity: .65;
+	filter: alpha(opacity=65);
+	-webkit-box-shadow: none;
+	box-shadow: none;
 }
 
 a {
diff --git a/popup.html b/popup.html
@@ -4,7 +4,7 @@
   <link rel="stylesheet" href="popup.css">
 </head>
 <body>
-  <div id="popup" class="notify-stream"></div>
+  <div id="popup" class="notify-stream">载入中...</div>
   <script src="jquery.js"></script>
   <script src="popup.js"></script>
 </body>
diff --git a/popup.js b/popup.js
@@ -6,15 +6,36 @@ bg.getNotifications(function(data) {
 		alert('未登录');
 		chrome.tabs.create({ url: 'https://segmentfault.com/user/login' });
 	}
-	$('#popup').append($html.find('.stream-list').html());
+	$('#popup').empty().append($html.find('.stream-list').html());
 });
 
 $('#popup').on('click', 'a', function() {
 	var $this = $(this);
 	var href = $this.attr('href');
-	if (href.substring(0, 1) === '/' && href.substring(0, 2) !== '//') {
-		href = 'https://segmentfault.com' + href;
-	}
+	href = transUrl(href);
 	chrome.tabs.create({ url: href });
 	return false;
 });
+
+$('#popup').on('click', 'button', function() {
+	var $this = $(this);
+	var $unViewed = $('#popup').find('.stream-list__item:not(".viewed")');
+	$unViewed.each(function(index, el) {
+		var $el = $(el);
+		$el.addClass('viewed');
+		var url = $el.find('a:last').attr('href');
+		url = transUrl(url);
+		$.ajax({
+			url: url,
+			method: 'get'
+		});
+	});
+	$this.attr('disabled', true);
+});
+
+function transUrl(url) {
+	if (url.substring(0, 1) === '/' && url.substring(0, 2) !== '//') {
+		url = 'https://segmentfault.com' + url;
+	}
+	return url;
+}
