general repo cleanup and pruning...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-02-11 18:02:38 +04:00
parent 76499b6c8f
commit 4b0f7a88ce
4 changed files with 2 additions and 635 deletions

View File

@ -1,325 +0,0 @@
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
<!--DOCTYPE html-->
<html>
<head>
<title>PortableMag</title>
<link rel="stylesheet" href="magazine.css">
<link rel="stylesheet" href="magazine-custom.css">
<script src="ext-lib/jquery.js"></script>
<script src="ext-lib/jquery.touchSwipe.js"></script>
<script src="ext-lib/jstorage.js"></script>
<!-- EXPERIMENTAL -->
<!--
XXX scrollTo is a cool and a powerfull tool but it needs a sustantial code reorganization
this might be a good idea/exersize sometime in the future...
-->
<!--script src="ext-lib/jquery.scrollto.js"></script-->
<script src="lib/jli.js"></script>
<script src="magazine.js"></script>
<script src="navigator.js"></script>
<script src="editor.js"></script>
<!-- configuration, keep this last... -->
<script src="platform.js"></script>
<script src="keybindings.js"></script>
<script src="config.js"></script>
<script>
var DEBUG = true
$(document).ready(function(){
if(DEBUG){
$('.splash').click(function(){
$('.splash').fadeOut()
})
}
$(window)
.resize(viewResizeHandler)
.bind('hashchange', hashChangeHandler)
$(document)
.keydown(makeKeyboardHandler(keybindings))
$('.viewer')
// setup internal events...
.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState)
.on('pageChanged', updatePageNumberIndicator)
.on('magazineDataLoaded', loadMagazineChrome)
// templates...
.on('pageCreated articleCreated magazineCreated ' +
'pageMoved pageRemoved articleMoved articleRemoved', runMagazineTemplates)
// user interactions...
.swipe({
swipeStatus: swipeHandler,
// XXX these get called instead of pinches...
swipeUp: function(event, direction, distance, duration, fingerCount){
if(fingerCount == 2){
toggleBookmark()
} else {
togglePageView()
}
},
// XXX these get called instead of pinches...
swipeDown: function(event, direction, distance, duration, fingerCount){
if(fingerCount == 2){
toggleBookmark()
} else {
togglePageView()
}
},
// XXX for some reasons these lose the competition with swipes...
pinchIn: function(event, direction, distance, duration, fingerCount, pinchZoom) {
if(pinchZoom < distance){
return
}
if(fingerCount == 2){
togglePageView('on')
}
},
// XXX for some reasons these lose the competition with swipes...
pinchOut: function(event, direction, distance, duration, fingerCount, pinchZoom) {
if(pinchZoom < distance){
return
}
if(fingerCount == 2){
togglePageView('off')
}
},
// XXX for some reason this deos not bubble up the nested elements...
click: function(evt, elem){
elem = $(elem)
// bubble up to nearest page...
if(!elem.hasClass('page')
&& elem.parents('.page').length != 0){
elem = elem.parents('.page').first()
}
// click current page to toggle full page view...
if(elem.hasClass('current', 'page')
&& togglePageView('?') == 'off'){
togglePageView('on')
// click any page to set it to current...
} else if(elem.hasClass('page')){
setCurrentPage(elem)
}
return true
},
excludedElements: '.noSwipe, a, [contenteditable=true]',
fingers: $.fn.swipe.fingers.ALL
//fingers: $.fn.swipe.fingers.THREE
})
// XXX this will need to be repeated to newly created elements...
$('[contenteditable=true]')
.on('focus', function(){
toggleInlineEditorMode('on')
})
.on('blur', function(){
toggleInlineEditorMode('off')
})
// load state and setup everything that depends on it...
// XXX load the data with loadJSON()
loadState()
// need to call this once per whole page load....
setupNavigator()
// XXX STUB, needed untill we load everything frim JSON...
$('.viewer').trigger('magazineDataLoaded')
// set default view...
togglePageView('on')
// hide the splash screen...
$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend',
function(){
// NOTE: this will fix a bug on android -- the pages appear
// to rendering quite a bit longer than loading, so on
// loadState() above the current page is set well before
// it is alligned correctly, so this will reset the
// current page after everything is aligned...
setTimeout(function(){
//updateView()
setCurrentPage()
}, 300)
// hide the splash...
setTimeout(function(){
$('.splash').fadeOut()
}, 350)
})
})
</script>
</head>
<body>
<div class="viewer">
<!-- Splash screen -->
<div class="splash noSwipe">
<!-- XXX replace this with a background-image logo... -->
<table width="100%" height="100%"><tr><td align="center" valign="middle">
<h2><i>loading...</i></h2>
</td></tr></table>
</div>
<!-- XXX Magazine title... -->
<div class="top-toolbar">
<div class="left-set">
<div class="button cover title">
<a href="#home"><span class="magazine-title-text">PortableMag</span> <small>(editor)</small></a>
</div>
</div>
<div class="right-set">
<div class="button prev-bookmark">
<a href="#prevBookmark">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Previous bookmark (S-Left)</title>
<path transform="rotate(-180 18.9697 20.1122)" id="svg_13" stroke="#ffffff" d="m20.467497,20.112247l-8.773763,-14.254913l5.778195,0l8.773788,14.254913l-8.773788,14.25491l-5.778195,0l8.773763,-14.25491z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
</g>
</svg>
</a>
</div>
<div class="button toggle-bookmark">
<a href="#bookmark">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Toggle bookmark (B)</title>
<rect stroke="#ffffff" id="svg_1" height="28.604868" width="24.052915" y="5.858955" x="8.807377" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
<path stroke="#ffffff" id="svg_4" d="m21.762226,3.651895l8.416584,0l0,14.510554l-4.124887,-2.792193l-4.291697,2.792193l0,-14.510554l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#ff0000"/>
</g>
</svg>
</a>
</div>
<div class="button next-bookmark">
<a href="#nextBookmark">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Next bookmark (S-Right)</title>
<path stroke="#ffffff" id="svg_11" d="m23.175751,20.132858l-8.773797,-14.254913l5.77823,0l8.773788,14.254913l-8.773788,14.254913l-5.77823,0l8.773797,-14.254913z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
</g>
</svg>
</a>
</div>
<div class="button info" style="opacity: 0.3">
<a href="javascript:alert('not implemented yet...')">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Info</title>
<g id="svg_3">
<circle fill="#000000" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="20.341617" cy="20.120354" r="14.302816" id="svg_2" stroke="#ffffff"/>
<text fill="#ffffff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="19.914334" y="23.397665" id="svg_5" font-size="24" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" transform="matrix(1.02694 0 0 1.02694 -0.348556 4.34707)" stroke="#000000">i</text>
</g>
</g>
</svg>
</a>
</div>
</div>
</div>
<div class="bottom-toolbar">
<!-- this is just an example-->
<div class="controls">
<a href="#home" title="(Home)">Cover</a>
<a href="#prevBookmark" title="(S-Left)">&lt; Bookmark</a>
<a href="#prevArticle" title="(C-Left)">&lt; Article</a>
<a href="#prev" title="Previous page (Left)">&lt; Pa</a><a href="#next" title="Next page (Right)">ge &gt;</a>
<a href="#nextArticle" title="(C-Right)">Article &gt;</a>
<a href="#nextBookmark" title="(S-Right)">Bookmark &gt;</a>
<a href="#end" title="(End)">End</a>
</div>
<!-- position indicator -->
<div class="navigator">
<div class="bar">
<div class="indicator"></div>
</div>
</div>
<div class="page-number">0/0</div>
</div>
<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>
Magazine title: <span class="magazine-title-text">[MAGAZINE NAME]</span><br>
<div class="article-index">[ARTICLE INDEX]</div>
<div class="page-number-text">[PAGE NUMBER]</div>
</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 class="page-number-text">[PAGE NUMBER]</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- vim:set ts=4 sw=4 nowrap : -->

