From 088831503882644ff4872225d7a2532d194f202a Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 16 Jan 2018 03:07:53 +0300
Subject: [PATCH] more experimenting...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/experiments/image-crop-edit.html | 56 +++++++++++++++-------
 1 file changed, 40 insertions(+), 16 deletions(-)
diff --git a/ui (gen4)/experiments/image-crop-edit.html b/ui (gen4)/experiments/image-crop-edit.html
index 5525b2a2..a4ae066c 100755
--- a/ui (gen4)/experiments/image-crop-edit.html	
+++ b/ui (gen4)/experiments/image-crop-edit.html	
@@ -7,7 +7,14 @@ button {
 	background: transparent;
 }
 
-button .material-icons {
+input[type=radio] {
+	display: none;
+}
+input:not(:checked) ~ * {
+	color: silver;
+}
+
+.material-icons {
 	font-size: 2em;
 }
 
@@ -76,16 +83,6 @@ button .material-icons {
 <script src="../lib/jli.js"></script>
 
 <script>
-/**********************************************************************
-
-TODO:
-	- rotation & toration handle
-	- touch
-	- multitouch
-	- center point
-
-
-**********************************************************************/
 
 var ORIGINAL = 1
 
@@ -134,13 +131,40 @@ function flip(){
 <body>
 
 <button><span title="toggle crop on/off" class="material-icons">crop</span></button>
-<button onclick="setRatio(ORIGINAL)"><span title="original ratio" class="material-icons">crop_original</span></button>
-<button onclick="setRatio(false)"><span class="material-icons">crop_free</span></button>
-<button onclick="setRatio(1)"><span class="material-icons">crop_square</span>1:1</button>
-<button onclick="setRatio(3/2)"><span class="material-icons">crop_3_2</span>3:2</button>
-<button onclick="setRatio(16/9)"><span class="material-icons">crop_16_9</span>16:9</button>
+<label>
+	<input type="radio" name="ratio" onclick="setRatio(false)">
+	<span class="material-icons">crop_free</span>
+</label>
+<label>
+	<input type="radio" name="ratio" checked onclick="setRatio(ORIGINAL)">
+	<span title="original ratio" class="material-icons">crop_original</span>
+</label>
+<label>
+	<input type="radio" name="ratio" onclick="setRatio(1)">
+	<span class="material-icons">crop_square</span>
+	<span>1:1</span>
+</label>
+<label>
+	<input type="radio" name="ratio" onclick="setRatio(3/2)">
+	<span class="material-icons">crop_3_2</span>
+	<span>3:2</span>
+</label>
+<label>
+	<input type="radio" name="ratio" onclick="setRatio(16/9)">
+	<span class="material-icons">crop_16_9</span>
+	<span>16:9</span>
+</label>
 <button onclick="flip()"><span class="material-icons">crop_rotate</span></button>
 
+<br>
+<pre>
+TODO:
+	- rotation and toration handle
+	- touch
+	- multitouch
+	- center point
+</pre>
+
 
 <div class="container">
 	<div class="crop">
