From 2c8224ce78c32f2b58bfabd934d9c12e6c06bf4e Mon Sep 17 00:00:00 2001
From: Lu Wang <coolwanglu@gmail.com>
Date: Sat, 28 Sep 2013 13:20:45 +0800
Subject: [PATCH] move @keyframe outside @media for IE; add loading indicator
 while loading

---
 share/base.css.in      |  4 ++--
 share/fancy.css.in     | 30 +++++++++++++++---------------
 share/manifest         |  4 ++--
 share/pdf2htmlEX.js.in |  7 +++----
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/share/base.css.in b/share/base.css.in
index 0505377..20ec3f0 100644
--- a/share/base.css.in
+++ b/share/base.css.in
@@ -31,7 +31,7 @@
     right:0;
     overflow:auto;
   }
-  #loading-indicator {
+  .loading-indicator {
     display:none;
     position:absolute;
     width:64px;
@@ -41,7 +41,7 @@
     margin-top:-32px;
     margin-left:-32px;
   }
-  #loading-indicator img {
+  .loading-indicator img {
     position:absolute;
     top:0;
     left:0;
diff --git a/share/fancy.css.in b/share/fancy.css.in
index 462484c..0177c65 100644
--- a/share/fancy.css.in
+++ b/share/fancy.css.in
@@ -1,6 +1,20 @@
 /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab filetype=css: */
 /* Fancy styles */
 /* Copyright 2013 Lu Wang <coolwanglu@gmail.com> */
+@keyframes fadein { from { opacity:0;} to { opacity:1;} }
+@-webkit-keyframes fadein { from { opacity:0;} to { opacity:1;} }
+@keyframes swing {
+  0%  { transform: rotate(0deg); }
+  10% { transform: rotate(0deg); }
+  90% { transform: rotate(720deg); }
+  100%{ transform: rotate(720deg); }
+}
+@-webkit-keyframes swing {
+  0%  { -webkit-transform: rotate(0deg); }
+  10% { -webkit-transform: rotate(0deg); }
+  90% { -webkit-transform: rotate(720deg); }
+  100%{ -webkit-transform: rotate(720deg); }
+}
 @media screen { 
   #sidebar {
     background-color:#2f3236;
@@ -49,25 +63,11 @@
     margin: 13px auto;
     box-shadow: 1px 1px 3px 1px #333;
   }
-  @keyframes fadein { from { opacity:0;} to { opacity:1;} }
-  @-webkit-keyframes fadein { from { opacity:0;} to { opacity:1;} }
   .@CSS_PAGE_CONTENT_BOX_CN@.opened { /* used by pdf2htmlEX.js, to show/hide pages */
     -webkit-animation: fadein 100ms;
     animation: fadein 100ms; 
   }
-  @keyframes swing {
-    0%  { transform: rotate(0deg); }
-    10% { transform: rotate(0deg); }
-    90% { transform: rotate(720deg); }
-    100%{ transform: rotate(720deg); }
-  }
-  @-webkit-keyframes swing {
-    0%  { -webkit-transform: rotate(0deg); }
-    10% { -webkit-transform: rotate(0deg); }
-    90% { -webkit-transform: rotate(720deg); }
-    100%{ -webkit-transform: rotate(720deg); }
-  }
-  #loading-indicator {
+  .loading-indicator {
     animation: swing 1.5s ease-in-out 0s infinite alternate none;
     -webkit-animation: swing 1.5s ease-in-out 0s infinite alternate none;
   }
diff --git a/share/manifest b/share/manifest
index 6b21367..2d60d90 100644
--- a/share/manifest
+++ b/share/manifest
@@ -39,7 +39,7 @@ pdf2htmlEX.defaultViewer = new pdf2htmlEX.Viewer({
     container_id : 'page-container', 
     sidebar_id : 'sidebar',
     outline_id : 'outline',
-    loading_indicator_id : 'loading-indicator',
+    loading_indicator_cls : 'loading-indicator',
 });
 </script>
 """
@@ -80,7 +80,7 @@ $pages
 
 # shown when loading a page via ajax
 """
-<div id="loading-indicator">
+<div class="loading-indicator">
 """
 @pdf2htmlEX-64x64.png
 """
diff --git a/share/pdf2htmlEX.js.in b/share/pdf2htmlEX.js.in
index b0601ec..e7cab41 100644
--- a/share/pdf2htmlEX.js.in
+++ b/share/pdf2htmlEX.js.in
@@ -128,7 +128,7 @@ var pdf2htmlEX = (function(){
     this.container_id = config['container_id'];
     this.sidebar_id = config['sidebar_id'];
     this.outline_id = config['outline_id'];
-    this.loading_indicator_id = config['loading_indicator_id'];
+    this.loading_indicator_cls = config['loading_indicator_cls'];
     this.pages_to_preload = config['pages_to_preload'] || DEFAULT_PAGES_TO_PRELOAD;
     this.pages_loading = {};
     this.init_before_loading_content();
@@ -151,7 +151,7 @@ var pdf2htmlEX = (function(){
       this.$sidebar = $('#'+this.sidebar_id);
       this.$outline = $('#'+this.outline_id);
       this.$container = $('#'+this.container_id);
-      this.$loading_indicator = $('#'+this.loading_indicator_id);
+      this.$loading_indicator = $('.'+this.loading_indicator_cls);
 
       // Open the outline if nonempty
       if(this.$outline.children().length > 0) { 
@@ -198,8 +198,7 @@ var pdf2htmlEX = (function(){
       if($pf.length == 0)
         return;  // Page does not exist
 
-      $pf.append(this.$loading_indicator);
-      this.$loading_indicator.show();
+      this.$loading_indicator.clone().show().appendTo($pf);
 
       var _ = this;