View File

@ -1,151 +0,0 @@
<html>
<head>
<title>layout template</title>
<link rel="stylesheet" href="layout.css">
<script src="jquery.js"></script>
<script src="jquery.touchSwipe.js"></script>
<script src="jquery.exif.js"></script>
<script>
$(document).ready(function(){
$('.article').click(function(){
var name = $(this).attr('id')
return setPageTo(name)
})
$('.viewer')
//.click(toggleIndex)
.swipe({
swipeLeft: nextPage,
swipeRight: prevPage,
swipeUp: showIndex,
swipeDown: hideIndex
})
})
function getPages(){
return $('.article').map(function(e, v){return v.id}).toArray()
}
function curPageIndex(){
var cur = $('.article.current').attr('id')
return getPages().indexOf(cur)
}
function setPageTo(name){
$('.view.current, .article.current').removeClass('current')
$('#'+name).addClass('current')
$('.view.'+name).addClass('current')
return false
}
function nextPage(){
var i = curPageIndex()
var pages = getPages()
if(i+1 >= pages.length){
return
}
setPageTo(pages[i+1])
}
function prevPage(){
var i = curPageIndex()
if(i <= 0){
return
}
setPageTo(getPages()[i-1])
}
function showIndex(){
//$('.previews').fadeIn()
$('.previews').slideDown(100)
}
function hideIndex(){
//$('.previews').fadeOut()
$('.previews').slideUp(100)
}
function toggleIndex(){
if($('.previews').css('display') == 'none'){
showIndex()
} else {
hideIndex()
}
return false
}
</script>
</head>
<body>
<div class="container">
<div class="content">
<div class="section main current">
<div class="viewer">
<div class="view A current">
<h1>Page A</h1>
<p>
The basic actions here are:<br>
<br><b>swipe right</b> &ndash; show next page.
<br><b>swipe left</b> &ndash; show previous page.
<br><b>swipe up</b> &ndash; show page index.
<br><b>swipe down</b> &ndash; hide page index.
</p>
</div>
<div class="view B">
<div style="height: 95%; width: 95%; margin: 2%; border: 5px dotted gray;">
<h2>Page B</h2>
</div>
</div>
<div class="view C">
<h2>Page C</h2>
<!-- images need caching... -->
<!--img src="img.jpg" exif="true" onclick="alert($(this).exifPretty())"/-->
<img src="img.jpg"/>
</div>
<div class="view D">
<h2>Page D</h2>
</div>
</div>
<!-- remove this... -->
<div class="previews">
<div class="article current" id="A">
<div class="preview"></div>
<div class="text">
Article A Title
</div>
</div>
<div class="article" id="B">
<div class="preview"></div>
<div class="text">
Article B Title
</div>
</div>
<div class="article" id="C">
<div class="preview"></div>
<div class="text">
Article C Title
</div>
</div>
<div class="article" id="D">
<div class="preview"></div>
<div class="text">
Article D Title
</div>
</div>
</div>
</div>
</div>
</div>
<!-- vim:set ts=4 sw=4 spell : -->
</body>
</html>

