PageRenderTime 47ms CodeModel.GetById 20ms RepoModel.GetById 0ms app.codeStats 0ms

/web/public/js/app/app.js

https://bitbucket.org/massimopalmieri/drop-share
JavaScript | 408 lines | 297 code | 86 blank | 25 comment | 8 complexity | 288e2da79774fbc85b0503dbedda9428 MD5 | raw file
  1. /*! Drop&Share - v0.1.0
  2. *
  3. * Copyright (c) 2013 Karmarama; Licensed MIT */
  4. ShareApp = new Backbone.Marionette.Application();
  5. ShareApp.Models = {};
  6. ShareApp.Collections = {};
  7. ShareApp.Views = {
  8. User: {},
  9. Session: {},
  10. Comment: {},
  11. Wish: {}
  12. };
  13. ShareApp.Routers = {};
  14. ShareApp.baseUrl = 'http://localhost:2403';
  15. $(function() {
  16. // jQuery
  17. ShareApp.addInitializer(function(options) {
  18. $.ajaxSetup({
  19. xhrFields: {
  20. withCredentials: true
  21. },
  22. crossDomain: true
  23. });
  24. });
  25. // Initialize regions
  26. ShareApp.addInitializer(function(options) {
  27. ShareApp.addRegions({
  28. mainRegion: '#wish-list-region',
  29. menuRegion: '#nav-region',
  30. headerRegion: '#header-region',
  31. previewRegion: '#preview-region',
  32. profileRegion: '#profile-region'
  33. });
  34. });
  35. // Router
  36. ShareApp.addInitializer(function(options) {
  37. ShareApp.router = new ShareApp.Routers.Default();
  38. });
  39. // History
  40. ShareApp.on('initialize:after', function(options) {
  41. Backbone.history.start({ pushState: false });
  42. });
  43. var options = {
  44. baseUrl: 'http://cwapi.dev.kdigital.net'
  45. };
  46. ShareApp.start(options);
  47. });
  48. ShareApp.Models.Item = Backbone.Model.extend({
  49. defaults: {
  50. id: '',
  51. title: '',
  52. type: '',
  53. description: '',
  54. thumbnailUrl: '',
  55. link: '',
  56. html: '',
  57. createDate: '',
  58. userId: '',
  59. tags: [],
  60. notes: ''
  61. },
  62. urlRoot: ShareApp.baseUrl + '/items'
  63. });
  64. ShareApp.Collections.Items = Backbone.Collection.extend({
  65. model: ShareApp.Models.Item,
  66. url: ShareApp.baseUrl + '/items'
  67. });
  68. ShareApp.Views.Header = Backbone.Marionette.ItemView.extend({
  69. template: '#header-template',
  70. tagName: 'div',
  71. events: {
  72. 'submit #form-header': 'lookup',
  73. 'drop #url': 'handleData'
  74. },
  75. handleData: function(event) {
  76. event.stopPropagation();
  77. event.preventDefault();
  78. var data = event.originalEvent.dataTransfer.getData('Text');
  79. this.$el.find('#url').val(data);
  80. this.$el.find('#form-header').trigger('submit');
  81. },
  82. lookup: function(event) {
  83. var self = this,
  84. url = this.$el.find('#url').val();
  85. $.embedly.extract(url, {
  86. key: '2315415251b04317a1eed7f12b166f4d'
  87. }).progress(function(data){
  88. // self.createItem(data);
  89. self.$el.find('#url').val('');
  90. // var previewModel = new Backbone.Model(data);
  91. var previewModel = new Backbone.Model({
  92. title: data.title,
  93. type: data.type,
  94. description: data.description,
  95. // thumbnailUrl: data.images[0].url,
  96. link: data.url,
  97. html: data.media.html,
  98. userId: data.userId,
  99. tags: ''
  100. });
  101. var previewView = new ShareApp.Views.Preview({
  102. model: previewModel,
  103. data: data
  104. });
  105. // ShareApp.headerRegion.close();
  106. self.$el.slideUp(300, function() {
  107. ShareApp.headerRegion.close();
  108. });
  109. ShareApp.previewRegion.show(previewView);
  110. });
  111. event.preventDefault();
  112. },
  113. createItem: function(data) {
  114. var self = this;
  115. var item = {
  116. title: data.title,
  117. type: data.type,
  118. description: data.description,
  119. thumbnailUrl: data.thumbnailUrl,
  120. link: data.url,
  121. userId: data.userId,
  122. tags: ''
  123. };
  124. var promise = this.collection.create(item);
  125. // promise.done(function(response){
  126. // self.$el.find('#url').val('');
  127. // console.log(self);
  128. // });
  129. // promise.fail(function(){
  130. // });
  131. }
  132. });
  133. ShareApp.Views.Item = Backbone.Marionette.ItemView.extend({
  134. template: '#popular-wish-template',
  135. tagName: 'div',
  136. className: 'item'
  137. });
  138. ShareApp.Views.Items = Backbone.Marionette.CollectionView.extend({
  139. id: 'most-popular-wrapper',
  140. itemView: ShareApp.Views.Item
  141. });
  142. ShareApp.Views.Menu = Backbone.Marionette.ItemView.extend({
  143. template: "#menu-template",
  144. initialize: function() {
  145. if ( this.collection ) {
  146. this.listenTo(this.collection, 'add', this.render);
  147. this.listenTo(this.collection, 'remove', this.render);
  148. this.listenTo(this.collection, 'reset', this.render);
  149. // this.collection.fetch({
  150. // reset: true
  151. // });
  152. }
  153. this.listenTo(ShareApp.router, 'route', function(route){
  154. this.setActive(
  155. this._normalizeRoute(route)
  156. );
  157. });
  158. },
  159. setActive: function(url) {
  160. var $li = this.$el.find('a[href=#' + url + ']').closest('li');
  161. // TODO: fix this
  162. if ( $li.parents('.subtabs').length ) {
  163. this.$el.find('ul.tabs li').eq(0).addClass('active');
  164. }
  165. $li.addClass('active');
  166. $li.siblings().removeClass('active');
  167. },
  168. hideSubmenu: function() {
  169. this.submenu = false;
  170. this.$el.find('.subtabs').hide();
  171. },
  172. showSubmenu: function() {
  173. this.submenu = true;
  174. this.$el.find('.subtabs').show();
  175. },
  176. onRender: function() {
  177. this.setActive(
  178. this._normalizeRoute(Backbone.history.getFragment())
  179. );
  180. if (this.submenu === true) {
  181. this.$el.find('.subtabs').show();
  182. } else {
  183. this.$el.find('.subtabs').hide();
  184. }
  185. },
  186. serializeData: function(){
  187. var data = {};
  188. if (this.model) {
  189. data = this.model.toJSON();
  190. } else if (this.collection) {
  191. data = { items: this.collection };
  192. }
  193. return data;
  194. },
  195. _normalizeRoute: function(route) {
  196. return route.replace(/([a-z])([A-Z])/, function(match, lower, upper) {
  197. return lower + '-' + upper.toLowerCase();
  198. });
  199. }
  200. });
  201. ShareApp.Views.Preview = Backbone.Marionette.ItemView.extend({
  202. template: '#preview-template',
  203. tagName: 'div',
  204. className: 'preview',
  205. events: {
  206. 'submit #form-preview': 'saveData'
  207. },
  208. onRender: function() {
  209. this.$el.find('#tags').selectize({
  210. delimiter: ',',
  211. persist: false,
  212. create: function(input) {
  213. return {
  214. value: input,
  215. text: input
  216. };
  217. }
  218. });
  219. },
  220. saveData: function(event) {
  221. // console.log(this.options.data);
  222. var form = this.$el.find('#form-preview'),
  223. // tags = form.find('#tags').val().split(/\s*,\s*/),
  224. tags = [],
  225. tagsInput = this.$el.find('.selectize-control .item'),
  226. notes = form.find('#notes').val(),
  227. data = this.options.data,
  228. date = moment().format();
  229. for (var i = 0; i < tagsInput.length; i++) {
  230. tags.push($(tagsInput[i]).data('value'));
  231. }
  232. var item = new ShareApp.Models.Item({
  233. title: data.title,
  234. type: data.type,
  235. description: data.description,
  236. thumbnailUrl: data.images[0].url,
  237. link: data.url,
  238. createDate: date,
  239. userId: data.userId,
  240. tags: tags,
  241. notes: notes
  242. });
  243. var promise = item.save();
  244. promise.done(function() {
  245. console.log('saved');
  246. });
  247. promise.fail(function() {
  248. console.log('failed');
  249. });
  250. event.preventDefault();
  251. }
  252. });
  253. ShareApp.Routers.Default = Backbone.Marionette.AppRouter.extend({
  254. routes : {
  255. '': 'mostPopular',
  256. 'board': 'mostPopular',
  257. 'tag/:tag': 'filterTag',
  258. 'user/:userId': 'filterUser'
  259. },
  260. mostPopular: function() {
  261. var itemsCollection = new ShareApp.Collections.Items();
  262. itemsCollection.fetch();
  263. var headerView = new ShareApp.Views.Header({
  264. collection: itemsCollection
  265. });
  266. var itemsView = new ShareApp.Views.Items({
  267. collection: itemsCollection
  268. });
  269. this.show({
  270. header: headerView,
  271. main: itemsView
  272. });
  273. },
  274. filterTag: function(tag) {
  275. var itemsCollection = new ShareApp.Collections.Items();
  276. itemsCollection.fetch({
  277. data: {
  278. tags: tag
  279. }
  280. });
  281. var headerView = new ShareApp.Views.Header({
  282. collection: itemsCollection
  283. });
  284. var itemsView = new ShareApp.Views.Items({
  285. collection: itemsCollection
  286. });
  287. this.show({
  288. header: headerView,
  289. main: itemsView
  290. });
  291. },
  292. filterUser: function(userId) {
  293. var itemsCollection = new ShareApp.Collections.Items();
  294. itemsCollection.fetch({
  295. data: {
  296. user: userId
  297. }
  298. });
  299. var headerView = new ShareApp.Views.Header({
  300. collection: itemsCollection
  301. });
  302. var itemsView = new ShareApp.Views.Items({
  303. collection: itemsCollection
  304. });
  305. this.show({
  306. header: headerView,
  307. main: itemsView
  308. });
  309. },
  310. // Batch show
  311. show: function(regions) {
  312. _.each(regions, function(view, region){
  313. ShareApp[region + 'Region'].show(view);
  314. });
  315. },
  316. // Batch close
  317. close: function(regions) {
  318. _.each(regions, function(region){
  319. ShareApp[region + 'Region'].close();
  320. });
  321. }
  322. });