PageRenderTime 51ms CodeModel.GetById 20ms RepoModel.GetById 1ms app.codeStats 0ms

/vendor/assets/javascripts/gallery.js

https://github.com/ganeshkumar/backbone-rails-gallery
JavaScript | 229 lines | 122 code | 48 blank | 59 comment | 7 complexity | 9228ab55539fe0c3f446611cbd277d6b MD5 | raw file
  1. $(function(){
  2. var cache = new CacheProvider;
  3. /**
  4. *Here we create the model 'Photo' ; used to define individual image items. 'subalbum' returns a
  5. *reference to the current subalbum being viewed via the gallery for use when accessing a Photo item
  6. *through a hash URL We also define a new CacheProvider for use in our Controller later.
  7. * @type Backbone.Model
  8. */
  9. var Photo = Backbone.Model.extend({
  10. subalbum: function() { return 'c' + gallery._currentsub; }
  11. });
  12. /**
  13. * PhotoCollection: A collection of Photo items used in index, subalbum and photo views
  14. * @type Backbone.Collection
  15. */
  16. var PhotoCollection = Backbone.Collection.extend({
  17. model: Photo,
  18. comparator: function(item) {
  19. return item.get('pid');
  20. }
  21. });
  22. function removeFallbacks(){
  23. var query = $('.jstest,.gallery');
  24. if(query.length){
  25. query.remove();
  26. }
  27. }
  28. /**
  29. * IndexView: The default view seen when opening up the application for the first time. This
  30. * contains the first level of images in the JSON store (the level-one albums). Prior to rendering
  31. * our jQuery templates here we remove any messages or elements displayed in the version where
  32. * JavaScript is disabled.
  33. * @type Backbone.View
  34. */
  35. var IndexView = Backbone.View.extend({
  36. el: $('#main'),
  37. indexTemplate: $("#indexTmpl").template(),
  38. render: function() {
  39. removeFallbacks();
  40. var sg = this;
  41. this.el.fadeOut('fast', function() {
  42. sg.el.empty();
  43. $.tmpl(sg.indexTemplate, sg.model.toArray()).appendTo(sg.el);
  44. sg.el.fadeIn('fast');
  45. });
  46. return this;
  47. }
  48. });
  49. /**
  50. * SubalbumView: The view reached when clicking on a level-one album or browsing to a subalbum bookmark.
  51. * This contains the images found in the 'subalbum' section of an album entry. Clicking on any of the
  52. * images shown in a subalbum takes you to the PhotoView of that specific image
  53. * @type Backbone.View
  54. */
  55. var SubalbumView = Backbone.View.extend({
  56. el: $('#main'),
  57. indexTemplate: $("#subindexTmpl").template(),
  58. initialize: function(options){
  59. },
  60. render: function() {
  61. var sg = this;
  62. removeFallbacks();
  63. this.el.fadeOut('fast', function() {
  64. sg.el.empty();
  65. $.tmpl(sg.indexTemplate, sg.model.toArray()).appendTo(sg.el);
  66. sg.el.fadeIn('fast');
  67. });
  68. return this;
  69. }
  70. });
  71. /**
  72. * PhotoView: The single-photo view for a single image on the third-level of the application.
  73. * This is reached either by clicking on an image at the second/subalbum level or
  74. * browsing to a bookmarked photo in a subalbum.
  75. * @type Backbone.View
  76. */
  77. var PhotoView = Backbone.View.extend({
  78. el: $('#main'),
  79. itemTemplate: $("#itemTmpl").template(),
  80. initialize: function(options) {
  81. this.album = options.album;
  82. },
  83. render: function() {
  84. var sg = this;
  85. removeFallbacks();
  86. this.el.fadeOut('fast', function() {
  87. sg.el.empty();
  88. $.tmpl(sg.itemTemplate, sg.model).appendTo(sg.el);
  89. sg.el.fadeIn('fast');
  90. });
  91. return this;
  92. }
  93. });
  94. /**
  95. * Gallery: The controller that defines our main application 'gallery'. Here we handle how
  96. * routes should be interpreted, the basic initialization of the application with data through
  97. * an $.ajax call to fetch our JSON store and the creation of collections and views based on the
  98. * models defined previously.
  99. * @type Backbone.Controller
  100. */
  101. var Gallery = Backbone.Controller.extend({
  102. _index: null,
  103. _photos: null,
  104. _album :null,
  105. _subalbums:null,
  106. _subphotos:null,
  107. _data:null,
  108. _photosview:null,
  109. _currentsub:null,
  110. routes: {
  111. "": "index",
  112. "subalbum/:id": "hashsub",
  113. "subalbum/:id/" : "directphoto",
  114. "subalbum/:id/:num" : "hashphoto"
  115. },
  116. initialize: function(options) {
  117. var ws = this;
  118. if (this._index === null){
  119. $.ajax({
  120. url: 'collections.json',
  121. dataType: 'json',
  122. data: {},
  123. success: function(data) {
  124. ws._data = data;
  125. ws._photos = new PhotoCollection(data);
  126. ws._index = new IndexView({model: ws._photos});
  127. Backbone.history.loadUrl();
  128. }
  129. });
  130. return this;
  131. }
  132. return this;
  133. },
  134. /**
  135. * Handle rendering the initial view for the application
  136. * @type function
  137. */
  138. index: function() {
  139. this._index.render();
  140. },
  141. /**
  142. * Gallery -> hashsub: Handle URL routing for subalbums. As subalbums aren't traversed
  143. * in the default initialization of the app, here we create a new PhotoCollection for a
  144. * particular subalbum based on indices passed through the UI. We then create a new SubalbumView
  145. * instance, render the subalbums and set the current subphotos array to contain our subalbum Photo
  146. * items. All of this is cached using the CacheProvider we defined earlier
  147. * @type function
  148. * @param {String} id An ID specific to a particular subalbum based on CIDs
  149. */
  150. hashsub:function(id){
  151. var properindex = id.replace('c','');
  152. this._currentsub = properindex;
  153. this._subphotos = cache.get('pc' + properindex) || cache.set('pc' + properindex, new PhotoCollection(this._data[properindex].subalbum));
  154. this._subalbums = cache.get('sv' + properindex) || cache.set('sv' + properindex, new SubalbumView({model: this._subphotos}));
  155. this._subalbums.render();
  156. },
  157. directphoto: function(id){
  158. },
  159. /**
  160. * Gallery -> hashphoto: Handle routing for access to specific images within subalbums. This method
  161. * checks to see if an existing subphotos object exists (ie. if we've already visited the
  162. * subalbum before). If it doesn't, we generate a new PhotoCollection and finally create
  163. * a new PhotoView to display the image that was being queried for. As per hashsub, variable/data
  164. * caching is employed here too
  165. * @type function
  166. * @param {String} num An ID specific to a particular image being accessed
  167. * @param {Integer} id An ID specific to a particular subalbum being accessed
  168. */
  169. hashphoto: function(num, id){
  170. this._currentsub = num;
  171. num = num.replace('c','');
  172. if(this._subphotos == undefined){
  173. this._subphotos = cache.get('pc' + num) || cache.set('pc' + num, new PhotoCollection(this._data[num].subalbum));
  174. }
  175. this._subphotos.at(id)._view = new PhotoView({model: this._subphotos.at(id)});
  176. this._subphotos.at(id)._view.render();
  177. }
  178. });
  179. gallery = new Gallery();
  180. Backbone.history.start();
  181. });