Add thumbnail viewer to Manage Bookmarks
Refactor script to handle UI interaction between Bookmarks, Slider and Thumbnail generation.
This commit is contained in:
parent
8e68fb10ad
commit
3c8ea907de
|
|
@ -5,14 +5,20 @@ var values;
|
|||
|
||||
function toTimeStr(tval) {
|
||||
return new Date(null, null, null, null, null, tval)
|
||||
.toTimeString().match(/\d{2}:\d{2}:\d{2}/)[0] + ' '
|
||||
.toTimeString().match(/\d{2}:\d{2}:\d{2}/)[0] + ' ';
|
||||
}
|
||||
|
||||
function
|
||||
valarray(valstr)
|
||||
{
|
||||
return valstr.trim().split(/ +/);
|
||||
}
|
||||
|
||||
function
|
||||
setvals()
|
||||
{
|
||||
var nvalues;
|
||||
values = $.trim($('#bookmarks').val()).split(/ +/);
|
||||
values = valarray($('#bookmarks').val());
|
||||
if (values.length > 0 && values[0] != '')
|
||||
{
|
||||
refreshtimes();
|
||||
|
|
@ -28,7 +34,7 @@ setvals()
|
|||
});
|
||||
values = nvalues;
|
||||
$('#bookmarks').val(values.join(' '));
|
||||
values = $.trim($('#bookmarks').val()).split(/ +/);
|
||||
values = valarray($('#bookmarks').val());
|
||||
sortmarks();
|
||||
refreshtimes();
|
||||
}
|
||||
|
|
@ -63,26 +69,58 @@ draw_slider()
|
|||
var marks = '';
|
||||
for (var i = 0; i < ui.values.length; ++i)
|
||||
marks += ui.values[i] + ' ';
|
||||
$('#bookmarks').val($.trim(marks));
|
||||
$('#bookmarks').val(marks.trim()));
|
||||
setvals();
|
||||
}
|
||||
});
|
||||
refreshtimes();
|
||||
};
|
||||
|
||||
function
|
||||
regenthumbs(curbmkstr) {
|
||||
$('#curbmk').html(curbmkstr);
|
||||
$('#thumbs').hide();
|
||||
$('#genthumbs')
|
||||
.button('enable')
|
||||
.button('option', 'icon', 'ui-icon-zoomin');
|
||||
}
|
||||
|
||||
function
|
||||
update_slider() {
|
||||
setvals();
|
||||
|
||||
/* slider values are strings */
|
||||
var curvalstr = "" + curval;
|
||||
if (!values.includes(curvalstr)) {
|
||||
/* try to map current selected bmk to new bmk */
|
||||
var ovalues = $slider.slider( "option", "values" );
|
||||
var nn = ovalues.indexOf(curvalstr);
|
||||
if (nn < 0) {
|
||||
curval = 0;
|
||||
} else {
|
||||
if (nn >= values.length) nn = values.length - 1;
|
||||
curval = nn >= 0? values[nn]: 0;
|
||||
}
|
||||
regenthumbs(toTimeStr(curval));
|
||||
}
|
||||
$('#slider .ui-slider-handle').each( function(i) {
|
||||
if (i >= values.length)
|
||||
$(this).hide();
|
||||
else
|
||||
$(this).show();
|
||||
});
|
||||
$slider.slider( "option", "values", values );
|
||||
};
|
||||
|
||||
function
|
||||
refreshtimes()
|
||||
{
|
||||
var t = '';
|
||||
values = $.trim($('#bookmarks').val()).split(/ +/);
|
||||
if (!values.length || values[0] == '')
|
||||
{
|
||||
$.each(values, function(k, v) {
|
||||
/* cast to "int" */
|
||||
end = v|0;
|
||||
t += toTimeStr(v);
|
||||
});
|
||||
/* using internal class from jQueryUI */
|
||||
$('#slider .ui-slider-handle').each( function(i) {
|
||||
$(this).attr('title', toTimeStr(values[i]));
|
||||
});
|
||||
|
|
@ -93,46 +131,46 @@ refreshtimes()
|
|||
function
|
||||
sortmarks()
|
||||
{
|
||||
var a = $.trim($('#bookmarks').val()).split(/ +/);
|
||||
a.sort(function(a, b){return a-b});
|
||||
$('#bookmarks').val(a.join(" "));
|
||||
values.sort(function(a, b){return a-b});
|
||||
$('#bookmarks').val(values.join(" "));
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
$('#bookmarks').val($('#bookmarks').attr('init'));
|
||||
draw_slider();
|
||||
$('#curbmk').html(toTimeStr(end));
|
||||
$('#curbmk').html(toTimeStr(curval));
|
||||
|
||||
$('#addbmark').button({icons: {primary: "ui-icon-plus"}, text: false})
|
||||
.on('click', function() {
|
||||
$('#bookmarks').val('0 ' + $('#bookmarks').val());
|
||||
draw_slider();
|
||||
$('#bookmarks').val('0 ' + $('#bookmarks').val());
|
||||
curval = 0;
|
||||
update_slider();
|
||||
});
|
||||
|
||||
$('#delbmark').button({icons: {primary: "ui-icon-minus"}, text: false})
|
||||
.on('click', function() {
|
||||
var cur = $('#bookmarks').val();
|
||||
cur = $.trim(cur.replace(
|
||||
new RegExp('(^| )' + curval + '( |$)', ''), ' '));
|
||||
$('#bookmarks').val(cur);
|
||||
draw_slider();
|
||||
var cur = $('#bookmarks').val();
|
||||
cur = cur.replace(
|
||||
new RegExp('(^| )' + curval + '( |$)', ''), ' ').trim();
|
||||
$('#bookmarks').val(cur);
|
||||
update_slider();
|
||||
});
|
||||
|
||||
$('#save').button({icons: {primary: "ui-icon-disk"}})
|
||||
.on('click', function() {
|
||||
$.post('save.jim', {
|
||||
file: file,
|
||||
bookmarks: $('#bookmarks').val()
|
||||
}, function(data) {
|
||||
$('#results').html(data)
|
||||
.slideDown('slow').delay(5000).slideUp('slow');
|
||||
});
|
||||
$.post('save.jim', {
|
||||
file: file,
|
||||
bookmarks: $('#bookmarks').val()
|
||||
}, function(data) {
|
||||
$('#results').html(data)
|
||||
.slideDown('slow').delay(5000).slideUp('slow');
|
||||
});
|
||||
});
|
||||
|
||||
$('#back').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}})
|
||||
.on('click', function() {
|
||||
window.location = '/go/browse?dir=' + encodeURIComponent(dir);
|
||||
window.location = '/go/browse?dir=' + encodeURIComponent(dir);
|
||||
});
|
||||
|
||||
$('#crop').button({icons: {primary: "ui-icon-arrowreturnthick-1-e"}})
|
||||
|
|
@ -143,20 +181,17 @@ $('#crop').button({icons: {primary: "ui-icon-arrowreturnthick-1-e"}})
|
|||
|
||||
$('#update').button()
|
||||
.on('click', function() {
|
||||
draw_slider();
|
||||
update_slider();
|
||||
});
|
||||
|
||||
$('#slider')
|
||||
.on('slidechange', function(evt, ui) {
|
||||
if (end != ui.value) {
|
||||
end = ui.value;
|
||||
$('#curbmk').html(toTimeStr(end));
|
||||
$('#thumbs').hide();
|
||||
$('#genthumbs')
|
||||
.button('enable')
|
||||
.button('option', 'icon', 'ui-icon-zoomin');
|
||||
var tstr = toTimeStr(curval);
|
||||
if (tstr != $('#curbmk').html()) {
|
||||
regenthumbs(tstr);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#genthumbs').button( { icons: {primary: "ui-icon-zoomin"}, disabled: false } )
|
||||
.on('click', function() {
|
||||
var start;
|
||||
|
|
@ -176,21 +211,22 @@ $('#genthumbs').button( { icons: {primary: "ui-icon-zoomin"}, disabled: false }
|
|||
incr = (last - start) / incr;
|
||||
|
||||
$.get('/browse/thumbnail/mkrange.jim',
|
||||
{
|
||||
'file': file,
|
||||
's': start+end,
|
||||
'e': last+end,
|
||||
'i': incr
|
||||
}, function() {
|
||||
$('#thumbs').show();
|
||||
$('img.bmp').each(function(i) {
|
||||
var pos = $(this).attr('pos')|0;
|
||||
$(this).attr('src',
|
||||
'/browse/thumbnail/fetch.jim?file=' +
|
||||
encodeURIComponent(file) + '&pos=' + (end+pos).toFixed(1));
|
||||
});
|
||||
$('#genthumbs').button('option', 'icon', 'ui-icon-zoomin');
|
||||
});
|
||||
{
|
||||
'file': file,
|
||||
's': start+end,
|
||||
'e': last+end,
|
||||
'i': incr
|
||||
}, function() {
|
||||
$('#thumbs').show();
|
||||
$('img.bmp').each(function(i) {
|
||||
/* cast to "int" */
|
||||
var pos = $(this).attr('pos')|0;
|
||||
$(this).attr('src',
|
||||
'/browse/thumbnail/fetch.jim?file=' +
|
||||
encodeURIComponent(file) + '&pos=' + (curval+pos).toFixed(1));
|
||||
});
|
||||
$('#genthumbs').button('option', 'icon', 'ui-icon-zoomin');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue