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> <html>
<style> <style>
label {
margin: 0.2em;
}
label label {
margin: auto;
}
button { button {
border: none; border: none;
background: transparent; background: transparent;
} }
input[type=checkbox],
input[type=radio] { input[type=radio] {
display: none; display: none;
} }
@ -18,6 +26,9 @@ input:not(:checked) ~ * {
font-size: 2em; font-size: 2em;
} }
sub .material-icons {
font-size: 1.5em;
}
.crop { .crop {
position: absolute; position: absolute;
@ -79,6 +90,7 @@ input:not(:checked) ~ * {
<script src="../ext-lib/jquery.js"></script> <script src="../ext-lib/jquery.js"></script>
<script src="../ext-lib/jquery-ui.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> <script src="../lib/jli.js"></script>
@ -91,7 +103,6 @@ $(function(){
$('.crop') $('.crop')
.resizable({ .resizable({
handles: 'all', handles: 'all',
aspectRatio: true,
}) })
.draggable() .draggable()
$('.crop .center') $('.crop .center')
@ -108,6 +119,7 @@ function setRatio(ratio){
.data('uiResizable')._aspectRatio = ratio .data('uiResizable')._aspectRatio = ratio
if(ratio === false){ if(ratio === false){
$('#lock-ratio')[0].checked = false
return 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> </script>
<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>
<label> <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> <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>
<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> <span title="original ratio" class="material-icons">crop_original</span>
</label> </label>
<label> <label>