mirror of
https://github.com/pdf2htmlEX/pdf2htmlEX.git
synced 2024-12-22 13:00:08 +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;
|
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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
"""
|
"""
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user