/* Language Search Form
* Author: Dwight VanTuyl
* Location: v2.linguistlist.org > /home/rubyprojects/MT_Prod/public/widgets/lang_search/set_elements.js
* Description: Displays four separate forms for submitting language queries and a results list
* - Language Name Search
* - Language Code Search
* - Family Name Search
* - Family Tree Select
*
* Depends on Extjs 3.0 library
* Example Usage:
*
*/
//Declare the Multitree Namespace so javascript variables do not conflict with other
Ext.namespace('MultiTree.LangSearch');
//Overwrites the input search and results elements
// INPUT: searchElement: the div to render the 4 language search forms to
// resultsElement: the div to render the results to
// perPage: number of results per page (max 50)
MultiTree.LangSearch.set_elements = function(params){
var searchElement = params.searchEl;
var resultsElement = params.resultsEl;
var limit = ((params.perPage != null && params.perPage <= 50) ? params.perPage : 50);
Ext.QuickTips.init();
var searchMsg = null; //popup searching message variable
// init language store for retrieved records
var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
method: 'get',
url: 'http://multitree.linguistlist.org/nodes.json'
}),
reader: new Ext.data.JsonReader({
root: 'nodes',
id: 'id',
totalProperty: 'results'
}, [{name: 'id'},
{name: 'tree_id'},
{name: 'pri_name'},
{name: 'family_name'},
{name: 'family_code'},
{name: 'alt_names'},
{name: 'node_type'},
{name: 'code'},
{name: 'code_description'},
{name: 'parent_type'},
{name: 'parent_name'},
{name: 'parent_code'},
{name: 'code_authority'}
]
),
listeners: {
// hide the search message and render paging toobars
load: function(){
searchMsg.hide();
topPaging.show();
if(store.getCount() > 0){
bottomPaging.show();
}else{
bottomPaging.hide();
}
},
//server returned null. this is due to the user submitting less than 2 chars or server timeout due to traffic or long search times
loadexception: function(){
searchMsg.hide();
Ext.Msg.alert('ERROR', 'Search criteria is too vague. Try adding more characters to your query.');
}
}
});
//define Language Name Search Form Handler
var searchLangNameHandler = function(){
searchMsg = Ext.Msg.wait("Searching...");
searchLangCodeForm.form.reset();
searchFamilyNameForm.form.reset();
searchFamilyTreeForm.form.reset();
params = searchLangNameForm.form.getValues();
params.limit = limit;
store.baseParams = params;
store.load();
};
//define Language Name Search Form
var searchLangNameForm = new Ext.FormPanel({
id: 'search-lang-name-form',
cls: 'search-forms',
itemCls: 'search-form-items',
keys: [{
key: Ext.EventObject.ENTER,
fn: searchLangNameHandler,
scope: this
}],
items: [
{xtype: 'textfield', fieldLabel:'Language Name', width: 110, name: 'lang_name'},
{xtype: 'button', text: 'GO', form: 'searchLangNameForm', tooltip:'Search language names',
handler: searchLangNameHandler
},
{xtype: 'button',text: 'Reset', tooltip:'Reset form', handler: function(){searchLangNameForm.form.reset();}}
]
});
//define Language Code Search Form Handler
var searchLangCodeHandler = function(){
searchMsg = Ext.Msg.wait("Searching...");
searchLangNameForm.form.reset();
searchFamilyNameForm.form.reset();
searchFamilyTreeForm.form.reset();
params = searchLangCodeForm.form.getValues();
params.limit = limit;
store.baseParams = params;
store.load();
};
//define Language Code Search Form
var searchLangCodeForm = new Ext.FormPanel({
id: 'search-lang-code-form',
cls: 'search-forms',
itemCls: 'search-form-items',
keys: [{
key: Ext.EventObject.ENTER,
fn: searchLangCodeHandler,
scope: this
}],
items: [
{xtype: 'textfield', fieldLabel:'Language Code', width: 110, name: 'lang_code'},
{xtype: 'button', text: 'GO', form: 'searchLangCodeForm', tooltip:'Search language codes',
handler: searchLangCodeHandler
},
{xtype: 'button',text: 'Reset', tooltip:'Reset form',handler: function(){searchLangCodeForm.form.reset();}}
]
});
//define Language Code Search Form Handler
var searchFamilyNameHandler = function(){
searchMsg = Ext.Msg.wait("Searching...");
searchLangCodeForm.form.reset();
searchLangNameForm.form.reset();
searchFamilyTreeForm.form.reset();
params = searchFamilyNameForm.form.getValues();
params.limit = limit;
store.baseParams = params;
store.load();
};
//define Family Name Search Form
var searchFamilyNameForm = new Ext.FormPanel({
id: 'search-family-name-form',
cls: 'search-forms',
labelWidth: 80,
itemCls: 'search-form-items',
keys: [{
key: Ext.EventObject.ENTER,
fn: searchFamilyNameHandler,
scope: this
}],
items: [
{xtype: 'textfield', fieldLabel:'Family Name', width: 110, name: 'family_name'},
{xtype: 'button', text: 'GO', form:'searchFamilyNameForm', tooltip:'Search family names',
handler: searchFamilyNameHandler
},
{xtype: 'button',text: 'Reset', tooltip:'Reset form',handler: function(){searchFamilyNameForm.form.reset();}}
]
});
//define Family Tree Form
var searchFamilyTreeForm = new Ext.FormPanel({
id: 'search-family-tree-form',
cls: 'search-forms',
labelWidth: 80,
itemCls: 'search-form-items',
keys: [{
key: Ext.EventObject.ENTER,
fn: function(){
var code = searchFamilyTreeForm.form.findField('family-tree-cmb').getValue();
if(code != ''){
window.open("http://multitree.linguistlist.org/codes/" + code);
}
},
scope: this
}],
items: [
new Ext.form.ComboBox({
name: 'family-tree-cmb',
width: 110,
fieldLabel:'Family Tree',
cls: 'combo',
valueField: 'code',
displayField: 'pri_name',
triggerAction: 'all',
typeAhead: true,
forceSelection: true,
minChars: 2,
store: new Ext.data.Store({
baseParams: {family_tree: true},
proxy: new Ext.data.ScriptTagProxy({
method: 'get',
url: 'http://multitree.linguistlist.org/nodes.json'
}),
reader: new Ext.data.JsonReader({
root: 'nodes',
id: 'code',
totalProperty: 'results'},
[{name: 'code'},{name: 'pri_name'}]
)
})
}),
{xtype: 'button', text: 'GO', form: 'searchFamilyTreeForm', tooltip:'Open the selected family',
handler: function(){
var code = searchFamilyTreeForm.form.findField('family-tree-cmb').getValue();
if(code != ''){window.open("http://multitree.linguistlist.org/codes/" + code);}
}
},
{xtype: 'button',text: 'Reset', tooltip:'Reset form',handler: function(){searchFamilyTreeForm.form.reset();}}
]
});
//Results template renders the results encapuslated in html
var tpl = new Ext.XTemplate(
'',
'',
'
{pri_name}',
'
',
'({alt_names})',
'',
'
',
'',
'- description:{code_description}
',
'',
'- ',
'type:{node_type}',
'|',
'code:{code}',
'|',
'authority:{code_authority}',
'',
'|',
'parent {parent_type}:{parent_name}',
'',
'',
'|',
'family:{family_name}',
'',
'
',
'',
'- more info:
',
'',
'
',
'Tree',
'
',
'Map',
'
',
'',
'