diff options
Diffstat (limited to 'emacs.d/nxhtml/tests/in/bug-373106-flipbook.html')
| -rw-r--r-- | emacs.d/nxhtml/tests/in/bug-373106-flipbook.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/emacs.d/nxhtml/tests/in/bug-373106-flipbook.html b/emacs.d/nxhtml/tests/in/bug-373106-flipbook.html new file mode 100644 index 0000000..658d391 --- /dev/null +++ b/emacs.d/nxhtml/tests/in/bug-373106-flipbook.html @@ -0,0 +1,160 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC + "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> + <head> + <title>Flipbook (draft)</title> + <style type="text/css"> + body { + background-color: black; + color: white; + } + + .ui-effects-transfer { + border: 2px dotted gray; + } + </style> + <script type="text/javascript" src="jquery.js"></script> + <script type="text/javascript" src="jquery-ui.js"></script> + <script type="text/javascript" src="jquery.event.special.gesture.js"></script> + <script type="text/javascript" src="jquery.gestureable.js"></script> + <script type="text/javascript"> + /* Code to do some fancy book-like effects + */ + + /* a closure-based class */ + var ImageManager = function (images) { + var self = this; + var currentPage = 0; + + self.getCurrentPages = function () { + return [images[currentPage], + images[currentPage+1]]; + }; + + self.turnNext = function () { + currentPage += 2; + return self.getCurrentPages(); + }; + + self.turnPrevious = function () { + currentPage -= 2; + return self.getCurrentPages(); + }; + }; + + function style_element(element) { + element.css('background-color', 'black'); + element.css('width', '900px'); + element.css('height', '650px'); + element.css('border', '2px dashed white'); + } + + function small_gesture(event) { + /* called in mousedown of small images */ + var container = $(event.target).closest('div'); + var manager = container.data('manager'); + var large = $(event.target). + attr('src'). + replace(/small/, 'large'); + + switch (event.gesture) { + case 'U': + case 'D': + container.data('left').hide(); + container.data('right').hide(); + container.data('spacer').hide(); + container.data('zoomed').attr('src', large).show('clip'); + break; + case 'L': + var images = manager.turnPrevious(); + container.data('left').attr('src', images[0] + '_small.jpg'); + container.data('right').attr('src', images[1] + '_small.jpg'); + break; + case 'R': + var images = manager.turnNext(); + container.data('left').attr('src', images[0] + '_small.jpg'); + container.data('right').attr('src', images[1] + '_small.jpg'); + break; + } + } + + function large_gesture(event) { + var container = $(event.target).closest('div'); + switch (event.gesture) { + case 'U': + case 'D': + $(event.target).hide(); + container.data('spacer').show(); + container.data('left').show(); + container.data('right').show(); + } + } + + function disable_scroll(event) { + /* Simply disables the dragging of elements */ + return false; + } + + function flipbook(element, images) { + var manager = new ImageManager(images); + element.data('manager', manager); + + // apply the style + style_element(element); + + // create a spacer div and attach it + var spacer = $('<div class="spacer"></div>'); + spacer.css('height', '162px'); + element.data('spacer', spacer); + element.append(spacer); + + var zoomed = $('<img />'); + zoomed.gestureable(); + zoomed.mouseup(large_gesture). + mousedown(disable_scroll). + hide(); + + element.data('zoomed', zoomed); + element.append(zoomed); + + // create the images + var currentImages = manager.getCurrentPages(); + var left = $('<img src="' + currentImages[0] + '_small.jpg" />'); + var right = $('<img src="' + currentImages[1] + '_small.jpg" />'); + element.data('left', left); + element.data('right', right); + + $([left, right]).each(function (key, value) { + // enable gestures + value.gestureable(); + value.mouseup(small_gesture); + value.mousedown(disable_scroll); + // add to the display + element.append(value); + }); + } + + $(document).ready(function () { + flipbook($('#flipbook'), + ['image_01', 'image_02', 'image_03', 'image_04', + 'image_05', 'image_06', 'image_07', 'image_08', + 'image_09', 'image_10', 'image_11', 'image_12', + 'image_13', 'image_14', 'image_15']); + }); + </script> + </head> + <body> + <div id="flipbook"></div> + <p>Usage: gesture left/right to change images, up/down to zoom in/out</p> + <p>The flipbook uses a number of libs:</p> + <p> + <ul> + <li>jQuery</li> + <li>jQuery UI</li> + <li>jQuery Special Event Gestures</li> + </ul> + </p> + </body> +</html> |