wip #3764 @4

diff --git a/_index.html b/_index.html
index e684d753c579ca1a8c62e4076210f30c11b72e26..8058db41b423fc17829ff57e60194dcb2d7cbd09 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -46,7 +46,7 @@
 <div id="seoContents" aria-hidden="true">
     <!-- $seoContent -->
 </div>
-<div id="main">
+<div id="main" aria-hidden="false">
     <div id="background" aria-hidden="true">
         <div id="center-shadow">
             <div id="shadow">
@@ -102,7 +102,7 @@
 </div>
 <div id="searchHints"></div>
 <div id="viewOverlay" aria-hidden="true"></div>
-<div id="view"></div>
+<div id="view" aria-hidden="true"></div>
 <div id="innerView" aria-hidden="true"></div>
 <div id="pagesContents" aria-hidden="true"><!-- $pagesContents --></div>
 <div id="op" aria-hidden="true"></div>

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.remarkable.js b/js/libs/fluidbook/cart/fluidbook.cart.remarkable.js
index 087906c2b3c2132031f48ae465b6656743dc9eab..99ef7c98fb7ed413a33711fb84beeedb77fd4f06 100644 (file)
--- a/js/libs/fluidbook/cart/fluidbook.cart.remarkable.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.remarkable.js
@@ -273,11 +273,11 @@ FluidbookCartRemarkable.prototype = {
     },
 
     _endMenu: function (title, content, callback) {
-        var view = '<div class="caption">' + this.fluidbook.menu.closeButton() + '<h2>' + title + '</h2></div>';
+        var view = this.fluidbook.menu.getCaption(title);
         view += '<div class="content">';
         view += "" + content;
         view += '</div>';
-        $("#view").append('<div class="mview" data-menu="cart">' + view + '</div>');
+        this.fluidbook.menu.viewWrap(view,'cart');
         callback();
     },
 

diff --git a/js/libs/fluidbook/fluidbook.articles.js b/js/libs/fluidbook/fluidbook.articles.js
index 3563e78fb9d65318b92997ceb2b2ec9258958b35..93c018860a82af846b482fb75a881bec467cf669 100644 (file)
--- a/js/libs/fluidbook/fluidbook.articles.js
+++ b/js/libs/fluidbook/fluidbook.articles.js
@@ -29,7 +29,7 @@ FluidbookArticles.prototype = {
 
         $(document).on('click touchend', '.mview[data-menu="article"] .articlesShare', function () {
             $(".mview").remove();
-            $this.fluidbook.menu.openView('share', 'article:'+$(this).attr('data-id'), 'article');
+            $this.fluidbook.menu.openView('share', 'article:' + $(this).attr('data-id'), 'article');
             return false;
         });
     },
