LSformElement :: supannLabeledValue.php : Improve edition to permit value selection in SUPANN table

This commit is contained in:
Benjamin Renard 2014-11-25 00:07:21 +01:00
parent c9bd4b7c65
commit c241d9c0b6
7 changed files with 339 additions and 43 deletions

View file

@ -0,0 +1,24 @@
input.LSformElement_supannLabeledValue_search {
border: 1px solid #CCC;
width: 200px;
background: url('../../images/default/find.png') no-repeat scroll 0% 0% #FFF !important;
padding-left: 18px;
}
div.supannLabeledValue_possibleValues ul {
list-style-type: none;
padding: 0;
margin: 0;
border: 1px solid #CCC;
border-collapse: collapse;
}
div.supannLabeledValue_possibleValues li {
border-bottom: 1px solid #CCC;
margin-bottom: 2px;
}
div.supannLabeledValue_possibleValues li:hover {
background-color: #CCC;
cursor: pointer;
}

View file

@ -54,6 +54,21 @@ class LSformElement_supannLabeledValue extends LSformElement {
$parseValues[]=$this -> parseValue($val);
}
$return['html'] = $this -> fetchTemplate(NULL,array('parseValues' => $parseValues));
LSsession :: addCssFile('LSformElement_supannLabeledValue.css');
if (!$this -> isFreeze()) {
LSsession :: addJSconfigParam(
$this -> name,
array(
'searchBtn' => _('Modify'),
'noValueLabel' => _('No set value'),
'noResultLabel' => _('No result'),
'components' => $this->components
)
);
LSsession :: addJSscript('LSformElement_supannLabeledValue_field_value.js');
LSsession :: addJSscript('LSformElement_supannLabeledValue_field.js');
LSsession :: addJSscript('LSformElement_supannLabeledValue.js');
}
return $return;
}
@ -80,6 +95,43 @@ class LSformElement_supannLabeledValue extends LSformElement {
return $retval;
}
/**
* This ajax method is used by the searchPossibleValues function of the form element.
*
* @param[in] $data The address to the array of data witch will be return by the ajax request
*
* @retval void
**/
public static function ajax_searchPossibleValues(&$data) {
if ((isset($_REQUEST['attribute'])) && (isset($_REQUEST['objecttype'])) && (isset($_REQUEST['pattern'])) && (isset($_REQUEST['idform'])) ) {
if (LSsession ::loadLSobject($_REQUEST['objecttype'])) {
$object = new $_REQUEST['objecttype']();
$form = $object -> getForm($_REQUEST['idform']);
$field=$form -> getElement($_REQUEST['attribute']);
$data['possibleValues'] = $field -> searchPossibleValues($_REQUEST['pattern']);
}
}
}
private function searchPossibleValues($pattern) {
$pattern=strtolower($pattern);
$retval=array();
$table=supannGetNomenclatureTable($this -> supannNomenclatureTable);
foreach($table as $label => $values) {
foreach($values as $v => $txt) {
if (strpos(strtolower($txt),$pattern)!==false) {
$retval[]=array(
'label' => $label,
'value' => "{".$label."}".$v,
'translated' => $txt
);
}
}
}
return $retval;
}
}
?>

View file

@ -0,0 +1,18 @@
var LSformElement_supannLabeledValue = new Class({
initialize: function(){
this.fields = [];
this.initialiseLSformElement_supannLabeledValue();
},
initialiseLSformElement_supannLabeledValue: function(el) {
if (!$type(el)) {
el = document;
}
el.getElements('ul.LSformElement_supannLabeledValue').each(function(ul) {
this.fields[ul.id] = new LSformElement_supannLabeledValue_field(ul);
}, this);
}
});
window.addEvent(window.ie ? 'load' : 'domready', function() {
varLSformElement_supannLabeledValue = new LSformElement_supannLabeledValue();
});

View file

