RubyGems - roda-component - Versions diffs - 0.0.10 → 0.1.0 - Mend

roda-component 0.0.10 → 0.1.0

Files changed (692) hide show

data/test/dummy/public/chat/bower/jScrollPane/fullpage_scroll.html ADDED

@@ -0,0 +1,259 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+		<title>jScrollPane demo - full page scrollpane</title>
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- styles needed by jScrollPane - include in your own sites -->
+		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+		<style type="text/css" id="page-css">
+			/* Styles specific to this particular page */
+			html
+			{
+				overflow: auto;
+			}
+			#full-page-container
+			{
+				overflow: auto;
+			}
+			.scroll-pane
+			{
+				width: 100%;
+				height: 200px;
+				overflow: auto;
+			}
+			.horizontal-only
+			{
+				height: auto;
+				max-height: 200px;
+			}
+		</style>
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- the mousewheel plugin -->
+		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+		<!-- the jScrollPane script -->
+		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+		<script type="text/javascript" id="sourcecode">
+			$(function()
+			{
+				var win = $(window);
+				// Full body scroll
+				var isResizing = false;
+				win.bind(
+					'resize',
+					function()
+					{
+						if (!isResizing) {
+							isResizing = true;
+							var container = $('#full-page-container');
+							// Temporarily make the container tiny so it doesn't influence the
+							// calculation of the size of the document
+							container.css(
+								{
+									'width': 1,
+									'height': 1
+								}
+							);
+							// Now make it the size of the window...
+							container.css(
+								{
+									'width': win.width(),
+									'height': win.height()
+								}
+							);
+							isResizing = false;
+							container.jScrollPane(
+								{
+									'showArrows': true
+								}
+							);
+						}
+					}
+				).trigger('resize');
+				// Workaround for known Opera issue which breaks demo (see
+				// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
+				$('body').css('overflow', 'hidden');
+				// IE calculates the width incorrectly first time round (it
+				// doesn't count the space used by the native scrollbar) so
+				// we re-trigger if necessary.
+				if ($('#full-page-container').width() != win.width()) {
+					win.trigger('resize');
+				}
+				// Internal scrollpanes
+				$('.scroll-pane').jScrollPane({showArrows: true});
+			});
+		</script>
+	</head>
+	<body>
+		<div id="full-page-container">
+			<div id="top-nav">
+				<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+				<ul>
+					<li><a href="index.html">Home</a></li>
+					<li><a href="index.html#examples">Examples</a></li>
+					<li><a href="index.html#themes">Themes</a></li>
+					<li><a href="index.html#usage">How to use</a></li>
+					<li><a href="faqs.html">FAQs</a></li>
+					<li><a href="known_issues.html">Known issues</a></li>
+					<li><a href="index.html#support">Support</a></li>
+					<li><a href="index.html#download">Download</a></li>
+				</ul>
+			</div>
+			<div id="container">
+				<h1>jScrollPane - example with whole page scrolling and nested scrollbars</h1>
+				<p>
+					This example demonstrates how you can use jScrollPane to style the scrollbars for an entire
+					document. It also demonstrates that jScrollPane works correctly when scrollbars are nested
+					(i.e. when there is a jScrollPane inside another jScrollPane).
+				</p>
+				<h2>Vertical only</h2>
+				<div class="scroll-pane">
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+						eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+						mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+						consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+						bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+						semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+						mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+						quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+						eu lacus semper viverra.
+					</p>
+					<p>
+						Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+						lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+						faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+						Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+						tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+						Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+						est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+						volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+						libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+						sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+						pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+						habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+					</p>
+					<p>
+						Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+						eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+						dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+						amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+						est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+						dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+						varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+						feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+						congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+						id mollis nisi. Donec fermentum vehicula porta.
+					</p>
+					<p>
+						Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+						Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+						sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+						Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+						commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+						ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+						Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+						eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+						luctus, metus
+					</p>
+					<p>
+						Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+						Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+						amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					</p>
+				</div>
+				<h2>Horizontal only</h2>
+				<div class="scroll-pane horizontal-only">
+					<p style="width: 1000px;">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+						eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+						mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+						consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+						bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+						semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+						mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+						quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+						eu lacus semper viverra.
+					</p>
+				</div>
+				<h2>Both</h2>
+				<div class="scroll-pane">
+					<p style="width: 1000px">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+						eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+						mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+						consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+						bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+						semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+						mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+						quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+						eu lacus semper viverra.
+					</p>
+					<p>
+						Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+						lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+						faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+						Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+						tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+						Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+						est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+						volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+						libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+						sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+						pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+						habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+					</p>
+					<p>
+						Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+						eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+						dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+						amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+						est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+						dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+						varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+						feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+						congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+						id mollis nisi. Donec fermentum vehicula porta.
+					</p>
+					<p>
+						Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+						Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+						sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+						Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+						commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+						ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+						Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+						eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+						luctus, metus
+					</p>
+					<p>
+						Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+						Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+						amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					</p>
+				</div>
+				<h2>Page javascript</h2>
+				<div id="sourcecode-display">
+					<p>The contents of this div will be replaced by the javascript added to this page</p>
+				</div>
+				<h2>Page CSS</h2>
+				<div id="css-display">
+					<p>The contents of this div will be replaced by the CSS added to this page</p>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>

