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...
|
[_] 0% TouchSwipe issues...
|
||||||
[_] BUG: swipe-back does not cancel a swipe... (TouchSwipe)
|
[_] BUG: swipe-back does not cancel a swipe... (TouchSwipe)
|
||||||
| ...unless the finger is return to within the threshold of the
|
| ...unless the finger is return to within the threshold of the
|
||||||
| touchdown point.
|
| touchdown point.
|
||||||
[_] BUG: no drag threshold on excludedElements (TouchSwipe)
|
[_] BUG: no drag threshold on excludedElements (TouchSwipe)
|
||||||
| stalled...
|
| 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...
|
[_] add global credits and copyright page...
|
||||||
| list and link all the used software and authors...
|
| list and link all the used software and authors...
|
||||||
[_] 25% add inline editor...
|
[_] 25% add inline editor...
|
||||||
@ -29,109 +33,110 @@
|
|||||||
[_] BUG: href to existing anchors will mess up layout...
|
[_] BUG: href to existing anchors will mess up layout...
|
||||||
| need to find out how can we disable anchor links from actually
|
| need to find out how can we disable anchor links from actually
|
||||||
| going to the anchor...
|
| going to the anchor...
|
||||||
[X] do a better structure diagram...
|
[X] done
|
||||||
[X] BUG: initial load on android does not center on the correct page...
|
[X] do a better structure diagram...
|
||||||
| for some odd reason only one of the first and second pages are opened
|
[X] BUG: initial load on android does not center on the correct page...
|
||||||
| correctly, any other page results in showing the second page and any
|
| for some odd reason only one of the first and second pages are opened
|
||||||
| click focuses the correct page...
|
| 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
|
| CAUSE:
|
||||||
| allot faster than it is full alligned and rendered on android, so
|
| the cause for this turned out to be the fact that the page is loaded
|
||||||
| a fix for this is to set the page some 300ms later...
|
| 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...
|
| XXX find a better solution!
|
||||||
[X] bookmark active zone in upper-right corner of page...
|
[X] make corners clickable for bookmarking...
|
||||||
[X] SVG icons and logo...
|
[X] bookmark active zone in upper-right corner of page...
|
||||||
[X] add page numbers...
|
[X] SVG icons and logo...
|
||||||
[X] 100% bookmarks
|
[X] add page numbers...
|
||||||
[X] add next/prev bookmark actions
|
[X] 100% bookmarks
|
||||||
[X] #bookmark anchor
|
[X] add next/prev bookmark actions
|
||||||
[X] bookmark indicators in navigator
|
[X] #bookmark anchor
|
||||||
[X] bookmark indicators in thumbnails
|
[X] bookmark indicators in navigator
|
||||||
[X] bookmark persistence
|
[X] bookmark indicators in thumbnails
|
||||||
[X] set bookmark from keyboard...
|
[X] bookmark persistence
|
||||||
[X] set bookmark touch control
|
[X] set bookmark from keyboard...
|
||||||
[X] vanquish opacity effects
|
[X] set bookmark touch control
|
||||||
| they slow everything down considerably!
|
[X] vanquish opacity effects
|
||||||
[X] add keyboard navigation...
|
| they slow everything down considerably!
|
||||||
[X] navigator -- indicate position in thumbnail mode...
|
[X] add keyboard navigation...
|
||||||
[X] test for stability
|
[X] navigator -- indicate position in thumbnail mode...
|
||||||
[X] cleanup code
|
[X] test for stability
|
||||||
[X] add history #URLs..
|
[X] cleanup code
|
||||||
[X] BUG: something odd going on with window.onResize event...
|
[X] add history #URLs..
|
||||||
| on android it sometimes fires and sometimes does not -- rotating
|
[X] BUG: something odd going on with window.onResize event...
|
||||||
| the screen does not always scale things correctly...
|
| on android it sometimes fires and sometimes does not -- rotating
|
||||||
[X] examples for links and anchors...
|
| the screen does not always scale things correctly...
|
||||||
[X] BUG: unstable page fitting.
|
[X] examples for links and anchors...
|
||||||
| also broken for portrait layouts...
|
[X] BUG: unstable page fitting.
|
||||||
[X] try a slightly different layout...
|
| also broken for portrait layouts...
|
||||||
|
|
[X] try a slightly different layout...
|
||||||
| +-page--------------+
|
|
|
||||||
| |+-content---+ |
|
| +-page--------------+
|
||||||
| || | |
|
| |+-content---+ |
|
||||||
| || |<---->|
|
| || | |
|
||||||
| || | |
|
| || |<---->|
|
||||||
| |+-----------+ |
|
| || | |
|
||||||
| +-------------------+
|
| |+-----------+ |
|
||||||
|
|
| +-------------------+
|
||||||
|
|
|
|
||||||
| Thumbnail view
|
|
|
||||||
| +------------+------+
|
| Thumbnail view
|
||||||
| +------------+\ - - + \ \
|
| +------------+------+
|
||||||
| \ \\ \ \ \
|
| +------------+\ - - + \ \
|
||||||
| \ \\ \ \ \
|
| \ \\ \ \ \
|
||||||
| \ \+------------+------+
|
| \ \\ \ \ \
|
||||||
| +------------+------+
|
| \ \+------------+------+
|
||||||
| ^
|
| +------------+------+
|
||||||
| +--- margin-right: -X
|
| ^
|
||||||
|
|
| +--- margin-right: -X
|
||||||
| Full page view
|
|
|
||||||
|
|
| Full page view
|
||||||
| +-screen------------+ +----
|
|
|
||||||
| \ +------------+---\--+\
|
| +-screen------------+ +----
|
||||||
| --\-+\ \ \ \\
|
| \ +------------+---\--+\
|
||||||
| \ \\ \ \ \\
|
| --\-+\ \ \ \\
|
||||||
| +-------------------+ \+----
|
| \ \\ \ \ \\
|
||||||
| \+------------+------+
|
| +-------------------+ \+----
|
||||||
| ----+
|
| \+------------+------+
|
||||||
|
|
| ----+
|
||||||
| NOTE: this is not a good idea if not all the pages have the
|
|
|
||||||
| same BG...
|
| NOTE: this is not a good idea if not all the pages have the
|
||||||
|
|
| same BG...
|
||||||
|
|
|
|
||||||
| Here is another approach:
|
|
|
||||||
|
|
| Here is another approach:
|
||||||
| Thumbnail view
|
|
|
||||||
| +-page--------------+
|
| Thumbnail view
|
||||||
| |+-content---+ |
|
| +-page--------------+
|
||||||
| || | |
|
| |+-content---+ |
|
||||||
| || | |
|
| || | |
|
||||||
| |+-----------+ |
|
| || | |
|
||||||
| +-------------------+
|
| |+-----------+ |
|
||||||
|
|
| +-------------------+
|
||||||
| Full page view
|
|
|
||||||
| +-page--------------+
|
| Full page view
|
||||||
| | +-content---+ |
|
| +-page--------------+
|
||||||
| | | | |
|
| | +-content---+ |
|
||||||
| | | | |
|
| | | | |
|
||||||
| | +-----------+ |
|
| | | | |
|
||||||
| +-------------------+
|
| | +-----------+ |
|
||||||
|
|
| +-------------------+
|
||||||
|
|
|
|
||||||
[X] add two finger swipes to navigate between articles...
|
|
|
||||||
[X] add pinch events...
|
[X] add two finger swipes to navigate between articles...
|
||||||
[X] #URL "layers"
|
[X] add pinch events...
|
||||||
| navigation to a hidden layer will show the layer, any other
|
[X] #URL "layers"
|
||||||
| navigation will hide it...
|
| navigation to a hidden layer will show the layer, any other
|
||||||
[X] something made phonegap version unhappy...
|
| navigation will hide it...
|
||||||
| likely the URL logic...
|
[X] something made phonegap version unhappy...
|
||||||
|
|
| likely the URL logic...
|
||||||
| try and make it optional...
|
|
|
||||||
[X] add page urls
|
| try and make it optional...
|
||||||
[X] add state saving to local storage
|
[X] add page urls
|
||||||
[X] use modes (CSS) for thumbnail/page views...
|
[X] add state saving to local storage
|
||||||
|
[X] use modes (CSS) for thumbnail/page views...
|
||||||
[X] 100% stage 1 - basic features
|
[X] 100% stage 1 - basic features
|
||||||
[X] global navigation bar
|
[X] global navigation bar
|
||||||
[X] real magazine structure
|
[X] real magazine structure
|
||||||
@ -178,13 +183,13 @@
|
|||||||
[_] 0% issue download
|
[_] 0% issue download
|
||||||
[_] whole edition dowload and update (primary mode)
|
[_] whole edition dowload and update (primary mode)
|
||||||
[_] seporate issue download (secondary)
|
[_] seporate issue download (secondary)
|
||||||
[_] 0% stage 4 - advanced features
|
[_] 46% stage 4 - editor and templating
|
||||||
[_] 0% edition editor / publisher
|
[_] % template engine
|
||||||
[_] create/delete edition
|
[_] 46% edition editor / publisher
|
||||||
[_] cover
|
[X] create/delete magazine
|
||||||
[_] 0% story
|
[X] cover
|
||||||
[_] add
|
[_] 33% article
|
||||||
| from template
|
[X] add
|
||||||
[_] delete
|
[_] delete
|
||||||
[_] move
|
[_] move
|
||||||
[_] 0% page
|
[_] 0% page
|
||||||
|
|||||||
@ -50,6 +50,7 @@ $(document).ready(function(){
|
|||||||
// editor specific events...
|
// editor specific events...
|
||||||
.on('pageCreated articleCreated magazineCreated', resetNavigator)
|
.on('pageCreated articleCreated magazineCreated', resetNavigator)
|
||||||
.on('pageMoved articleMoved', resetNavigator)
|
.on('pageMoved articleMoved', resetNavigator)
|
||||||
|
.on('pageRemoved articleRemoved', resetNavigator)
|
||||||
|
|
||||||
// user interactions...
|
// user interactions...
|
||||||
.swipe({
|
.swipe({
|
||||||
|
|||||||
130
magazine.js
130
magazine.js
@ -876,6 +876,59 @@ function resetState(){
|
|||||||
|
|
||||||
/********************************************************** editor ***/
|
/********************************************************** 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
|
// XXX some things get really surprized when this is called, make things
|
||||||
// work with the mag cleared...
|
// work with the mag cleared...
|
||||||
function clearMagazine(){
|
function clearMagazine(){
|
||||||
@ -884,31 +937,52 @@ function clearMagazine(){
|
|||||||
clearNavigator()
|
clearNavigator()
|
||||||
}
|
}
|
||||||
|
|
||||||
// XXX create magazine...
|
|
||||||
// - magazine
|
|
||||||
// - cover
|
|
||||||
function createMagazine(){
|
|
||||||
// XXX
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// XXX create article (magazine, title, position)...
|
// XXX create article (magazine, title, position)...
|
||||||
// - article
|
// - article
|
||||||
// - cover
|
// - cover
|
||||||
function createArticleBefore(article, title){
|
function createArticleBefore(article, title){
|
||||||
|
if(article == null){
|
||||||
|
article = $('.current.page').parents('.article')
|
||||||
|
}
|
||||||
// XXX
|
// XXX
|
||||||
}
|
}
|
||||||
function createArticleAfter(article, title){
|
function createArticleAfter(article, title){
|
||||||
|
if(article == null){
|
||||||
|
article = $('.current.page').parents('.article')
|
||||||
|
}
|
||||||
// XXX
|
// 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)...
|
// XXX create page (article, template, position)...
|
||||||
// - page
|
// - page
|
||||||
// - content
|
// - content
|
||||||
function createPageIn(article, template){
|
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)
|
$('.viewer').trigger('pageCreated', res)
|
||||||
|
|
||||||
|
return res
|
||||||
}
|
}
|
||||||
// XXX the next two are almost identical...
|
// XXX the next two are almost identical...
|
||||||
// XXX prevent this from working outside of an article....
|
// XXX prevent this from working outside of an article....
|
||||||
@ -917,12 +991,7 @@ function createPageAfter(page, template){
|
|||||||
page = $('.current.page')
|
page = $('.current.page')
|
||||||
}
|
}
|
||||||
|
|
||||||
var res = $('<div/>')
|
var res = _createPage(template).insertAfter(page)
|
||||||
.addClass('page')
|
|
||||||
.append($('<div/>')
|
|
||||||
.addClass('content')
|
|
||||||
.text('Page'))
|
|
||||||
.insertAfter(page)
|
|
||||||
|
|
||||||
$('.viewer').trigger('pageCreated', res)
|
$('.viewer').trigger('pageCreated', res)
|
||||||
|
|
||||||
@ -934,19 +1003,36 @@ function createPageBefore(page, template){
|
|||||||
page = $('.current.page')
|
page = $('.current.page')
|
||||||
}
|
}
|
||||||
|
|
||||||
var res = $('<div/>')
|
var res = _createPage(template).insertBefore(page)
|
||||||
.addClass('page')
|
|
||||||
.append($('<div/>')
|
|
||||||
.addClass('content')
|
|
||||||
.text('Page'))
|
|
||||||
.insertBefore(page)
|
|
||||||
|
|
||||||
$('.viewer').trigger('pageCreated', res)
|
$('.viewer').trigger('pageCreated', res)
|
||||||
|
|
||||||
return 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...
|
// 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){
|
if(page == null){
|
||||||
page = $('.current.page')
|
page = $('.current.page')
|
||||||
}
|
}
|
||||||
@ -964,7 +1050,9 @@ function pushPageLeft(page){
|
|||||||
return page
|
return page
|
||||||
}
|
}
|
||||||
// XXX make this push pages between articles...
|
// 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){
|
if(page == null){
|
||||||
page = $('.current.page')
|
page = $('.current.page')
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user