|
1 <!DOCTYPE html> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" th:lang="${#ctx.getLocale().toLanguageTag()}" > |
|
3 <head> |
|
4 <title>Renkan</title> |
|
5 |
|
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|
7 <meta charset="utf-8"/> |
|
8 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> |
|
9 |
|
10 <link rel="shortcut icon" href="../../static/img/favicon.ico" th:href="@{/static/img/favicon.ico}"/> |
|
11 |
|
12 <script th:remove="all" type="text/javascript" src="../../static/lib/jquery.min.js"></script> |
|
13 <script th:remove="all" type="text/javascript" src="../../static/js/thymol.js"></script> |
|
14 |
|
15 <script src="../../static/lib/jquery.min.js" th:src="@{/static/lib/jquery.min.js}" ></script> |
|
16 <script src="../../static/lib/jquery-ui/jquery-ui.min.js" th:src="@{/static/lib/jquery-ui/jquery-ui.min.js}" ></script> |
|
17 <script src="../../static/lib/underscore-min.js" th:src="@{/static/lib/underscore-min.js}" ></script> |
|
18 <script src="../../static/lib/URI.js" th:src="@{/static/lib/URI.js}" ></script> |
|
19 |
|
20 <link href="../../static/lib/jquery-ui/css/ui-lightness/jquery-ui.min.css" rel="stylesheet" th:href="@{/static/lib/jquery-ui/css/ui-lightness/jquery-ui.min.css}"/> |
|
21 <link href="../../static/css/style.css" rel="stylesheet" th:href="@{/static/css/style.css}"/> |
|
22 <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}"/> |
|
23 |
|
24 </head> |
|
25 <body> |
|
26 <div id="container"> |
|
27 <div id="wrapper"> |
|
28 <header id="header"> |
|
29 <h1><a href="renkanIndex.html" th:href="@{'/'}" id="home-link" th:text="#{renkanIndex.renkan_space}">Renkan Space</a>: <span th:text="${space.title}">Titre</span></h1> |
|
30 <div id="headerNav" th:include="fragment/pageFragment :: headerNavFragment"></div> |
|
31 </header> |
|
32 <div id="inner"> |
|
33 <div id="label" class="translate" th:text="#{renkanIndex.renkan_exp}">Create a Renkan</div> |
|
34 <form action="#" id="new-renkan-form"> |
|
35 <fieldset id="form-fields"> |
|
36 <div id="title-field"><label th:text="#{renkanIndex.renkan_title}" for="renkantitle">title</label><input type="text" id="renkantitle" autofocus="autofocus" x-webkit-speech="x-webkit-speech"/></div> |
|
37 <div id="file-field"><label th:text="#{renkanIndex.renkan_file}" for="renkanfile">file</label><input type="file" id="renkanfile"/></div> |
|
38 </fieldset> |
|
39 <div id="form-submit"><button type="submit">OK</button></div> |
|
40 </form> |
|
41 </div> |
|
42 <div id="project-list-container"> |
|
43 <h2 th:text="#{renkanIndex.project_list}">Project list</h2> |
|
44 <div id="project-filter-container"> |
|
45 <form method="get"> |
|
46 <input type="text" id="project-filter" name="filter" placeholder="filter title" th:placeholder="#{renkanIndex.project_filter}" th:value="${param['filter']}?${param['filter'][0]}:''" /> |
|
47 <button type="submit">OK</button> |
|
48 </form> |
|
49 </div> |
|
50 <div th:include="fragment/paginationFragment :: paginationFragment" class="pagination-container"> |
|
51 <div> |
|
52 <a href="#?p.page=1"><<</a> |
|
53 <a href="#?p.page=3"><</a> |
|
54 <span>...</span> |
|
55 <a href="#?p.page=2">2</a> |
|
56 <a href="#?p.page=3">3</a> |
|
57 <span>4</span> |
|
58 <a href="#?p.page=5">5</a> |
|
59 <a href="#?p.page=6">6</a> |
|
60 <span>...</span> |
|
61 <a href="#?p.page=5">></a> |
|
62 <a href="#?p.page=7">>></a> |
|
63 </div> |
|
64 </div> |
|
65 <table th:with="columnSort=${param['p.sort']}?${param['p.sort'][0]}:'updated',sortDir=${param['p.sort.dir']}?${param['p.sort.dir'][0]}:'desc'"> |
|
66 <thead th:with="sortDirInv=${sortDir}=='desc'?'asc':'desc'"> |
|
67 <tr> |
|
68 <th th:with="sorted=(${columnSort}=='title')"><span th:text="#{renkanIndex.project_name}">Name</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="title"/><input type="hidden" name="p.sort.dir" th:value="${sorted}?${sortDirInv}:'desc'"/><input th:if="${param['filter']}" name="filter" type="hidden" th:value="${param['filter'][0]}"/><input type="submit" class="proj-sortable-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th> |
|
69 <th th:with="sorted=(${columnSort}=='updated')"><span th:text="#{renkanIndex.project_updated}">Updated</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="updated"/><input type="hidden" name="p.sort.dir" th:value="(${sorted})?${sortDirInv}:'desc'"/><input th:if="${param['filter']}" name="filter" type="hidden" th:value="${param['filter'][0]}"/><input type="submit" class="proj-sort-desc-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th> |
|
70 <th th:with="sorted=(${columnSort}=='created')"><span th:text="#{renkanIndex.project_creation}" >Creation</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="created"/><input type="hidden" name="p.sort.dir" th:value="${sorted}?${sortDirInv}:'desc'"/><input th:if="${param['filter']}" name="filter" type="hidden" th:value="${param['filter'][0]}"/><input type="submit" class="proj-sort-asc-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th> |
|
71 <th th:text="#{renkanIndex.project_commands}">Comm.</th> |
|
72 </tr> |
|
73 </thead> |
|
74 <tbody> |
|
75 <tr th:each="project: ${page}"> |
|
76 <th th:text="${project.title}">title</th> |
|
77 <td th:text="${project.updated}?${#dates.format(project.updated, #messages.msg('date.format'))}:''">update</td> |
|
78 <td th:text="${#dates.format(project.created, #messages.msg('date.format'))}">date</td> |
|
79 <td> |
|
80 <a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.getKey(2)})}" th:title="#{renkanIndex.project_edit_link}"><span class="ui-icon ui-icon-pencil renkan-basic-action"></span></a> |
|
81 <a href="#" th:href="@{'/p/pub/'+${project.id}(cowebkey=${project.getKey(1)})}" th:title="#{renkanIndex.project_render_link}"><span class="ui-icon renkan-icon-eye renkan-basic-action"></span></a> |
|
82 <span class="ui-icon ui-icon-triangle-1-e renkan-basic-action renkan-action-button" th:id="'renkan-action-button-'+${project.id}" th:attr="data-project_id=${project.id}"></span> |
|
83 </td> |
|
84 </tr> |
|
85 </tbody> |
|
86 </table> |
|
87 <ul th:each="project: ${page}" class="action-menu" id="action-menu-" th:id="'action-menu-'+${project.id}"> |
|
88 <li><a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.getKey(2)})}"><span class="ui-icon ui-icon-pencil"></span><span th:text="#{renkanIndex.project_edit_link}">Edit project</span></a></li> |
|
89 <li><a href="#" th:attr="data-project_id=${project.id}" class="copy-project"><span class="ui-icon ui-icon-copy"></span><span th:text="#{renkanIndex.project_copy_link}">Copy project</span></a></li> |
|
90 <li><a href="#" th:attr="data-project_id=${project.id},data-project_title=${project.title}" class="delete-project"><span class="ui-icon ui-icon-trash"></span><span th:text="#{renkanIndex.project_delete_link}">Delete project</span></a></li> |
|
91 <li><a href="#" th:href="@{'/p/pub/'+${project.id}(cowebkey=${project.getKey(1)})}"><span class=" ui-icon renkan-icon-eye"></span><span th:text="#{renkanIndex.project_render_link}">View project</span></a></li> |
|
92 <li><a href="#" th:href="@{'/p/exp/'+${project.id}}"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span><span th:text="#{renkanIndex.project_export_link}">Export project</span></a></li> |
|
93 </ul> |
|
94 |
|
95 </div> |
|
96 </div> |
|
97 <footer id="footer" th:include="fragment/pageFragment :: footerFragment"> |
|
98 <div id="version">© <span class="version-date">2014</span> <a href="http://www.iri.centrepompidou.fr" target="_blanck">IRI</a> - Version <span class="version-version">0.0</span></div> |
|
99 </footer> |
|
100 </div> |
|
101 <script th:inline="javascript" > |
|
102 /*<![CDATA[*/ |
|
103 'use strict'; |
|
104 function go2Title() |
|
105 { |
|
106 var renkantitle = $("#renkantitle").val(), |
|
107 renkanfiles = $("#renkanfile").prop("files"); |
|
108 |
|
109 if(renkantitle.length === 0 && renkanfiles.length === 0) { |
|
110 var alert_message = /*[[#{renkanIndex.js.empty_form_error}]]*/"Please enter a title or a file"; |
|
111 alert(alert_message); |
|
112 return false; |
|
113 } |
|
114 var post_url = /*[[@{/rest/projects/}]]*/"/rest/projects/", |
|
115 deferred = $.Deferred(); |
|
116 |
|
117 deferred.done(function(new_renkan) { |
|
118 new_renkan.space_id = /*[[${space.id}]]*/"_"; |
|
119 $.ajax(post_url, { |
|
120 data:JSON.stringify(new_renkan), |
|
121 type: "POST", |
|
122 dataType: "json", |
|
123 contentType: "application/json; charset=UTF-8" |
|
124 }).done(function(project){ |
|
125 var uri = new URI(window.location); |
|
126 window.location = uri.setSearch("p.sort","created").setSearch("p.sort.dir", "desc").href(); |
|
127 }); |
|
128 }); |
|
129 |
|
130 if(renkanfiles.length === 0) { |
|
131 deferred.resolve({ |
|
132 title: renkantitle, |
|
133 description: "", |
|
134 uri: null, |
|
135 }); |
|
136 } |
|
137 else { |
|
138 var fr = new FileReader(); |
|
139 fr.onload = function() { |
|
140 var new_renkan = JSON.parse(fr.result); |
|
141 if(renkantitle.length > 0) { |
|
142 new_renkan.title = renkantitle; |
|
143 } |
|
144 if(typeof new_renkan.created !== "undefined") { |
|
145 delete new_renkan.created; |
|
146 } |
|
147 if(typeof new_renkan.updated !== "undefined") { |
|
148 delete new_renkan.updated; |
|
149 } |
|
150 deferred.resolve(new_renkan); |
|
151 }; |
|
152 fr.readAsText(renkanfiles[0]); |
|
153 } |
|
154 } |
|
155 |
|
156 function copyProject(project_id) |
|
157 { |
|
158 var post_url = /*[[@{/p/copy}]]*/"#"; |
|
159 $.post(post_url, {"project_id": project_id}) |
|
160 .done(function(p){ |
|
161 window.location.reload(); |
|
162 }); |
|
163 } |
|
164 |
|
165 function deleteProject(project_id, project_title) |
|
166 { |
|
167 var message = /*[[#{renkanIndex.project_delete_confirm}]]*/"Delete project \"<%= title %>\""; |
|
168 if(confirm(_.template(message, {title: project_title}))) { |
|
169 var delete_url = /*[[@{/rest/projects}]]*/"#"; |
|
170 $.ajax(delete_url+"/"+project_id, { |
|
171 type: "DELETE" |
|
172 }).done(function(){ |
|
173 window.location.reload(); |
|
174 }); |
|
175 } |
|
176 } |
|
177 |
|
178 function createMenuHandler(menu, timeoutCallback) { |
|
179 return function(e) { |
|
180 menu.toggle(); |
|
181 $(e.target).toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-se"); |
|
182 $('.renkan-action-button').each(function() { |
|
183 if($(this).prop('id') !== $(e.target).prop('id')) { |
|
184 $(this).removeClass("ui-icon-triangle-1-se").addClass("ui-icon-triangle-1-e"); |
|
185 $("#action-menu-"+$(this).data('project_id')).hide(); |
|
186 var timeout = $("#action-menu-"+$(this).data('project_id')).data('blurtimeout'); |
|
187 if(typeof timeout !== 'undefined') { |
|
188 clearTimeout(menu.data('blurtimeout')); |
|
189 menu.removeData('blurtimeout'); |
|
190 } |
|
191 } |
|
192 }); |
|
193 if(menu.is(":visible")) { |
|
194 menu.data('blurtimeout', setTimeout( timeoutCallback,5000)); |
|
195 } |
|
196 } |
|
197 } |
|
198 |
|
199 $(function(){ |
|
200 |
|
201 $(".copy-project").click(function(event) { |
|
202 var project_id = $(event.currentTarget).data("project_id"); |
|
203 copyProject(project_id); |
|
204 }); |
|
205 |
|
206 $(".delete-project").click(function(event) { |
|
207 deleteProject($(event.currentTarget).data("project_id"), $(event.currentTarget).data("project_title")); |
|
208 }); |
|
209 |
|
210 |
|
211 $("#new-renkan-form").submit(function(e) { |
|
212 e.preventDefault(); |
|
213 go2Title(); |
|
214 return false; |
|
215 }); |
|
216 |
|
217 $("#import-renkan-form").submit(function(e) { |
|
218 e.preventDefault(); |
|
219 console.log("import form event :", e); |
|
220 }); |
|
221 |
|
222 $('.renkan-action-button').each(function() { |
|
223 var projectId = $(this).data('project_id'); |
|
224 var menu = $('#action-menu-'+projectId).menu().position({ my: "left top", at: "right top", of: this }).hide(); |
|
225 var that = this; |
|
226 |
|
227 var timeoutCallback = function() { |
|
228 menu.hide(); |
|
229 $(that).removeClass("ui-icon-triangle-1-se").addClass("ui-icon-triangle-1-e"); |
|
230 menu.removeData('blurtimeout'); |
|
231 }; |
|
232 |
|
233 menu.on('menufocus', function() { |
|
234 clearTimeout(menu.data('blurtimeout')); |
|
235 menu.removeData('blurtimeout'); |
|
236 }); |
|
237 menu.on('menublur',function(e) { |
|
238 menu.data('blurtimeout', setTimeout( timeoutCallback,200)); |
|
239 }); |
|
240 |
|
241 $(this).click(createMenuHandler(menu, timeoutCallback)); |
|
242 }); |
|
243 }); |
|
244 |
|
245 /*]]>*/ |
|
246 </script> |
|
247 </body> |
|
248 </html> |