mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 03:00: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
|
||||
[X] 100% default actions
|
||||
[X] show/hide layer
|
||||
[_] 0% stage 3 - issue browser
|
||||
[_] 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
|
||||
[_] 33% stage 3 - editor and templating
|
||||
[_] 0% template engine
|
||||
[_] 66% edition editor / publisher
|
||||
[X] create/delete magazine
|
||||
@ -198,6 +191,13 @@
|
||||
[_] 0% fill template field
|
||||
[_] image
|
||||
[_] 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
|
||||
[_] 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