emacs/nxhtml/tests/in/bug-373106-flipbook.html

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE html PUBLIC
   3     "-//W3C//DTD XHTML 1.0 Strict//EN"
   4     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   5 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   6   <head>
   7     <title>Flipbook (draft)</title>
   8     <style type="text/css">
   9       body {
  10           background-color: black;
  11           color: white;
  12       }
  13
  14       .ui-effects-transfer {
  15           border: 2px dotted gray;
  16       }
  17     </style>
  18     <script type="text/javascript" src="jquery.js"></script>
  19     <script type="text/javascript" src="jquery-ui.js"></script>
  20     <script type="text/javascript" src="jquery.event.special.gesture.js"></script>
  21     <script type="text/javascript" src="jquery.gestureable.js"></script>
  22     <script type="text/javascript">
  23       /* Code to do some fancy book-like effects
  24        */
  25
  26        /* a closure-based class */
  27        var ImageManager = function (images) {
  28            var self = this;
  29            var currentPage = 0;
  30
  31            self.getCurrentPages = function () {
  32                return [images[currentPage],
  33                        images[currentPage+1]];
  34            };
  35
  36            self.turnNext = function () {
  37                currentPage += 2;
  38                return self.getCurrentPages();
  39            };
  40
  41            self.turnPrevious = function () {
  42                currentPage -= 2;
  43                return self.getCurrentPages();
  44            };
  45        };
  46
  47        function style_element(element) {
  48           element.css('background-color', 'black');
  49           element.css('width', '900px');
  50           element.css('height', '650px');
  51           element.css('border', '2px dashed white');
  52       }
  53
  54       function small_gesture(event) {
  55           /* called in mousedown of small images */
  56           var container = $(event.target).closest('div');
  57           var manager = container.data('manager');
  58           var large = $(event.target).
  59               attr('src').
  60               replace(/small/, 'large');
  61
  62           switch (event.gesture) {
  63           case 'U':
  64           case 'D':
  65               container.data('left').hide();
  66               container.data('right').hide();
  67               container.data('spacer').hide();
  68               container.data('zoomed').attr('src', large).show('clip');
  69               break;
  70           case 'L':
  71               var images = manager.turnPrevious();
  72               container.data('left').attr('src', images[0] + '_small.jpg');
  73               container.data('right').attr('src', images[1] + '_small.jpg');
  74               break;
  75           case 'R':
  76               var images = manager.turnNext();
  77               container.data('left').attr('src', images[0] + '_small.jpg');
  78               container.data('right').attr('src', images[1] + '_small.jpg');
  79               break;
  80           }
  81       }
  82
  83       function large_gesture(event) {
  84           var container = $(event.target).closest('div');
  85           switch (event.gesture) {
  86           case 'U':
  87           case 'D':
  88               $(event.target).hide();
  89               container.data('spacer').show();
  90               container.data('left').show();
  91               container.data('right').show();
  92           }
  93       }
  94
  95       function disable_scroll(event) {
  96           /* Simply disables the dragging of elements */
  97           return false;
  98       }
  99
 100       function flipbook(element, images) {
 101           var manager = new ImageManager(images);
 102           element.data('manager', manager);
 103
 104           // apply the style
 105           style_element(element);
 106
 107           // create a spacer div and attach it
 108           var spacer = $('<div class="spacer"></div>');
 109           spacer.css('height', '162px');
 110           element.data('spacer', spacer);
 111           element.append(spacer);
 112
 113           var zoomed = $('<img />');
 114           zoomed.gestureable();
 115           zoomed.mouseup(large_gesture).
 116           mousedown(disable_scroll).
 117           hide();
 118
 119           element.data('zoomed', zoomed);
 120           element.append(zoomed);
 121
 122           // create the images
 123           var currentImages = manager.getCurrentPages();
 124           var left = $('<img src="' + currentImages[0] + '_small.jpg" />');
 125           var right = $('<img src="' + currentImages[1] + '_small.jpg" />');
 126           element.data('left', left);
 127           element.data('right', right);
 128
 129           $([left, right]).each(function (key, value) {
 130               // enable gestures
 131               value.gestureable();
 132               value.mouseup(small_gesture);
 133               value.mousedown(disable_scroll);
 134               // add to the display
 135               element.append(value);
 136           });
 137       }
 138
 139       $(document).ready(function () {
 140           flipbook($('#flipbook'),
 141                    ['image_01', 'image_02', 'image_03', 'image_04',
 142                     'image_05', 'image_06', 'image_07', 'image_08',
 143                     'image_09', 'image_10', 'image_11', 'image_12',
 144                     'image_13', 'image_14', 'image_15']);
 145         });
 146     </script>
 147   </head>
 148   <body>
 149     <div id="flipbook"></div>
 150     <p>Usage: gesture left/right to change images, up/down to zoom in/out</p>
 151     <p>The flipbook uses a number of libs:</p>
 152     <p>
 153       <ul>
 154         <li>jQuery</li>
 155         <li>jQuery UI</li>
 156         <li>jQuery Special Event Gestures</li>
 157       </ul>
 158     </p>
 159   </body>
 160 </html>