- Progress bar text is now cut to ensure it's displayed on a single l…

…ine.

- Progress bar tooltip now displays the full playing now info (helper2).
- Changed 'Sort by...', 'Rename', 'Add' (Extended controls) and 'Browse to...' (Browse files) popups from native modal popups to HTML ones (should work in more browsers and be future-proof). Colors also change according to theme.
- Simplified 'Search media library' panel UI.
- Simplified 'Sort by...' prompt info.
- 'Flush queue' and 'Run contextual menu' did not respect the disabled state, allowing to click on them while action was disabled.
- 'Sort by...' at 'Extended controls' panel not working in some cases when specifying the sort direction.

CHANGELOG.md

@@ -15,6 +15,11 @@
 - Queue and Dequeue commands to contextual menu.
 - Every part of the current query path at 'Search media library' panel can now be clicked to jump to that node. For ex: for a library filtered by genre with path '[African] > Ali Farka Touré > Ali & Toumani'; '[African]' And 'Ali Farka Touré' could be clicked to directly jump to those (like pressing the back button multiple times).
 ### Changed
+- Progress bar text is now cut to ensure it's displayed on a single line.
+- Progress bar tooltip now displays the full playing now info (helper2).
+- Changed 'Sort by...', 'Rename', 'Add' (Extended controls) and 'Browse to...' (Browse files) popups from native modal popups to HTML ones (should work in more browsers and be future-proof). Colors also change according to theme.
+- Simplified 'Search media library' panel UI.
+- Simplified 'Sort by...' prompt info.
 - Clarified the warnings for 'Playlist Tools Menu Entries' (listener and CMD) when the required components are installed but the feature has not been enabled.
 - Opening the contextual menu now first selects the track at mouse position if there were no tracks selected before or current selection was at other position. i.e. it behaves like foobar2000 selection, only running the contextual menu on current selection if you clicked within it.
 - Tooltips are now self-hidden if mouse is not moved after 6 secs of being shown.
@@ -28,6 +33,8 @@
 - Template no longer shows AJAX errors while reloading the web page, as long as it is able to identify the page is unloading. See Mozilla compatibility browser [list](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event).
 ### Removed
 ### Fixed
+- 'Flush queue' and 'Run contextual menu' did not respect the disabled state, allowing to click on them while action was disabled.
+- 'Sort by...' at 'Extended controls' panel not working in some cases when specifying the sort direction.
 - Selected track, playing or pause icon overlapping with queue index in some cases.
 - Scrolling back not working during drag n' drop if already scrolled to a posterior page on the playlist (since original ajquery).
 - Dynamic colors not being reset when closing/opening the art panel during the same track due to some optimizations included in v0.96.

_readme.txt

@@ -226,6 +226,13 @@ https://github.com/regorxxx/ajquery-xxx
 				'[African] > Ali Farka Tour� > Ali & Toumani'; '[African]' And 'Ali Farka Tour�' 
 				could be clicked to directly jump to those (like pressing the back button multiple
 				times);
+		cha:	Progress bar text is now cut to ensure it's displayed on a single line;
+		cha:	Progress bar tooltip now displays the full playing now info (helper2);
+		cha:	Changed 'Sort by...', 'Rename', 'Add' (Extended controls) and 'Browse to...' (Browse
+				files) popups from native modal popups to HTML ones (should work in more browsers 
+				and be future-proof). Colors also change according to theme;
+		cha:	Simplified 'Search media library' panel UI;
+		cha:	Simplified 'Sort by...' prompt info;
 		cha:	Clarified the warnings for 'Playlist Tools Menu Entries' (listener and CMD) when 
 				the required components are installed but the feature has not been enabled;
 		cha:	Opening the contextual menu now first selects the track at mouse position if 
@@ -246,6 +253,10 @@ https://github.com/regorxxx/ajquery-xxx
 		cha:	Template no longer shows AJAX errors while reloading the web page, as long as it
 				is able to identify the page is unloading. See Mozilla compatibility browser
 				[list](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event);
+		fix:	'Flush queue' and 'Run contextual menu' did not respect the disabled state, allowing
+				to click on them while action was disabled.
+		fix:	'Sort by...' at 'Extended controls' panel not working in some cases when specyfing
+				the sort direction.
 		fix:	Selected track, playing or pause icon overlapping with queue index in some cases;
 		fix:	Scrolling back not working during drag n' drop if already scrolled to a posterior
 				page on the playlist (since original ajquery);

index.html

@@ -13,8 +13,9 @@
 		<script type="text/javascript" defer src="js/vibrant.js"></script>
 		<script type="text/javascript" defer src="js/contextual.js"></script>
 		<script type="text/javascript" defer src="js/startup.js"></script>
