SystemOmega

Táto stránka je iba na čítanie. Môžete si prehliadnuť zdrojový kód, ale nemôžete ho meniť. Opýtajte sa správcu, ak si myslíte, že niečo nie je v poriadku.
====== Javascript verzia smartSearch-u z flash-u ======

**Súbory** \\
//js/js_smartSearch.js//\\
//css/jsSmartSearch/ssearch.css//\\
//include/jsSmartSearch/jsSmartSearch.class.php//\\
//images/ss///

V adresári images sú obrázky vo formáte png optimálne 256*256 veľkosť s transparetným pozadím, určené pre smartSearch

Nutné ďalšie súbory sú **jquery**, **jquery.ui.js** a komunikačná trieda pre komunikáciu s php **js_comunication.js**

Inicializácia smartSearchu v html stránke 

<code html5>
<div id="main_ss_cont">
	<span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span>
	<img class="ss_info" id="categoryIcon">
   	<input id="hint" class="ui-autocomplete-input" type="text" name="word" autocomplete="off">
   	<div class="selectedCategoryLabel"></div>
   
   	<img src="images/ss/delete.png" class="ss_delete" id="ss_delete_btn">
   
 	<div id="ss_categoryContainer">
    	<input type="hidden" id="selectedCategory" value="">
    	<div class="categoryList"></div>
    </div>
   	<div id="ss_container">
   		<div class="smart_search_lite"></div>
   		<div id="loader"><img src="images/ss/ssloader.gif" class="ajaxLoader"></div>
    </div>
</div>
</code>

Následne je nutné v javascriptovom súbore inicializovať jsSmartSearch funkcionalitu\\ Ako prvé pre správne fungovanie html tooltipu je inicializácia nového attribútu **data-tooltip** Toto je dôležité preto, lebo klasický tooltip dokáže zobrazovať len čistý text a aby sme mohli použiť html v tooltipe je toto nutné.

<code javascript>
$( document ).tooltip({
		items:"[data-tooltip]",
		content:function(){
			return $(this).attr("data-tooltip");
		}
	}); 

$(document).ready(function(){
	init();
});

</code>

Do inicailizačnej funkcie je nutné nastaviť ešte stav jednotlivých tlačidiel


V prípade, že používame kategórie pre spresnenie smartSearchu, je nutné ako prvé nainicialzovať výber kategórie. Ak máme viacero smartSearchov na jednej stránke je nutné 
<code javascript>
jsSmartSearch.helper._categorySelectionData = {
			ss_info:"ss_info",
			ss_categoryContainer:"ss_categoryContainer",
			selectedCategory:"selectedCategory",
			categoryList:"categoryList",
			ss_categoryListResult:"ss_categoryListResult",
			selectedCategoryLabel:"selectedCategoryLabel",
			smartSearchSelect:"smartSearchSelect",
			ss_container:"ss_container",
			image_url:"images/ss/",
			server_url:"http://studio2.local/",
			categoryIconId:"categoryIcon",
			symbol:"category.png"
	}
</code>
  * **ss_info** (css class) = je ikona pred smartSearchom na výber kategórie
  * **ss_categoryContainer** (css id) = je zakladný kontainer kde sa budú zobrazovať dané kategórie
  * **selectedCategory** (css id, type hidden) = uloženie aktuálne vybranej kategórie do typu hidden
  * **categoryList** (css class) = je div kde sa už načítajú dané kategórie...
  * **ss_categoryListResult** = je dynamicky vytvorený div, v ktorom sa zobrazujú jednotlivé klikateľné kategórie
  * **selectedCategoryLabel** = obsahuje textovú informáciu o aktuálne vybranej kategórii
  * **smartSearchSelect** je idečko selectu v prípade ak máme zoznam smartSearchov
  * **ss_container** je názov id ečka hlavného smartSearch kontainera 
  * **image_url** je cesta k obrázkom pre smartSearch
  * **server_url** je url servera na ktorom beží omega
  * **symbol** je názov obrázka pre daný výber kategórie (musí byť uložený v images/ss)


