mirror of
https://github.com/pdf2htmlEX/pdf2htmlEX.git
synced 2024-12-22 04:50:09 +00:00
move @keyframe outside @media for IE; add loading indicator while loading
This commit is contained in:
parent
e36c33b075
commit
2c8224ce78
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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
|
||||
"""
|
||||
|
@ -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;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user