implement show page diff in mobile.

diff --git a/htmlserver.pl b/htmlserver.pl
index af41388..25e5ab9 100755 (executable)
--- a/htmlserver.pl
+++ b/htmlserver.pl
@@ -107,7 +107,7 @@ if ( $mode eq 'mobile' ) {
        $template->param( nowpage    => $pagenum );
        $template->param( maxpage    => $multi_maxpage );
        $template->param( homelink   => $homelink );
-
+       $template->param( nowspd     => $showpagediff );
        #$template->param( title_id => $title_group );
 }
 else {

diff --git a/template/mobile_viewjpeg.tmp.html b/template/mobile_viewjpeg.tmp.html
index 0669d2e..477978d 100644 (file)
--- a/template/mobile_viewjpeg.tmp.html
+++ b/template/mobile_viewjpeg.tmp.html
@@ -9,6 +9,18 @@
     <script src='//ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.js'></script>
     
     <script>
+                       function showPageNums(){
+                               var spd=parseInt($("#spd").val());
+                               var nowPageShow=parseInt($("#nowpage").val())-spd;
+                               var maxPageShow=parseInt($("#maxpage").val())-spd;
+                               var nPSS=nowPageShow.toString();
+                               var mPSS=maxPageShow.toString();
+                               var nPRS=parseInt($("#nowpage").val());
+                               var mPRS=parseInt($("#maxpage").val());
+                               $("#mPD_pagenum_label").text(nPSS+" / "+mPSS);
+                               $("#pagenum_label").text(nPSS+" / "+mPSS);
+                               $("#jumpPagenum").val(nPSS);
+                       };
         $(document).on('pageinit',function(){
             $('#images').bind('swipeleft',function(){
                 //$.mobile.changePage('<TMPL_VAR NAME="nlink">',{transition:'slide'});
@@ -30,22 +42,28 @@
             $('#jumpPagenum').bind('keypress',function(e){
                 if(e.keyCode == 13){
                     if($('#jumpPagenum').val().length > 0){
-                        var jnum=$('#jumpPagenum').val();
+                        var jnum=parseInt($('#jumpPagenum').val());
+                                               var spd=parseInt($('#spd').val());
+                                               var jnumnew=jnum+spd;
+                                               jnumnew=jnumnew.toString();
                         $('#jumpPagenum').val("");
-                        $.mobile.changePage("<TMPL_VAR NAME="jumplink">"+jnum,{transition:'slidedown'});
+                        $.mobile.changePage("<TMPL_VAR NAME="jumplink">"+jnumnew,{transition:'slidedown'});
                     
                     }
                 }
             });
                        $('#jumpPage').bind("click",function(e,ui){
                 if($('#jumpPagenum').val().length > 0){
-                    var jnum=$('#jumpPagenum').val();
-                    $('#jumpPagenum').val("");
-                    $.mobile.changePage("<TMPL_VAR NAME="jumplink">"+jnum,{transition:'slidedown'});
-                    
+                       var jnum=parseInt($('#jumpPagenum').val());
+                       var spd=parseInt($('#spd').val());
+                       var jnumnew=jnum+spd;
+                       jnumnew=jnumnew.toString();
+                       $('#jumpPagenum').val("");
+                       $.mobile.changePage("<TMPL_VAR NAME="jumplink">"+jnumnew,{transition:'slidedown'});
                 }
                        });
-            $.mobile.loadPage("<TMPL_VAR NAME="nlink">",{showLoadMsg: false});
+            showPageNums();
+                       $.mobile.loadPage("<TMPL_VAR NAME="nlink">",{showLoadMsg: false});
             $.mobile.loadPage("<TMPL_VAR NAME="blink">",{showLoadMsg: false});
               });
   </script>
@@ -53,44 +71,44 @@
  </head>
 
 <div id='top' data-role='page'>
- <div data-role='header' data-position='fixed'>
-  <h3><TMPL_VAR NAME="nowpage"> / <TMPL_VAR NAME="maxpage"></h3>
-  <div data-type='horizontal' data-role='controlgroup' class='ui-btn-left'>
-   <a href='<TMPL_VAR NAME="blink">' data-role='button' data-icon='arrow-l' data-iconpos='left'>前へ</a>
-   <a href='<TMPL_VAR NAME="homelink">' data-role='button' data-icon='home' data-iconpos='left' >トップ</a>
-  </div>
-  <div data-type='horizontal' data-role='controlgroup' class='ui-btn-right'>
-   <a href='#movePageDialog' data-role='button' data-icon='forward' data-iconpos='left' >移動</a>
-   <a href='<TMPL_VAR NAME="nlink">' data-role='button' data-icon='arrow-r' data-iconpos='right'>次へ</a>
-  </div>
-  
- </div>
-
- <div data-role='header'>
-  <input type='search' name='search' id='search-text' data-mini="true" value='' />
- </div>
- <div data-role="content" id='image'>
-   <img id='images' src='<TMPL_VAR NAME="jpegpath">' style="width:98%;max-width:400%;"/>
- </div>
-
- <div data-role='footer' data-position='fixed'>
-  <h3>Libre10 '13Q2 Copyright yukikaze,long.inus,yussi</h3>
-  <div data-type='horizontal' data-role='controlgroup' class='ui-btn-left'>
-   <a href='<TMPL_VAR NAME="blink">' data-role='button' data-icon='arrow-l' data-iconpos='left'>前へ</a>
-   <a href='<TMPL_VAR NAME="homelink">' data-role='button' data-icon='home' data-iconpos='left' >トップ</a>
-  </div>
-  <div data-type='horizontal' data-role='controlgroup' class='ui-btn-right'>
-   <a href='pdfmanager.pl' data-rel='popup' data-role='button' data-icon='gear' data-iconpos='left'>書籍設定(未)</a>
-   <a href='<TMPL_VAR NAME="nlink">' data-role='button' data-icon='arrow-r' data-iconpos='right'>次へ</a>
-  </div>
- </div>
+       <div data-role='header' data-position='fixed'>
+               <h3><label id="pagenum_label"></label></h3>
+               <div data-type='horizontal' data-role='controlgroup' class='ui-btn-left'>
+                       <a href='<TMPL_VAR NAME="blink">' data-role='button' data-icon='arrow-l' data-iconpos='left'>前へ</a>
+                       <a href='<TMPL_VAR NAME="homelink">' data-role='button' data-icon='home' data-iconpos='left' >トップ</a>
+               </div>
+               <div data-type='horizontal' data-role='controlgroup' class='ui-btn-right'>
+                       <a href='#movePageDialog' data-role='button' data-icon='forward' data-iconpos='left' >移動</a>
+                       <a href='<TMPL_VAR NAME="nlink">' data-role='button' data-icon='arrow-r' data-iconpos='right'>次へ</a>
+               </div>
+       </div>
+       <div data-role='header'>
+               <input type='search' name='search' id='search-text' data-mini="true" value='' />
+       </div>
+       <div data-role="content" id='image'>
+       <img id='images' src='<TMPL_VAR NAME="jpegpath">' style="width:98%;max-width:400%;"/>
+               <input type='hidden' id='maxpage' value="<TMPL_VAR NAME="maxpage">"/>
+               <input type='hidden' id='nowpage' value="<TMPL_VAR NAME="nowpage">"/>
+               <input type='hidden' id='spd' value="<TMPL_VAR NAME="nowspd">"/>
+       </div>
+       <div data-role='footer' data-position='fixed'>
+               <h3>Libre10 '13Q2 Copyright yukikaze,long.inus,yussi</h3>
+               <div data-type='horizontal' data-role='controlgroup' class='ui-btn-left'>
+                       <a href='<TMPL_VAR NAME="blink">' data-role='button' data-icon='arrow-l' data-iconpos='left'>前へ</a>
+                       <a href='<TMPL_VAR NAME="homelink">' data-role='button' data-icon='home' data-iconpos='left' >トップ</a>
+               </div>
+       <div data-type='horizontal' data-role='controlgroup' class='ui-btn-right'>
+               <a href='pdfmanager.pl' data-rel='popup' data-role='button' data-icon='gear' data-iconpos='left'>書籍設定(未)</a>
+               <a href='<TMPL_VAR NAME="nlink">' data-role='button' data-icon='arrow-r' data-iconpos='right'>次へ</a>
+       </div>
+</div>
 </div>
 <div id='movePageDialog' data-role='page'>
        <div data-role='header'>
                <h1>page move dialog</h1>
        </div>
        <div data-role='content'>
-    <TMPL_VAR NAME="nowpage"> / <TMPL_VAR NAME="maxpage">
+       <label id="mPD_pagenum_label"></label>
                <p><input type='number' id='jumpPagenum' value='' />
                <div data-role='button' id='jumpPage'>移動</div>
                </p>