Jednotlivé položky kategórie je nutné uviesť v základnej triede js_smartSearch.js a to v Namespace jsSmartSearch a triede helper, vytvorením metódy, ktorá vracia požadované pole
<code javascript>
jsSmartSearch.helper = {
_mainStructure:function(){
			
			return [
			        {type:"category_group", s_id:"project",title:"Projekty",symbol:"project.png"},
			        {type:"category_group", s_id:"project_active",title:"Aktívne projekty",symbol:"active_project.png"},
			        {type:"category_group", s_id:"technology",title:"Technologie",symbol:"technology.png"},
			        {type:"category_group", s_id:"resource",title:"Zdroje",symbol:"resource.png"},
			        {type:"category_group", s_id:"resource_technology",title:"Zdrojová tehnológia",symbol:"tech_res.png"},
			        {type:"category_group", s_id:"goods",title:"Tovar",symbol:"goods.png"},
			        {type:"category_group", s_id:"folder",title:"Adresár",symbol:"folder.png"},
			        {type:"category_group", s_id:"location",title:"Lokácia",symbol:"location.png"},
			        ];
		},

}
</code>
Symbol je názov png, ktorý musí byť uložený v adresári s obrázkami pre smartSearch. Nutné je dodržanie štruktúru objektového poľa a to type, s_id, title, symbol.
Následne je nutné rozšíriť funkcie showCategories a setCategories a daný smartSearch a tým sa zobrazia pri výbere.

===== Vytvorenie smartSearch požiadavky =====

<code javascript>
function ss_medicClService(id,text){
	var data = {
			
			divClassSmartSearch:"smart_search_lite",
			divIdForResult: "rr_res", //toto je riadok kam sa budu ukladat uz sparsovane vysledky
			divClassForResult: "smart_search_lite_result", //toto je class pripojenia na div id vysledku
			onSelectCallBack:"getData", //toto je kam sa zavola uz vysledok
			ssContainer:"ss_container", //meno kontainer celeho smartSearchu
			hintName:"hint",
			loadIcon:"loader",

			searchType:"all",
			fMethod:"default",
			extraSettings:[],
			partiallyOffset:0,
			partiallyLimit:52,
			partiallyPass:1, 
			topHitsIdf:"",
			topHitsMaxCount:5,
			dynSettings:{
					methodSettings:{
							labelCut:{
									labelFillStr:"...",
									labelCutEnd:10,
									labelCutStart:100
									},
							languageId:"sk",
							all:1,
							mode:"dynamic",
							broadCastIdf:"medic/medicClService",
							file:"module:medic/smartSearch/sMedicClService"
								}
						}
			
		}
		
		switch (id){
		case "click":
			data.searchTerms="*";
			break;
		case "type":
			data.searchTerms = text;
			break;
		}
		
		jsSmartSearch.ss.search(
				__ss_url__+"testssearch",
				"jsSmartSearch/jsSmartSearch/sMedicClService",
				these,
				data
				);
}
</code>


**Prvá časť** je nutná na to aby sa naformátovala časť pre zobrazenie výsledkov, 
  * divIdForResult je názov kam sa budú liať dynamicky generované výsledky
  * divClassForResult je kontainer do ktorého sa dáva divIdForResult
  * hintName je hint id pre zobrazenie hintov
  * ssContainer je hlavný kontainer smartSearchu
  * loadIcon je ikonka animácie loadovania dát
  * onSelectCallBack je názov funkcie kam sa má výsledok po výberu výsledku vyhľadávania vrátiť

<code javascript>
                        divClassSmartSearch:"smart_search_lite",
			divIdForResult: "rr_res", //toto je riadok kam sa budu ukladat uz sparsovane vysledky
			divClassForResult: "smart_search_lite_result", //toto je class pripojenia na div id vysledku
			onSelectCallBack:"getData", //toto je kam sa zavola uz vysledok
			ssContainer:"ss_container", //meno kontainer celeho smartSearchu
			hintName:"hint",
			loadIcon:"loader",
</code>

**Druhá časť** je už tá, v ktorej sa nastavuje už objekt odosielaný do smartSearch-u, tento je špecifický pre každý smartSearch, ale v základe
  * searchType je spôsob hľadania 
  * fMethod default/begin znamená či sa bude hľadať v častaich slov alebo len odzačiatku(rýchlejšia)
  * partiallyOffset a partiallyLimit je pravidlo LIMIT  offset,Limit v MySQL
  * dynSettings je object kam sa zadávajú nastavenia LabelCut a to start a end, dľa nastavenia smartSearchu

Dôležite je rozdelenie na click a type, t.j. keď sa prvý raz klikne do input boxu začnú sa hľadať všetky nálezy, písaním už prebieha aktívne vyhľadávanie...

Potom už stačí zavolať funkciu 
<code javascript>
jsSmartSearch.ss.search(
			__ss_url__+"testssearch",
			"jsSmartSearch/jsSmartSearch/smartSearchDiagnosis",
			these,
			data
			);
</code>

__ss_url__ je adresa servera a route-u pre daný modul a reťazec už názov cesty
SystemOmega

Nástroje používateľa

Nástoje správy stránok

Nástoje stránky
