PageRenderTime 75ms CodeModel.GetById 33ms RepoModel.GetById 0ms app.codeStats 0ms

/app/client/topic.coffee

https://github.com/a0n/socketfun
CoffeeScript | 292 lines | 214 code | 37 blank | 41 comment | 35 complexity | 3b8a85c32628a194a6f02f4449cea0ae MD5 | raw file
  1. ### QUICK CHAT DEMO ####
  2. # Delete this file once you've seen how the demo works
  3. exports.load = ->
  4. $(->
  5. window.Topic = Backbone.Model.extend({
  6. # Default attributes for the todo.
  7. defaults: {
  8. },
  9. # Ensure that each todo created has `content`.
  10. initialize: ->
  11. self = this
  12. self.medias = new MediaList(null, {topic_id: self.id})
  13. ,
  14. # Remove this Topic from *localStorage* and delete its view.
  15. clear: ->
  16. this.destroy()
  17. $("#topic-" + this.id).remove()
  18. this.view.remove()
  19. if this.info_view
  20. this.info_view.remove()
  21. })
  22. window.TopicList = Backbone.Collection.extend({
  23. # Reference to this collection's model.
  24. model: Topic,
  25. # Save all of the todo items under the `"todos"` namespace.
  26. localStorage: new Store("topic")
  27. # Filter down the list of all todo items that are finished.
  28. })
  29. # Create our global collection of **Todos**.
  30. window.Topics = new TopicList
  31. # Todo Item View
  32. # --------------
  33. # The DOM element for a todo item...
  34. window.TopicRowView = Backbone.View.extend({
  35. #... is a list tag.
  36. tagName: "li",
  37. # Cache the template function for a single item.
  38. show_template: $( "#topic_row" ),
  39. edit_template: $( "#topic_edit_row"),
  40. # The DOM events specific to an item.
  41. events: {
  42. "click": "open"
  43. "dblclick": "edit"
  44. "keypress input[name='edit_topic']": "editOnEnter"
  45. },
  46. # The TodoView listens for changes to its model, re-rendering. Since there's
  47. # a one-to-one correspondence between a **Todo** and a **TodoView** in this
  48. # app, we set a direct reference on the model for convenience.
  49. initialize: ->
  50. _.bindAll(this, 'render', 'open')
  51. this.model.bind('change', this.render)
  52. this.model.view = this
  53. ,
  54. open: ->
  55. if !$(this.el).hasClass("active")
  56. topic_view = new TopicInfoView({model: this.model})
  57. $("#topic").html(topic_view.render().el)
  58. this.activate()
  59. AppRouter.navigate("topics/" + this.model.id);
  60. ,
  61. edit: ->
  62. $(this.el).html(this.edit_template.tmpl(this.model.toJSON()))
  63. editOnEnter: (e) ->
  64. if e.keyCode != 13
  65. return
  66. self = this
  67. value = $(e.target).val()
  68. self.model.set({name: value},{silent: true})
  69. self.model.save()
  70. activate: ->
  71. $(".active").removeClass("active")
  72. $(this.el).addClass("active")
  73. # Re-render the contents of the todo item.
  74. render: ->
  75. console.log("rerender row")
  76. position = this.model.get("position")
  77. if position
  78. if position.pivot == "BEFORE"
  79. $("#topic-list #"+position.pivot_topic_id).before($(this.el))
  80. else if position.pivot == "AFTER"
  81. console.log("ASFTER")
  82. $($("#topic-list #"+position.pivot_topic_id)).after(this.el)
  83. $(this.el).html(this.show_template.tmpl(this.model.toJSON()))
  84. $(this.el).attr("id", this.model.id)
  85. return this
  86. })
  87. window.TopicInfoView = Backbone.View.extend({
  88. #... is a list tag.
  89. tagName: "div",
  90. className: "topic-info",
  91. # Cache the template function for a single item.
  92. template: $( "#topic_info_view" ),
  93. # The DOM events specific to an item.
  94. events: {
  95. "click #delete_topic": "deleteTopic",
  96. "click .add_notice": "addNotice"
  97. },
  98. # The TodoView listens for changes to its model, re-rendering. Since there's
  99. # a one-to-one correspondence between a **Todo** and a **TodoView** in this
  100. # app, we set a direct reference on the model for convenience.
  101. initialize: ->
  102. _.bindAll(this, 'addOne', 'addAll', 'render')
  103. this.model.info_view = this
  104. this.model.medias.bind('add', this.addOne)
  105. this.model.medias.bind('reset', this.addAll)
  106. this.model.medias.bind('all', this.render)
  107. this.model.bind('change', this.render)
  108. $("#medias").html("")
  109. this.model.medias.fetch()
  110. ,
  111. addNotice: (e) ->
  112. alert "add notice"
  113. addOne: (media) ->
  114. view = new MediaRowView({model: media})
  115. $("#medias").prepend(view.render().el)
  116. ,
  117. # Add all items in the **Todos** collection at once.
  118. addAll: ->
  119. this.model.medias.each(this.addOne)
  120. ,
  121. deleteTopic: ->
  122. this.model.clear()
  123. $("#content").prepend("<div id='main'></div>")
  124. # Re-render the contents of the todo item.
  125. render: ->
  126. $(this.el).html(this.template.tmpl(this.model.toJSON()))
  127. return this
  128. })
  129. window.SidebarView = Backbone.View.extend({
  130. # Instead of generating a new element, bind to the existing skeleton of
  131. # the App already present in the HTML.
  132. el: $("#content"),
  133. template: $("#sidebar_view"),
  134. # Delegated events for creating new items, and clearing completed ones.
  135. events: {
  136. "keypress .new_topic": "createOnEnter"
  137. "click .add_topic" : "addNewTopic"
  138. },
  139. # At initialization we bind to the relevant events on the `Todos`
  140. # collection, when items are added or changed. Kick things off by
  141. # loading any preexisting todos that might be saved in *localStorage*.
  142. initialize: ->
  143. _.bindAll(this, 'addOne', 'addAll', 'render')
  144. this.user_id = this.options.user_id
  145. this.active_topic_id = this.options.active_topic_id
  146. self = this
  147. Topics.bind('add', this.addOne)
  148. Topics.bind('reset', this.addAll)
  149. Topics.bind('all', this.render)
  150. Topics.fetch({success: (status) ->
  151. if self.active_topic_id
  152. topic = Topics.get(self.active_topic_id)
  153. if topic
  154. topic_view = new TopicInfoView({model: topic})
  155. $("#topic").html(topic_view.render().el)
  156. $("#topic-list").sortable({
  157. containment: 'parent',
  158. items: 'li',
  159. update: (e,ui) ->
  160. console.log $(ui.item).next().attr("id")
  161. if $(ui.item).attr("id")
  162. topic = Topics.get($(ui.item).attr("id"))
  163. console.log("asdasd")
  164. console.log $(ui.item).next()
  165. if ($(ui.item).next().length > 0)
  166. position = {next_topic_id: $(ui.item).next().attr("id")}
  167. else if ($(ui.item).prev().length > 0)
  168. position = {prev_topic_id: $(ui.item).prev().attr("id")}
  169. if position
  170. topic.set(position, {silent: true})
  171. topic.save()
  172. })
  173. $("#topic-list").disableSelection()
  174. })
  175. ,
  176. # Re-rendering the App just means refreshing the statistics -- the rest
  177. # of the app doesn't change.
  178. render: ->
  179. ,
  180. addNewTopic: ->
  181. if $(".new_topic").length == 0
  182. $("#topic-list").prepend($("#new_topic_row").tmpl())
  183. ,
  184. createOnEnter: (e) ->
  185. if e.keyCode != 13
  186. return
  187. self = this
  188. console.log "asjdjkas"
  189. console.log "danger"
  190. console.log this.newAttributes()
  191. x = Topics.create(this.newAttributes(), {
  192. success: (response) ->
  193. console.log "kill"
  194. console.log response
  195. })
  196. $(e.target).parent().remove()
  197. ,
  198. # Generate the attributes for a new Todo item.
  199. newAttributes: ->
  200. attr = []
  201. attr["name"] = $("#new-topic").val()
  202. if $(".new_topic").next().length > 0
  203. attr["next_topic_id"] = $(".new_topic").next().attr("id")
  204. else if $(".new_topic").prev().length > 0
  205. attr["prev_topic_id"] = $(".new_topic").prev().attr("id")
  206. return attr
  207. ,
  208. # Add a single todo item to the list by creating a view for it, and
  209. # appending its element to the `<ul>`.
  210. addOne: (topic) ->
  211. view = new TopicRowView({model: topic})
  212. if topic.id == this.active_topic_id
  213. view.activate()
  214. position = topic.get("position")
  215. if position
  216. if position.pivot == "BEFORE"
  217. $("#" + position.pivot_topic_id).before(view.render().el)
  218. else if position.pivot == "AFTER"
  219. $("#" + position.pivot_topic_id).after(view.render().el)
  220. console.log("AFTER")
  221. else
  222. this.$("#topic-list").append(view.render().el)
  223. ,
  224. # Add all items in the **Todos** collection at once.
  225. addAll: ->
  226. Topics.each(this.addOne)
  227. })
  228. )
  229. exports.init = (options) ->
  230. #let jquery load this one
  231. options || (options = {})
  232. SS.events.on 'newTopic', (topic) ->
  233. existing_topic = Topics.get(topic.id)
  234. if existing_topic
  235. console.log "topic already exists!"
  236. else
  237. console.log "adding topic!"
  238. Topics.add(topic)
  239. SS.events.on 'updateTopic', (params) ->
  240. console.log("UPPPPPDATE")
  241. console.log(params)
  242. existing_topic = Topics.get(params.id)
  243. delete params["id"]
  244. console.log(existing_topic.set(params))
  245. console.log(existing_topic)
  246. SS.events.on 'deleteTopic', (topic_id) ->
  247. existing_topic = Topics.get(topic_id)
  248. if existing_topic
  249. existing_topic.clear()
  250. $(->
  251. # Finally, we kick things off by creating the **App**.
  252. $("#content").html($("#main_view").tmpl())
  253. $("#sidebar").html($("#sidebar_view").tmpl())
  254. window.Sidebar = new SidebarView(options)
  255. )