mirror of
https://github.com/flynx/PortableMag.git
synced 2025-12-23 12:01:48 +00:00
some more refactoring, generalized the no-resize css class family (now there is no need to always explicitly include .no-resize), added a caption page template (still needs some tweeking)...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
e7028f2d65
commit
2b8a71172f
12
index.html
12
index.html
@ -746,32 +746,30 @@ $(document).ready(function(){
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page no-resize page-align-left">
|
||||
<div class="page page-align-left">
|
||||
<div class="content" style="background:gold">
|
||||
Left-aligned page...
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page no-resize page-align-center">
|
||||
<div class="page page-align-center">
|
||||
<div class="content" style="background:yellow; width: 600px">
|
||||
Center-aligned page...
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page no-resize page-align-right">
|
||||
<div class="page page-align-right">
|
||||
<div class="content" style="background:gold; width: 400px">
|
||||
Right-aligned page...
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page no-resize page-align-right">
|
||||
<div class="content" style="background:orange; width: 200px">
|
||||
<div class="page page-align-right caption-bottom-arrow light">
|
||||
<div class="content" style="width: 200px">
|
||||
Right-aligned page...
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,6 @@ var DEFAULT_TRANSITION_DURATION = 200
|
||||
var INNERTIA_SCALE = 0.25
|
||||
|
||||
|
||||
|
||||
/********************************************************** layout ***/
|
||||
|
||||
var toggleThemes = createCSSClassToggler('.chrome', [
|
||||
@ -28,11 +27,11 @@ var togglePageFitMode = createCSSClassToggler(
|
||||
if(action == 'on'){
|
||||
var n = getPageNumber()
|
||||
var scale = getMagazineScale()
|
||||
$('.page:not(.no-resize)')
|
||||
$(RESIZABLE_PAGES)
|
||||
.width($('.viewer').width() / scale)
|
||||
} else {
|
||||
var n = getPageNumber()
|
||||
$('.page:not(.no-resize)').width('')
|
||||
$(RESIZABLE_PAGES).width('')
|
||||
}
|
||||
setCurrentPage(n)
|
||||
})
|
||||
|
||||
52
magazine.css
52
magazine.css
@ -617,6 +617,58 @@ div.page-number-text {
|
||||
|
||||
|
||||
|
||||
.page.caption-top-arrow,
|
||||
.page.caption-bottom-arrow {
|
||||
overflow: visible;
|
||||
}
|
||||
.page.caption-top-arrow .content,
|
||||
.page.caption-bottom-arrow .content {
|
||||
background: white;
|
||||
}
|
||||
.page.caption-top-arrow:before,
|
||||
.page.caption-bottom-arrow:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
font-size: 0px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
left:-25px;
|
||||
|
||||
background: white;
|
||||
|
||||
cursor: hand;
|
||||
|
||||
box-shadow: 20px -20px 50px 0px #000;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.page.caption-top-arrow:before {
|
||||
/* this is for when we do not need to care about bookmarks...
|
||||
top: 10px;*/
|
||||
top: 50px;
|
||||
}
|
||||
.page.caption-bottom-arrow:before {
|
||||
/*bottom: 10px;*/
|
||||
bottom: 50px;
|
||||
|
||||
}
|
||||
|
||||
.current.page.caption-top-arrow,
|
||||
.current.page.caption-bottom-arrow {
|
||||
box-shadow: 30px 0px 100px 0px #000;
|
||||
}
|
||||
.current.page.caption-top-arrow:before,
|
||||
.current.page.caption-bottom-arrow:before {
|
||||
box-shadow: 20px -20px 30px 10px #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
|
||||
44
magazine.js
44
magazine.js
@ -12,8 +12,8 @@
|
||||
var PAGES_IN_RIBBON = 4.0
|
||||
|
||||
// if true, expand a page to fit the whole view in single page mode...
|
||||
// NOTE: if .no-resize is set on a page then this will not have effect
|
||||
// on the that page...
|
||||
// NOTE: if one of the NO_RESIZE_CLASSES is set on a page then this
|
||||
// will not have effect on the that page...
|
||||
var FIT_PAGE_TO_VIEW = true
|
||||
|
||||
// if false, this will force all pages to be fit to screen size in full
|
||||
@ -28,7 +28,7 @@ var USE_REAL_PAGE_SIZES = true
|
||||
// NOTE: page local align values take priority over this.
|
||||
// NOTE: this has no effect on thumbnail view.
|
||||
// NOTE: this has no effect if FIT_PAGE_TO_VIEW is true and a page has
|
||||
// no-resize class set.
|
||||
// one of the NO_RESIZE_CLASSES classes set.
|
||||
// also, USE_REAL_PAGE_SIZES if set to false will make this have
|
||||
// no effect.
|
||||
var FULL_PAGE_ALIGN = 'center'
|
||||
@ -55,6 +55,25 @@ var FULL_HISTORY_ENABLED = false
|
||||
// if true, use CSS3 transforms to scroll, of false, use left.
|
||||
var USE_TRANSFORM = true
|
||||
|
||||
// list of css classes of pages that will not allow page fitting.
|
||||
var NO_RESIZE_CLASSES = [
|
||||
'no-resize',
|
||||
'page-align-left',
|
||||
'page-align-center',
|
||||
'page-align-right',
|
||||
'caption-top-arrow',
|
||||
'caption-bottom-arrow'
|
||||
]
|
||||
// NOTE: to alter the following, just update the NO_RESIZE_CLASSES above...
|
||||
var RESIZABLE_PAGES = '.page' + ($(NO_RESIZE_CLASSES)
|
||||
.map(function(_, e){ return ':not(.' + e + ')' })
|
||||
.toArray()
|
||||
.join(''))
|
||||
var NON_RESIZABLE_PAGES = $(NO_RESIZE_CLASSES)
|
||||
.map(function(_, e){ return '.page.' + e + '' })
|
||||
.toArray()
|
||||
.join(', ')
|
||||
|
||||
|
||||
|
||||
/*********************************************************** modes ***/
|
||||
@ -129,7 +148,10 @@ function isPageResizable(page){
|
||||
var article = page.parents('.article').first()
|
||||
|
||||
// first check the page...
|
||||
return (page.hasClass('no-resize') ? false
|
||||
// NOTE: check for all classes that make the page unresizable...
|
||||
return ($(NO_RESIZE_CLASSES)
|
||||
.filter(function(){ return page.hasClass(this) })
|
||||
.length > 0 ? false
|
||||
// then the group...
|
||||
: group.hasClass('no-resize') ? false
|
||||
// then the article...
|
||||
@ -448,7 +470,7 @@ function fitNPages(n, fit_to_content){
|
||||
}
|
||||
var view = $('.viewer')
|
||||
if(USE_REAL_PAGE_SIZES){
|
||||
var page = $('.page:not(.no-resize)')
|
||||
var page = $(RESIZABLE_PAGES)
|
||||
} else {
|
||||
var page = $('.page')
|
||||
}
|
||||
@ -477,7 +499,7 @@ function fitNPages(n, fit_to_content){
|
||||
} else {
|
||||
// calculate the target offset...
|
||||
if(USE_REAL_PAGE_SIZES){
|
||||
var rpages = $('.page:not(.no-resize), .current.page')
|
||||
var rpages = $(RESIZABLE_PAGES+', .current.page')
|
||||
} else {
|
||||
var rpages = page
|
||||
}
|
||||
@ -485,7 +507,7 @@ function fitNPages(n, fit_to_content){
|
||||
var offset = rW * i-1
|
||||
// now do the no-resize elements...
|
||||
if(USE_REAL_PAGE_SIZES){
|
||||
var nrpages = $('.page.no-resize, .current.page')
|
||||
var nrpages = $(NON_RESIZABLE_PAGES+', .current.page')
|
||||
i = nrpages.index(cur)
|
||||
nrpages.splice(i)
|
||||
nrpages.each(function(_, e){
|
||||
@ -496,7 +518,7 @@ function fitNPages(n, fit_to_content){
|
||||
|
||||
// align the magazine...
|
||||
if(USE_REAL_PAGE_SIZES){
|
||||
if(cur.hasClass('no-resize')){
|
||||
if(!isPageResizable(cur)){
|
||||
var align = getPageAlign(cur)
|
||||
|
||||
// center align if explicitly required or if we are in a ribbon...
|
||||
@ -526,7 +548,7 @@ function fitNPages(n, fit_to_content){
|
||||
// .width(target_width)
|
||||
// .height(target_height)
|
||||
//if(USE_REAL_PAGE_SIZES){
|
||||
// $('.page.no-resize').width('auto')
|
||||
// $(NON_RESIZABLE_PAGES).width('auto')
|
||||
//}
|
||||
|
||||
// NOTE: we only need the .scaler animated, the rest just plays havoc with
|
||||
@ -548,8 +570,8 @@ function fitNPages(n, fit_to_content){
|
||||
}
|
||||
})
|
||||
if(USE_REAL_PAGE_SIZES){
|
||||
//$('.page.no-resize').width('auto')
|
||||
$('.page.no-resize').each(function(_, e){
|
||||
//$(NON_RESIZABLE_PAGES).width('auto')
|
||||
$(NON_RESIZABLE_PAGES).each(function(_, e){
|
||||
e.style.width = 'auto'
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user