From de1b690f36f6c4606ecaa9e2258f21e1821667f9 Mon Sep 17 00:00:00 2001
From: df <fieldhouse@gmx.net>
Date: Sat, 29 May 2021 15:08:12 +0100
Subject: [PATCH] Rework scripting for bookmark page; move presentation to CSS

---
 webif/html/browse/bookmarks/index.jim |  14 +-
 webif/html/browse/bookmarks/script.js | 426 ++++++++++++--------------
 webif/html/browse/bookmarks/style.css |  17 +
 3 files changed, 227 insertions(+), 230 deletions(-)

diff --git a/webif/html/browse/bookmarks/index.jim b/webif/html/browse/bookmarks/index.jim
index f1db845f..c452722a 100755
--- a/webif/html/browse/bookmarks/index.jim
+++ b/webif/html/browse/bookmarks/index.jim
@@ -21,7 +21,6 @@ set limit $(1-$start)
 
 puts "
 <script type=text/javascript>
-var initbookmarks = '[$ts bookmarks]';
 var len = [$ts duration 1];
 var file = '$erfile';
 var dir = '$dir';
@@ -29,21 +28,20 @@ var dir = '$dir';
 <fieldset class=cleft>
 <legend>Manage Bookmarks</legend>
 
-<table class=keyval cellpadding=5>
+<table class=keyval>
 <tr><th>File:</th><td>$rfile</td></tr>
 <tr><th>Length:</th><td>[clock format $len -format %T]</td></tr>
 <tr><th>Size:</th><td>[pretty_size [$ts size]] ([$ts get definition])</td></tr>
 <tr><th>Bookmarks<br><span class=footnote>(enter in seconds)</span></th><td>
-<input id=bookmarks size=80 maxlength=255 data-init=\"[$ts bookmarks]\"
-    value=\"\" />
+<input id=bookmarks size=80 maxlength=255 value=\"[$ts bookmarks]\" />
 <button id=update>Update</button>
 <br>
 <span id=bookmarkstime></span>
-</td></tr><tr><td align=right>
+</td></tr><tr><td class=cell-align-right>
 <button class=left id=addbmark>Add Bookmark</button>
 <button class=left id=delbmark>Remove Bookmark</button>
 </td><td><div id=slider></div></td></tr>
-<tr><td align=right>
+<tr><td class=cell-align-right>
 <span class=left>Current: <span id=curbmk></span></span><br><br><br>
 <button id=genthumbs title=\"Generate Thumbnails\"
     class=left>Generate Thumbnails</button>
@@ -55,13 +53,13 @@ set times {}
 loop v $start $limit $incr {
 	lappend times $v
 	puts "
-		<th style=\"text-align: center\"><span class=mark>
+		<th class=mark><span class=mark>
 		[format "%+d" $v]</span>s</th>
 	"
 }
 puts "</tr><tr>"
 foreach v $times {
-	puts "<td><img class=bmp src=/img/generating.png data-pos=$v></td>"
+	puts "<td><img class=bmp data-pos=$v alt=\"thumbnail @ $v s\"></td>"
 }
 puts "
 </tr></table>
diff --git a/webif/html/browse/bookmarks/script.js b/webif/html/browse/bookmarks/script.js
index ed522ff3..a3e1f5c6 100644
--- a/webif/html/browse/bookmarks/script.js
+++ b/webif/html/browse/bookmarks/script.js
@@ -1,243 +1,225 @@
-var curval = 0;
-var $slider;
-var values;
-
+/* using var len defined in inline script, index.jim */
+/* using var file defined in inline script, index.jim */
+/* using var dir defined in inline script, index.jim */
 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 = valarray($('#bookmarks').val());
