mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-09-09 11:13:57 +08:00
Add SwipeView definitions
This commit is contained in:
Boris Yankov
@@ -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))
|
||||
|
||||
Vendored
+46
@@ -0,0 +1,46 @@
|
||||
// Type definitions for SwipeView 1.0
|
||||
// Project: http://cubiq.org/swipeview
|
||||
// Definitions by: Boris Yankov <https://github.com/borisyankov/>
|
||||
// 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;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
/// <reference path="swipeview-1.0.d.ts" />
|
||||
|
||||
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 = [
|
||||
'<strong>Swipe</strong> to know more >>><br>Or scroll down for <em>Lorem Ipsum</em>',
|
||||
'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, ' <br><br>').replace(/\n/g, ' ');
|
||||
progressTotal = book.length;
|
||||
progressToBookRatio = progressMaxWidth / 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 = '';
|
||||
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user