Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

We’re showing branches in this repository, but you can also compare across forks.

base fork: BorisMoore/jquery-tmpl
base: master
...
head fork: nje/jquery-tmpl
compare: master
  • 12 commits
  • 46 files changed
  • 0 commit comments
  • 2 contributors
Commits on Sep 24, 2010
Boris Moore Fix to processItemKey to make it more robust to deal with
'unexpected situations', e.g. IE9 Beta, which seems to remove the
parentNode attribute from the immediate child nodes of a Document Fragment.
This change may also fix Issue 25.
bc129c7
Commits on Sep 28, 2010
Boris Moore Fixed Regex expression to prevent some parsing errors where the
opening paren was taken from one template tag, and the closing paren
from the next.
bdc4c88
Commits on Oct 04, 2010
Boris Moore Updated readme following decision to make jQuery Templates an officia…
…l jQuery plugin.
e63e038
Commits on Oct 05, 2010
Boris Moore Updated readme 2a6173c
Commits on Oct 07, 2010
Boris Moore Modified readme. 85bf1a0
Commits on Mar 10, 2011
Boris Moore Updated readme to make really clear that this is not the main reposit…
…ory for jQuery Templates.
e16b1df
Commits on Oct 13, 2011
Boris Moore Edited README.md via GitHub 3682c07
Boris Moore Edited README.md via GitHub 6676310
Boris Moore Edited README.md via GitHub 51e17ad
Boris Moore Edited README.md via GitHub b288d4c
Boris Moore Edited README.md via GitHub 2e1625e
Boris Moore Edited README.md via GitHub c285ab3
Showing with 4 additions and 6,289 deletions.
  1. +4 −41 README.md
  2. +0 −361 demos/movies/PagesCore/movies.html
  3. +0 −358 demos/movies/PagesTmplPlus/movies1.html
  4. +0 −348 demos/movies/PagesTmplPlus/movies2.html
  5. +0 −337 demos/movies/PagesTmplPlus/movies3.html
  6. +0 −1,929 demos/movies/components/jquery-ui-1.8.1.custom.js
  7. +0 −96 demos/movies/components/jquery-ui-1.8.1.custom.min.js
  8. +0 −132 demos/movies/components/jquery.pager.js
  9. +0 −408 demos/movies/css/jquery-ui-1.8.1.custom.css
  10. +0 −283 demos/movies/css/movies.css
  11. BIN  demos/movies/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png
  12. BIN  demos/movies/images/ui-bg_dots-small_65_a6a6a6_2x2.png
  13. BIN  demos/movies/images/ui-bg_flat_0_333333_40x100.png
  14. BIN  demos/movies/images/ui-bg_flat_65_ffffff_40x100.png
  15. BIN  demos/movies/images/ui-bg_flat_75_ffffff_40x100.png
  16. BIN  demos/movies/images/ui-bg_glass_55_fbf8ee_1x400.png
  17. BIN  demos/movies/images/ui-bg_glass_75_dadada_1x400.png
  18. BIN  demos/movies/images/ui-bg_highlight-hard_100_eeeeee_1x100.png
  19. BIN  demos/movies/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png
  20. BIN  demos/movies/images/ui-bg_highlight-soft_15_cc0000_1x100.png
  21. BIN  demos/movies/images/ui-icons_004276_256x240.png
  22. BIN  demos/movies/images/ui-icons_cc0000_256x240.png
  23. BIN  demos/movies/images/ui-icons_ffffff_256x240.png
  24. BIN  demos/samplesCore/Interactive/resources/collapsed.png
  25. BIN  demos/samplesCore/Interactive/resources/empty.png
  26. BIN  demos/samplesCore/Interactive/resources/expanded.png
  27. BIN  demos/samplesCore/Interactive/resources/folder.png
  28. +0 −75 demos/samplesCore/Interactive/resources/tabs.css
  29. +0 −50 demos/samplesCore/Interactive/resources/treeView.css
  30. +0 −77 demos/samplesCore/Interactive/tabsTmpl.html
  31. +0 −94 demos/samplesCore/Interactive/tabsWrap.html
  32. +0 −74 demos/samplesCore/Interactive/tabsWrapImperative.html
  33. +0 −116 demos/samplesCore/Interactive/tabsWrapNested.html
  34. +0 −123 demos/samplesCore/Interactive/treeView.html
  35. +0 −133 demos/samplesCore/basic.html
  36. +0 −91 demos/samplesCore/composition.html
  37. +0 −36 demos/samplesCore/conditional.html
  38. +0 −79 demos/samplesCore/each.html
  39. +0 −98 demos/samplesCore/parameters.html
  40. +0 −95 demos/samplesTmplPlus/basic.html
  41. +0 −91 demos/samplesTmplPlus/composition.html
  42. +0 −80 demos/samplesTmplPlus/each.html
  43. +0 −98 demos/samplesTmplPlus/parameters.html
  44. +0 −7 disclaimer.txt
  45. +0 −486 jquery.tmpl.js
  46. +0 −93 jquery.tmplPlus.js
