Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

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