Rozdiely

Tu môžete vidieť rozdiely medzi vybranou verziou a aktuálnou verziou danej stránky.

--- dev:omega:js:smartsearch [2017/01/03 10:06]
Boris Duchaj
+++ dev:omega:js:smartsearch [2017/01/09 11:13] (aktuálne)
Boris Duchaj [Vytvorenie kategorií smartSearchu]
@@ Riadok 1: / Riadok 1: @@
 ====== Javascript verzia smartSearch-u z flash-u ======
+**<color green>GIT vetva je 727.git duch/merge7 / 3514b1a</color>**
+<color green>V tejto vetve sa nachádza aj ukážkový modul testss, v ktorom je kompletné funkčné demo SmartSearchu</color>
 **Súbory** \\
@@ Riadok 5: / Riadok 9: @@
 //css/jsSmartSearch/ssearch.css//\\
 //include/jsSmartSearch/jsSmartSearch.class.php//\\
+//images/ss///
-Nutné ďalšie súbory je jquery, jquery.ui.js a komunikačná trieda pre komunikáciu s php **js_comunication.js**
+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
-Inicializácia smartSearchu v html stránke
+Nutné ďalšie súbory sú **jquery**, **jquery.ui.js** a komunikačná trieda pre komunikáciu s php **js_comunication.js**
-<code>
+===== 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" onclick="jsSmartSearch.ss.showCategories('smartSearchSelect');">
+	<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="http://studio2.local/images/ss/delete.png" class="ss_delete" onclick="jsSmartSearch.ss.close('ss_container','hint');">
+   	<img src="images/ss/delete.png" class="ss_delete" id="ss_delete_btn">
  	<div id="ss_categoryContainer">
@@ Riadok 25: / Riadok 33: @@
    	<div id="ss_container">
    		<div class="smart_search_lite"></div>
-   		<div id="loader"><img src="http://studio2.local/images/ss/ssloader.gif" class="ajaxLoader"></div>
+   		<div id="loader"><img src="images/ss/ssloader.gif" class="ajaxLoader"></div>
     </div>
 </div>
 </code>
+===== Inicializácia data-tooltip =====
+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>
+===== Nastavenie tlačidiel smartSearchu =====
+Do inicailizačnej funkcie je nutné nastaviť ešte stav jednotlivých tlačidiel, t.j.
+<code javascript>
+$("#categoryIcon").on("click",function(){
+		jsSmartSearch.ss.showCategories('smartSearchSelect'); // odkaz na select kde su smartsearche
+	});
+	$("#ss_delete_btn").on("click",function(){
+		jsSmartSearch.ss.close('ss_container','hint'); //odkaz na ss_container a textove pole hint
+	});
+	$("#smartSearchSelect").on("change",function(){
+		jsSmartSearch.ss.close('ss_container','hint'); // pri zmene zavolaj reset smartsearchu
+		jsSmartSearch.ss.setCategories('smartSearchSelect'); //nastav kategoriu ak je to mozne
+	});
+</code>
+===== Vytvorenie kategorií smartSearchu =====
+V prípade, že používame  pre spresnenie smartSearchu kategórie, je nutné ako prvé nainicializovať 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

Rozdiely

Nástoje stránky