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>
This commit is contained in:
parent
5985ecb66d
commit
c9bc521532
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -2,5 +2,6 @@
|
|||
"app.js",
|
||||
"systemtagsfilelist.js",
|
||||
"filesplugin.js",
|
||||
"systemtagsinfoview.js"
|
||||
"systemtagsinfoview.js",
|
||||
"systemtagsinfoviewtoggleview.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();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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);
|
|
@ -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();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
|
@ -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'
|
||||
],
|
||||
|
|
Loading…
Reference in New Issue