Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Re-add examples

  • Loading branch information...
commit 3e20486ee4e50c386948a191eb76cd6b36ab820e 1 parent 6c55f0d
@imakewebthings imakewebthings authored
View
59 demo/basic.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+<title>StackView Basic</title>
+
+<link rel="icon" href="favicon.ico" type="image/x-icon" />
+
+<!-- stackview.css to style the stack -->
+<link rel="stylesheet" href="../lib/jquery.stackview.css" type="text/css" />
+
+<!-- stackview.js and all js dependencies -->
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+<script type="text/javascript" src="../lib/jquery.stackview.min.js"></script>
+
+</head>
+
+<body>
+
+<div id="basic-stack"></div>
+
+<script type="text/javascript">
+ $(function () {
+ var data =
+ {"start": "-1", "limit": "0", "num_found": "2", "docs":
+ [
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ },
+ {
+ "title": "Persepolis",
+ "creator": [
+ "Marjane Satrapi"
+ ],
+ "measurement_page_numeric": 153,
+ "measurement_height_numeric": 24,
+ "shelfrank": 64,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009098946"
+ }
+ ]
+ };
+
+ $('#basic-stack').stackView({data: data});
+ });
+</script>
+
+</body>
+</html>
View
270 demo/documentation.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+<title>Stack View Documentation</title>
+
+<link rel="icon" href="favicon.ico" type="image/x-icon" />
+
+<!-- CSS just for this page -->
+<style type="text/css">
+h1, h2 {
+ margin: 5px 5px 10px 5px;
+ padding: 0;
+ color:#444;
+ font-weight:normal;
+}
+
+h3 {
+ margin: 10px 5px 0px 5px;
+ padding:0;
+ color:#444;
+ font-size:.9em;
+ font-weight:bold;
+}
+
+body {
+ font-family:'Helvetica', 'Arial', sans-serif;
+ background:#faf5f0;
+ min-width:845px;
+ max-width:1145px;
+ font-size: 1.1em;
+ color: #333333;
+ border: none;
+ line-height:normal;
+ margin:0px auto;
+}
+
+p {
+ margin: 5px 5px 15px 5px;
+ font-size: .8em;
+ line-height: 1.2em;
+}
+
+a {
+ color: #09F;
+ text-decoration: none;
+}
+
+.container {
+ float:left;
+ width:45%;
+ margin:15px 15px 15px 5px;
+ clear:both;
+}
+
+.explanation {
+ float:left;
+ width:48%;
+ margin:15px 15px 15px 25px;
+}
+
+.requirements {
+ float:left;
+ margin:15px 15px 15px 15px;
+ clear:both;
+}
+
+#doc-nav {
+ clear:both;
+ margin-left: 5px;
+ float:left;
+ width:23%;
+}
+
+#doc-nav ul{
+ list-style-type:none;
+ padding:0 10px 0 0;
+}
+
+#docs {
+ float:left;
+ width:70%;
+}
+
+#docs li {
+ font-size: .8em;
+}
+
+h1 {
+ font-size:2.1em;
+ padding-top:9px;
+}
+
+h2 {
+ font-size:1.2em;
+ color:#F60;
+}
+
+pre {
+ background-color: #fff;
+}
+
+#nav {
+ padding:0 150px 0 0;
+ margin:0;
+ list-style-type:none;
+ float:right;
+}
+
+#nav li {
+ display:block;
+ float:left;
+ padding:0 30px 0 0;
+}
+
+#nav li a {
+ display:block;
+ padding:25px 0 0 0;
+}
+
+.footer {
+ clear:both;
+ font-size:.7em;
+ float:right;
+ padding:25px 30px 25px 0;
+}
+</style>
+
+<!-- stackview.css to style the stack -->
+<link rel="stylesheet" href="../lib/jquery.stackview.css" type="text/css" />
+
+<!-- stackview.js and all js dependencies -->
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+<script type="text/javascript" src="../lib/jquery.stackview.min.js"></script>
+
+</head>
+
+<body>
+ <ul id="nav">
+ <li><a href="index.html">About</a></li>
+ <li><a href="documentation.html">Documentation</a></li>
+ <li><a href="examples.html">Examples</a></li>
+ <a href="http://www.librarylab.law.harvard.edu/"><img src="liblabstamp.png"></a>
+ </ul>
+ <a href="https://github.com/harvard-lil/stackview"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
+ <h1>Stack View Documentation</h1>
+
+ <div id="docs">
+ <div class="requirements">
+ <h2>Requirements</h2>
+ <p>Stack View requires <a href="http://jquery.com/">jQuery</a> and two additional plugins to enable further functionality. These plugins are bundled with jquery.stackview.min.js and do not need to be included separately.</p>
+ <ul>
+ <li>The <a href="http://brandonaaron.net/code/mousewheel/docs">mousewheel plugin</a> adds mouse wheel support to stack scrolling.</li>
+ <li>The infiniteScroller plugin enables on-call dynamic loading of new books.</li>
+ </ul>
+ <p>A small set of images is also necessary for drawing the stack. They can be found in the lib/images directory.</p>
+
+ <h2>How to Use</h2>
+ <p>You can start by looking at the most <a href="basic.html">basic demo</a>.</p>
+ <p>After including the required files, place a div in your html code where you would like Stack View to appear.</p>
+ <pre class="code language-html">
+ &lt;div id="stackview"&gt;&lt;/div&gt;
+ </pre>
+ <p>In your javascript, create some data for Stack View to use.</p>
+ <pre class="code language-javascript">
+var data = {
+ "start": "-1", // -1 start value signifies the end of a stack
+ "limit": "0",
+ "num_found": "2",
+ "docs": [
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ },
+ {
+ "title": "Persepolis",
+ "creator": [
+ "Marjane Satrapi"
+ ],
+ "measurement_page_numeric": 153,
+ "measurement_height_numeric": 24,
+ "shelfrank": 64,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009098946"
+ }
+ ]
+};
+ </pre>
+ <p>Then call the Stack View plugin using a jQuery selector.</p>
+ <pre class="code language-javascript">
+ $('#stackview').stackView({data: data});
+ </pre>
+ <p>Alternately, you can give Stack View a url. The url should point to a JSON file with data formatted as above or a script that accepts a callback and a start parameter and returns a JSON object. A script is useful for continually feeding Stack View new data as the user scrolls. Basically Stack View's version of paging.</p>
+ <pre class="code language-javascript">
+ $('#stackview').stackView({url: 'data.php'});
+ </pre>
+ <p>This is the most basic example using PHP.
+ <pre class="code language-php">
+ $start = $_GET['start'];
+
+ $docs = '[
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ }
+ ]';
+
+ if($start > 0) {
+ echo "{'start': '-1', 'num_found': '0', 'limit': '0', 'docs': ''}";
+ }
+ else {
+ echo "{'start': '0', 'limit': '0', 'num_found': '1', 'docs': $docs}";
+ }
+ </pre>
+ <h2>Available Stack View Options</h2>
+ <h3>data</h3>
+ <p>A JSON object used to construct a static stack. Stack View requires either a <b>data</b> object or a <b>url</b>, but not both.</p>
+ <h3>url</h3>
+ <p>The URL should point to a JSON file or a script that accepts a callback and start parameter and then provides Stack View with JSON formatted data. Stack View requires either a <b>data</b> object or a <b>url</b>, but not both.</p>
+ <h3>jsonp</h3>
+ <p>This option, when set to true, tells Stack View to send a JSONP request to the <b>url</b> specified. If using JSONP, make sure that the specified <b>url</b> accepts a callback and includes that callback as part of the JSONP response.
+ <br />Default is false.</p>
+ <h3>books_per_page</h3>
+ <p>How many books will be requested.
+ <br />Default is 10.</p>
+ <h3>threshold</h3>
+ <p>How much screen space to fill with books.
+ <br />Default is 1000.</p>
+ <h3>page_multiple</h3>
+ <p>Pixels per page.
+ <br />Default is 0.11.</p>
+ <h3>height_multiple</h3>
+ <p>Pixels per centimeter.
+ <br />Default is 12.</p>
+ <h3>search_type</h3>
+ <p>The type of search that the script from your url parameter should perform if a search is necessary.
+ <br />Default is keyword.</p>
+ <h3>query</h3>
+ <p>The query that the script from your url should use if performing a search.
+ <br />Default is nothing.<p>
+ <h3>ribbon</h3>
+ <p>The text that will appear in the ribbon at the top of the stack.
+ <br />Default is Stack View.</p>
+ </div>
+ </div>
+ <div class="footer">
+ <a href="http://www.librarylab.law.harvard.edu/">The Harvard Library Innovation Lab</a>
+ </div>
+
+<!-- js just for this page -->
+<script type="text/javascript" src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js"></script>
+<script type="text/javascript">$.SyntaxHighlighter.init();</script>
+</body>
+</html>
View
311 demo/examples.html
@@ -0,0 +1,311 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+<title>Stack View Examples</title>
+
+<link rel="icon" href="favicon.ico" type="image/x-icon" />
+
+<!-- CSS just for this page -->
+<style type="text/css">
+h1, h2 {
+ margin: 5px 5px 10px 5px;
+ padding: 0;
+ color:#444;
+ font-weight:normal;
+}
+
+body {
+ font-family:'Helvetica', 'Arial', sans-serif;
+ background:#faf5f0;
+ min-width:845px;
+ max-width:1145px;
+ font-size: 1.1em;
+ color: #333333;
+ border: none;
+ line-height:normal;
+ margin:0px auto;
+}
+
+p {
+ margin: 25px 5px 5px 5px;
+ font-size: .8em;
+}
+
+.container {
+ float:left;
+ width:45%;
+ margin:15px 15px 15px 5px;
+ clear:both;
+}
+
+.explanation {
+ float:left;
+ width:48%;
+ margin:15px 15px 15px 25px;
+}
+
+h1 {
+ font-size:2.1em;
+ padding-top:9px;
+}
+
+h2 {
+ font-size:1.2em;
+ color:#F60;
+}
+
+a {
+ color: #09F;
+ text-decoration: none;
+}
+
+pre {
+ background-color: #fff;
+}
+
+#nav {
+ padding:0 150px 0 0;
+ margin:0;
+ list-style-type:none;
+ float:right;
+}
+
+#nav li {
+ display:block;
+ float:left;
+ padding:0 27px 0 0;
+}
+
+#nav li a {
+ display:block;
+ padding:25px 0 0 0;
+}
+
+.footer {
+ clear:both;
+ font-size:.7em;
+ float:right;
+ padding:25px 30px 25px 0;
+}
+</style>
+
+<!-- stackview.css to style the stack -->
+<link rel="stylesheet" href="../lib/jquery.stackview.css" type="text/css" />
+
+<!-- stackview.js and all js dependencies -->
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+<script type="text/javascript" src="../lib/jquery.stackview.min.js"></script>
+
+</head>
+
+<body>
+ <ul id="nav">
+ <li><a href="index.html">About</a></li>
+ <li><a href="documentation.html">Documentation</a></li>
+ <li><a href="examples.html">Examples</a></li>
+ <a href="http://www.librarylab.law.harvard.edu/"><img src="liblabstamp.png"></a>
+ </ul>
+ <a href="https://github.com/harvard-lil/stackview"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
+ <h1>Stack View Examples</h1>
+
+ <div class="container">
+
+ <div id="amazon-stack"></div>
+
+ </div>
+
+ <script type="text/javascript">
+ $(function () {
+ $('#amazon-stack').stackView({url: '../php/amazon.php', query: 'memory', ribbon: 'Amazon search for "memory"'});
+ });
+ </script>
+
+ <div class="explanation">
+ <h2>Amazon stack</h2>
+ <p>A stack made up of book search results from the <a href="https://affiliate-program.amazon.com/gp/advertising/api/detail/main.html">Amazon API</a>. The amazon.php file performs the search, formats and feeds the results to Stack View.</p>
+ <p>Each book's Amazon Sales Rank is roughly sorted into one of ten groups that make up the heatmapping.</p>
+ <p>Include an empty div in the page.</p>
+ <pre class="code language-html">
+ &lt;div id="amazon-stack"&gt;&lt;/div&gt;
+ </pre>
+ <p>Then call the Stack View plugin using a jQuery selector.</p>
+ <pre class="code language-javascript">
+ $('#amazon-stack').stackView({
+ url: 'php/amazon.php',
+ query: 'memory',
+ ribbon: 'Amazon search for "memory"'
+ });
+ </pre>
+ <p>To use Stack View with the Amazon API, save a copy of the file <b>keys.php.example</b> as <b>keys.php</b> and fill in the required API keys.</p>
+ <p>Note that Amazon's API now limits to 100 results.</p>
+ </div>
+
+ <div class="container">
+
+ <div id="worldcat-stack"></div>
+
+ </div>
+
+ <script type="text/javascript">
+ $(function () {
+ $('#worldcat-stack').stackView({url: '../php/worldcat.php', jsonp: true, query: 'modern pirates', ribbon: 'WorldCat search for "modern pirates"'});
+ });
+ </script>
+
+ <div class="explanation">
+ <h2>WorldCat stack</h2>
+ <p>A keyword search using the <a href="http://oclc.org/developer/services/WCAPI">WorldCat API</a>. The worldcat.php file performs the search, formats and feeds the results to Stack View.</p>
+ <p>The number of libraries that hold each book is roughly sorted into one of ten groups that make up the heatmapping. This operation is <b>very</b> slow.</p>
+ <p>Include an empty div in the page.</p>
+ <pre class="code language-html">
+ &lt;div id="worldcat-stack"&gt;&lt;/div&gt;
+ </pre>
+ <p>Then call the Stack View plugin using a jQuery selector.</p>
+ <pre class="code language-javascript">
+ $('#worldcat-stack').stackView({
+ url: 'php/worldcat.php',
+ jsonp: true,
+ query: 'modern pirates',
+ ribbon: 'WorldCat search for "modern pirates"'
+ });
+ </pre>
+ <p>This example utilizes JSONP. See the associated <b>worldcat.php</b> script for code that will return a JSONP response.</p>
+ <p>To use Stack View with the WorldCat API, save a copy of the file <b>keys.php.example</b> as <b>keys.php</b> and fill in the required API key.</p>
+ </div>
+
+ <div class="container">
+
+ <div id="google-stack"></div>
+
+ </div>
+
+ <script type="text/javascript">
+ $(function () {
+ $('#google-stack').stackView({url: '../php/google.php', query: 'time travel', ribbon: 'Google Books search for "time travel"'});
+ });
+ </script>
+
+ <div class="explanation">
+ <h2>Google stack</h2>
+ <p>A keyword search using the <a href="https://code.google.com/apis/books/docs/v1/using.html">Google API</a>. The google.php file performs the search, formats and feeds the results to Stack View.</p>
+ <p>The user ratings are roughly sorted into one of ten groups that make up the heatmapping. Since Google rarely provides the height of the book, these are mostly randomized.</p>
+ <p>Include an empty div in the page.</p>
+ <pre class="code language-html">
+ &lt;div id="google-stack"&gt;&lt;/div&gt;
+ </pre>
+ <p>Then call the Stack View plugin using a jQuery selector.</p>
+ <pre class="code language-javascript">
+ $('#google-stack').stackView({
+ url: 'php/google.php',
+ query: 'time travel',
+ ribbon: 'Google search for "time travel"'
+ });
+ </pre>
+ <p>Note that, according to Google Books API documentation, the <b>totalItems</b> count is an estimate. This causes the Stack View items count to change as the user scrolls.</p>
+ <p>To use Stack View with the Google API, save a copy of the file <b>keys.php.example</b> as <b>keys.php</b> and fill in the required API key.</p>
+ </div>
+
+ <div class="container">
+
+ <div id="dpla-stack"></div>
+
+ </div>
+
+ <script type="text/javascript">
+ $(function () {
+ $('#dpla-stack').stackView({url: '../php/dpla.php', query: 'history', ribbon: 'DPLA search for "history"'});
+ });
+ </script>
+
+ <div class="explanation">
+ <h2>DPLA stack</h2>
+ <p>A keyword search using the <a href="http://dp.la/dev/wiki/Documentation">DPLA API</a>. The dpla.php file performs the search, formats and feeds the results to Stack View.</p>
+ <p>Checkouts are roughly sorted into one of ten groups that make up the heatmapping.</p>
+ <p>Include an empty div in the page.</p>
+ <pre class="code language-html">
+ &lt;div id="dpla-stack"&gt;&lt;/div&gt;
+ </pre>
+ <p>Then call the Stack View plugin using a jQuery selector.</p>
+ <pre class="code language-javascript">
+ $('#dpla-stack').stackView({
+ url: 'php/dpla.php',
+ query: 'history',
+ ribbon: 'DPLA search for "history"'
+ });
+ </pre>
+ <p>Note that much of the data from DPLA is currently dummy data.</p>
+ </div>
+
+ <div class="container">
+
+ <div id="static-stack"></div>
+
+ </div>
+
+ <script type="text/javascript">
+ $(function () {
+ $('#static-stack').stackView({url: '../json/static.json', ribbon: 'Static stack'});
+ });
+ </script>
+
+ <div class="explanation">
+ <h2>Static stack</h2>
+ <p>A manually created static stack. The static.json file feeds a JSON object to Stack View. The heatmapping is manually entered here (a digit from 1 to 100).</p>
+ <p>Note that you can also start with the most <a href="basic.html">basic demo</a>.</p>
+ <p>Include an empty div in the page.</p>
+ <pre class="code language-html">
+ &lt;div id="static-stack"&gt;&lt;/div&gt;
+ </pre>
+ <p>Then call the Stack View plugin using a jQuery selector.</p>
+ <pre class="code language-javascript">
+ $('#static-stack').stackView({
+ url: 'json/static.json',
+ ribbon: 'Static stack'
+ });
+ </pre>
+ <p>Example JSON</p>
+ <pre class="code language-javascript">
+{
+ "start": "-1",
+ "limit": "0",
+ "num_found": "2",
+ "docs": [
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ },
+ {
+ "title": "Persepolis",
+ "creator": [
+ "Marjane Satrapi"
+ ],
+ "measurement_page_numeric": 153,
+ "measurement_height_numeric": 24,
+ "shelfrank": 64,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009098946"
+ }
+ ]
+}
+ </pre>
+ </div>
+ <div class="footer">
+ <a href="http://www.librarylab.law.harvard.edu/">The Harvard Library Innovation Lab</a>
+ </div>
+
+
+<!-- js just for this page -->
+<script type="text/javascript" src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js"></script>
+<script type="text/javascript">$.SyntaxHighlighter.init();</script>
+</body>
+</html>
View
200 demo/index.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+<title>Stack View</title>
+
+<link rel="icon" href="favicon.ico" type="image/x-icon" />
+
+<!-- CSS just for this page -->
+<style type="text/css">
+h1, h2 {
+ margin: 5px 5px 10px 5px;
+ padding: 0;
+ color:#444;
+ font-weight:normal;
+}
+
+h3 {
+ margin: 10px 5px 0px 5px;
+ padding:0;
+ color:#444;
+ font-size:.9em;
+ font-weight:bold;
+}
+
+body {
+ font-family:'Helvetica', 'Arial', sans-serif;
+ background:#faf5f0;
+ min-width:845px;
+ max-width:1145px;
+ font-size: 1.1em;
+ color: #333333;
+ border: none;
+ line-height:normal;
+ margin:0px auto;
+}
+
+p {
+ margin: 5px 5px 15px 5px;
+ font-size: .8em;
+ line-height: 1.2em;
+}
+
+a {
+ color: #09F;
+ text-decoration: none;
+}
+
+.container {
+ float:left;
+ width:45%;
+ margin:15px 15px 15px 5px;
+ clear:both;
+}
+
+.explanation {
+ float:left;
+ width:48%;
+ margin:15px 15px 15px 25px;
+}
+
+.requirements {
+ float:left;
+ margin:15px 15px 15px 15px;
+ clear:both;
+}
+
+#doc-nav {
+ clear:both;
+ margin-left: 67px;
+ float:left;
+ width:23%;
+}
+
+#doc-nav ul{
+ list-style-type:none;
+ padding:0 10px 0 0;
+}
+
+#docs {
+ float:left;
+ width:70%;
+}
+
+h1 {
+ font-size:2.1em;
+ padding-top:9px;
+}
+
+h2 {
+ font-size:1.2em;
+ color:#F60;
+}
+
+pre {
+ background-color: #fff;
+}
+
+#nav {
+ padding:0 150px 0 0;
+ margin:0;
+ list-style-type:none;
+ float:right;
+}
+
+#nav li {
+ display:block;
+ float:left;
+ padding:0 30px 0 0;
+}
+
+#nav li a {
+ display:block;
+ padding:25px 0 0 0;
+}
+
+.footer {
+ clear:both;
+ font-size:.7em;
+ float:right;
+ padding:25px 30px 25px 0;
+}
+</style>
+
+<!-- stackview.css to style the stack -->
+<link rel="stylesheet" href="../lib/jquery.stackview.css" type="text/css" />
+
+<!-- stackview.js and all js dependencies -->
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+<script type="text/javascript" src="../lib/jquery.stackview.min.js"></script>
+
+<!-- javascript just for this page -->
+<script type="text/javascript">
+$(function () {
+ $('#intro-stack').stackView({url: '../json/intro.json'});
+});
+</script>
+
+</head>
+
+<body>
+ <ul id="nav">
+ <li><a href="index.html">About</a></li>
+ <li><a href="documentation.html">Documentation</a></li>
+ <li><a href="examples.html">Examples</a></li>
+ <a href="http://www.librarylab.law.harvard.edu/"><img src="liblabstamp.png"></a>
+ </ul>
+ <a href="https://github.com/harvard-lil/stackview"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
+ <h1>Stack View</h1>
+
+ <div class="container">
+
+ <div id="intro-stack"></div>
+
+ </div>
+
+ <div class="explanation">
+ <h2>A virtual shelf</h2>
+ <p>Stack View is a book visualization and browsing tool. This jQuery plugin turns metadata into a browsable stack of books.</p>
+ <p>Stack View is drawn with CSS. When possible, the height of the book is based on the actual height of the object and the width is calculated using the page count. The color can be based on any data from ratings and rankings to library checkouts or holdings. The darker the color the higher the rating.</p>
+ <h3>JSON data<h3>
+ <pre class="code language-javascript">
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ }
+ </pre>
+ <h3>Becomes a virtual object</h3>
+ <ul class="stackview" style="padding:0;">
+ <li class="stack-item stack-book heat2" style="width: 300px; height: 59px; margin:10px 0 0 0;">
+ <a target="_newtab" href="http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638">
+ <span class="spine-text">
+ <span class="spine-title">Blankets</span>
+ <span class="spine-author">Craig Thompson</span>
+ </span>
+ <span class="spine-year">2003</span>
+ <span class="stack-pages"></span>
+ <span class="stack-cover"></span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ <div class="footer">
+ <a href="http://www.librarylab.law.harvard.edu/">The Harvard Library Innovation Lab</a>
+ </div>
+
+<!-- js just for this page -->
+<script type="text/javascript" src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js"></script>
+<script type="text/javascript">$.SyntaxHighlighter.init();</script>
+</body>
+</html>
View
BIN  demo/liblabstamp.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2  json/README.md
@@ -33,7 +33,7 @@ var data = {
]
};
-$('#stackview').stackview({ data: data });
+$('#stackview').stackView({ data: data });
```
...or passed as a URL to a static file...
View
2  lib/jquery.stackview.min.js
@@ -12,4 +12,4 @@
Dual licensed under MIT and GPL.
*/
-(function(g,f,a,h){var d,e="stackview",c,b={};d={init:"stackview.init",page_load:"stackview.pageload"};b.get_heat=function(i){return i===100?10:Math.floor(i/10)+1};b.get_height=function(l,m){var k=parseInt(m.measurement_height_numeric,10),n=l.options.min_item_height,j=l.options.max_item_height,i=l.options.height_multiple;k=Math.min(Math.max(k,n),j)*i;return k+"px"};b.get_thickness=function(k,l){var n=parseInt(l.measurement_page_numeric,10),m=k.options.min_pages,j=k.options.max_pages,i=k.options.page_multiple;n=Math.min(Math.max(n,m),j)*i;return n+"px"};b.normalize_link=function(i){return i.title_link_friendly?"../shelflife/book/"+i.title_link_friendly+"/"+i.id:i.link};b.get_author=function(j){var i=j.creator&&j.creator.length?j.creator[0]:"";if(/^([^,]*)/.test(i)){i=i.match(/^[^,]*/)}return i};b.render_items=function(i,m,j){var k=j?"after":"append",l=j?j:i.$element.find(i.options.selectors.item_list);g.each(m,function(o,p){var n=g(tmpl(c.templates.book,{heat:b.get_heat(p.shelfrank),book_height:b.get_height(i,p),book_thickness:b.get_thickness(i,p),link:b.normalize_link(p),title:p.title,author:b.get_author(p),year:p.pub_date}));n.data("stackviewItem",p);l[k](n)});if(j){j.remove()}};b.calculate_params=function(i){var k={start:i.page*i.options.items_per_page,limit:i.options.items_per_page,search_type:i.options.search_type,query:i.options.query},j,l;if(k.search_type==="loc_sort_order"){k.start="-1";if(i.page===0){k.query=["[",i.options.id-Math.floor(i.options.items_per_page/2),"%20TO%20",i.options.id+Math.floor(i.options.items_per_page/2),"]"].join("")}else{if(i.direction==="down"){j=i.$element.find(i.options.selectors.item).last();l=j.data("stackviewItem").loc_sort_order[0]+1;k.query=["[",l,"%20TO%20",l+i.options.items_per_page,"]"].join("")}else{if(i.direction==="up"){j=i.$element.find(i.options.selectors.item).first();l=j.data("stackviewItem").loc_sort_order[0]+1;k.query=["[",l-i.options.items_per_page,"%20TO%20",l,"]"].join("")}}}}return k};b.fetch_page=function(j,m){var l=b.calculate_params(j),k,i;if(j.options.jsonp){l.callback="?"}i=g.param(l);j.page++;k=f.stackCache.get(j.options.url+i);if(k){m(k)}else{g.getJSON(j.options.url,i,function(n){f.stackCache.set(j.options.url+l,n,j.options.cache_ttl);m(n)})}};b.reverse_flow=function(j){var m=j.$element.find(j.options.selectors.item);for(var k=m.length-1,l=0;k>=0;k--,l++){m.eq(k).css("z-index",l)}};c=function(j,i){this.element=j;this.$element=g(j);this.options=g.extend({},c.defaults,i);this.page=0;this.finished={up:false,down:false};this.loc_sort_order=h;this.direction="down";this.init()};g.extend(c,{defaults:{url:"basic.json",data:"",jsonp:false,items_per_page:10,threshold:1000,page_multiple:0.2,height_multiple:12.5,search_type:"keyword",query:"",ribbon:"Stack View",id:null,min_pages:200,max_pages:540,min_item_height:20,max_item_height:39,cache_ttl:60,selectors:{item:".stack-item",item_list:".stack-items",ribbon:".ribbon"}}});g.extend(true,c.prototype,{init:function(){var i=this;this.$element.html(tmpl(c.templates.scaffold,{ribbon:this.options.ribbon})).addClass(e).bind(d.page_load,function(){b.reverse_flow(i)});this.$element.data("stackviewObject",this);this.$element.trigger(d.init);this.next_page()},next_page:function(){var i=g(tmpl(c.templates.placeholder,{})),k=this,j=this.options;if(this.finished.down){return}this.direction="down";if(j.data){b.render_items(this,j.data.docs?j.data.docs:j.data);this.finished.down=true;this.$element.trigger(d.page_load,[j.data])}else{if(j.url){this.$element.find(j.selectors.item_list).append(i);b.fetch_page(this,function(l){b.render_items(k,l.docs,i);if(parseInt(l.start,10)===-1){k.finished.down=true}console.log(d.page_load);k.$element.trigger(d.page_load,[l])})}}},prev_page:function(){var i=g(tmpl(c.templates.placeholder,{})),k=this.options,j=this;if(k.search_type!=="loc_sort_order"||this.finished.up){return}this.direction="up";this.$element.find(k.selectors.item_list).prepend(i);b.fetch_page(this,function(l){var m=j.$element.find(k.selectors.item).first();b.render_items(j,l.docs,i);if(page>1){j.$element.find(k.selectors.item_list).animate({scrollTop:"+="+m.position().top},0)}if(parseInt(l.start,10)===-1){j.finished.up=true}j.$element.trigger(d.page_load,[l])})}});g.fn[e]=function(k){var i,j=Array.prototype.slice.call(arguments,1);this.each(function(m,o){var l=g(o),p=l.data("stackviewObject");if(!p){new c(o,k)}else{if(p[k]){var n=p[k](j);if(i===h&&n!==h){i=n}}}});return i===h?this:i};f.StackView=c})(jQuery,window,document);(function(c,d){var a=c(document),b;c.extend(StackView.defaults,{infiniteScrollDistance:100});b=function(f){var l=c(f.target),m=l.data("stackviewObject"),j,e,g,i,h,k;if(!m){return}e=m.options;j=l.find(e.selectors.item_list);g=j.find(e.selectors.item).last().position().top;g+=j.scrollTop();i=g-l.height()-e.infiniteScrollDistance;h=function(){if(j.scrollTop()>=i){j.unbind("scroll.stackview",h);l.stackview("next_page")}};k=function(){if(j.scrollTop()<=e.infiniteScrollDistance){j.unbind("scroll.stackview",k);l.stackview("prev_page")}};j.bind("scroll.stackview",h);j.bind("scroll.stackview",k);h();k()};a.delegate(".stackview","stackview.pageload",b)})(jQuery);(function(c,d){var b=c(document),a=window.StackView;c.extend(true,a.defaults,{transitionDuration:200,navigationPercent:80,selectors:{downstream:".downstream",upstream:".upstream",num_items:".num-found span"}});b.delegate(".stackview","stackview.init",function(f){var g=c(f.target),e=g.data("stackviewObject"),i=g.find(e.options.selectors.item_list),h=g.height()*e.options.navigationPercent/100;g.prepend(tmpl(a.templates.navigation,{}));g.delegate(e.options.selectors.downstream,"click",function(){i.animate({scrollTop:"+="+h},e.options.transitionDuration);return false}).delegate(e.options.selectors.upstream,"click",function(){i.animate({scrollTop:"-="+h},e.options.transitionDuration);return false})}).delegate(".stackview","stackview.pageload",function(g,h){var i=c(g.target),e=i.data("stackviewObject"),f=h.num_found?h.num_found:h.length;i.find(e.options.selectors.num_items).text(f)})})(jQuery);window.stackCache=(function(d,f){var b={},e=d.JSON&&(function(){try{return("localStorage" in d)&&d.localStorage!==null}catch(h){return false}})();return{set:g,get:c,remove:a};function g(j,k,h){var i=h&&new Date(+new Date()+h*1000),m={expires:+i,value:k};if(e){try{localStorage[j]=JSON.stringify(m)}catch(l){return l}}else{b[j]=m}}function c(h){var i,j;if(e){i=localStorage[h];if(i){i=JSON.parse(i)}}else{i=b[h]}if(i){if(i.expires&&i.expires<+new Date()){a(h)}else{j=i.value}}return j}function a(h){if(e){localStorage.removeItem(h)}else{delete b[h]}}})(window);(function(a){StackView.templates={scaffold:' <div class="ribbon"><%= ribbon %></div> <ul class="stack-items" />',navigation:' <div class="stack-navigation"> <div class="upstream">Up</div> <div class="num-found"> <span></span><br />items </div> <div class="downstream">Down</div> </div>',book:' <li class="stack-item stack-book heat<%= heat %>" style="width:<%= book_height %>; height:<%= book_thickness %>;"> <a href="<%= link %>" target="_newtab"> <span class="spine-text"> <span class="spine-title"><%= title %></span> <span class="spine-author"><%= author %></span> </span> <span class="spine-year"><%= year %></span> <span class="stack-pages" /> <span class="stack-cover" /> </a> </li>',placeholder:'<li class="stackview-placeholder"></li>'}})();
+(function(g,f,a,h){var d,e="stackView",c,b={};d={init:"stackview.init",page_load:"stackview.pageload"};b.get_heat=function(i){return i===100?10:Math.floor(i/10)+1};b.get_height=function(l,m){var k=parseInt(m.measurement_height_numeric,10),n=l.options.min_item_height,j=l.options.max_item_height,i=l.options.height_multiple;k=Math.min(Math.max(k,n),j)*i;return k+"px"};b.get_thickness=function(k,l){var n=parseInt(l.measurement_page_numeric,10),m=k.options.min_pages,j=k.options.max_pages,i=k.options.page_multiple;n=Math.min(Math.max(n,m),j)*i;return n+"px"};b.normalize_link=function(i){return i.title_link_friendly?"../shelflife/book/"+i.title_link_friendly+"/"+i.id:i.link};b.get_author=function(j){var i=j.creator&&j.creator.length?j.creator[0]:"";if(/^([^,]*)/.test(i)){i=i.match(/^[^,]*/)}return i};b.render_items=function(i,m,j){var k=j?"before":"append",l=j?j:i.$element.find(i.options.selectors.item_list);g.each(m,function(o,p){var n=g(tmpl(c.templates.book,{heat:b.get_heat(p.shelfrank),book_height:b.get_height(i,p),book_thickness:b.get_thickness(i,p),link:b.normalize_link(p),title:p.title,author:b.get_author(p),year:p.pub_date}));n.data("stackviewItem",p);l[k](n)});if(j){j.remove()}};b.calculate_params=function(i){var k={start:i.page*i.options.items_per_page,limit:i.options.items_per_page,search_type:i.options.search_type,query:i.options.query},j,l;if(k.search_type==="loc_sort_order"){k.start="-1";if(i.page===0){k.query=["[",i.options.id-Math.floor(i.options.items_per_page/2),"%20TO%20",i.options.id+Math.floor(i.options.items_per_page/2),"]"].join("")}else{if(i.direction==="down"){j=i.$element.find(i.options.selectors.item).last();l=j.data("stackviewItem").loc_sort_order[0]+1;k.query=["[",l,"%20TO%20",l+i.options.items_per_page,"]"].join("")}else{if(i.direction==="up"){j=i.$element.find(i.options.selectors.item).first();l=j.data("stackviewItem").loc_sort_order[0]+1;k.query=["[",l-i.options.items_per_page,"%20TO%20",l,"]"].join("")}}}}return k};b.fetch_page=function(j,m){var l=b.calculate_params(j),k,i;if(j.options.jsonp){l.callback="?"}i=g.param(l);j.page++;k=f.stackCache.get(j.options.url+i);if(k){m(k)}else{g.getJSON(j.options.url,i,function(n){f.stackCache.set(j.options.url+l,n,j.options.cache_ttl);m(n)})}};b.reverse_flow=function(j){var m=j.$element.find(j.options.selectors.item);for(var k=m.length-1,l=0;k>=0;k--,l++){m.eq(k).css("z-index",l)}};c=function(j,i){this.element=j;this.$element=g(j);this.options=g.extend({},c.defaults,i);this.page=0;this.finished={up:false,down:false};this.loc_sort_order=h;this.direction="down";this.init()};g.extend(c,{defaults:{url:"basic.json",data:"",jsonp:false,items_per_page:10,threshold:1000,page_multiple:0.2,height_multiple:12.5,search_type:"keyword",query:"",ribbon:"Stack View",id:null,min_pages:200,max_pages:540,min_item_height:20,max_item_height:39,cache_ttl:60,selectors:{item:".stack-item",item_list:".stack-items",ribbon:".ribbon"}}});g.extend(true,c.prototype,{init:function(){var i=this;this.$element.html(tmpl(c.templates.scaffold,{ribbon:this.options.ribbon})).addClass("stackview").bind(d.page_load,function(){b.reverse_flow(i)});this.$element.data("stackviewObject",this);this.$element.trigger(d.init);this.next_page()},next_page:function(){var i=g(tmpl(c.templates.placeholder,{})),k=this,j=this.options;if(this.finished.down){return}this.direction="down";if(j.data){b.render_items(this,j.data.docs?j.data.docs:j.data);this.finished.down=true;this.$element.trigger(d.page_load,[j.data])}else{if(j.url){this.$element.find(j.selectors.item_list).append(i);b.fetch_page(this,function(l){b.render_items(k,l.docs,i);if(parseInt(l.start,10)===-1){k.finished.down=true}k.$element.trigger(d.page_load,[l])})}}},prev_page:function(){var i=g(tmpl(c.templates.placeholder,{})),k=this.options,j=this;if(k.search_type!=="loc_sort_order"||this.finished.up){return}this.direction="up";this.$element.find(k.selectors.item_list).prepend(i);b.fetch_page(this,function(l){var m=j.$element.find(k.selectors.item).first();b.render_items(j,l.docs,i);if(page>1){j.$element.find(k.selectors.item_list).animate({scrollTop:"+="+m.position().top},0)}if(parseInt(l.start,10)===-1){j.finished.up=true}j.$element.trigger(d.page_load,[l])})}});g.fn[e]=function(k){var i,j=Array.prototype.slice.call(arguments,1);this.each(function(m,o){var l=g(o),p=l.data("stackviewObject");if(!p){new c(o,k)}else{if(p[k]){var n=p[k](j);if(i===h&&n!==h){i=n}}}});return i===h?this:i};f.StackView=c})(jQuery,window,document);(function(c,d){var a=c(document),b;c.extend(StackView.defaults,{infiniteScrollDistance:100});b=function(f){var l=c(f.target),m=l.data("stackviewObject"),j,e,g,i,h,k;if(!m){return}e=m.options;j=l.find(e.selectors.item_list);g=j.find(e.selectors.item).last().position().top;g+=j.scrollTop();i=g-l.height()-e.infiniteScrollDistance;h=function(){if(j.scrollTop()>=i){j.unbind("scroll.stackview",h);l.stackView("next_page")}};k=function(){if(j.scrollTop()<=e.infiniteScrollDistance){j.unbind("scroll.stackview",k);l.stackView("prev_page")}};j.bind("scroll.stackview",h);j.bind("scroll.stackview",k);h();k()};a.delegate(".stackview","stackview.pageload",b)})(jQuery);(function(c,d){var b=c(document),a=window.StackView;c.extend(true,a.defaults,{transitionDuration:200,navigationPercent:80,selectors:{downstream:".downstream",upstream:".upstream",num_items:".num-found span"}});b.delegate(".stackview","stackview.init",function(f){var g=c(f.target),e=g.data("stackviewObject"),i=g.find(e.options.selectors.item_list),h=g.height()*e.options.navigationPercent/100;g.prepend(tmpl(a.templates.navigation,{}));g.delegate(e.options.selectors.downstream,"click",function(){i.animate({scrollTop:"+="+h},e.options.transitionDuration);return false}).delegate(e.options.selectors.upstream,"click",function(){i.animate({scrollTop:"-="+h},e.options.transitionDuration);return false})}).delegate(".stackview","stackview.pageload",function(g,h){var i=c(g.target),e=i.data("stackviewObject"),f=h.num_found?h.num_found:h.length;i.find(e.options.selectors.num_items).text(f)})})(jQuery);window.stackCache=(function(d,f){var b={},e=d.JSON&&(function(){try{return("localStorage" in d)&&d.localStorage!==null}catch(h){return false}})();return{set:g,get:c,remove:a};function g(j,k,h){var i=h&&new Date(+new Date()+h*1000),m={expires:+i,value:k};if(e){try{localStorage[j]=JSON.stringify(m)}catch(l){return l}}else{b[j]=m}}function c(h){var i,j;if(e){i=localStorage[h];if(i){i=JSON.parse(i)}}else{i=b[h]}if(i){if(i.expires&&i.expires<+new Date()){a(h)}else{j=i.value}}return j}function a(h){if(e){localStorage.removeItem(h)}else{delete b[h]}}})(window);(function(a){StackView.templates={scaffold:' <div class="ribbon"><%= ribbon %></div> <ul class="stack-items" />',navigation:' <div class="stack-navigation"> <div class="upstream">Up</div> <div class="num-found"> <span></span><br />items </div> <div class="downstream">Down</div> </div>',book:' <li class="stack-item stack-book heat<%= heat %>" style="width:<%= book_height %>; height:<%= book_thickness %>;"> <a href="<%= link %>" target="_newtab"> <span class="spine-text"> <span class="spine-title"><%= title %></span> <span class="spine-author"><%= author %></span> </span> <span class="spine-year"><%= year %></span> <span class="stack-pages" /> <span class="stack-cover" /> </a> </li>',placeholder:'<li class="stackview-placeholder"></li>'}})();
View
9 src/js/jquery.stackview.base.js
@@ -6,7 +6,7 @@
*/
(function($, window, document, undefined) {
var events,
- plugin = 'stackview',
+ plugin = 'stackView',
StackView,
utils = {};
@@ -98,7 +98,7 @@
items take the its spot in the DOM.
*/
utils.render_items = function(stack, docs, $placeholder) {
- var action = $placeholder ? 'after' : 'append',
+ var action = $placeholder ? 'before' : 'append',
$pivot = $placeholder ?
$placeholder :
stack.$element.find(stack.options.selectors.item_list);
@@ -289,7 +289,7 @@
.html(tmpl(StackView.templates.scaffold, {
ribbon: this.options.ribbon
}))
- .addClass(plugin)
+ .addClass('stackview')
.bind(events.page_load, function() {
utils.reverse_flow(that);
});
@@ -329,7 +329,6 @@
if (parseInt(data.start, 10) === -1) {
that.finished.down = true;
}
- console.log(events.page_load);
that.$element.trigger(events.page_load, [data]);
});
}
@@ -371,7 +370,7 @@
});
/*
- If .stackview has not been called on an element, the first call will
+ If .stackView has not been called on an element, the first call will
initialize the plugin. Subsequent calls expect a method from the
StackView class. Any method that returns undefined is assumed to
chain. If the method returns a value, only the value from the first
View
4 src/js/jquery.stackview.infinite.js
@@ -22,14 +22,14 @@
downCheck = function() {
if ($items.scrollTop() >= triggerPoint) {
$items.unbind('scroll.stackview', downCheck);
- $stack.stackview('next_page');
+ $stack.stackView('next_page');
}
};
upCheck = function() {
if ($items.scrollTop() <= opts.infiniteScrollDistance) {
$items.unbind('scroll.stackview', upCheck);
- $stack.stackview('prev_page');
+ $stack.stackView('prev_page');
}
}
View
2  test/mocks/json.php
@@ -13,7 +13,7 @@
$json['start'] = $numfound < $limit ? -1 : $offset;
$json['limit'] = $limit;
$json['num_found'] = 50;
-$json['docs'] = array_reverse($slice);
+$json['docs'] = $slice;
$results = json_encode($json);
echo isset($_GET['callback']) ? "{$_GET['callback']}($results)" : $results;
View
4 test/preview.html
@@ -18,12 +18,12 @@
<script src="mocks/static.js"></script>
<script>
$(function() {
- $('.static').stackview({
+ $('.static').stackView({
data: inlineData,
ribbon: 'Inline Static Data'
});
- $('.dynamic').stackview({
+ $('.dynamic').stackView({
url: 'mocks/json.php',
ribbon: 'Dynamic Data from json.php'
});
View
30 test/spec/stackview.base.spec.js
@@ -23,7 +23,7 @@ describe('Stack View Base', function() {
$stack.bind('stackview.pageload', function() {
pageload_fired = true;
});
- returned = $stack.stackview({
+ returned = $stack.stackView({
data: inlineData
});
});
@@ -75,7 +75,7 @@ describe('Stack View Base', function() {
describe('with static inline data', function() {
beforeEach(function() {
- $stack.stackview({
+ $stack.stackView({
data: inlineData // defined in mocks/static.js
});
});
@@ -88,7 +88,7 @@ describe('Stack View Base', function() {
describe('with AJAX/PHP loaded data', function() {
beforeEach(function() {
- $stack.stackview({
+ $stack.stackView({
url: 'mocks/json.php'
});
});
@@ -108,16 +108,16 @@ describe('Stack View Base', function() {
describe('#next_page()', function() {
describe('data source independent behavior', function() {
it('should return the jQuery object for chaining', function() {
- $stack.stackview({
+ $stack.stackView({
data: inlineData
});
- expect($stack.stackview('next_page')).toEqual($stack);
+ expect($stack.stackView('next_page')).toEqual($stack);
});
});
describe('with static inline data', function() {
beforeEach(function() {
- $stack.stackview({
+ $stack.stackView({
data: inlineData
});
spyOnEvent($stack, 'stackview.pageload');
@@ -126,7 +126,7 @@ describe('Stack View Base', function() {
it('should do nothing', function() {
var oldLength = $stack.find(opts.selectors.item);
- $stack.stackview('next_page');
+ $stack.stackView('next_page');
expect($stack.find(opts.selectors.item)).toEqual(oldLength);
expect('stackview.pageload').not.toHaveBeenTriggeredOn($stack);
});
@@ -138,7 +138,7 @@ describe('Stack View Base', function() {
beforeEach(function() {
loadCount = 0;
- $stack.stackview({
+ $stack.stackView({
url: 'mocks/json.php',
items_per_page: ipp
});
@@ -148,7 +148,7 @@ describe('Stack View Base', function() {
});
it('should fire the pageload event', function() {
- $stack.stackview('next_page');
+ $stack.stackView('next_page');
waitsFor(function() {
return loadCount === 2;
}, 'pageload event to fire', 5000);
@@ -156,7 +156,7 @@ describe('Stack View Base', function() {
it('should load the next page of items', function() {
runs(function() {
- $stack.stackview('next_page');
+ $stack.stackView('next_page');
});
waitsFor(function() {
@@ -171,9 +171,9 @@ describe('Stack View Base', function() {
it('should stop at the end', function() {
runs(function() {
$stack.data('stackviewObject').options.beacon = true;
- $stack.stackview('next_page'); // 26
- $stack.stackview('next_page'); // 39
- $stack.stackview('next_page'); // end (50)
+ $stack.stackView('next_page'); // 26
+ $stack.stackView('next_page'); // 39
+ $stack.stackView('next_page'); // end (50)
});
waitsFor(function() {
@@ -182,7 +182,7 @@ describe('Stack View Base', function() {
runs(function() {
expect($stack.find(opts.selectors.item).length).toEqual(50);
- $stack.stackview('next_page'); // do nothing!
+ $stack.stackView('next_page'); // do nothing!
});
waits(1500);
@@ -198,7 +198,7 @@ describe('Stack View Base', function() {
}, 'init load to finish');
runs(function() {
- $stack.stackview('next_page');
+ $stack.stackView('next_page');
expect($('.stackview-placeholder')).toExist();
});
View
2  test/spec/stackview.infinite.spec.js
@@ -15,7 +15,7 @@ describe('Stack View Infinite Scroll', function() {
.bind('stackview.pageload', function() {
loadCount++;
})
- .stackview({
+ .stackView({
url: 'mocks/json.php'
});
$items = $stack.find(opts.selectors.item_list);
View
2  test/spec/stackview.navigation.spec.js
@@ -5,7 +5,7 @@ describe('Stack View Navigation', function() {
beforeEach(function() {
loadFixtures('default.html');
- $stack = $('#stack').stackview({
+ $stack = $('#stack').stackView({
data: inlineData
});
$up = $stack.find(opts.selectors.upstream);
Please sign in to comment.
Something went wrong with that request. Please try again.