Permalink
Browse files

Clean up, api consolidation and e-reader demo

  • Loading branch information...
cubiq committed Oct 21, 2011
1 parent d9ecebd commit b9204cc1c3c237a67fc47e21b7eea5cf835b3233
View
@@ -1,4 +1,4 @@
-SwipeView v0.3 - 2011-10-15
+SwipeView v0.9 - 2011-10-21
===========================
Virtually infinite loop-able horizontal carousel for mobile webkit (in 4kb).
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
+ <title>SwipeView</title>
+ <link href="style.css" rel="stylesheet" type="text/css">
+ <script type="text/javascript" src="../../src/swipeview.js"></script>
+
+<script type="text/javascript">
+document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
+
+window.addEventListener('load', function () {
+ var ereader,
+ el,
+ i,
+ pageIndex,
+ pages = [],
+ req = new XMLHttpRequest();
+
+ ereader = new SwipeView('#wrapper', { hastyPageFlip:true });
+
+ // Ajax request
+ req.open('GET', 'alice.txt', true);
+ req.onreadystatechange = function () {
+ if (req.readyState != 4) return;
+
+ paginate(req.status != 200 && req.status != 304 ? false : req.responseText);
+
+ req = null;
+ }
+ req.send(null);
+
+ function paginate(book) {
+ var that = this,
+ container,
+ helper,
+ words = [],
+ segment,
+ wordCount = 100,
+ avgWordCount = 0,
+ pbCurrent = 0,
+ size;
+
+ if (!book) return;
+
+ book = book.replace(/\n\n/g, ' <br><br>').replace(/\n/g, ' ');
+ pbTotal = book.length;
+
+ container = document.createElement('div');
+ container.style.visibility = 'hidden';
+ container.innerHTML = '<div id="ereader-helper"></div>';
+ ereader.slider.appendChild(container);
+ helper = document.getElementById('ereader-helper');
+ helper.innerHTML = '';
+
+ while (book) {
+ words = book.split(' ', wordCount);
+ segment = words.join(' ');
+ helper.innerHTML = segment;
+
+ if (helper.offsetHeight > ereader.wrapperHeight) {
+ if (size == -1) {
+ words.pop();
+ segment = words.join(' ');
+
+ pages.push(segment);
+ book = book.substr(segment.length);
+ avgWordCount = Math.round((wordCount + avgWordCount)/2);
+ wordCount = avgWordCount;
+ size = 0;
+ } else {
+ size = 1;
+ wordCount--;
+ }
+ } else {
+ if (size == 1) {
+ pages.push(segment);
+ book = book.substr(segment.length);
+ avgWordCount = Math.round((wordCount + avgWordCount)/2);
+ wordCount = avgWordCount;
+ size = 0;
+ } else {
+ if (segment == book) {
+ pages.push(segment);
+ book = '';
+ }
+
+ size = -1;
+ wordCount++;
+ }
+ }
+ }
+
+ book = null;
+ words = null;
+ segment = null;
+ helper.innerHTML = '';
+ ereader.slider.removeChild(container);
+
+ ereader.upagePageCount(pages.length);
+
+ // Load initial data
+ for (i=0; i<3; i++) {
+ pageIndex = i==0 ? pages.length-1 : i-1;
+ el = document.createElement('div');
+ el.innerHTML = pages[pageIndex];
+ ereader.masterPages[i].appendChild(el)
+ }
+
+ document.getElementById('loading').style.display = 'none';
+ }
+
+ ereader.onFlip(function () {
+ var el,
+ upcoming,
+ i;
+
+ for (i=0; i<3; i++) {
+ upcoming = ereader.masterPages[i].dataset.upcomingPageIndex;
+
+ if (upcoming != ereader.masterPages[i].dataset.pageIndex) {
+ el = ereader.masterPages[i].querySelector('div');
+ el.innerHTML = pages[upcoming];
+ }
+ }
+ });
+}, false);
+</script>
+</head>
+
+<body>
+ <div id="loading">
+ <p>Paginating. Please wait...</p>
+ </div>
+ <div id="wrapper"></div>
+</body>
+</html>
View
@@ -0,0 +1,56 @@
+html, body { height:100%; }
+body {
+ padding:0;
+ margin:0;
+ background:#DBD9CB;
+ -webkit-user-select:none;
+ -webkit-text-size-adjust:none;
+ color:#eee;
+ font-family:georgia,serif;
+ font-size:18px;
+ color:#2F271B;
+}
+
+#wrapper {
+ width:320px;
+ height:100%;
+ max-height:460px;
+}
+
+#wrapper > div > div {
+ overflow:hidden;
+}
+
+#wrapper > div > div > div {
+ padding:20px;
+ -webkit-transition-duration:.4s;
+ -webkit-transition-property:opacity;
+}
+
+#wrapper > div > .swipeview-loading div {
+ -webkit-transition-duration:0;
+ opacity:0;
+}
+
+#loading {
+ -webkit-box-sizing:border-box;
+ position:absolute;
+ z-index:100;
+ width:200px;
+ top:50%;
+ left:50%;
+ margin-left:-100px;
+ margin-top:-25px;
+ text-align:center;
+ font-size:14px;
+ background:#F4F2DE;
+ border:1px solid #BEBCA9;
+ -webkit-border-radius:10px;
+ -webkit-box-shadow:0 0 4px rgba(0,0,0,0.2);
+}
+
+#loading p {
+ padding:0;
+ margin:0;
+ height:50px; line-height:50px;
+}
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
View
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
+ <title>SwipeView</title>
+ <link href="style.css" rel="stylesheet" type="text/css">
+ <script type="text/javascript" src="../../src/swipeview.js"></script>
+</head>
+
+<body>
+ <div id="wrapper"></div>
+
+<script type="text/javascript">
+document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
+
+var gallery,
+ el,
+ i,
+ page,
+ slides = [
+ {
+ img: 'images/pic01.jpg',
+ width: 300,
+ height: 213,
+ desc: 'Piazza del Duomo, Florence, Italy'
+ },
+ {
+ img: 'images/pic02.jpg',
+ width: 300,
+ height: 164,
+ desc: 'Tuscan Landscape'
+ },
+ {
+ img: 'images/pic03.jpg',
+ width: 300,
+ height: 213,
+ desc: 'Colosseo, Rome, Italy'
+ },
+ {
+ img: 'images/pic04.jpg',
+ width: 147,
+ height: 220,
+ desc: 'Somewhere near Chinatown, San Francisco'
+ },
+ {
+ img: 'images/pic05.jpg',
+ width: 300,
+ height: 213,
+ desc: 'Medieval guard tower, Asciano, Siena, Italy'
+ },
+ {
+ img: 'images/pic06.jpg',
+ width: 165,
+ height: 220,
+ desc: 'Leaning tower, Pisa, Italy'
+ }
+ ];
+
+gallery = new SwipeView('#wrapper', { numberOfPages: slides.length });
+
+// Load initial data
+for (i=0; i<3; i++) {
+ page = i==0 ? slides.length-1 : i-1;
+ el = document.createElement('img');
+ el.src = slides[page].img;
+ el.width = slides[page].width;
+ el.height = slides[page].height;
+ gallery.masterPages[i].appendChild(el);
+
+ el = document.createElement('span');
+ el.innerHTML = slides[page].desc;
+ gallery.masterPages[i].appendChild(el)
+}
+
+gallery.onFlip(function () {
+ var el,
+ upcoming,
+ i;
+
+ for (i=0; i<3; i++) {
+ upcoming = gallery.masterPages[i].dataset.upcomingPageIndex;
+
+ if (upcoming != gallery.masterPages[i].dataset.pageIndex) {
+ el = gallery.masterPages[i].querySelector('img');
+ el.src = slides[upcoming].img;
+ el.width = slides[upcoming].width;
+ el.height = slides[upcoming].height;
+
+ el = gallery.masterPages[i].querySelector('span');
+ el.innerHTML = slides[upcoming].desc;
+ }
+ }
+});
+
+gallery.onMoveOut(function () {
+ gallery.masterPages[gallery.currentMasterPage].className = gallery.masterPages[gallery.currentMasterPage].className.replace(/(^|\s)swipeview-active(\s|$)/, '');
+});
+
+gallery.onMoveIn(function () {
+ var className = gallery.masterPages[gallery.currentMasterPage].className;
+ /(^|\s)swipeview-active(\s|$)/.test(className) || (gallery.masterPages[gallery.currentMasterPage].className = !className ? 'swipeview-active' : className + ' swipeview-active');
+});
+
+
+</script>
+</body>
+</html>
@@ -16,16 +16,16 @@ body {
height:100%;
}
-#wrapper > div > div {
+#swipeview-slider > div {
+ position:relative;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack:center;
-webkit-box-align:center;
overflow:hidden;
}
-#wrapper img {
- position:relative;
+#swipeview-slider img {
display:block;
border:5px solid #eee;
-webkit-box-shadow:0 2px 6px #000;
@@ -35,22 +35,27 @@ body {
opacity:1;
}
-#wrapper span {
- position:relative;
+#swipeview-slider span {
+ position:absolute;
+ bottom:0;
+ left:0;
+ width:100%;
+ padding:20px 0;
display:block;
- background:#000 -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#000));
- border:2px solid #777;
- padding:0 20px;
- margin-top:10px;
- height:20px;
- line-height:20px;
- -webkit-border-radius:11px;
- -webkit-background-clip:padding-box;
- -webkit-box-shadow:0 2px 6px #000;
- -webkit-transition-duration:.4s;
- -webkit-transition-property:opacity;
- opacity:1;
- text-shadow:0 -1px 0 #000;
+ background:rgba(0,0,0,0.75);
+ font-size:20px;
+ text-align:center;
+ text-shadow:0 1px 0 #000;
+ border-top:1px solid rgba(255,255,255,0.2);
+ -webkit-border-top-left-radius:10px;
+ -webkit-border-top-right-radius:10px;
+ -webkit-transition-duration:.3s;
+ -webkit-transition-property:-webkit-transform;
+ -webkit-transform:translate3d(0,100%,0);
+}
+
+#swipeview-slider .swipeview-active span {
+ -webkit-transform:translate3d(0,0,0);
}
#wrapper > div > .swipeview-loading {
@@ -68,5 +73,5 @@ body {
#wrapper > div > .swipeview-loading span {
-webkit-transition-duration:0;
- opacity:0;
+ -webkit-transform:translate3d(0,100%,0);
}
Oops, something went wrong.

0 comments on commit b9204cc

Please sign in to comment.