Mercurial > hg > ismi-richfaces
annotate src/main/webapp/imageServer/displayDigi.jsp @ 34:9087a4623a08
Temporary Fix: Minor layout issues with info box on left of codex pages.
Previously:
- Choosing "view more" under Witness Information would make the information spill out over the rest of the page (outside the info box on the left).
Fixed:
- Now when "view more" is selected the overflow for Witness Information is contained within the page division. Suitable for laptop use but likely a little more difficult with a keyboard and mouse.
- Also made slight adjustment to let diva viewer and info box have similar heights.
- Vertically scrolling through info box now works well.
To-Do:
*The data under "view more" in Witness Info is being taken in an odd way from the database (tables within tables forming, etc)*
Signed-off-by: Alistair-Russell <russell.alistair@gmail.com>
| author | arussell |
|---|---|
| date | Thu, 21 May 2015 22:27:14 +0000 |
| parents | 672301480990 |
| children | a3bf915b62fe |
| rev | line source |
|---|---|
| 7 | 1 <%@ page contentType="text/html; charset=UTF-8" %> |
| 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> | |
| 3 <%@page import="org.mpi.openmind.repository.bo.Entity"%> | |
| 4 <%@page import="de.mpiwg.itgroup.diva.jsp.JSPDigitalization"%> | |
| 5 | |
| 6 <html> | |
| 7 <head> | |
| 8 <title>ismi - image server</title> | |
| 9 | |
| 10 | |
| 11 <link href="resources/css/bootstrap.css" type="text/css" rel="stylesheet" /> | |
| 12 <link href="resources/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet"> | |
| 13 <link href="resources/css/style.css" type="text/css" rel="stylesheet"> | |
| 14 <link href="resources/css/diva.min.css" type="text/css" rel="stylesheet" /> | |
| 15 <link href="resources/css/diva4ismi.css" type="text/css" rel="stylesheet" /> | |
| 16 | |
| 17 <script type="text/javascript" src="resources/js/jquery.min.js"></script> | |
| 18 <script type="text/javascript" src="resources/js/diva.min.js"></script> | |
| 19 <script type="text/javascript" src="resources/js/bootstrap.min.js"></script> | |
| 20 <script type="text/javascript" src="resources/js/typeahead.js"></script> | |
| 21 <script type="text/javascript" src="resources/js/diva4ismi.js"></script> | |
| 22 | |
| 23 <jsp:useBean id="digiBean" class="de.mpiwg.itgroup.diva.jsp.JSPDigitalization" scope="session" /> | |
| 24 <jsp:setProperty name="digiBean" property="request" value="${pageContext.request}" /> | |
| 25 <jsp:setProperty name="digiBean" property="response" value="${pageContext.response}" /> | |
| 26 | |
| 27 <%digiBean.init();%> | |
| 28 <% if(!digiBean.hasLogin()){ %> | |
| 29 <jsp:forward page="../imageServer/displayDigiList.xhtml?login=true" /> | |
| 30 <% } %> | |
| 31 | |
| 32 <script type="text/javascript"> | |
| 33 $(document).ready(function () { | |
| 34 | |
| 35 $("#witness-edit").on('click', '.update-witness', function(ev){ | |
| 36 | |
| 37 var witnessId = $(this).data('witness'); | |
| 38 | |
| 39 var startPageInput = $( "#input-start-page-"+witnessId ); | |
| 40 var endPageInput = $( "#input-end-page-"+witnessId ); | |
| 41 var digiIdInput = $("#digi_id"); | |
| 42 | |
| 43 var data = {}; | |
| 44 data["digi_id"] = digiIdInput[0].value; | |
| 45 | |
| 46 data["witness"] = {}; | |
| 47 data["witness"]["id"] = "" + witnessId; | |
| 48 data["witness"]["start_page"] = startPageInput[0].value; | |
| 49 data["witness"]["end_page"] = endPageInput[0].value; | |
| 50 | |
| 51 var witnessLink = $("#witness-link-" + witnessId); | |
| 52 witnessLink.data('start', startPageInput[0].value); | |
| 53 | |
| 54 $.ajax( | |
| 55 divaGlobal.rest_url + "/rest/witness/update?data=" + JSON.stringify(data), { | |
| 56 type: 'GET', | |
| 57 contentType: "application/json", | |
| 58 success: function(data, textStatus, jqXHR){ | |
| 59 var state = data["state"]; | |
| 60 if(state == "ok"){ | |
| 61 alert('Executed successfully'); | |
| 62 }else{ | |
| 63 alert(data["message"]); | |
| 64 } | |
| 65 }, | |
| 66 error: function(jqXHR, textStatus, errorThrown){ | |
| 67 alert('Error: ' + textStatus); | |
| 68 } | |
| 69 }); | |
| 70 | |
| 71 | |
| 72 }); | |
| 73 | |
| 74 /************************************************/ | |
| 75 | |
| 76 function getURLParams() | |
| 77 { | |
| 78 var urlParams = {}, | |
| 79 match, | |
| 80 pl = /\+/g, // Regex for replacing addition symbol with a space | |
| 81 search = /([^&=]+)=?([^&]*)/g, | |
| 82 decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); }, | |
| 83 query = window.location.search.substring(1); | |
| 84 while (match = search.exec(query)) | |
| 85 { | |
| 86 urlParams[decode(match[1])] = decode(match[2]); | |
| 87 } | |
| 88 | |
| 89 return urlParams; | |
| 90 } | |
| 91 | |
| 92 | |
| 93 $('#page-jump').on('keypress', function(ev) | |
| 94 { | |
| 95 if (ev.which == '13') | |
| 96 { | |
| 97 var dv = $('#diva-wrapper').data('diva'); | |
| 98 var value = $(this).val(); | |
| 99 var success = dv.gotoPageByNumber(value); | |
| 100 | |
| 101 if (!success) | |
| 102 { | |
| 103 if (!$('#page-jump-group').hasClass('error')) | |
| 104 { | |
| 105 $('#page-jump-group').addClass('error'); | |
| 106 $('#page-jump-controls').append('<span id="jump-error-help" class="help-inline">The page you specified is not valid.</span>'); | |
| 107 } | |
| 108 } | |
| 109 else | |
| 110 { | |
| 111 if ($('#page-jump-group').hasClass('error')) | |
| 112 { | |
| 113 $('#page-jump-group').removeClass('error'); | |
| 114 $('#jump-error-help').remove(); | |
| 115 } | |
| 116 } | |
| 117 | |
| 118 } | |
| 119 }); | |
| 120 | |
| 121 $('.go-to-witness-link').on('click', function(ev) { | |
| 122 var dv = $('#diva-wrapper').data('diva'); | |
| 123 var start_page = $(this).data('start'); | |
| 124 if(start_page){ | |
| 125 dv.gotoPageByNumber(start_page); | |
| 126 ev.preventDefault(); | |
| 127 }else{ | |
| 128 alert("No page assigned to this witness."); | |
| 129 } | |
| 130 | |
| 131 }); | |
| 132 | |
| 133 function modifyWitness(witness_id, key, value, successCallback, caller) { | |
| 134 var csrf = $("[name=csrfmiddlewaretoken]").val(); | |
| 135 var witnessURL = "/witness/" + witness_id; | |
| 136 var data = {}; | |
| 137 data[key] = value; | |
| 138 | |
| 139 $.ajax(witnessURL, { | |
| 140 type: 'PATCH', | |
| 141 headers: { | |
| 142 'X-CSRFToken': csrf | |
| 143 }, | |
| 144 data: JSON.stringify(data), | |
| 145 contentType: "application/json", | |
| 146 success: function(data, status, xhr) | |
| 147 { | |
| 148 // we'll need to operate on the button, so pass it back... | |
| 149 successCallback(data, caller); | |
| 150 } | |
| 151 }); | |
| 152 } | |
| 153 | |
| 154 function handlePageSwitch(idx, fn, divid) | |
| 155 { | |
| 156 // page number is what we're after, which is always | |
| 157 // page index + 1. | |
| 158 $('#current-page-idx').text(idx + 1); | |
| 159 $('#current-page-fn').text(fn); | |
| 160 } | |
| 161 | |
| 162 function handleDocumentLoaded(idx, fn) | |
| 163 { | |
| 164 var witnesses = {}; | |
| 165 | |
| 166 // we could do this with an ajax request, but we have | |
| 167 // the variables already here, we just need to get them | |
| 168 // from Django and not JS. | |
| 169 | |
| 170 var urlParams = getURLParams(); | |
| 171 if (urlParams.hasOwnProperty('witness')) | |
| 172 { | |
| 173 urlWitness = parseInt(urlParams['witness'], 10); | |
| 174 | |
| 175 // this won't be populated if the witness doesn't have a | |
| 176 // start page set. | |
| 177 if (witnesses.hasOwnProperty(urlWitness)) | |
| 178 { | |
| 179 this.gotoPageByNumber(witnesses[urlWitness]); | |
| 180 } | |
| 181 } | |
| 182 } | |
| 183 | |
| 184 $("#diva-wrapper").diva( | |
| 185 { | |
| 186 enableAutoHeight: true, | |
| 187 enableAutoTitle: false, | |
| 188 enableGotoPage: false, | |
| 189 fixedHeightGrid: false, | |
| 190 contained: true, | |
| 191 iipServerURL: divaGlobal.iipServerURL, | |
| 192 digiId: "<%=digiBean.getDigiId()%>", | |
| 193 objectData: divaGlobal.rest_url + "/rest/diva/proxy/json/<%=digiBean.getDigiLabel()%>", | |
| 194 imageDir: "/data7/srv/images/<%=digiBean.getDigiLabel()%>", | |
| 195 onSetCurrentPage : handlePageSwitch, | |
| 196 onDocumentLoaded : handleDocumentLoaded, | |
| 197 zoomLevel: 1, | |
| 198 canvasPlugin: { | |
| 199 proxyURL: divaGlobal.rest_url + "/rest/diva/proxy/image" | |
| 200 } | |
| 201 }); | |
| 202 }); | |
| 203 | |
| 204 | |
| 205 </script> | |
| 206 </head> | |
| 207 | |
| 208 <body bgcolor=white> | |
| 209 | |
| 210 <jsp:include page="header.jsp" /> | |
| 211 <div class="custom-container"> | |
| 212 | |
| 213 <div class="row-fluid"> | |
|
30
672301480990
Fixed: Layout issues and discrepancies on "public codices" + "image server" pages
arussell
parents:
7
diff
changeset
|
214 <div id="attributesPanel" class="span4 page" style="min-height: 700px;"> |
|
672301480990
Fixed: Layout issues and discrepancies on "public codices" + "image server" pages
arussell
parents:
7
diff
changeset
|
215 <a class="ismi-fullscreen-icon" href="#" data-in-fullscreen-mode="true"></a> |
|
672301480990
Fixed: Layout issues and discrepancies on "public codices" + "image server" pages
arussell
parents:
7
diff
changeset
|
216 |
|
34
9087a4623a08
Temporary Fix: Minor layout issues with info box on left of codex pages.
arussell
parents:
30
diff
changeset
|
217 <div class="attPanel" style="height: 700px; overflow: auto;"> |
| 7 | 218 |
|
30
672301480990
Fixed: Layout issues and discrepancies on "public codices" + "image server" pages
arussell
parents:
7
diff
changeset
|
219 <input type='hidden' name='csrfmiddlewaretoken' value='psDBHsF5a1mttLSKeUgoUUVN3HL6f8Re' /> |
| 7 | 220 |
| 221 <c:if test="${digiBean.getDigi() != null}"> | |
| 222 | |
| 223 <input type="hidden" id="digi_id" value="${digiBean.getDigi().getId()}"> | |
| 224 | |
| 225 <div class="divaBackgroud"> | |
| 226 | |
| 227 <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --> | |
| 228 | |
| 229 <h4><%=digiBean.getDigiLabel()%></h4> | |
| 230 | |
| 231 <c:if test="${digiBean.getWitnessList().size() > 0}"> | |
| 232 <span class="titlePanel">Titles in this Codex</span> | |
| 233 | |
| 234 <table class="table table-bordered table-condensed divaPanel"> | |
| 235 <thead> | |
| 236 <tr> | |
| 237 <th class="tableHead">Title</th> | |
| 238 <th class="tableHead">Folios</th> | |
| 239 </tr> | |
| 240 </thead> | |
| 241 <tbody> | |
| 242 <c:forEach var="witness" items="${digiBean.getWitnessList()}"> | |
| 243 <tr> | |
| 244 <td class="tdTitle"> | |
| 245 <c:out value="[${witness.id}] ${witness.title}"/> | |
| 246 <a target="_blank" | |
| 247 href="<c:out value='../search/displayTitle.xhtml?witnessId=${witness.id}#witnesses'/>"> | |
| 248 <img src="../resources/images/display_32.png" alt="Display witness" width="20" height="20" > | |
| 249 </a> | |
| 250 <a target="_blank" | |
| 251 href="<c:out value='../browse/entityDetails.xhtml?eid=${witness.id}'/>"> | |
| 252 <img src="../resources/images/network_32.png" alt="show witness" | |
| 253 width="20" height="20"> | |
| 254 </a> | |
| 255 <c:if test="${digiBean.canEdit()}"> | |
| 256 <a target="_blank" | |
| 257 href="<c:out value='../entry/createEntity.xhtml?eid=${witness.id}'/>"> | |
| 258 <img src="../resources/css/xp/css-images/edit.gif" alt="Edit codex" > | |
| 259 </a> | |
| 260 </c:if> | |
| 261 </td> | |
| 262 <td class="columnCentered"> | |
| 263 <a id="witness-link-${witness.id}" class="go-to-witness-link" data-start="${witness.startPage}" href="#"> | |
| 264 <c:out value="${witness.folios}"/> | |
| 265 </a> | |
| 266 </td> | |
| 267 </tr> | |
| 268 </c:forEach> | |
| 269 </tbody> | |
| 270 </table> | |
| 271 </c:if> | |
| 272 | |
| 273 <h4>Unknown titles in this Codex</h4> | |
| 274 <c:forEach var="witness" items="${digiBean.getUnknownList()}"> | |
| 275 <a id="witness-link-${witness.id}" class="go-to-witness-link" data-start="${witness.startPage}" href="#"> | |
| 276 <c:out value="${witness.folios}"/> | |
| 277 </a> | |
| 278 </c:forEach> | |
| 279 | |
| 280 <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --> | |
| 281 | |
| 282 <h4>Edit Folio/Image Correspondence</h4> | |
| 283 | |
| 284 | |
| 285 <div id="page-jump-group" class="control-group"> | |
| 286 <label for="page-jump" class="control-label">Go to page: </label> | |
| 287 <div class="controls" id="page-jump-controls"> | |
| 288 <input id="page-jump" type="text" class="form-control"> | |
| 289 </div> | |
| 290 </div> | |
| 291 | |
| 292 <p> | |
| 293 <strong>Current Page Index:</strong> <span id="current-page-idx"></span> | |
| 294 </p> | |
| 295 <p> | |
| 296 <strong>Page Filename:</strong> <span id="current-page-fn"></span> | |
| 297 </p> | |
| 298 | |
| 299 <table> | |
| 300 <tr> | |
| 301 <td> | |
| 302 <span class="titlePanel">[${digiBean.getDigi().getId()}] Digitalization</span> | |
| 303 <c:if test="${digiBean.canEdit()}"> | |
| 304 <a href="<c:out value='../entry/createEntity.xhtml?eid=${digiBean.getDigi().getId()}'/>"> | |
| 305 <img src="../resources/css/xp/css-images/edit.gif" alt="Edit digitalization" > | |
| 306 </a> | |
| 307 </c:if> | |
| 308 <table class="divaPanel"> | |
| 309 <tr> | |
| 310 <td class="tdTitle">Name</td> | |
| 311 <td class="tdContent"><c:out value="${digiBean.getName()}"></c:out> </td> | |
| 312 </tr> | |
| 313 <tr> | |
| 314 <td class="tdTitle">Number of files</td> | |
| 315 <td class="tdContent"><c:out value="${digiBean.getNumFiles()}"></c:out> </td> | |
| 316 </tr> | |
| 317 </table> | |
| 318 </td> | |
| 319 </tr> | |
| 320 <tr> | |
| 321 <td> | |
| 322 <c:if test="${digiBean.getCodex() == null}"> | |
| 323 <span class="titlePanel">Codex not yet assigned!</span> | |
| 324 </c:if> | |
| 325 | |
| 326 <c:if test="${digiBean.getCodex() != null}"> | |
| 327 <span class="titlePanel">[${digiBean.getCodex().getId()}] Codex</span> | |
| 328 <c:if test="${digiBean.canEdit()}"> | |
| 329 <a href="<c:out value='../entry/createEntity.xhtml?eid=${digiBean.getCodex().getId()}'/>"> | |
| 330 <img src="../resources/css/xp/css-images/edit.gif" alt="Edit codex" > | |
| 331 </a> | |
| 332 </c:if> | |
| 333 <table class="divaPanel"> | |
| 334 <tr> | |
| 335 <td class="tdTitle">Own Value</td> | |
| 336 <td class="tdTitle"><c:out value="${digiBean.getCodex().getOv()}"></c:out> </td> | |
| 337 </tr> | |
| 338 <tr> | |
| 339 <td class="tdTitle">Shelf Mark</td> | |
| 340 <td class="tdContent"><c:out value="${digiBean.getCodex().getIdentifier()}"></c:out> </td> | |
| 341 </tr> | |
| 342 <tr> | |
| 343 <td class="tdTitle">Collection</td> | |
| 344 <td class="tdContent"><c:out value="${digiBean.getCodex().getCollection()}"></c:out> </td> | |
| 345 </tr> | |
| 346 <tr> | |
| 347 <td class="tdTitle">Repository</td> | |
| 348 <td class="tdContent"><c:out value="${digiBean.getCodex().getRepository()}"></c:out> </td> | |
| 349 </tr> | |
| 350 <tr> | |
| 351 <td class="tdTitle">City</td> | |
| 352 <td class="tdContent"><c:out value="${digiBean.getCodex().getCity()}"></c:out> </td> | |
| 353 </tr> | |
| 354 <tr> | |
| 355 <td class="tdTitle">Country</td> | |
| 356 <td class="tdContent"><c:out value="${digiBean.getCodex().getCountry()}"></c:out> </td> | |
| 357 </tr> | |
| 358 </table> | |
| 359 | |
| 360 <c:if test="${digiBean.getWitnessList().size() > 0}"> | |
| 361 <span class="titlePanel">Witnesses in Codex</span> | |
| 362 <table id="witness-edit" class="table table-bordered table-condensed divaPanel"> | |
| 363 <thead> | |
| 364 <tr> | |
| 365 <th></th> | |
| 366 <th class="tableHead">Start</th> | |
| 367 <th class="tableHead">End</th> | |
| 368 </tr> | |
| 369 </thead> | |
| 370 <tbody> | |
| 371 <c:forEach var="witness" items="${digiBean.getWitnessList()}"> | |
| 372 <tr> | |
| 373 <td> | |
| 374 <table class="witnessTableDetail"> | |
| 375 <tr> | |
| 376 <td class="tdTitle"> | |
| 377 <c:out value="[${witness.id}]"/> | |
| 378 </td> | |
| 379 </tr> | |
| 380 <tr> | |
| 381 <td class="tdTitle"> | |
| 382 <c:out value="${witness.title}"/> | |
| 383 </td> | |
| 384 </tr> | |
| 385 <tr> | |
| 386 <td class="tdTitle"> | |
| 387 <c:out value="Folios: ${witness.folios}"/> | |
| 388 </td> | |
| 389 </tr> | |
| 390 <tr> | |
| 391 <td > | |
| 392 <a href="<c:out value='../browse/entityDetails.xhtml?eid=${witness.id}'/>"> | |
| 393 <img src="../resources/images/network_32.png" alt="show witness" | |
| 394 width="20" height="20"> | |
| 395 </a> | |
| 396 <c:if test="${digiBean.canEdit()}"> | |
| 397 <a href="<c:out value='../entry/createEntity.xhtml?eid=${witness.id}'/>"> | |
| 398 <img src="../resources/css/xp/css-images/edit.gif" alt="Edit codex" > | |
| 399 </a> | |
| 400 </c:if> | |
| 401 </td> | |
| 402 </tr> | |
| 403 </table> | |
| 404 </td> | |
| 405 | |
| 406 <td class="columnCentered"> | |
| 407 <input | |
| 408 id="input-start-page-<c:out value="${witness.id}"/>" | |
| 409 data-witness="<c:out value="${witness.id}"/>" | |
| 410 type="text" | |
| 411 readonly="readonly" | |
| 412 value="<c:out value="${witness.startPage}"/>" class="inputPageNumber"> | |
| 413 <c:if test="${digiBean.canEdit()}"> | |
| 414 <button class="set-start-set ismi-button" data-witness="<c:out value="${witness.id}"/>">Set Start</button> | |
| 415 <button class="set-start-reset ismi-button" data-witness="<c:out value="${witness.id}"/>">Reset Start</button> | |
| 416 </c:if> | |
| 417 </td> | |
| 418 | |
| 419 <td class="columnCentered"> | |
| 420 <input | |
| 421 id="input-end-page-<c:out value="${witness.id}"/>" | |
| 422 data-witness="<c:out value="${witness.id}"/>" | |
| 423 type="text" | |
| 424 readonly="readonly" | |
| 425 value="<c:out value="${witness.endPage}"/>" class="inputPageNumber"> | |
| 426 <c:if test="${digiBean.canEdit()}"> | |
| 427 <button class="set-end-set ismi-button" data-witness="<c:out value="${witness.id}"/>">Set Start</button> | |
| 428 <button class="set-end-reset ismi-button" data-witness="<c:out value="${witness.id}"/>">Reset Start</button> | |
| 429 </c:if> | |
| 430 </td> | |
| 431 <c:if test="${digiBean.canEdit()}"> | |
| 432 <td class="columnCentered"> | |
| 433 <button class="update-witness ismi-button" data-witness="<c:out value="${witness.id}"/>">Update</button> | |
| 434 </td> | |
| 435 </c:if> | |
| 436 </tr> | |
| 437 </c:forEach> | |
| 438 </tbody> | |
| 439 </table> | |
| 440 </c:if> | |
| 441 | |
| 442 </c:if> | |
| 443 | |
| 444 </td> | |
| 445 </tr> | |
| 446 </table> | |
| 447 </div> | |
| 448 </c:if> | |
| 449 | |
| 450 | |
| 451 </div> | |
| 452 </div> | |
| 453 <div class="span8"> | |
| 454 <input type='hidden' name='csrfmiddlewaretoken' value='psDBHsF5a1mttLSKeUgoUUVN3HL6f8Re' /> | |
| 455 <div id="diva-wrapper"></div> | |
| 456 </div> | |
| 457 </div> | |
| 458 </div> | |
| 459 | |
| 460 | |
| 461 </body> | |
| 462 </html> |