mirror of
https://github.com/flynx/PortableMag.git
synced 2025-11-03 21:40:17 +00:00
added transition duration configuration to index.html and basic manupulation helper to jli.js
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
7986353f22
commit
e70719d6a0
8
TODO.otl
8
TODO.otl
@ -1,11 +1,11 @@
|
||||
[_] 36% Priority work
|
||||
[_] 37% Priority work
|
||||
[_] 0% TouchSwipe issues...
|
||||
[_] BUG: swipe-back does not cancel a swipe... (TouchSwipe)
|
||||
| ...unless the finger is return to within the threshold of the
|
||||
| touchdown point.
|
||||
[_] BUG: no drag threshold on excludedElements (TouchSwipe)
|
||||
| stalled...
|
||||
[_] 63% general todo
|
||||
[_] 66% general todo
|
||||
[_] 50% move some of the current configuration options to the magazine...
|
||||
[X] page align
|
||||
[_] resize settings (.no-resize class)
|
||||
@ -21,8 +21,6 @@
|
||||
[_] add default empty state to viewer, magazine and article...
|
||||
| use it to trigger a "New Magazine", "New Cover"/"New Article" and
|
||||
| "New Cover"/"New Page" actions...
|
||||
[_] add transition-duration editors to config page (a-la PAGES_IN_RIBBON)...
|
||||
| will help tuning the system,,,
|
||||
[_] EXPERIMENT: Try using scroll instead of left of .magazine....
|
||||
| this might improve speed...
|
||||
[_] JSON: add page URLs as an alternative to direct content...
|
||||
@ -82,6 +80,8 @@
|
||||
[_] BUG: href to existing anchors will mess up layout...
|
||||
| need to find out how can we disable anchor links from actually
|
||||
| going to the anchor...
|
||||
[X] add transition-duration editors to config page (a-la PAGES_IN_RIBBON)...
|
||||
| will help tuning the system,,,
|
||||
[X] BUG: jquery does not set background to none on detached elements...
|
||||
| use transparent instead!!
|
||||
[X] 100% add page sets..
|
||||
|
||||
26
index.html
26
index.html
@ -647,6 +647,16 @@ $(document).ready(function(){
|
||||
<button onclick="$('#PAGES_IN_RIBBON').attr('value', parseFloat($('#PAGES_IN_RIBBON').attr('value'))-0.5); saveSettings()">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Transition duration:
|
||||
</td>
|
||||
<td>
|
||||
<input id="transition_duration" type="text" size="8" style="text-align:center" disabled>
|
||||
<button onclick="$('#transition_duration').attr('value', parseInt($('#transition_duration').attr('value'))*2); saveSettings()">+</button>
|
||||
<button onclick="$('#transition_duration').attr('value', parseInt($('#transition_duration').attr('value'))/2); saveSettings()">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Fit page to view:
|
||||
@ -715,7 +725,7 @@ $(document).ready(function(){
|
||||
|
||||
<hr noshade color="silver">
|
||||
|
||||
<table class="settings" width="100%">
|
||||
<table class="settings" width="100%" style="font-size:small">
|
||||
<tr>
|
||||
<td width="50%">
|
||||
Fingers supported:
|
||||
@ -745,6 +755,9 @@ $(document).ready(function(){
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var TRANSITION_DURATION = 100
|
||||
|
||||
var toggleViewerAnimation = function(){
|
||||
var toggler = createCSSClassToggler(
|
||||
// XXX this will turn off magazine animations...
|
||||
@ -775,6 +788,16 @@ $(document).ready(function(){
|
||||
// we need to reset the visible value in case it was wrong...
|
||||
$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
|
||||
|
||||
// transition duration...
|
||||
var t = parseInt($('#transition_duration').attr('value'))
|
||||
t = t == null ? TRANSITION_DURATION : t
|
||||
t = t < 25 ? 25 : t
|
||||
console.log(t)
|
||||
TRANSITION_DURATION = t
|
||||
setTransitionDuration($('.scaler'), t)
|
||||
setTransitionDuration($('.magazine'), t)
|
||||
|
||||
|
||||
FIT_PAGE_TO_VIEW = $('#FIT_PAGE_TO_VIEW').text() == 'true' ? true : false
|
||||
ANIMATE_WINDOW_RESIZE = $('#ANIMATE_WINDOW_RESIZE').text() == 'true' ? true : false
|
||||
DRAG_FULL_PAGE = $('#DRAG_FULL_PAGE').text() == 'true' ? true : false
|
||||
@ -783,6 +806,7 @@ $(document).ready(function(){
|
||||
FULL_HISTORY_ENABLED = $('#FULL_HISTORY_ENABLED').text() == 'true' ? true : false
|
||||
}
|
||||
function loadSettings(){
|
||||
$('#transition_duration').attr('value', TRANSITION_DURATION)
|
||||
$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
|
||||
$('#FIT_PAGE_TO_VIEW').text(FIT_PAGE_TO_VIEW)
|
||||
$('#ANIMATE_WINDOW_RESIZE').text(ANIMATE_WINDOW_RESIZE)
|
||||
|
||||
14
lib/jli.js
14
lib/jli.js
@ -160,6 +160,20 @@ function setElementScale(elem, scale){
|
||||
}
|
||||
|
||||
|
||||
function setTransitionDuration(elem, ms){
|
||||
if(typeof(ms) == typeof(0)){
|
||||
ms = ms + 'ms'
|
||||
}
|
||||
return elem.css({
|
||||
'transition-duration': ms,
|
||||
'-moz-transition-duration': ms,
|
||||
'-o-transition-duration': ms,
|
||||
'-ms-transition-duration': ms,
|
||||
'-webkit-transition-duration': ms
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/************************************************* keyboard handler **/
|
||||
|
||||
|
||||
30
magazine.css
30
magazine.css
@ -156,11 +156,11 @@ body {
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
-ms-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
-webkit-transition: all 0.1s ease;
|
||||
-moz-transition: all 0.1s ease;
|
||||
-o-transition: all 0.1s ease;
|
||||
-ms-transition: all 0.1s ease;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
/* element used to center and align the magazine... */
|
||||
.aligner {
|
||||
@ -186,11 +186,11 @@ body {
|
||||
/* XXX change to relative units... */
|
||||
margin-left: -400px;
|
||||
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
-ms-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
-webkit-transition: all 0.1s ease;
|
||||
-moz-transition: all 0.1s ease;
|
||||
-o-transition: all 0.1s ease;
|
||||
-ms-transition: all 0.1s ease;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
/* XXX does not appear to work... (likely because :before/:after mess things up) */
|
||||
.magazine:empty {
|
||||
@ -376,11 +376,11 @@ body {
|
||||
|
||||
opacity: 0.7;
|
||||
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
-ms-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
-webkit-transition: all 0.1s ease;
|
||||
-moz-transition: all 0.1s ease;
|
||||
-o-transition: all 0.1s ease;
|
||||
-ms-transition: all 0.1s ease;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.dragging .navigator .bar .indicator {
|
||||
|
||||
@ -415,7 +415,6 @@ function fitNPages(n, fit_to_content){
|
||||
if(!USE_REAL_PAGE_SIZES && fit_to_content){
|
||||
var offset = rW * getPageNumber()-1
|
||||
} else {
|
||||
console.log('slow...')
|
||||
// calculate the target offset...
|
||||
if(USE_REAL_PAGE_SIZES){
|
||||
var rpages = $('.page:not(.no-resize), .current.page')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user