PageRenderTime 123ms CodeModel.GetById 40ms RepoModel.GetById 1ms app.codeStats 0ms

/static/js/script.js

https://github.com/new-york-is/new.york.is
JavaScript | 226 lines | 205 code | 19 blank | 2 comment | 11 complexity | 1f0e590b949394b6aebbd56432ea160a MD5 | raw file
  1. var Event = Backbone.Model.extend({
  2. defaults:{
  3. name:"Test",
  4. highPriority:false
  5. }
  6. });
  7. var CategoryEvent = Event.extend({
  8. defaults:{
  9. category:"testCategory",
  10. checkins:"1319"
  11. }
  12. });
  13. var VenuePushEvent = Event.extend({
  14. defaults:{
  15. userImage:"https://foursquare.com/img/blank_boy.png",
  16. firstName:"Paul"
  17. }
  18. });
  19. var EventCollection = Backbone.Collection.extend({
  20. model: Event,
  21. initialize:function(){
  22. _.bindAll(this,"removeEvent");
  23. },
  24. add:function(event){
  25. var random = Math.floor(Math.random()*6000);
  26. var self = this;
  27. setTimeout(function(){
  28. Backbone.Collection.prototype.add.call(self, event);
  29. },random);
  30. event.bind("animationFinished", this.removeEvent);
  31. return this;
  32. },
  33. removeEvent:function(event){
  34. this.remove(event);
  35. this.trigger("eventRemoved", event);
  36. }
  37. });
  38. var EventView = Backbone.View.extend({
  39. tagName:"li",
  40. className:"event",
  41. animationDuration:30000,
  42. animationDurationAfterHover:15000,
  43. events:{
  44. "mouseover":"handleMouseover",
  45. "mouseout":"handleMouseout"
  46. },
  47. initialize:function(){
  48. _.bindAll(this,"render","remove");
  49. this.model.bind("change",this.render);
  50. this.model.bind("animationFinished",this.remove);
  51. this.template = _.template($("#event-view").html());
  52. },
  53. render:function(height){
  54. var el = $(this.el),
  55. self = this,
  56. getRandomEasing = function(){
  57. var easings = ["linear","easeOut","easeIn"];
  58. var random = Math.floor(Math.random()*easings.length);
  59. return easings[random];
  60. };
  61. el.html(this.template(this.model.toJSON()));
  62. var dimensions = this.getElDimensions();
  63. var scaleFactor = 1;//height/dimensions.height
  64. var easing = getRandomEasing();
  65. var startingLeft, finalLeft;
  66. //el.children().eq(0).css("transform","scale("+scaleFactor+")");
  67. if(new Date().getTime() % 2 == 0){
  68. startingLeft = $(window).width()+200;
  69. finalLeft = -1*dimensions.width*scaleFactor-200;
  70. }else{
  71. startingLeft = -1*dimensions.width*scaleFactor-200;
  72. finalLeft = $(window).width()+200;
  73. }
  74. this.startingLeft = startingLeft;
  75. this.finalLeft = finalLeft;
  76. el.css("left",startingLeft);
  77. el.animate({"left":finalLeft},this.animationDuration,easing, function(){
  78. self.model.trigger("animationFinished", self.model);
  79. });
  80. return this;
  81. },
  82. handleMouseover:function(){
  83. if($(this.el).is(':animated') ){
  84. $(this.el).stop();
  85. }
  86. },
  87. handleMouseout:function(){
  88. var self = this;
  89. if(!$(this.el).is(':animated')){
  90. $(this.el).animate({"left":this.finalLeft},this.animationDurationAfterHover,"linear",function(){
  91. self.model.trigger("animationFinished", self.model);
  92. });
  93. }
  94. },
  95. getElDimensions:function(){
  96. var newEl = this.el.cloneNode(true);
  97. newEl.style.visibility="hidden";
  98. document.body.appendChild(newEl);
  99. var width = $(newEl).children(0).width();
  100. var height = $(newEl).children(0).height();
  101. newEl.parentNode.removeChild(newEl);
  102. return {width:width,height:height};
  103. },
  104. remove:function(){
  105. this.el.parentNode.removeChild(this.el);
  106. }
  107. });
  108. var CategoryEventView = EventView.extend({
  109. animationDuration:12000,
  110. animationDurationAfterHover:7000,
  111. initialize:function(){
  112. EventView.prototype.initialize.apply(this,arguments);
  113. this.template = _.template($("#category-event-view").html());
  114. }
  115. });
  116. var VenuePushEventView = EventView.extend({
  117. animationDuration:12000,
  118. animationDurationAfterHover:7000,
  119. initialize:function(){
  120. EventView.prototype.initialize.apply(this,arguments);
  121. this.template = _.template($("#venue-push-event-view").html());
  122. }
  123. });
  124. var RowView = Backbone.View.extend({
  125. tagName:"ul",
  126. initialize:function(){
  127. _.bindAll(this,"render","renderEvent",
  128. "removedEvent","getNextAvailableSlot",
  129. "scheduleToSlot");
  130. this.collection.bind("add",this.renderEvent);
  131. this.takenSlots = [false,false,false,false,false];
  132. },
  133. render:function(){
  134. this.collection.each(this.renderEvent);
  135. return this;
  136. },
  137. getNextAvailableSlot:function(){
  138. return _.indexOf(this.takenSlots,false);
  139. },
  140. scheduleToSlot:function(event){
  141. var slot = this.getNextAvailableSlot();
  142. if(slot != -1){
  143. this.takenSlots[slot] = true;
  144. event.slot = slot;
  145. return slot;
  146. }
  147. else{
  148. return false;
  149. }
  150. },
  151. renderEvent:function(event){
  152. var slot = this.scheduleToSlot(event),
  153. viewClass,
  154. height,
  155. eventViewEl,
  156. eventView;
  157. if(slot === false){
  158. if(event.get("highPriority")){
  159. setTimeout(_.bind(this.renderEvent,this,event),1);
  160. }
  161. else{
  162. setTimeout(_.bind(this.renderEvent,this,event),10000);
  163. }
  164. return;
  165. }
  166. if(event instanceof CategoryEvent){
  167. viewClass = CategoryEventView;
  168. }else if(event instanceof VenuePushEvent){
  169. console.log("venuepush!");
  170. viewClass = VenuePushEventView;
  171. }else{
  172. viewClass = EventView;
  173. }
  174. eventView = new viewClass({
  175. model:event
  176. });
  177. height = $(window).height()/5;
  178. eventViewEl = eventView.render(height).el
  179. $(eventViewEl).css("top",height*slot);
  180. $(this.el).append(eventViewEl);
  181. event.bind("animationFinished", this.removedEvent);
  182. },
  183. removedEvent:function(event){
  184. this.takenSlots[event.slot] = false;
  185. }
  186. });
  187. var AppRouter = Backbone.Router.extend({
  188. routes: {
  189. "*actions": "defaultRoute"
  190. },
  191. defaultRoute: function( actions ){
  192. window.events = window.collection = new EventCollection();
  193. for(var i =0;i<20;i++){
  194. event = new Event({name:"hello"});
  195. event2 = new Event({name:"echo"});
  196. event3 = new Event({name:"and"});
  197. event4 = new Event({name:"friend"});
  198. event5 = new Event({name:"world"});
  199. event6 = new Event({name:"aspartame"});
  200. // collection.add(event).add(event2).add(event3).add(event4).add(event5).add(event6)
  201. }
  202. view = new RowView({collection:collection});
  203. $("#container").append(view.render().el);
  204. }
  205. });
  206. var app_router = new AppRouter;
  207. Backbone.history.start();