js cleanup: refactor addBookmark functionality

js/addBookmarkView.js

@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+
+	var AddBookmarkView = OC.Backbone.View.extend({
+
+		initialize: function() {
+			_.bindAll(this, 'onAddBookmark', 'onTypeUrl', 'onAddBookmarkError');
+
+			view = this;
+
+			this.$el.find('#add_url').on('keydown keyup change click', view.onTypeUrl);
+		},
+
+		onTypeUrl: function() {
+			var button = this.$el.find('#bookmark_add_submit');
+			this.$el.off('submit');
+			if(!this.$el.find('#add_url').val().trim()) {
+				this.$el.on('submit', function (e) {
+					e.preventDefault();
+				});
+				button.addClass('disabled');
+			}
+			else {
+				button.removeClass('disabled');
+				this.$el.on('submit', this.onAddBookmark);
+			}
+		},
+
+		onAddBookmark: function(event) {
+			event.preventDefault();
+			var url = this.$el.find('#add_url').val();
+			if (!url.trim()) {
+				return;
+			}
+			var bookmark = new OCA.Bookmarks.BookmarkModel({url: url});
+			bookmark.once('sync', this.onAddBookmarkSuccessful, this);
+			this.$el.find('#bookmark_add_submit').addClass('icon-loading-small');
+			this.$el.find('#bookmark_add_submit').removeClass('icon-add');
+			bookmark.save(null, {
+				error:   this.onAddBookmarkError
+			});
+
+		},
+
+		/**
+		 * This is called when the save operation on a bookmark is done, no
+		 * matter the outcome
+		 *
+		 * @this {OCA.Bookmarks.AddBookmarkView}
+		 */
+		onAddBookmarkSuccessful: function(model, response, options) {
+			//FIXME: introduce BookmarksCollection and it this model thereto
+			// also introduce BookmarksListView which should update the list
+			$('.bookmark_single').filterAttr('data-id', response.item.id).remove();
+			updateBookmarksList(response.item, 'prepend');
+			this.$el.find('#add_url').val('');
+			checkEmpty();
+
+			this.resetElements();
+		},
+
+		onAddBookmarkError: function() {
+			OC.Notification.showTemporary(t('bookmark', 'Error when saving bookmark – sorry!'));
+
+			this.resetElements();
+		},
+
+		resetElements: function() {
+			this.$el.find('#bookmark_add_submit').addClass('icon-add');
+			this.$el.find('#bookmark_add_submit').removeClass('icon-loading-small');
+			this.onTypeUrl();
+		}
+
+
+	});
+
+	OCA.Bookmarks = OCA.Bookmarks || {};
+	OCA.Bookmarks.AddBookmarkView = AddBookmarkView;
+})();

js/app.js

@@ -57,10 +57,15 @@
 		tagFilterView: null,
 
 		/**
-		 * @member OCA.Bookmarks.SettinsView
+		 * @member OCA.Bookmarks.SettingsView
 		 */
 		settingsView: null,
 
+		/**
+		 * @member OCA.Bookmarks.AddBookmarkView
+		 */
+		addBookmarkView: null,
+
 		/**
 		 * Initializes the bookmarks app
 		 */
@@ -88,6 +93,11 @@
 				id: 'appSettings'
 			});
 
+			this.addBookmarkView         = new OCA.Bookmarks.AddBookmarkView({
+				el: '#add_form',
+				id: 'addBookmark'
+			});
+
 			this.allTagsCollection.fetch();
 			console.warn('INiT DONE');
 		}

js/bookmarkModel.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+
+	var BookmarkModel = OC.Backbone.Model.extend({
+		idAttribute: 'id',
+
+		defaults: {
+			description: '',
+			from_own: 0,
+			title: '',
+			item: {tags: ''}
+		},
+
+		url: 'bookmark'
+	});
+
+	OCA.Bookmarks = OCA.Bookmarks || {};
+	OCA.Bookmarks.BookmarkModel = BookmarkModel;
+})();

js/bookmarks.js

@@ -5,8 +5,6 @@ var bookmarksSorting = 'bookmarks_sorting_recent';
 var ajaxCallCount = 0;
 
 $(document).ready(function () {
-	watchUrlField();
-	$('#add_url').on('keydown keyup change click', watchUrlField);
 	$('.bookmarks_list').scroll(updateOnBottom).empty();
 	$('.navigationAllBookmarks').click(resetTagFilter);
 
@@ -161,59 +159,6 @@ function getBookmarks() {
 	});
 }
 
-function watchUrlField() {
-	var form = $('#add_form');
-	var el = $('#add_url');
-	var button = $('#bookmark_add_submit');
-	form.unbind('submit');
-	if (!acceptUrl(el.val())) {
-		form.bind('submit', function (e) {
-			e.preventDefault();
-		});
-		button.addClass('disabled');
-	}
-	else {
-		button.removeClass('disabled');
-		form.bind('submit', addBookmark);
-	}
-}
-
-function acceptUrl(url) {
-	return url.replace(/^\s+/g, '').replace(/\s+$/g, '') !== '';
-}
-
-function addBookmark(event) {
-	event.preventDefault();
-	var url = $('#add_url').val();
-	//If trim is empty
-	if (!acceptUrl(url)) {
-		return;
-	}
-
-	$('#add_url').val('');
-	var bookmark = {url: url, description: '', title: '', from_own: 0, added_date: new Date()};
-	increaseAjaxCallCount();
-	$.ajax({
-		type: 'POST',
-		url: 'bookmark',
-		data: bookmark,
-		complete: function () {
-			decreaseAjaxCallCount();
-		},
-		success: function (data) {
-			if (data.status === 'success') {
-				// First remove old BM if exists
-				$('.bookmark_single').filterAttr('data-id', data.item.id).remove();
-
-				var bookmark = $.extend({}, bookmark, data.item);
-				updateBookmarksList(bookmark, 'prepend');
-				checkEmpty();
-				watchUrlField();
-			}
-		}
-	});
-}
-
 function delBookmark() {
 	var record = $(this).parent().parent();
 	OC.dialogs.confirm(t('bookmarks', 'Are you sure you want to remove this bookmark?'),

templates/main.php

@@ -3,9 +3,11 @@ script('bookmarks', '3rdparty/tag-it');
 script('bookmarks', '3rdparty/js_tpl');
 
 script('bookmarks', 'tagModel');
+script('bookmarks', 'bookmarkModel');
 script('bookmarks', 'tagCollection');
 script('bookmarks', 'tagListView');
 script('bookmarks', 'tagFilterView');
+script('bookmarks', 'addBookmarkView');
 script('bookmarks', 'settingsView');
 script('bookmarks', 'app');