TheDesk Miho(ver.7)

app/css/sort.css

@@ -0,0 +1,13 @@
+.drag-content{
+	width:300px;
+	max-width:100%;
+	height:30px;
+	text-overflow: ellipsis;
+	cursor:move;
+	user-select: none;
+	background-color:#424242;
+	margin:5px;
+	border-radius:5px;
+	color:white;
+	padding:3px;
+}

app/css/tl.css

@@ -1,5 +1,7 @@
 /*TL CSS(ただしBBCode pulse:master.css/spin:font-awesome*/
 #timeline-container {
+  overflow-x: scroll;
+  overflow-y: hidden;
   display: flex;
   width: 100vw;
   height: 100vh;
@@ -8,7 +10,7 @@ iframe {
 	max-width:100%;
 }
 .box {
-  overflow-y: hidden;
+  overflow: hidden;
   min-width: 300px;
   height: 100vh;
   flex: 1;
@@ -132,7 +134,7 @@ p {
 }
 
 /*black theme*/
-.blacktheme #notf-box, .notf-box {
+.blacktheme .notf-box {
   background-color: #424242;
 }
 .blacktheme .modal-footer {

app/index.html

@@ -23,7 +23,7 @@
 <script type="text/javascript" src="./js/common/keyshortcut.js"></script>
 <script type="text/javascript" src="./js/common/modal.js"></script>
 <script>
-var ver="Miho (ver.6)";
+var ver="Miho (ver.7)";
 //betaを入れるとバージョンチェックしない
 //var ver="beta";
 var acct_id=0;
@@ -316,9 +316,10 @@ var tlid=0;
        </div>
 	  </div>
     <div class="modal-footer">
-	<a href="#!" class="modal-action waves-effect waves-green btn-flat" id="his-follow-btn" onclick="follow()">フォロー</a>
+	  <button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn" onclick="historyShow()">一つ前のユーザーデータ</button>
-	<a href="#!" class="modal-action waves-effect waves-green btn-flat" id="his-mute-btn" onclick="mute()">ミュート</a>
+	  <a href="#!" class="modal-action waves-effect waves-green btn-flat" id="his-follow-btn" onclick="follow()">フォロー</a>
-	<a href="#!" class="modal-action waves-effect waves-green btn-flat" id="his-block-btn" onclick="block()">ブロック</a>
+	  <a href="#!" class="modal-action waves-effect waves-green btn-flat" id="his-mute-btn" onclick="mute()">ミュート</a>
+	  <a href="#!" class="modal-action waves-effect waves-green btn-flat" id="his-block-btn" onclick="block()">ブロック</a>
       <a href="#!" class="modal-action waves-effect waves-green btn-flat" onclick="hisclose()">Close</a>
     </div>
   </div>

app/js/common/keyshortcut.js

@@ -10,6 +10,13 @@ $(function($) {
 				return false;
 			}
 		}
+		//Shift+Enter:Markdown
+		if (event.shiftKey) {
+			if (e.keyCode === 13) {
+				brInsert("　\n");
+				return false;
+			}
+		}
 		//Esc:消す
 		if (e.keyCode === 27) {
 			hide();

app/js/post/emoji.js

@@ -112,3 +112,9 @@ function emojiInsert(code, del) {
 	}
 	$("#textarea").focus();
 }
+//改行挿入
+function brInsert(code) {
+	var now = $("#textarea").val();
+	$("#textarea").val(now + code);
+	$("#textarea").focus();
+}

app/js/tl/card.js

@@ -46,8 +46,13 @@ function additional(acct_id, tlid) {
 					$("[toot-id=" + id + "]").addClass("parsed");
 				}
 			});
+		}else{
+			$(this).attr("title",text);
 		}
 	});
