Resizable Scrollview-based RSS reader
by Derek Gathright
HTML
<button id="scrollview-prev" class='yui3-button'><< Prev</button>
<button id="scrollview-next" class='yui3-button'>Next >> </button>
<div id="scrollview-content">
<ul>
</ul>
</div>
CSS
#scrollview-bounding {
}
#scrollview-content {
margin: 0 auto;
white-space: nowrap;
}
#scrollview-content li{
display: inline-block;
vertical-align: top;
white-space: normal;
width: 100%;
line-height:1.5em;
}
#scrollview-content li h1,
#scrollview-content li p {
padding:20px 20px 0px 20px;
}
#scrollview-content h1 {
font-size:175%;
font-weight:bold;
padding:5px;
}
#scrollview-content h3 {
font-size:125%;
font-weight:bold;
}
#scrollview-content p
#scrollview-content h3 {
padding:3px;
}
JavaScript
YUI.add('scrollview-paginator', function(Y) {
/*jslint nomen:true sloppy:true white:true*/
/*global Y*/
/**
* Provides a plugin, which adds pagination support to ScrollView instances
*
* @module scrollview-paginator
*/
var getClassName = Y.ClassNameManager.getClassName,
SCROLLVIEW = 'scrollview',
CLASS_HIDDEN = getClassName(SCROLLVIEW, 'hidden'),
CLASS_PAGED = getClassName(SCROLLVIEW, 'paged'),
UI = (Y.ScrollView) ? Y.ScrollView.UI_SRC : "ui",
INDEX = "index",
SCROLL_X = "scrollX",
SCROLL_Y = "scrollY",
TOTAL = "total",
HOST = "host",
BOUNDING_BOX = "boundingBox",
CONTENT_BOX = "contentBox",
SELECTOR = "selector",
FLICK = "flick",
DRAG = "drag",
_constrain = function (val, min, max) {
return Math.min(Math.max(val, min), max);
};
/**
* Scrollview plugin that adds support for paging
*
* @class ScrollViewPaginator
* @namespace Plugin
* @extends Plugin.Base
* @constructor
*/
function PaginatorPlugin() {
PaginatorPlugin.superclass.constructor.apply(this, arguments);
}
/**
* The identity of the plugin
*
* @property NAME
* @type String
* @default 'paginatorPlugin'
* @static
*/
PaginatorPlugin.NAME = 'pluginScrollViewPaginator';
/**
* The namespace on which the plugin will reside
*
* @property NS
* @type String
* @default 'pages'
* @static
*/
PaginatorPlugin.NS = 'pages';
/**
* The default attribute configuration for the plugin
*
* @property ATTRS
* @type Object
* @static
*/
PaginatorPlugin.ATTRS = {
/**
* CSS selector for a page inside the scrollview. The scrollview
* will snap to the closest page.
*
* @attribute selector
* @type {String}
*/
selector: {
value: null
},
/**
* The active page number for a paged scrollview
*
* @attribute index
* @type {Number}
* @default 0
*/
index: {
value: 0,
validator: function(val) {
return val >= 0 &&...