@ -0,0 +1,38 @@
var LSformElement_supannLabeledValue_field = new Class({
initialize: function(ul){
this.ul=ul;
this.dd=ul.getParent();
this.name = ul.id;
this.values = [];
this.field_type = ul.get('data-fieldType');
this.initializeLSformElement_supannLabeledValue_field();
varLSform.addField(this.name,this);
console.log(this.field_type);
varLSform.addModule(this.field_type,this);
},
initializeLSformElement_supannLabeledValue_field: function(el) {
if (!$type(el)) {
el = this.ul;
}
el.getElements('li').each(function(li) {
this.values.push(new LSformElement_supannLabeledValue_field_value(li,this.name,this.field_type));
}, this);
},
clearValue: function() {
if (this.values.length>1) {
for(var i=1; i<=this.values.length; i++) {
$(this.values[i].li).dispose();
}
this.values[0].clear();
}
else if (this.values.length==1) {
this.values[0].clear();
}
},
reinitialize: function(li) {
this.values.push(new LSformElement_supannLabeledValue_field_value(li,this.name,this.field_type));
}
});

View file

@ -0,0 +1,173 @@
var LSformElement_supannLabeledValue_field_value = new Class({
initialize: function(li,name,field_type){
this.li=li;
this.name = name;
this.field_type = field_type;
this.params = varLSdefault.LSjsConfig[this.name];
this.input = this.li.getElement('input');
this.img = this.li.getElement('img.LSformElement_supannLabeledValue_label');
this.span = this.li.getElement('span');
this.inputSearch=new Element(
'input',
{
'class': 'LSformElement_supannLabeledValue_search',
'styles': {
'display': 'none'
}
}
);
this.inputSearch.addEvent('keydown',this.onKeyUpInputSearch.bindWithEvent(this));
this.inputSearch.injectInside(this.li);
this.searchBtn=new Element(
'img',
{
'src': varLSdefault.imagePath('modify'),
'alt': this.params.searchBtn,
'title': this.params.searchBtn,
}
);
this.searchBtn.addEvent('click',this.toogleInputSearch.bind(this));
this.searchBtn.injectAfter(this.span);
this._lastSearch=null;
this._possibleValues=null;
},
toogleInputSearch: function() {
if (this.inputSearch.getStyle('display')=='none') {
this.inputSearch.setStyle('display','block');
this.inputSearch.focus();
}
else {
this.hidePossibleValues();
this.inputSearch.setStyle('display','none');
this.inputSearch.set('value','');
}
},
onKeyUpInputSearch: function(event) {
event = new Event(event);
if ((event.key=='enter')||(event.key=='tab')) {
event.stop();
if (this.inputSearch.value!="") {
this.launchSearch();
}
}
if (event.key=='esc') {
this.toogleInputSearch();
}
},
launchSearch: function() {
this.hidePossibleValues();
this._lastSearch=this.inputSearch.value;
var data = {
template: 'LSformElement_supannLabeledValue',
action: 'searchPossibleValues',
attribute: this.name,
objecttype: varLSform.objecttype,
idform: varLSform.idform,
pattern: this.inputSearch.value
};
data.imgload=varLSdefault.loadingImgDisplay(this.inputSearch);
new Request({url: 'index_ajax.php', data: data, onSuccess: this.onSearchComplete.bind(this)}).send();
},
onSearchComplete: function(responseText, responseXML) {
var data = JSON.decode(responseText);
if ( varLSdefault.checkAjaxReturn(data) ) {
this.displayPossibleValues(data.possibleValues);
}
},
displayPossibleValues: function(possibleValues) {
if (this._possibleValues==null) {
this._possibleValues=new Element(
'div',
{
'class': 'supannLabeledValue_possibleValues',
}
);
this._possibleValues.injectInside(this.li);
}
var ul=new Element('ul');
possibleValues.each(function(v) {
var li=new Element(
'li',
{
'data-value': v.value,
'data-label': v.label,
'data-translated': v.translated,
}
);
if (v.label!='no') {
li.set('html',"<img src='"+varLSdefault.imagePath('supann_label_'+v.label)+"' alt='["+v.label+"]'/> "+v.translated);
}
else {
li.set('html',v.translated);
}
li.injectInside(this);
}, ul);
if (ul.getElements('li').length==0) {
new Element(
'li',
{
'html': this.params.noResultLabel
}
).injectInside(ul);
}
else {
ul.getElements('li').each(function(li) {
li.addEvent('click',this.onClickPossibleValue.bindWithEvent(this));
}, this);
}
ul.injectInside(this._possibleValues);
this._possibleValues.setStyle('display', 'block');
},
hidePossibleValues: function() {
if (this._possibleValues!=null) {
this._possibleValues.setStyle('display', 'none');
this._possibleValues.empty();
}
},
onClickPossibleValue: function(event) {
this.hidePossibleValues();
event = new Event(event);
var li=$(event.target);
if (event.target.tagName=='IMG') {
li=li.getParent();
}
this.input.set('value',li.get('data-value'));
if (li.get('data-label')!='no') {
if (this.img==null) {
this.img=new Element('img',{'class': 'LSformElement_supannLabeledValue_label'});
this.img.injectBefore(this.span);
}
this.img.set('src',varLSdefault.imagePath('supann_label_'+li.get('data-label')));
}
this.span.set('html',li.get('data-translated'));
this.span.set('title',li.get('data-value'));
this.toogleInputSearch();
},
clear: function() {
if (this.img) {
this.img.dispose();
this.img=null;
}
this.input.set('value','');
if (this.span) {
this.span.set('html',this.params.noValueLabel);
}
},
});