data/test/dummy/public/chat/bower/jScrollPane/iframe.html ADDED

@@ -0,0 +1,79 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+		<title>iframe jScrollPane demo</title>
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- styles needed by jScrollPane - include in your own sites -->
+		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+		<style type="text/css" id="page-css">
+			/* Styles specific to this particular page */
+			iframe {
+				width: 100%;
+				height: 200px;
+				border: 0;
+			}
+		</style>
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- the mousewheel plugin -->
+		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+		<!-- the jScrollPane script -->
+		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+		<script type="text/javascript" id="sourcecode">
+			// No page specific javascript - see the sourcecode of the loaded content instead
+		</script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html#examples">Examples</a></li>
+				<li><a href="index.html#themes">Themes</a></li>
+				<li><a href="index.html#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="index.html#support">Support</a></li>
+				<li><a href="index.html#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - example with iframes</h1>
+			<p>
+				This demonstration shows how you can apply jScrollPane to content in an iframe. Note that in this
+				demo nothing is done in the hosting page (this one), all of the necessary javascript happens inside
+				the loaded pages (e.g. <a href="iframe_content1.html">iframe_content1.html</a> and
+				<a href="iframe_content2.html">iframe_content2.html</a>). Those pages basically use the same technique
+				as in the <a href="fullpage_scroll.html">full page scroll</a> example.
+			</p>
+			<p>
+				To implement this technique you don't need to add any code to the hosting page but you do need to have
+				control over the pages which you load into the iframes. And each of those pages will need to include the
+				relevant script files (e.g. jQuery, jScrollPane etc etc) as well as the document ready script as I show
+				in my examples.
+			</p>
+			<h2>Vertical only</h2>
+			<iframe src="iframe_content1.html"></iframe>
+			<h2>Both</h2>
+			<iframe src="iframe_content2.html"></iframe>
+			<h2>Page javascript</h2>
+			<div id="sourcecode-display">
+				<p>The contents of this div will be replaced by the javascript added to this page</p>
+			</div>
+			<h2>Page CSS</h2>
+			<div id="css-display">
+				<p>The contents of this div will be replaced by the CSS added to this page</p>
+			</div>
+		</div>
+	</body>
+</html>

data/test/dummy/public/chat/bower/jScrollPane/iframe2.html ADDED

@@ -0,0 +1,121 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+		<title>jScrollPane - alternative iframe demo</title>
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- styles needed by jScrollPane - include in your own sites -->
+		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+		<style type="text/css" id="page-css">
+			/* Styles specific to this particular page */
+			.iframe-holder {
+				width: 100%;
+				height: 200px;
+				overflow: auto;
+			}
+			iframe
+			{
+				border: 0;
+				width: 100%;
+				height: 100%;
+			}
+		</style>
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- the mousewheel plugin -->
+		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+		<!-- the jScrollPane script -->
+		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+		<script type="text/javascript" id="sourcecode">
+			$(function()
+				{
+					$('iframe').bind(
+						'load.jsp',
+						function()
+						{
+							var doc = this.contentDocument || this.contentWindow.document;
+							var jDoc = $(doc);
+							//jDoc = $('body', doc);
+							var frame = $(this);
+							var destWidth = jDoc.width();
+							var destHeight = jDoc.height();
+							// Need to unbind the load event otherwise it is triggered again
+							// when jScrollPane wraps the iframe which results in it being removed
+							// from the document and added again.
+							frame.unbind('load.jsp');
+							if (destWidth > frame.width()) {
+								// to allow for the scrollbar...
+								// Should be possible more cleanly though
+								destWidth += 16;
+							}
+							if (destHeight > frame.height()) {
+								// to allow for the scrollbar...
+								// Should be possible more cleanly though
+								destHeight += 16;
+							}
+							frame.width(destWidth);
+							frame.height(destHeight);
+							frame.parent().jScrollPane();
+						}
+					);
+				}
+			);
+		</script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html#examples">Examples</a></li>
+				<li><a href="index.html#themes">Themes</a></li>
+				<li><a href="index.html#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="index.html#support">Support</a></li>
+				<li><a href="index.html#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - alternative approach to implement jScrollPane with iframes</h1>
+			<p>
+				This demonstration shows a different approach to <a href="iframe.html">the first iframe demo</a> for
+				styling the scrollbars associated with an iframe. This approach requires no special code inside the
+				iframe content pages (e.g. <a href="iframe_content3.html">iframe_content3.html</a> and
+				<a href="iframe_content4.html">iframe_content4.html</a>) and instead relies on the script in the hosting
+				page (this page).
+			</p>
+			<p>
+				This approach has some shortcomings though. The mousewheel doesn't work and the calculation of the width
+				and height seems a little off...
+			</p>
+			<h2>Vertical only</h2>
+			<div class="iframe-holder">
+				<iframe src="iframe_content3.html"></iframe>
+			</div>
+			<h2>Both</h2>
+			<div class="iframe-holder">
+				<iframe src="iframe_content4.html"></iframe>
+			</div>
+			<h2>Page javascript</h2>
+			<div id="sourcecode-display">
+				<p>The contents of this div will be replaced by the javascript added to this page</p>
+			</div>
+			<h2>Page CSS</h2>
+			<div id="css-display">
+				<p>The contents of this div will be replaced by the CSS added to this page</p>
+			</div>
+		</div>
+	</body>
+</html>