source: extensions/AMetaData/templates/amd_dialog_metadata_choose.tpl @ 10720

Last change on this file since 10720 was 10302, checked in by grum, 14 years ago

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