View file

@ -1,21 +1,7 @@
<ul class='LSform{if $multiple && !$freeze} LSformElement_multiple'{/if}' id='{$attr_name}'>
{if $parseValues}
<ul class='LSform {if $multiple && !$freeze} LSformElement_multiple{/if} LSformElement_supannLabeledValue' id='{$attr_name}' data-fieldType="{$fieldType}">
{foreach from=$parseValues item=parseValue}
{if $parseValue.translated}{assign var=value value=$parseValue.translated}{else}{assign var=value value=$parseValue.value}{/if}
{if $parseValue.label!="no"}{assign var=label value=$parseValue.label}{else}{assign var=label value=""}{/if}
<li>{include file="ls:$fieldTemplate"}</li>
{foreachelse}
{assign var=value value=""}
{assign var=parseValue value=""}
<li>{include file="ls:$fieldTemplate"}</li>
<li {if $freeze}class='noValue'{/if}>{include file="ls:$fieldTemplate"}</li>
{/foreach}
{else}
{foreach from=$values item=value}
<li>{include file="ls:$fieldTemplate"}</li>
{foreachelse}
{assign var=value value=""}
{assign var=parseValue value=""}
<li>{include file="ls:$fieldTemplate"}</li>
{/foreach}
{/if}
</ul>

View file

@ -1,17 +1,22 @@
{if $freeze}
{if $value or $parseValue}
{if $parseValue}
<span class='LSformElement_supannLabeledValue'>{if $label}<img src='{img name="supann_label_$label"}' alt='[{$label}]' title='{$label}' /> {/if}<span title='{$parseValue.value}'>{$value}</span></span>
{else}
<span class='LSformElement_supannLabeledValue_unparsed'>{$value}</span>
{if isset($parseValue)}
{if !empty($parseValue.label) and $parseValue.label!='no'}
{assign var=clabel value=$parseValue.label}
<img src='{img name="supann_label_$clabel"}' alt='[{$clabel}]' title='{$clabel}'/>
{/if}
<span title="{$parseValue.value}">{$parseValue.translated}</span>
{else}
{$noValueTxt}
{/if}
{else}
<input type='hidden' name='{$attr_name}[]' value="{if $parseValue}{$parseValue.value}{/if}"/>
{if $parseValue and !empty($parseValue.label) and $parseValue.label!='no'}
{assign var=clabel value=$parseValue.label}
<img class='LSformElement_supannLabeledValue_label' src='{img name="supann_label_$clabel"}' alt='[{$clabel}]' title='{$clabel}'/>
{/if}
{if $parseValue}
<input type='text' name='{$attr_name}[]' class='LSformElement_text' value="{$parseValue.value}" autocomplete="off"/>
<span title="{$parseValue.value}">{$parseValue.translated}</span>
{else}
<input type='text' name='{$attr_name}[]' class='LSformElement_text' value="{$value}" autocomplete="off"/>
<span>{$noValueTxt}</span>
{/if}
{/if}