add image rotate button

app/css/master.css

@@ -90,6 +90,15 @@ option {
 	width: 100%;
 	height: 100%;
 }
+#imagewrap img.rotate-90 {
+	transform: rotate(-90deg)
+}
+#imagewrap img.rotate-180 {
+	transform: rotate(-180deg)
+}
+#imagewrap img.rotate-270 {
+	transform: rotate(-270deg)
+}
 .pointer {
 	cursor: pointer;
 }

app/js/ui/img.js

@@ -4,6 +4,7 @@ function imgv(id, key, acct_id) {
 	$('#imgprog').text(0)
 	$('#imgsec').text(0)
 	$('#imgmodal').hide()
+	rotate(true)
 	$('#imgmodal').attr('src', '../../img/loading.svg')
 	var murl = $('#' + id + '-image-' + key).attr('data-url')
 	var ourl = $('#' + id + '-image-' + key).attr('data-original')
@@ -119,10 +120,36 @@ function imageXhr(id, key, murl) {
 				var width
 				element.onload = function() {
 					var width = element.naturalWidth
+					var height = element.naturalHeight
+					calcNiceAspect(width, height)
+					$('#imagemodal').attr('data-naturalWidth', width)
+					$('#imagemodal').attr('data-naturalHeight', height)
+				}
+				if ($('#' + id + '-image-' + (key * 1 + 1)).length == 0) {
+					$('#image-next').prop('disabled', true)
+				} else {
+					$('#image-next').prop('disabled', false)
+				}
+				if ($('#' + id + '-image-' + (key * 1 - 1)).length == 0) {
+					$('#image-prev').prop('disabled', true)
+				} else {
+					$('#image-prev').prop('disabled', false)
+				}
+				element.src = b64
+				var endTime = new Date()
+				var proctime = endTime.getTime() - startTime.getTime()
+				$('#imgsec').text(proctime)
+				$('#imgmodal').attr('src', b64)
+			}
+		}
+	}
+	xhr.responseType = 'blob'
+	xhr.send()
+}
+function calcNiceAspect( width, height ) {
 	if(width < 650) {
 		width = 650
 	}
-					var height = element.naturalHeight
 	var windowH = $(window).height()
 	var windowW = $(window).width()
 	$('#imagemodal').css('bottom', '0')
@@ -151,27 +178,6 @@ function imageXhr(id, key, murl) {
 		$('#imagemodal img').css('height', 'calc(100vh - 60px)')
 	}
 }
-				if ($('#' + id + '-image-' + (key * 1 + 1)).length == 0) {
-					$('#image-next').prop('disabled', true)
-				} else {
-					$('#image-next').prop('disabled', false)
-				}
-				if ($('#' + id + '-image-' + (key * 1 - 1)).length == 0) {
-					$('#image-prev').prop('disabled', true)
-				} else {
-					$('#image-prev').prop('disabled', false)
-				}
-				element.src = b64
-				var endTime = new Date()
-				var proctime = endTime.getTime() - startTime.getTime()
-				$('#imgsec').text(proctime)
-				$('#imgmodal').attr('src', b64)
-			}
-		}
-	}
-	xhr.responseType = 'blob'
-	xhr.send()
-}
 //ズームボタン(z:倍率)
 function zoom(z) {
 	var wdth = $('#imagewrap img').width()
@@ -260,6 +266,33 @@ element.onmousewheel = function(e) {
 		zoom(0.9)
 	}
 }
+function rotate(reset) {
+	if (reset) {
+		$('#imagewrap img').removeClass('rotate-90')
+		$('#imagewrap img').removeClass('rotate-180')
+		$('#imagewrap img').removeClass('rotate-270')
+		$('#imagemodal').attr('data-naturalWidth', null)
+		$('#imagemodal').attr('data-naturalWidth', null)
+		return true
+	}
+	var width = $('#imagemodal').attr('data-naturalWidth')
+	var height = $('#imagemodal').attr('data-naturalHeight')
+	if ($('#imagewrap img').hasClass('rotate-90')) {
+		$('#imagewrap img').removeClass('rotate-90')
+		$('#imagewrap img').addClass('rotate-180')
+		calcNiceAspect(width, height)
+	} else if ($('#imagewrap img').hasClass('rotate-180')) {
+		$('#imagewrap img').removeClass('rotate-180')
+		$('#imagewrap img').addClass('rotate-270')
+		calcNiceAspect(height, width)
+	} else if ($('#imagewrap img').hasClass('rotate-270')) {
+		$('#imagewrap img').removeClass('rotate-270')
+		calcNiceAspect(width, height)
+	} else {
+		$('#imagewrap img').addClass('rotate-90')
+		calcNiceAspect(height, width)
+	}
+}
 
 //当該トゥート
 function detFromImg() {

app/view/make/index.sample.html

@@ -742,6 +742,9 @@
 			<a class="waves-effect white-text" onclick="zoom(0.5)">
 				<i class="material-icons">zoom_out</i>
 			</a>
+			<a class="waves-effect white-text" onclick="rotate(false)">
+				<i class="material-icons">rotate_90_degrees_ccw</i>
+			</a>
 			<button class="btn waves-effect blue" onclick="copyImgUrl()" title="@@copyURL@@">
 				<i class="material-icons">link</i>
 			</button>