1
0
mirror of https://github.com/pdf2htmlEX/pdf2htmlEX.git synced 2024-07-03 08:38:39 +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;
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;

View File

@ -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;
}

View File

@ -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
"""

View File

@ -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;