main-swipe.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. String.prototype.trim = function() {
  2. return this.replace(/^\s+|\s+$/g,"");
  3. }
  4. String.prototype.trimLeft = function() {
  5. return this.replace(/^\s+/,"");
  6. }
  7. String.prototype.trimRight = function() {
  8. return this.replace(/\s+$/,"");
  9. }
  10. //Demos file list (in order of presentation)
  11. //THe page name is formed from the file name.
  12. var fileList = [
  13. 'Basic_swipe.html',
  14. 'Single_swipe.html',
  15. 'Any_finger_swipe.html',
  16. 'Finger_swipe.html',
  17. 'Swipe_status.html',
  18. 'Pinch.html',
  19. 'Pinch_status.html',
  20. 'Pinch_and_Swipe.html',
  21. 'Trigger_handlers.html',
  22. 'Stop_propagation.html',
  23. 'Handlers_and_events.html',
  24. 'Tap_vs_swipe.html',
  25. 'Hold.html',
  26. 'Excluded_children.html',
  27. 'Page_zoom.html',
  28. 'Thresholds.html',
  29. 'Enable_and_destroy.html',
  30. 'Page_scrolling.html',
  31. 'Options.html',
  32. 'Image_gallery_example.html'
  33. ];
  34. /**
  35. * Builds the demo page
  36. */
  37. function init() {
  38. buildTitle();
  39. buildCodeExample();
  40. buildNavigation();
  41. }
  42. /**
  43. * Creates the navigation components
  44. */
  45. function buildNavigation() {
  46. $('.navigation').each(function( index ) {
  47. $(this).html( getNavigation() );
  48. });
  49. $('.navigation_menu').each(function( index ) {
  50. $(this).html( getNavigationMenu() );
  51. })
  52. $('.navigation_list').each(function( index ) {
  53. $(this).html( getNavigationList() );
  54. })
  55. $('#menu').change( function() {
  56. location.href=$(this).val();
  57. });
  58. $('#menu li').click( function() {
  59. location.href=$(this).val();
  60. });
  61. $('.example_btn').click( function() {
  62. $(document).scrollTop( $("#test").offset().top );
  63. });
  64. $('.events code').click( function() {
  65. location.href = '../docs/%24.fn.swipe.html#event:' + $(this).text();
  66. });
  67. $('.properties code').click( function() {
  68. location.href = '../docs/%24.fn.swipe.defaults.html#' + $(this).text();
  69. });
  70. $('.methods code').click( function() {
  71. location.href = '../docs/%24.fn.swipe.html#' + $(this).text();
  72. });
  73. }
  74. /**
  75. * Builds the title element
  76. */
  77. function buildTitle() {
  78. $('.title').each(function( index ) {
  79. $(this).html( getTitle() );
  80. })
  81. }
  82. /**
  83. * Copies the <script> tag contents, and populates the demo pretty print div to display the
  84. * code example.
  85. */
  86. function buildCodeExample() {
  87. $('.prettyprint').each(function( index ) {
  88. //$(this).text( $("#"+$(this).attr('data-src')).html() );
  89. var src = $("#"+$(this).attr('data-src')).html();
  90. if(src) {
  91. var lines = src.split("\n");
  92. var trimedLines=[];
  93. var trimIndex=null;
  94. for (var i=0; i<lines.length; i++) {
  95. var line = lines[i];
  96. if(trimIndex===null) {
  97. var trimmed = line.trimLeft();
  98. if(line.length>0) {
  99. trimIndex = line.length - trimmed.length;
  100. }
  101. }
  102. if(line.length>0) {
  103. //Tabs to spaces
  104. line = line.replace(/\t/g, ' '); //not using $nbsp; as we want to display HTML tags, so we set the text value, not html
  105. trimedLines.push( line.substr(trimIndex) );
  106. }
  107. };
  108. var html = trimedLines.join("\n");
  109. $(this).text( html );
  110. }
  111. });
  112. //prettyPrint();
  113. }
  114. /**
  115. * Returns the current file being viewed.
  116. */
  117. function getCurrentFile() {
  118. var url = window.location.pathname;
  119. var file = url.substring(url.lastIndexOf('/')+1);
  120. return file;
  121. }
  122. /**
  123. * Returns the current page name
  124. */
  125. function getPageName( file ) {
  126. if(!file)
  127. file=getCurrentFile();
  128. var fileTokens = file.split("_");
  129. var fileName = fileTokens.join(" ");
  130. var nameTokens = fileName.split(".");
  131. nameTokens.pop();
  132. var name = nameTokens.join(" ");
  133. return name;
  134. }
  135. /**
  136. * Writes out the page title template
  137. */
  138. function getTitle() {
  139. var html = "<h2><a href=\"http://labs.rampinteractive.co.uk/touchSwipe/\">TouchSwipe</a> Demo</h2>";
  140. html += "<h3>to be viewed on touch based devices</h3>";
  141. html += "<h1>"+getPageName()+"<span class='navigation_menu pull-right'></span></h1>";
  142. return html;
  143. }
  144. /**
  145. * Returns HTML mark up for the pagination buttons
  146. */
  147. function getNavigation() {
  148. var index = fileList.indexOf( getCurrentFile() );
  149. var html ="<div class='pagination'>";
  150. if(index>0) {
  151. html += "<a class='pull-left btn' href='"+fileList[index-1]+"'><< "+getPageName(fileList[index-1])+"</a>";
  152. }
  153. if(index<fileList.length-1) {
  154. html += "<a class='pull-right btn' href='"+fileList[index+1]+"'>"+getPageName(fileList[index+1])+" >></a>";
  155. }
  156. html += "</div><div class='clear'></div>"
  157. return html;
  158. }
  159. /**
  160. * Returns HTML mark up for the drop down menu
  161. */
  162. function getNavigationMenu() {
  163. var html = "<select id='menu' class='pull_right'>";
  164. for(var i=0; i<fileList.length; i++) {
  165. var selected="";
  166. if(fileList[i] == getCurrentFile()) {
  167. selected=' selected ';
  168. }
  169. html+="<option value='"+fileList[i]+"'"+selected+">"+getPageName(fileList[i])+"</option>";
  170. }
  171. html += "</select>";
  172. return html;
  173. }
  174. /**
  175. * Returns HTML mark up for the list menu
  176. */
  177. function getNavigationList() {
  178. var html = "<ul>";
  179. for(var i=0; i<fileList.length; i++) {
  180. html+="<li><a href='"+fileList[i]+"'>"+getPageName(fileList[i])+"</a></li>";
  181. }
  182. html += "</ul>";
  183. return html;
  184. }
  185. $(function() {
  186. init();
  187. });