mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 11:10:08 +00:00
more work on the editor...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
bac9d68f34
commit
f09c16d58d
229
TODO.otl
229
TODO.otl
@ -1,11 +1,15 @@
|
||||
[_] 34% Priority work
|
||||
[_] 30% 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...
|
||||
[_] 80% general todo
|
||||
[_] 12% general todo
|
||||
[_] add min-width to magazine and article...
|
||||
[_] 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 global credits and copyright page...
|
||||
| list and link all the used software and authors...
|
||||
[_] 25% add inline editor...
|
||||
@ -29,109 +33,110 @@
|
||||
[_] 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] do a better structure diagram...
|
||||
[X] BUG: initial load on android does not center on the correct page...
|
||||
| for some odd reason only one of the first and second pages are opened
|
||||
| correctly, any other page results in showing the second page and any
|
||||
| click focuses the correct page...
|
||||
|
|
||||
| CAUSE:
|
||||
| the cause for this turned out to be the fact that the page is loaded
|
||||
| allot faster than it is full alligned and rendered on android, so
|
||||
| a fix for this is to set the page some 300ms later...
|
||||
|
|
||||
| XXX find a better solution!
|
||||
[X] make corners clickable for bookmarking...
|
||||
[X] bookmark active zone in upper-right corner of page...
|
||||
[X] SVG icons and logo...
|
||||
[X] add page numbers...
|
||||
[X] 100% bookmarks
|
||||
[X] add next/prev bookmark actions
|
||||
[X] #bookmark anchor
|
||||
[X] bookmark indicators in navigator
|
||||
[X] bookmark indicators in thumbnails
|
||||
[X] bookmark persistence
|
||||
[X] set bookmark from keyboard...
|
||||
[X] set bookmark touch control
|
||||
[X] vanquish opacity effects
|
||||
| they slow everything down considerably!
|
||||
[X] add keyboard navigation...
|
||||
[X] navigator -- indicate position in thumbnail mode...
|
||||
[X] test for stability
|
||||
[X] cleanup code
|
||||
[X] add history #URLs..
|
||||
[X] BUG: something odd going on with window.onResize event...
|
||||
| on android it sometimes fires and sometimes does not -- rotating
|
||||
| the screen does not always scale things correctly...
|
||||
[X] examples for links and anchors...
|
||||
[X] BUG: unstable page fitting.
|
||||
| also broken for portrait layouts...
|
||||
[X] try a slightly different layout...
|
||||
|
|
||||
| +-page--------------+
|
||||
| |+-content---+ |
|
||||
| || | |
|
||||
| || |<---->|
|
||||
| || | |
|
||||
| |+-----------+ |
|
||||
| +-------------------+
|
||||
|
|
||||
|
|
||||
| Thumbnail view
|
||||
| +------------+------+
|
||||
| +------------+\ - - + \ \
|
||||
| \ \\ \ \ \
|
||||
| \ \\ \ \ \
|
||||
| \ \+------------+------+
|
||||
| +------------+------+
|
||||
| ^
|
||||
| +--- margin-right: -X
|
||||
|
|
||||
| Full page view
|
||||
|
|
||||
| +-screen------------+ +----
|
||||
| \ +------------+---\--+\
|
||||
| --\-+\ \ \ \\
|
||||
| \ \\ \ \ \\
|
||||
| +-------------------+ \+----
|
||||
| \+------------+------+
|
||||
| ----+
|
||||
|
|
||||
| NOTE: this is not a good idea if not all the pages have the
|
||||
| same BG...
|
||||
|
|
||||
|
|
||||
| Here is another approach:
|
||||
|
|
||||
| Thumbnail view
|
||||
| +-page--------------+
|
||||
| |+-content---+ |
|
||||
| || | |
|
||||
| || | |
|
||||
| |+-----------+ |
|
||||
| +-------------------+
|
||||
|
|
||||
| Full page view
|
||||
| +-page--------------+
|
||||
| | +-content---+ |
|
||||
| | | | |
|
||||
| | | | |
|
||||
| | +-----------+ |
|
||||
| +-------------------+
|
||||
|
|
||||
|
|
||||
[X] add two finger swipes to navigate between articles...
|
||||
[X] add pinch events...
|
||||
[X] #URL "layers"
|
||||
| navigation to a hidden layer will show the layer, any other
|
||||
| navigation will hide it...
|
||||
[X] something made phonegap version unhappy...
|
||||
| likely the URL logic...
|
||||
|
|
||||
| try and make it optional...
|
||||
[X] add page urls
|
||||
[X] add state saving to local storage
|
||||
[X] use modes (CSS) for thumbnail/page views...
|
||||
[X] done
|
||||
[X] do a better structure diagram...
|
||||
[X] BUG: initial load on android does not center on the correct page...
|
||||
| for some odd reason only one of the first and second pages are opened
|
||||
| correctly, any other page results in showing the second page and any
|
||||
| click focuses the correct page...
|
||||
|
|
||||
| CAUSE:
|
||||
| the cause for this turned out to be the fact that the page is loaded
|
||||
| allot faster than it is full alligned and rendered on android, so
|
||||
| a fix for this is to set the page some 300ms later...
|
||||
|
|
||||
| XXX find a better solution!
|
||||
[X] make corners clickable for bookmarking...
|
||||
[X] bookmark active zone in upper-right corner of page...
|
||||
[X] SVG icons and logo...
|
||||
[X] add page numbers...
|
||||
[X] 100% bookmarks
|
||||
[X] add next/prev bookmark actions
|
||||
[X] #bookmark anchor
|
||||
[X] bookmark indicators in navigator
|
||||
[X] bookmark indicators in thumbnails
|
||||
[X] bookmark persistence
|
||||
[X] set bookmark from keyboard...
|
||||
[X] set bookmark touch control
|
||||
[X] vanquish opacity effects
|
||||
| they slow everything down considerably!
|
||||
[X] add keyboard navigation...
|
||||
[X] navigator -- indicate position in thumbnail mode...
|
||||
[X] test for stability
|
||||
[X] cleanup code
|
||||
[X] add history #URLs..
|
||||
[X] BUG: something odd going on with window.onResize event...
|
||||
| on android it sometimes fires and sometimes does not -- rotating
|
||||
| the screen does not always scale things correctly...
|
||||
[X] examples for links and anchors...
|
||||
[X] BUG: unstable page fitting.
|
||||
| also broken for portrait layouts...
|
||||
[X] try a slightly different layout...
|
||||
|
|
||||
| +-page--------------+
|
||||
| |+-content---+ |
|
||||
| || | |
|
||||
| || |<---->|
|
||||
| || | |
|
||||
| |+-----------+ |
|
||||
| +-------------------+
|
||||
|
|
||||
|
|
||||
| Thumbnail view
|
||||
| +------------+------+
|
||||
| +------------+\ - - + \ \
|
||||
| \ \\ \ \ \
|
||||
| \ \\ \ \ \
|
||||
| \ \+------------+------+
|
||||
| +------------+------+
|
||||
| ^
|
||||
| +--- margin-right: -X
|
||||
|
|
||||
| Full page view
|
||||
|
|
||||
| +-screen------------+ +----
|
||||
| \ +------------+---\--+\
|
||||
| --\-+\ \ \ \\
|
||||
| \ \\ \ \ \\
|
||||
| +-------------------+ \+----
|
||||
| \+------------+------+
|
||||
| ----+
|
||||
|
|
||||
| NOTE: this is not a good idea if not all the pages have the
|
||||
| same BG...
|
||||
|
|
||||
|
|
||||
| Here is another approach:
|
||||
|
|
||||
| Thumbnail view
|
||||
| +-page--------------+
|
||||
| |+-content---+ |
|
||||
| || | |
|
||||
| || | |
|
||||
| |+-----------+ |
|
||||
| +-------------------+
|
||||
|
|
||||
| Full page view
|
||||
| +-page--------------+
|
||||
| | +-content---+ |
|
||||
| | | | |
|
||||
| | | | |
|
||||
| | +-----------+ |
|
||||
| +-------------------+
|
||||
|
|
||||
|
|
||||
[X] add two finger swipes to navigate between articles...
|
||||
[X] add pinch events...
|
||||
[X] #URL "layers"
|
||||
| navigation to a hidden layer will show the layer, any other
|
||||
| navigation will hide it...
|
||||
[X] something made phonegap version unhappy...
|
||||
| likely the URL logic...
|
||||
|
|
||||
| try and make it optional...
|
||||
[X] add page urls
|
||||
[X] add state saving to local storage
|
||||
[X] use modes (CSS) for thumbnail/page views...
|
||||
[X] 100% stage 1 - basic features
|
||||
[X] global navigation bar
|
||||
[X] real magazine structure
|
||||
@ -178,13 +183,13 @@
|
||||
[_] 0% issue download
|
||||
[_] whole edition dowload and update (primary mode)
|
||||
[_] seporate issue download (secondary)
|
||||
[_] 0% stage 4 - advanced features
|
||||
[_] 0% edition editor / publisher
|
||||
[_] create/delete edition
|
||||
[_] cover
|
||||
[_] 0% story
|
||||
[_] add
|
||||
| from template
|
||||
[_] 46% stage 4 - editor and templating
|
||||
[_] % template engine
|
||||
[_] 46% edition editor / publisher
|
||||
[X] create/delete magazine
|
||||
[X] cover
|
||||
[_] 33% article
|
||||
[X] add
|
||||
[_] delete
|
||||
[_] move
|
||||
[_] 0% page
|
||||
|
||||
@ -50,6 +50,7 @@ $(document).ready(function(){
|
||||
// editor specific events...
|
||||
.on('pageCreated articleCreated magazineCreated', resetNavigator)
|
||||
.on('pageMoved articleMoved', resetNavigator)
|
||||
.on('pageRemoved articleRemoved', resetNavigator)
|
||||
|
||||
// user interactions...
|
||||
.swipe({
|
||||
|
||||
130
magazine.js
130
magazine.js
@ -876,6 +876,59 @@ function resetState(){
|
||||
|
||||
/********************************************************** editor ***/
|
||||
|
||||
// basic constructors...
|
||||
function _createEmptyMagazine(title){
|
||||
return $('<div/>')
|
||||
.addClass('magazine')
|
||||
.attr({
|
||||
title: title
|
||||
})
|
||||
}
|
||||
function _createMagazine(title, magazine_cover, article_cover){
|
||||
if(magazine_cover == null){
|
||||
magazine_cover = title
|
||||
}
|
||||
if(article_cover == null){
|
||||
article_cover = 'Article'
|
||||
}
|
||||
return _createEmptyMagazine(title)
|
||||
// a magazine by default has a cover...
|
||||
.append(_createCoverPage(magazine_cover))
|
||||
.append(_createArticle(article_cover))
|
||||
}
|
||||
// XXX do we need a title here???
|
||||
function _createEmptyArticle(){
|
||||
return $('<div/>')
|
||||
.addClass('article')
|
||||
}
|
||||
function _createArticle(template){
|
||||
return _createEmptyArticle()
|
||||
.append(_createCoverPage(template))
|
||||
}
|
||||
function _createPage(template){
|
||||
return $('<div/>')
|
||||
.addClass('page')
|
||||
.append($('<div/>')
|
||||
.addClass('content')
|
||||
.text(template))
|
||||
}
|
||||
function _createCoverPage(template){
|
||||
return _createPage(template).addClass('cover')
|
||||
}
|
||||
|
||||
|
||||
// XXX create magazine...
|
||||
// - magazine
|
||||
// - cover
|
||||
// - article
|
||||
// - cover
|
||||
function createMagazine(title, cover, article){
|
||||
clearMagazine()
|
||||
var mag = _createMagazine(title, cover, article).appendTo($('.aligner'))
|
||||
setCurrentPage()
|
||||
setupNavigator()
|
||||
return mag
|
||||
}
|
||||
// XXX some things get really surprized when this is called, make things
|
||||
// work with the mag cleared...
|
||||
function clearMagazine(){
|
||||
@ -884,31 +937,52 @@ function clearMagazine(){
|
||||
clearNavigator()
|
||||
}
|
||||
|
||||
// XXX create magazine...
|
||||
// - magazine
|
||||
// - cover
|
||||
function createMagazine(){
|
||||
// XXX
|
||||
}
|
||||
|
||||
|
||||
// XXX create article (magazine, title, position)...
|
||||
// - article
|
||||
// - cover
|
||||
function createArticleBefore(article, title){
|
||||
if(article == null){
|
||||
article = $('.current.page').parents('.article')
|
||||
}
|
||||
// XXX
|
||||
}
|
||||
function createArticleAfter(article, title){
|
||||
if(article == null){
|
||||
article = $('.current.page').parents('.article')
|
||||
}
|
||||
// XXX
|
||||
}
|
||||
function removeArticle(article){
|
||||
// XXX
|
||||
$('.viewer').trigger('articleRemoved', res)
|
||||
}
|
||||
function shiftArticleLeft(article){
|
||||
// XXX
|
||||
$('.viewer').trigger('articleMoved', res)
|
||||
}
|
||||
function shiftArticleRight(article){
|
||||
// XXX
|
||||
$('.viewer').trigger('articleMoved', res)
|
||||
}
|
||||
|
||||
|
||||
// XXX create page (article, template, position)...
|
||||
// - page
|
||||
// - content
|
||||
function createPageIn(article, template){
|
||||
// XXX
|
||||
if(article == null){
|
||||
article = $('.current.page').parents('.article')
|
||||
}
|
||||
// no article
|
||||
if(article.length == 0){
|
||||
return
|
||||
}
|
||||
var res = _createPage(template).appendTo(article)
|
||||
$('.viewer').trigger('pageCreated', res)
|
||||
|
||||
return res
|
||||
}
|
||||
// XXX the next two are almost identical...
|
||||
// XXX prevent this from working outside of an article....
|
||||
@ -917,12 +991,7 @@ function createPageAfter(page, template){
|
||||
page = $('.current.page')
|
||||
}
|
||||
|
||||
var res = $('<div/>')
|
||||
.addClass('page')
|
||||
.append($('<div/>')
|
||||
.addClass('content')
|
||||
.text('Page'))
|
||||
.insertAfter(page)
|
||||
var res = _createPage(template).insertAfter(page)
|
||||
|
||||
$('.viewer').trigger('pageCreated', res)
|
||||
|
||||
@ -934,19 +1003,36 @@ function createPageBefore(page, template){
|
||||
page = $('.current.page')
|
||||
}
|
||||
|
||||
var res = $('<div/>')
|
||||
.addClass('page')
|
||||
.append($('<div/>')
|
||||
.addClass('content')
|
||||
.text('Page'))
|
||||
.insertBefore(page)
|
||||
var res = _createPage(template).insertBefore(page)
|
||||
|
||||
$('.viewer').trigger('pageCreated', res)
|
||||
|
||||
return res
|
||||
}
|
||||
function removePage(page){
|
||||
if(page == null){
|
||||
page = $('.current.page')
|
||||
}
|
||||
|
||||
var cur = getPageNumber()
|
||||
page.remove()
|
||||
setCurrentPage(cur)
|
||||
|
||||
$('.viewer').trigger('pageRemoved', page)
|
||||
|
||||
return page
|
||||
}
|
||||
|
||||
// XXX should this move to before or after???
|
||||
function movePageTo(page, position){
|
||||
// XXX
|
||||
$('.viewer').trigger('pageMoved', page)
|
||||
return page
|
||||
}
|
||||
// XXX make this push pages between articles...
|
||||
function pushPageLeft(page){
|
||||
// or should it be a seporate method...
|
||||
// XXX should this contain a number of steps?
|
||||
function shiftPageLeft(page){
|
||||
if(page == null){
|
||||
page = $('.current.page')
|
||||
}
|
||||
@ -964,7 +1050,9 @@ function pushPageLeft(page){
|
||||
return page
|
||||
}
|
||||
// XXX make this push pages between articles...
|
||||
function pushPageRight(page){
|
||||
// or should it be a seporate method...
|
||||
// XXX should this contain a number of steps?
|
||||
function shiftPageRight(page){
|
||||
if(page == null){
|
||||
page = $('.current.page')
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user