/index_08.html

https://bitbucket.org/makbulkhan/drupal_mobile_backend · HTML · 98 lines · 83 code · 12 blank · 3 comment · 0 complexity · 8a90ccf118616e5a1c5bc42b15ece0e3 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 		<meta charset="UTF-8">
    5. 

  5. 		<title>Bird Sightings</title>
    6. 

  6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 

  7. 		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    8. 

  8. 		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    9. 

  9. 		<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    10. 

  10. 		<script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
    11. 

  11. 		
    12. 

  12. 		<!-- bird list template -->
    13. 

  13. 		<script type="text/template" id="bird-li-tpl">
    14. 

  14.     	{{#list}}
    15. 

  15. 				<li><a href="#bird?nid={{nid}}" data-ajax="false"><h4>{{title}}</h4></a></li>
    16. 

  16. 			{{/list}}
    17. 

  17. 		</script>
    18. 

  18. 		
    19. 

  19. 		<!-- bird detail page template -->
    20. 

  20. 		<script type="text/template" id="bird-detail-tpl">
    21. 

  21. 				<h2>{{title}}</h2>
    22. 

  22. 				<p id="bird-image"></p>
    23. 

  23. 				<p>{{#body}}{{value}}{{/body}}</p>
    24. 

  24. 		</script>
    25. 

  25. 		
    26. 

  26. 		<!-- image template -->
    27. 

  27. 		<script type="text/template" id="image-tpl">
    28. 

  28. 				<img style="max-width: 100%;" src="{{url}}"/>
    29. 

  29. 		</script>
    30. 

  30. 		
    31. 

  31. 	</head>
    32. 

  32. <body>
    33. 

  33. 

  34. 	<div data-role="page" id="birds">
    35. 

  35. 		<div data-role="header">
    36. 

  36. 			<h1>Birds</h1>
    37. 

  37. 		</div><!-- /header -->
    38. 

  38. 		<div data-role="content">
    39. 

  39. 			<ul id="bird-list" data-role="listview"></ul>
    40. 

  40. 		</div><!-- /content -->
    41. 

  41. 	</div><!-- /page -->
    42. 

  42. 	
    43. 

  43. 	<div data-role="page" id="bird">
    44. 

  44. 		<div data-role="header">
    45. 

  45. 			<a href="#" data-role="button" data-rel="back" data-icon="arrow-l">Back</a>
    46. 

  46. 			<h1>Bird details</h1>
    47. 

  47. 		</div><!-- /header -->
    48. 

  48. 		<div data-role="content">
    49. 

  49. 			<p>Content goes here...</p>
    50. 

  50. 		</div><!-- /content -->
    51. 

  51. 	</div><!-- /page -->
    52. 

  52. 

  53. 	<script>
    54. 

  54. 		var bird_server = 'birds.mamp.chandima.info';
    55. 

  55. 		var birdListTpl = Hogan.compile($("#bird-li-tpl").html());
    56. 

  56. 		var birdDetailTpl = Hogan.compile($("#bird-detail-tpl").html());
    57. 

  57. 		var imageTpl = Hogan.compile($("#image-tpl").html());
    58. 

  58. 		
    59. 

  59. 		// bird list page 
    60. 

  60. 		$('#birds').on('pageshow', function(event, ui){
    61. 

  61. 			$.getJSON('http://'+bird_server+'/node.json?type=bird', function(data) {
    62. 

  62. 				var html = birdListTpl.render(data);
    63. 

  63. 				$('#bird-list').html(html);
    64. 

  64. 				$('#bird-list').listview('refresh');
    65. 

  65. 			});
    66. 

  66. 		});
    67. 

  67. 		
    68. 

  68. 		// bird detail page before show
    69. 

  69. 		$('#bird').on('pagebeforeshow', function(event, ui){
    70. 

  70. 			$("#bird div[data-role='content']").html('<p>Loading...</p>');
    71. 

  71. 		});
    72. 

  72. 		
    73. 

  73. 		// bird detail page show
    74. 

  74. 		$('#bird').on('pageshow', function(event, ui){			
    75. 

  75. 			if (nid = $.urlParam('nid')) {
    76. 

  76. 				$.getJSON('http://'+bird_server+'/node/'+nid+'.json', function(node_data) {
    77. 

  77. 					var html = birdDetailTpl.render(node_data);
    78. 

  78. 					$("#bird div[data-role='content']").html(html).trigger('create');
    79. 

  79. 					if (node_data.field_image) {
    80. 

  80. 						$.getJSON('http://'+bird_server+'/file/'+node_data.field_image.file.id+'.json', function(file_data) {
    81. 

  81. 							html = imageTpl.render(file_data);
    82. 

  82. 							$("#bird #bird-image").html(html);
    83. 

  83. 						});
    84. 

  84. 					}
    85. 

  85. 				});
    86. 

  86. 			}
    87. 

  87. 		});
    88. 

  88. 		
    89. 

  89. 		// return query param
    90. 

  90. 		// @see http://stackoverflow.com/questions/11388700/passing-data-between-pages-in-jquery-mobile
    91. 

  91. 		$.urlParam = function(name){
    92. 

  92. 		    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    93. 

  93. 		    return (results) ? results[1] : null;
    94. 

  94. 		}
    95. 

  95. 	</script>
    96. 

  96. 	
    97. 

  97. </body>
    98. 

  98. </html>
    99.