TheDesk Miho (ver.11)

app/css/master.css

@@ -50,7 +50,7 @@ option {
 .pointer {
   cursor: pointer;
 }
-.bbcode-pulse-loadings, .fa-pulse {
+.bbcode-pulse-loadings, .bbcode-pulse-loading, .fa-pulse {
   display: inline-block;
   animation-duration: 3s;
   animation-fill-mode: both;

app/css/tl.css

@@ -51,6 +51,9 @@ iframe {
   width: 100%;
   height: 200px;
 }
+.emoji-img{
+  width:17px;
+}
 .toot img:not(.emoji-img) {
   max-width: 100%;
   max-height: 300px;

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.10)";
+var ver="Miho (ver.11)";
 //betaを入れるとバージョンチェックしない
 //var ver="beta";
 var acct_id=0;
@@ -112,7 +112,7 @@ var tlid=0;
 <a href="acct.html"><i class="material-icons nex" title="アカウント管理">account_circle</i></a>
 <a href="index.html" class="setting nex"><i class="material-icons nex" title="スーパーリロード">refresh</i></a>
 <a onclick="window.open('https://thedesk.top/labo.php');" class="setting nex" target="_blank" id="ranking-btn" style="display:none;"><i class="material-icons nex" title="アスタルテランキング">timeline</i></a>
-<a onclick="Rtoggle()" class="setting nex" id="radio-btn"><i class="material-icons nex" title="Radio">play_circle_outline</i></a><span id="radio-sta" class="radio"></span>
+<a onclick="Rtoggle()" class="setting nex" id="radio-btn"><i class="material-icons nex" title="Radio(Select/Pause)">play_circle_outline</i></a><span id="radio-sta" class="radio"></span>
 <div id="radio-view" class="hide radio">
 	<span class="cbadge pointer" onclick="Rplay('https://listen.moe/stream','Listen.moe')" data-name="Listen.moe">Listen.moe</span>
 	<span class="cbadge pointer" onclick="Rplay('http://itori.animenfo.com:443','AnimeNfo Radio')" data-name="AnimeNfo Radio">AnimeNfo Radio</span>
@@ -343,7 +343,7 @@ var tlid=0;
     </div>
   </div>
        <!-- Modal Structure Image-->
-  <div id="imagemodal" class="modal modal-fixed-footer">
+  <div id="imagemodal" class="modal modal-fixed-footer" style="min-width:650px">
     <div class="modal-content">
 		<div id="imagewrap">
 		<img src="" id="imgmodal">
@@ -351,6 +351,7 @@ var tlid=0;
 	</div>
     <div class="modal-footer">
 		<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
+	<button class="btn waves-effect brown" onclick="detFromImg()">当該トゥート</button>
 	<button class="btn waves-effect orange" onclick="imgCont('prev')" id="image-prev">←</button>
 	<button class="btn waves-effect" onclick="zoom(2)">2x</button>
 	<button class="btn waves-effect" onclick="zoom(0.5)">0.5x</button>

app/js/post/img.js

@@ -109,6 +109,8 @@ function media(b64, type) {
 		}
 		todc();
 		$("#toot-post-btn").prop("disabled", false);
+		$("#post-acct-sel").prop("disabled", true);
+		Materialize.toast("ファイルアップロード後はアカウントを切り替えられません。", 1000);
 	});
 }
 

app/js/post/post.js

