From 78ea49596979cac36dc1d15be88af99538109029 Mon Sep 17 00:00:00 2001
From: cutls <web-pro@cutls.com>
Date: Sat, 23 Jan 2021 19:17:55 +0900
Subject: [PATCH] add image rotate button

---
 app/css/master.css              |  9 ++++
 app/js/ui/img.js                | 93 ++++++++++++++++++++++-----------
 app/view/make/index.sample.html |  3 ++
 3 files changed, 75 insertions(+), 30 deletions(-)

diff --git a/app/css/master.css b/app/css/master.css
index 8916ad98..37286bb1 100644
--- a/app/css/master.css
+++ b/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;
 }
diff --git a/app/js/ui/img.js b/app/js/ui/img.js
index 81d3035e..62259547 100644
--- a/app/js/ui/img.js
+++ b/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,37 +120,10 @@ function imageXhr(id, key, murl) {
 				var width
 				element.onload = function() {
 					var width = element.naturalWidth
-					if(width < 650) {
-						width = 650
-					}
 					var height = element.naturalHeight
-					var windowH = $(window).height()
-					var windowW = $(window).width()
-					$('#imagemodal').css('bottom', '0')
-					$('#imagemodal img').css('width', 'auto')
-					if (height < windowH) {
-						$('#imagemodal').css('height', height + 100 + 'px')
-						$('#imagemodal img').css('height',  height + 'px')
-						if (width > windowW * 0.8) {
-							$('#imagemodal').css('width', '80vw')
-							$('#imagemodal img').css('width', 'auto')
-							var heightS = ((windowW * 0.8) / width) * height
-							$('#imagemodal').css('height', heightS + 100 + 'px')
-						} else {
-							$('#imagemodal').css('width', width + 'px')
-						}
-					} else {
-						$('#imagemodal img').css('width', 'auto')
-						var widthS = (windowH / height) * width
-						if (widthS < windowW) {
-							$('#imagemodal').css('width', widthS + 'px')
-						} else {
-							$('#imagemodal').css('width', '100vw')
-						}
-
-						$('#imagemodal').css('height', '100vh')
-						$('#imagemodal img').css('height', 'calc(100vh - 60px)')
-					}
+					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)
@@ -172,6 +146,38 @@ function imageXhr(id, key, murl) {
 	xhr.responseType = 'blob'
 	xhr.send()
 }
+function calcNiceAspect( width, height ) {
+	if(width < 650) {
+		width = 650
+	}
+	var windowH = $(window).height()
+	var windowW = $(window).width()
+	$('#imagemodal').css('bottom', '0')
+	$('#imagemodal img').css('width', 'auto')
+	if (height < windowH) {
+		$('#imagemodal').css('height', height + 100 + 'px')
+		$('#imagemodal img').css('height',  height + 'px')
+		if (width > windowW * 0.8) {
+			$('#imagemodal').css('width', '80vw')
+			$('#imagemodal img').css('width', 'auto')
+			var heightS = ((windowW * 0.8) / width) * height
+			$('#imagemodal').css('height', heightS + 100 + 'px')
+		} else {
+			$('#imagemodal').css('width', width + 'px')
+		}
+	} else {
+		$('#imagemodal img').css('width', 'auto')
+		var widthS = (windowH / height) * width
+		if (widthS < windowW) {
+			$('#imagemodal').css('width', widthS + 'px')
+		} else {
+			$('#imagemodal').css('width', '100vw')
+		}
+
+		$('#imagemodal').css('height', '100vh')
+		$('#imagemodal img').css('height', 'calc(100vh - 60px)')
+	}
+}
 //ズームボタン(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() {
diff --git a/app/view/make/index.sample.html b/app/view/make/index.sample.html
index 29a2732a..b809abd5 100644
--- a/app/view/make/index.sample.html
+++ b/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>