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

Last change on this file since 15907 was 15349, checked in by grum, 12 years ago

feature:2637 - Compatibility with Piwigo 2.4
Minor improvments for user interface

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