/* * * tc.views.js * */ (function(undefined){ 'strict' var tc = window.tc = window.tc || {}; var Backbone = window.Backbone; var template = window.Template; /********************************** * * generic implementations * * *******************************/ var models = 'Bookmark Cursor Connection Path Media Shelf'.split(' '); _.each(models, function(elt, idx){ var elementView = elt + 'View'; window.tc[elementView] = Backbone.View.extend({ className:elt, initialize: function() { this.model.on('change', function(){console.log('CHANGE',elt, this.cid, this.model.changedAttributes());}, this); this.model.on('change', this.render, this); }, render: function(callback) { var $el = this.$el; $el.attr('id', elt+ '_' +this.model.id) var data = this.model.toJSON({populate:true}); template.render(elt, this, function(t){ $el.html(t(data)); if(callback && ((typeof callback) === 'function')) { callback.apply(this, []); } if(this.postRender) { this.postRender(data); } }); return this; }, }); }); _.each(models, function(elt, idx){ var elementView = elt + 'View'; var elementCollection = elt + 'Collection'; var collectedView = elt + 'CollectionView' ; window.tc[collectedView] = Backbone.View.extend({ className:elementCollection, initialize: function() { this.collected = window.tc[elementCollection]; this.rendered_items = {}; this.collected.on('add', this.renderOne.bind(this)); this.collected.on('reset', this.render.bind(this)); this.collected.on('remove', this.render.bind(this)); }, renderOne: function(item){ console.log('RENDER_ONE:',collectedView); var $el = this.$el; var _v = window.tc[elementView]; if(this.rendered_items[item.cid] === undefined) { var itemView = new _v({model:item}); itemView.render(); $el.append(itemView.el); this.rendered_items[item.cid] = itemView; console.log('APPEND:',itemView.el,'TO:',this.el); } return this; }, render: function() { console.log('RENDER:',collectedView); var $el = this.$el; var self = this; template.render(elementCollection, this, function(t){ $el.html(t({})); this.rendered_items = {}; this.collected.each(function( item ) { self.renderOne(item); }); }); return this; }, }); }); /********************************** * * implementation details * * *******************************/ var _BaseForm = Backbone.View.extend({ className:'form', render:function(){ if(this.formName && this.formData) { var $el = this.$el; var data = this.formData; if((typeof data) === 'function') { data = data.apply(this, []); } template.render(this.formName, this, function(t){ $el.html(t(data)); if(this.postRender) { this.postRender(data); } }); } return this; }, _submit:function(evt){ if(this.submit && ((typeof this.submit) === 'function') ) { this.submit(); } }, close:function(){ this.$el.remove(); }, events:{ 'click .submit':'_submit', 'click .close':'close', }, }); var createBookmark = function(media, time, comment, shelf){ var c = new tc.Cursor({ media:media, cursor:time }); c.on('sync', function(){ var bm = new tc.Bookmark({ note:comment, cursor:c.id }); bm.on('sync', function(){ var s = tc.ShelfCollection.get(shelf); var bms = _.clone(s.get('bookmarks')); bms.push(bm.id); s.set({bookmarks:bms}); s.save({},{wait:true}); }); bm.save({},{wait:true}); }); c.save({},{wait:true}); }; _.extend(tc.Media.prototype,{ _synced:function(res){ createBookmark(res._id, 0, 'Origin('+(this.fileName||res.url.split('/').pop())+')', this.get('shelf')); this.unset('media',{silent:true}); this.unset('shelf',{silent:true}); this.parse(res); this.trigger('sync', this, res, {}); }, _sync_error:function(jqXHR, textStatus, errorThrown){ this.trigger('error', jqXHR, textStatus, errorThrown); }, sync:function(method, model, options){ if(model.get('media') && model.get('shelf')) // want to upload { var that = this; var formdata = new FormData(); var f = this.get('media'); this.fileName = f.name; formdata.append('media', f); $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); //Upload progress xhr.upload.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Do something with upload progress if (options.progress) { options.progress.apply(that, [percentComplete]) }; console.log(percentComplete); } }, false); //Download progress xhr.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Do something with download progress console.log(percentComplete); } }, false); return xhr; }, url: this.url(), type: "POST", data: formdata, processData: false, contentType: false, }) .done(this._synced.bind(this)) .fail(this._sync_error.bind(this)); return this; } else { return Backbone.sync.apply(this, [method, model, options]); } }, }); tc.FormUploadMedia = _BaseForm.extend({ id:'upload-media', formName:'UploadMedia', formData:function(){ var shelf = window.app.getView('shelf').collected; var medias = shelf.findWhere({title:'medias'}); if(medias === undefined) { var that = this; shelf.create({title:'medias'}); } return {shelves:shelf.toJSON()}; }, initialize:function(){ }, submit:function(){ var $media = this.$el.find('[name=media]'); var $shelf = this.$el.find('[name=shelf]'); var files = $media[0].files; var s = $shelf.val(); var to_remain = files.length; var that = this; for (var i = 0; i < files.length; i++) { var $file = $('