mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-31 12:00:11 +00:00
added JSON format version, basic template handling and two basic templates -- magazine title and page number...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
2c796d930d
commit
d1a8745c1c
15
TODO.otl
15
TODO.otl
@ -1,12 +1,14 @@
|
||||
[_] 37% Priority work
|
||||
[_] 38% 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...
|
||||
[_] 69% general todo
|
||||
[_] JSON: store format version in the JSON file...
|
||||
[_] 75% general todo
|
||||
[_] 0% add two main page themes:
|
||||
[_] light
|
||||
[_] dark
|
||||
[_] JSON: add page URLs as an alternative to direct content...
|
||||
| use AJAX to get remote pages and their nested content
|
||||
[_] JSON: add metadata section that can be downloaded separately...
|
||||
@ -40,12 +42,9 @@
|
||||
[_] 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...
|
||||
[_] Editor: decide weather to make the editor toolbar oriented or floating bars around context...
|
||||
[_] Editor: make the editor switchable...
|
||||
| if it is imported it should be able to switch on and off on demand...
|
||||
[_] Editor: make empty magazine and article visible in the editor...
|
||||
[_] add in-page live templates...
|
||||
| elements that will get generated content, like page numbers etc.
|
||||
[_] 0% populate an example issue
|
||||
[_] template photo page
|
||||
[_] template 3x3 grid
|
||||
@ -57,6 +56,10 @@
|
||||
[_] 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] Editor: decide weather to make the editor toolbar oriented or floating bars around context...
|
||||
[X] add in-page live templates...
|
||||
| elements that will get generated content, like page numbers etc.
|
||||
[X] JSON: store format version in the JSON file...
|
||||
[X] MINOR BUG: on loading a mag from JSON page widths get messed up...
|
||||
| ...in cases where content elements have explicit widths pages do
|
||||
| not get stretched, this can be fixed by simply updating the view
|
||||
|
||||
@ -121,8 +121,7 @@ $(document).ready(function(){
|
||||
|
||||
// load state and setup everything that depends on it...
|
||||
loadState()
|
||||
setupNavigator()
|
||||
setupBookmarkTouchZones()
|
||||
loadMagazineChrome()
|
||||
|
||||
// set default view...
|
||||
togglePageView('on')
|
||||
|
||||
44
index.html
44
index.html
@ -105,9 +105,9 @@ $(document).ready(function(){
|
||||
|
||||
|
||||
// load state and setup everything that depends on it...
|
||||
// XXX load the data with loadJSON()
|
||||
loadState()
|
||||
setupNavigator()
|
||||
setupBookmarkTouchZones()
|
||||
loadMagazineChrome()
|
||||
|
||||
// set default view...
|
||||
togglePageView('on')
|
||||
@ -153,7 +153,7 @@ $(document).ready(function(){
|
||||
|
||||
<div class="top-toolbar">
|
||||
<div class="left-set">
|
||||
<div class="button cover title"><a href="#home">PortableMag</a></div>
|
||||
<div class="button cover title"><a href="#home" class="magazine-title-text">Magazine Title</a></div>
|
||||
</div>
|
||||
<div class="right-set">
|
||||
<div class="button prev-bookmark">
|
||||
@ -224,7 +224,7 @@ $(document).ready(function(){
|
||||
|
||||
<div class="scaler">
|
||||
<div class="aligner">
|
||||
<div class="magazine" title="PortableMag Demo">
|
||||
<div class="magazine" title="PortableMag">
|
||||
<div class="cover page current">
|
||||
<div class="content">
|
||||
<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
|
||||
@ -248,6 +248,8 @@ $(document).ready(function(){
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- if you do not want a page number just do not include it... -->
|
||||
<!--div class="page-number-text">[PAGE NUMBER]</div-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -277,9 +279,11 @@ $(document).ready(function(){
|
||||
</i>
|
||||
</ul>
|
||||
</big>
|
||||
<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
|
||||
<div style="position:absolute; bottom:10px; right:30px">
|
||||
<a href="#next">get started...</a><br>
|
||||
</div>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
@ -329,7 +333,7 @@ $(document).ready(function(){
|
||||
<a href="#back">Go back</a><br>
|
||||
<a href="#forward">Go forward</a><br>
|
||||
</div>
|
||||
<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
|
||||
<div style="position:absolute; right: 30px; bottom:10px;">
|
||||
<a href="#config">configuration demo</a> <a href="#next">next page...</a><br>
|
||||
</div>
|
||||
|
||||
@ -338,6 +342,8 @@ $(document).ready(function(){
|
||||
<h3>This is an example layer</h3>
|
||||
<i>click or tap to hide</i>
|
||||
</div>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -402,11 +408,15 @@ $(document).ready(function(){
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="content" style="background: black; color: gray; padding-left: 20px; padding-right: 20px;">
|
||||
<h1>The Page <i>content</i> has a fixed size...</h1>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
@ -427,6 +437,8 @@ $(document).ready(function(){
|
||||
<p>
|
||||
NOTE: by default the overflow is visible (see <a href="#next">next page</a>), so be carefull.
|
||||
</p>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
@ -442,6 +454,8 @@ $(document).ready(function(){
|
||||
You can see this by resizing the page in browser or rotating the device.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -450,6 +464,8 @@ $(document).ready(function(){
|
||||
<div class="content" name="ArticleAnchorExample">
|
||||
<h1>Page Templates</h1>
|
||||
<a href="#home">home</a><br>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -462,26 +478,36 @@ $(document).ready(function(){
|
||||
<div style="float:left; width: 45%; height: 100%; padding: 10px;">
|
||||
Column 2
|
||||
</div>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page no-resize">
|
||||
<div class="content" style="background:gold">
|
||||
Page
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page no-resize">
|
||||
<div class="content" style="background:yellow; width: 600px">
|
||||
Page
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page no-resize">
|
||||
<div class="content" style="background:gold; width: 400px">
|
||||
Page
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page no-resize">
|
||||
<div class="content" style="background:orange; width: 200px">
|
||||
Page
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -490,18 +516,24 @@ $(document).ready(function(){
|
||||
<div class="content">
|
||||
<h1>Article Cover</h1>
|
||||
<a href="#home">home</a><br>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
Page
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
Page<br>
|
||||
<a href="#home">home</a><br>
|
||||
|
||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
11
magazine.css
11
magazine.css
@ -449,6 +449,17 @@ body {
|
||||
|
||||
|
||||
/******************************************************* templates ***/
|
||||
|
||||
.page-number-text {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
text-align: right;
|
||||
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
||||
/* XXX split these into seporate files... */
|
||||
.caption {
|
||||
display: block;
|
||||
|
||||
47
magazine.js
47
magazine.js
@ -947,6 +947,9 @@ function resetState(){
|
||||
*
|
||||
**********************************************************************/
|
||||
|
||||
var JSON_FORMAT_VERSION = 0.1
|
||||
|
||||
|
||||
// there are two type of metadata handlers:
|
||||
// - 'as-is', this is a trivial read and write value
|
||||
// - explicit reader/writer, this will convert the data from html to JSON
|
||||
@ -1000,8 +1003,6 @@ function writeMetadata(elem, res, metadata){
|
||||
return elem
|
||||
}
|
||||
|
||||
var JSON_VERSION = 0.1
|
||||
|
||||
function buildJSON(export_bookmarks, export_position){
|
||||
function _getContent(_, elem){
|
||||
elem = $(elem)
|
||||
@ -1042,7 +1043,7 @@ function buildJSON(export_bookmarks, export_position){
|
||||
res.pages = $('.magazine > .page, .magazine > .article').map(_getContent).toArray(),
|
||||
res.bookmarks = export_bookmarks ? buildBookmarkList() : []
|
||||
|
||||
res['format-version'] = JSON_VERSION
|
||||
res['format-version'] = JSON_FORMAT_VERSION
|
||||
|
||||
if(export_position){
|
||||
res.position = getPageNumber()
|
||||
@ -1090,7 +1091,7 @@ function loadJSON(data, ignore_chrome){
|
||||
}
|
||||
|
||||
// XXX check version...
|
||||
var version = data['json-version']
|
||||
var version = data['format-version']
|
||||
if(version != JSON_VERSION){
|
||||
console.warn('WARNING: JSON Format Version Mismatch.')
|
||||
}
|
||||
@ -1169,6 +1170,34 @@ function createCoverPage(data){
|
||||
|
||||
|
||||
|
||||
/*********************************************** editor: templates ***/
|
||||
|
||||
var MagazineTemplates = {
|
||||
|
||||
// setup titles...
|
||||
'.magazine-title-text': function(elem){
|
||||
elem.text($('.magazine').attr('title')
|
||||
|| $('.magazine').attr('name')
|
||||
|| 'PortableMag')
|
||||
},
|
||||
|
||||
// setup page numbers...
|
||||
'.page-number-text': function(elem){
|
||||
elem.each(function(_, e){
|
||||
var e = $(e)
|
||||
e.text(getPageNumber(e.parents('.page')))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// XXX call this on page edits...
|
||||
function runMagazineTemplates(){
|
||||
for(var tpl in MagazineTemplates){
|
||||
MagazineTemplates[tpl]($(tpl))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/************************************************ editor: magazine ***/
|
||||
|
||||
// load the data...
|
||||
@ -1181,13 +1210,17 @@ function loadMagazineData(mag){
|
||||
function loadMagazineChrome(position, bookmarks){
|
||||
setupBookmarkTouchZones()
|
||||
setupNavigator()
|
||||
setCurrentPage(position)
|
||||
loadBookmarks(bookmarks != null ? bookmarks : [])
|
||||
if(position){
|
||||
setCurrentPage(position)
|
||||
}
|
||||
if(bookmarks){
|
||||
loadBookmarks(bookmarks != null ? bookmarks : [])
|
||||
}
|
||||
runMagazineTemplates()
|
||||
// XXX do we need to cover this with a splash???
|
||||
updateView()
|
||||
}
|
||||
|
||||
|
||||
// NOTE: we do not need to create any event handlers here specifically
|
||||
// as all events are ahndled by the viewer...
|
||||
function loadMagazine(mag, position, bookmarks){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user