1
0

federationsettingsview.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. /* global OC, result, _ */
  2. /**
  3. * Copyright (c) 2016, Christoph Wurst <christoph@owncloud.com>
  4. *
  5. * This file is licensed under the Affero General Public License version 3 or later.
  6. * See the COPYING-README file.
  7. */
  8. (function(_, $, OC) {
  9. 'use strict';
  10. var FederationSettingsView = OC.Backbone.View.extend({
  11. _inputFields: undefined,
  12. /** @var Backbone.Model */
  13. _config: undefined,
  14. initialize: function(options) {
  15. options = options || {};
  16. if (options.config) {
  17. this._config = options.config;
  18. } else {
  19. this._config = new OC.Settings.UserSettings();
  20. }
  21. this._inputFields = [
  22. 'displayname',
  23. 'phone',
  24. 'email',
  25. 'website',
  26. 'twitter',
  27. 'address',
  28. 'avatar'
  29. ];
  30. var self = this;
  31. _.each(this._inputFields, function(field) {
  32. var scopeOnly = field === 'avatar';
  33. // Initialize config model
  34. if (!scopeOnly) {
  35. self._config.set(field, $('#' + field).val());
  36. }
  37. self._config.set(field + 'Scope', $('#' + field + 'scope').val());
  38. // Set inputs whenever model values change
  39. if (!scopeOnly) {
  40. self.listenTo(self._config, 'change:' + field, function() {
  41. self.$('#' + field).val(self._config.get(field));
  42. });
  43. }
  44. self.listenTo(self._config, 'change:' + field + 'Scope', function() {
  45. self._setFieldScopeIcon(field, self._config.get(field + 'Scope'));
  46. });
  47. });
  48. this._registerEvents();
  49. },
  50. render: function() {
  51. var self = this;
  52. _.each(this._inputFields, function(field) {
  53. var $heading = self.$('#' + field + 'form h2');
  54. var $icon = self.$('#' + field + 'form h2 > span');
  55. var scopeMenu = new OC.Settings.FederationScopeMenu({field: field});
  56. self.listenTo(scopeMenu, 'select:scope', function(scope) {
  57. self._onScopeChanged(field, scope);
  58. });
  59. $heading.append(scopeMenu.$el);
  60. $icon.on('click', _.bind(scopeMenu.show, scopeMenu));
  61. // Restore initial state
  62. self._setFieldScopeIcon(field, self._config.get(field + 'Scope'));
  63. });
  64. },
  65. _registerEvents: function() {
  66. var self = this;
  67. _.each(this._inputFields, function(field) {
  68. if (field === 'avatar') {
  69. return;
  70. }
  71. self.$('#' + field).keyUpDelayedOrEnter(_.bind(self._onInputChanged, self), true);
  72. });
  73. },
  74. _onInputChanged: function(e) {
  75. var self = this;
  76. var $dialog = $('.oc-dialog:visible');
  77. if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
  78. if($dialog.length === 0) {
  79. OC.PasswordConfirmation.requirePasswordConfirmation(_.bind(this._onInputChanged, this, e));
  80. }
  81. return;
  82. }
  83. var $target = $(e.target);
  84. var value = $target.val();
  85. var field = $target.attr('id');
  86. this._config.set(field, value);
  87. var savingData = this._config.save({
  88. error: function(jqXHR) {
  89. OC.msg.finishedSaving('#personal-settings-container .msg', jqXHR);
  90. }
  91. });
  92. $.when(savingData).done(function() {
  93. //OC.msg.finishedSaving('#personal-settings-container .msg', result)
  94. self._showInputChangeSuccess(field);
  95. if (field === 'displayname') {
  96. self._updateDisplayName(value);
  97. }
  98. });
  99. },
  100. _updateDisplayName: function(displayName) {
  101. // update displayName on the top right expand button
  102. $('#expandDisplayName').text(displayName);
  103. // update avatar if avatar is available
  104. if (!$('#removeavatar').hasClass('hidden')) {
  105. updateAvatar();
  106. }
  107. },
  108. _onScopeChanged: function(field, scope) {
  109. var $dialog = $('.oc-dialog:visible');
  110. if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
  111. if($dialog.length === 0) {
  112. OC.PasswordConfirmation.requirePasswordConfirmation(_.bind(this._onScopeChanged, this, field, scope));
  113. }
  114. return;
  115. }
  116. this._config.set(field + 'Scope', scope);
  117. $('#' + field + 'scope').val(scope);
  118. // TODO: user loading/success feedback
  119. this._config.save();
  120. this._setFieldScopeIcon(field, scope);
  121. },
  122. _showInputChangeSuccess: function(field) {
  123. var $icon = this.$('#' + field + 'form > span');
  124. $icon.fadeIn(200);
  125. setTimeout(function() {
  126. $icon.fadeOut(300);
  127. }, 2000);
  128. },
  129. _setFieldScopeIcon: function(field, scope) {
  130. var $icon = this.$('#' + field + 'form > h2 > span');
  131. $icon.removeClass('icon-password');
  132. $icon.removeClass('icon-contacts-dark');
  133. $icon.removeClass('icon-link');
  134. switch (scope) {
  135. case 'private':
  136. $icon.addClass('icon-password');
  137. break;
  138. case 'contacts':
  139. $icon.addClass('icon-contacts-dark');
  140. break;
  141. case 'public':
  142. $icon.addClass('icon-link');
  143. break;
  144. }
  145. }
  146. });
  147. OC.Settings = OC.Settings || {};
  148. OC.Settings.FederationSettingsView = FederationSettingsView;
  149. })(_, $, OC);