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

Revision 5088, 7.1 KB checked in by grum, 10 years ago (diff)

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 *
Line 
1{literal}
2<script type="text/javascript">
3
4  var globalTagId;
5
6  function init()
7  {
8    computedWidth=$("#content").get(0).clientWidth;
9    computedHeight=$("#content").get(0).clientHeight;
10    $("#dialogViewDetail")
11    .dialog(
12      {
13        autoOpen: false,
14        resizable: false,
15        width:computedWidth,
16        height:computedHeight,
17        modal: true,
18        draggable:false,
19        title: '{/literal}{"g003_metadata_detail"|@translate}{literal}',
20        overlay:
21        {
22          backgroundColor: '#000',
23          opacity: 0.5
24        },
25        open: function(event, ui)
26        {
27          bH=$("div.ui-dialog-buttonpane").get(0).clientHeight;
28          $("#dialogViewDetail").css('height', (this.clientHeight-bH)+"px");
29          $("#iListImages").css('height', (this.clientHeight-bH-$("#iListImagesNb").get(0).clientHeight-$("#iHeaderListImages").get(0).clientHeight)+"px");
30        },
31        buttons:
32        {
33          '{/literal}{"g003_ok"|@translate}{literal}':
34            function()
35            {
36              $(this).dialog('close');
37            }
38        }
39      }
40    );
41  }
42
43  function loadTagList()
44  {
45    $("body").css("cursor", "wait");
46    order=$('#iSelectOrderTagList').val();
47    filter=$("#iSelectFilterTagList").val();
48    unusedTag=($("#iExcludeUnusedTagList").get(0).checked)?"y":"n";
49    selectedOnly=($("#iSelectedTagOnly").get(0).checked)?"y":"n";
50
51    displayTagListOrder();
52
53    $("#iListTags").html(
54      $.ajax({
55        type: "POST",
56        url: "{/literal}{$datas.urlRequest}{literal}",
57        async: false,
58        data: { ajaxfct:"showStatsGetListTags", orderType:order, filterType:filter, excludeUnusedTag:unusedTag, selectedTagOnly:selectedOnly }
59       }).responseText
60    );
61    $("#iListTagsNb").html(
62      "{/literal}{'g003_number_of_filtered_metadata'|@translate}{literal} "+$("#iListTags table tr").length
63    );
64
65    //onclick="updateTagSelect('iNumId{$data.numId}', '')"
66    $("input.cbiListTags")
67      .bind('click',
68        function(event)
69        {
70          event.stopPropagation();
71          updateTagSelect($(this).get(0).id, '');
72        }
73      );
74
75    $("a.cbiListTags")
76      .bind('click',
77        function(event)
78        {
79          event.stopPropagation();
80          loadTagDetail($(this).get(0).id.substr(7));
81        }
82      );
83
84
85
86
87    $("body").css("cursor", "default");
88  }
89
90  function loadTagDetail(tag)
91  {
92    $("#dialogViewDetail").dialog('open');
93
94    globalTagId=tag;
95    order=$('#iSelectOrderImageList').val();
96    $("#iListImages").html("<br>{/literal}{'g003_loading'|@translate}{literal}");
97    $("#iHeaderListImagesTagName").html("["+tag+"]");
98
99    $.ajax(
100      {
101        type: "POST",
102        url: "{/literal}{$datas.urlRequest}{literal}",
103        async: true,
104        data: { ajaxfct:"showStatsGetListImages", orderType:order, tagId:tag,  },
105        success:
106          function(msg)
107          {
108            $("#iListImages").html(msg);
109            $("#iListImagesNb").html(
110              "{/literal}{'g003_number_of_distinct_values'|@translate}{literal} "+$("#iListImages table tr").length
111            );
112          }
113      }
114    );
115  }
116
117  function updateTagSelect(numId, mode)
118  {
119    $("body").css("cursor", "wait");
120
121    if(mode=='switch')
122    {
123      $("#"+numId).get(0).checked=!$("#"+numId).get(0).checked;
124    }
125
126    selected=($("#"+numId).get(0).checked)?"y":"n";
127
128    $("#iListImages").html(
129      $.ajax({
130        type: "POST",
131        url: "{/literal}{$datas.urlRequest}{literal}",
132        async: false,
133        data: { ajaxfct:"updateTagSelect", tagSelected:selected, numId:numId.substr(6) }
134       }).responseText
135    );
136    $("body").css("cursor", "default");
137  }
138
139  function sortTagList(by)
140  {
141    $("#iSelectOrderTagList").val(by);
142    displayTagListOrder();
143    loadTagList();
144  }
145
146  function sortTagDetail(by, tag)
147  {
148    $("#iSelectOrderImageList").val(by);
149    displayTagDetailOrder();
150    loadTagDetail(tag);
151  }
152
153  function displayTagListOrder()
154  {
155    if($("#iSelectOrderTagList").val()=="tag")
156    {
157      $("#iHLTOrderTag").html("&#8593;");
158      $("#iHLTOrderNum").html("");
159    }
160    else
161    {
162      $("#iHLTOrderTag").html("");
163      $("#iHLTOrderNum").html("&#8593;");
164    }
165  }
166
167  function displayTagDetailOrder()
168  {
169    if($("#iSelectOrderImageList").val()=="value")
170    {
171      $("#iHLIOrderValue").html("&#8593;");
172      $("#iHLIOrderNum").html("");
173    }
174    else
175    {
176      $("#iHLIOrderValue").html("");
177      $("#iHLIOrderNum").html("&#8593;");
178    }
179  }
180
181
182</script>
183{/literal}
184
185
186<h3>{'g003_select_metadata'|@translate}</h3>
187
188<form>
189  <input type="hidden" id="iSelectOrderTagList" value="{$datas.config_GetListTags_OrderType}"/>
190
191  <label>{'g003_filter'|@translate}
192    <select id="iSelectFilterTagList" onchange="loadTagList();">
193      <option value="" {if $datas.config_GetListTags_FilterType==""}selected{/if}>{'g003_no_filter'|@translate}</option>
194      <option value="magic" {if $datas.config_GetListTags_FilterType=="magic"}selected{/if}>{'g003_magic_filter'|@translate}</option>
195      <option value="exif" {if $datas.config_GetListTags_FilterType=="exif"}selected{/if}>Exif</option>
196      <option value="xmp" {if $datas.config_GetListTags_FilterType=="xmp"}selected{/if}>Xmp</option>
197      <option value="iptc" {if $datas.config_GetListTags_FilterType=="iptc"}selected{/if}>Iptc</option>
198    </select>
199  </label>
200
201  <label>
202    <input type="checkbox" id="iExcludeUnusedTagList" onchange="loadTagList();"  {if $datas.config_GetListTags_ExcludeUnusedTag=="y"}checked{/if}>&nbsp;{'g003_exclude_unused_tags'|@translate}
203  </label>
204
205  <label>
206    <input type="checkbox" id="iSelectedTagOnly" onchange="loadTagList();" {if $datas.config_GetListTags_SelectedTagOnly=="y"}checked{/if}>&nbsp;{'g003_selected_tags_only'|@translate}
207  </label>
208
209</form>
210
211<table id='iHeaderListTags' class="littlefont">
212  <tr>
213    <th style="width:35%;min-width:340px;"><span id="iHLTOrderTag"></span><a onclick="sortTagList('tag');">{'g003_TagId'|@translate}</a></th>
214    <th>{'g003_TagLabel'|@translate}</th>
215    <th width="80px"><span id="iHLTOrderNum"></span><a onclick="sortTagList('num');">{'g003_NumOfImage'|@translate}</a></th>
216    <th width="40px">{'g003_Pct'|@translate}</th>
217    <th width="110px">&nbsp;</th>
218  </tr>
219</table>
220<div id='iListTags'>
221</div>
222<div id="iListTagsNb"></div>
223
224
225<div id="dialogViewDetail">
226  <form>
227    <input type="hidden" id="iSelectOrderImageList" value="{$datas.config_GetListImages_OrderType}"/>
228  </form>
229
230  <table id='iHeaderListImages' class="littlefont">
231    <tr>
232      <th><span id="iHLIOrderValue"></span><a onclick="sortTagDetail('value', globalTagId);">{'g003_Value'|@translate}</a>&nbsp;<span id="iHeaderListImagesTagName"></span></th>
233      <th width="80px"><span id="iHLIOrderNum"></span><a onclick="sortTagDetail('num', globalTagId);">{'g003_NumOfImage'|@translate}</a></th>
234      <th width="40px">{'g003_Pct'|@translate}</th>
235      <th width="110px">&nbsp;</th>
236    </tr>
237  </table>
238
239  <div id='iListImages'>
240    <div style="width:100%;text-align:center;padding-top:20px;">{'g003_no_items_selected'|@translate}</div>
241  </div>
242  <div id="iListImagesNb"></div>
243</div>
244
245
246<script type="text/javascript">
247  init();
248  loadTagList();
249  displayTagDetailOrder();
250</script>
Note: See TracBrowser for help on using the repository browser.