File modules/cms/ui/themes/default/script/plugin/jquery-plugin-orSearch.js

Last commit: Sun Feb 6 21:34:42 2022 +0100	dankert	New: Use Accept-Header instead of "output" request parameter, this is the cleaner way.


     1 import $ from "../jquery-global.js";
     2 import WorkbenchNavigator from "../openrat/navigator.js";
     3 import Workbench from "../openrat/workbench.js";
     4 
     5 /**
     6  * Suche mit Dropdown
     7  */
     8 export default function( options )
     9 {
    10     // Create some defaults, extending them with any options that were provided
    11     let settings = $.extend( {
    12       'dropdown': $(), // empty element
    13       'select'  : function( obj ) {},
    14       'afterSelect' : function() {},
    15       'onSearchActive' : function() {},
    16       'onSearchInactive' : function() {},
    17 	  'openDropdown' : true,
    18 	  'action': 'search',
    19 	  'method': 'quicksearch',
    20 	  'resultEntryClass': 'dropdown-entry',
    21     }, options);
    22 
    23 	let searchInput    = $(this)
    24 	let dropdownEl     = $( settings.dropdown );
    25 
    26 	let closeSearch = function() {
    27 		settings.onSearchInactive();
    28 
    29 		// No search argument.
    30 		$(dropdownEl).empty(); // Leeren.
    31 		dropdownEl.removeClass('search-result--is-active');
    32 	};
    33 
    34 	$(this).on('keydown',async function(e) {
    35 		if   ( e.keyCode == 13 ) { // Listen to ENTER
    36 			let dialog = Workbench.getInstance().createDialog();
    37 			closeSearch();
    38 			dialog.start('','search','edit',0,{'text':searchInput.val()});
    39 			searchInput.val('');
    40 		}
    41 	} );
    42 
    43 	return $(this).input(async function()
    44 	{
    45 		let searchArgument = searchInput.val();
    46 
    47 		if	( searchArgument.length )
    48 		{
    49 			settings.onSearchActive();
    50 			$('.or-search').addClass('search--is-active');
    51 			dropdownEl.addClass('search-result--is-active');
    52 
    53 			let url = './?action='+settings.action+'&subaction='+settings.method+'&search='+searchArgument;
    54 			let response = await fetch( url, {
    55 				method: 'GET',
    56 				headers: {
    57 					'Accept': 'application/json'
    58 				} } );
    59 			if   ( ! response.ok )
    60 				throw "Search request getting an error";
    61 			let data = await response.json();
    62 			$(dropdownEl).empty(); // Leeren.
    63 
    64 			for (let id in data.output.result) {
    65 				let result = data.output.result[id];
    66 
    67 				// Suchergebnis-Zeile in das Ergebnis schreiben.
    68 
    69 				let div = $.create('div')
    70 					.addClass( settings.resultEntryClass )
    71 					.addClass( settings.resultEntryClass + '--active' )
    72 					.attr('title',result.desc);
    73 				div.data( 'name'  , result.name );
    74 				div.data( 'action', result.type );
    75 				div.data( 'id'    , result.id   );
    76 				let link = $.create('a')
    77 					.addClass('link')
    78 					.attr('href', WorkbenchNavigator.createShortUrl(result.type, result.id));
    79 				link.click(function (e) {
    80 					e.preventDefault();
    81 				});
    82 				$(link).append(
    83 					$.create('i').addClass('image-icon').addClass('image-icon--action-' + result.type)
    84 				);
    85 				$(link).append(
    86 					$.create('span').addClass('dropdown-text').text(result.name)
    87 				);
    88 
    89 				$(div       ).append(link);
    90 				$(dropdownEl).append(div);
    91 			}
    92 
    93 			if (data.output.result && settings.openDropdown) {
    94 				// Open the menu
    95 				//$(dropdownEl).closest('.or-menu').addClass('menu--is-open');
    96 				$(dropdownEl).addClass('dropdown--is-open');
    97 			} else {
    98 				$(dropdownEl).removeClass('dropdown--is-open');
    99 			}
   100 
   101 			// Register clickhandler for search results.
   102 			$(dropdownEl).find('.or-search-result-entry').click(function (e) {
   103 				settings.select( $(this).data() );
   104 				settings.afterSelect();
   105 				searchInput.val('');
   106 				closeSearch();
   107 			});
   108 		}
   109 		else
   110 		{
   111 			closeSearch();
   112 		}
   113 	});
   114 };



Download modules/cms/ui/themes/default/script/plugin/jquery-plugin-orSearch.js


History
Sun, 6 Feb 2022 21:34:42 +0100	dankert	New: Use Accept-Header instead of "output" request parameter, this is the cleaner way.
Sun, 30 Jan 2022 23:38:42 +0100	dankert	Refactoring: Only 1 http-endpoint for both the UI and the API. Path "/api" is not available any more, all API data is served under "/".
Fri, 17 Dec 2021 04:29:47 +0100	dankert	New: Opening a dialog creates a new entry in history api. So, using the back button will close the dialog.
Tue, 7 Dec 2021 00:16:02 +0100	dankert	New: Enter in Search field will open a dialog for the view.
Mon, 6 Dec 2021 23:21:18 +0100	dankert	Fixes: Click on search results will close the search results.
Thu, 1 Apr 2021 22:53:24 +0200	Jan Dankert	Fix: Search
Wed, 31 Mar 2021 01:52:57 +0200	Jan Dankert	New: Replace JQuery with OQuery, a selfmade light JQuery replacement.
Mon, 29 Mar 2021 01:06:08 +0200	Jan Dankert	Removed common.js and moved the callbacks to the workbench module.
Sat, 27 Mar 2021 05:14:11 +0100	Jan Dankert	Refactoring: Converting all script files to ES6 modules (work in progress); removed jquery-ui (drag and drop will be replaced by HTML5, sortable by a small lib)
Wed, 17 Mar 2021 00:57:14 +0100	Jan Dankert	Replaced all Jquery ajax methods by the native fetch api.
Tue, 16 Mar 2021 23:52:22 +0100	Jan Dankert	Refactoring: Use ES6 classes.
Mon, 15 Feb 2021 01:33:55 +0100	Jan Dankert	New: Show the navigation tree only after click.
Sat, 13 Feb 2021 18:29:00 +0100	Jan Dankert	Fix: Selecting a search result in the selector must set the new value.
Fri, 12 Feb 2021 20:08:11 +0100	Jan Dankert	Fix: Show search result on top of the navigation.
Wed, 11 Nov 2020 01:44:59 +0100	Jan Dankert	Fix: The search results are opened with the menu.
Sat, 24 Oct 2020 23:51:11 +0200	Jan Dankert	Cleanup LESS files, introduce BEM.
Sat, 10 Oct 2020 01:29:41 +0200	Jan Dankert	Refactoring: Only using CSS classes with the 'or-'-prefix.
Tue, 6 Oct 2020 22:23:11 +0200	Jan Dankert	Fix: Selecting a link with the selector (this was unusable since the last template refactoring). Searching is implemented, the selector tree must be fixed soon.
Tue, 29 Sep 2020 01:13:54 +0200	Jan Dankert	Fix: The search function now finds objects id with a length less than 3.
Sun, 23 Feb 2020 04:01:30 +0100	Jan Dankert	Refactoring with Namespaces for the cms modules, part 1: moving.