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

more tweaking of crop example ui...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2018-01-17 03:32:52 +03:00
parent 81e375d1cc
commit 7abd1b0f4e
1 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,11 +2,19 @@
<html>
<style>
label {
margin: 0.2em;
}
label label {
margin: auto;
}
button {
border: none;
background: transparent;
}
input[type=checkbox],
input[type=radio] {
display: none;
}
@ -18,6 +26,9 @@ input:not(:checked) ~ * {
font-size: 2em;
}
sub .material-icons {
font-size: 1.5em;
}
.crop {
position: absolute;
@ -79,6 +90,7 @@ input:not(:checked) ~ * {
<script src="../ext-lib/jquery.js"></script>
<script src="../ext-lib/jquery-ui.js"></script>
<script src="../ext-lib/jquery.ui.touch-punch.min.js"></script>
<script src="../lib/jli.js"></script>
@ -91,7 +103,6 @@ $(function(){
$('.crop')
.resizable({
handles: 'all',
aspectRatio: true,
})
.draggable()
$('.crop .center')
@ -108,6 +119,7 @@ function setRatio(ratio){
.data('uiResizable')._aspectRatio = ratio
if(ratio === false){
$('#lock-ratio')[0].checked = false
return
}
@ -141,17 +153,38 @@ function flip(){
}
}
function toggleLock(){
var crop = $('.crop')
var r = crop.resizable("option", "aspectRatio")
if(r === false){
var w = crop.width()
var h = crop.height()
setRatio(w/h)
} else {
setRatio(false)
}
}
</script>
<body>
<button><span title="toggle crop on/off" class="material-icons">crop</span></button>
<label>
<input type="radio" name="ratio" onclick="setRatio(false)">
<input type="radio" name="ratio" checked onclick="setRatio(false)">
<span class="material-icons">crop_free</span>
<sub>
<label>
<input id="lock-ratio" type="checkbox" onclick="toggleLock()">
<span class="material-icons">lock</span>
</label>
</sub>
</label>
<label>
<input type="radio" name="ratio" checked onclick="setRatio(ORIGINAL)">
<input type="radio" name="ratio" onclick="setRatio(ORIGINAL)">
<span title="original ratio" class="material-icons">crop_original</span>
</label>
<label>