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.

settings-admin.js 7.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. /**
  2. * @author Björn Schießle <bjoern@schiessle.org>
  3. *
  4. * @copyright Copyright (c) 2016, Bjoern Schiessle
  5. * @license AGPL-3.0
  6. *
  7. * This code is free software: you can redistribute it and/or modify
  8. * it under the terms of the GNU Affero General Public License as
  9. * published by the Free Software Foundation, either version 3 of the
  10. * License, or (at your opinion) any later version.
  11. *
  12. * This program is distributed in the hope that it will be useful,
  13. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  14. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  15. * GNU Affero General Public License for more details.
  16. *
  17. * You should have received a copy of the GNU Affero General Public License
  18. * along with this program. If not, see <http://www.gnu.org/licenses/>
  19. *
  20. */
  21. function startLoading() {
  22. OC.msg.startSaving('#theming_settings_msg');
  23. $('#theming_settings_loading').show();
  24. }
  25. function setThemingValue(setting, value) {
  26. startLoading();
  27. $.post(
  28. OC.generateUrl('/apps/theming/ajax/updateStylesheet'), {'setting' : setting, 'value' : value}
  29. ).done(function() {
  30. hideUndoButton(setting, value);
  31. preview(setting, value);
  32. }).fail(function(response) {
  33. OC.msg.finishedSaving('#theming_settings_msg', response.responseJSON);
  34. $('#theming_settings_loading').hide();
  35. });
  36. }
  37. function preview(setting, value, serverCssUrl) {
  38. OC.msg.startAction('#theming_settings_msg', t('theming', 'Loading preview…'));
  39. // Get all theming themes css links and force reload them
  40. [...document.querySelectorAll('link.theme')]
  41. .forEach(theme => {
  42. // Only edit the clone to not remove applied one
  43. var clone = theme.cloneNode()
  44. var url = new URL(clone.href)
  45. // Set current timestamp as cache buster
  46. url.searchParams.set('v', Date.now())
  47. clone.href = url.toString()
  48. clone.onload = function() {
  49. theme.remove()
  50. }
  51. document.head.append(clone)
  52. })
  53. if (setting === 'name') {
  54. window.document.title = t('core', 'Admin') + " - " + value;
  55. }
  56. // Finish
  57. $('#theming_settings_loading').hide();
  58. var response = { status: 'success', data: {message: t('theming', 'Saved')}};
  59. OC.msg.finishedSaving('#theming_settings_msg', response);
  60. hideUndoButton(setting, value);
  61. }
  62. function hideUndoButton(setting, value) {
  63. var themingDefaults = {
  64. name: 'Nextcloud',
  65. slogan: t('lib', 'a safe home for all your data'),
  66. url: 'https://nextcloud.com',
  67. color: '#0082c9',
  68. logoMime: '',
  69. backgroundMime: '',
  70. imprintUrl: '',
  71. privacyUrl: ''
  72. };
  73. if (value === themingDefaults[setting] || value === '') {
  74. $('.theme-undo[data-setting=' + setting + ']').hide();
  75. } else {
  76. $('.theme-undo[data-setting=' + setting + ']').show();
  77. }
  78. if(setting === 'backgroundMime' && value !== 'backgroundColor') {
  79. $('.theme-remove-bg').show();
  80. }
  81. if(setting === 'backgroundMime' && value === 'backgroundColor') {
  82. $('.theme-remove-bg').hide();
  83. $('.theme-undo[data-setting=backgroundMime]').show();
  84. }
  85. }
  86. window.addEventListener('DOMContentLoaded', function () {
  87. $('#theming [data-toggle="tooltip"]').tooltip();
  88. // manually instantiate jscolor to work around new Function call which violates strict CSP
  89. var colorElement = $('#theming-color')[0];
  90. var jscolor = new window.jscolor(colorElement, {hash: true});
  91. $('#theming .theme-undo').each(function() {
  92. var setting = $(this).data('setting');
  93. var value = $('#theming-'+setting).val();
  94. hideUndoButton(setting, value);
  95. });
  96. $('.fileupload').fileupload({
  97. pasteZone: null,
  98. dropZone: null,
  99. done: function (e, response) {
  100. var $form = $(e.target).closest('form');
  101. var key = $form.data('image-key');
  102. preview(key + 'Mime', response.result.data.name, response.result.data.serverCssUrl);
  103. $form.find('.image-preview').css('backgroundImage', response.result.data.url + '?v=' + new Date().getTime());
  104. OC.msg.finishedSaving('#theming_settings_msg', response.result);
  105. $form.find('label.button').addClass('icon-upload').removeClass('icon-loading-small');
  106. $form.find('.theme-undo').show();
  107. },
  108. submit: function(e, response) {
  109. var $form = $(e.target).closest('form');
  110. var key = $form.data('image-key');
  111. startLoading();
  112. $form.find('label.button').removeClass('icon-upload').addClass('icon-loading-small');
  113. },
  114. fail: function (e, response){
  115. var $form = $(e.target).closest('form');
  116. OC.msg.finishedError('#theming_settings_msg', response._response.jqXHR.responseJSON.data.message);
  117. $form.find('label.button').addClass('icon-upload').removeClass('icon-loading-small');
  118. $('#theming_settings_loading').hide();
  119. }
  120. });
  121. // clicking preview should also trigger file upload dialog
  122. $('#theming-preview-logo').on('click', function(e) {
  123. e.stopPropagation();
  124. $('#uploadlogo').click();
  125. });
  126. $('#theming-preview').on('click', function() {
  127. $('#upload-login-background').click();
  128. });
  129. function checkName () {
  130. var length = $('#theming-name').val().length;
  131. try {
  132. if (length > 0) {
  133. return true;
  134. } else {
  135. throw t('theming', 'Name cannot be empty');
  136. }
  137. } catch (error) {
  138. $('#theming-name').attr('title', error);
  139. $('#theming-name').tooltip({placement: 'top', trigger: 'manual'});
  140. $('#theming-name').tooltip('_fixTitle');
  141. $('#theming-name').tooltip('show');
  142. $('#theming-name').addClass('error');
  143. }
  144. return false;
  145. }
  146. $('#theming-name').keyup(function() {
  147. if (checkName()) {
  148. $('#theming-name').tooltip('hide');
  149. $('#theming-name').removeClass('error');
  150. }
  151. });
  152. $('#theming-name').change(function(e) {
  153. var el = $(this);
  154. });
  155. function onChange(e) {
  156. var el = $(this);
  157. var setting = el.parent().find('div[data-setting]').data('setting');
  158. var value = $(this).val();
  159. if(setting === 'color') {
  160. if (value.indexOf('#') !== 0) {
  161. value = '#' + value;
  162. }
  163. }
  164. if(setting === 'name') {
  165. if(checkName()){
  166. $.when(el.focusout()).then(function() {
  167. setThemingValue('name', value);
  168. });
  169. if (e.keyCode == 13) {
  170. setThemingValue('name', value);
  171. }
  172. }
  173. }
  174. $.when(el.focusout()).then(function() {
  175. setThemingValue(setting, value);
  176. });
  177. if (e.keyCode == 13) {
  178. setThemingValue(setting, value);
  179. }
  180. };
  181. $('#theming input[type="text"]').change(onChange);
  182. $('#theming input[type="url"]').change(onChange);
  183. $('.theme-undo').click(function (e) {
  184. var setting = $(this).data('setting');
  185. var $form = $(this).closest('form');
  186. var image = $form.data('image-key');
  187. startLoading();
  188. $('.theme-undo[data-setting=' + setting + ']').hide();
  189. $.post(
  190. OC.generateUrl('/apps/theming/ajax/undoChanges'), {'setting' : setting}
  191. ).done(function(response) {
  192. if (setting === 'color') {
  193. var colorPicker = document.getElementById('theming-color');
  194. colorPicker.style.backgroundColor = response.data.value;
  195. colorPicker.value = response.data.value.slice(1).toUpperCase();
  196. } else if (!image) {
  197. var input = document.getElementById('theming-'+setting);
  198. input.value = response.data.value;
  199. }
  200. preview(setting, response.data.value, response.data.serverCssUrl);
  201. });
  202. });
  203. $('.theme-remove-bg').click(function() {
  204. startLoading();
  205. $.post(
  206. OC.generateUrl('/apps/theming/ajax/updateStylesheet'), {'setting' : 'backgroundMime', 'value' : 'backgroundColor'}
  207. ).done(function(response) {
  208. preview('backgroundMime', 'backgroundColor', response.data.serverCssUrl);
  209. }).fail(function(response) {
  210. OC.msg.finishedSaving('#theming_settings_msg', response);
  211. $('#theming_settings_loading').hide();
  212. });
  213. });
  214. });