add page loader;

yqt · yqt · commit f79a234e1279 · 2016-03-06T04:01:52.000+08:00
diff --git a/src/css/base.css b/src/css/base.css
@@ -50,6 +50,17 @@
     margin: 12px 15px;
 }
 
+.picaweb .next-page-loader {
+    display: none;
+    padding: 10px;
+    margin-bottom: 20%;
+}
+
+.picaweb .prev-page-loader {
+    display: none;
+    padding: 20px 0;
+}
+
 @media (min-width: 768px) {
     .picaweb .thumbnail-fixed-height > img {
         max-height: 80%;
diff --git a/src/index.tpl b/src/index.tpl
@@ -12,6 +12,7 @@
 </head>
 <body>
 <div class="container-fluid picaweb">
+    <div class="prev-page-loader text-center" id="prev-page-loader"><i class="glyphicon glyphicon-arrow-down"></i> load prev</div>
     <nav class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
         <button type="button" class="navbar-toggle collapsed" id="navbar-toggle">
@@ -34,12 +35,13 @@
       </div>
     </nav>
     <div class="container-fluid bare" id="main-container"></div>
+    <div class="next-page-loader text-center" id="next-page-loader"><i class="glyphicon glyphicon-arrow-up"></i> load next</div>
 </div>
 <script type="text/x-dot-template" id="category-board">
     <div class="row">
         {%~ it :item:index %}
         <div class="col-xs-12 col-sm-6 col-md-3" data-id="{%! item.id %}">
-            <a href="#/category/{%! item.id %}/comic/page/{%! item.page || 1 %}" class="block-link">
+            <a href="#/category/{%! item.id %}/comic/page/{%! item.page || 1 %}!total={%= Math.ceil(item.all_comics / 20) %}" class="block-link">
                 <div class="thumbnail">
                     <img src="{%! false == localStorage.https ? item.cover_image : item.cover_image.replace('http://', 'https://') %}" alt="{%! item.name %}" />
                     <div class="caption">
@@ -118,7 +120,7 @@
             <div>
                 {% for (var i = 1; i <= it.ep_count; i++) { %}
                 <div class="col-xs-12 col-sm-2 col-md-2" data-ep="{%= i %}">
-                    <a href="#/comic/{%! it.comic.id %}/ep/{%= i %}!dir={%! it.comic.img_directory %}&total={%= it.comic.total_page %}" class="block-link">
+                    <a href="#/comic/{%! it.comic.id %}/ep/{%= i %}!dir={%! it.comic.img_directory %}&pageCount={%= it.comic.total_page %}&total={%! it.ep_count %}" class="block-link">
                         <div class="panel panel-default">
                             <div class="panel-body text-center">
                                 第{%= i %}话
diff --git a/src/js/logic/main.js b/src/js/logic/main.js
@@ -148,10 +148,10 @@
     });
   }
 
-  function getEpisode(comicId, episode, dir, total, callback) {
-    if (dir && total) {
+  function getEpisode(comicId, episode, dir, pageCount, total, callback) {
+    if (dir && total && 1 == total) {
       var picList = [];
-      for (var i = 1; i <= total; i++) {
+      for (var i = 1; i <= pageCount; i++) {
         picList.push({
           url: picUrlPrefix + dir + '/' + episode + '/' + i + '.jpg',
           alt_url: i < 10 ? picUrlPrefix + dir + '/' + episode + '/0' + i + '.jpg' : null
@@ -240,6 +240,55 @@
     console.log(e);
   });
 
+  // NOTE: load next/prev page
+  // TOOD: handle touch event
+  var $window = $(window),
+    $document = $(document),
+    $prevPageLoader = $('#prev-page-loader'),
+    $nextPageLoader = $('#next-page-loader');
+  $window.scroll(function() {
+    var hash = location.hash.split('!'),
+      fragParamString = hash[1],
+      windowScrollTop,
+      matches,
+      fragParams,
+      currnetPage;
+    hash = hash[0];
+    matches = hash.match(/^(.*?\/)(\d+)$/);
+    if (!matches) {
+      return;
+    }
+    windowScrollTop = $window.scrollTop();
+    if (windowScrollTop + $window.height() == $document.height()) {
+      if ($nextPageLoader.is(':visible')) {
+        fragParams = getFragParams();
+        currnetPage = parseInt(matches[2], 10);
+        if (fragParams.total == currnetPage) {
+          return;
+        }
+        location.hash = matches[1] + (currnetPage + 1) + '!' + (fragParamString ? fragParamString : '');
+        $nextPageLoader.hide();
+        $('html, body').animate({scrollTop: '1px'}, 500, 'swing');
+      } else {
+        $nextPageLoader.show();
+      }
+    }
+    if (0 == windowScrollTop) {
+      if ($prevPageLoader.is(':visible')) {
+        currnetPage = parseInt(matches[2], 10);
+        if (currnetPage == 1) {
+          return;
+        }
+        location.hash = matches[1] + (currnetPage - 1) + '!' + (fragParamString ? fragParamString : '');
+        $prevPageLoader.hide();
+      } else {
+        $prevPageLoader.show();
+        $window.scrollTop(1);
+      }
+      
+    }
+  });
+
   /* routes */
   // index
   $.routes.add('/$', 'index', function() {
@@ -277,12 +326,16 @@
   $.routes.add('/comic/{id:int}/ep/{ep:int}', 'comicPicList', function() {
     console.log(this);
     var fragParams = getFragParams();
-    getEpisode(this.id, this.ep, fragParams.dir, fragParams.total, function(data) {
+    getEpisode(this.id, this.ep, fragParams.dir, fragParams.pageCount, fragParams.total, function(data) {
       renderContent(data, 'pic-list');
       // NOTE: hotfix for uncertain leading-zero
       $('img').on('error', function(e) {
-        var ele = $(e.target);
-        ele.prop('src', ele.data('url'));
+        var ele = $(e.target),
+          altUrl = ele.data('url'),
+          currentUrl = ele.prop('src');
+        if (altUrl && altUrl != currentUrl) {
+          ele.prop('src', altUrl);
+        }
       });
     });
   });
