LSformElement :: supannLabeledValue.php : Improve edition to permit value selection...
authorBenjamin Renard <brenard@easter-eggs.com>
Mon, 24 Nov 2014 23:07:21 +0000 (00:07 +0100)
committerBenjamin Renard <brenard@easter-eggs.com>
Mon, 24 Nov 2014 23:07:31 +0000 (00:07 +0100)
public_html/css/default/LSformElement_supannLabeledValue.css [new file with mode: 0644]
public_html/includes/class/class.LSformElement_supannLabeledValue.php
public_html/includes/js/LSformElement_supannLabeledValue.js [new file with mode: 0644]
public_html/includes/js/LSformElement_supannLabeledValue_field.js [new file with mode: 0644]
public_html/includes/js/LSformElement_supannLabeledValue_field_value.js [new file with mode: 0644]
public_html/templates/default/LSformElement_supannLabeledValue.tpl
public_html/templates/default/LSformElement_supannLabeledValue_field.tpl

diff --git a/public_html/css/default/LSformElement_supannLabeledValue.css b/public_html/css/default/LSformElement_supannLabeledValue.css
new file mode 100644 (file)
index 0000000..603dd7d
--- /dev/null
@@ -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;
+}
index 3223881..711ea13 100644 (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;
   }
 
@@ -65,19 +80,56 @@ class LSformElement_supannLabeledValue extends LSformElement {
   * @retval array Un tableau cle->valeur contenant value, translated et label
   **/
   function parseValue($value) {
-       $retval=array(
-               'value' => $value,
-       );
-       $pv=supannParseLabeledValue($value);
-       if ($pv) {
-               $retval['label'] = $pv['label'];
-               $retval['translated'] = supannGetNomenclatureLabel($this -> supannNomenclatureTable,$pv['label'],$pv['value']);
-       }
-       else {
-               $retval['label'] = 'no';
-               $retval['translated'] = getFData(__('%s (Unparsable value)'),$value);
-       }
-       return $retval;
+    $retval=array(
+      'value' => $value,
+    );
+    $pv=supannParseLabeledValue($value);
+    if ($pv) {
+      $retval['label'] = $pv['label'];
+      $retval['translated'] = supannGetNomenclatureLabel($this -> supannNomenclatureTable,$pv['label'],$pv['value']);
+    }
+    else {
+      $retval['label'] = 'no';
+      $retval['translated'] = getFData(__('%s (Unparsable value)'),$value);
+    }
+    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;
   }
 
 }
diff --git a/public_html/includes/js/LSformElement_supannLabeledValue.js b/public_html/includes/js/LSformElement_supannLabeledValue.js
new file mode 100644 (file)
index 0000000..2b0ea85
--- /dev/null
@@ -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();
+});
diff --git a/public_html/includes/js/LSformElement_supannLabeledValue_field.js b/public_html/includes/js/LSformElement_supannLabeledValue_field.js
new file mode 100644 (file)
index 0000000..933e95b
--- /dev/null
@@ -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));
+    }
+});
diff --git a/public_html/includes/js/LSformElement_supannLabeledValue_field_value.js b/public_html/includes/js/LSformElement_supannLabeledValue_field_value.js
new file mode 100644 (file)
index 0000000..59cd2d5
--- /dev/null
@@ -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);
+               }
+       },
+
+});
index 2cfda2a..77e2d85 100644 (file)
@@ -1,21 +1,7 @@
-<ul class='LSform{if $multiple && !$freeze} LSformElement_multiple'{/if}' id='{$attr_name}'>
-  {if $parseValues}
-    {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>
-    {/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 class='LSform {if $multiple && !$freeze} LSformElement_multiple{/if} LSformElement_supannLabeledValue' id='{$attr_name}' data-fieldType="{$fieldType}">
+       {foreach from=$parseValues item=parseValue}
+         <li>{include file="ls:$fieldTemplate"}</li>
+       {foreachelse}
+         <li {if $freeze}class='noValue'{/if}>{include file="ls:$fieldTemplate"}</li>
+       {/foreach}
 </ul>
index 2daa2a5..3c597ed 100644 (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}
-{if $parseValue}
-  <input type='text' name='{$attr_name}[]' class='LSformElement_text' value="{$parseValue.value}" autocomplete="off"/>
-{else}
-  <input type='text' name='{$attr_name}[]' class='LSformElement_text' value="{$value}" autocomplete="off"/>
-{/if}
+  <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}
+    <span title="{$parseValue.value}">{$parseValue.translated}</span>
+  {else}
+    <span>{$noValueTxt}</span>
+  {/if}
 {/if}