source: other-projects/the-macronizer/trunk/web/jsp/en/main.jsp@ 33866

Last change on this file since 33866 was 33866, checked in by ak19, 4 years ago

Dr Bainbridge's fix to Android mobile macronizer user (on Chrome 79.0.3945.116 running on Samsung S9 with Android 8.0.0; SM-G960U Build.R16NW) sent us a screenshot of text typed into the macronizer text area showing the textarea box obscuring the Add Macrons button. Investigating it showed that when text was typed, this text box enlarged. Although our tests in the chrome browser's responsive/mobile emulation (in web developer's tools) did not show the button itself going behind the text box but floating above it, the fix in this commit seems to prevent the box getting automatically enlarged when typing. The user can still manually expand the box by dragging its bottom right corner.
File size: 11.5 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<%
3 String inputOptionsDisplay;
4 String inputOptionsVisibility;
5 String hiddenInputOptions;
6 if (request.getAttribute("options") != null && request.getAttribute("options").equals("true")) {
7 inputOptionsDisplay = "block";
8 inputOptionsVisibility = "visible";
9 hiddenInputOptions = "true";
10 } else {
11 inputOptionsDisplay = "none";
12 inputOptionsVisibility = "hidden";
13 hiddenInputOptions = "false";
14 }
15 String checkPreserveMacrons;
16 if (request.getAttribute("preserveMacrons") != null && !request.getAttribute("preserveMacrons").equals("true")) {
17 checkPreserveMacrons = "";
18 } else {
19 checkPreserveMacrons = "checked";
20 }
21%>
22
23<html>
24 <head>
25 <%@page contentType="text/html" pageEncoding="UTF-8"%>
26 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
27
28 <!-- Text area used to keep getting bigger when user started to type in it, but then also obscured the button underneath.
29 The solution referring to a meta viewport tag with "maximum-scale" suggested below seemed to work when testing in browser:
30 https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
31 However, just setting the meta viewport tag with only initial-scale seems to work too:
32 https://www.w3schools.com/css/css_rwd_viewport.asp
33 -->
34 <meta name="viewport" content="width=device-width, initial-scale=1.0">
35
36 <title>The Māori Macron Restoration Service</title>
37 <link href="../../css/css.css" rel="stylesheet" type="text/css" />
38 <script src="../../js/js.js" type="text/javascript"></script>
39
40 <style type="text/css">
41 <% if (request.getAttribute("file") != null) {%>
42 fieldset#download-file, li#download-tab {
43 display: block;
44 visibility: visible;
45 }
46 fieldset#restore-by-input, fieldset#restore-by-upload {
47 display: none;
48 visibility: hidden;
49 }
50 <% } else {%>
51 fieldset#restore-by-input {
52 display: block;
53 visibility: visible;
54 }
55 fieldset#restore-by-upload, fieldset#download-file, li#download-tab {
56 display: none;
57 visibility: hidden;
58 }
59 <% }%>
60
61
62
63
64 </style>
65
66 </head>
67
68 <body>
69 <jsp:include page="header.jsp" />
70
71 <div id="content">
72 <ul id="tabset_tabs">
73 <%
74 String inputTabClass, uploadTabClass, downloadTabClass;
75 inputTabClass = uploadTabClass = downloadTabClass = "";
76 if (request.getAttribute("file") != null) {
77 downloadTabClass = "selected";
78 } else {
79 inputTabClass = "selected";
80 }
81 %>
82 <li id="input-tab" class="<%=inputTabClass%>"> <a href="javascript:toggleTabs('restore-by-input');"> <span>Add Macrons by</span> Direct Input </a> </li>
83 <li id="upload-tab" class="<%=uploadTabClass%>"> <a href="javascript:toggleTabs('restore-by-upload');"> <span>Add Macrons by</span> File Upload </a> </li>
84 <li id="download-tab" class="<%=downloadTabClass%>"> <a href="javascript:void()"> <span>Macronised File</span> Download</a> </li>
85 </ul>
86
87 <div id="fields">
88 <fieldset id="restore-by-input">
89 <legend class="tabset_label">Add Macrons by Direct Input</legend>
90 <form action="../servlet/DirectInput" method="post" >
91 <p class="instructions">Enter the Text</p>
92 <div class="workspace">
93 <textarea name="fragment" cols="60" rows="18" id="fragment"><%= request.getAttribute("old") != null ? request.getAttribute("old") : ""%></textarea>
94 <div class="results" ><%= request.getAttribute("fragment2") != null ? request.getAttribute("fragment2") : ""%></div>
95 </div>
96 <fieldset>
97 <legend class="more-options">
98 <a href="javascript:toggleOptions();">
99 <img id="input-more-options-icon" src="../../images/arrow-closed.png" alt="Advanced Options Icon"></img>
100 Advanced Options
101 </a>
102 </legend>
103 <div id="input-options" class="options" style="display: <%=inputOptionsDisplay%>; visibility: <%=inputOptionsVisibility%>;">
104 <table>
105 <tr>
106 <td>
107 <input name="preserveExistingMacrons" type="checkbox" value="true" <%=checkPreserveMacrons%>></input>
108 <label>Preserve existing macrons</label>
109 </td>
110 </tr>
111 </table>
112 </div>
113 </fieldset>
114 <input type="hidden" name="lang" value="en" />
115 <input id="hidden-input-options" type="hidden" name="options" value="<%= hiddenInputOptions%>" />
116 <p class="submit_button">
117 <input title="Submit to add macrons" type="submit" value="Add Macrons" />
118 </p>
119 </form>
120 </fieldset>
121
122 <fieldset id="restore-by-upload">
123 <legend class="tabset_label">Add Macrons by File Upload</legend>
124 <form action="../servlet/FileUpload" method="post" enctype="multipart/form-data">
125 <p class="instructions">Choose an existing document to upload</p>
126 <p>
127 <label>File:</label>
128 <input type="file" id="uploaded_file" name="file" />
129 </p>
130 <fieldset>
131 <legend class="more-options">
132 <a href="javascript:toggleOptions();">
133 <img id="upload-more-options-icon" src="../../images/arrow-closed.png" alt="Advanced Options Icon"></img>
134 Advanced Options
135 </a>
136 </legend>
137 <div id="upload-options" class="options" style="display: <%=inputOptionsDisplay%>; visibility: <%=inputOptionsVisibility%>;">
138 <table>
139 <tr>
140 <th><label>Character Encoding:</label></th>
141 <td><select id="upload-charset" name="charsetEncoding">
142 <option value="(detect automatically)" selected="selected">(detect automatically)</option>
143 <option value="utf-8">utf-8 (Unicode)</option>
144 <option value="utf-16">utf-16 (Unicode)</option>
145 </select></td>
146 </tr>
147 <tr>
148 <th><label>Document Type:</label></th>
149 <td><select id="upload-doctype" name="fileType">
150 <option value="(detect automatically)" selected="selected">(detect automatically)</option>
151 <option value=".docx">Microsoft Office Word 2007 (.docx)</option>
152 <option value=".odt">Open Office Word (.odt)</option>
153 <option value=".txt">Text (.txt)</option>
154 </select></td>
155 </tr>
156 <tr>
157 <td>
158 <input name="preserveExistingMacrons" type="checkbox" value="true" <%=checkPreserveMacrons%>></input>
159 <label>Preserve existing macrons</label>
160 </td>
161 </tr>
162 </table>
163 </div>
164 </fieldset>
165 <input type="hidden" name="lang" value="en" />
166 <input id="hidden-upload-options" type="hidden" name="options" value="<%= hiddenInputOptions%>" />
167 <p class="submit_button">
168 <input title="Submit to add macrons" type="submit" value="Upload File" />
169 </p>
170 <p class="notes">Note: Supports Microsoft Word 2007 documents, Open Office Text documents and text files.</p>
171 </form>
172 </fieldset>
173
174 <fieldset id="download-file">
175 <legend class="tabset_label">Restored by File Upload</legend>
176 <form action="../servlet/Download" method="post" >
177 <p class="instructions">Output:</p>
178 <div id="options" class="options">
179 <table>
180 <tr>
181 <th><label>File:</label></th>
182 <td><label><%= request.getAttribute("filename")%></label></td>
183 </tr>
184 <tr>
185 <th><label>Character Encoding:</label></th>
186 <td><label><%= request.getAttribute("charsetEncoding")%></label></td>
187 </tr>
188 <tr>
189 <th><label>Document Type:</label></th>
190 <td><label><%= request.getAttribute("fileType")%></label></td>
191 </tr>
192 </table>
193 </div>
194 <%
195 String downloadFilePath = request.getAttribute("file") != null ? ((java.io.File) request.getAttribute("file")).getAbsolutePath() : null;
196 %>
197 <input type="hidden" id="filepath" name="filepath" value="<%=downloadFilePath%>" />
198 <input type="hidden" id="filename" name="filename" value="<%= request.getAttribute("filename")%>" />
199 <p class="submit_button">
200 <input title="Download File" type="submit" value="Download File" />
201 </p>
202 </form>
203 </fieldset>
204 </div>
205 </div>
206
207 <jsp:include page="footer.jsp" />
208 </body>
209</html>
Note: See TracBrowser for help on using the repository browser.