source: extensions/AMetaData/templates/amd_dialog_metadata_choose.tpl

Last change on this file was 28816, checked in by Youp3, 10 years ago

Advanced Meta Data : ajout de l’appel à jquery.ui.button et correction de l’appel à jquery.ui.dialog
File size: 19.4 KB
Line 
1{combine_script id="jquery.ui" require='jquery' path="themes/default/js/ui/jquery.ui.core.js"}
2{combine_script id="jquery.ui.widget" require='jquery.ui' path="themes/default/js/ui/jquery.ui.widget.js"}
3{combine_script id="jquery.ui.mouse" require='jquery.ui.widget' path="themes/default/js/ui/jquery.ui.mouse.js"}
4{combine_script id="jquery.ui.position" require='jquery.ui.widget' path="themes/default/js/ui/jquery.ui.position.js"}
5{combine_script id="jquery.ui.sortable" require='jquery.ui.widget' path="themes/default/js/ui/jquery.ui.sortable.js"}
6{combine_script id="jquery.ui.dialog" require='jquery.ui.widget' path="themes/default/js/ui/jquery.ui.dialog.js"}
7{combine_script id="jquery.ui.button" require='jquery.ui.widget' path="themes/default/js/ui/jquery.ui.button.js"}
8
9{combine_script id="tagListSelector" path="plugins/AMetaData/js/tagListSelector.js" require="jquery.ui"}
10
11{literal}
12<style type='text/css'>
13  #mdRulesArea { border-top:1px solid; overflow:auto; }
14  .ruleTypeM, .ruleTypeM2 {
15    border:1px solid #666666;
16    display:inline-block;
17    padding:0 2px 0;
18  }
19  div.ruleTypeM { width:493px; }
20  div.ruleTypeM2 { width:400px; }
21  div.ruleSelector
22  {
23    float:left;
24    width:150px;
25  }
26  img.pointer, span.pointer, div.pointer { cursor:pointer; }
27  li.valueItems {
28    -moz-border-radius:4px 4px 4px 4px;
29    border:1px solid #666666;
30    margin-bottom:5px;
31    padding:4px;
32  }
33
34  #iDMCListValues {
35    list-style:none;
36    margin:8px;
37    padding:0;
38  }
39  #iTagList { list-style-type:none; padding:0px; margin:0px; }
40  span.tagName {
41    border-right:1px dotted #666666;
42    display:inline-block;
43    margin-right:2px;
44    padding:2px 0 1px;
45    width:240px;
46  }
47
48  #iTagList li { padding: 0px 2px; }
49  #iTagList.clear li:hover { cursor:pointer; color: #D54E21; background:#dbe8f3; }
50  #iTagList.roma li:hover { cursor:pointer; background:#303030; }
51  #iTagList.selectedroma { background:#303030; }
52  #iTagList.selectedclear { background:#dbe8f3; }
53</style>
54
55<script type="text/javascript">
56
57/**
58 * include this template in a page and use metadataBox.show({options}) to display
59 * the dialog box
60 *
61 * the object is initialized as "AMetaDataDB" by the request builder
62 */
63dialogChooseMetadataBox = function()
64{
65  var dialogOptions = {
66      id:'',
67      eventOk:null,
68      cBuilder:null,
69      numValues:0,
70
71      values: {
72        metaNumId:0,
73        metaTagId:'',
74        metaTagLabel:'',
75        conditionIf:'=',
76        listValues:new Array(),
77        listDisplay:new Array(),
78      },
79    };
80
81  /**
82   * initialize the dialog box
83   */
84  var initDialogBox = function()
85  {
86    $("#iDialogMetadataChoose")
87    .dialog(
88      {
89        autoOpen: false,
90        resizable: false,
91        width:645,
92        height:400,
93        modal: true,
94        draggable:true,
95        dialogClass: 'gcBgTabSheet gcBorder',
96        title: '{/literal}{"g003_choose_a_metadata"|@translate}{literal}',
97        open: function(event, ui)
98        {
99        },
100        buttons:
101        {
102          '{/literal}{"g003_ok"|@translate}{literal}':
103            function()
104            {
105              if(checkValidity())
106              {
107                if(dialogOptions.cBuilder!=null)
108                {
109                  setCBuilderItem(dialogOptions.id);
110                }
111
112                if(dialogOptions.eventOk!=null)
113                {
114                  dialogOptions.eventOk(dialogOptions.id);
115                }
116                $(this).dialog('close');
117              }
118            },
119          '{/literal}{"g003_cancel"|@translate}{literal}':
120            function()
121            {
122              $(this).dialog('close');
123            }
124        }
125      }
126    );
127
128    // initialize events on the dialog box interface items
129    $('#iDMCAddValue').bind('click', function () { addValue(); } );
130    $('#iDMCIfValue').bind('change', function () { changeCondition(); } );
131    $('#iDMCSelectMeta').bind('click', function () { tls.display("iDMCSelectMeta"); } );
132  }
133
134  /**
135   * add a value to the value list
136   */
137  var addValue = function ()
138  {
139    if($('#iDMCValueS').css("display")=="none")
140    {
141      rawValue=$('#iDMCValueT').val();
142      displayValue=rawValue;
143    }
144    else
145    {
146      selectList=$('#iDMCValueS').get(0);
147      rawValue=$(selectList.options[selectList.selectedIndex]).attr('rawvalue');
148      displayValue=$(selectList.options[selectList.selectedIndex]).attr('displayvalue');
149    }
150
151    if(rawValue!='')
152    {
153      if($('#iDMCListValues li[value="'+rawValue+'"]').length>0)
154      {
155        alert('{/literal}{"g003_value_already_set"|@translate}{literal}');
156      }
157      else
158      {
159        if(dialogOptions.numValues==0)
160        {
161          if($('#iDMCIfValue').val()=='=' ||
162             $('#iDMCIfValue').val()=='%' ||
163             $('#iDMCIfValue').val()=='^%' ||
164             $('#iDMCIfValue').val()=='$%')
165          {
166            $('#mdRulesAreaCheckOne').css('display', 'block');
167          }
168          else
169          {
170            $('#mdRulesAreaCheckAll').css('display', 'block');
171          }
172        }
173
174        dialogOptions.numValues++;
175        dialogOptions.values.listValues[dialogOptions.numValues]=rawValue;
176        dialogOptions.values.listDisplay[dialogOptions.numValues]=displayValue;
177
178        addValueItem(displayValue);
179      }
180    }
181    else
182    {
183      alert('{/literal}{"g003_please_set_a_value"|@translate}{literal}');
184    }
185  }
186
187  /**
188   *
189   */
190  var addValueItem = function (value)
191  {
192    text="<li class='valueItems gcBgPage' id='iDMCListValues_"+dialogOptions.numValues+"' value='"+value+"'>";
193    text+="<span>"+value+"</span>";
194    text+="<div id='iDMCListValues_Delete"+dialogOptions.numValues+"' class='button pointer iconDelete'  style='float:right;'/></li>";
195    $('#iDMCListValues').append(text);
196
197    $('#iDMCListValues_Delete'+dialogOptions.numValues).bind('click',
198      { itemId:'iDMCListValues_'+dialogOptions.numValues },
199      function (event)
200      {
201        removeValue(event.data.itemId);
202      }
203    );
204  }
205
206  /**
207   * remove the selected value from the list
208   */
209  var removeValue = function (id)
210  {
211    $('#'+id).remove();
212    dialogOptions.values.listValues.splice(id,1);
213    dialogOptions.values.listDisplay.splice(id,1);
214
215    if($('#iDMCListValues').html()=='')
216    {
217      clearValues();
218    }
219  }
220
221  /**
222   * clear all the selected values from the list
223   */
224  var clearValues = function ()
225  {
226    dialogOptions.numValues=0;
227    dialogOptions.values.listValues=new Array();
228    dialogOptions.values.listDisplay=new Array();
229    //dialogOptions.values.metaNumId=0;
230    dialogOptions.values.conditionIf='';
231
232    $('#iDMCListValues').html('');
233    $('#mdRulesAreaCheckOne').css('display', 'none');
234    $('#mdRulesAreaCheckAll').css('display', 'none');
235  }
236
237  /**
238   * check the validity of the condition
239   * return Boolean : true if OK, otherwise false
240   */
241  var checkValidity = function ()
242  {
243    if(dialogOptions.values.metaTagId=='' ||
244       (dialogOptions.values.listValues.length==0 &&
245        !(dialogOptions.values.conditionIf=='E' || dialogOptions.values.conditionIf=='!E')
246       )
247      )
248    {
249      return(false);
250    }
251    return(true);
252  }
253
254
255  /**
256   * the show() function display and manage a dialog box to choose a metadata
257   * and the kind of test to apply
258   *
259   * @param options : properties to manage the dialog box
260   *                  - id : a string to identify a DOM object ; this parameter
261   *                         is given to the callback when the OK button is pushed
262   *                  - mode : a string to identify the default mode selected
263   *                           values : 'and', 'or', 'not'
264   *                  - eventOK : a callback function, with 2 parameters : id of
265   *                              the given DOM object and values parameted
266   *                  - cBuilder : a criteriaBuilder object
267   *                               if set, the dialog box manage automaticaly
268   *                               the criteria builder interface
269   */
270  this.show = function (options)
271  {
272    showDialog(options);
273  }
274
275  /**
276   * private function used to show the dialog box
277   */
278  var showDialog = function(options)
279  {
280    clearValues();
281    $('#iDMCSelectMeta').val('-').html("<span class='ruleContent'><span class='tagName'>&nbsp;</span></span><span style='float:right' class='gcText3'>&dArr;</span>");
282    $('#iDMCValueContainer').css('display', 'none');
283    $('#iDMCIfValueContainer').css('display', 'none');
284
285    if(options.id!=null)
286    {
287      dialogOptions.id=options.id;
288    }
289    else
290    {
291      dialogOptions.id='';
292    }
293
294    if(options.eventOk!=null)
295    {
296      dialogOptions.eventOk=options.eventOk;
297    }
298
299    if(options.cBuilder!=null)
300    {
301      dialogOptions.cBuilder=options.cBuilder;
302      dialogOptions.cBuilder.doAction('setOptions',
303        {
304          onEdit:function (e) { editCB(e.data); },
305          onDelete:function (e) { deleteCB(e.data); },
306        }
307      );
308    }
309
310    if(options.values!=null)
311    {
312      $('#iDMCIfValue').val(options.values.conditionIf);
313      changeMeta(options.values.metaNumId);
314      dialogOptions.values=jQuery.extend(dialogOptions.values, options.values);
315      $('#iDMCSelectMeta span.ruleContent').html($('#iTagListItem'+dialogOptions.values.metaNumId).html());
316
317      for(i=0;i<dialogOptions.values.listDisplay.length;i++)
318      {
319        dialogOptions.numValues=i;
320        if(dialogOptions.values.listDisplay[i]!=null) addValueItem(dialogOptions.values.listDisplay[i]);
321      }
322    }
323
324    $("#iDialogMetadataChoose").dialog('open');
325  }
326
327
328
329  /**
330   * manage the 'edit' button from criteria builder interface
331   * @param String itemId : the itemId
332   */
333  var editCB = function (itemId)
334  {
335    extraData=dialogOptions.cBuilder.doAction('getExtraData', itemId);
336    showDialog(
337      {
338        id:itemId,
339        values:
340          {
341            metaNumId:extraData.param.metaNumId,
342            metaTagId:extraData.param.metaTagId,
343            metaTagLabel:extraData.param.metaTagLabel,
344            conditionIf:extraData.param.conditionIf,
345            listValues:extraData.param.listValues,
346            listDisplay:extraData.param.listDisplay,
347          },
348      }
349    );
350  }
351
352  /**
353   * manage the 'delete' button from criteria builder interface
354   * @param String itemId : the itemId
355   */
356  var deleteCB = function (itemId)
357  {
358    dialogOptions.cBuilder.doAction('delete', itemId);
359  }
360
361  /**
362   * set the content for the cBuilder item
363   */
364  var setCBuilderItem = function(id)
365  {
366    var content="<div>";
367
368    if(dialogOptions.values.listValues.length>1 && dialogOptions.values.conditionIf=='=')
369    {
370     content+="{/literal}{'g003_metadata_equals_all'|@translate}{literal}";
371    }
372    else if(dialogOptions.values.listValues.length==1 && dialogOptions.values.conditionIf=='=')
373    {
374     content+="{/literal}{'g003_metadata_equals_one'|@translate}{literal}";
375    }
376    else if(dialogOptions.values.listValues.length>1 && dialogOptions.values.conditionIf=='!=')
377    {
378     content+="{/literal}{'g003_metadata_not_equals_all'|@translate}{literal}";
379    }
380    else if(dialogOptions.values.listValues.length==1 && dialogOptions.values.conditionIf=='!=')
381    {
382     content+="{/literal}{'g003_metadata_not_equals_one'|@translate}{literal}";
383    }
384    else if(dialogOptions.values.listValues.length>1 && dialogOptions.values.conditionIf=='%')
385    {
386     content+="{/literal}{'g003_metadata_like_all'|@translate}{literal}";
387    }
388    else if(dialogOptions.values.listValues.length==1 && dialogOptions.values.conditionIf=='%')
389    {
390     content+="{/literal}{'g003_metadata_like_one'|@translate}{literal}";
391    }
392    else if(dialogOptions.values.listValues.length>1 && dialogOptions.values.conditionIf=='!%')
393    {
394     content+="{/literal}{'g003_metadata_not_like_all'|@translate}{literal}";
395    }
396    else if(dialogOptions.values.listValues.length==1 && dialogOptions.values.conditionIf=='!%')
397    {
398     content+="{/literal}{'g003_metadata_not_like_one'|@translate}{literal}";
399    }
400    else if(dialogOptions.values.listValues.length>1 && dialogOptions.values.conditionIf=='^%')
401    {
402     content+="{/literal}{'g003_metadata_begin_all'|@translate}{literal}";
403    }
404    else if(dialogOptions.values.listValues.length==1 && dialogOptions.values.conditionIf=='^%')
405    {
406     content+="{/literal}{'g003_metadata_begin_one'|@translate}{literal}";
407    }
408    else if(dialogOptions.values.listValues.length>1 && dialogOptions.values.conditionIf=='!^%')
409    {
410     content+="{/literal}{'g003_metadata_not_begin_all'|@translate}{literal}";
411    }
412    else if(dialogOptions.values.listValues.length==1 && dialogOptions.values.conditionIf=='!^%')
413    {
414     content+="{/literal}{'g003_metadata_not_begin_one'|@translate}{literal}";
415    }
416    else if(dialogOptions.values.listValues.length>1 && dialogOptions.values.conditionIf=='$%')
417    {
418     content+="{/literal}{'g003_metadata_end_all'|@translate}{literal}";
419    }
420    else if(dialogOptions.values.listValues.length==1 && dialogOptions.values.conditionIf=='$%')
421    {
422     content+="{/literal}{'g003_metadata_end_one'|@translate}{literal}";
423    }
424    else if(dialogOptions.values.listValues.length>1 && dialogOptions.values.conditionIf=='!$%')
425    {
426     content+="{/literal}{'g003_metadata_not_end_all'|@translate}{literal}";
427    }
428    else if(dialogOptions.values.listValues.length==1 && dialogOptions.values.conditionIf=='!$%')
429    {
430     content+="{/literal}{'g003_metadata_not_end_one'|@translate}{literal}";
431    }
432    else if(dialogOptions.values.conditionIf=='E')
433    {
434     content+="{/literal}{'g003_metadata_exists'|@translate}{literal}";
435    }
436    else if(dialogOptions.values.conditionIf=='!E')
437    {
438     content+="{/literal}{'g003_metadata_dont_exists'|@translate}{literal}";
439    }
440
441    content=content.replace(/%s/i, '<span style="font-weight:bold;">'+dialogOptions.values.metaTagLabel+'</span> <span style="font-style:italic;">('+dialogOptions.values.metaTagId+')</span>');
442
443    if(dialogOptions.values.listValues.length>0)
444    {
445      content+='<br><div style="font-style:italic;padding-left:15px;">';
446      for(i=0;i<dialogOptions.values.listDisplay.length;i++)
447      {
448        if(dialogOptions.values.listDisplay[i]!=null)
449        {
450          content+=dialogOptions.values.listDisplay[i];
451          if(i<dialogOptions.values.listDisplay.length-1) content+='<br>';
452        }
453      }
454      content+='</div>';
455    }
456
457    content+="</div>";
458
459
460
461    if(id=='')
462    {
463      //no id:add a new item in the list
464      dialogOptions.cBuilder.doAction(
465        'add',
466        content,
467        criteriaBuilder.makeExtendedData(
468          'AMetaData',
469          {
470            metaNumId:dialogOptions.values.metaNumId,
471            metaTagId:dialogOptions.values.metaTagId,
472            metaTagLabel:dialogOptions.values.metaTagLabel,
473            conditionIf:dialogOptions.values.conditionIf,
474            listValues:dialogOptions.values.listValues,
475            listDisplay:dialogOptions.values.listDisplay
476          }
477        )
478      );
479    }
480    else
481    {
482      // update item
483      dialogOptions.cBuilder.doAction(
484        'edit',
485        id,
486        content,
487        criteriaBuilder.makeExtendedData(
488          'AMetaData',
489          {
490            metaNumId:dialogOptions.values.metaNumId,
491            metaTagId:dialogOptions.values.metaTagId,
492            metaTagLabel:dialogOptions.values.metaTagLabel,
493            conditionIf:dialogOptions.values.conditionIf,
494            listValues:dialogOptions.values.listValues,
495            listDisplay:dialogOptions.values.listDisplay
496          }
497        )
498      );
499    }
500  }
501
502  /**
503   * when the condition type is changed, change input type and erase the defined
504   * values
505   */
506  changeCondition = function ()
507  {
508    clearValues();
509
510    if($('#iDMCIfValue').val()=='E' ||
511       $('#iDMCIfValue').val()=='!E')
512    {
513      $('#iDMCValueContainer').css('display', 'none');
514    }
515    else if($('#iDMCIfValue').val()=='=' ||
516       $('#iDMCIfValue').val()=='!=')
517    {
518      $('#iDMCValueT').css('display', 'none');
519      $('#iDMCValueS').css('display', 'inline');
520      $('#iDMCValueContainer').css('display', 'table-row');
521    }
522    else
523    {
524      $('#iDMCValueS').css('display', 'none');
525      $('#iDMCValueT').css('display', 'inline');
526      $('#iDMCValueContainer').css('display', 'table-row');
527    }
528
529    dialogOptions.values.conditionIf=$('#iDMCIfValue').val();
530  }
531
532  /**
533   * when the metadata is changed, erase the defined values and reload
534   * the value list
535   */
536  changeMeta = function (metaId)
537  {
538    $('#iDMCIfValueContainer').css('display', 'block');
539    $('#iDMCValueContainer').css('display', 'block');
540
541    $('#iDMCListValues').html('');
542
543    $('#iDMCValueT').val('');
544    $('#iDMCValueS').html('').css('background', 'url(./plugins/GrumPluginClasses/icons/processing.gif) no-repeat 15px 0');
545
546    changeCondition();
547
548    dialogOptions.values.metaNumId=metaId;
549    dialogOptions.values.metaTagId=$('#iDMCSelectMeta span.tagName').text();
550    dialogOptions.values.metaTagLabel=$('#iDMCSelectMeta span.tagLabel').text();
551
552    $.ajax(
553      {
554        type: "POST",
555        url: "{/literal}{$datas.urlRequest}{literal}",
556        async: true,
557        data: { ajaxfct:"admin.tag.getValues", token:'{/literal}{$token}{literal}', id:metaId },
558        success:
559          function(msg)
560          {
561            $('#iDMCValueS').html(msg).css('background', '');
562          }
563      }
564    );
565  }
566
567
568  var tls=new tagListSelector(
569    {
570      itemId:'iTagList',
571      onSelect: changeMeta
572    }
573  );
574
575  initDialogBox();
576}
577
578
579</script>
580{/literal}
581
582<div id="iDialogMetadataChoose" style='display:none;'>
583
584  <table class="formtable">
585    <tr>
586      <td rowspan=3>{'g003_conditionIf'|@translate}</td>
587      <td>
588        <div id='iDMCSelectMeta'
589             value='-'
590             class='ruleTypeM gcTextInput gcBgInput gcBorderInput pointer'>
591          <span class='ruleContent'><span class='tagName'>&nbsp;</span></span>
592          <span style='float:right' class='gcText3'>&dArr;</span>
593        </div>
594      </td>
595    </tr>
596
597    <tr id='iDMCIfValueContainer' style='display:none;'>
598      <td>
599        <select id='iDMCIfValue'>
600          <option value='E'>{'g003_typeCIfExist'|@translate}</option>
601          <!-- <option value='!E'>{'g003_typeCIfNotExist'|@translate}</option> -->
602          <option value='='>{'g003_typeCIfEqual'|@translate}</option>
603          <option value='!='>{'g003_typeCIfNotEqual'|@translate}</option>
604          <option value='%'>{'g003_typeCIfLike'|@translate}</option>
605          <option value='!%'>{'g003_typeCIfNotLike'|@translate}</option>
606          <option value='^%'>{'g003_typeCIfBeginWith'|@translate}</option>
607          <option value='!^%'>{'g003_typeCIfNotBeginWith'|@translate}</option>
608          <option value='$%'>{'g003_typeCIfEndWith'|@translate}</option>
609          <option value='!$%'>{'g003_typeCIfNotEndWith'|@translate}</option>
610        </select>
611
612      </td>
613    </tr>
614
615    <tr id='iDMCValueContainer' style='display:none;'>
616      <td>
617
618        <input type='text' id='iDMCValueT' value='' maxlength=200 style="width:250px;display:none;">
619        <select id='iDMCValueS' style="width:250px;">
620        </select>
621
622        <input type='button' value="{'g003_add'|@translate}" id='iDMCAddValue'>
623      </td>
624    </tr>
625
626  </table>
627
628  <div id='mdRulesArea'>
629    <div style='display:none;' id='mdRulesAreaCheckOne'>{'g003_metadata_value_check_one'|@translate}</div>
630    <div style='display:none;' id='mdRulesAreaCheckAll'>{'g003_metadata_value_check_all'|@translate}</div>
631    <ul id='iDMCListValues'>
632    </ul>
633  </div>
634
635
636
637  <ul style='display:none' id='iTagList' class="{$themeconf.name}">
638    {foreach from=$datas.tagList item=tag}
639      <li id='iTagListItem{$tag.numId}' value='{$tag.numId}'><span class='tagName'>{$tag.tagId}</span><span class='tagLabel'>{$tag.name}</span></li>
640    {/foreach}
641  </ul>
642
643</div>
644
645
Note: See TracBrowser for help on using the repository browser.