+		<script type="text/javascript" defer src="js/daypilot-modal.min.js"></script>
 		<style type="text/css">
-			:root { --background-color: #fff; --background-color-v2: #e8e8e8; --background-color-v3: #e7e7e7; --background-color-v4: #f8f8f8; --border-color: gray; --border-color-v2: white; --text-color: #000; --text-color-v2: gray; --console-color: #000; --tabs-color-v1: #dddddd url(css/smoothness/images/ui-bg_highlight-soft_75_dddddd_1x100.png) 50% 0% repeat-x; --tabs-color-v2: none; --pl_prev: #5f5f5f; --pl_play: #6c0101;  --pl-album_play: #653b3b;}
+			:root { --background-color: #fff; --background-color-v2: #e8e8e8; --background-color-v3: #e7e7e7; --background-color-v4: #f8f8f8; --border-color: gray; --border-color-v2: white; --text-color: #000; --text-color-v2: gray; --console-color: #000; --tabs-color-v1: #dddddd url(css/smoothness/images/ui-bg_highlight-soft_75_dddddd_1x100.png) 50% 0% repeat-x; --tabs-color-v2: none; --pl_prev: #5f5f5f; --pl_play: #6c0101;  --pl-album_play: #653b3b; --modal-main: #2367bf;}
 			[data-theme="dark"] { --background-color: #3F3F3F; --background-color-v2: #a2a2a2; --background-color-v3: #a2a2a2; --background-color-v4: #e8e8e8; --border-color: #000; --border-color-v2: #d7d7d7; --text-color: #000; --text-color-v2: #3f3d3d; --console-color: white; --tabs-color-v1: #cccccc url(css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 0% repeat-x; --tabs-color-v2: #c8c8c8; --pl_prev: #474747; --pl_play: #6c0101; --pl-album_play: #653b3b;}
 			body{ font-size: 0.5em; margin: 10px; background-color: var(--background-color); max-width: 600px;}
 			ul#buttons {margin: 0; padding: 0;}
@@ -74,7 +75,7 @@
 
 			#querylist { height: 300px; overflow: visible;}
 			#querylist #qr { cursor: pointer; }
-			.qr_selected { background: #daeaff; }
+			.qr_selected { background: #daeaff; cursor: pointer;}
 
 			#tooltip { background: #ededed; padding: 2px; border: 1px solid gray; display: none; z-index: 1000; }
 
@@ -87,6 +88,21 @@
 			.column { flex: 50%;}
 			.columnA { flex: 40%;}
 			.columnB { flex: 60%;}
+
+			.modal_ajquery_background { background-color: var(--background-color-v2); opacity: 0.75; }
+			.modal_ajquery_main { border-radius: 4px; background-color: #fff0;}
+			.modal_ajquery_main, .modal_ajquery_main button { font-size: 1.7em;}
+			.modal_ajquery_main input { font-size: 1em; }
+			.modal_ajquery_inner { padding: 20px; padding-top: 10px; padding-bottom: 10px; background: var(--background-color-v3); color: var(--text-color); border-radius: 8px; }
+			.modal_ajquery_main input, .modal_ajquery_main button {  padding: 5px; box-sizing: border-box; border-radius: 4px; border: 1px solid var(--modal-main); }
+			.modal_ajquery_content { margin: 10px 0px; font-family: verdana;}
+			.modal_ajquery_input { margin: 20px 0px 0px 0px; font-family: verdana;}
+			.modal_ajquery_input input { accent-color: var(--modal-main);}
+			.modal_ajquery_buttons { margin-top: 10px; margin-bottom: 0px; }
+			.modal_ajquery_main button { font-size: 1em; background-color: var(--modal-main); color: white; padding: 8px 0px; border: 0px; cursor: pointer; outline: none; width: 100px; }
+			button.modal_ajquery_cancel { font-size: 1em; margin-left: 10px; border: 1px solid var(--modal-main); background-color: #fff; color: var(--modal-main); }
+
+
 		</style>
 	</head>
 	<body>
@@ -451,11 +467,11 @@ <h3>Playlist Tools</h3>
 		</div>
 
 		<div id="search_dlg_nav1" class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix noselect" style="border-bottom-width: 1px; border-top-width: 0px; font-size: 1em; width: 92%; white-space:nowrap; max-width: 92%;">
-			<p>Search: <input type="text" size="30" id="searchstr" style="max-width: 80%;"> <a style="padding-right: 5px;" href="http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:Query_syntax" target="_blank" title="Query syntax help">?</a></p>
+			<p><input type="text" placeholder="Search" size="30" id="searchstr" style="max-width: 80%;">&nbsp;&nbsp;<a style="padding-right: 5px;" href="http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:Query_syntax" target="_blank" title="Query syntax help">?</a><span id="searchstrBttn" style="position: relative;left: -8%;">X</span></p>
 		</div>
 
 		<div id="search_dlg_nav2" class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix noselect" style="border-bottom-width: 1px; border-top-width: 0px; font-size: 1em; width: 92%; white-space:nowrap; max-width: 92%;">
-			<button id="r_btn">Retrieve list</button><strong>&nbsp;Current query path:&nbsp;</strong><span id="querypath"></span>
+			<button id="r_btn">All</button><button id="r_btn2"><</button><span id="querypath"></span>
 		</div>
 
 		<div id="browse_dlg" class="noselect" title="File browser" style="overflow-x: hidden;">

js/ajquery.js

@@ -19,6 +19,10 @@ let brParams = new Object;
 let keyPressed = {};
 let inputHasFocus = false;
 let bUnloading = false; // See startup.js
+let promptfCache = {
+	sort: '%TITLE%',
+	contextual: 'Playback Statistics/Rating/5'
+}
 const refreshInterval = 1000; // ms,.data retrieval interval, (not supposed to be changed)
 const menusPls = [
 	{id: 'PMME0',	type: '',					bSelection: false,	name: '', 						description: ''},
@@ -214,6 +218,12 @@ function promptf(msg, value) {
 	return result;
 }
 
+function promptfV2(msg, value, options = {theme: 'modal_ajquery', dragDrop: true, top: document.documentElement.clientHeight / 3}) {
+	inputHasFocus = true;
+	msg = msg.replace(/\n/g, '<br>');
+	return DayPilot.Modal.prompt(msg, value, options).finally(() => inputHasFocus = false);
+}
+
 /* This script and many more are available free online at
 The JavaScript Source!! http://javascript.internet.com
 Created by: Justas | http://www.webtoolkit.info/ */
@@ -1025,8 +1035,7 @@ function updateTabs() {
 			$("#tabs a:eq(" + i + ")").html(['<span>', fb.playlists[i].name, '</span>'].join(''));
 		}
 	}
-//	tabs.tabs('select', parseInt(fb.playlistActive));
-//	let index = $('#tabs a[href="#simple-tab-2"]').parent().index();
+
 	$("#tabs").tabs("option", "active", parseInt(fb.playlistActive));
 	settingTabs = false;
 }
@@ -1073,6 +1082,7 @@ function updateAlbumartPalette() {
 					'--background-color-v4':	palette.LightMuted.getHex(),
 					'--tabs-color-v1':			palette.LightMuted.getHex(),
 					'--tabs-color-v2':			palette.LightVibrant.getHex(),
+					'--modal-main': 				palette.Vibrant.getHex(),
 				};
 				const style = Object.keys(colors).map((key) => key + ': ' + colors[key]).join('; ');
 				$(':root').attr('style', style);
@@ -1116,8 +1126,8 @@ function updateLibrary() {
 	len = library.queryInfo.length;
 	const currSearch = $('#searchstr').val().length;
 	if (len < 1 && currSearch) {$('#r_btn').html('Filter');}
-	else if (len < 1 && !currSearch) {$('#r_btn').html('Retrieve list');}
-	else {$('#r_btn').text('<');}
+	else if (len < 1 && !currSearch) {$('#r_btn').html('All');}
+	// else {$('#r_btn').text('<');}
 	const path = [];
 	for (let i = 0; i < len; ++i) {
 		const name = stripXmlEntities.perform(library.queryInfo[i]);
@@ -1146,9 +1156,9 @@ function updateUI() {
 			let playingTitle = fb.helper2;
 			$('#playingtitle').html(fb.helper2);
 			// Responsive design
-			const maxWidth = document.documentElement.clientWidth * 0.75;
+			const maxWidth = $('#progressbar').width() * 0.88;
 			while ($('#playingtitle').width() > maxWidth) {
-				playingTitle = playingTitle.substring(0, playingTitle.length - 10) + '...';
+				playingTitle = playingTitle.substring(0, playingTitle.length - 4) + '...';
 				$('#playingtitle').html(playingTitle);
 			}
 			// Pause/play
@@ -1736,7 +1746,7 @@ $(function() {
 			},
 			range: false,
 			min: 1,
-			max: 1,            
+			max: 1,
 			value: 1
 		})
 
@@ -1788,30 +1798,65 @@ $(function() {
 		$('#search_dlg_nav2').insertBefore('#search_dlg');
 
 		$('#searchstr').keypress(function(e) {
-			const currSearch = $('#searchstr').val();
 			if (e.which == 13) { // Enter
+				const currSearch = $('#searchstr').val();
 				searchMediaLibrary(currSearch);
+				if (currSearch.length) {$('#r_btn').html('Filter');}
+				else {$('#r_btn').html('All');}
 			} else {
 				if (timeoutId2) {
-				  	clearTimeout(timeoutId2);
-				  	timeoutId2 = null;
+					clearTimeout(timeoutId2);
+					timeoutId2 = null;
+				}
+				if (!timeoutId2) {
+					timeoutId2 = setTimeout(() => {
+						const currSearch = $('#searchstr').val();
+						searchMediaLibrary(currSearch);
+						if (currSearch.length) {$('#r_btn').html('Filter');}
+						else {$('#r_btn').html('All');}
+					}, 500);
+				}
+			}
+		}).keyup(function(e) {
+			if (e.which == 8) { // Return
+				if (timeoutId2) {
+					clearTimeout(timeoutId2);
+					timeoutId2 = null;
 				}
 				if (!timeoutId2) {
-					timeoutId2 = setTimeout(() => searchMediaLibrary($('#searchstr').val()), 500);
+					timeoutId2 = setTimeout(() => {
+						const currSearch = $('#searchstr').val();
+						searchMediaLibrary(currSearch);
+						if (currSearch.length) {$('#r_btn').html('Filter');}
+						else {$('#r_btn').html('All');}
+					}, 500);
 				}
 			}
-			const query = library ? library.queryInfo.length : null;
-			if (query === null) {return;}
-			if (library.queryInfo.length < 1 && currSearch) {$('#r_btn').html('Filter');}
-			else if(library.queryInfo.length < 1 && !currSearch) {$('#r_btn').html('Retrieve artist list');}
-			else {$('#r_btn').text('<');}
+		}).on('focus keyup', function(e) {
+			if (!$(this).val().length){
+				$('#searchstrBttn').css({display: 'none', visibility: 'hidden'});
+			} else {
+				$('#searchstrBttn').css({display: 'inline', visibility: 'visible'});
+			}
+		});
+
+		$('#searchstrBttn').hover(
+			function() {$(this).addClass('qr_selected');},
+			function() {$(this).removeClass('qr_selected');}
+		).click(function(e) {
+			$('#searchstr').val('').keypress().keyup();
+
 		});
 
 		$('#r_btn').click(function(e) {
 			$(this).blur();
 			const query = $('#searchstr').val().toString();
-			if (query && query.length && (!library || library.queryInfo.length === 0)) {retrieveLibraryState('QueryAdvance', query);}
-			else {retrieveLibraryState('QueryRetrace');}
+			if (query && query.length && (!library || library.queryInfo.length === 0)) {searchMediaLibrary(currSearch);}
+			else {$('#querypath_' + 0).click(); retrieveLibraryState('QueryRetrace');}
+		});
+		$('#r_btn2').click(function(e) {
+			$(this).blur();
+			retrieveLibraryState('QueryRetrace');
 		});
 
 		// browse dialog
@@ -1824,8 +1869,10 @@ $(function() {
 			},
 			buttons: {
 				"Browse to..." : function() {
-					let path = promptf("Browse to:", Url.decode(br.pathcurrent));
-					if (path !== null) {retrieveBrowserState(path);}
+					promptfV2('<b>Browse to:</b>', Url.decode(br.pathcurrent !== '+' ? br.pathcurrent : '')).then((e) => {
+						const path = e.result;
+						if (path) {retrieveBrowserState(path);}
+					});
 				},
 				"Enqueue current" : function() { 
 					retrieveState(brParams.cmdenqueue);
@@ -1836,7 +1883,7 @@ $(function() {
 				"Close": function() { 
 					$(this).dialog("close"); 
 				}
-		    },
+			},
 			close: function(event, ui) { 
 				saveWindowToCookie($(this).attr('id'), false);
 				brOffsets = {};
@@ -2192,8 +2239,10 @@ $(function() {
 
 		// Buttons
 		$('#CreatePlaylist,#PTCreatePlaylist').click(function(e) {
-			let name = promptf('Enter new playlist name:', 'New Playlist');
-			if (name != null) {command($(this).attr('id').replace('PT',''), name, void(0), true);}
+			promptfV2('<b>Enter new playlist name:</b>', 'New Playlist').then((e) => {
+				const name = e.result;
+				if (name) {command($(this).attr('id').replace('PT',''), name, void(0), true);}
+			});
 		});
 
 		$('#RemovePlaylist,#PTRemovePlaylist').click(function(e) {
@@ -2206,8 +2255,11 @@ $(function() {
 
 		$('#RenamePlaylist,#PTRenamePlaylist').click(function(e) {
 			if (!$(this).hasClass('ui-state-disabled')) {
-				let new_name = promptf("Enter new name:", fb.playlists[fb.playlistActive].name);
-				if (new_name != null) {command('RenamePlaylist', new_name, fb.playlistActive, true);}
+				const currName = fb.playlists[fb.playlistActive].name;
+				promptfV2('<b>Enter new name:</b>', currName).then((e) => {
+					const name = e.result;
+					if (name && name !== currName) {command('RenamePlaylist', new_name, fb.playlistActive, true);}
+				});
 			}
 		});
 
@@ -2225,7 +2277,9 @@ $(function() {
 		});
 
 		$('#FlushQueue,#QueueRandomItems').click(function(e) {
-			command($(this).attr('id'), void(0), void(0), true);
+			if (!$(this).hasClass('ui-state-disabled')) {
+				command($(this).attr('id'), void(0), void(0), true);
+			}
 		});
 
 		$('#Undo,#Redo,#PTUndo,#PTRedo').click(function() {
@@ -2300,7 +2354,7 @@ $(function() {
 
 		$('#progressbar').progressbar({
 			value: 0
-		})                                                             
+		})
 		.resizable({ alsoResize: '#tabs', handles: 'e', resize: function(event, ui) { savePlaylistSize(); } })
 		.hover(
 			function(event) { },
@@ -2309,7 +2363,7 @@ $(function() {
 			function(event) {
 				if (fb && fb.isPlaying == "1") {
 					let t = Math.round((event.pageX - $('#progressbar').offset().left) * fb.itemPlayingLen / ($('#progressbar').width()));
-					tooltip.show(formatTime(t), event.pageX + 15, $('#progressbar').offset().top - 10);
+					tooltip.showHTML(fb.helper2 + '<br>' + formatTime(t), event.pageX + 15, $('#progressbar').offset().top - 10);
 				}
 		})
 		.click(function(event) {
@@ -2333,21 +2387,31 @@ $(function() {
 
 		// Input sort menu
 		$('#InputSort').click(function(e) {
-			let sort = promptf('Enter Sort pattern:\n\'ASCENDING BY\' or \'DESCENDING BY\'\nare allowed at the start (ascending by default).', '%title%');
-			if (sort != null) {
-				if (sort.startsWith('ASCENDING BY') || sort.startsWith('ABY')) {command('SortAscending', sort);}
-				else if (sort.startsWith('DESCENDING BY') || sort.startsWith('DBY')) {command('SortDescending', sort);}
-				else if (!sort.startsWith('DESCENDING') && !sort.startsWith('ASCENDING')) {command('SortAscending', sort);}
-				else {return;}
-			}
+			promptfV2('<b>Enter Sort pattern:</b> (ascending by default)\n\'ASCENDING BY\' (or \'ABY\') and \'DESCENDING BY\' (or \'DBY\') allowed.', promptfCache.sort).then((e) => {
+				const sort = e.result;
+				let bDone = false;
+				if (sort) {
+					bDone = true;
+					if (sort.startsWith('ASCENDING BY') || sort.startsWith('ABY')) {command('SortAscending', sort.replace(/^(ASCENDING BY|ABY) /, ''));}
+					else if (sort.startsWith('DESCENDING BY') || sort.startsWith('DBY')) {command('SortDescending', sort.replace(/^(DESCENDING BY|DBY) /, ''));}
+					else if (!sort.startsWith('DESCENDING') && !sort.startsWith('ASCENDING')) {command('SortAscending', sort);}
+					else {bDone = false;}
+				}
+				if (bDone) {promptfCache.sort = sort;}
+			});
 		});
 
 		// Input contextual menu
 		$('#InputCC').click(function(e) {
-			let name = promptf('Enter Contextual (full) menu name:\nNote that running playlist-specific commands\nlike Remove, Crop, etc is not possible.', 'Playback Statistics/Rating/5');
-			if (name != null) {
-				const items = selection.toStr();
-				command('SelectionCommand', name , items, true);
+			if (!$(this).hasClass('ui-state-disabled')) {
+				promptfV2('<b>Enter Contextual (full) menu name:</b>\nNote that running playlist-specific commands\nlike Remove, Crop, etc is not possible.', promptfCache.contextual).then((e) => {
+					const name = e.result;
+					if (name) {
+						const items = selection.toStr();
+						command('SelectionCommand', name , items, true);
+						promptfCache.contextual = name;
+					}
+				});
 			}
 		});