source: extensions/AMetaData/admin/amd_metadata_display.tpl @ 5088

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

Improve UI : use popup to view values for a metadata, uses title bar to sort values instead of combobox, if there is only one group this one is opened automatically

  • Property svn:executable set to *
File size: 9.2 KB
Line 
1
2
3{literal}
4<script type="text/javascript">
5
6  function init()
7  {
8    $("#iGroups")
9    .html(
10      $.ajax(
11        {
12          type: "POST",
13          url: "{/literal}{$datas.urlRequest}{literal}",
14          async: false,
15          data: { ajaxfct:"groupGetList" }
16        }
17      ).responseText
18    )
19    .sortable(
20      {
21        connectWith: '.connectedSortable',
22        cursor: 'move',
23        opacity:0.6,
24        items: 'li.groupItems',
25        axis:'y',
26        tolerance:'intersect',
27        start: function (event, ui)
28          {
29            manageGroup(event.originalTarget.id.substr(8), 'n');
30          },
31        update: function (event, ui)
32          {
33            list="";
34            $("#iGroups li").each(
35                function ()
36                {
37                  if(list!="") list+=";";
38                  list+=this.id.substr(8);
39                }
40              );
41            list=list.substr(0, list.lastIndexOf(';'));
42            $.ajax(
43              {
44                type: "POST",
45                url: "{/literal}{$datas.urlRequest}{literal}",
46                async: false,
47                data: { ajaxfct:"groupSetOrder", listGroup:list }
48              }
49            ).responseText;
50          }
51      }
52    );
53
54    if($("#iGroups li").length == 1)
55    {
56      manageGroup('1', 'y');
57    }
58  }
59
60  function initSubList(groupId)
61  {
62    $("#iGroupId"+groupId+"_tags").sortable(
63      {
64        connectWith: '.g'+groupId+'_connectedSortableTags',
65        cursor: 'move',
66        opacity:0.6,
67        items: 'li',
68        axis:'y',
69        tolerance:'pointer',
70        containment: 'parent',
71        update: function (event, ui)
72          {
73            list="";
74            $("#iGroupId"+groupId+"_tags li").each(
75                function ()
76                {
77                  if(list!="") list+=";";
78                  list+=this.id.substr(this.id.indexOf('t')+1);
79                }
80              );
81            list=list.substr(0, list.lastIndexOf(';'));
82            $.ajax(
83              {
84                type: "POST",
85                url: "{/literal}{$datas.urlRequest}{literal}",
86                async: false,
87                data: { ajaxfct:"groupSetOrderedTagList", id:groupId, listTag:list }
88              }
89            ).responseText;
90          }
91
92      }
93    );
94  }
95
96  function loadGroupTags(groupId)
97  {
98    $("#iGroupId"+groupId+"_tags").html(
99      $.ajax(
100        {
101          type: "POST",
102          url: "{/literal}{$datas.urlRequest}{literal}",
103          async: false,
104          data: { ajaxfct:"groupGetOrderedTagList", id:groupId }
105        }
106      ).responseText
107    );
108  }
109
110  function manageGroup(groupId, force)
111  {
112    if(force=='y')
113    {
114      currentVisibility='hidden';
115    }
116    else if(force=='n')
117    {
118      currentVisibility='visible';
119    }
120    else
121    {
122      currentVisibility=$("#iGroupId"+groupId+"_content").css('visibility');
123    }
124
125
126    if(currentVisibility=='visible')
127    {
128      $("div[name=fGroupId"+groupId+"_content]").css(
129       {
130         visibility:"hidden",
131         height:"0px"
132       }
133      );
134    }
135    else
136    {
137      $("div[name=fGroupId"+groupId+"_content]").css(
138       {
139         visibility:"visible",
140         height:"auto"
141       }
142      );
143      loadGroupTags(groupId);
144    }
145  }
146
147  function deleteGroup(groupId)
148  {
149    if(groupId!="")
150    {
151      groupName=$("#iGroupName"+groupId).val();
152      $("#dialog")
153      .html("")
154      .dialog(
155        {
156          resizable: true,
157          width:480,
158          height:120,
159          modal: true,
160          draggable:true,
161          title: "{/literal}{'g003_deleting_a_group'|@translate}{literal}",
162          overlay:
163          {
164            backgroundColor: '#000',
165            opacity: 0.5
166          },
167          buttons:
168          {
169            '{/literal}{"g003_yes"|@translate}{literal}':
170              function()
171              {
172                $.ajax(
173                  {
174                    type: "POST",
175                    url: "{/literal}{$datas.urlRequest}{literal}",
176                    async: false,
177                    data: { ajaxfct:"groupDelete", id:groupId }
178                  }
179                ).responseText;
180                $("#iGroups").html(
181                  $.ajax(
182                    {
183                      type: "POST",
184                      url: "{/literal}{$datas.urlRequest}{literal}",
185                      async: false,
186                      data: { ajaxfct:"groupGetList" }
187                    }
188                  ).responseText
189                );
190                $(this).dialog('destroy').html("").get(0).removeAttribute('style');
191              },
192            '{/literal}{"g003_no"|@translate}{literal}':
193              function()
194              {
195                $(this).dialog('destroy').html("").get(0).removeAttribute('style');
196              }
197          }
198        }
199      )
200      .html("<div class='dialogForm'>{/literal}{'g003_confirm_group_delete'|@translate}{literal}</div>".replace("%s", "<i>"+groupName+"</i>", "gi"));
201    }
202  }
203
204  function editGroup(groupId)
205  {
206    if(groupId=="")
207    {
208      dialogTitle="{/literal}{'g003_adding_a_group'|@translate}{literal}";
209    }
210    else
211    {
212      dialogTitle="{/literal}{'g003_editing_a_group'|@translate}{literal}";
213    }
214
215    $("#dialog")
216    .html("")
217    .dialog(
218      {
219        resizable: true,
220        width:480,
221        height:120,
222        modal: true,
223        draggable:true,
224        title: dialogTitle,
225        overlay:
226        {
227          backgroundColor: '#000',
228          opacity: 0.5
229        },
230        buttons:
231        {
232          '{/literal}{"g003_ok"|@translate}{literal}':
233            function()
234            {
235              list="";
236              $("form.dialogForm input[type='hidden']").each(
237                function ()
238                {
239                  if(list!="") list+="\n";
240                  list+=this.id.substr(6)+"="+this.value;
241                }
242              )
243
244              $.ajax(
245                {
246                  type: "POST",
247                  url: "{/literal}{$datas.urlRequest}{literal}",
248                  async: false,
249                  data: { ajaxfct:"groupSetNames", id:groupId, listNames:list }
250                }
251              ).responseText;
252              $("#iGroups").html(
253                $.ajax(
254                  {
255                    type: "POST",
256                    url: "{/literal}{$datas.urlRequest}{literal}",
257                    async: false,
258                    data: { ajaxfct:"groupGetList" }
259                  }
260                ).responseText
261              );
262              $(this).dialog('destroy').html("").get(0).removeAttribute('style');
263            },
264          '{/literal}{"g003_cancel"|@translate}{literal}':
265            function()
266            {
267              $(this).dialog('destroy').html("").get(0).removeAttribute('style');
268            }
269        }
270      }
271    )
272    .html(
273      $.ajax(
274        {
275          type: "POST",
276          url: "{/literal}{$datas.urlRequest}{literal}",
277          async: false,
278          data: { ajaxfct:"groupGetNames", id:groupId }
279        }
280      ).responseText
281    );
282  }
283
284
285  function editGroupList(groupId)
286  {
287    $("#dialog")
288    .html("")
289    .dialog(
290      {
291        resizable: false,
292        width:480,
293        height:320,
294        modal: true,
295        draggable:true,
296        title: '{/literal}{"g003_add_delete_tags"|@translate}{literal}',
297        overlay:
298        {
299          backgroundColor: '#000',
300          opacity: 0.5
301        },
302        open: function(event, ui)
303        {
304          bH=$("div.ui-dialog-buttonpane").get(0).clientHeight;
305          $("#dialog").css('height', (this.clientHeight-bH)+"px");
306        },
307        buttons:
308        {
309          '{/literal}{"g003_ok"|@translate}{literal}':
310            function()
311            {
312              list="";
313              $("#dialog table input").each(
314                function ()
315                {
316                  if(this.checked)
317                  {
318                    if(list!="") list+=",";
319                    list+=this.id.substr(6);
320                  }
321                }
322              )
323
324              $.ajax(
325                {
326                  type: "POST",
327                  url: "{/literal}{$datas.urlRequest}{literal}",
328                  async: false,
329                  data: { ajaxfct:"groupSetTagList", id:groupId, listTag:list }
330                }
331              ).responseText;
332              $(this).dialog('destroy').html("").get(0).removeAttribute('style');
333              loadGroupTags(groupId);
334            },
335          '{/literal}{"g003_cancel"|@translate}{literal}':
336            function()
337            {
338              $(this).dialog('destroy').html("").get(0).removeAttribute('style');
339            }
340        }
341      }
342    )
343    .html(
344      $.ajax(
345        {
346          type: "POST",
347          url: "{/literal}{$datas.urlRequest}{literal}",
348          async: false,
349          data: { ajaxfct:"groupGetTagList", id:groupId }
350        }
351      ).responseText
352    );
353  }
354
355</script>
356{/literal}
357
358
359<h3>{'g003_display_management'|@translate}</h3>
360
361<div class="addGroup">
362  <a onclick="editGroup('');">{'g003_add_a_group'|@translate}</a>
363</div>
364
365
366<div id="dialog"></div>
367
368
369<div id="iGroupContainer">
370  <ul class="connectedSortable" id="iGroups">
371  </ul>
372</div>
373
374
375<script type="text/javascript">
376  init();
377  {foreach from=$datas.groups key=name item=data}
378  initSubList({$data.id});
379  {/foreach}
380</script>
Note: See TracBrowser for help on using the repository browser.