Extract toggle visibility of a SystemTagsInfoView to its own view

The SystemTagsInfoViewToggleView is a basic view that renders a label
that, when clicked, toggles the visibility of an associated
SystemTagsInfoView.

In order to keep the view parent agnostic its attachment and detachment
to/from the MainfFileInfoView is done in the FilesPlugin.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

apps/systemtags/js/filesplugin.js

@@ -36,7 +36,21 @@
 
 			_.each(fileList.getRegisteredDetailViews(), function(detailView) {
 				if (detailView instanceof OCA.Files.MainFileInfoDetailView) {
-					systemTagsInfoView.setMainFileInfoView(detailView);
+					var systemTagsInfoViewToggleView =
+						new OCA.SystemTags.SystemTagsInfoViewToggleView({
+							systemTagsInfoView: systemTagsInfoView
+						});
+					systemTagsInfoViewToggleView.render();
+
+					// The toggle view element is detached before the
+					// MainFileInfoDetailView is rendered to prevent its event
+					// handlers from being removed.
+					systemTagsInfoViewToggleView.listenTo(detailView, 'pre-render', function() {
+						systemTagsInfoViewToggleView.$el.detach();
+					});
+					systemTagsInfoViewToggleView.listenTo(detailView, 'post-render', function() {
+						detailView.$el.find('.file-details').append(systemTagsInfoViewToggleView.$el);
+					});
 
 					return;
 				}

apps/systemtags/js/merged.json

@@ -2,5 +2,6 @@
   "app.js",
   "systemtagsfilelist.js",
   "filesplugin.js",
-  "systemtagsinfoview.js"
+  "systemtagsinfoview.js",
+  "systemtagsinfoviewtoggleview.js"
 ]

apps/systemtags/js/systemtagsinfoview.js

@@ -37,8 +37,6 @@
 		 */
 		_inputView: null,
 
-		_toggleHandle: null,
-
 		initialize: function(options) {
 			var self = this;
 			options = options || {};
@@ -60,18 +58,6 @@
 
 			this._inputView.on('select', this._onSelectTag, this);
 			this._inputView.on('deselect', this._onDeselectTag, this);
-
-			this._toggleHandle = $('<span>').addClass('tag-label').text(t('systemtags', 'Tags'));
-			this._toggleHandle.prepend($('<span>').addClass('icon icon-tag'));
-
-			this._toggleHandle.on('click', function () {
-				if (self.isVisible()) {
-					self.hide();
-				} else {
-					self.show();
-					self.openDropdown();
-				}
-			});
 		},
 
 		/**
@@ -121,15 +107,6 @@
 			this.selectedTagsCollection.remove(tagId);
 		},
 
-		setMainFileInfoView: function(mainFileInfoView) {
-			this.listenTo(mainFileInfoView, 'pre-render', function() {
-				this._toggleHandle.detach();
-			});
-			this.listenTo(mainFileInfoView, 'post-render', function() {
-				mainFileInfoView.$el.find('.file-details').append(this._toggleHandle);
-			});
-		},
-
 		setFileInfo: function(fileInfo) {
 			var self = this;
 			if (!this._rendered) {
@@ -185,7 +162,6 @@
 
 		remove: function() {
 			this._inputView.remove();
-			this._toggleHandle.remove();
 		}
 	});
 

apps/systemtags/js/systemtagsinfoviewtoggleview.js

@@ -0,0 +1,103 @@
+/**
+ *
+ * @copyright Copyright (c) 2017, Daniel Calviño Sánchez (danxuliu@gmail.com)
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+(function(OCA) {
+
+	var TEMPLATE =
+		'<span class="icon icon-tag"/>' + t('systemtags', 'Tags');
+
+	/**
+	 * @class OCA.SystemTags.SystemTagsInfoViewToggleView
+	 * @classdesc
+	 *
+	 * View to toggle the visibility of a SystemTagsInfoView.
+	 *
+	 * This toggle view must be explicitly rendered before it is used.
+	 */
+	var SystemTagsInfoViewToggleView = OC.Backbone.View.extend(
+		/** @lends OC.Backbone.View.prototype */ {
+
+		tagName: 'span',
+
+		className: 'tag-label',
+
+		events: {
+			'click': 'click'
+		},
+
+		/**
+		 * @type OCA.SystemTags.SystemTagsInfoView
+		 */
+		_systemTagsInfoView: null,
+
+		template: function(data) {
+			if (!this._template) {
+				this._template = Handlebars.compile(TEMPLATE);
+			}
+			return this._template(data);
+		},
+
+		/**
+		 * Initialize this toggle view.
+		 *
+		 * The options must provide a systemTagsInfoView parameter that
+		 * references the SystemTagsInfoView to associate to this toggle view.
+		 */
+		initialize: function(options) {
+			var self = this;
+			options = options || {};
+
+			this._systemTagsInfoView = options.systemTagsInfoView;
+			if (!this._systemTagsInfoView) {
+				throw 'Missing required parameter "systemTagsInfoView"';
+			}
+		},
+
+		/**
+		 * Toggles the visibility of the associated SystemTagsInfoView.
+		 *
+		 * When the systemTagsInfoView is shown its dropdown is also opened.
+		 */
+		click: function() {
+			if (this._systemTagsInfoView.isVisible()) {
+				this._systemTagsInfoView.hide();
+			} else {
+				this._systemTagsInfoView.show();
+				this._systemTagsInfoView.openDropdown();
+			}
+		},
+
+		/**
+		 * Renders this toggle view.
+		 *
+		 * @return OCA.SystemTags.SystemTagsInfoViewToggleView this object.
+		 */
+		render: function() {
+			this.$el.html(this.template());
+
+			return this;
+		},
+
+	});
+
+	OCA.SystemTags.SystemTagsInfoViewToggleView = SystemTagsInfoViewToggleView;
+
+})(OCA);