@@ -68,6 +68,7 @@ function clear() {
 	$("#cw").removeClass("cw-avail");
 	$("#rec").text("いいえ");
 	$("#mec").text("なし");
+	$("#post-acct-sel").prop("disabled", false);
 	var vis = localStorage.getItem("vis");
 	if (!vis) {
 		$("#vis").text("public");

app/js/tl/notification.js

@@ -125,6 +125,7 @@ function parseNotf(obj, popup, tlid, acct_id) {
 			if (popup >= 0 && obj.length < 5) {
 				Materialize.toast(noticetext, popup * 1000);
 				$(".notf-icon_" + tlid).addClass("red-text");
+				notftext="";
 			}
 			if (toot.spoiler_text && cw) {
 				var spoiler = "cw cw_hide_" + toot.id;
@@ -161,7 +162,7 @@ function parseNotf(obj, popup, tlid, acct_id) {
 				} else {
 					var sense = ""
 				}
-				viewer = viewer + '<a onclick="imgv(\''+id+'\',\''+key2+'\')" id="'+id+'-image-'+key2+'" data-url="'+url+'" data-type="'+media.type+'" class="img-parsed"><img src="' + purl + '" class="' + sense +
+				viewer = viewer + '<a onclick="imgv(\''+id+'\',\''+key2+'\','+acct_id+')" id="'+id+'-image-'+key2+'" data-url="'+url+'" data-type="'+media.type+'" class="img-parsed"><img src="' + purl + '" class="' + sense +
 					' toot-img pointer" style="width:'+cwdt+'%"></a></span>';
 			});
 		} else {

app/js/tl/parse.js

@@ -95,7 +95,7 @@ function parse(obj, mix, acct_id) {
 				var emoji = toot.emojis[key5];
 				var shortcode = emoji.shortcode;
 				var emoji_url = '<img src="' + emoji.url +
-					'" style="width:2em" class="emoji-img">';
+					'" style="width:1em" class="emoji-img">';
 				var regExp = new RegExp(":" + shortcode + ":", "g");
 				content = content.replace(regExp, emoji_url);
 			});
@@ -113,7 +113,7 @@ function parse(obj, mix, acct_id) {
 				} else {
 					var sense = ""
 				}
-				viewer = viewer + '<a onclick="imgv(\''+id+'\',\''+key2+'\')" id="'+id+'-image-'+key2+'" data-url="'+url+'" data-type="'+media.type+'" class="img-parsed"><img src="' + purl + '" class="' + sense +
+				viewer = viewer + '<a onclick="imgv(\''+id+'\',\''+key2+'\','+acct_id+')" id="'+id+'-image-'+key2+'" data-url="'+url+'" data-type="'+media.type+'" class="img-parsed"><img src="' + purl + '" class="' + sense +
 					' toot-img pointer" style="width:'+cwdt+'%"></a></span>';
 			});
 		} else {

app/js/ui/img.js

@@ -1,9 +1,11 @@
 /*イメージビューワー*/
 //postのimg.jsとは異なります。
-function imgv(id, key) {
+function imgv(id, key, acct_id) {
 	$('#imgmodal').attr('src', './img/loading.svg');
 	var murl = $("#" + id + "-image-" + key).attr("data-url");
 	var type = $("#" + id + "-image-" + key).attr("data-type");
+	$("#imagemodal").attr("data-id",id);
+	$("#imagemodal").attr("data-acct",acct_id);
 	$(document).ready(function() {
 		if (type == "image") {
 			$('#imgmodal').attr('src', murl);
@@ -20,8 +22,28 @@ function imgv(id, key) {
 		element.onload = function() {
 			var width = element.naturalWidth;
 			var height = element.naturalHeight;
-			$("#imgmodal").attr('width', width);
+			var windowH = $(window).height();
-			$("#imagemodal").css('height', "calc(100vh - 20px)");
+			var windowW = $(window).width();
+			var aspect = width/height;
+			if(height > width){
+				//縦長
+				$("#imgmodal").css('height',windowH-60+"px");
+				var imgW = (windowH-50)/height*width;
+				$("#imgmodal").css('width',imgW+"px");
+				$("#imagewrap").css('height',windowH-50+"px");
+				$("#imagemodal").css('height',windowH+"px");
+				$("#imagewrap").css('width',imgW+50+"px");
+				$("#imagemodal").css('width',imgW+50+"px");
+			}else{
+				//横長・正方形
+				$("#imgmodal").css('width',windowW-30+"px");
+				var imgH = (windowW-50)/width*height;
+				$("#imgmodal").css('height',imgH+"px");
+				$("#imagewrap").css('width',windowW+"px");
+				$("#imagemodal").css('width',windowW+"px");
+				$("#imagewrap").css('height',imgH+60+"px");
+				$("#imagemodal").css('height',imgH+120+"px");
+			}
 		}
 		if ($("#" + id + "-image-" + (key * 1 + 1)).length == 0) {
 			$("#image-next").prop("disabled", true);
@@ -40,7 +62,6 @@ function imgv(id, key) {
 function imgCont(type) {
 	var key = $('#imagemodal').attr('data-key');
 	var id = $('#imagemodal').attr('data-id');
-
 	if (type == "next") {
 		key++;
 	} else if (type == "prev") {
@@ -65,8 +86,28 @@ function imgCont(type) {
 		element.onload = function() {
 			var width = element.naturalWidth;
 			var height = element.naturalHeight;
-			$("#imgmodal").attr('width', width);
+			var windowH = $(window).height();
-			$("#imagemodal").css('height', "calc(100vh - 20px)");
+			var windowW = $(window).width();
+			var aspect = width/height;
+			if(height > width){
+				//縦長
+				$("#imgmodal").css('height',windowH-60+"px");
+				var imgW = (windowH-50)/height*width;
+				$("#imgmodal").css('width',imgW+"px");
+				$("#imagewrap").css('height',windowH-50+"px");
+				$("#imagemodal").css('height',windowH+"px");
+				$("#imagewrap").css('width',imgW+50+"px");
+				$("#imagemodal").css('width',imgW+50+"px");
+			}else{
+				//横長・正方形
+				$("#imgmodal").css('width',windowW-30+"px");
+				var imgH = (windowW-50)/width*height;
+				$("#imgmodal").css('height',imgH+"px");
+				$("#imagewrap").css('width',windowW+"px");
+				$("#imagemodal").css('width',windowW+"px");
+				$("#imagewrap").css('height',imgH+60+"px");
+				$("#imagemodal").css('height',imgH+120+"px");
+			}
 		}
 		if ($("#" + id + "-image-" + (key * 1 + 1)).length == 0) {
 			$("#image-next").prop("disabled", true);
@@ -88,7 +129,10 @@ function imgCont(type) {
 function zoom(z) {
 	var wdth = $('#imagewrap img').width();
 	var wdth = wdth * z;
-	$('#imagewrap img').attr("width", wdth);
+	$('#imagewrap img').css("width", wdth+"px");
+	var hgt = $('#imagewrap img').height();
+	var hgt = hgt * z;
+	$('#imagewrap img').css("height", hgt+"px");
 }
 //スマホ対応ドラッグ移動システム
 (function() {
@@ -167,3 +211,9 @@ element.onmousewheel = function(e) {
 		zoom(0.9)
 	}
 }
+function detFromImg(){
+	var id=$("#imagemodal").attr("data-id");
+	var acct_id=$("#imagemodal").attr("data-acct");
+	$('#imagemodal').modal('close');
+	details(id,acct_id);
+}

app/js/ui/radio.js

@@ -9,6 +9,7 @@ function Rtoggle(){
 }
 function Rplay(url,name){
     $("#radio").attr('src',url);
+    r.type = "audio/mpeg";
     r.load();
     r.play();
     $("#radio").addClass("play");

app/package.json

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

ver.json

@@ -1 +1 @@
-{"desk":"Miho (ver.10)","date":"2018-02-12","detail":"内部V:11.10.0|ラジオ機能・Markdownリスト、上下飾り文字・自動リフレッシュ(100件)・見やすいURL解析ボタン・バグ修正"}
+{"desk":"Miho (ver.11)","date":"2018-02-14","detail":"内部V:11.11.0|イメージビューワー他バグ修正"}