-	if (values.length > 0 && values[0] != '')
-	{
-		refreshtimes();
-		return;
-	}
-	nvalues = [];
-	$.each(values, function(k, v) {
-		if (v > len)
-			v = len;
-		if (v < 0)
-			v = 0;
-		nvalues.push(v);
-	});
-	values = nvalues;
-	$('#bookmarks').val(values.join(' '));
-	values = valarray($('#bookmarks').val());
-	sortmarks();
-	refreshtimes();
-}
-
-function
-draw_slider()
-{
-	if ($slider)
-		$slider.slider('destroy');
-	else
-		$slider = $('#slider');
-	setvals();
-	if (!values.length || values[0] == '')
-	{
-		$slider = null;
-		return;
-	}
-	$slider.slider({
-		min: 0,
-		max: len,
-		step: 1,
-		values: values,
-		start: function(event, ui) {
-			curval = ui.value;
-		},
-		stop: function(event, ui) {
-			curval = ui.value;
-			sortmarks();
-			refreshtimes();
-		},
-		slide: function(event, ui) {
-			var marks = '';
-			for (var i = 0; i < ui.values.length; ++i)
-				marks += ui.values[i] + ' ';
-			$('#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 = '';
-	if (!values.length || values[0] == '')
-	{
-		$.each(values, function(k, v) {
-			t += toTimeStr(v);
-		});
-		$('#slider .ui-slider-handle').each(function(i) {
-			$(this).attr('title', toTimeStr(values[i]));
-		});
-	}
-	$('#bookmarkstime').text(t);
-}
-
-function
-sortmarks()
-{
-	values.sort(function(a, b){return a - b});
-	$('#bookmarks').val(values.join(" "));
+	return valstr.trim().split(/\s+/);
 }
 
 $(function() {
+	var curval = 0;
+	var $slider;
+	var values;
 
-$('#bookmarks').val($('#bookmarks').attr('data-init'));
-draw_slider();
-$('#curbmk').html(toTimeStr(curval));
+	function
+	sortmarks()
+	{
+		values.sort(function(a, b){return a - b});
+		$('#bookmarks').val(values.join(" "));
+	}
 
-$('#addbmark').button({icons: {primary: "ui-icon-plus"}, text: false})
-    .on('click', function() {
-	$('#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 = 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');
-		});
-});
-
-$('#back').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}})
-    .on('click', function() {
-		window.location = '/go/browse?dir=' + encodeURIComponent(dir);
-});
-
-$('#crop').button({icons: {primary: "ui-icon-arrowreturnthick-1-e"}})
-    .on('click', function() {
-		window.location = 
-			window.location.href.replace('/bookmarks/?','/crop/crop.jim?');
-});
-
-$('#crop').button({icons: {primary: "ui-icon-arrowreturnthick-1-e"}})
-    .on('click', function() {
-	window.location =
-	    window.location.href.replace('/bookmarks/?','/crop/crop.jim?');
-});
-
-$('#update').button()
-    .on('click', function() {
-	update_slider();
-});
-
-$('#slider')
-    .on('slidechange', function(evt, ui) {
-	var tstr = toTimeStr(curval);
-	if (tstr != $('#curbmk').html())
-		regenthumbs(tstr);
-});
-
-$('#genthumbs').button({icons: {primary: "ui-icon-zoomin"}, disabled: false})
-    .on('click', function() {
-	var start;
-	var incr = -1;
-	var last;
-	$(this)
-	    .button('disable')
-	    .button('option', 'icon', 'ui-icon-refresh');
-	$('img.bmp').each(function(i) {
-		if (start === undefined) {
-			start = $(this).attr('data-pos') | 0;
-		} else {
-			last = $(this).attr('data-pos') | 0;
+	function
+	refreshtimes()
+	{
+		var t = '';
+		if (values.length > 0 && values[0] != '')
+		{
+			$.each(values, function(k, v) {
+				if (t != '') t += ', ';
+				t += toTimeStr(v);
+			});
+			$('#slider .ui-slider-handle').each(function(i) {
+				if (values[i]|0 > 0)
+				$(this).attr('title', toTimeStr(values[i]))
+				else $(this).attr('title', '');
+			});
+			$('#curbmk').html(toTimeStr(curval));
+			$('#genthumbs').button('enable');
 		}
-		incr++;
-	});
+		else
+		{
+			$('#genthumbs').button('disable');
+			$('#curbmk').html('');
+		}
+		$('#bookmarkstime').text(t);
+	}
 
-	incr = (last - start) / incr;
-
-	$.get('/browse/thumbnail/mkrange.jim', {
-		'file': file,
-		's':    start+curval,
-		'e':    last+curval,
-		'i':    incr
-	}, function() {
-		$('#thumbs').show();
-		$('img.bmp').each(function(i) {
-			/* cast to "int" */
-			var pos = $(this).attr('data-pos')|0;
-			$(this).attr('src',
-			    '/browse/thumbnail/fetch.jim?' +
-			    'file=' + encodeURIComponent(file) +
-			    '&pos=' + (curval+pos).toFixed(1));
+	function
+	setvals()
+	{
+		var nvalues;
+		values = valarray($('#bookmarks').val());
+		nvalues = new Set();
+		$.each(values, function(k, v) {
+			if (v > len)
+				v = len;
+			if (v < 0)
+				v = 0;
+			nvalues.add(v);
 		});
-		$('#genthumbs').button('option', 'icon', 'ui-icon-zoomin');
+		values = Array.from(nvalues);
+		sortmarks();
+	}
+
+	function
+	regenthumbs(curbmkstr)
+	{
+		$('#curbmk').html(curbmkstr);
+		$('#thumbs').hide();
+		$('#genthumbs')
+		    .button(curbmkstr ? 'enable': 'disable')
+		    .button('option', 'icon', 'ui-icon-zoomin');
+	}
+
+	function
+	draw_slider()
+	{
+		if ($slider)
+			$slider.slider('destroy');
+		else
+			$slider = $('#slider');
+		setvals();
+		$slider.slider({
+			min: 0,
+			max: len,
+			step: 1,
+			disabled: values.length <= 0 || values[0] == '',
+			values: values,
+			start: function(event, ui) {
+				curval = ui.value;
+			},
+			stop: function(event, ui) {
+				curval = ui.value;
+				sortmarks();
+				refreshtimes();
+			},
+			slide: function(event, ui) {
+				var marks = '';
+				for (var i = 0; i < ui.values.length; ++i)
+					marks += ui.values[i] + ' ';
+				$('#bookmarks').val(marks.trim());
+				setvals();
+			}
+		});
+		refreshtimes();
+		
+		/* 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;
+				regenthumbs('');
+			} else {
+				if (nn >= values.length)
+				    nn = values.length - 1;
+				if (nn >= 0) {
+					regenthumbs(toTimeStr(curval = values[nn]));
+				} else {
+					curval = 0;
+					regenthumbs('');
+				}
+			}
+		}
+	};
+
+	$('#genthumbs').button({icons: {primary: "ui-icon-zoomin"}, disabled: true})
+	    .on('click', function() {
+		var start;
+		var incr = -1;
+		var last;
+		$(this)
+		    .button('disable')
+		    .button('option', 'icon', 'ui-icon-refresh');
+		$('img.bmp').each(function(i) {
+			if (start === undefined) {
+				start = $(this).attr('data-pos') | 0;
+			} else {
+				last = $(this).attr('data-pos') | 0;
+			}
+			incr++;
+			$(this).attr('src', '/img/generating.png');
+		});
+		$('#thumbs').show();
+
+		incr = (last - start) / incr;
+
+		$.get('/browse/thumbnail/mkrange.jim', {
+			'file': file,
+			's':    start+curval,
+			'e':    last+curval,
+			'i':    incr
+		}, function() {
+			$('img.bmp').each(function(i) {
+				/* cast to "int" */
+				var pos = $(this).attr('data-pos')|0;
+				$(this).attr('src',
+				    '/browse/thumbnail/fetch.jim?' +
+				    'file=' + encodeURIComponent(file) +
+				    '&pos=' + (curval+pos).toFixed(1));
+			});
+			$('#genthumbs').button('option', 'icon', 'ui-icon-zoomin');
+		});
+
 	});
 
-});
+	draw_slider();
 
+	$('#addbmark').button({icons: {primary: "ui-icon-plus"}, text: false})
+	    .on('click', function() {
+		$('#bookmarks').val('0 ' + $('#bookmarks').val());
+		curval = 0;
+		draw_slider();
+	});
+
+	$('#delbmark').button({icons: {primary: "ui-icon-minus"}, text: false})
+	    .on('click', function() {
+		var cur = $('#bookmarks').val();
+		cur = cur.replace(
+		    new RegExp('(^| )' + curval + '( |$)', ''), ' ').trim();
+		$('#bookmarks').val(cur);
+		draw_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');
+			});
+	});
+
+	$('#back').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}})
+	    .on('click', function() {
+			window.location = '/go/browse?dir=' + encodeURIComponent(dir);
+	});
+
+	$('#crop').button({icons: {primary: "ui-icon-arrowreturnthick-1-e"}})
+	    .on('click', function() {
+			window.location = 
+				window.location.href.replace('/bookmarks/?','/crop/crop.jim?');
+	});
+
+	$('#update').button()
+	    .on('click', draw_slider);
+
+	$('#slider')
+	    .on('slidechange', function(evt, ui) {
+		var tstr = toTimeStr(curval);
+		if (tstr != $('#curbmk').html())
+			regenthumbs(tstr);
+	});
 });
diff --git a/webif/html/browse/bookmarks/style.css b/webif/html/browse/bookmarks/style.css
index 493c75e6..fe09656a 100644
--- a/webif/html/browse/bookmarks/style.css
+++ b/webif/html/browse/bookmarks/style.css
@@ -14,3 +14,20 @@
 	margin-top: 5px;
 }
 
+/* <table class=keyval ... cellpadding=5> */
+.keyval th, .keyval td
+{
+	padding: 5px;
+}
+
+/* <td align=right> */
+.cell-align-right
+{
+	text-align: right;
+}
+
+/* <th style="text-align: center"> */
+th.mark
+{
+	text-align: center;
+}