openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

jquery-plugin-orSearch.js (3227B)


      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 };