// autocomplete class # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # AutoComp = new Class ({ // letrejon a peldany: felepiti es beteszi az eredmeny tarto div rendszert a container divbe initialize: function(input_container_id, remote_script, plus_field_id) { // az autocomplete input mezot tarto div this.container = $(input_container_id); // benne az input mezo if ($chk(this.container)) this.auto_input = this.container.getElement('input'); // ha megvan az input mezo if ($chk(this.auto_input)) { // valtozo neve, amiben elmegy a text mezo tartalma = az input mezo name tagjevel this.text_field_name = this.auto_input.get('name'); // hidden mezo neve: a mezo neve plusz egy "_" karakter this.hidden_field_name = this.text_field_name+'_'; // plusz figyelendo mezo ha van this.plusField = false; if ($(plus_field_id)) { this.plusField = $(plus_field_id); } // tavoli script this.remote_script = remote_script; // eredmeny tarto this.resultCnt = new Element('div', {'class':'input_auto_div', 'styles':{'display':'none', 'z-index':800}}).inject(this.container); //this.resultCnt = new Element('div', {'class':'input_auto_div'}).inject(this.container); // teteje //new Element('div', {'class':'auto_top'}).inject(this.resultCnt); // kozepe: ebbe jonnek majd az eredmenyek this.list_container = new Element('div', {'class':'auto_cont'}).inject(this.resultCnt); // alja //new Element('div', {'class':'auto_bot'}).inject(this.resultCnt); // az inputhoz bindoljuk a futast billentyu felengedesre this.auto_input.addEvent('keyup', function(){this.getList();}.bind(this)); // entert elkapjuk this.auto_input.addEvent('keypress', function(e) { if(e.key == 'enter') { e.stop(); } }.bind(this)); // documentre kattintva eltunik document.addEvent('click', function(){this.resetContainer()}.bind(this)); } }, /* ez adja vissza a listat es beteszi a listatarto containerbe (ha van a listaban elem) a listanak JSON formaban kell lennie (a html es plain text verzio miatt) lasd a minta file-t */ getList: function() { // auto mezo erteke var value = this.auto_input.get('value'); // ha van ertek if (value.length>0) { // postolando adat a megadott valtozo nevvel this.postData = this.text_field_name+'='+value; // ha jott plusz mezo, akkor azt hozzacsapja a posthoz if (this.plusField) { var plusVarname = this.plusField.get('name'); var plusValue = this.plusField.get('value'); this.postData+='&'+plusVarname+'='+plusValue; } //alert(this.postData); // request //var req = new Request.HTML var req = new Request.JSON( { url:this.remote_script, method: 'post', data: this.postData, evalScripts:false, //onComplete: function(responseTree, responseElements, responseHTML, responseJavaScript) onComplete: function(jsonObj) { //alert(responseHTML); // eloszor uritjuk a list containert this.list_container.empty(); // ha van elem a listaban: ciklussal betesszuk az elemeket a lista containerbe es megjelenitjuk az egesz cuccot if (jsonObj && jsonObj.lista.length>0) { jsonObj.lista.each ( function(row) { var listElement = new Element('a'); listElement.set({ 'href':'#', 'html':row.html, 'onfocus':'blur()', 'events': { 'click': function(e) { e.stop(); // beirja a szoveget az input mezobe this.auto_input.set('value', row.plain); // beirja az erteket a hidden mezobe, ha van if ($(this.hidden_field_name)) $(this.hidden_field_name).set('value', row.ertek); // lista container eltunik this.resetContainer(); }.bind(this) } }); listElement.inject(this.list_container); }.bind(this) ); // this.resultCnt.setStyle('display', 'block'); } // ha nincs elem else { // lista container nemkell this.resetContainer(); // if ($(this.hidden_field_name)) $(this.hidden_field_name).set('value', ''); } }.bind(this) }).send(); } else { // lista container nemkell this.resetContainer(); } }, resetContainer: function() { this.list_container.empty(); this.resultCnt.setStyle('display', 'none'); // hidden mezobe 0, ha van //if ($(this.hidden_field_name)) // $(this.hidden_field_name).set('value', 0); } }); // END autocomplete class // focus jelolese input type='text' es textarea mezokon # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # function textFocus(container) { // ha jon valami container id, akkor csak azon belul fut if (container) { if ($(container)) { var conts = $(container).getElements('span.input_bg'); conts.extend($(container).getElements('div.textarea_bg')); } } // egyebkent a teljes documentumra else var conts = $$('span.input_bg', 'div.textarea_bg'); if ($chk(conts)) { conts.each ( function(cont) { // input/textarea elem var field = cont.getElement('input'); if (!$chk(field)) var field = cont.getElement('textarea'); // field.addEvent('focus', function() { var curClass = cont.getProperty('class'); cont.setProperty('class', curClass+'_focus'); }) // field.addEvent('blur', function() { var curClass = cont.getProperty('class'); cont.setProperty('class', curClass.replace('_focus','')); }) } ) } } // // grafikus checkbox/radio kezeles # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # function gv_check_radio(container, onclick_function) { // ha jon valami container id, akkor csak azon belul fut (pl ajaxbol visszafrissitett tartalomnal hasznos) if (container) { if ($(container)) { var spans = $(container).getElements('span.gvRadio'); spans.extend($(container).getElements('span.gvCheck')); } } // egyebkent a teljes dokumentumra else var spans = $$('span.gvRadio', 'span.gvCheck'); if ($chk(spans)) { spans.each ( function(span) { // input elem var input = span.getElement('input'); //input.setStyle('opacity', 0); // alap class a befoglalo spanhoz: a becsekkolt allapot alapjan if (input.getProperty('checked')) span.addClass('checked'); else span.removeClass('checked'); // tipus chekbox, vagy radio var type = (input.get('type')=='checkbox') ? 'chk' : 'rad'; // kattintasra class valtas input.addEvent('click', function() { // csekkboksznal siman kapcsolgatjuk if (type=='chk') { if (input.getProperty('checked')) span.addClass('checked'); else span.removeClass('checked'); } // redional csak bekapcs, es az azonos nevuek kikapcs if (type=='rad') { // var name = input.getProperty('name'); spans.getElements('input').each ( function(si) { if (si.getProperty('name')==name) { si.getParent('span.gvRadio').removeClass('checked'); } } ); // span.addClass('checked'); } // if(onclick_function) eval(onclick_function()); }) } ) } } // grafikus selectbox objektum # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # var gvSelect_ZINDEX = 6500; var gvSelect = new Class ({ // init initialize: function(selectCont, onchange_function) { // onchange nincs this.ocev = false; // nyitott allapot: csukva this.is_open = 0; // z-index //this.z = z; // container: a span amiben van az eredeti select this.container = $(selectCont); if (this.container) { // eredeti select this.origSelect = this.container.getElement('select'); // szulo class, ha jon this.onchange_function = onchange_function; // meggyartjuk a cuccot this.build(); } }, // build: function() { // regi select eltunik this.origSelect.set('styles',{'display':'none'}); // helyere bejon a div, amiben az egesz van this.select = new Element('div', {'class':'gvSelect', 'styles':{'z-index':gvSelect_ZINDEX}}).inject(this.container) //this.select = new Element('div', {'class':'gvSelect', 'styles':{'position':'absolute','z-index':this.z,'top':200,'left':200}}).inject(document.body) // fejlec terulet: benne a szoveg es a nyil this.headArea = new Element('div', {'class':'gvS_headArea', 'styles':{'z-index':gvSelect_ZINDEX}}).inject(this.select); // fejlec szoveg this.headtext = new Element('div', {'class':'gvS_headText', 'styles':{'z-index':gvSelect_ZINDEX}}).inject(this.headArea); // fejlec nyil this.headarrow = new Element('div', {'class':'gvS_headArrow', 'styles':{'z-index':gvSelect_ZINDEX}}).inject(this.headArea); // separator sep = new Element('div', {'styles':{'clear':'both','z-index':gvSelect_ZINDEX}}).inject(this.select); // innen csak ha nem disabled az egesz select if (!this.origSelect.getProperty('disabled')) { // option terulet: benne az optionok this.optionsArea = new Element('div', {'class':'gvS_optionsArea', 'styles':{'z-index':gvSelect_ZINDEX}}).inject(this.select); // eredeti optionok visszapakkantasa this.origSelect.getElements('option').each ( function(oo) { // eredeti text var ooText = oo.get('text'); //alert(ooText); // eredeti class felszed var ooClass = false; ooClass=oo.getProperty('class'); // valasztott option szovege es eredeti class a fejlecbe if (oo.selected) { this.headtext.set('text', ooText); if (ooClass) this.headtext.addClass(ooClass); } // option bele option = new Element('div', {'class':'gvS_option', 'styles':{'z-index':gvSelect_ZINDEX}}).inject(this.optionsArea).set('text', ooText); // eredeti class, ha volt az optionnak if (ooClass) option.addClass(ooClass); // effektek ha nem disabled if (!oo.disabled) { // over/out option.addEvent('mouseover', function(){this.addClass('over');}); option.addEvent('mouseout', function(){this.removeClass('over');}); // kattinas option.addEvent('click', function() { // jelenlegi erteket taroljuk var cur_value = this.origSelect.get('value'); // beirjuk a textet this.headtext.set('text', ooText); // head szoveg class allitgatas: beallitjuk az alapot es ha volt az optionnek, akkor azt hozzaadjuk this.headtext.setProperty('class', 'gvS_headText'); if (ooClass) this.headtext.addClass(ooClass); // bezarjuk a selectet this.dropdown(); // beallitjuk az erteket az eredeti selectben this.origSelect.value = oo.value; //alert(oo.value); // onchange event lefuttatasa, ha van if(this.onchange_function) { // csak ha valtozik if (oo.value!=cur_value) { eval(this.onchange_function(this.origSelect.value, ooText)); } } }.bind(this)); } // disabled class ha kell else option.addClass('disabled'); }.bind(this) ); // ablakra kattintva becsikjuk document.addEvent('click', function() { if (this.optionsArea.getStyle('display')=='block') this.dropdown(); }.bind(this)); } // END ha nem disabled az egesz select else { //TODO: teljes disabled select kezelese } // a select layerrol "leszedjuk" az elozo cuccot, hogy ne tunjon el egybol mikor megnyilik this.select.addEvent('click', function(e) { e.stop(); }); // fejlecre kattintva lenyikik, ha nem disabled az egesz select this.headArea.addEvent('click', function() { this.dropdown(); }.bind(this)); // globalis z-indez csokkentese gvSelect_ZINDEX--; }, // dropdown kezeles (lenyitas/becsukas) dropdown: function() { // lenyit if (this.is_open==0) this.optionsArea.setStyle('display', 'block'); // becsuk else this.optionsArea.setStyle('display', 'none'); // allapot beallitasa this.is_open = 1 - this.is_open; }, debug: function(t) { if ($('debugtext')) $('debugtext').setHTML(t); } }) // grafikus selectek letrehozasa egy containeren belul function create_gvSelect(container, onchange_function) { // a konteneren belul fut a gvSelect peldanyok letrehozasa if ($(container)) { // a select elemek 'gvSelect' classu span tagek kozott vannak var selectContainers = $(container).getElements('span.gvSelect'); // vegigzuzunk a containerken if (selectContainers.length>0) { selectContainers.each(function(sc) { if (onchange_function) new gvSelect(sc, onchange_function); else new gvSelect(sc); }) } } } // kozos formkezelo class # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # var RemoteForm = new Class ({ // optionok Implements: Options, options: { container: false, remote_script: false, set_textFocus: false, set_checkRadio: false, set_gvSelect: false, autoComplete: false, list_remote_script: false, reponse_container: false, select_onchange_post: false }, initialize: function(options) { // optionok jonnek this.setOptions(options); // ha oke a container if ($(this.options.container)) { // kontener elem this.container = $(this.options.container); // a cel kontener lehet eltero is if (this.options.reponse_container && $(this.options.reponse_container)) this.target_container = $(this.options.reponse_container); else this.target_container = this.container; // a fo form, amire az egesz mukodik: a kontaineren belul egy form lehet this.main_form = this.container.getElement('form'); // egyeb form elemek(focus,auto,stb) beallitasa indulaskor this.set_specs(); this.set_form(); } // END ha oke a container }, set_form: function() { // form hatterbeli feldolgozasa, ha oke a form id if (this.main_form) { // a gombra kattintva jon az egesz cucc this.main_form.getElement('a.submitBtn').addEvent('click', function(e) { // az alap eventet (href) leallitjuk e.stop(); // this.post_form(); }.bind(this)); } }, // form elkuldese post_form: function() { // kerem varjon a lista helyere // var myTimer = pleaseWait.delay(_PLEASEWAIT_TIME, '', this.options.container); // send beallitasok this.main_form.set('send', { // ajax script ittvan url:this.options.remote_script, evalScripts: true, // siker: onComplete: function(response) { // kerem varjon stop // $clear(myTimer); if ($chk(response)) { // visszairjuk a responst this.target_container.set('html',response); // ha nem eltero a target container if (this.target_container==this.container) { // a main form a visszairt tartalom lesz az eredeti kontenerben, erre ujra lefuttatjuk a form elkuldo cuccot es a spec elemeket this.main_form = this.container.getElement('form'); if (this.main_form) { this.set_specs(); this.set_form(); } } // ha van lista tavoli script megadva, akkor megprobaljuk a lista cuccokat lefuttatni a cel kontenerben if (this.options.list_remote_script) listUpdate(this.options.list_remote_script, this.target_container); } }.bind(this) }); // form elkuldes this.main_form.send(); }, // form spceialis elemeinek beallitasa: checbox, focuskovetes, selectboxok, autocomplete set_specs: function() { // text focus bellitas if (this.options.set_textFocus) textFocus(this.container); // grafikus checkbox/radio beallitas if (this.options.set_checkRadio) gv_check_radio(this.container); // grafikus select beallitas if (this.options.set_gvSelect) { if (this.options.select_onchange_post) create_gvSelect(this.container, this); else create_gvSelect(this.container); } // autocomplete adatok feldolgozasa if (this.options.autoComplete.length>0) { var i = 0; this.options.autoComplete.each(function(t) { // 0.elem:autocomplete mezo, 1.elem:tavoli script, 2.elem:plusz elkuldendo mezo //alert(t[0]+'|'+t[1]+'|'+t[2]); new AutoComp(t[0], t[1], t[2]); }); } } });