flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-31 20:10:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

several styling changes...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-29 18:55:21 +04:00
parent 3999aad9fb
commit e280c399e0
3 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -100,8 +100,9 @@ $(document).ready(function(){
// XXX do we need these here??
$('.button.cover').swipe({click: goToMagazineCover})
$('.button.prev-bookmark').swipe({click: prevBookmark})
$('.button.toggle-bookmark').swipe({click: function(){toggleBookmark()}})
// XXX for some reason these are not animated...
$('.button.prev-bookmark').swipe({click: prevBookmark})
$('.button.next-bookmark').swipe({click: nextBookmark})
loadState()
@ -136,14 +137,14 @@ $(document).ready(function(){
<div class="top-toolbar">
<div class="left-set">
<div class="button cover">PortableMag</div>
<div class="button cover title">PortableMag</div>
</div>
<div class="right-set">
<div class="button prev-bookmark">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>prev</title>
<title>Previous page (S-Left)</title>
<path transform="rotate(-180 18.9697 20.1122)" id="svg_13" stroke="#ffffff" d="m20.467497,20.112247l-8.773763,-14.254913l5.778195,0l8.773788,14.254913l-8.773788,14.25491l-5.778195,0l8.773763,-14.25491z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
</g>
</svg>
@ -152,7 +153,7 @@ $(document).ready(function(){
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>bookmark</title>
<title>Bookmark this page (B)</title>
<rect stroke="#ffffff" id="svg_1" height="28.604868" width="24.052915" y="5.858955" x="8.807377" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
<path stroke="#ffffff" id="svg_4" d="m21.762226,3.651895l8.416584,0l0,14.510554l-4.124887,-2.792193l-4.291697,2.792193l0,-14.510554l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#ff0000"/>
</g>
@ -162,7 +163,7 @@ $(document).ready(function(){
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>next</title>
<title>Next page (S-Right)</title>
<path stroke="#ffffff" id="svg_11" d="m23.175751,20.132858l-8.773797,-14.254913l5.77823,0l8.773788,14.254913l-8.773788,14.254913l-5.77823,0l8.773797,-14.254913z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
</g>
</svg>
@ -442,8 +443,8 @@ $(document).ready(function(){
var toggleViewerAnimation = function(){
var toggler = createCSSClassToggler(
// XXX this will turn off magazine animations...
//'.scaler, .page, .magazine',
'.scaler, .page',
'.scaler, .page, .magazine',
//'.scaler, .page',
'unanimated',
function(action){
$('#viewer_transition_state').text(action == 'on' ? 'off' : 'on')

4
magazine.css
View File

@ -254,6 +254,10 @@ body {
font-size: 14px;
color: white;
}
.top-toolbar .title,
.bottom-toolbar .title {
font-size: 40px;
}
.top-toolbar .left-set,
.bottom-toolbar .left-set {
float: left;

25
magazine.js
View File

@ -195,6 +195,7 @@ function swipeHandler(evt, phase, direction, distance, duration, fingers){
// - if n is 1 then fit_to_content bool argument controls wether:
// - the page will be stretched to viewer (false)
// - or to content (true)
// XXX on USE_REAL_PAGE_SIZES offset is calculated incorrectly...
function fitNPages(n, fit_to_content){
if(n == null){
n = 1
@ -260,9 +261,14 @@ function fitNPages(n, fit_to_content){
// resulting page width...
var rW = W/scale
}
if(USE_REAL_PAGE_SIZES){
$('.page.no-resize').width('auto')
}
// XXX revise...
if(fit_to_content){
// NOTE: we need to calculate the offset as the actual widths during
// the anumation are not correct...
// XXX in general this is correct, but still there is some error...
if(!USE_REAL_PAGE_SIZES && fit_to_content){
var offset = rW * getPageNumber()-1
} else {
// calculate the target offset...
@ -273,21 +279,21 @@ function fitNPages(n, fit_to_content){
}
var i = rpages.index(cur)
var offset = rW * i-1
// now do the unresized elements...
// now do the no-resize elements...
// XXX this still generates slightly incorrect values...
if(USE_REAL_PAGE_SIZES){
$('.page.no-resize').width('auto')
var nrpages = $('.page.no-resize, .current.page')
i = nrpages.index(cur)
nrpages.splice(i)
nrpages.each(function(_, e){
offset += $(e).width()
offset += $(e).children('.content').width()
})
}
}
if(USE_REAL_PAGE_SIZES){
if(cur.hasClass('no-resize')){
rW = cur.width()
rW = cur.children('.content').width()
}
}
@ -301,6 +307,8 @@ function fitNPages(n, fit_to_content){
/********************************************************* actions ***/
// Argument width is used ONLY to center the page.
//
// NOTE: if n is not given it will be set to current page number
// NOTE: if width is not given it will be set to current page width.
// NOTE: n can be:
@ -308,11 +316,6 @@ function fitNPages(n, fit_to_content){
// - page element
// NOTE: this will fire a 'pageChanged' event on the viewer each time
// it is called...
// XXX make this work for pages of different width...
// use markers -- a marker is any element that will be used to
// allign the magazine so that the marker is at the left edge of
// the viewer...
// by default a page is a marker.
function setCurrentPage(n, offset, width){
if(n == null){
var cur = $('.current.page')