You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

navigation.js 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /*
  2. * Copyright (c) 2014
  3. *
  4. * @author Vincent Petry
  5. * @copyright 2014 Vincent Petry <pvince81@owncloud.com>
  6. *
  7. * This file is licensed under the Affero General Public License version 3
  8. * or later.
  9. *
  10. * See the COPYING-README file.
  11. *
  12. */
  13. (function() {
  14. /**
  15. * @class OCA.Files.Navigation
  16. * @classdesc Navigation control for the files app sidebar.
  17. *
  18. * @param $el element containing the navigation
  19. */
  20. var Navigation = function($el) {
  21. this.initialize($el);
  22. };
  23. /**
  24. * @memberof OCA.Files
  25. */
  26. Navigation.prototype = {
  27. /**
  28. * Currently selected item in the list
  29. */
  30. _activeItem: null,
  31. /**
  32. * Currently selected container
  33. */
  34. $currentContent: null,
  35. /**
  36. * Initializes the navigation from the given container
  37. *
  38. * @private
  39. * @param $el element containing the navigation
  40. */
  41. initialize: function($el) {
  42. this.$el = $el;
  43. this._activeItem = null;
  44. this.$currentContent = null;
  45. this._setupEvents();
  46. },
  47. /**
  48. * Setup UI events
  49. */
  50. _setupEvents: function() {
  51. this.$el.on('click', 'li a', _.bind(this._onClickItem, this));
  52. },
  53. /**
  54. * Returns the container of the currently active app.
  55. *
  56. * @return app container
  57. */
  58. getActiveContainer: function() {
  59. return this.$currentContent;
  60. },
  61. /**
  62. * Returns the currently active item
  63. *
  64. * @return item ID
  65. */
  66. getActiveItem: function() {
  67. return this._activeItem;
  68. },
  69. /**
  70. * Switch the currently selected item, mark it as selected and
  71. * make the content container visible, if any.
  72. *
  73. * @param string itemId id of the navigation item to select
  74. * @param array options "silent" to not trigger event
  75. */
  76. setActiveItem: function(itemId, options) {
  77. var oldItemId = this._activeItem;
  78. if (itemId === this._activeItem) {
  79. if (!options || !options.silent) {
  80. this.$el.trigger(
  81. new $.Event('itemChanged', {itemId: itemId, previousItemId: oldItemId})
  82. );
  83. }
  84. return;
  85. }
  86. this.$el.find('li').removeClass('active');
  87. if (this.$currentContent) {
  88. this.$currentContent.addClass('hidden');
  89. this.$currentContent.trigger(jQuery.Event('hide'));
  90. }
  91. this._activeItem = itemId;
  92. this.$el.find('li[data-id=' + itemId + ']').addClass('active');
  93. this.$currentContent = $('#app-content-' + itemId);
  94. this.$currentContent.removeClass('hidden');
  95. if (!options || !options.silent) {
  96. this.$currentContent.trigger(jQuery.Event('show'));
  97. this.$el.trigger(
  98. new $.Event('itemChanged', {itemId: itemId, previousItemId: oldItemId})
  99. );
  100. }
  101. },
  102. /**
  103. * Returns whether a given item exists
  104. */
  105. itemExists: function(itemId) {
  106. return this.$el.find('li[data-id=' + itemId + ']').length;
  107. },
  108. /**
  109. * Event handler for when clicking on an item.
  110. */
  111. _onClickItem: function(ev) {
  112. var $target = $(ev.target);
  113. var itemId = $target.closest('li').attr('data-id');
  114. if (!_.isUndefined(itemId)) {
  115. this.setActiveItem(itemId);
  116. }
  117. ev.preventDefault();
  118. }
  119. };
  120. OCA.Files.Navigation = Navigation;
  121. })();