+	$("#timeline_" + tlid + " .toot:not(:has(a:not(.add-show)))").each(function(i, elem) {
+		$(this).parent().find(".add-show").hide();
+	});
 	//Markdownイメージビューワー
 	$("#timeline_" + tlid + " .toot a:not(.img-parsed):has(img)").each(function(i, elem) {
 			var ilink=$(this).attr("href");
@@ -61,6 +66,50 @@ function additional(acct_id, tlid) {
 	});
 }
 
+function additionalIndv(tlid, acct_id, id) {
+		var domain = localStorage.getItem("domain_" + acct_id);
+		var at = localStorage.getItem(domain + "_at");
+		var text = $("[toot-id="+id+"] .toot a").attr('href');
+		var urls = text.match(
+			/https?:\/\/([-a-zA-Z0-9@.]+)\/media\/([-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/
+		);
+		if (urls) {
+			$("[toot-id="+id+"] .toot a").remove();
+		} else {
+
+			var id = $("[toot-id="+id+"] .toot a").parents('.cvo').attr("toot-id");
+			var start = "https://" + domain + "/api/v1/statuses/" + id + "/card";
+			fetch(start, {
+				method: 'GET',
+				headers: {
+					'content-type': 'application/json',
+					'Authorization': 'Bearer ' + at
+				},
+				//body: JSON.stringify({})
+			}).then(function(response) {
+				return response.json();
+			}).catch(function(error) {
+				todo(error);
+				console.error(error);
+			}).then(function(json) {
+				console.log(json);
+				if (json.title) {
+					$("[toot-id=" + id + "] .additional").html(
+						"<span class=\"gray\">URLチェック:<br>Title:" + json.title + "<br>" +
+						json.description + "</span>");
+				}
+				if (json.html) {
+					$("[toot-id=" + id + "] .additional").html(json.html);
+
+				}
+				if (json.title) {
+					$("[toot-id=" + id + "] a:not(.parsed)").addClass("parsed");
+					$("[toot-id=" + id + "]").addClass("parsed");
+				}
+			});
+		}
+}
+
 //各TL上方のLink[On/Off]
 function cardToggle(tlid) {
 	var card = localStorage.getItem("card_" + tlid);

app/js/tl/notification.js

@@ -33,13 +33,14 @@ function notf(acct_id, tlid, sys) {
 		at;
 
 	console.log(start);
-	var websocket = new WebSocket(start);
+	var wsid = websocketNotf.length;
-	console.log(websocket);
+	websocketNotf[wsid] = new WebSocket(start);
-	websocket.onopen = function(mess) {
+	console.log(websocketNotf);
+	websocketNotf[wsid].onopen = function(mess) {
 		console.log("Connect Streaming API:");
 		console.log(mess);
 	}
-	websocket.onmessage = function(mess) {
+	websocketNotf[wsid].onmessage = function(mess) {
 		console.log("Receive Streaming API:");
 
 		var obj = JSON.parse(JSON.parse(mess.data).payload);
@@ -62,7 +63,7 @@ function notf(acct_id, tlid, sys) {
 		}
 
 	}
-	websocket.onerror = function(error) {
+	websocketNotf[wsid].onerror = function(error) {
 		console.error('WebSocket Error ' + error);
 	};
 }

app/js/tl/parse.js

@@ -177,7 +177,8 @@ function parse(obj, mix, acct_id) {
 			api_spoil + ' cw_text_' + toot.id + '">' + spoil + spoiler_show +
 			'</span>' +
 			'' + viewer + '' +
-			'<div class="additional"></div><span class="cbadge"><i class="fa fa-clock-o"></i>' +
+			'<div class="additional"><a onclick="additionalIndv(\'' + tlid + '\',' + acct_id +
+			',\''+id+'\')" class="add-show pointer">URL解析</a></div><span class="cbadge"><i class="fa fa-clock-o"></i>' +
 			date(toot.created_at, datetype) + '</span>' +
 			'<span class="cbadge">via ' + via +
 			'<help class="white-text">どこから投稿したか</help></span>' + mentions + tags +

app/js/tl/tl.js

@@ -139,6 +139,11 @@ function moreload(type, tlid) {
 	var acct_id = obj[tlid].domain;
 	if (!type) {
 		var type = obj[tlid].type;
+	}else{
+		var data;
+	}
+	if(type=="tag"){
+		var data=obj[tlid].data;
 	}
 	var sid = $("#timeline_" + tlid + " .cvo").last().attr("toot-id");
 	console.log(localStorage.getItem("morelock") + ":" + sid)
@@ -152,7 +157,7 @@ function moreload(type, tlid) {
 		todo(cap(type) + " TL MoreLoading");
 		var domain = localStorage.getItem("domain_" + acct_id);
 		var at = localStorage.getItem(domain + "_at");
-		var start = "https://" + domain + "/api/v1/timelines/" + com(type) +
+		var start = "https://" + domain + "/api/v1/timelines/" + com(type,data) +
 			"max_id=" + sid;
 		fetch(start, {
 			method: 'GET',
@@ -206,6 +211,14 @@ function tlCloser() {
 
 	});
 	websocketLocal = [];
+	Object.keys(websocketNotf).forEach(function(tlid) {
+		if (websocketNotf[tlid]) {
+			websocketNotf[tlid].close();
+			console.log("Close Streaming API:Notf" + tlid);
+		}
+
+	});
+	websocketLocal = [];
 }
 
 //TLのタイトル

app/js/ui/layout.js

@@ -4,6 +4,7 @@
 	var websocket = [];
 	var websocketHome = [];
 	var websocketLocal = [];
+	var websocketNotf = [];
 
 	//カラム追加ボックストグル
 	function addToggle() {
@@ -53,7 +54,7 @@
 		tlCloser();
 		Object.keys(obj).forEach(function(key) {
 			var acct = obj[key];
-			var html = '<div class="box" id="timeline_' + key + '_box" tlid="' + key +
+			var html = '<div class="box" id="timeline_box_' + key + '_box" tlid="' + key +
 				'"><div class="notice-box"><span id="notice_' + key + '"></span><br>' +
 				'<a onclick="notfToggle(' + acct.domain + ',' + key +
 				')" class="setting nex" title="このアカウントの通知"><i class="material-icons nex notf-icon_' +
@@ -65,8 +66,8 @@
 				key + '">On</span></a><a onclick="goTop(' + key + ')" class="setting nex"><i class="material-icons nex" title="一番上へ">vertical_align_top</i></a>' +
 				'<div class="hide notf-indv-box" id="notf-box_' + key +
 				'"><div id="notifications_' + key +
-				'"></div></div></div><div class="tl-box"><div id="timeline_' + key +
+				'"></div></div></div><div class="tl-box" tlid="' + key + '"><div id="timeline_' + key +
-				'" class="tl"></div></div></div>';
+				'" class="tl" tlid="' + key + '"></div></div></div>';
 			$("#timeline-container").append(html);
 			if (acct.data) {
 				var data = acct.data;

app/js/ui/scroll.js

@@ -1,13 +1,13 @@
 //スクロールで続きを読む
 function scrollevent() {
-	$(".box").scroll(function() {
+	$(".tl-box").scroll(function() {
 		scrollck();
 	});
 }
 scrollevent();
 
 function scrollck() {
-	$(".box").each(function(i, elem) {
+	$(".tl-box").each(function(i, elem) {
 		var tlid = $(this).attr('tlid');
 		//一番上ならためていた新しいトゥートを表示
 		if ($(this).scrollTop() == 0) {

app/js/ui/settings.js

@@ -131,6 +131,8 @@ function load() {
 		var img = "no-act";
 	}
 	$("#i_" + img).prop("checked", true);
+	//並べ替え
+	sortload();
 }
 //最初に読む
-load();
+load();

app/js/ui/sort.js

@@ -0,0 +1,74 @@
+//ソートデータ読み込み
+function sortload(){
+	var col = localStorage.getItem("column");
+		if (col) {
+			var obj = JSON.parse(col);
+		}
+		Object.keys(obj).forEach(function(key) {
+			var acct = obj[key];
+			var flag="false";
+			if(localStorage.getItem("card_" + key)=="true"){
+				flag="true"
+			}
+			var html='<li class="drag-content" data-id="'+key+'" data-flag="'+flag+'">'+localStorage.getItem("domain_" + acct.domain)+" "+cap(acct.type, acct.data)+' TL</li>';
+			$("#sort").append(html);
+		});
+		drag();
+}
+
+//TLのタイトル
+function cap(type, data) {
+	if (type == "home") {
+		return "Home"
+	} else if (type == "local") {
+		return "Local"
+	} else if (type == "pub") {
+		return "Public"
+	} else if (type == "tag") {
+		return "#" + data
+	} else if (type == "list") {
+		return "List(id:" + data + ")"
+	} else if (type == "notf") {
+		return "Notification"
+	}
+}
+
+//jquery-ui依存
+function drag(){
+	$('#sort').sortable();
+	$('#sort').disableSelection();
+}
+
+//ソート指定
+function sort(){
+	var arr=[];
+	var flags=[];
+	$(".drag-content").each(function(i, elem) {
+		var id=$(this).attr("data-id");
+		var flag=$(this).attr("data-flag");
+		arr.push(id)
+		flags.push(flag);
+	});
+	var col = localStorage.getItem("column");
+	var obj = JSON.parse(col);
+	var newobj=[];
+	for(i=0;i<arr.length;i++){
+		var data=obj[arr[i]];
+		var add = {
+			domain: data.domain,
+			type: data.type,
+			data:data.data
+		};
+		newobj.push(add);
+		if(flags[i]=="true"){
+			localStorage.setItem("card_" + i, "true");
+		}else{
+			localStorage.removeItem("card_" + i);
+		}
+	}
+	var json = JSON.stringify(newobj);
+	localStorage.setItem("column", json);
+	$("#sort").html("");
+	Materialize.toast("並べ替え完了。", 3000);
+	sortload();
+}

app/js/userdata/showOnTL.js

@@ -1,4 +1,5 @@
 //ユーザーデータ表示
+localStorage.removeItem("history");
 function udg(user, acct_id) {
 	if (!user) {
 		user = localStorage.getItem("user-id");
@@ -19,6 +20,13 @@ function udg(user, acct_id) {
 		todo(error);
 		console.error(error);
 	}).then(function(json) {
+		//一つ前のユーザーデータ
+		if (!localStorage.getItem("history")){
+			$("#his-history-btn").prop("disabled",true);
+		}else{
+			$("#his-history-btn").prop("disabled",false);
+			$('#his-data').attr("history", localStorage.getItem("history"));
+		}
 		//moved設定時
 		if (json.moved) {
 			Materialize.toast(
@@ -48,6 +56,7 @@ function udg(user, acct_id) {
 			$('ul.tabs').tabs();
 			$('#his-data').css('background-size', 'cover');
 			$("#his-since").text(crat(json.created_at));
+			localStorage.setItem("history" , user);
 		}
 		//自分の時
 		if (json.acct == localStorage.getItem("user")) {
@@ -71,6 +80,12 @@ function udg(user, acct_id) {
 		todc();
 	});
 }
+//一つ前のユーザーデータ表示
+function historyShow(){
+	var acct_id=$('#his-data').attr("use-acct");
+	var user=$('#his-data').attr("history");
+	udg(user, acct_id, "true")
+}
 
 //FF関係取得
 function relations(user, acct_id) {
@@ -163,4 +178,6 @@ function hisclose() {
 	$("#his-data-nav").show();
 	$(".cont-series").html("");
 	$("#domainblock").val("");
+	$('#his-data').attr("history", "");
+	localStorage.removeItem("history");
 }

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "TheDesk",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "TheDesk on Mastodonはシンプルと多機能を両立したデスクトップ向けクライアントです",
   "main": "main.js",
   "scripts": {

app/setting.html

@@ -8,16 +8,18 @@
 <link href='./css/font-awesome.css' rel='stylesheet' type='text/css'>
 <link href='./css/tl.css' rel='stylesheet' type='text/css'>
 <link href='./css/userdata.css' rel='stylesheet' type='text/css'>
+<link href='./css/sort.css' rel='stylesheet' type='text/css'>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet">
 <meta charset="utf-8">
 </head>
-<body id="mainView">
+<body id="mainView" style="overflow-y:scroll">
 <script type="text/javascript" src="./js/common/jquery.js"></script>
 <script type="text/javascript" src="./js/platform/first.js"></script>
 <script type="text/javascript" src="./js/common/materialize.js"></script>
 <script type="text/javascript" src="./js/ui/tips.js"></script>
 <script type="text/javascript" src="./js/common/time.js"></script>
 <script type="text/javascript" src="./js/common/modal.js"></script>
+<script type="text/javascript" src="./js/ui/jquery-ui.min.js"></script>
 <div id="tools">
 <div id="notice" >Settings</div>
 <a onclick="notfToggle()" class="setting nex"><i class="material-icons nex notf-icon">notifications</i></a>
@@ -26,6 +28,9 @@
 </div>
 <div id="notf-box" class="hide"><div id="notifications">Notifications will be showed here...</div><button class="btn waves-effect orange more-hide" style="width:calc( 100% - 10px); padding:0;" onclick="notfToggle()">閉じる</button></div>
 <a href="acct.html" class="btn waves-effect blue nex" style="width:100%; max-width:400px;">アカウントマネージャー</a><br>
+<h5>カラム並べ替え</H5>
+<ul id="sort"></ul>
+<button onclick="sort()"  class="btn waves-effect light-blue nex" style="width:100%; max-width:200px;">並べ替え設定</button><br><br><br>
 <h5>時間表記設定</h5>
 相対時間の例:"1分前","3日前"<br>
 絶対時間の例"23:25:21","2017年12月30日 23:59:00"<br>
@@ -105,9 +110,7 @@
 	
 <button class="btn waves-effect"  style="width:100%; max-width:200px;" onclick="settings()">設定</button><br>
 <br>
-<button class="btn waves-effect red" style="width:100%; max-width:200px;" onclick="if(confirm('初期化します')){ localStorage.clear(); location.href='index.html'; }">初期化</button><br>
+<br><br>
-
-
 <a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;">戻る</a><br>
 <br>
 キーボードショートカット一覧<br>
@@ -119,6 +122,7 @@ L:Local TL<br>
 P:連合 TL<br>
 [スペース]+Shift:更新<br>
 <br>
+<button class="btn waves-effect red" style="width:100%; max-width:500px;" onclick="if(confirm('初期化します')){ localStorage.clear(); location.href='index.html'; }">初期化</button><br>
 <button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;">このソフトについて</button><br>
 <a href="https://desk.cutls.com" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;">公式HP</a><br>
 <a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;">寄付(Enty)</a><br>
@@ -169,6 +173,7 @@ Developer: <a onclick="udg('12336')" style="cursor:pointer" class="nex pointer">
 <script type="text/javascript" src="./js/common/about.js"></script>
 <script type="text/javascript" src="./js/platform/end.js"></script>
 <script type="text/javascript" src="./js/login/logout.js"></script>
+<script type="text/javascript" src="./js/ui/sort.js"></script>
 <script type="text/javascript" src="./js/ui/settings.js"></script>
 <script type="text/javascript" src="./js/ui/theme.js"></script>
 <script type="text/javascript" src="./js/userdata/showOnTL.js"></script>