45 README.md
View
@@ -1,44 +1,7 @@
-A jQuery templating plugin.
-Note: this plugin requires jquery version 1.4.2.
-____________________________________________________________________
+## This repository was the home of the jQuery Templates plugin, and is no longer active.
- // Render one LI, filled with data, then append it into the UL
+The jQuery Templates plugin (here and at [github.com/BorisMoore/jquery-tmpl](https://github.com/BorisMoore/jquery-tmpl)) was adopted by the jQuery team as an official plugin, and migrated to [http://github.com/jquery/jquery-tmpl](http://github.com/jquery/jquery-tmpl). It is now owned by jQuery UI, who have decided to discontinue development.
- $.tmpl( "<li>${firstName}</li>", dataObject )
- .appendTo( "ul" );
-____________________________________________________________________
-
- <!-- Declare a template as a script block of type "text/x-jquery-tmpl" -->
-
- <script id="sometmpl" type="text/x-jquery-tmpl">
- <li>${firstName}</li>
- </script>
-____________________________________________________________________
-
- // Render the declared template as one LI appended to the target UL
-
- $( "#sometmpl" )
- .tmpl( dataObject )
- .appendTo( "ul" );
-____________________________________________________________________
-
- // Render the declared template as multiple LIs appended to the target UL
- // Provide a click event accessing the data
-
- $( "#sometmpl" )
- .tmpl( arrayOfDataObjects )
- .appendTo( "ul" )
- .click( function() {
- alert( $.tmpl(this).data.firstName );
- });
-____________________________________________________________________
-
- // Store a string as a compiled template for later use
- $.template( "myTmpl", "<span>${firstName}</span>" );
-
- // Render stored template and insert after target.
- $.tmpl( "myTmpl", dataObject )
- .insertAfter( "#target" );
-
-____________________________________________________________________
+**_Note_: Ongoing work on jQuery Templates (next-generation) is continuing at [JsRender](https://github.com/BorisMoore/jsrender) and [JsViews](https://github.com/BorisMoore/jsviews).**
+**See [this blog post](http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html) for more context on the roadmap for jQuery Templates, JsRender and JsViews...**
361 demos/movies/PagesCore/movies.html
View
@@ -1,361 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<!--
-This sample illustrates using templates for a more complete and
-realistic scenario.
-
-It uses the NetFlix OData JSONP services as a source of data.
-
-This version of the movies sample demo uses the
- $( templateSelector ).tmpl( data ).appendTo( targetSelector )
-pattern, and does not use the tmplCmd plugin or the rendered event.
--->
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <title>jQuery + OData + Netflix Catalog API</title>
- <link href="../css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
- <link href="../css/movies.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-<div id="about">
- This is a demo of updates to the jQuery templating feature, proposed by Microsoft.<br/>
- The source can be viewed here: <a href="http://github.com/nje/jquery-tmpl/">NJE Templating Branch on GitHub</a>
-</div>
-<div id="pageBody">
-<h1>Netflix: Book a Movie...</h1>
-
- <ul id="genres">
- <li class="selected">Cartoons</li>
- <li>Drama</li>
- <li>Foreign</li>
- <li>Action Classics</li>
- <li>Horror</li>
- <li>Sci-Fi Cult Classics</li>
- </ul>
-
- <div id="pager"><ul class="pages"><li class="pgEmpty">first</li><li class="pgEmpty">prev</li></ul></div>
-
- <div id="movieList"></div>
- <table id="bookingsList">
- <tbody><tr class="cart"><td class="cart-false" colspan="4">
- <span class="text">0 items in Cart...</span>
- </td></tr></tbody>
- </table>
- <br/>
-</div>
-<script src="http://code.jquery.com/jquery.js"></script>
-<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
-<script src="../components/jquery.pager.js" type="text/javascript"></script>
-<script src="../components/jquery-ui-1.8.1.custom.js" type="text/javascript"></script>
-
-<script id="movieTmpl" type="text/x-jquery-tmpl">
- <div>
- <div><img src="${BoxArt.LargeUrl}" /> </div>
- <strong>${Name}</strong>
- <p>{{html Synopsis}}</p>
- <input type="button" title="Buy tickets for '${Name}'" value="Add to cart..." class="buyButton"/>
- <br/>
- </div>
-</script>
-
-<script id="cartTmpl" type="text/x-jquery-tmpl">
- <td class="cart-${!!count}" colspan="4">
- <span class="text">${count} items in Cart...</span>
- {{if count}}
- <span id="submit">Checkout</span>
- <span id="cancel">Remove All</span>
- {{if count>1}}
- <span id="sort"><span id="sortBtn">Sort</span>:
- <select>
- <option value="0" {{if sortBy==="0"}}selected{{/if}}>Name A-Z</option>
- <option value="1" {{if sortBy==="1"}}selected{{/if}}>Name Z-A</option>
- <option value="2" {{if sortBy==="2"}}selected{{/if}}>Date</option>
- </select>
- </span>
- {{/if}}
- </select>
- {{/if}}
- </td>
-</script>
-
-<script id="bookingTitleTmpl" type="text/x-jquery-tmpl">
- <tr class="bookingTitle${$item.mode}">
- <td>${movie.Name}</td><td>${movieTheater}</td>
- <td>${formatDate(date)}</td>
- <td>
- ${quantity}
- <span class="ui-icon close"></span>
- </td>
- </tr>
-</script>
-
-<script id="bookingEditTmpl" type="text/x-jquery-tmpl">
- {{tmpl($data, {mode: "Edit"}) "#bookingTitleTmpl"}}
- <tr class="bookingEdit">
- <td colspan="4">
- <div class="fields">
- <span>Movie Theater: </span><input class="theater" type="text" value="${movieTheater}" /><br/>
- <span>Date: </span><input class="date" type="text" value="${formatDate(date)}" /><br/>
- <span>Quantity: </span><input class="quantity" type="text" value="${quantity}" />
- </div>
- <div><img src="${movie.BoxArt.LargeUrl}" /></div>
- </td>
- </tr>
-</script>
-
-<script type="text/javascript">
- var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
- cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = {}, selectedBooking;
-
- getMovies( pageIndex );
-
- $( "#genres li" ).click( selectGenre );
-
- $( ".cart" )
- .delegate( "select", "change", sort )
- .delegate( "#sortBtn", "click", sort )
- .delegate( "#submit", "click", function() {
- alert( cart.count + " bookings submitted for payment...");
- removeBookings();
- })
- .delegate( "#cancel", "click", function() {
- removeBookings();
- })
- .empty();
-
- $( "#cartTmpl" )
- .tmpl( cart )
- .appendTo( ".cart", cart );
-
- var cartTmplItem = $( ".cart td" ).tmplItem();
-
- function selectGenre() {
- $( "#genres li" ).removeClass( "selected" );
- $( this ).addClass( "selected" );
-
- pageIndex = 1;
- genre = encodeURI( $(this).text() );
- getMovies( pageIndex );
- }
-
- function sort() {
- var compare = compareName, reverse = false, data = [];
- cart.sortBy = $( "#sort select" ).val();
- switch ( $( "#sort select" ).val() ) {
- case "1":
- reverse = true;
- break;
- case "2":
- compare = compareDate;
- break;
- }
-
- for ( var item in cart.bookings ) {
- data.push( cart.bookings[item] );
- }
- data = data.sort( compare );
-
- for ( var i = 0, l = data.length; i < l; i++ ) {
- $( bookingTmplItems[data[i].movie.Id].nodes ).appendTo( "#bookingsList" );
- }
-
- function compareName( a, b ) {
- return a == b ? 0 : (((a.movie.Name > b.movie.Name) !== reverse) ? 1 : -1);
- }
- function compareDate( a, b ) {
- return a.date - b.date;
- }
- }
-
- function getMovies( index ) {
- var query = "http://odata.netflix.com/Catalog/Genres('" + genre + "')/Titles" +
- "?$format=json" +
- "&$inlinecount=allpages" + // get total number of records
- "&$skip=" + (index-1) * pageSize + // skip to first record of page
- "&$top=" + pageSize; // page size
-
- pageIndex = index;
-
- $( "#movieList" )
- .fadeOut( "medium", function () {
- $.ajax({
- dataType: "jsonp",
- url: query,
- jsonp: "$callback",
- success: showMovies
- });
- });
- }
-
- function showMovies( data ) {
- pageCount = Math.ceil( data.d.__count/pageSize ),
- movies = data.d.results;
-
- $( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });
-
- $( "#movieList" ).empty();
-
- $( "#movieTmpl" )
- // Render movies using the movieTemplate
- .tmpl( movies )
-
- // Display rendered movies in the movieList container
- .appendTo( "#movieList" )
-
- // Animate
- .find( "div" ).fadeIn( 4000 ).end()
-
- // Add click handler
- .find( ".buyButton" ).click( function() {
- buyTickets( $(this).tmplItem().data );
- });
-
- $( "#movieList" ).fadeIn( "medium" )
- }
-
- function buyTickets( movie ) {
- // Add item to cart
- var booking = cart.bookings[movie.Id];
- if ( booking ) {
- booking.quantity++;
- } else {
- cart.count++;
- cartTmplItem.update();
- booking = { movie: movie, date: new Date(), quantity: 1, movieTheater: "" };
- }
- selectBooking( booking );
- }
-
- function selectBooking( booking ) {
- if ( selectedBooking ) {
- if ( selectedBooking === booking ) {
- updateBooking( bookingTmplItems[selectedBooking.movie.Id]);
- return;
- }
- // Collapse previously selected booking, and switch to non-edit view
- var oldSelected = selectedBooking;
- $( "div", bookingTmplItems[oldSelected.movie.Id].nodes ).animate( { height: 0 }, 500, function() {
- switchView( oldSelected );
- });
- }
- selectedBooking = booking;
- if ( !booking ) {
- return;
- }
- if ( cart.bookings[booking.movie.Id] ) {
- switchView( booking, true );
- } else {
- cart.bookings[booking.movie.Id] = booking;
-
- var bookingNode = $( "#bookingEditTmpl" )
-
- // Render the booking for the chosen movie using the bookingEditTemplate
- .tmpl( booking, { animate: true } )
-
- // Append the rendered booking to the bookings list
- .appendTo( "#bookingsList" )
-
- // Get the 2nd <tr> of the appended booking
- .last()[0];
-
- // Get the template item for the 2nd <tr>, which is the template item for the "bookingEditTmpl" template
- var newItem = $.tmplItem( bookingNode );
- bookingTmplItems[booking.movie.Id] = newItem;
-
- // Attach handlers etc. on the rendered template.
- bookingEditRendered( newItem );
- }
- }
-
- function bookingEditRendered( item ) {
- var data = item.data, nodes = item.nodes;
-
- $( nodes[0] ).click( function() {
- selectBooking();
- });
-
- $( ".close", nodes ).click( removeBooking );
-
- $( ".date", nodes ).change( function() {
- data.date = $(this).datepicker( "getDate" );
- updateBooking( item );
- })
- .datepicker({ dateFormat: "DD, d MM, yy" });
-
- $( ".quantity", nodes ).change( function() {
- data.quantity = $(this).val();
- updateBooking( item );
- });
-
- $( ".theater", nodes ).change( function() {
- data.movieTheater = $(this).val();
- updateBooking( item );
- });
-
- if ( item.animate ) {
- $( "div", nodes ).css( "height", 0 ).animate( { height: 116 }, 500 );
- }
- }
-
- function bookingRendered( item ) {
- $( item.nodes ).click( function() {
- selectBooking( item.data );
- });
- $( ".close", item.nodes ).click( removeBooking );
- }
-
- function switchView( booking, edit ) {
- if ( !booking ) {
- return;
- }
- var item = bookingTmplItems[booking.movie.Id],
- tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).template();
- if ( item.tmpl !== tmpl) {
- item.tmpl = tmpl;
- item.update();
- (edit ? bookingEditRendered : bookingRendered)( item );
- }
- }
-
- function updateBooking( item ) {
- item.animate = false;
- item.update();
- (item.data === selectedBooking ? bookingEditRendered : bookingRendered)( item );
- item.animate = true;
- }
-
- function removeBooking() {
- var booking = $.tmplItem(this).data;
- if ( booking === selectedBooking ) {
- selectedBooking = null;
- }
- delete cart.bookings[booking.movie.Id];
- cart.count--;
- cartTmplItem.update();
- $( bookingTmplItems[booking.movie.Id].nodes ).remove();
- delete bookingTmplItems[booking.movie.Id];
- return false;
- }
-
- function removeBookings() {
- for ( var item in bookingTmplItems ) {
- $( bookingTmplItems[item].nodes ).remove();
- delete bookingTmplItems[item];
- }
- bookingTmplItems = {};
- cart.count = 0;
- cart.bookings = {};
- selectedBooking = null;
- cartTmplItem.update();
- }
-
- function formatDate( date ) {
- return date.toLocaleDateString();
- }
-
- function removeContext( item ) {
- $( item.nodes ).remove();
- }
-</script>
-
-</body>
-</html>
358 demos/movies/PagesTmplPlus/movies1.html
View
@@ -1,358 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<!--
-This sample illustrates using templates for a more complete and
-realistic scenario.
-
-It uses the NetFlix OData JSONP services as a source of data.
-
-This version of the movies sample demo uses the
- $( templateSelector ).tmpl( data ).appendTo( targetSelector )
-pattern, and also uses the tmplCmd plugin.
-It does not use the rendered event.
--->
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <title>jQuery + OData + Netflix Catalog API</title>
- <link href="../css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
- <link href="../css/movies.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-<div id="about">
- This is a demo of updates to the jQuery templating feature, proposed by Microsoft.<br/>
- The source can be viewed here: <a href="http://github.com/nje/jquery-tmpl/">NJE Templating Branch on GitHub</a>
-</div>
-<div id="pageBody">
-<h1>Netflix: Book a Movie...</h1>
-
- <ul id="genres">
- <li class="selected">Cartoons</li>
- <li>Drama</li>
- <li>Foreign</li>
- <li>Action Classics</li>
- <li>Horror</li>
- <li>Sci-Fi Cult Classics</li>
- </ul>
-
- <div id="pager"><ul class="pages"><li class="pgEmpty">first</li><li class="pgEmpty">prev</li></ul></div>
-
- <div id="movieList"></div>
- <table id="bookingsList">
- <tbody><tr class="cart"><td class="cart-false" colspan="4">
- <span class="text">0 items in Cart...</span>
- </td></tr></tbody>
- </table>
- <br/>
-</div>
-<script src="http://code.jquery.com/jquery.js"></script>
-<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
-<script src="../../../jquery.tmplPlus.js" type="text/javascript"></script>
-<script src="../components/jquery.pager.js" type="text/javascript"></script>
-<script src="../components/jquery-ui-1.8.1.custom.js" type="text/javascript"></script>
-
-<script id="movieTmpl" type="text/x-jquery-tmpl">
- <div>
- <div><img src="${BoxArt.LargeUrl}" /> </div>
- <strong>${Name}</strong>
- <p>{{html Synopsis}}</p>
- <input type="button" title="Buy tickets for '${Name}'" value="Add to cart..." class="buyButton"/>
- <br/>
- </div>
-</script>
-
-<script id="cartTmpl" type="text/x-jquery-tmpl">
- <td class="cart-${!!count}" colspan="4">
- <span class="text">${count} items in Cart...</span>
- {{if count}}
- <span id="submit">Checkout</span>
- <span id="cancel">Remove All</span>
- {{if count>1}}
- <span id="sort"><span id="sortBtn">Sort</span>:
- <select>
- <option value="0" {{if sortBy==="0"}}selected{{/if}}>Name A-Z</option>
- <option value="1" {{if sortBy==="1"}}selected{{/if}}>Name Z-A</option>
- <option value="2" {{if sortBy==="2"}}selected{{/if}}>Date</option>
- </select>
- </span>
- {{/if}}
- </select>
- {{/if}}
- </td>
-</script>
-
-<script id="bookingTitleTmpl" type="text/x-jquery-tmpl">
- <tr class="bookingTitle${$item.mode}">
- <td>${movie.Name}</td><td>${movieTheater}</td>
- <td>${formatDate(date)}</td>
- <td>
- ${quantity}
- <span class="ui-icon close"></span>
- </td>
- </tr>
-</script>
-
-<script id="bookingEditTmpl" type="text/x-jquery-tmpl">
- {{tmpl($data, {mode: "Edit"}) "#bookingTitleTmpl"}}
- <tr class="bookingEdit">
- <td colspan="4">
- <div class="fields">
- <span>Movie Theater: </span><input class="theater" type="text" value="${movieTheater}" /><br/>
- <span>Date: </span><input class="date" type="text" value="${formatDate(date)}" /><br/>
- <span>Quantity: </span><input class="quantity" type="text" value="${quantity}" />
- </div>
- <div><img src="${movie.BoxArt.LargeUrl}" /></div>
- </td>
- </tr>
-</script>
-
-<script type="text/javascript">
- var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
- cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;
-
- getMovies( pageIndex );
-
- $( "#genres li" ).click( selectGenre );
-
- $( ".cart" )
- .delegate( "select", "change", sort )
- .delegate( "#sortBtn", "click", sort )
- .delegate( "#submit", "click", function() {
- alert( cart.count + " bookings submitted for payment...");
- removeBookings();
- })
- .delegate( "#cancel", "click", function() {
- removeBookings();
- })
- .empty();
-
- $( "#cartTmpl" )
- .tmpl( cart )
- .appendTo( ".cart", cart );
-
- var cartTmplItem = $( ".cart td" ).tmplItem();
-
- function selectGenre() {
- $( "#genres li" ).removeClass( "selected" );
- $( this ).addClass( "selected" );
-
- pageIndex = 1;
- genre = encodeURI( $(this).text() );
- getMovies( pageIndex );
- }
-
- function sort() {
- var compare = compareName, reverse = false, data = [];
- cart.sortBy = $( "#sort select" ).val();
- switch ( $( "#sort select" ).val() ) {
- case "1":
- reverse = true;
- break;
- case "2":
- compare = compareDate;
- break;
- }
-
- for ( var item in cart.bookings ) {
- data.push( cart.bookings[item] );
- }
- data = data.sort( compare );
-
- bookingTmplItems = $.tmplCmd( "replace", data, bookingTmplItems );
-
- function compareName( a, b ) {
- return a == b ? 0 : (((a.movie.Name > b.movie.Name) !== reverse) ? 1 : -1);
- }
- function compareDate( a, b ) {
- return a.date - b.date;
- }
- }
-
- function getMovies( index ) {
- var query = "http://odata.netflix.com/Catalog/Genres('" + genre + "')/Titles" +
- "?$format=json" +
- "&$inlinecount=allpages" + // get total number of records
- "&$skip=" + (index-1) * pageSize + // skip to first record of page
- "&$top=" + pageSize; // page size
-
- pageIndex = index;
-
- $( "#movieList" )
- .fadeOut( "medium", function () {
- $.ajax({
- dataType: "jsonp",
- url: query,
- jsonp: "$callback",
- success: showMovies
- });
- });
- }
-
- function showMovies( data ) {
- pageCount = Math.ceil( data.d.__count/pageSize ),
- movies = data.d.results;
-
- $( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });
-
- // show movies in template
- $( "#movieList" ).empty();
-
- $( "#movieTmpl" )
- // Render movies using the movieTemplate
- .tmpl( movies )
-
- // Display rendered movies in the movieList container
- .appendTo( "#movieList" )
-
- // Animate
- .find( "div" ).fadeIn( 4000 ).end()
-
- // Add click handler
- .find( ".buyButton" ).click( function() {
- buyTickets( $(this).tmplItem().data );
- });
-
- $( "#movieList" ).fadeIn( "medium" )
- }
-
- function buyTickets( movie ) {
- // Add item to cart
- var booking = cart.bookings[movie.Id];
- if ( booking ) {
- booking.quantity++;
- } else {
- cart.count++;
- cartTmplItem.update();
- booking = { movie: movie, date: new Date(), quantity: 1, movieTheater: "" };
- }
- selectBooking( booking );
- }
-
- function selectBooking( booking ) {
- if ( selectedBooking ) {
- if ( selectedBooking === booking ) {
- updateBooking( bookingItem( selectedBooking ));
- return;
- }
- // Collapse previously selected booking, and switch to non-edit view
- var oldSelected = selectedBooking;
- $( "div", bookingItem( oldSelected ).nodes ).animate( { height: 0 }, 500, function() {
- switchView( oldSelected );
- });
- }
- selectedBooking = booking;
- if ( !booking ) {
- return;
- }
- if ( cart.bookings[booking.movie.Id] ) {
- switchView( booking, true );
- } else {
- cart.bookings[booking.movie.Id] = booking;
-
- var bookingNode = $( "#bookingEditTmpl" )
-
- // Render the booking for the chosen movie using the bookingEditTemplate
- .tmpl( booking, { animate: true } )
-
- // Append the rendered booking to the bookings list
- .appendTo( "#bookingsList" )
-
- // Get the 2nd <tr> of the appended booking
- .last()[0];
-
- // Get the template item for the 2nd <tr>, which is the template item for the "bookingEditTmpl" template
- var newItem = $.tmplItem( bookingNode );
- bookingTmplItems.push( newItem );
-
- // Attach handlers etc. on the rendered template.
- bookingEditRendered( newItem );
- }
- }
-
- function bookingEditRendered( item ) {
- var data = item.data, nodes = item.nodes;
-
- $( nodes[0] ).click( function() {
- selectBooking();
- });
-
- $( ".close", nodes ).click( removeBooking );
-
- $( ".date", nodes ).change( function() {
- data.date = $(this).datepicker( "getDate" );
- updateBooking( item );
- })
- .datepicker({ dateFormat: "DD, d MM, yy" });
-
- $( ".quantity", nodes ).change( function() {
- data.quantity = $(this).val();
- updateBooking( item );
- });
-
- $( ".theater", nodes ).change( function() {
- data.movieTheater = $(this).val();
- updateBooking( item );
- });
-
- if ( item.animate ) {
- $( "div", nodes ).css( "height", 0 ).animate( { height: 116 }, 500 );
- }
- }
-
- function bookingRendered( item ) {
- $( item.nodes ).click( function() {
- selectBooking( item.data );
- });
- $( ".close", item.nodes ).click( removeBooking );
- }
-
- function switchView( booking, edit ) {
- if ( !booking ) {
- return;
- }
- var item = bookingItem( booking ),
- tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).template();
- if ( item.tmpl !== tmpl) {
- item.tmpl = tmpl;
- item.update();
- (edit ? bookingEditRendered : bookingRendered)( item );
- }
- }
-
- function updateBooking( item ) {
- item.animate = false;
- item.update();
- (item.data === selectedBooking ? bookingEditRendered : bookingRendered)( item );
- item.animate = true;
- }
-
- function removeBooking() {
- var booking = $.tmplItem(this).data;
- if ( booking === selectedBooking ) {
- selectedBooking = null;
- }
- delete cart.bookings[booking.movie.Id];
- cart.count--;
- cartTmplItem.update();
- $.tmplCmd( "remove", booking, bookingTmplItems );
- return false;
- }
-
- function removeBookings() {
- $.tmplCmd( "remove", bookingTmplItems );
- bookingTmplItems = [];
- cart.count = 0;
- cart.bookings = {};
- selectedBooking = null;
- cartTmplItem.update();
- }
-
- function formatDate( date ) {
- return date.toLocaleDateString();
- }
-
- function bookingItem( booking ) {
- return $.tmplCmd( "find", booking, bookingTmplItems)[0];
- }
-</script>
-
-</body>
-</html>
348 demos/movies/PagesTmplPlus/movies2.html
View
@@ -1,348 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<!--
-This sample illustrates using templates for a more complete and
-realistic scenario.
-
-It uses the NetFlix OData JSONP services as a source of data.
-
-This version of the movies sample demo uses the
- $( templateSelector ).tmpl( data ).appendTo( targetSelector )
-pattern, and also uses the tmplCmd plugin and the rendered event.
--->
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <title>jQuery + OData + Netflix Catalog API</title>
- <link href="../css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
- <link href="../css/movies.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-<div id="about">
- This is a demo of updates to the jQuery templating feature, proposed by Microsoft.<br/>
- The source can be viewed here: <a href="http://github.com/nje/jquery-tmpl/">NJE Templating Branch on GitHub</a>
-</div>
-<div id="pageBody">
-<h1>Netflix: Book a Movie...</h1>
-
- <ul id="genres">
- <li class="selected">Cartoons</li>
- <li>Drama</li>
- <li>Foreign</li>
- <li>Action Classics</li>
- <li>Horror</li>
- <li>Sci-Fi Cult Classics</li>
- </ul>
-
- <div id="pager"><ul class="pages"><li class="pgEmpty">first</li><li class="pgEmpty">prev</li></ul></div>
-
- <div id="movieList"></div>
- <table id="bookingsList">
- <tbody><tr class="cart"><td class="cart-false" colspan="4">
- <span class="text">0 items in Cart...</span>
- </td></tr></tbody>
- </table>
- <br/>
-</div>
-<script src="http://code.jquery.com/jquery.js"></script>
-<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
-<script src="../../../jquery.tmplPlus.js" type="text/javascript"></script>
-<script src="../components/jquery.pager.js" type="text/javascript"></script>
-<script src="../components/jquery-ui-1.8.1.custom.js" type="text/javascript"></script>
-
-<script id="movieTmpl" type="text/x-jquery-tmpl">
- <div>
- <div><img src="${BoxArt.LargeUrl}" /> </div>
- <strong>${Name}</strong>
- <p>{{html Synopsis}}</p>
- <input type="button" title="Buy tickets for '${Name}'" value="Add to cart..." class="buyButton"/>
- <br/>
- </div>
-</script>
-
-<script id="cartTmpl" type="text/x-jquery-tmpl">
- <td class="cart-${!!count}" colspan="4">
- <span class="text">${count} items in Cart...</span>
- {{if count}}
- <span id="submit">Checkout</span>
- <span id="cancel">Remove All</span>
- {{if count>1}}
- <span id="sort"><span id="sortBtn">Sort</span>:
- <select>
- <option value="0" {{if sortBy==="0"}}selected{{/if}}>Name A-Z</option>
- <option value="1" {{if sortBy==="1"}}selected{{/if}}>Name Z-A</option>
- <option value="2" {{if sortBy==="2"}}selected{{/if}}>Date</option>
- </select>
- </span>
- {{/if}}
- </select>
- {{/if}}
- </td>
-</script>
-
-<script id="bookingTitleTmpl" type="text/x-jquery-tmpl">
- <tr class="bookingTitle${$item.mode}">
- <td>${movie.Name}</td><td>${movieTheater}</td>
- <td>${formatDate(date)}</td>
- <td>
- ${quantity}
- <span class="ui-icon close"></span>
- </td>
- </tr>
-</script>
-
-<script id="bookingEditTmpl" type="text/x-jquery-tmpl">
- {{tmpl($data, {mode: "Edit"}) "#bookingTitleTmpl"}}
- <tr class="bookingEdit">
- <td colspan="4">
- <div class="fields">
- <span>Movie Theater: </span><input class="theater" type="text" value="${movieTheater}" /><br/>
- <span>Date: </span><input class="date" type="text" value="${formatDate(date)}" /><br/>
- <span>Quantity: </span><input class="quantity" type="text" value="${quantity}" />
- </div>
- <div><img src="${movie.BoxArt.LargeUrl}" /></div>
- </td>
- </tr>
-</script>
-
-<script type="text/javascript">
- var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
- cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;
-
- getMovies( pageIndex );
-
- $( "#genres li" ).click( selectGenre );
-
- $( ".cart" )
- .delegate( "select", "change", sort )
- .delegate( "#sortBtn", "click", sort )
- .delegate( "#submit", "click", function() {
- alert( cart.count + " bookings submitted for payment...");
- removeBookings();
- })
- .delegate( "#cancel", "click", function() {
- removeBookings();
- })
- .empty();
- $( "#cartTmpl" )
- .tmpl( cart )
- .appendTo( ".cart", cart );
-
- var cartTmplItem = $( ".cart td" ).tmplItem();
-
- function selectGenre() {
- $( "#genres li" ).removeClass( "selected" );
- $( this ).addClass( "selected" );
-
- pageIndex = 1;
- genre = encodeURI( $(this).text() );
- getMovies( pageIndex );
- }
-
- function sort() {
- var compare = compareName, reverse = false, data = [];
- cart.sortBy = $( "#sort select" ).val();
- switch ( $( "#sort select" ).val() ) {
- case "1":
- reverse = true;
- break;
- case "2":
- compare = compareDate;
- break;
- }
-
- for ( var item in cart.bookings ) {
- data.push( cart.bookings[item] );
- }
- data = data.sort( compare );
-
- bookingTmplItems = $.tmplCmd( "replace", data, bookingTmplItems );
-
- function compareName( a, b ) {
- return a == b ? 0 : (((a.movie.Name > b.movie.Name) !== reverse) ? 1 : -1);
- }
- function compareDate( a, b ) {
- return a.date - b.date;
- }
- }
-
- function getMovies( index ) {
- var query = "http://odata.netflix.com/Catalog/Genres('" + genre + "')/Titles" +
- "?$format=json" +
- "&$inlinecount=allpages" + // get total number of records
- "&$skip=" + (index-1) * pageSize + // skip to first record of page
- "&$top=" + pageSize; // page size
-
- pageIndex = index;
-
- $( "#movieList" )
- .fadeOut( "medium", function () {
- $.ajax({
- dataType: "jsonp",
- url: query,
- jsonp: "$callback",
- success: showMovies
- });
- });
- }
-
- function showMovies( data ) {
- pageCount = Math.ceil( data.d.__count/pageSize ),
- movies = data.d.results;
-
- $( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });
-
- // show movies in template
- $( "#movieList" ).empty();
-
- $( "#movieTmpl" )
- // Render movies using the movieTemplate
- .tmpl( movies, { rendered: onMovieRendered } )
-
- // Display rendered movies in the movieList container
- .appendTo( "#movieList" );
-
- $( "#movieList" ).fadeIn( "medium" )
- }
-
- function buyTickets( movie ) {
- // Add item to cart
- var booking = cart.bookings[movie.Id];
- if ( booking ) {
- booking.quantity++;
- } else {
- cart.count++;
- cartTmplItem.update();
- booking = { movie: movie, date: new Date(), quantity: 1, movieTheater: "" };
- }
- selectBooking( booking );
- }
-
- function selectBooking( booking ) {
- if ( selectedBooking ) {
- if ( selectedBooking === booking ) {
- updateBooking( bookingItem( selectedBooking ));
- return;
- }
- // Collapse previously selected booking, and switch to non-edit view
- var oldSelected = selectedBooking;
- $( "div", bookingItem( oldSelected ).nodes ).animate( { height: 0 }, 500, function() {
- switchView( oldSelected );
- });
- }
- selectedBooking = booking;
- if ( !booking ) {
- return;
- }
- if ( cart.bookings[booking.movie.Id] ) {
- switchView( booking, true );
- } else {
- cart.bookings[booking.movie.Id] = booking;
-
- $( "#bookingEditTmpl" )
-
- // Render the booking for the chosen movie using the bookingEditTemplate
- .tmpl( booking, {
- animate: true,
- rendered: onBookingEditRendered,
- addedTmplItems: bookingTmplItems
- })
-
- // Append the rendered booking to the bookings list
- .appendTo( "#bookingsList" );
- }
- }
-
- function switchView( booking, edit ) {
- if ( !booking ) {
- return;
- }
- var item = bookingItem( booking ),
- rendered = edit ? onBookingEditRendered : onBookingRendered;
- if ( item.rendered !== rendered) {
- item.tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).template();
- item.rendered = rendered;
- item.update();
- }
- }
-
- function onMovieRendered( item ) {
- $( "div", item.nodes ).fadeIn( 4000 );
- $( ".buyButton", item.nodes ).click( function() {
- buyTickets( item.data );
- });
- }
-
- function onBookingRendered( item ) {
- $( item.nodes ).click( function() {
- selectBooking( item.data );
- });
- $( ".close", item.nodes ).click( removeBooking );
- }
-
- function onBookingEditRendered( item ) {
- var data = item.data, nodes = item.nodes;
-
- $( nodes[0] ).click( function() {
- selectBooking();
- });
-
- $( ".close", nodes ).click( removeBooking );
-
- $( ".date", nodes ).change( function() {
- data.date = $(this).datepicker( "getDate" );
- updateBooking( item );
- })
- .datepicker({ dateFormat: "DD, d MM, yy" });
-
- $( ".quantity", nodes ).change( function() {
- data.quantity = $(this).val();
- updateBooking( item );
- });
-
- $( ".theater", nodes ).change( function() {
- data.movieTheater = $(this).val();
- updateBooking( item );
- });
-
- if ( item.animate ) {
- $( "div", nodes ).css( "height", 0 ).animate( { height: 116 }, 500 );
- }
- }
-
- function updateBooking( item ) {
- item.animate = false;
- item.update();
- item.animate = true;
- }
-
- function removeBooking() {
- var booking = $.tmplItem(this).data;
- if ( booking === selectedBooking ) {
- selectedBooking = null;
- }
- delete cart.bookings[booking.movie.Id];
- cart.count--;
- cartTmplItem.update();
- $.tmplCmd( "remove", booking, bookingTmplItems );
- return false;
- }
-
- function removeBookings() {
- $.tmplCmd( "remove", bookingTmplItems );
- bookingTmplItems = [];
- cart.count = 0;
- cart.bookings = {};
- selectedBooking = null;
- cartTmplItem.update();
- }
-
- function formatDate( date ) {
- return date.toLocaleDateString();
- }
-
- function bookingItem( booking ) {
- return $.tmplCmd( "find", booking, bookingTmplItems)[0];
- }
-</script>
-
-</body>
-</html>
337 demos/movies/PagesTmplPlus/movies3.html
View
@@ -1,337 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<!--
-This sample illustrates using templates for a more complete and
-realistic scenario.
-
-It uses the NetFlix OData JSONP services as a source of data.
-
-This version of the movies sample demo uses the
- $( targetSelector ).append( templateSelector, data )
-pattern, and also uses the tmplCmd plugin and the rendered event.
--->
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <title>jQuery + OData + Netflix Catalog API</title>
- <link href="../css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
- <link href="../css/movies.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-<div id="about">
- This is a demo of updates to the jQuery templating feature, proposed by Microsoft.<br/>
- The source can be viewed here: <a href="http://github.com/nje/jquery-tmpl/">NJE Templating Branch on GitHub</a>
-</div>
-<div id="pageBody">
-<h1>Netflix: Book a Movie...</h1>
-
- <ul id="genres">
- <li class="selected">Cartoons</li>
- <li>Drama</li>
- <li>Foreign</li>
- <li>Action Classics</li>
- <li>Horror</li>
- <li>Sci-Fi Cult Classics</li>
- </ul>
-
- <div id="pager"><ul class="pages"><li class="pgEmpty">first</li><li class="pgEmpty">prev</li></ul></div>
-
- <div id="movieList"></div>
- <table id="bookingsList">
- <tbody><tr class="cart"><td class="cart-false" colspan="4">
- <span class="text">0 items in Cart...</span>
- </td></tr></tbody>
- </table>
- <br/>
-</div>
-<script src="http://code.jquery.com/jquery.js"></script>
-<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
-<script src="../../../jquery.tmplPlus.js" type="text/javascript"></script>
-<script src="../components/jquery.pager.js" type="text/javascript"></script>
-<script src="../components/jquery-ui-1.8.1.custom.js" type="text/javascript"></script>
-
-<script id="movieTmpl" type="text/x-jquery-tmpl">
- <div>
- <div><img src="${BoxArt.LargeUrl}" /> </div>
- <strong>${Name}</strong>
- <p>{{html Synopsis}}</p>
- <input type="button" title="Buy tickets for '${Name}'" value="Add to cart..." class="buyButton"/>
- <br/>
- </div>
-</script>
-
-<script id="cartTmpl" type="text/x-jquery-tmpl">
- <td class="cart-${!!count}" colspan="4">
- <span class="text">${count} items in Cart...</span>
- {{if count}}
- <span id="submit">Checkout</span>
- <span id="cancel">Remove All</span>
- {{if count>1}}
- <span id="sort"><span id="sortBtn">Sort</span>:
- <select>
- <option value="0" {{if sortBy==="0"}}selected{{/if}}>Name A-Z</option>
- <option value="1" {{if sortBy==="1"}}selected{{/if}}>Name Z-A</option>
- <option value="2" {{if sortBy==="2"}}selected{{/if}}>Date</option>
- </select>
- </span>
- {{/if}}
- </select>
- {{/if}}
- </td>
-</script>
-
-<script id="bookingTitleTmpl" type="text/x-jquery-tmpl">
- <tr class="bookingTitle${$item.mode}">
- <td>${movie.Name}</td><td>${movieTheater}</td>
- <td>${formatDate(date)}</td>
- <td>
- ${quantity}
- <span class="ui-icon close"></span>
- </td>
- </tr>
-</script>
-
-<script id="bookingEditTmpl" type="text/x-jquery-tmpl">
- {{tmpl($data, {mode: "Edit"}) "#bookingTitleTmpl"}}
- <tr class="bookingEdit">
- <td colspan="4">
- <div class="fields">
- <span>Movie Theater: </span><input class="theater" type="text" value="${movieTheater}" /><br/>
- <span>Date: </span><input class="date" type="text" value="${formatDate(date)}" /><br/>
- <span>Quantity: </span><input class="quantity" type="text" value="${quantity}" />
- </div>
- <div><img src="${movie.BoxArt.LargeUrl}" /></div>
- </td>
- </tr>
-</script>
-
-<script type="text/javascript">
- var genre="Cartoons", pageIndex = 1, pageSize = 3, pageCount = 0,
- cart = { bookings: {}, count: 0, sortBy:0 }, bookingTmplItems = [], selectedBooking;
-
- getMovies( pageIndex );
-
- $( "#genres li" ).click( selectGenre );
-
- $( ".cart" )
- .delegate( "select", "change", sort )
- .delegate( "#sortBtn", "click", sort )
- .delegate( "#submit", "click", function() {
- alert( cart.count + " bookings submitted for payment...");
- removeBookings();
- })
- .delegate( "#cancel", "click", function() {
- removeBookings();
- })
- .empty()
- .append( "#cartTmpl", cart );
-
- var cartTmplItem = $( ".cart td" ).tmplItem();
-
- function selectGenre() {
- $( "#genres li" ).removeClass( "selected" );
- $( this ).addClass( "selected" );
-
- pageIndex = 1;
- genre = encodeURI( $(this).text() );
- getMovies( pageIndex );
- }
-
- function sort() {
- var compare = compareName, reverse = false, data = [];
- cart.sortBy = $( "#sort select" ).val();
- switch ( $( "#sort select" ).val() ) {
- case "1":
- reverse = true;
- break;
- case "2":
- compare = compareDate;
- break;
- }
-
- for ( var item in cart.bookings ) {
- data.push( cart.bookings[item] );
- }
- data = data.sort( compare );
-
- bookingTmplItems = $.tmplCmd( "replace", data, bookingTmplItems );
-
- function compareName( a, b ) {
- return a == b ? 0 : (((a.movie.Name > b.movie.Name) !== reverse) ? 1 : -1);
- }
- function compareDate( a, b ) {
- return a.date - b.date;
- }
- }
-
- function getMovies( index ) {
- var query = "http://odata.netflix.com/Catalog/Genres('" + genre + "')/Titles" +
- "?$format=json" +
- "&$inlinecount=allpages" + // get total number of records
- "&$skip=" + (index-1) * pageSize + // skip to first record of page
- "&$top=" + pageSize; // page size
-
- pageIndex = index;
-
- $( "#movieList" )
- .fadeOut( "medium", function () {
- $.ajax({
- dataType: "jsonp",
- url: query,
- jsonp: "$callback",
- success: showMovies
- });
- });
- }
-
- function showMovies( data ) {
- pageCount = Math.ceil( data.d.__count/pageSize ),
- movies = data.d.results;
-
- $( "#pager" ).pager({ pagenumber: pageIndex, pagecount: pageCount, buttonClickCallback: getMovies });
-
- $( "#movieList" )
- .empty()
-
- // Render movies using the movieTemplate, and display rendered movies in the movieList container
- .append( "#movieTmpl", movies, { rendered: onMovieRendered } )
-
- .fadeIn( "medium" );
- }
-
- function buyTickets( movie ) {
- // Add item to cart
- var booking = cart.bookings[movie.Id];
- if ( booking ) {
- booking.quantity++;
- } else {
- cart.count++;
- cartTmplItem.update();
- booking = { movie: movie, date: new Date(), quantity: 1, movieTheater: "" };
- }
- selectBooking( booking );
- }
-
- function selectBooking( booking ) {
- if ( selectedBooking ) {
- if ( selectedBooking === booking ) {
- updateBooking( bookingItem( selectedBooking ));
- return;
- }
- // Collapse previously selected booking, and switch to non-edit view
- var oldSelected = selectedBooking;
- $( "div", bookingItem( oldSelected ).nodes ).animate( { height: 0 }, 500, function() {
- switchView( oldSelected );
- });
- }
- selectedBooking = booking;
- if ( !booking ) {
- return;
- }
- if ( cart.bookings[booking.movie.Id] ) {
- switchView( booking, true );
- } else {
- cart.bookings[booking.movie.Id] = booking;
-
- // Render the booking for the chosen movie using the bookingEditTemplate, and append the rendered booking to the bookings list
- $( "#bookingsList" ).append( "#bookingEditTmpl", booking, {
- animate: true,
- rendered: onBookingEditRendered,
- addedTmplItems: bookingTmplItems
- });
- }
- }
-
- function switchView( booking, edit ) {
- if ( !booking ) {
- return;
- }
- var item = bookingItem( booking ),
- rendered = edit ? onBookingEditRendered : onBookingRendered;
- if ( item.rendered !== rendered) {
- item.tmpl = $( edit ? "#bookingEditTmpl" : "#bookingTitleTmpl" ).template();
- item.rendered = rendered;
- item.update();
- }
- }
-
- function onMovieRendered( item ) {
- $( "div", item.nodes ).fadeIn( 4000 );
- $( ".buyButton", item.nodes ).click( function() {
- buyTickets( item.data );
- });
- }
-
- function onBookingRendered( item ) {
- $( item.nodes ).click( function() {
- selectBooking( item.data );
- });
- $( ".close", item.nodes ).click( removeBooking );
- }
-
- function onBookingEditRendered( item ) {
- var data = item.data, nodes = item.nodes;
-
- $( nodes[0] ).click( function() {
- selectBooking();
- });
-
- $( ".close", nodes ).click( removeBooking );
-
- $( ".date", nodes ).change( function() {
- data.date = $(this).datepicker( "getDate" );
- updateBooking( item );
- })
- .datepicker({ dateFormat: "DD, d MM, yy" });
-
- $( ".quantity", nodes ).change( function() {
- data.quantity = $(this).val();
- updateBooking( item );
- });
-
- $( ".theater", nodes ).change( function() {
- data.movieTheater = $(this).val();
- updateBooking( item );
- });
-
- if ( item.animate ) {
- $( "div", nodes ).css( "height", 0 ).animate( { height: 116 }, 500 );
- }
- }
-
- function updateBooking( item ) {
- item.animate = false;
- item.update();
- item.animate = true;
- }
-
- function removeBooking() {
- var booking = $.tmplItem(this).data;
- if ( booking === selectedBooking ) {
- selectedBooking = null;
- }
- delete cart.bookings[booking.movie.Id];
- cart.count--;
- cartTmplItem.update();
- $.tmplCmd( "remove", booking, bookingTmplItems );
- return false;
- }
-
- function removeBookings() {
- $.tmplCmd( "remove", bookingTmplItems );
- bookingTmplItems = [];
- cart.count = 0;
- cart.bookings = {};
- selectedBooking = null;
- cartTmplItem.update();
- }
-
- function formatDate( date ) {
- return date.toLocaleDateString();
- }
-
- function bookingItem( booking ) {
- return $.tmplCmd( "find", booking, bookingTmplItems)[0];
- }
-</script>
-
-</body>
-</html>
1,929 demos/movies/components/jquery-ui-1.8.1.custom.js
View
@@ -1,1929 +0,0 @@
-/*!
- * jQuery UI 1.8.1
- *
- * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
- *
- * http://docs.jquery.com/UI
- */
-;jQuery.ui || (function($) {
-
-//Helper functions and ui object
-$.ui = {
- version: "1.8.1",
-
- // $.ui.plugin is deprecated. Use the proxy pattern instead.
- plugin: {
- add: function(module, option, set) {
- var proto = $.ui[module].prototype;
- for(var i in set) {
- proto.plugins[i] = proto.plugins[i] || [];
- proto.plugins[i].push([option, set[i]]);
- }
- },
- call: function(instance, name, args) {
- var set = instance.plugins[name];
- if(!set || !instance.element[0].parentNode) { return; }
-
- for (var i = 0; i < set.length; i++) {
- if (instance.options[set[i][0]]) {
- set[i][1].apply(instance.element, args);
- }
- }
- }
- },
-
- contains: function(a, b) {
- return document.compareDocumentPosition
- ? a.compareDocumentPosition(b) & 16
- : a !== b && a.contains(b);
- },
-
- hasScroll: function(el, a) {
-
- //If overflow is hidden, the element might have extra content, but the user wants to hide it
- if ($(el).css('overflow') == 'hidden') { return false; }
-
- var scroll = (a && a == 'left') ? 'scrollLeft' : 'scrollTop',
- has = false;
-
- if (el[scroll] > 0) { return true; }
-
- // TODO: determine which cases actually cause this to happen
- // if the element doesn't have the scroll set, see if it's possible to
- // set the scroll
- el[scroll] = 1;
- has = (el[scroll] > 0);
- el[scroll] = 0;
- return has;
- },
-
- isOverAxis: function(x, reference, size) {
- //Determines when x coordinate is over "b" element axis
- return (x > reference) && (x < (reference + size));
- },
-
- isOver: function(y, x, top, left, height, width) {
- //Determines when x, y coordinates is over "b" element
- return $.ui.isOverAxis(y, top, height) && $.ui.isOverAxis(x, left, width);
- },
-
- keyCode: {
- ALT: 18,
- BACKSPACE: 8,
- CAPS_LOCK: 20,
- COMMA: 188,
- CONTROL: 17,
- DELETE: 46,
- DOWN: 40,
- END: 35,
- ENTER: 13,
- ESCAPE: 27,
- HOME: 36,
- INSERT: 45,
- LEFT: 37,
- NUMPAD_ADD: 107,
- NUMPAD_DECIMAL: 110,
- NUMPAD_DIVIDE: 111,
- NUMPAD_ENTER: 108,
- NUMPAD_MULTIPLY: 106,
- NUMPAD_SUBTRACT: 109,
- PAGE_DOWN: 34,
- PAGE_UP: 33,
- PERIOD: 190,
- RIGHT: 39,
- SHIFT: 16,
- SPACE: 32,
- TAB: 9,
- UP: 38
- }
-};
-
-//jQuery plugins
-$.fn.extend({
- _focus: $.fn.focus,
- focus: function(delay, fn) {
- return typeof delay === 'number'
- ? this.each(function() {
- var elem = this;
- setTimeout(function() {
- $(elem).focus();
- (fn && fn.call(elem));
- }, delay);
- })
- : this._focus.apply(this, arguments);
- },
-
- enableSelection: function() {
- return this
- .attr('unselectable', 'off')
- .css('MozUserSelect', '');
- },
-
- disableSelection: function() {
- return this
- .attr('unselectable', 'on')
- .css('MozUserSelect', 'none');
- },
-
- scrollParent: function() {
- var scrollParent;
- if(($.browser.msie && (/(static|relative)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) {
- scrollParent = this.parents().filter(function() {
- return (/(relative|absolute|fixed)/).test($.curCSS(this,'position',1)) && (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1));
- }).eq(0);
- } else {
- scrollParent = this.parents().filter(function() {
- return (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1));
- }).eq(0);
- }
-
- return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent;
- },
-
- zIndex: function(zIndex) {
- if (zIndex !== undefined) {
- return this.css('zIndex', zIndex);
- }
-
- if (this.length) {
- var elem = $(this[0]), position, value;
- while (elem.length && elem[0] !== document) {
- // Ignore z-index if position is set to a value where z-index is ignored by the browser
- // This makes behavior of this function consistent across browsers
- // WebKit always returns auto if the element is positioned
- position = elem.css('position');
- if (position == 'absolute' || position == 'relative' || position == 'fixed')
- {
- // IE returns 0 when zIndex is not specified
- // other browsers return a string
- // we ignore the case of nested elements with an explicit value of 0
- // <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
- value = parseInt(elem.css('zIndex'));
- if (!isNaN(value) && value != 0) {
- return value;
- }
- }
- elem = elem.parent();
- }
- }
-
- return 0;
- }
-});
-
-
-//Additional selectors
-$.extend($.expr[':'], {
- data: function(elem, i, match) {
- return !!$.data(elem, match[3]);
- },
-
- focusable: function(element) {
- var nodeName = element.nodeName.toLowerCase(),
- tabIndex = $.attr(element, 'tabindex');
- return (/input|select|textarea|button|object/.test(nodeName)
- ? !element.disabled
- : 'a' == nodeName || 'area' == nodeName
- ? element.href || !isNaN(tabIndex)
- : !isNaN(tabIndex))
- // the element and all of its ancestors must be visible
- // the browser may report that the area is hidden
- && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
- },
-
- tabbable: function(element) {
- var tabIndex = $.attr(element, 'tabindex');
- return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is(':focusable');
- }
-});
-
-})(jQuery);
-/*
- * jQuery UI Datepicker 1.8.1
- *
- * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
- *
- * http://docs.jquery.com/UI/Datepicker
- *
- * Depends:
- * jquery.ui.core.js
- */
-
-(function($) { // hide the namespace
-
-$.extend($.ui, { datepicker: { version: "1.8.1" } });
-
-var PROP_NAME = 'datepicker';
-var dpuuid = new Date().getTime();
-
-/* Date picker manager.
- Use the singleton instance of this class, $.datepicker, to interact with the date picker.
- Settings for (groups of) date pickers are maintained in an instance object,
- allowing multiple different settings on the same page. */
-
-function Datepicker() {
- this.debug = false; // Change this to true to start debugging
- this._curInst = null; // The current instance in use
- this._keyEvent = false; // If the last event was a key event
- this._disabledInputs = []; // List of date picker inputs that have been disabled
- this._datepickerShowing = false; // True if the popup picker is showing , false if not
- this._inDialog = false; // True if showing within a "dialog", false if not
- this._mainDivId = 'ui-datepicker-div'; // The ID of the main datepicker division
- this._inlineClass = 'ui-datepicker-inline'; // The name of the inline marker class
- this._appendClass = 'ui-datepicker-append'; // The name of the append marker class
- this._triggerClass = 'ui-datepicker-trigger'; // The name of the trigger marker class
- this._dialogClass = 'ui-datepicker-dialog'; // The name of the dialog marker class
- this._disableClass = 'ui-datepicker-disabled'; // The name of the disabled covering marker class
- this._unselectableClass = 'ui-datepicker-unselectable'; // The name of the unselectable cell marker class
- this._currentClass = 'ui-datepicker-current-day'; // The name of the current day marker class
- this._dayOverClass = 'ui-datepicker-days-cell-over'; // The name of the day hover marker class
- this.regional = []; // Available regional settings, indexed by language code
- this.regional[''] = { // Default regional settings
- closeText: 'Done', // Display text for close link
- prevText: 'Prev', // Display text for previous month link
- nextText: 'Next', // Display text for next month link
- currentText: 'Today', // Display text for current month link
- monthNames: ['January','February','March','April','May','June',
- 'July','August','September','October','November','December'], // Names of months for drop-down and formatting
- monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting
- dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], // For formatting
- dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], // For formatting
- dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'], // Column headings for days starting at Sunday
- weekHeader: 'Wk', // Column header for week of the year
- dateFormat: 'mm/dd/yy', // See format options on parseDate
- firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
- isRTL: false, // True if right-to-left language, false if left-to-right
- showMonthAfterYear: false, // True if the year select precedes month, false for month then year
- yearSuffix: '' // Additional text to append to the year in the month headers
- };
- this._defaults = { // Global defaults for all the date picker instances
- showOn: 'focus', // 'focus' for popup on focus,
- // 'button' for trigger button, or 'both' for either
- showAnim: 'show', // Name of jQuery animation for popup
- showOptions: {}, // Options for enhanced animations
- defaultDate: null, // Used when field is blank: actual date,
- // +/-number for offset from today, null for today
- appendText: '', // Display text following the input box, e.g. showing the format
- buttonText: '...', // Text for trigger button
- buttonImage: '', // URL for trigger button image
- buttonImageOnly: false, // True if the image appears alone, false if it appears on a button
- hideIfNoPrevNext: false, // True to hide next/previous month links
- // if not applicable, false to just disable them
- navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links
- gotoCurrent: false, // True if today link goes back to current selection instead
- changeMonth: false, // True if month can be selected directly, false if only prev/next
- changeYear: false, // True if year can be selected directly, false if only prev/next
- yearRange: 'c-10:c+10', // Range of years to display in drop-down,
- // either relative to today's year (-nn:+nn), relative to currently displayed year
- // (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n)
- showOtherMonths: false, // True to show dates in other months, false to leave blank
- selectOtherMonths: false, // True to allow selection of dates in other months, false for unselectable
- showWeek: false, // True to show week of the year, false to not show it
- calculateWeek: this.iso8601Week, // How to calculate the week of the year,
- // takes a Date and returns the number of the week for it
- shortYearCutoff: '+10', // Short year values < this are in the current century,
- // > this are in the previous century,
- // string value starting with '+' for current year + value
- minDate: null, // The earliest selectable date, or null for no limit
- maxDate: null, // The latest selectable date, or null for no limit
- duration: '_default', // Duration of display/closure
- beforeShowDay: null, // Function that takes a date and returns an array with
- // [0] = true if selectable, false if not, [1] = custom CSS class name(s) or '',
- // [2] = cell title (optional), e.g. $.datepicker.noWeekends
- beforeShow: null, // Function that takes an input field and
- // returns a set of custom settings for the date picker
- onSelect: null, // Define a callback function when a date is selected
- onChangeMonthYear: null, // Define a callback function when the month or year is changed
- onClose: null, // Define a callback function when the datepicker is closed
- numberOfMonths: 1, // Number of months to show at a time
- showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0)
- stepMonths: 1, // Number of months to step back/forward
- stepBigMonths: 12, // Number of months to step back/forward for the big links
- altField: '', // Selector for an alternate field to store selected dates into
- altFormat: '', // The date format to use for the alternate field
- constrainInput: true, // The input is constrained by the current date format
- showButtonPanel: false, // True to show button panel, false to not show it
- autoSize: false // True to size the input for the date format, false to leave as is
- };
- $.extend(this._defaults, this.regional['']);
- this.dpDiv = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"></div>');
-}
-
-$.extend(Datepicker.prototype, {
- /* Class name added to elements to indicate already configured with a date picker. */
- markerClassName: 'hasDatepicker',
-
- /* Debug logging (if enabled). */
- log: function () {
- if (this.debug)
- console.log.apply('', arguments);
- },
-
- // TODO rename to "widget" when switching to widget factory
- _widgetDatepicker: function() {
- return this.dpDiv;
- },
-
- /* Override the default settings for all instances of the date picker.
- @param settings object - the new settings to use as defaults (anonymous object)
- @return the manager object */
- setDefaults: function(settings) {
- extendRemove(this._defaults, settings || {});
- return this;
- },
-
- /* Attach the date picker to a jQuery selection.
- @param target element - the target input field or division or span
- @param settings object - the new settings to use for this date picker instance (anonymous) */
- _attachDatepicker: function(target, settings) {
- // check for settings on the control itself - in namespace 'date:'
- var inlineSettings = null;
- for (var attrName in this._defaults) {
- var attrValue = target.getAttribute('date:' + attrName);
- if (attrValue) {
- inlineSettings = inlineSettings || {};
- try {
- inlineSettings[attrName] = eval(attrValue);
- } catch (err) {
- inlineSettings[attrName] = attrValue;
- }
- }
- }
- var nodeName = target.nodeName.toLowerCase();
- var inline = (nodeName == 'div' || nodeName == 'span');
- if (!target.id)
- target.id = 'dp' + (++this.uuid);
- var inst = this._newInst($(target), inline);
- inst.settings = $.extend({}, settings || {}, inlineSettings || {});
- if (nodeName == 'input') {
- this._connectDatepicker(target, inst);
- } else if (inline) {
- this._inlineDatepicker(target, inst);
- }
- },
-
- /* Create a new instance object. */
- _newInst: function(target, inline) {
- var id = target[0].id.replace(/([^A-Za-z0-9_])/g, '\\\\$1'); // escape jQuery meta chars
- return {id: id, input: target, // associated target
- selectedDay: 0, selectedMonth: 0, selectedYear: 0, // current selection
- drawMonth: 0, drawYear: 0, // month being drawn
- inline: inline, // is datepicker inline or not
- dpDiv: (!inline ? this.dpDiv : // presentation div
- $('<div class="' + this._inlineClass + ' ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'))};
- },
-
- /* Attach the date picker to an input field. */
- _connectDatepicker: function(target, inst) {
- var input = $(target);
- inst.append = $([]);
- inst.trigger = $([]);
- if (input.hasClass(this.markerClassName))
- return;
- this._attachments(input, inst);
- input.addClass(this.markerClassName).keydown(this._doKeyDown).
- keypress(this._doKeyPress).keyup(this._doKeyUp).
- bind("setData.datepicker", function(event, key, value) {
- inst.settings[key] = value;
- }).bind("getData.datepicker", function(event, key) {
- return this._get(inst, key);
- });
- this._autoSize(inst);
- $.data(target, PROP_NAME, inst);
- },
-
- /* Make attachments based on settings. */
- _attachments: function(input, inst) {
- var appendText = this._get(inst, 'appendText');
- var isRTL = this._get(inst, 'isRTL');
- if (inst.append)
- inst.append.remove();
- if (appendText) {
- inst.append = $('<span class="' + this._appendClass + '">' + appendText + '</span>');
- input[isRTL ? 'before' : 'after'](inst.append);
- }
- input.unbind('focus', this._showDatepicker);
- if (inst.trigger)
- inst.trigger.remove();
- var showOn = this._get(inst, 'showOn');
- if (showOn == 'focus' || showOn == 'both') // pop-up date picker when in the marked field
- input.focus(this._showDatepicker);
- if (showOn == 'button' || showOn == 'both') { // pop-up date picker when button clicked
- var buttonText = this._get(inst, 'buttonText');
- var buttonImage = this._get(inst, 'buttonImage');
- inst.trigger = $(this._get(inst, 'buttonImageOnly') ?
- $('<img/>').addClass(this._triggerClass).
- attr({ src: buttonImage, alt: buttonText, title: buttonText }) :
- $('<button type="button"></button>').addClass(this._triggerClass).
- html(buttonImage == '' ? buttonText : $('<img/>').attr(
- { src:buttonImage, alt:buttonText, title:buttonText })));
- input[isRTL ? 'before' : 'after'](inst.trigger);
- inst.trigger.click(function() {
- if ($.datepicker._datepickerShowing && $.datepicker._lastInput == input[0])
- $.datepicker._hideDatepicker();
- else
- $.datepicker._showDatepicker(input[0]);
- return false;
- });
- }
- },
-
- /* Apply the maximum length for the date format. */
- _autoSize: function(inst) {
- if (this._get(inst, 'autoSize') && !inst.inline) {
- var date = new Date(2009, 12 - 1, 20); // Ensure double digits
- var dateFormat = this._get(inst, 'dateFormat');
- if (dateFormat.match(/[DM]/)) {
- var findMax = function(names) {
- var max = 0;
- var maxI = 0;
- for (var i = 0; i < names.length; i++) {
- if (names[i].length > max) {
- max = names[i].length;
- maxI = i;
- }
- }
- return maxI;
- };
- date.setMonth(findMax(this._get(inst, (dateFormat.match(/MM/) ?
- 'monthNames' : 'monthNamesShort'))));
- date.setDate(findMax(this._get(inst, (dateFormat.match(/DD/) ?
- 'dayNames' : 'dayNamesShort'))) + 20 - date.getDay());
- }
- inst.input.attr('size', this._formatDate(inst, date).length);
- }
- },
-
- /* Attach an inline date picker to a div. */
- _inlineDatepicker: function(target, inst) {
- var divSpan = $(target);
- if (divSpan.hasClass(this.markerClassName))