Enables right-to-left books for different languages

engine/js/book.js

@@ -102,7 +102,7 @@ PBS.KIDS.storybook.book = function (GLOBAL, PBS, storybookContainerElement, conf
 		pageDraggedLeft = function (page) {
 
 			// If the page dragged is the right page or the cover
-			if (page === pages[rightPageIndex] || page === cover) {
+			if (page === pages[rightPageIndex] || (page === cover && bookConfig.direction !== "rtl")) {
 				that.nextPage();
 			} else {
 				if (curOrientation === "SINGLE-PAGE") {
@@ -116,15 +116,19 @@ PBS.KIDS.storybook.book = function (GLOBAL, PBS, storybookContainerElement, conf
 		// Handle drag on a page to the right
 		pageDraggedRight = function (page) {
 
-			// If the page dragged is the left page
+			// If the page dragged is the left page or the cover
 			if (page === pages[leftPageIndex]) {	
 				that.previousPage();
 			} else {
-				if (curOrientation === "SINGLE-PAGE") {
-					that.previousPage();
+				if (page === cover && bookConfig.direction === "rtl") {
+					that.gotoPage(0);
+				} else {
+					if (curOrientation === "SINGLE-PAGE") {
+						that.previousPage();
+					}
+					// If the right page is dragged right in two-page layout then do nothing
+					//     because it would do nothing on a real book
 				}
-				// If the right page is dragged right in two-page layout then do nothing
-				//     because it would do nothing on a real book
 			}
 		},
 
@@ -463,30 +467,61 @@ PBS.KIDS.storybook.book = function (GLOBAL, PBS, storybookContainerElement, conf
 				}
 			}
 
-			// If the current page is the cover
-			if (targetPageIndex === -1) {
-				// Turn off the previous page button
-				if (prevPageButtonElement) {
-					prevPageButtonElement.style.display = "none";
-				}
-				if (nextPageButtonElement) {
-					nextPageButtonElement.style.display = "block";	
-				}
-			} else {
-				// Hide page navigation buttons when at the beginning and end
-				if (curOrientation === "SINGLE-PAGE") {
+			// hide previous and next page buttons when unnecessary
+			if (bookConfig.direction === "rtl") {
+				// If the current page is the cover
+				if (targetPageIndex === -1) {
+					// Turn off the next page button
 					if (prevPageButtonElement) {
-						prevPageButtonElement.style.display = (targetPageIndex === -1) ? "none" : "block";
+						prevPageButtonElement.style.display = "block";
 					}
 					if (nextPageButtonElement) {
-						nextPageButtonElement.style.display = (targetPageIndex === pages.length - 1) ? "none" : "block";
+						nextPageButtonElement.style.display = "none";	
 					}
 				} else {
+					// Hide page navigation buttons when at the beginning and end
+					if (curOrientation === "SINGLE-PAGE") {
+						if (prevPageButtonElement) {
+							prevPageButtonElement.style.display = (targetPageIndex === 0) ? "none" : "block";
+						}
+						if (nextPageButtonElement) {
+							nextPageButtonElement.style.display = (targetPageIndex === - 1) ? "none" : "block";
+						}
+					} else {
+						if (prevPageButtonElement) {
+							prevPageButtonElement.style.display = (leftPageIndex === 0) ? "none" : "block";
+						}
+						if (nextPageButtonElement) {
+							nextPageButtonElement.style.display = (targetPageIndex === - 1) ? "none" : "block";
+						}
+					}
+				}
+			} else {
+				// If the current page is the cover
+				if (targetPageIndex === -1) {
+					// Turn off the previous page button
 					if (prevPageButtonElement) {
-						prevPageButtonElement.style.display = (leftPageIndex === -1) ? "none" : "block";
+						prevPageButtonElement.style.display = "none";
 					}
 					if (nextPageButtonElement) {
-						nextPageButtonElement.style.display = (rightPageIndex === pages.length - 1) ? "none" : "block";
+						nextPageButtonElement.style.display = "block";	
+					}
+				} else {
+					// Hide page navigation buttons when at the beginning and end
+					if (curOrientation === "SINGLE-PAGE") {
+						if (prevPageButtonElement) {
+							prevPageButtonElement.style.display = (targetPageIndex === -1) ? "none" : "block";
+						}
+						if (nextPageButtonElement) {
+							nextPageButtonElement.style.display = (targetPageIndex === pages.length - 1) ? "none" : "block";
+						}
+					} else {
+						if (prevPageButtonElement) {
+							prevPageButtonElement.style.display = (leftPageIndex === -1) ? "none" : "block";
+						}
+						if (nextPageButtonElement) {
+							nextPageButtonElement.style.display = (rightPageIndex === pages.length - 1) ? "none" : "block";
+						}
 					}
 				}
 			}
@@ -861,6 +896,8 @@ PBS.KIDS.storybook.book = function (GLOBAL, PBS, storybookContainerElement, conf
 
 			var i;
 
+
+
 			// Initially render all the pages so they are ready to be displayed
 			for (i = 0; i < pages.length; i += 1) {
 				cover.render();
@@ -1209,15 +1246,26 @@ PBS.KIDS.storybook.book = function (GLOBAL, PBS, storybookContainerElement, conf
 					audioPlayer = sb.audioPlayer(GLOBAL, PBS, config.audio.path + config.audio.name);
 				}
 
+				// book defaults to left-to-right
+				if (typeof bookConfig.direction === "undefined" || !bookConfig.direction) {
+					bookConfig.direction = "ltr";
+				}
+
+				if (bookConfig.direction === "rtl") {
+					config.pages.reverse();
+
+					if (typeof bookConfig.startOnPage === "undefined" || isNaN(bookConfig.startOnPage) || bookConfig.startOnPage <= 0) {
+						bookConfig.startOnPage = 0;
+					} else {
+						bookConfig.startOnPage = config.pages.length - bookConfig.startOnPage;
+					}
+				}
+
 				// Create cover
 				cover = sb.page(GLOBAL, PBS, config.cover, 0, {
 					bookConfig: bookConfig,
 					audioPlayer: audioPlayer
 				});
-
-				// Add cover listeners
-				cover.addEventListener("DRAG_LEFT", pageDraggedLeft);
-				cover.addEventListener("DRAG_RIGHT", pageDraggedRight);
 
 				// Create the storybook pages
 				for (i = 0; i < config.pages.length; i += 1) {
@@ -1237,6 +1285,10 @@ PBS.KIDS.storybook.book = function (GLOBAL, PBS, storybookContainerElement, conf
 					});
 				}
 
+				// Add cover listeners
+				cover.addEventListener("DRAG_LEFT", pageDraggedLeft);
+				cover.addEventListener("DRAG_RIGHT", pageDraggedRight);
+
 				// Add page listeners
 				for (i = 0; i < pages.length; i += 1) {
 					pages[i].addEventListener("DRAG_LEFT", pageDraggedLeft);
@@ -1315,6 +1367,11 @@ PBS.KIDS.storybook.book = function (GLOBAL, PBS, storybookContainerElement, conf
 		// If the target page is valid
 		if (targetPageIndex < pages.length) {
 			navigateToPageIndex(targetPageIndex);
+		} else {
+			if (bookConfig.direction === "rtl") {
+				targetPageIndex = -1;
+				navigateToPageIndex(targetPageIndex);
+			}
 		}
 	};
 
@@ -1335,6 +1392,19 @@ PBS.KIDS.storybook.book = function (GLOBAL, PBS, storybookContainerElement, conf
 				targetPageIndex = curPageIndex - 1;
 			}
 		}
+
+		if (bookConfig.direction === "rtl") {
+			if (targetPageIndex <= -2) {
+				// from cover (-1) to first RTL page (last in pages array)
+				targetPageIndex = pages.length - 1;
+			} else {
+				if (targetPageIndex === -1) {
+					// reject turning page before last RTL page
+					targetPageIndex  = curPageIndex;
+					return;
+				}
+			}
+		}
 
 		// If target page is valid
 		if (targetPageIndex >= -1) {

example_rtl/config/config-book.js

@@ -0,0 +1,74 @@
+//  ------------------------------------------------------------------
+//  book.js
+//
+//  Copyright 2012 PBS KIDS Interactive. All Rights Reserved.
+
+PBS.KIDS.storybook.config = {
+	background: {
+		color: "#ababab",
+		url: "images/circles-background.png"
+	},
+	audio: {
+		enabled: false
+	},
+	book: {
+		direction: "rtl",
+		font: "Georgia",
+		startOnPage: 0,
+		pageWidth: 768,
+		pageHeight: 1024,
+		previousPageButton: {
+			url: "images/prev-page-button.png",
+			x: 1,
+			y: 50,
+			width: "50px",
+			height: "50px"
+		},
+		nextPageButton: {
+			url: "images/next-page-button.png",
+			horizontalAlign: "RIGHT",
+			x: 1,
+			y: 50,
+			width: "50px",
+			height: "50px"
+		},
+		pageBackground: {
+			color: "#fefefe"
+		},
+		oddPageBackground: {
+			color: "#fdfdfd"
+		},
+		evenPageBackground: {
+			color: "#f9f9f9"
+		},
+		pageTurnDuration: 500,
+		pageSlideDuration: 200
+	},
+	cover: {
+		background: {
+			url: "images/cover.jpg"
+		},
+		content: [
+			{
+				type: "TextArea",
+				x: 0,
+				y: 25,
+				align: "center",
+				color: "#222222",
+				size: 48,
+				font: "Droid Serif",
+				text: "Example Storybook"
+			},
+			{
+				type: "Sprite",
+				x: 25,
+				y: 80,
+				numFrames: 10,
+				frameDelay: 10,
+				loop: true,
+				url: "images/ball-roll.png"
+			}
+		]
+	},
+	pages: []
+};

example_rtl/config/config-page-01.js

@@ -0,0 +1,30 @@
+//  ------------------------------------------------------------------
+//  
+//
+//  Copyright 2012 PBS KIDS Interactive. All Rights Reserved.
+
+PBS.KIDS.storybook.config.pages.push({
+	content: [
+		{
+			type: "TextArea",
+			x: 10,
+			y: 30,
+			width: 80,
+			align: "left",
+			color: "#222222",
+			size: 28,
+			font: "Droid Serif",
+			text: "<font='Reenie Beanie'><size=6>T</size></font>his storybook will give examples of the functionality of the Storybook Engine. See the configuration files in the config folder to see how the examples were implemented."
+		},
+		{
+			type: "TextArea",
+			x: 0,
+			y: 95,
+			align: "center",
+			color: "#222222",
+			size: 18,
+			font: "Droid Serif",
+			text: "Page 1"
+		}
+	]
+});

example_rtl/config/config-page-02.js

@@ -0,0 +1,86 @@
+//  ------------------------------------------------------------------
+//  
+//
+//  Copyright 2012 PBS KIDS Interactive. All Rights Reserved.
+
+PBS.KIDS.storybook.config.pages.push({
+	content: [
+		{
+			type: "TextArea",
+			x: 10,
+			y: 15,
+			width: 80,
+			align: "center",
+			color: "#222222",
+			size: 24,
+			font: "Droid Serif",
+			text: "This is an example Text Area."
+		},
+		{
+			type: "TextArea",
+			x: 10,
+			y: 25,
+			width: 80,
+			align: "left",
+			color: "#222222",
+			size: 24,
+			font: "Droid Serif",
+			text: "The x and y positions of Text Areas can be specified."
+		},
+		{
+			type: "TextArea",
+			x: 10,
+			y: 35,
+			width: 80,
+			align: "left",
+			color: "#222222",
+			size: 24,
+			font: "Droid Serif",
+			text: "Text Areas can be aligned left..."
+		},
+		{
+			type: "TextArea",
+			x: 10,
+			y: 40,
+			width: 80,
+			align: "center",
+			color: "#222222",
+			size: 24,
+			font: "Droid Serif",
+			text: "center"
+		},
+		{
+			type: "TextArea",
+			x: 10,
+			y: 40,
+			width: 80,
+			align: "right",
+			color: "#222222",
+			size: 24,
+			font: "Droid Serif",
+			text: "...and right."
+		},
+		{
+			type: "TextArea",
+			x: 45,
+			y: 55,
+			width: 10,
+			align: "center",
+			color: "#222222",
+			size: 24,
+			font: "Droid Serif",
+			text: "The width of a Text Area can also be set."
+		},
+		{
+			type: "TextArea",
+			x: 0,
+			y: 95,
+			width: 100,
+			align: "center",
+			color: "#222222",
+			size: 18,
+			font: "Droid Serif",
+			text: "Page 2"
+		}
+	]
+});