Crop UI enhancements #38
|
|
@ -14,6 +14,7 @@ set ts [ts fetch $rfile]
|
|||
set dir [file dirname $rfile]
|
||||
|
||||
set len [$ts duration 1]
|
||||
set planwidth 500
|
||||
|
||||
puts "
|
||||
<fieldset>
|
||||
|
|
@ -29,12 +30,17 @@ puts [join [lmap i [$ts bookmarks 1] {
|
|||
clock format $i -format "%T"
|
||||
}] ", "]
|
||||
|
||||
puts "</td></tr><tr><th> </th><td id=cutplan>"
|
||||
# set minimum width as positioned contents doesn't resize its cell
|
||||
puts "</td></tr><tr><th> </th><td id=cutplan style=\"min-width: ${planwidth}px\">"
|
||||
|
||||
puts "<div style=\"position: relative; top: -10px\">"
|
||||
|
||||
proc div {type left right} {
|
||||
set width $($right - $left)
|
||||
if {$width < 0} {
|
||||
# negative values are invalid for CSS width
|
||||
set width 0
|
||||
}
|
||||
puts "<div class=$type style=\"left: ${left}px; width: ${width}px\">
|
||||
$type</div>"
|
||||
}
|
||||
|
|
@ -64,8 +70,8 @@ foreach b $bookmarks {
|
|||
incr cur $l
|
||||
append newbookmarks "[expr $cur + 3] "
|
||||
|
||||
set left $($start * 500 / $len)
|
||||
set right $($end * 500 / $len)
|
||||
set left $($start * $planwidth / $len)
|
||||
set right $($end * $planwidth / $len)
|
||||
|
||||
div cut $last $($left - 1)
|
||||
div keep $left $($right - 1)
|
||||
|
|
@ -78,11 +84,11 @@ foreach b $bookmarks {
|
|||
if {$start > 0} {
|
||||
# Still in a keep section...
|
||||
incr keeping $($len - $start)
|
||||
set left $($start * 500 / $len)
|
||||
set left $($start * $planwidth / $len)
|
||||
div cut $last $($left - 1)
|
||||
div keep $left 500
|
||||
div keep $left $planwidth
|
||||
} else {
|
||||
div cut $last 500
|
||||
div cut $last $planwidth
|
||||
}
|
||||
|
||||
if {$cur > $keeping - 8 && $keeping - 8 > 0} {
|
||||
|
|
@ -115,7 +121,7 @@ puts [join [lmap i $newbookmarks {
|
|||
puts " )</td></tr>"
|
||||
|
||||
puts "
|
||||
<tr><th>Time:</th>
|
||||
<tr id=esttime><th>Time:</th>
|
||||
<td>Cropping will take around [clock format $esttime -format "%T"]</td></tr>
|
||||
</table>
|
||||
|
||||
|
|
@ -130,9 +136,9 @@ puts "
|
|||
<td><button id=invert invert=$invert>Invert selection</button></td>
|
||||
<td><button id=cropit>Perform crop operation</button></td>
|
||||
<td>
|
||||
Save new bookmarks?
|
||||
<label id=saveitlabel for=saveit>Save new bookmarks?</label>
|
||||
<input id=saveit type=checkbox name=saveit checked>
|
||||
<label id=saveitlabel for=saveit> </label>
|
||||
|
||||
</td>
|
||||
</tr></table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,5 @@
|
|||
var handle = 0;
|
||||
|
||||
function escapestring(str)
|
||||
{
|
||||
str = JSON.stringify(String(str));
|
||||
str = str.substring(1, str.length - 1);
|
||||
return str;
|
||||
}
|
||||
|
||||
function update()
|
||||
{
|
||||
$.get('progress.jim', {
|
||||
|
|
@ -27,57 +20,64 @@ $('[type="checkbox"]').iphoneStyle({
|
|||
|
||||
$('#progressbar').reportprogress(0);
|
||||
|
||||
$('#back').button().click(function() {
|
||||
window.location = '/go/browse?dir=' + $('#params').attr('dir');
|
||||
$('#back').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}}).
|
||||
on('click', function() {
|
||||
window.location = '/go/browse?dir=' + $('#params').attr('dir');
|
||||
});
|
||||
|
||||
$('#save').button({icons: {primary: "ui-icon-disk"}})
|
||||
.on('click', function() {
|
||||
$('#progressdiv,#output,#save').hide('slow');
|
||||
$.post('../bookmarks/save.jim', {
|
||||
'file': $('#fileparams').attr('file'),
|
||||
'bookmarks': $('#bookmarks').attr('val')
|
||||
}, function(data) {
|
||||
$('#results').html(data)
|
||||
.slideDown('slow')
|
||||
.delay(6000)
|
||||
.slideUp('slow');
|
||||
$('#originalbookmarks')
|
||||
.html($('#newbookmarks').clone());
|
||||
$('#progressdiv,#output,#save').hide('slow');
|
||||
$.post('../bookmarks/save.jim', {
|
||||
'file': $('#fileparams').attr('file'),
|
||||
'bookmarks': $('#bookmarks').attr('val')
|
||||
}, function(data) {
|
||||
$('#results').html(data)
|
||||
.slideDown('slow')
|
||||
.delay(6000)
|
||||
.slideUp('slow');
|
||||
$('#originalbookmarks')
|
||||
.html($('#newbookmarks').clone());
|
||||
$('#esttime').hide();
|
||||
if ($('#results').html().indexOf(' successful') < 0) {
|
||||
$('#saveit').hide();
|
||||
$('#saveitlabel').hide();
|
||||
$('#save').show();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#cropit').button({icons: {primary: "ui-icon-scissors"}})
|
||||
.on('click', function() {
|
||||
$('#cropdiv').hide('slow');
|
||||
$('#progressdiv').show('slow');
|
||||
$('#back').hide();
|
||||
handle = setInterval("update()", 1000);
|
||||
$('#output').show().text('Please do not interrupt...')
|
||||
.load('execute.jim', {
|
||||
'file': $('#params').attr('file'),
|
||||
'invert': $('#invert').attr('invert')
|
||||
}, function() {
|
||||
clearInterval(handle);
|
||||
handle = 0;
|
||||
$('#back,#save').show();
|
||||
$('#cutplan').html('File cropping complete');
|
||||
$('#originalbookmarks').empty();
|
||||
$('#progressbar').reportprogress(100);
|
||||
if ($('#saveit').prop('checked'))
|
||||
{
|
||||
$('#save').trigger('click');
|
||||
$('#progressdiv')
|
||||
.delay(3000)
|
||||
.text('Cropping complete.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#invert').button({icons: {primary: "ui-icon-shuffle"}})
|
||||
.on('click', function() {
|
||||
window.location = window.location.href.replace(/&invert=[01]/,'') +
|
||||
'&invert=' + ($(this).attr('invert') == '1' ? '0' : '1');
|
||||
});
|
||||
});
|
||||
|
||||
$('#cropit').button().click(function() {
|
||||
$('#cropdiv').hide('slow');
|
||||
$('#progressdiv').show('slow');
|
||||
$('#back').hide();
|
||||
handle = setInterval("update()", 1000);
|
||||
$('#output').show().text('Please do not interrupt...')
|
||||
.load('execute.jim', {
|
||||
'file': $('#params').attr('file'),
|
||||
'invert': $('#invert').attr('invert')
|
||||
}, function() {
|
||||
clearInterval(handle);
|
||||
handle = 0;
|
||||
$('#back,#save').show();
|
||||
$('#cutplan').html('File cropping complete');
|
||||
$('#originalbookmarks').empty();
|
||||
$('#progressbar').reportprogress(100);
|
||||
if ($('#saveit').prop('checked'))
|
||||
{
|
||||
$('#save').trigger('click');
|
||||
$('#progressdiv')
|
||||
.delay(3000)
|
||||
.text('Cropping complete.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#invert').button().on('click', function() {
|
||||
window.location = 'crop.jim?file=' +
|
||||
escapestring($('#params').attr('file')) +
|
||||
'&invert=' + ($(this).attr('invert') == '1' ? '0' : '1');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -11,3 +11,7 @@ div.sliderlabel
|
|||
line-height: 40px;
|
||||
}
|
||||
|
||||
#cutplan {
|
||||
/* ensure cut plan segments are aligned left */
|
||||
padding-left: 0;
|
||||
}
|
||||
Loading…
Reference in New Issue