diff --git a/README.md b/README.md index efa5c42e1..b48c5939d 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,7 @@ Complete * [SoundJS](http://www.createjs.com/#!/SoundJS) (by [Pedro Ferreira](https://bitbucket.org/drk4)) * [Spin](http://fgnass.github.com/spin.js/) (by [Boris Yankov](https://github.com/borisyankov)) * [Sugar](http://sugarjs.com/) (by [Josh Baldwin](https://github.com/jbaldwin/)) +* [SwipeView](http://cubiq.org/swipeview) (by [Boris Yankov](https://github.com/borisyankov)) * [Teechart](http://www.steema.com) (by [Steema](http://www.steema.com)) * [Toastr](https://github.com/CodeSeven/toastr) (by [Boris Yankov](https://github.com/borisyankov)) * [TweenJS](http://www.createjs.com/#!/TweenJS) (by [Pedro Ferreira](https://bitbucket.org/drk4)) diff --git a/swipeview/swipeview-1.0.d.ts b/swipeview/swipeview-1.0.d.ts new file mode 100644 index 000000000..52ca9ecff --- /dev/null +++ b/swipeview/swipeview-1.0.d.ts @@ -0,0 +1,46 @@ +// Type definitions for SwipeView 1.0 +// Project: http://cubiq.org/swipeview +// Definitions by: Boris Yankov +// Definitions: https://github.com/borisyankov/DefinitelyTyped + + +interface SwipeViewEvent { + (fn: Function): void; +} + +interface SwipeViewOptions { + text?: string; + numberOfPages?: number; + snapThreshold?: number; + hastyPageFlip?: bool; + loop?: bool; +} + +interface PageHTMLElement extends HTMLElement { + dataset: any; +} + +class SwipeView { + + masterPages: PageHTMLElement[]; + currentMasterPage: number; + wrapper: HTMLElement; + slider: HTMLElement; + + constructor (element: string); + constructor (element: string, options: SwipeViewOptions); + + destroy(): void; + refreshSize(): void; + updatePageCount(n: number): void; + goToPage(p: number): void; + next(): void; + prev(): void; + handleEvent(e: Event): void; + + onFlip: SwipeViewEvent; + onMoveOut: SwipeViewEvent; + onMoveIn: SwipeViewEvent; + onTouchStart: SwipeViewEvent; + +} \ No newline at end of file diff --git a/swipeview/swipeview-tests.ts b/swipeview/swipeview-tests.ts new file mode 100644 index 000000000..3bb9c152f --- /dev/null +++ b/swipeview/swipeview-tests.ts @@ -0,0 +1,252 @@ +/// + +function demo1() { + document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); + +var + el, + i, + page, + dots = document.querySelectorAll('#nav li'), + 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' + } + ]; + + var 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.className = 'loading'; + el.src = slides[page].img; + el.width = slides[page].width; + el.height = slides[page].height; + el.onload = function () { this.className = ''; } + 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.className = 'loading'; + 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'); + }); +} + +function demo2() { +var carousel: SwipeView, + el, + i, + page, + slides = [ + 'Swipe to know more >>>
Or scroll down for Lorem Ipsum', + '1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.', + '2. A robot must obey the orders given to it by human beings, except where such orders would conflict with the First Law.', + '3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Laws.' + ]; + + carousel = new SwipeView('#wrapper', { + numberOfPages: slides.length, + hastyPageFlip: true + }); + + // Load initial data + for (i = 0; i < 3; i++) { + page = i == 0 ? slides.length - 1 : i - 1; + + el = document.createElement('span'); + el.innerHTML = slides[page]; + carousel.masterPages[i].appendChild(el) + } + + carousel.onFlip(function () { + var el, + upcoming, + i; + + for (i = 0; i < 3; i++) { + upcoming = carousel.masterPages[i].dataset.upcomingPageIndex; + + if (upcoming != carousel.masterPages[i].dataset.pageIndex) { + el = carousel.masterPages[i].querySelector('span'); + el.innerHTML = slides[upcoming]; + } + } + }); +} + +function demo3() { + document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); + + window.addEventListener('load', function () { + var ereader: SwipeView, + el, + i, + pageIndex, + pages = [], + req = new XMLHttpRequest(); + + ereader = new SwipeView('#wrapper', { hastyPageFlip: true }); + + // Ajax request + req.open('GET', 'flowers.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 = 80, + avgWordCount = 0, + progressTotal = 0, + progressCurrent = 0, + progressMaxWidth = document.getElementById('progressbar').clientWidth, + progressToBookRatio = 0, + progressBar = document.querySelector('#progressbar > span'), + size; + + if (!book) return; + + book = book.replace(/\n\n/g, '

').replace(/\n/g, ' '); + progressTotal = book.length; + progressToBookRatio = progressMaxWidth / book.length; + + container = document.createElement('div'); + container.style.visibility = 'hidden'; + container.innerHTML = '
'; + ereader.slider.appendChild(container); + helper = document.getElementById('ereader-helper'); + helper.innerHTML = ''; + + var loopy = function () { + 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; + progressTotal -= segment.length; + } 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; + progressTotal -= segment.length; + } else { + if (segment == book) { + pages.push(segment); + book = ''; + } + + size = -1; + wordCount++; + } + } + + if (book) { + progressBar.style.width = 150 - Math.round(progressToBookRatio * progressTotal) + 'px'; + setTimeout(loopy, 1); + } else { + book = null; + words = null; + segment = null; + helper.innerHTML = ''; + ereader.slider.removeChild(container); + + ereader.updatePageCount(pages.length); + ereader.masterPages[0].dataset.pageIndex = pages.length - 1; + ereader.masterPages[0].dataset.upcomingPageIndex = ereader.masterPages[0].dataset.pageIndex; + + // 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'; + } + } + + loopy(); + } + + 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); +} \ No newline at end of file