Source of “index.php”.
294 lines, 9.2 KBytes.   Last modified 9:16 am, 1st May 2016 PDT.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html 4/strict.dtd"><!-- Emacs settings: -*- mode: Fundamental; tab-width: 4; -*- --> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <!-- 6 7 //////////////////////////////////////////////////////////////////////////// 8 // // 9 // Andrew's Album Application: index.php // 10 // // 11 // Copyright (c) 2004-2016, Andrew Birrell // 12 // // 13 // See photos.php or the "Help" screen for a summary // 14 // // 15 //////////////////////////////////////////////////////////////////////////// 16 17 --> 18 <?php 19 20 require("settings-php.txt"); // album-specific settings 21 22 function filev($url, $filepath = false) { 23 // Echo $url with an appended "?v=mtime", to prevent any incorrect 24 // caching of the file by the browser. 25 // 26 echo $url . "?v=" . filemtime($filepath ? $filepath : $url); 27 } 28 29 ?> 30 <meta name="viewport" content= 31 "initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 32 <meta name="apple-mobile-web-app-capable" content="yes"> 33 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 34 <title><?php echo C_pageTitle ?></title> 35 <link href="<?php 36 filev("photos.css") ?>" rel=stylesheet> 37 <link rel="apple-touch-icon" sizes="114x114" href="album-114x114.png"> 38 <script type="text/javascript" src="<?php 39 filev("/support/adbabMisc.js", "../support/adbabMisc.js") ?>"></script> 40 <script type="text/javascript" src="<?php 41 filev("photos.js") ?>"></script> 42 </head> 43 <body onload="init()" <?php 44 if (C_bkgdImage) echo "style=\"background-image: " . C_bkgdImage . "\"" 45 ?>> 46 47 48 <!-- 49 // "About" dialog 50 --> 51 52 <div class=dlog id=about> 53 <div class=dlogHeader onmousedown= 54 "return dragStart(event, this, 'about', 'dragging')"> 55 About Andrew's Album Application 56 </div> 57 <div class=dlogBody> 58 59 <input class=close type=submit value=Close onclick="return closeDlogs()"> 60 61 This is a web-based photograph album: the photos are stored in a folder 62 hierarchy on the server, and the web page uses JavaScript to show them 63 to you. 64 <p> 65 On a desktop web browser, navigate by clicking the buttons in the top 66 bar. When viewing a photo (on a non-touch-screen device), you can also 67 click the arrows that appear if you move the cursor near to the left, 68 right, or top edges of the window. On a touch-screen device like an 69 iPhone the &ldquo;Next&rdquo; and &ldquo;Previous&rdquo; actions are 70 done by swiping across the screen. Finally, on a device with a keyboard 71 you can navigate with the cursor-arrow keys: left for 72 &ldquo;Previous&rdquo;, right for &ldquo;Next&rdquo;, up-arrow to view the 73 parent folder, and down-arrow to view this folder&rsquo;s first 74 directly-contained photo (if any). 75 <p> 76 The &ldquo;Skip&rdquo; button or shift-right arrow skips the remainder 77 of the current folder and any sub-folders. 78 <p> 79 The &ldquo;Play&rdquo; button (or the spacebar) starts a slide show of 80 all the photos in the current folder, and its sub-folders. The spacebar 81 will also pause or resume the slide show, and the escape key will stop it. 82 <p> 83 Clicking in a photo hides or displays the menu bar and title bar. 84 <p> 85 You can edit the title of a folder or photo by clicking 86 &ldquo;Edit&rdquo; or by clicking on the title. The edit dialog also 87 allows you to nominate an image or folder to be used as a thumbnail for 88 its enclosing folder. Editting requires a valid Pachylet name and 89 password. You can sort the directly-contained photos in a folder by 90 dragging them around, then clicking &ldquo;Save&rdquo;. 91 <p> 92 All navigation within the album keeps your browser on the same single 93 web page: the browser&rsquo;s &ldquo;Back&rdquo; button takes you to the 94 page you were viewing before the album. But each folder and photo has 95 its own URL, distinguished by the part after the &ldquo;#&rdquo;, as 96 shown in the browser&rsquo;s address bar. The address bar is updated as 97 you navigate around the album, so reloading the window will always return 98 you to the part of the album that you were viewing, and the URL can be 99 bookmarked or sent to a friend. 100 <p> 101 There&rsquo;s also a <a href="noscript.php">version</a> that doesn't use 102 any Javascript, but which has a very limited set of features: just basic 103 navigation. See also the separate <span class=dlgLink 104 onclick="return openDlog('details')" 105 title="Open the &ldquo;Technical Details&rdquo; window" 106 >technical details page</span>. 107 </div> 108 </div> 109 110 111 <!-- 112 // "Technical Details" dialog 113 --> 114 115 <div class=dlog id=details> 116 <div class=dlogHeader onmousedown= 117 "return dragStart(event, this, 'details', 'dragging')"> 118 Technical Details 119 </div> 120 <div class=dlogBody> 121 122 <input class=close type=submit value=Close onclick="return closeDlogs()"> 123 124 The server side of the application consists of a 125 <a href="lister.php?file=photos.php">PHP script</a> 126 plus its 127 <a href="lister.php?file=shared-php.txt">subroutines</a> 128 and 129 <a href="lister.php?file=settings-php.txt">settings</a>. 130 The script responds to requests from the client side 131 by returning XML descriptions of the images and folders. 132 The server-side script is also responsible for creating and maintaining 133 a cache of scaled images, and a database of image and folder titles. 134 The server-side script doesn't do any HTML, 135 and it has no opinion on how you are going to navigate and view the images. 136 <p> 137 After changing the set of images and folders on the server, you can 138 pre-load the server-side cache by shift-clicking on the "Play" button. 139 <p> 140 The client side consists of HTML generated by 141 <a href="lister.php?file=index.php">a PHP script</a>, 142 plus its associated 143 <a href="lister.php?file=photos.css">stylesheet</a> 144 and 145 <a href="lister.php?file=photos.js">Javascript</a>. 146 <p> 147 All of this is copyright &copy; <a href="/andrew/me/">Andrew Birrell</a>. 148 149 </div> 150 </div> 151 152 153 <!-- 154 // "Edit" dialog 155 --> 156 157 <div class=dlog id=editForm> 158 <div class=dlogHeader id=editHeader 159 onmousedown="return dragStart(event, this, 'editForm', 'dragging')"> 160 &nbsp; 161 </div> 162 <div class=dlogBody> 163 164 <img id=editThumbnail src="missing.jpg" alt="thumbnail"> 165 166 <div id=writing> 167 Writing ... 168 </div> 169 170 <form method=GET action="./" onsubmit="return editSave(false)"> 171 <div id=editInner> 172 <span class=formPrompt>User:</span> 173 <span class=formInput> 174 <input type=text id=editUser size=20 175 inputmode=verbatim autocapitalize=none autocorrect=off> 176 </span><br> 177 <span class=formPrompt>Password:</span> 178 <span class=formInput> 179 <input type=password id=editPwd size=20> 180 </span> 181 <div id=editTitleGroup> 182 <span class=formPrompt>Title:</span> 183 <span class=formInput> 184 <input type=text id=editTitle size=28> 185 </span><br> 186 <span class=formPrompt>Thumb:</span> 187 <span class=formInput> 188 <input type=checkbox id=editThumb name=editThumb value="Y"> 189 Use for containing folder&rsquo;s thumbnail. 190 </span> 191 </div> 192 <span class=formPrompt>&nbsp;</span> 193 <span class=formInput> 194 <input type=submit value="Save"> 195 <input type=submit value="Save &amp; Next" onclick="return editSave(true)"> 196 <input type=submit value=Cancel onclick="return closeDlogs()"> 197 </span> 198 </div><!-- editinner --> 199 </form> 200 201 </div> 202 </div> 203 204 205 <!-- 206 // "Reading" progress screen (with its fake "progress" bar) 207 --> 208 209 <div class=dlog id=reading> 210 Reading ... 211 <div id=readingProgress><div id=readingWidget>&nbsp;</div></div> 212 </div> 213 214 215 <!-- 216 // Image scale screen 217 --> 218 219 <div class=dlog id=scaling></div> 220 221 222 <!-- 223 // Top button bar 224 --> 225 226 <div id=topStuff> 227 <div class=btnGroup id=navigationBtns> 228 <span class=btn 229 id=shrink><img class=magGlass src="zoom_out.png" 230 alt="zoom"></span><span class=btn 231 id=magnify><img class=magGlass src="zoom_in.png" 232 alt="zoom"></span><?php 233 if (!C_playSkip) echo "<span style=\"display: none\">"; 234 ?><span class=btn 235 id=auto>Play</span><span class=btn 236 id=pause>Pause</span><span class=btn 237 id=resume>Resume</span><span class=btn 238 id=stop>Stop</span><?php 239 if (!C_playSkip) echo "</span>"; 240 ?><span id=prevAndNext><span class=btn 241 id=prev>Previous</span><span class=btn 242 id=next>Next</span><?php 243 if (!C_playSkip) echo "<span style=\"display: none\">"; 244 ?><span class=btn 245 id=skip>Skip</span><?php 246 if (!C_playSkip) echo "</span>"; 247 ?></span> 248 </div><!-- navigationBtns --> 249 <div class="btnGroup btn" id=parentBtns>&nbsp;</div> 250 </div><!-- topStuff --> 251 252 253 <!-- 254 // Navigation arrows 255 --> 256 257 <div class=arrow id=arrowT><img src=arrowT.png alt="Up"></div> 258 259 <div class=arrow id=arrowL><img src=arrowL.png alt="Previous"><div 260 class=linePad></div></div> 261 262 <div class=arrow id=arrowR><img src=arrowR.png alt="Next"><div 263 class=linePad></div></div> 264 265 266 <!-- 267 // Main content area 268 --> 269 270 <div class=contents id=contents1></div> 271 <div class=contents id=contents2></div> 272 <div class=contents id=contents3></div> 273 274 275 <!-- 276 // Bottom button bar 277 --> 278 279 <div id=bottomStuff> 280 <div id=title>Andrew's Album Application</div> 281 <div class=btnGroup id=privBtns> 282 <span class=btn 283 id=edit>Edit</span><span class=btn 284 id=sortSave>Save&hellip;</span><span class=btn 285 id=raw>Raw</span><span class=btn 286 id=sortRevert>Revert</span><span class=btn 287 id=help>Help</span> 288 </div><!-- privBtns --> 289 <div id=commentary>&nbsp;</div> 290 <div class=btnGroup>&nbsp;</div><!-- ensure height when no other content --> 291 </div><!-- bottomStuff --> 292 293 </body> 294 </html>
End of listing