mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 19:20:09 +00:00
added article lister for simpler editing...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
082771dbf2
commit
f677dcae26
16
TODO.otl
16
TODO.otl
@ -174,14 +174,7 @@
|
|||||||
[_] plain
|
[_] plain
|
||||||
[X] 100% default actions
|
[X] 100% default actions
|
||||||
[X] show/hide layer
|
[X] show/hide layer
|
||||||
[_] 0% stage 3 - issue browser
|
[_] 33% stage 3 - editor and templating
|
||||||
[_] issue browser structure
|
|
||||||
[_] 0% issue navigation
|
|
||||||
[_] issue list
|
|
||||||
[_] 0% issue download
|
|
||||||
[_] whole edition dowload and update (primary mode)
|
|
||||||
[_] seporate issue download (secondary)
|
|
||||||
[_] 33% stage 4 - editor and templating
|
|
||||||
[_] 0% template engine
|
[_] 0% template engine
|
||||||
[_] 66% edition editor / publisher
|
[_] 66% edition editor / publisher
|
||||||
[X] create/delete magazine
|
[X] create/delete magazine
|
||||||
@ -198,6 +191,13 @@
|
|||||||
[_] 0% fill template field
|
[_] 0% fill template field
|
||||||
[_] image
|
[_] image
|
||||||
[_] text
|
[_] text
|
||||||
|
[_] 0% stage 4 - issue browser
|
||||||
|
[_] issue browser structure
|
||||||
|
[_] 0% issue navigation
|
||||||
|
[_] issue list
|
||||||
|
[_] 0% issue download
|
||||||
|
[_] whole edition dowload and update (primary mode)
|
||||||
|
[_] seporate issue download (secondary)
|
||||||
|
|
||||||
[_] 0% Low priority todo
|
[_] 0% Low priority todo
|
||||||
[_] vertically scrollable pages....
|
[_] vertically scrollable pages....
|
||||||
|
|||||||
168
lister.css
Executable file
168
lister.css
Executable file
@ -0,0 +1,168 @@
|
|||||||
|
/**********************************************************************
|
||||||
|
*
|
||||||
|
**********************************************************************/
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/************************************* layers and hidable elements ***/
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/* keep this empty... */
|
||||||
|
.shown {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************** pages ***/
|
||||||
|
.page {
|
||||||
|
/* XXX make this browser-sized... */
|
||||||
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page .content {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
white-space: normal;
|
||||||
|
|
||||||
|
/* these set the "safe" marks for page content */
|
||||||
|
width: 800px;
|
||||||
|
height: 600px;
|
||||||
|
|
||||||
|
border: dashed 1px red;
|
||||||
|
}
|
||||||
|
.content:after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: -90px;
|
||||||
|
width: 80px;
|
||||||
|
height: 30px;
|
||||||
|
padding-left: 15px;
|
||||||
|
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
background: gray;
|
||||||
|
color: white;
|
||||||
|
border-left: solid 5px black;
|
||||||
|
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page .content:after {
|
||||||
|
content: "Page";
|
||||||
|
}
|
||||||
|
.cover .content:after {
|
||||||
|
content: "Cover";
|
||||||
|
}
|
||||||
|
|
||||||
|
.page .content:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
z-index: 9999;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
border-bottom: dashed red 1px;
|
||||||
|
border-left: dashed red 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/************************************************** general layout ***/
|
||||||
|
|
||||||
|
/* magazine article, this can contain a cover and a number of pages */
|
||||||
|
.article {
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
font-size: 0px;
|
||||||
|
min-width: 200px;
|
||||||
|
|
||||||
|
border: dashed red 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article:after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
content: 'Article';
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
|
||||||
|
padding-right: 5px;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
background: gray;
|
||||||
|
color: white;
|
||||||
|
border-right: solid 5px black;
|
||||||
|
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article > .cover {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/******************************************************* templates ***/
|
||||||
|
/* XXX split these into seporate files... */
|
||||||
|
.caption {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
padding: 15px;
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
-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;
|
||||||
|
}
|
||||||
|
.caption.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
.caption.shown {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
/* keep this at the end... */
|
||||||
|
.unanimated {
|
||||||
|
-webkit-transition: none;
|
||||||
|
-moz-transition: none;
|
||||||
|
-o-transition: all 0 ease;
|
||||||
|
-ms-transition: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
109
lister.html
Executable file
109
lister.html
Executable file
@ -0,0 +1,109 @@
|
|||||||
|
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
|
||||||
|
<!--DOCTYPE html-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>PortableMag</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="lister.css">
|
||||||
|
<link rel="stylesheet" href="magazine-custom.css">
|
||||||
|
|
||||||
|
<script src="jquery.js"></script>
|
||||||
|
<!-- XXX make this optional... -->
|
||||||
|
<script src="ckeditor/ckeditor.js"></script>
|
||||||
|
|
||||||
|
<script src="jli.js"></script>
|
||||||
|
<script src="magazine.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var DEBUG = true
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
$('.viewer')
|
||||||
|
// setup internal events...
|
||||||
|
.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState)
|
||||||
|
.on('pageChanged', updatePageNumberIndicator)
|
||||||
|
.on('bookmarksCleared', clearBookmarkIndicators)
|
||||||
|
.on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)})
|
||||||
|
.on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)})
|
||||||
|
|
||||||
|
// editor specific events...
|
||||||
|
.on('pageCreated articleCreated magazineCreated', resetNavigator)
|
||||||
|
.on('pageMoved articleMoved', resetNavigator)
|
||||||
|
.on('pageRemoved articleRemoved', resetNavigator)
|
||||||
|
|
||||||
|
// XXX this will need to be repeated to newly created elements...
|
||||||
|
$('[contenteditable=true]')
|
||||||
|
.on('focus', function(){
|
||||||
|
toggleEditorMode('on')
|
||||||
|
})
|
||||||
|
.on('blur', function(){
|
||||||
|
toggleEditorMode('off')
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="viewer">
|
||||||
|
<div class="scaler">
|
||||||
|
<div class="aligner">
|
||||||
|
<div class="magazine" title="PortableMag Templates">
|
||||||
|
<div class="cover page current">
|
||||||
|
<div class="content">
|
||||||
|
<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
|
||||||
|
<h1 style="color:silver; font-size: 20px; margin-left:10px">A suit for publishing portable periodic magazines on mobile platforms.</h1-->
|
||||||
|
|
||||||
|
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
||||||
|
<g>
|
||||||
|
<title>PortableMag cover</title>
|
||||||
|
<defs>
|
||||||
|
<path id="circle_path" d="m177.720383,238.333344c0,-82.290771 66.655533,-148.946304 148.946304,-148.946304c82.290771,0 148.946289,66.655533 148.946289,148.946304c0,82.290771 -66.655518,148.946289 -148.946289,148.946289c-82.290771,0 -148.946304,-66.655518 -148.946304,-148.946289z"/>
|
||||||
|
</defs>
|
||||||
|
<text fill="#7f7f7f" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="306" y="434.33334" id="svg_2" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve"/>
|
||||||
|
<g id="svg_1">
|
||||||
|
<g id="svg_8">
|
||||||
|
<text stroke="#000000" fill="#7f7f7f" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="224.898504" y="309.870464" id="svg_6" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" font-weight="bold" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Mag</text>
|
||||||
|
<text stroke="#000000" fill="#a8a8a8" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="156.581224" y="309.650884" id="svg_7" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Portable</text>
|
||||||
|
</g>
|
||||||
|
<text stroke="#000000" fill="#afafaf" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="261.526111" y="338.824173" id="svg_4" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(1.53525 0 0 1.53525 -34.4106 -167.936)" font-weight="normal" font-style="normal">A suit for publishing portable periodic magazines on mobile platforms.</text>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- XXX do we need a Magazine Credits page??? -->
|
||||||
|
|
||||||
|
<div class="article">
|
||||||
|
<div class="cover page">
|
||||||
|
<div class="content">
|
||||||
|
<h1 name="basics" style="color:gray;font-size:100px;">Templates...</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="page">
|
||||||
|
<div class="content">
|
||||||
|
<h1 contenteditable="true">Two column</h1>
|
||||||
|
<div contenteditable="true" style="float:left; width: 45%; height: 100%; margin: 10px;">
|
||||||
|
Column 1
|
||||||
|
</div>
|
||||||
|
<div contenteditable="true" style="float:left; width: 45%; height: 100%; padding: 10px;">
|
||||||
|
Column 2
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<!-- vim:set ts=4 sw=4 nowrap : -->
|
||||||
Loading…
x
Reference in New Issue
Block a user