@@ -42,7 +42,7 @@ FluidbookArticles.prototype = {
 
         var footer = '<div class="footer fixed"><a href="#/article/' + article.prev + '" class="article-prev">' + getSpriteIcon('interface-previous-simple') + ' ' + this.fluidbook.l10n.__('previous article') + '</a><a href="#/article/' + article.next + '" class="article-next">' + this.fluidbook.l10n.__('next article') + ' ' + getSpriteIcon('interface-next-simple') + '</a></div>';
         var view = '<div class="content">' + article.contents + '</div>' + footer;
-        $("#view").html('<div class="mview" data-menu="article">' + this.fluidbook.menu.closeButton() + view + '</div>');
+        this.fluidbook.menu.viewWrap(this.fluidbook.menu.closeButton() + view, 'article');
 
         this.fluidbook.silentChangePage(article.page);
         this.resize();

diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js
index 5be748e7da414e49a9a37b2c0786387e759688b7..52ae0899ebb9c9414bf1e60d190f398094fdd9c9 100644 (file)
--- a/js/libs/fluidbook/fluidbook.bookmarks.js
+++ b/js/libs/fluidbook/fluidbook.bookmarks.js
@@ -425,8 +425,8 @@ FluidbookBookmarks.prototype = {
         if (title === '') {
             title = this.fluidbook.l10n.__('bookmarks');
         }
-        var index = '<div class="bookmarkssub"><div class="caption">' + this.fluidbook.menu.closeButton() + '<h2>' + title + '</h2>';
-        index += '</div>';
+        var index = '<div class="bookmarkssub">';
+        index+=this.fluidbook.menu.getCaption(title);
         index += c;
         index += '</div>';
         return index;

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index b4e0fc3dfbff3748d3bd2145ac817fee42cb2acc..99d3585dec9e1e428dc2129cc60286f4534aa933 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -126,6 +126,9 @@ FluidbookMenu.prototype = {
         this.fluidbook.tooltip.hideTooltip();
         var mview = $('#view .mview:last');
 
+        $("#view").attr('aria-hidden', 'false');
+        $("#main").attr('aria-hidden', 'true');
+
         if (!Modernizr.ftouch) {
             $(mview).find('.content:not(.noscroll)').perfectScrollbar();
         } else {
@@ -153,10 +156,44 @@ FluidbookMenu.prototype = {
             resize();
         }, 420);
     },
+
+    viewWrap: function (content, menu, attributes, cls) {
+        if (attributes === undefined) {
+            attributes = '';
+        }
+        if (cls === undefined) {
+            cls = '';
+        }
+        var res = '<div class="mview ' + cls + '" data-menu="' + menu + '" role="dialog" aria-labelledby="mview-dialog-title"' + attributes + '>' + content + '</div>';
+        $("#view").append(res);
+    },
+
+    getCaption:function(caption, close, cls) {
+        if (cls === undefined) {
+            cls = '';
+        }
+        if (close === undefined) {
+            close = true;
+        }
+        if (caption === undefined) {
+            caption = '';
+        }
+
+        var res = '<div class="caption ' + cls + '">';
+        if (close) {
+            res += this.closeButton();
+        }
+        if (caption !== '') {
+            res += '<h2 id="mview-dialog-title">' + caption + '</h2>';
+        }
+        res += '</div>';
+        return res;
+    },
+
     openMultimedia: function (multimedia, callback) {
         var a = $('a[href="#/multimedia/' + multimedia + '"]');
         var markup = decodeURIComponent($(a).attr('data-multimedia'));
-        var view = '<div class="caption">' + this.closeButton() + '</div>';
+        var view = this.getCaption();
         var links = '';
         var animateLinks = false;
         var uid = $(a).closest('[data-id]').data('id');
@@ -169,7 +206,8 @@ FluidbookMenu.prototype = {
         view += '</div></div></div>';
 
         var read = multimedia.indexOf('r_') == 0 ? ' data-readmode="1"' : '';
-        $("#view").append('<div class="mview" dir="ltr" data-menu="multimedia"' + read + '>' + view + '</div>');
+        read += ' dir="ltr"';
+        this.viewWrap(view, multimedia, read)
 
         if (animateLinks) {
             this.fluidbook.links.doAnimateLinks($("#view"), 500);
@@ -188,7 +226,7 @@ FluidbookMenu.prototype = {
             a = this.fluidbook.links.getLinkByHref(href);
         }
         var markup = decodeURIComponent($(a).attr('data-iframe'));
-        var view = '<div class="caption">' + this.closeButton() + '</div>';
+        var view = this.getCaption();
         view += '<div class="content noscroll"><div class="iframeHolder">';
         view += markup;
         view += '</div></div>';
@@ -198,7 +236,7 @@ FluidbookMenu.prototype = {
             maxWidth = ' data-max-width="' + $(a).data('max-width') + '"';
         }
 
-        $("#view").append('<div class="mview" dir="ltr" data-menu="iframe"' + maxWidth + '>' + view + '</div>');
+        this.viewWrap(view, 'iframe', maxWidth + ' dir="ltr"');
         if (callback != undefined) {
             callback();
         }
@@ -220,11 +258,12 @@ FluidbookMenu.prototype = {
     openVideo: function (video, callback) {
         var a = $('a[href="#/video/' + video + '"]');
         var markup = decodeURIComponent($(a).attr('data-video'));
-        var view = '<div class="caption">' + this.closeButton() + '</div>';
+        var view = this.getCaption();
         view += '<div class="content">';
         view += markup;
         view += '</div>';
-        $("#view").append('<div class="mview" data-menu="video">' + view + '</div>');
+        this.viewWrap(view, 'video');
+
         this.fluidbook.stats.track(11);
         this.fluidbook.initVideos();
         var $this = this;
@@ -243,11 +282,11 @@ FluidbookMenu.prototype = {
     openSlideshow: function (slideshow, callback) {
         var a = $('a[href="#/slideshow/' + slideshow + '"]');
         var markup = decodeURIComponent($(a).attr('data-slideshow'));
-        var view = '<div class="caption">' + this.closeButton() + '</div>';
+        var view = this.getCaption();
         view += '<div class="content">';
         view += markup;
         view += '</div>';
-        $("#view").append('<div class="mview" data-menu="slideshow">' + view + '</div>');
+        this.viewWrap(view, 'slideshow');
 
         // TODO: check which type should be passed to fluidbook.stats.track() ???
         // this.fluidbook.stats.track(11);
@@ -279,11 +318,11 @@ FluidbookMenu.prototype = {
     openAudio: function (audio, callback) {
         var a = $('a[href="#/audio/' + audio + '"]');
         var markup = decodeURIComponent($(a).attr('data-audio'));
-        var view = '<div class="caption">' + this.closeButton() + '</div>';
+        var view = this.getCaption();
         view += '<div class="content">';
         view += markup;
         view += '</div>';
-        $("#view").append('<div class="mview" data-menu="audio">' + view + '</div>');
+        this.viewWrap(view, 'audio');
         this.fluidbook.stats.track(11);
         var $this = this;
         var times = [250, 500, 750, 1000, 1250];
@@ -299,7 +338,7 @@ FluidbookMenu.prototype = {
     ,
     openWebVideo: function (service, video, callback) {
 
-        var view = '<div class="caption">' + this.closeButton() + '</div>';
+        var view = this.getCaption();
         view += '<div class="content">';
 
         if (service == 'youtube') {
@@ -312,7 +351,7 @@ FluidbookMenu.prototype = {
             view += '<iframe class="webvideo" type="text/html" src="./video/brightcove.html?pid=' + this.fluidbook.settings.brightcovePlayerId + '&pk=' + encodeURIComponent(this.fluidbook.settings.brightcovePlayerSecret) + '&vid=' + video + '" width="100%" frameborder="0"></iframe>'
         }
         view += '</div>';
-        $("#view").append('<div class="mview" data-menu="webvideo">' + view + '</div>');
+        this.viewWrap(view, 'webvideo');
         this.fluidbook.stats.track(11);
         if (callback != undefined) {
             callback();
@@ -320,7 +359,7 @@ FluidbookMenu.prototype = {
     }
     ,
     openLocales: function (p1, p2, callback) {
-        var view = '<div class="caption">' + this.closeButton() + '<h2>Select language</h2></div>';
+        var view = this.getCaption('Select language');
         view += '<div class="content">';
         view += '<ul class="chapters localesList">';
         var $this = this;
@@ -346,7 +385,7 @@ FluidbookMenu.prototype = {
         });
         view += '</ul>';
         view += '</div>';
-        $("#view").append('<div class="mview" data-menu="locales">' + view + '</div>');
+        this.viewWrap(view, 'locales');
         if (callback != undefined) {
             callback();
         }
@@ -363,7 +402,7 @@ FluidbookMenu.prototype = {
         // __("you don't have any bookmark. to add a bookmark, please click on the icon in the page corner")
         //var message = this.fluidbook.l10n.translate("you don't have any bookmark. to add a bookmark, please click on the icon in the page corner")
         var message = __("you don't have any bookmark. to add a bookmark, please click on the icon in the page corner");
-        var view = '<div><div class="caption">' + this.fluidbook.menu.closeButton() + '<h2></h2>';
+        var view = '<div>' + this.getCaption();
         view += '</div>';
         view += '<div class="content">';
         view += '<p>' + message + '</p>';
@@ -379,8 +418,7 @@ FluidbookMenu.prototype = {
         view += '';
         view += '</div>';
         view += '</div>';
-        $("#view").append('<div class="mview" data-menu="bookmarks-help">' + view + '</div>');
-
+        this.viewWrap(view, 'bookmarks-help');
 
         if (callback != undefined) {
             callback();
@@ -411,7 +449,8 @@ FluidbookMenu.prototype = {
         }
 
         var view = this.fluidbook.bookmarks.getView(title, downloadLabel);
-        $("#view").append('<div class="mview" data-menu="bookmarks">' + view + '</div>');
+        this.viewWrap(view, 'bookmarks');
+
         if (callback != undefined) {
             callback();
         }
@@ -437,12 +476,7 @@ FluidbookMenu.prototype = {
         if (this.fluidbook.settings.chaptersCaptionDisplay === false) {
             c += ' h0';
         }
-        var view = '<div class="caption' + c + '">' + this.closeButton();
-        if (this.fluidbook.settings.chaptersCaptionDisplay !== false) {
-            view += '<h2>' + v.title + '</h2>';
-        }
-
-        view += '</div>';
+        var view = this.getCaption(this.fluidbook.settings.chaptersCaptionDisplay ? v.title : '', true, c);
         view += '<div class="content">';
         view += v.view;
         view += '</div>';
@@ -452,7 +486,8 @@ FluidbookMenu.prototype = {
             color = ' c_' + v.color;
         }
 
-        $("#view").append('<div id="' + menuId + '" class="mview' + color + '" data-menu="chapters">' + view + '</div>');
+        this.viewWrap(view, 'chapters', 'id="' + menuId + '"', color);
+
         this.fluidbook.chapters.removeItemsAfterMaxPage();
         if (callback != undefined) {
             callback();
@@ -460,13 +495,13 @@ FluidbookMenu.prototype = {
         this.fluidbook.stats.track(14);
     },
     openExternalChapters: function (callback) {
-        var view = '<div class="caption">' + this.closeButton() + '</div>';
+        var view = this.getCaption();
         view += '<div class="content"><div class="multimediaHolder"><div class="multimediaScale">';
         view += '<iframe data-width="' + this.fluidbook.settings.externalChaptersSize.width + '" data-height="' + this.fluidbook.settings.externalChaptersSize.height + '"  width="' + this.fluidbook.settings.externalChaptersSize.width + '" height="' + this.fluidbook.settings.externalChaptersSize.height + '" src="data/chapters/index.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>';
         view += '</div></div></div>';
 
         var read = ' data-readmode="1"';
-        $("#view").append('<div class="mview" dir="ltr" data-menu="externalchapters"' + read + '>' + view + '</div>');
+        this.viewWrap(view, 'externalchapters', read + ' dir="ltr"');
         if (callback != undefined) {
             callback();
         }
@@ -476,9 +511,9 @@ FluidbookMenu.prototype = {
         this.index.openIndex(title, group, closeAll, callback);
     },
     openArchives: function (title, callback) {
-        var archives = '<div class="caption">' + this.closeButton() + '<h2>' + title + '</h2></div>';
+        var archives = this.getCaption(title);
         archives += '<div class="image" id="archivesview"><img src="data/images/' + this.fluidbook.settings.externalArchives + '" /><div class="links">' + this.fluidbook.settings.links.archives + '</div></div>';
-        $("#view").append('<div class="mview archives" data-menu="archives">' + archives + '</div>');
+        this.viewWrap(archives, 'archives', '', 'archives');
         if (callback != undefined) {
             callback();
         }
@@ -491,20 +526,20 @@ FluidbookMenu.prototype = {
             style = styleMatches[1].replace(/\s/g, '');
         }
         text = text.replace(/\<style\>([^\<]*)<\/style>/g, '');
-        var t = '<div class="caption">' + this.closeButton() + '<h2></h2></div>';
+        var t = this.getCaption();
         t += '<div class="content"><div class="text" style="' + style + '">' + text + '</div></div>';
-        $("#view").append('<div class="mview" data-menu="text">' + t + '</div>');
+        this.viewWrap(t, 'text');
         if (callback != undefined) {
             callback();
         }
     },
 
     openPrint: function (callback) {
-        var printDialogue = '<div class="caption">' + this.closeButton() + '<h2>' + __('print') + '</h2></div>';
 
+        var printDialogue = this.getCaption(__('print'));
         printDialogue += this.fluidbook.printing.getView();
 
-        $("#view").append('<div class="mview" data-menu="print">' + printDialogue + '</div>');
+        this.viewWrap(printDialogue, 'print');
 
         // Auto select first option (the options are dynamic so we can't do it until now)
         $('.print-dialogue .print-option:first-of-type input[type="radio"]').prop('checked', true);
@@ -515,11 +550,10 @@ FluidbookMenu.prototype = {
     },
 
     openDownload: function (callback) {
-        var downloadDialogue = '<div class="caption">' + this.closeButton() + '<h2>' + __('download') + '</h2></div>';
-
+        var downloadDialogue = this.getCaption(__('download'));
         downloadDialogue += this.fluidbook.printing.getView('download'); // Reuse print dialogue since they're almost the same
 
-        $("#view").append('<div class="mview" data-menu="download">' + downloadDialogue + '</div>');
+        this.viewWrap(downloadDialogue, 'download');
 
         // Auto select first option (the options are dynamic so we can't do it until now)
         // Todo: maybe make this different for downloads? Auto select full brochure option?
@@ -575,7 +609,8 @@ FluidbookMenu.prototype = {
         }
 
         if (all) {
-            $("#main").show();
+            $("#view").attr('aria-hidden', 'true');
+            $("#main").attr('aria-hidden', 'false').show();
             $('body').removeClass('view');
         }
         resize();

diff --git a/js/libs/fluidbook/fluidbook.share.js b/js/libs/fluidbook/fluidbook.share.js
index 72adac6fbec2f8c0aafc2b540c3d5abae2f92a1d..4be793ae9dba12d0189cbf051642ee9c279c8ae7 100644 (file)
--- a/js/libs/fluidbook/fluidbook.share.js
+++ b/js/libs/fluidbook/fluidbook.share.js
@@ -73,7 +73,7 @@ FluidbookShare.prototype = {
         if (url == undefined || url == 'undefined' || url == null || url == false) {
             url = '';
         }
-        url=url.toString();
+        url = url.toString();
         if (url == '') {
             var res = false;
             if (this.fluidbook.support.offline || this.fluidbook.settings.phonegap) {
@@ -242,12 +242,12 @@ FluidbookShare.prototype = {
         }
 
 
-        view = '<div class="caption">' + this.fluidbook.menu.closeButton() + '<h2>' + this.fluidbook.l10n.__('share') + '</h2></div>';
+        view = this.fluidbook.menu.getCaption(this.fluidbook.l10n.__('share'));
         view += '<div class="content">';
         view += this.getShareLinks(false, url, context);
         view += '</div>';
 
-        $("#view").append('<div class="mview" data-menu="share">' + view + '</div>');
+        this.fluidbook.menu.viewWrap(view,'share');
         if (callback != undefined) {
             callback();
         }

diff --git a/js/libs/fluidbook/forms/fluidbook.form.avery.js b/js/libs/fluidbook/forms/fluidbook.form.avery.js
index 52c2d9eaf874de5e33429a31669bce0a55344e7d..2650c3d197b9e378cb09f729f8de3cc9b3d52c54 100644 (file)
--- a/js/libs/fluidbook/forms/fluidbook.form.avery.js
+++ b/js/libs/fluidbook/forms/fluidbook.form.avery.js
@@ -83,7 +83,7 @@ FluidbookAveryForm.prototype = {
 
     openForm: function (p1, p2, callback) {
         var $this = this;
-        var view = '<div class="caption">' + $this.fluidbook.menu.closeButton() + '<h2>' + $this.locale.title + '</h2></div>';
+        var view = this.fluidbook.menu.getCaption($this.locale.title);
         view += '<div class="content">';
         view += '<form class="avery-form" action="https://workshop.fluidbook.com/services/subscribe" method="post">';
         view += '<div><input type="hidden" value="avery" name="form"><input type="hidden" value="' + this.fluidbook.l10n.currentLang + '" name="locale">';
@@ -129,7 +129,7 @@ FluidbookAveryForm.prototype = {
         view += '</form>';
         view += '</div>';
 
-        $("#view").append('<div class="mview" data-form="avery" data-menu="form" data-maxwidth="650">' + view + '</div>');
+        this.fluidbook.menu.viewWrap(view,'form','data-form="avery" data-maxwidth="650"');
 
         var options = ['<option value=""> -- ' + this.locale.choose_country + ' -- </option>'];
         $.each(this.fluidbook.settings.countries, function (code, name) {

diff --git a/js/libs/fluidbook/forms/fluidbook.form.bourbon.js b/js/libs/fluidbook/forms/fluidbook.form.bourbon.js
index ad81b72024b24dab4ec83fc7b22672105a9028f9..30f6cf5d2642c44e079c05abf4e54c3c1efd10ca 100644 (file)
--- a/js/libs/fluidbook/forms/fluidbook.form.bourbon.js
+++ b/js/libs/fluidbook/forms/fluidbook.form.bourbon.js
@@ -21,7 +21,7 @@ FluidbookBourbonForm.prototype = {
     },
 
     openSuggest: function (p1, p2, callback) {
-        var view = '<div class="caption">' + this.closeButton() + '<h2>Suggest a modification</h2></div>';
+        var view = this.fluidbook.menu.getCaption('Suggest a modification');
         view += '<div class="content">';
         view += '<form class="cart-bourbon-suggest" action="" method="post">';
         view += '<div>';
@@ -39,7 +39,7 @@ FluidbookBourbonForm.prototype = {
         view += '</form>';
         view += '</div>';
 
-        $("#view").append('<div class="mview" data-menu="suggest">' + view + '</div>');
+        this.fluidbook.menu.viewWrap(view,'suggest');
 
         callback();
     },

diff --git a/js/libs/fluidbook/links/fluidbook.links.zoomhd.js b/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
index 2998c476ffa2b4f32eb6ac232327f82cf12ad75f..8463e024f8deb15d0d2830edc4d39d108231aa95 100644 (file)
--- a/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
+++ b/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
@@ -70,11 +70,11 @@ FluidbookLinksZoomHD.prototype = {
 
         this.fluidbook.displayLoader();
 
-        view = '<div class="caption">' + this.fluidbook.menu.closeButton() + '</div>';
+        view = this.fluidbook.menu.getCaption();
         view += '<div class="content h100"><div class="zoomhdHolder"><div class="zoomhdMove"><div class="zoomhdRefScale"><div class="zoomhdScale"><div class="zoomhdImage"></div>';
         view += '</div></div></div><div class="zoomhdControls"><a href="#" class="minus">' + getSpriteIcon('interface-minus') + '</a><a href="#" class="plus">' + getSpriteIcon('interface-plus') + '</a></div></div></div>';
 
-        $("#view").append('<div class="mview h100" dir="ltr" data-menu="zoomhd" data-fullscreen="1">' + view + '</div>');
+        this.fluidbook.menu.viewWrap(view,'zoomhd','data-fullscreen="1" dir="ltr"','h100');
         this.element = $("#view").find('.zoomhdScale');
 
         this.image = fluidbook.loader.loadImage('data/links/' + link.to, null, null, null, null, function () {

diff --git a/js/libs/fluidbook/menu/fluidbook.index.js b/js/libs/fluidbook/menu/fluidbook.index.js
index a6b7163c2a128d7609a434467684b01010eaae07..5b2adf628ab80b413a7e2b79b04a2e2640da8ecc 100644 (file)
--- a/js/libs/fluidbook/menu/fluidbook.index.js
+++ b/js/libs/fluidbook/menu/fluidbook.index.js
@@ -36,9 +36,9 @@ FluidbookIndex.prototype = {
 
     _openIndex: function (title, group, closeAll, callback) {
         var c = !closeAll ? ' one' : '';
-        var index = '<div class="caption">' + this.fluidbook.menu.closeButton(c) + '<h2>' + title + '</h2></div>';
+        var index = this.fluidbook.menu.getCaption(title);
         index += this.getView(group);
-        $("#view").append('<div class="mview" data-menu="index">' + index + '</div>');
+        this.fluidbook.menu.viewWrap(index,'index');
         // Mark current page
         var cp = this.fluidbook.currentPage;