flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

more experimenting...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2018-01-16 03:07:53 +03:00
parent 20cdb5841c
commit 0888315038
1 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
ui (gen4)/experiments/image-crop-edit.html
View File

@ -7,7 +7,14 @@ button {
background: transparent; background: transparent;
} }
button .material-icons { input[type=radio] {
display: none;
}
input:not(:checked) ~ * {
color: silver;
}
.material-icons {
font-size: 2em; font-size: 2em;
} }
@ -76,16 +83,6 @@ button .material-icons {
<script src="../lib/jli.js"></script> <script src="../lib/jli.js"></script>
<script> <script>
/**********************************************************************
TODO:
- rotation & toration handle
- touch
- multitouch
- center point
**********************************************************************/
var ORIGINAL = 1 var ORIGINAL = 1
@ -134,13 +131,40 @@ function flip(){
<body> <body>
<button><span title="toggle crop on/off" class="material-icons">crop</span></button> <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> <label>
<button onclick="setRatio(false)"><span class="material-icons">crop_free</span></button> <input type="radio" name="ratio" onclick="setRatio(false)">
<button onclick="setRatio(1)"><span class="material-icons">crop_square</span>1:1</button> <span class="material-icons">crop_free</span>
<button onclick="setRatio(3/2)"><span class="material-icons">crop_3_2</span>3:2</button> </label>
<button onclick="setRatio(16/9)"><span class="material-icons">crop_16_9</span>16:9</button> <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> <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="container">
<div class="crop"> <div class="crop">