source: extensions/AMetaData/admin/amd_metadata_personnal.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: 22.6 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="gpc.external.interface" path="plugins/GrumPluginClasses/js/external/interface/interface.js" require="jquery.ui"}
10{combine_script id="gpc.external.inestedsortable" path="plugins/GrumPluginClasses/js/external/inestedsortable.pack.js" require="gpc.external.interface"}
11{combine_script id="tagListSelector" path="plugins/AMetaData/js/tagListSelector.js" require="jquery.ui"}
12
13
14{literal}
15<script type="text/javascript">
16  var udm, tls;
17
18
19  function userDefManage ()
20  {
21    var options = {
22      numId:'',
23      newRuleId:1,
24      optimalHeight:0,
25    }
26
27    /**
28     * initialize the page
29     */
30    this.init = function ()
31    {
32      computedHeight=$(window).height()-100;
33      $('#iDialogEdit')
34        .dialog(
35          {
36            autoOpen:false,
37            width:900,
38            height:computedHeight,
39            modal: true,
40            dialogClass: 'gcBgTabSheet gcBorder',
41            title: '{/literal}{"g003_personnal_metadata"|@translate}{literal}',
42            buttons:
43              {
44                '{/literal}{"g003_ok"|@translate}{literal}':
45                  function()
46                  {
47                    if(checkValidity()) doUpdate();
48                  },
49                '{/literal}{"g003_cancel"|@translate}{literal}':
50                  function()
51                  {
52                    $('#iDialogEdit').dialog("close");
53                  }
54              }
55          }
56        );
57
58      $('#iBDTagId').bind('keyup focusout', function (event)
59        {
60          if(!checkTagIdValidity($(this).val()))
61          {
62            $(this).addClass('error');
63          }
64          else
65          {
66            $(this).removeClass('error');
67          }
68        }
69      );
70
71
72      loadList();
73    }
74
75    /**
76     * open the dialog box to edit the metadata properties
77     *
78     * @param String id : if set to '' => open dialogbox in 'add' mode
79     *                    otherwise edit the given metadata
80     */
81    this.editMetadata = function (id)
82    {
83      options.numId=id;
84      updateDialog('');
85
86      $('#iDialogEdit')
87        .bind('dialogopen', function ()
88          {
89            if(options.numId!='')
90            {
91              displayProcessing(true);
92
93              $.ajax(
94                {
95                  type: "POST",
96                  url: "{/literal}{$datas.urlRequest}{literal}",
97                  async: true,
98                  data: { ajaxfct:"admin.userDefined.getTag", token:'{/literal}{$token}{literal}', id:options.numId },
99                  success:
100                    function(msg)
101                    {
102                      updateDialog(msg);
103                      displayProcessing(false);
104                    }
105                }
106              );
107            }
108
109            options.optimalHeight=$('#iDialogEdit').height()-$('#mdRulesArea').position().top;
110            $('#mdRulesArea').css('height', options.optimalHeight+'px' );
111          }
112        )
113        .dialog("open");
114    }
115
116    /**
117     * delete a metadata
118     *
119     * @param String id : id of the metadata to delete
120     */
121    this.deleteMetadata = function (id)
122    {
123      $('#iDialogDelete')
124        .html('<br>{/literal}{"g003_pleaseConfirmMetadataDelete"|@translate}{literal}')
125        .dialog(
126          {
127            autoOpen:true,
128            modal: true,
129            dialogClass: 'gcBgTabSheet gcBorder',
130            title: '{/literal}{"g003_deleteMetadata"|@translate}{literal}',
131            buttons:
132              {
133                '{/literal}{"g003_delete"|@translate}{literal}':
134                  function()
135                  {
136                    $(this).html("<br><img src='./plugins/GrumPluginClasses/icons/processing.gif'>");
137                    $.ajax(
138                      {
139                        type: "POST",
140                        url: "{/literal}{$datas.urlRequest}{literal}",
141                        async: true,
142                        data: { ajaxfct:"admin.userDefined.deleteTag", token:'{/literal}{$token}{literal}', id:id },
143                        success:
144                          function(msg)
145                          {
146                            $('#iDialogDelete').dialog("destroy");
147                            loadList();
148                          }
149                      }
150                    );
151                  },
152                '{/literal}{"g003_cancel"|@translate}{literal}':
153                  function()
154                  {
155                    $('#iDialogDelete').dialog("destroy");
156                  }
157              }
158          }
159        );
160    }
161
162    /**
163     * update values of the dialog box
164     *
165     * @param String items : json string ; if empty assume to reset all fields
166     *                       with blank
167     */
168    var updateDialog = function (items)
169    {
170      if(items=='')
171      {
172        options.newRuleId=1;
173        $('#iBDNumId').val('');
174        $('#iBDTagId').val('');
175        $('#iBDLabel').val('');
176        $('#iBDRules').html('');
177      }
178      else
179      {
180        tmp=$.parseJSON(items);
181
182        options.newRuleId=tmp.lastDefId+1;
183        $('#iBDNumId').val(tmp.numId);
184        $('#iBDTagId').val(tmp.tagId);
185        $('#iBDLabel').val(tmp.label);
186        $('#iBDRules').html('');
187        for(i=0;i<tmp.rules.length;i++)
188        {
189          addRule(tmp.rules[i]);
190        }
191      }
192    }
193
194    /**
195     * reload the user defined metadata list
196     */
197    var loadList = function ()
198    {
199      $('#iListTags').html("<br>{/literal}{'g003_loading'|@translate}{literal}<br><img src='./plugins/GrumPluginClasses/icons/processing.gif'>");
200
201      $.ajax(
202        {
203          type: "POST",
204          url: "{/literal}{$datas.urlRequest}{literal}",
205          async: true,
206          data: { ajaxfct:"admin.userDefined.getList", token:'{/literal}{$token}{literal}' },
207          success:
208            function(msg)
209            {
210              $("#iListTags").html(msg);
211            }
212        }
213      );
214    }
215
216    /**
217     * check the validity of a given tagId
218     *  a valid tagId only contains chars : A-Z0-9.
219     *  a valid tagId can't start or finish with a dot, and a dot can't repeat
220     *  "machin.truc.much" => ok
221     *  ".machin.truc"     => ko
222     *  "machin.truc."     => ko
223     *  "machin..truc"     => ko
224     *
225     * @param String tagId : the tagId
226     * @return Boolean : true if ok, otherwise false
227     */
228    var checkTagIdValidity = function (tagId)
229    {
230      re=/^(?:[a-z0-9]+\.)*[a-z0-9]+$/i;
231      if(re.exec(tagId)==null) return(false);
232      return(true);
233    }
234
235    /**
236     * this function make the groups&items ready to be sorted & grouped
237     */
238    var applyNested = function ()
239    {
240      $('#iBDRules').NestedSortableDestroy();
241      $('#iBDRules').NestedSortable(
242        {
243          accept: 'rmSortable',
244          noNestingClass: 'rmItem',
245          opacity: 0.8,
246          helperclass: 'helper',
247          serializeRegExp:/.*/i,
248          autoScroll: true,
249          handle: '.rmSortHandle',
250          ghosting:false,
251          nestingPxSpace:5,
252
253          onChange: function(serialized)
254            {
255              $('#mdRulesArea li.rmSortable').each(
256                function ()
257                {
258                  checkSubRules(this.id);
259                }
260              );
261              checkDialogHeight();
262            },
263          onHover: function (draggedItem)
264            {
265              $('#mdRulesArea').scrollTop($('#sortHelper').position().top);
266            }
267        }
268      );
269    }
270
271    /**
272     * create a rule item and add it to the rulesArea
273     *
274     * the given object properties have the structure of a user_tags_def record
275     *  - itemId
276     *  - parentId
277     *  - numId
278     *  - type
279     *  - value
280     *  - ifType
281     *  - ifValue
282     *  - elseId
283     *  - order
284     *
285     * @param Object properties : an object with rules properties
286     */
287    this.addRule = function (properties)
288    {
289      addRule(properties);
290    }
291    var addRule = function (properties)
292    {
293      if(properties.defId==null)
294      {
295        properties={
296          defId:options.newRuleId++,
297          parentId:0,
298          numId:options.numId,
299          type:'T',
300          value:'',
301          conditionType:'E',
302          conditionValue:'',
303          order:-1
304        }
305      }
306
307      if(properties.parentId==0)
308      {
309        $('#iBDRules').append($('#iBDModel').html().split('ZZZZZ').join(properties.defId));
310      }
311      else
312      {
313        $('#iBDSubRulesNum'+properties.parentId).append($('#iBDModel').html().split('ZZZZZ').join(properties.defId));
314      }
315
316      $('#iBDRuleType'+properties.defId).val(properties.type).change();
317      switch(properties.type)
318      {
319        case 'T':
320          $('#iBDRuleTypeT'+properties.defId).val(properties.value);
321          break;
322        case 'M':
323          $('#iBDRuleTypeM'+properties.defId).attr('value', properties.value);
324          $('#iBDRuleTypeM'+properties.defId+' span.ruleContent').html($('#iTagListItem'+properties.value).html());
325          break;
326        case 'C':
327          $('#iBDRuleTypeCM'+properties.defId).attr('value', properties.value);
328          $('#iBDRuleTypeCM'+properties.defId+' span.ruleContent').html($('#iTagListItem'+properties.value).html());
329          $('#iBDRuleTypeCIf'+properties.defId).val(properties.conditionType).change();
330          $('#iBDRuleTypeCIfValue'+properties.defId).val(properties.conditionValue);
331          break;
332      }
333      applyNested();
334      checkDialogHeight();
335    }
336
337    /**
338     *
339     */
340    this.deleteRule = function (id)
341    {
342      $('#iBDRuleNum'+id).remove();
343      $('#mdRulesArea li.rmSortable').each(
344        function ()
345        {
346          checkSubRules(this.id);
347        }
348      );
349      checkDialogHeight();
350    }
351
352    /**
353     *
354     */
355    this.changeRuleType = function (id)
356    {
357      if($('#iBDRuleType'+id).val()=='T')
358      {
359        $('#iBDRuleNum'+id).addClass('rmItem');
360        $('#iBDRuleTypeT'+id).css('display', 'inline');
361        $('#iBDRuleTypeM'+id).css('display', 'none');
362        $('#iBDRuleTypeC'+id).css('display', 'none');
363      }
364      else if($('#iBDRuleType'+id).val()=='M')
365      {
366        $('#iBDRuleNum'+id).addClass('rmItem');
367        $('#iBDRuleTypeT'+id).css('display', 'none');
368        $('#iBDRuleTypeM'+id).css('display', 'inline-block');
369        $('#iBDRuleTypeC'+id).css('display', 'none');
370      }
371      else if($('#iBDRuleType'+id).val()=='C')
372      {
373        $('#iBDRuleNum'+id).removeClass('rmItem');
374        $('#iBDRuleTypeT'+id).css('display', 'none');
375        $('#iBDRuleTypeM'+id).css('display', 'none');
376        $('#iBDRuleTypeC'+id).css('display', 'inline-block');
377      }
378      checkDialogHeight();
379    }
380
381    /**
382     * display/hide the 'ifValue' property
383     */
384    this.changeRuleTypeCIf = function (id)
385    {
386      value=$('#iBDRuleTypeCIf'+id).val();
387      if(value=='E' || value =='!E')
388      {
389        $('#iBDRuleTypeCIfValue'+id).css('display', 'none');
390      }
391      else
392      {
393        $('#iBDRuleTypeCIfValue'+id).css('display', 'inline');
394      }
395      checkDialogHeight();
396    }
397
398    /**
399     * check if there is subrules affected to the item (conditionned by the 'condition' type)
400     * if subrules are present, disable the selector
401     */
402    var checkSubRules = function (parentId)
403    {
404      value=$('#'+parentId).attr('value');
405
406      if($('#iBDRuleType'+value).val()=='C' && $('#iBDSubRulesNum'+value+' li').length>0)
407      {
408        $('#iBDRuleType'+value).get(0).disabled=true;
409      }
410      else
411      {
412        $('#iBDRuleType'+value).get(0).disabled=false;
413      }
414    }
415
416    /**
417     * check if it necessary to calculate the height of the dialogbox
418     */
419    var checkDialogHeight = function()
420    {
421      if($('#iBDRules').height() < options.optimalHeight &&
422         $('#mdRulesArea').get(0).scrollHeight > options.optimalHeight)
423      {
424        $('#iDialogEdit').height(options.optimalHeight+$('#mdRulesArea').get(0).offsetTop);
425        $('#mdRulesArea').height(options.optimalHeight);
426      }
427      else if($('#mdRulesArea').get(0).scrollHeight > options.optimalHeight)
428      {
429        $('#iDialogEdit').height($('#mdRulesArea').get(0).scrollHeight+$('#mdRulesArea').get(0).offsetTop);
430        $('#mdRulesArea').height($('#mdRulesArea').get(0).scrollHeight);
431      }
432    }
433
434    /**
435     * check for the validity of the metadata settings
436     */
437    var checkValidity = function ()
438    {
439      $('.error').removeClass('error');
440
441      ok=true;
442
443      if(checkTagIdValidity($('#iBDTagId').val())==false)
444      {
445        $('#iBDTagId').addClass('error');
446        alert('{/literal}{"g003_invalidId"|@translate}{literal}');
447        ok=false;
448      }
449
450      if($('#iBDRules li').length==0)
451      {
452        $('#iBDRules').addClass('error');
453        alert('{/literal}{"g003_oneRuleIsNeeded"|@translate}{literal}');
454        ok=false;
455      }
456      else
457      {
458        $('#iBDRules li').each(
459          function ()
460          {
461            value=$(this).attr('value');
462            switch($('#iBDRuleType'+value).val())
463            {
464              case 'T':
465                if($('#iBDRuleTypeT'+value).val()=='')
466                {
467                  $('#iBDRuleTypeT'+value).addClass('error');
468                  alert('{/literal}{"g003_textRuleInvalid"|@translate}{literal}');
469                  ok=false;
470                }
471                break;
472              case 'M':
473                if($('#iBDRuleTypeM'+value).attr('value')=='-')
474                {
475                  $('#iBDRuleTypeM'+value).addClass('error');
476                  alert('{/literal}{"g003_metadataRuleInvalid"|@translate}{literal}');
477                  ok=false;
478                }
479                break;
480              case 'C':
481                if($('#iBDRuleTypeCM'+value).attr('value')=='-')
482                {
483                  $('#iBDRuleTypeCM'+value).addClass('error');
484                  alert('{/literal}{"g003_conditionMdRuleInvalid"|@translate}{literal}');
485                  ok=false;
486                }
487
488                if($('#iBDSubRulesNum'+value+' li').length==0)
489                {
490                  $('#iBDSubRulesNum'+value).addClass('error');
491                  alert('{/literal}{"g003_conditionRulesRuleInvalid"|@translate}{literal}');
492                  ok=false;
493                }
494                break;
495            }
496          }
497        );
498      }
499      return(ok);
500    }
501
502    /**
503     * send metadata update to the server, and close the dialog box if everything
504     * is ok
505     */
506    var doUpdate = function ()
507    {
508      displayProcessing(true);
509
510      // build datas
511      properties = {
512        tagId:$('#iBDTagId').val(),
513        name:$('#iBDLabel').val(),
514        rules: [ ]
515      }
516
517      order=1;
518      $('#iBDRules li').each(
519        function ()
520        {
521          defId=$(this).attr('value');
522          type=$('#iBDRuleType'+defId).val();
523          switch(type)
524          {
525            case 'T':
526              value=$('#iBDRuleTypeT'+defId).val();
527              conditionType='';
528              conditionValue='';
529              break;
530            case 'M':
531              value=$('#iBDRuleTypeM'+defId).attr('value');
532              conditionType='';
533              conditionValue='';
534              break;
535            case 'C':
536              value=$('#iBDRuleTypeCM'+defId).attr('value');
537              conditionType=$('#iBDRuleTypeCIf'+defId).val();
538              conditionValue=$('#iBDRuleTypeCIfValue'+defId).val();
539              break;
540          }
541
542          properties.rules.push(
543            {
544              defId:defId,
545              parentId:$(this).parent().parent().attr('value'),
546              type:type,
547              value:value,
548              conditionType:conditionType,
549              conditionValue:conditionValue,
550              order:order
551            }
552          );
553
554          order++;
555        }
556      );
557
558      $.ajax(
559        {
560          type: "POST",
561          url: "{/literal}{$datas.urlRequest}{literal}",
562          async: true,
563          data: { ajaxfct:"admin.userDefined.setTag", token:'{/literal}{$token}{literal}', id:options.numId, properties:properties },
564          success:
565            function(msg)
566            {
567              displayProcessing(false);
568
569              re=/^\d+,\d+$/;
570              if(re.exec(msg)!=null)
571              {
572                // result Ok ! => close the dialog box and reload the list
573                $('#iDialogEdit').dialog("close");
574                loadList();
575              }
576              else
577              {
578                returned=msg.split('!');
579                $('#'+returned[0]).addClass('error');
580                alert(returned[1]);
581              }
582            }
583        }
584      );
585    }
586
587    /**
588     * display or hide the processing flower
589     */
590    var displayProcessing = function (visible)
591    {
592      if(visible)
593      {
594        $('#iBDProcessing').css("display", "block");
595      }
596      else
597      {
598        $('#iBDProcessing').css("display", "none");
599      }
600    }
601
602    this.init();
603  }
604
605
606
607  $(window).load(
608    function ()
609    {
610      udm=new userDefManage();
611      tls=new tagListSelector({itemId:'iTagList'});
612    }
613  );
614
615
616</script>
617{/literal}
618
619
620<h2>{'g003_personnal_metadata'|@translate}</h2>
621
622<div class='helps'>
623  <p>{'g003_personnal_page_help'|@translate}</p>
624</div>
625
626<div class='addMetadata'>
627  <a onclick="udm.editMetadata('');">{'g003_add_a_new_md'|@translate}</a>
628</div>
629
630<table id='iHeaderListTags' class="littlefont">
631  <tr>
632    <th style="width:35%;min-width:340px;">{'g003_TagId'|@translate}</th>
633    <th>{'g003_TagLabel'|@translate}</th>
634    <th style="width:15%;">{'g003_num_of_rules'|@translate}</th>
635    <th width="40px">&nbsp;</th>
636  </tr>
637</table>
638<div id='iListTags' class="{$themeconf.name}">
639</div>
640<div id="iListTagsNb"></div>
641
642<div id="iDialogDelete">
643</div>
644
645<div id="iDialogEdit">
646  <div id='iBDProcessing' style="display:none;position:absolute;width:100%;height:100%;background:#000000;opacity:0.75">
647      <img src="plugins/GrumPluginClasses/icons/processing.gif" style="margin-top:100px;">
648  </div>
649
650  <form>
651    <table class='formtable'>
652      <tr>
653        <td>{'g003_metadatId'|@translate}</td>
654        <td>
655          <input type='text' id='iBDTagId' maxlength=200 size=60 value=''>
656          <input type='hidden' id='iBDNumId' value=''>
657        </td>
658      </tr>
659      <tr>
660        <td>{'g003_TagLabel'|@translate}</td>
661        <td>
662          <input type='text' id='iBDLabel' maxlength=200 size=60 value=''>
663          <!--<select id='iBDLang' disabled>
664            <option value='fr_FR'>Français</option>
665          </select>-->
666        </td>
667      </tr>
668      <tr>
669        <td>{'g003_rules'|@translate}</td>
670        <td>
671          <a onclick='udm.addRule({ldelim}{rdelim});'>{'g003_add_a_rule'|@translate}</a>
672        </td>
673      </tr>
674    </table>
675
676    <div id='mdRulesArea' value='0'>
677      <ul id='iBDRules'>
678      </ul>
679    </div>
680
681  </form>
682</div>
683
684
685<ul style='display:none' id='iBDModel'>
686  <li id='iBDRuleNumZZZZZ' class='groupItems gcBgPage rmSortable rmItem' value='ZZZZZ'>
687    <span onclick='udm.deleteRule("ZZZZZ");' class='buttonDelete button' title='{"g003_delete"|@translate}' /></span>
688    <div class='rmContent'>
689
690      <div class='ruleSelector'>
691        <span class='buttonMove rmSortHandle drag_button' title='{"Drag to re-order"|@translate}'/></span>
692
693        <select id='iBDRuleTypeZZZZZ' onchange='udm.changeRuleType("ZZZZZ");'>
694          <option value='T'>{'g003_typeText'|@translate}</option>
695          <option value='M'>{'g003_typeMetadata'|@translate}</option>
696          <option value='C'>{'g003_typeCondition'|@translate}</option>
697        </select>
698      </div>
699
700      <div class='ruleProperties'>
701        <input type='text' id='iBDRuleTypeTZZZZZ' value='' maxlength=200 size=60>
702
703        <div id='iBDRuleTypeMZZZZZ'
704             style='display:none;'
705             value='-'
706             class='ruleTypeM gcTextInput gcBgInput gcBorderInput pointer'
707             onclick='tls.display("iBDRuleTypeMZZZZZ");'>
708          <span class='ruleContent'><span class='tagName'>&nbsp;</span></span>
709          <span style='float:right' class='gcText3'>&dArr;</span>
710        </div>
711
712        <div id='iBDRuleTypeCZZZZZ' style='display:none;'>
713          <table>
714            <tr>
715              <td style='vertical-align:top;'>{'g003_conditionIf'|@translate}</td>
716              <td>
717                <div id='iBDRuleTypeCMZZZZZ'
718                     value='-'
719                     style='display:inline-block'
720                     class='ruleTypeM2 gcTextInput gcBgInput gcBorderInput pointer'
721                     onclick='tls.display("iBDRuleTypeCMZZZZZ");'>
722                  <span class='ruleContent'>
723                    <span class='tagName'>&nbsp;</span>
724                  </span>
725                  <span style='float:right' class='gcText3'>&dArr;</span>
726                </div>
727                <br>
728                <div style='display:inline-block;margin-top:2px;'>
729                  <select id='iBDRuleTypeCIfZZZZZ' onchange='udm.changeRuleTypeCIf("ZZZZZ");'>
730                    <option value='E'>{'g003_typeCIfExist'|@translate}</option>
731                    <option value='!E'>{'g003_typeCIfNotExist'|@translate}</option>
732                    <option value='='>{'g003_typeCIfEqual'|@translate}</option>
733                    <option value='!='>{'g003_typeCIfNotEqual'|@translate}</option>
734                    <option value='%'>{'g003_typeCIfLike'|@translate}</option>
735                    <option value='!%'>{'g003_typeCIfNotLike'|@translate}</option>
736                    <option value='^%'>{'g003_typeCIfBeginWith'|@translate}</option>
737                    <option value='!^%'>{'g003_typeCIfNotBeginWith'|@translate}</option>
738                    <option value='$%'>{'g003_typeCIfEndWith'|@translate}</option>
739                    <option value='!$%'>{'g003_typeCIfNotEndWith'|@translate}</option>                  </select>
740                  <input type='text' id='iBDRuleTypeCIfValueZZZZZ' value='' maxlength=200 size=26 style='display:none;'>
741                </div>
742              </td>
743            </tr>
744          </table>
745        </div>
746
747      </div>
748    </div>
749
750    <ul class='subRules' id='iBDSubRulesNumZZZZZ'></ul>
751  </li>
752</ul>
753
754<ul style='display:none' id='iTagList' class="{$themeconf.name}">
755  {foreach from=$datas.tagList item=tag}
756    <li id='iTagListItem{$tag.numId}' value='{$tag.numId}'><span class='tagName'>{$tag.tagId}</span><span>{$tag.name}</span></li>
757  {/foreach}
758</ul>
Note: See TracBrowser for help on using the repository browser.