1
0
mirror of https://github.com/pdf2htmlEX/pdf2htmlEX.git synced 2024-07-05 17:48:38 +00:00

move @keyframe outside @media for IE; add loading indicator while loading

This commit is contained in:
Lu Wang 2013-09-28 13:20:45 +08:00
parent e36c33b075
commit 2c8224ce78
4 changed files with 22 additions and 23 deletions

View File

@ -31,7 +31,7 @@
right:0; right:0;
overflow:auto; overflow:auto;
} }
#loading-indicator { .loading-indicator {
display:none; display:none;
position:absolute; position:absolute;
width:64px; width:64px;
@ -41,7 +41,7 @@
margin-top:-32px; margin-top:-32px;
margin-left:-32px; margin-left:-32px;
} }
#loading-indicator img { .loading-indicator img {
position:absolute; position:absolute;
top:0; top:0;
left:0; left:0;

View File

@ -1,6 +1,20 @@
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab filetype=css: */ /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab filetype=css: */
/* Fancy styles */ /* Fancy styles */
/* Copyright 2013 Lu Wang <coolwanglu@gmail.com> */ /* 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 { @media screen {
#sidebar { #sidebar {
background-color:#2f3236; background-color:#2f3236;
@ -49,25 +63,11 @@
margin: 13px auto; margin: 13px auto;
box-shadow: 1px 1px 3px 1px #333; 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 */ .@CSS_PAGE_CONTENT_BOX_CN@.opened { /* used by pdf2htmlEX.js, to show/hide pages */
-webkit-animation: fadein 100ms; -webkit-animation: fadein 100ms;
animation: fadein 100ms; animation: fadein 100ms;
} }
@keyframes swing { .loading-indicator {
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 {
animation: swing 1.5s ease-in-out 0s infinite alternate none; animation: swing 1.5s ease-in-out 0s infinite alternate none;
-webkit-animation: swing 1.5s ease-in-out 0s infinite alternate none; -webkit-animation: swing 1.5s ease-in-out 0s infinite alternate none;
} }

View File

@ -39,7 +39,7 @@ pdf2htmlEX.defaultViewer = new pdf2htmlEX.Viewer({
container_id : 'page-container', container_id : 'page-container',
sidebar_id : 'sidebar', sidebar_id : 'sidebar',
outline_id : 'outline', outline_id : 'outline',
loading_indicator_id : 'loading-indicator', loading_indicator_cls : 'loading-indicator',
}); });
</script> </script>
""" """
@ -80,7 +80,7 @@ $pages
# shown when loading a page via ajax # shown when loading a page via ajax
""" """
<div id="loading-indicator"> <div class="loading-indicator">
""" """
@pdf2htmlEX-64x64.png @pdf2htmlEX-64x64.png
""" """

View File

@ -128,7 +128,7 @@ var pdf2htmlEX = (function(){
this.container_id = config['container_id']; this.container_id = config['container_id'];
this.sidebar_id = config['sidebar_id']; this.sidebar_id = config['sidebar_id'];
this.outline_id = config['outline_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_to_preload = config['pages_to_preload'] || DEFAULT_PAGES_TO_PRELOAD;
this.pages_loading = {}; this.pages_loading = {};
this.init_before_loading_content(); this.init_before_loading_content();
@ -151,7 +151,7 @@ var pdf2htmlEX = (function(){
this.$sidebar = $('#'+this.sidebar_id); this.$sidebar = $('#'+this.sidebar_id);
this.$outline = $('#'+this.outline_id); this.$outline = $('#'+this.outline_id);
this.$container = $('#'+this.container_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 // Open the outline if nonempty
if(this.$outline.children().length > 0) { if(this.$outline.children().length > 0) {
@ -198,8 +198,7 @@ var pdf2htmlEX = (function(){
if($pf.length == 0) if($pf.length == 0)
return; // Page does not exist return; // Page does not exist
$pf.append(this.$loading_indicator); this.$loading_indicator.clone().show().appendTo($pf);
this.$loading_indicator.show();
var _ = this; var _ = this;