apps/systemtags/tests/js/systemtagsinfoviewtoggleviewSpec.js

@@ -0,0 +1,93 @@
+/**
+ *
+ * @copyright Copyright (c) 2017, Daniel Calviño Sánchez (danxuliu@gmail.com)
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+describe('OCA.SystemTags.SystemTagsInfoViewToggleView', function () {
+
+	var systemTagsInfoView;
+	var view;
+
+	beforeEach(function() {
+		systemTagsInfoView = new OCA.SystemTags.SystemTagsInfoView();
+		view = new OCA.SystemTags.SystemTagsInfoViewToggleView({ systemTagsInfoView: systemTagsInfoView });
+	});
+
+	afterEach(function() {
+		view.remove();
+		systemTagsInfoView.remove();
+	});
+
+	describe('initialize', function() {
+		it('fails if a "systemTagsInfoView" parameter is not provided', function() {
+			var constructor = function() {
+				return new OCA.SystemTags.SystemTagsInfoViewToggleView({});
+			}
+
+			expect(constructor).toThrow();
+		});
+	});
+
+	describe('click on element', function() {
+
+		var isVisibleStub;
+		var showStub;
+		var hideStub;
+		var openDropdownStub;
+
+		beforeEach(function() {
+			isVisibleStub = sinon.stub(systemTagsInfoView, 'isVisible');
+			showStub = sinon.stub(systemTagsInfoView, 'show');
+			hideStub = sinon.stub(systemTagsInfoView, 'hide');
+			openDropdownStub = sinon.stub(systemTagsInfoView, 'openDropdown');
+		});
+
+		afterEach(function() {
+			isVisibleStub.restore();
+			showStub.restore();
+			hideStub.restore();
+			openDropdownStub.restore();
+		});
+
+		it('shows a not visible SystemTagsInfoView', function() {
+			isVisibleStub.returns(false);
+
+			view.$el.click();
+
+			expect(isVisibleStub.calledOnce).toBeTruthy();
+			expect(showStub.calledOnce).toBeTruthy();
+			expect(openDropdownStub.calledOnce).toBeTruthy();
+			expect(openDropdownStub.calledAfter(showStub)).toBeTruthy();
+			expect(hideStub.notCalled).toBeTruthy();
+		});
+
+		it('hides a visible SystemTagsInfoView', function() {
+			isVisibleStub.returns(true);
+
+			view.$el.click();
+
+			expect(isVisibleStub.calledOnce).toBeTruthy();
+			expect(hideStub.calledOnce).toBeTruthy();
+			expect(showStub.notCalled).toBeTruthy();
+			expect(openDropdownStub.notCalled).toBeTruthy();
+		});
+
+	});
+
+});

tests/karma.config.js

@@ -102,6 +102,7 @@ module.exports = function(config) {
 					// need to enforce loading order...
 					'apps/systemtags/js/app.js',
 					'apps/systemtags/js/systemtagsinfoview.js',
+					'apps/systemtags/js/systemtagsinfoviewtoggleview.js',
 					'apps/systemtags/js/systemtagsfilelist.js',
 					'apps/systemtags/js/filesplugin.js'
 				],