View File

@ -1,158 +0,0 @@
.warning {
font-weight: bold;
font-size: 24px;
color: yellow;
padding-top: 25px;
}
.animated,
.splash,
.content,
.section,
.button,
.article,
.view {
-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;
}
body {
text-align: center;
margin: 0px;
padding: 0px;
font-family: Arial;
color: #a7a9ac;
}
.current.button, .current.article {
color: gray;
font-weight: bold;
}
.container {
position: relative;
width: 100%;
display: inline-block;
}
.header, .content, .footer {
position: relative;
width: 100%;
height: auto;
}
.section-buttons, .previews {
width: 100%;
font-size: 0px;
white-space: nowrap;
left: 0px;
}
.section-buttons {
bottom: 0px;
position: absolute;
}
.button, .article {
display: inline-block;
position: relative;
width: 20%;
cursor: hand;
}
.button {
height: 35px;
font-size: 20px;
width: 25%;
}
.viewer {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.previews {
display: none;
position: absolute;
height: auto;
bottom: 0px;
background-color: white;
opacity: 0.8;
}
.article {
height: auto;
font-size: 18px;
text-align: left;
margin: 2.5%;
margin-top: 5%;
margin-bottom: 7%;
}
.article:first-child {
margin-left: 0px;
}
.article:last-child {
margin-right: 0px;
}
.article .preview {
position: relative;
width: 100%;
height: 100px;
background-color: #d1d2d4;
}
.article .text {
padding: 5px;
padding-top: 10px;
}
.section {
display: none;
min-height: 400px;
padding: 2.5%;
padding-top: 10px;
padding-bottom: 15px;
opacity: 0;
}
.section.current {
display: block;
opacity: 1;
}
.section.main {
padding: 0px;
}
.view {
position: absolute;
width: 100%;
height: 100%;
left:-100%;
/*opacity: 0;*/
background-color: #d1d2d4;
}
.view.current ~ .view {
left:100%;
}
.view.current {
left: 0px;
opacity: 1;
}

View File

@ -140,7 +140,8 @@ $(document).ready(function(){
}
}
}, function(k){console.log(k)}))
},
function(k){console.log(k)}))
// expand the templates...
runMagazineTemplates()