jscripts/infusion/components/reorderer/html/ImageReordererRSF.html

   1 <!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"\r
   2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
   3
   4 <!--  This is a multi purpose file used for:
   5         1. as a stand alone example of the Lightbox
   6         2. as the RSF template for the image gallery tool
   7       Note that the RSF ids throughout this template are used by the gallery tool and are only necessary when using RSF.-->
   8       \r
   9 <html xmlns="http://www.w3.org/1999/xhtml" \r
  10   xmlns:rsf="http://ponder.org.uk/rsf">\r
  11   \r
  12   <head>
  13     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
  14     <title>Fluid Image Reorderer</title>\r
  15     <link href="../../../framework/fss/css/fss-reset.css" type="text/css" rel="stylesheet" media="all" />\r
  16     <link href="../css/Reorderer.css" rsf:id="scr=contribute-style" type="text/css" rel="stylesheet" media="all" />\r
  17     <link href="../css/ImageReorderer.css" rsf:id="scr=contribute-style" type="text/css" rel="stylesheet" media="all" />
  18
  19     <!--  Required javascript modules for the Image Reorderer which can be replaced with the build generated file Fluid-all.js -->
  20     <script type="text/javascript" src="../../../lib/jquery/core/js/jquery.js" rsf:id="scr=contribute-script"></script>\r
  21     <script type="text/javascript" src="../../../lib/jquery/ui/js/ui.core.js" rsf:id="scr=contribute-script"></script>\r
  22     <script type="text/javascript" src="../../../lib/jquery/ui/js/ui.draggable.js" rsf:id="scr=contribute-script"></script>\r
  23     <script type="text/javascript" src="../../../framework/core/js/jquery.keyboard-a11y.js" rsf:id="scr=contribute-script"></script>
  24     <script type="text/javascript" src="../../../framework/core/js/Fluid.js" rsf:id="scr=contribute-script"></script>\r
  25     <script type="text/javascript" src="../../../framework/core/js/FluidDOMUtilities.js" rsf:id="scr=contribute-script"></script>\r
  26     <script type="text/javascript" src="../../reorderer/js/GeometricManager.js" rsf:id="scr=contribute-script"></script>\r
  27     <script type="text/javascript" src="../../reorderer/js/Reorderer.js" rsf:id="scr=contribute-script"></script>\r
  28     <script type="text/javascript" src="../../reorderer/js/ImageReorderer.js" rsf:id="scr=contribute-script"></script>\r
  29
  30     <!--  Ensure jQuery plays nice with other toolkits - must be called after all the javascript is loaded. -->
  31     <script type="text/javascript" rsf:id="scr=contribute-script">
  32       jQuery.noConflict();
  33     </script>
  34   </head>\r
  35   <body>\r
  36     <p id="para1">This is the Image Reorderer demo page.</p>\r
  37
  38     <!--
  39       The Lightbox uses hidden inputs as the strategy for posting the item order back
  40       to the server, therefore the orderables need to be enclosed in a form.
  41     -->\r
  42     <form id="reorder-form">\r
  43
  44       <!-- lightbox-parent is used for testing setup and teardown -->
  45       <div rsf:id="lightbox:" id="lightbox-parent" >\r
  46         <div rsf:id="lightbox-temp-container:" id="gallery:::gallery-thumbs:::" class="fl-reorderer-image-container" tabindex="2">\r
  47
  48           <!--
  49             Orderable items are divs denoted by ids in the following form.
  50             [lightbox-container-id] + lightbox-cell: + [index] + :
  51             The createLightboxFromId() function expects this format when attaching the javascript behaviour of the Lightbox.
  52           -->
  53           <div rsf:id="lightbox-cell:" id="gallery:::gallery-thumbs:::lightbox-cell:0:">\r
  54         \r
  55             <div rsf:id="lightbox-client-cell:">
  56
  57               <!--  The RSF gallery contains the markup for this inner div in another template. -->\r
  58               <div class="fl-reorderer-image-inner-container">\r
  59               \r
  60                 <a id="focus-element1" href="../images/Dragonfruit.jpg">\r
  61                   <img id="fluid.img.first" src="../images/Dragonfruit.jpg" alt="Dragonfruit"/>\r
  62                 </a>\r
  63               </div>\r
  64               <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
  65                 <a href="../images/Dragonfruit.jpg" >Dragonfruit</a>\r
  66               </div>\r
  67             </div>
  68           \r
  69             <!--  \r
  70               This input is used for posting the new order back to the server.\r
  71               The value is the index of the thumbnail in a virtual array of thumbnails.\r
  72               That is, 'value="0"' denotes the 0'th thumbnail; 'value="1"' the 1st,\r
  73               and so on.\r
  74             -->\r
  75             <input rsf:id="reorder-index" id="gallery:::gallery-thumbs:::lightbox-cell:0:reorder-index" value="0" type="hidden"/>\r
  76           </div>\r
  77
  78           <!--  The remainder of the lightbox cells are used for the stand alone lightbox and the tests, not the RSF gallery -->\r
  79           <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:1:">\r
  80             <div>\r
  81               <div class="fl-reorderer-image-inner-container">\r
  82                 <a href="../images/Kiwano.jpg" >\r
  83                   <img id="fluid.img.second" src="../images/Kiwano.jpg" alt="Kiwano"/>\r
  84                 </a>\r
  85               </div>\r
  86               <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
  87                 <a href="../images/Kiwano.jpg" >Kiwano</a>\r
  88               </div>\r
  89             </div>\r
  90             <input id="gallery:::gallery-thumbs:::lightbox-cell:1:reorder-index" value="1" type="hidden"/>      \r
  91           </div>\r
  92               \r
  93           <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:2:">\r
  94                         <div>\r
  95                           <div class="fl-reorderer-image-inner-container">\r
  96                             <a href="../images/Blackberry.jpg" >\r
  97                               <img id="fluid.img.3" src="../images/Blackberry.jpg" alt="Blackberry"/>\r
  98                             </a>\r
  99                           </div>\r
 100                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 101                             <a href="../images/Blackberry.jpg" >Blackberry</a>\r
 102                           </div>\r
 103                         </div>\r
 104                         <input id="gallery:::gallery-thumbs:::lightbox-cell:2:reorder-index" value="2" type="hidden"/>\r
 105                       </div>\r
 106       \r
 107                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:3:">\r
 108                   <div>\r
 109                           <div class="fl-reorderer-image-inner-container">\r
 110                             <a href="../images/Cherry.jpg">\r
 111                               <img id="fluid.img.4" src="../images/Cherry.jpg" alt="Cherry"/>\r
 112                             </a>\r
 113                           </div>\r
 114                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 115                             <a href="../images/Cherry.jpg" >Cherry</a>\r
 116                           </div>\r
 117                         </div>\r
 118                         <input id="gallery:::gallery-thumbs:::lightbox-cell:3:reorder-index" value="3" type="hidden"/>\r
 119                       </div>
 120       \r
 121                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:4:">\r
 122                         <div>\r
 123                           <div class="fl-reorderer-image-inner-container">\r
 124                             <a href="../images/Fig.jpg">\r
 125                               <img id="fluid.img.5" src="../images/Fig.jpg" alt="Fig"/>\r
 126                             </a>\r
 127                           </div>\r
 128                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 129                             <a href="../images/Fig.jpg" >Fig</a>\r
 130                           </div>\r
 131                         </div>\r
 132                   <input id="gallery:::gallery-thumbs:::lightbox-cell:4:reorder-index" value="4" type="hidden"/>        \r
 133                       </div>
 134       \r
 135                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:5:">\r
 136                         <div>\r
 137                           <div class="fl-reorderer-image-inner-container">\r
 138                             <a href="../images/Grapes.jpg">\r
 139                               <img id="fluid.img.6" src="../images/Grapes.jpg" alt="Grapes"/>\r
 140                             </a>\r
 141                           </div>\r
 142                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 143                             <a href="../images/Grapes.jpg" >Grapes</a>\r
 144                           </div>\r
 145                         </div>\r
 146                   <input id="gallery:::gallery-thumbs:::lightbox-cell:5:reorder-index" value="5" type="hidden"/>\r
 147                       </div>
 148
 149                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:6:">\r
 150                         <div>\r
 151                           <div class="fl-reorderer-image-inner-container">\r
 152                             <a href="../images/Kiwi.jpg" >\r
 153                               <img id="fluid.img.7" src="../images/Kiwi.jpg" alt="Kiwi"/>\r
 154                             </a>\r
 155                           </div>\r
 156                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 157                             <a href="../images/Kiwi.jpg" >Kiwi</a>\r
 158                           </div>\r
 159                         </div>\r
 160                         <input id="gallery:::gallery-thumbs:::lightbox-cell:6:reorder-index" value="6" type="hidden"/>\r
 161                       </div>
 162       \r
 163                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:7:">\r
 164                         <div>\r
 165                           <div class="fl-reorderer-image-inner-container">\r
 166                             <a href="../images/Kumquat.jpg">\r
 167                               <img id="fluid.img.8" src="../images/Kumquat.jpg" alt="Kumquat"/>\r
 168                             </a>\r
 169                           </div>\r
 170                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 171                             <a href="../images/Kumquat.jpg" >Kumquat</a>\r
 172                           </div>\r
 173                         </div>\r
 174                         <input id="gallery:::gallery-thumbs:::lightbox-cell:7:reorder-index" value="7" type="hidden"/>\r
 175                       </div>
 176       \r
 177                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:8:">\r
 178                         <div>\r
 179                           <div class="fl-reorderer-image-inner-container">\r
 180                             <a href="../images/Lemon.jpg">\r
 181                               <img id="fluid.img.9" src="../images/Lemon.jpg" alt="Lemon"/>\r
 182                             </a>\r
 183                           </div>\r
 184                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 185                             <a href="../images/Lemon.jpg" >Lemon</a>\r
 186                           </div>\r
 187                         </div>\r
 188                         <input id="gallery:::gallery-thumbs:::lightbox-cell:8:reorder-index" value="8" type="hidden"/>\r
 189                       </div>
 190       \r
 191                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:9:">\r
 192                         <div>\r
 193                           <div class="fl-reorderer-image-inner-container">\r
 194                             <a href="../images/Orange.jpg">\r
 195                               <img id="fluid.img.10" src="../images/Orange.jpg" alt="Orange"/>\r
 196                             </a>\r
 197                           </div>\r
 198                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 199                             <a href="../images/Orange.jpg" >Orange</a>\r
 200                           </div>\r
 201                         </div>\r
 202                         <input id="gallery:::gallery-thumbs:::lightbox-cell:9:reorder-index" value="9" type="hidden"/>\r
 203                       </div>
 204       \r
 205                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:10:">\r
 206                         <div>\r
 207                           <div class="fl-reorderer-image-inner-container">\r
 208                             <a href="../images/RedApple.jpg">\r
 209                               <img id="fluid.img.11" src="../images/RedApple.jpg" alt="RedApple"/>\r
 210                             </a>\r
 211                           </div>\r
 212                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 213                             <a href="../images/RedApple.jpg" >RedApple</a>\r
 214                           </div>\r
 215                         </div>\r
 216                         <input id="gallery:::gallery-thumbs:::lightbox-cell:10:reorder-index" value="10" type="hidden"/>\r
 217                       </div>
 218       \r
 219                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:11:">\r
 220                         <div>\r
 221                           <div class="fl-reorderer-image-inner-container">\r
 222                             <a href="../images/Tamarillo.jpg">\r
 223                               <img id="fluid.img.12" src="../images/Tamarillo.jpg" alt="Tamarillo"/>\r
 224                             </a>\r
 225                           </div>\r
 226                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 227                             <a href="../images/Tamarillo.jpg" >Tamarillo</a>\r
 228                           </div>\r
 229                         </div>\r
 230                         <input id="gallery:::gallery-thumbs:::lightbox-cell:11:reorder-index" value="11" type="hidden"/>\r
 231                       </div>
 232       \r
 233                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:12:">\r
 234                         <div>\r
 235                           <div class="fl-reorderer-image-inner-container">\r
 236                             <a href="../images/Mangosteen.jpg">\r
 237                               <img id="fluid.img.secondLast" src="../images/Mangosteen.jpg" alt="Mangosteen"/>\r
 238                             </a>\r
 239                           </div>\r
 240                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 241                             <a href="../images/Mangosteen.jpg" >Mangosteen</a>\r
 242                           </div>\r
 243                         </div>\r
 244                         <input id="gallery:::gallery-thumbs:::lightbox-cell:12:reorder-index" value="12" type="hidden"/>\r
 245                       </div>
 246       \r
 247                       <div rsf:id="scr=ignore" id="gallery:::gallery-thumbs:::lightbox-cell:13:">\r
 248                         <div>\r
 249                           <div class="fl-reorderer-image-inner-container">\r
 250                             <a href="../images/Banana.jpg">\r
 251                               <img id="fluid.img.last" src="../images/Banana.jpg" alt="Banana"/>\r
 252                             </a>\r
 253                           </div>\r
 254                           <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">\r
 255                             <a href="../images/Banana.jpg" >Banana</a>\r
 256                           </div>\r
 257                         </div>\r
 258                         <input id="gallery:::gallery-thumbs:::lightbox-cell:13:reorder-index" value="13" type="hidden"/>\r
 259                       </div>\r
 260                     </div>
 261
 262         <!--  Attach the javascript functionality to the markup by using createLightboxFromId() -->\r
 263         <script type="text/javascript"  rsf:id="init-script">\r
 264           fluid.reorderImages("[id='gallery:::gallery-thumbs:::']");\r
 265         </script>\r
 266       </div>
 267       \r
 268       <!-- Sample instruction message. In the RSF gallery, this is supplied by the server. -->\r
 269       <div class="fl-reorderer-instructions">\r
 270         <div class="fl-reorderer-screen-reader-instructions" tabindex="1">Image Reorderer: To use the keyboard:\r
 271                   Screen reader users turn off virtual cursor (insert + z).\r
 272                   Select an image using i, k, m or j.\r
 273                   Move an image using CTRL + i, k, m or j.\r
 274                   View an image by pressing Enter.</div>\r
 275         <div class="fl-reorderer-downarrow"></div>\r
 276         <div tabindex="-1">\r
 277           To use the keyboard:<br/>\r
 278             Select an image using i, k, m or j, or the arrow keys.<br/>\r
 279             View an image by pressing Enter.<br/>\r
 280             Move an image using CTRL + a direction key.
 281         </div>\r
 282       </div>\r
 283     </form>\r
 284   </body>\r
 285 </html>\r