2020-12-30 09:10:10 +00:00
|
|
|
/* eslint-disable consistent-return */
|
2016-12-14 05:26:26 +00:00
|
|
|
|
2016-07-27 03:32:10 +00:00
|
|
|
// Zen Mode (full screen) textarea
|
|
|
|
//
|
2016-07-24 20:45:11 +00:00
|
|
|
/*= provides zen_mode:enter */
|
|
|
|
/*= provides zen_mode:leave */
|
2016-11-03 21:38:54 +00:00
|
|
|
|
2017-05-16 20:52:40 +00:00
|
|
|
import Dropzone from 'dropzone';
|
2021-02-14 18:09:20 +00:00
|
|
|
import $ from 'jquery';
|
2017-12-19 10:12:32 +00:00
|
|
|
import Mousetrap from 'mousetrap';
|
2017-05-16 20:52:40 +00:00
|
|
|
import 'mousetrap/plugins/pause/mousetrap-pause';
|
2020-12-30 09:10:10 +00:00
|
|
|
import { scrollToElement } from '~/lib/utils/common_utils';
|
2017-05-16 20:52:40 +00:00
|
|
|
|
2017-12-19 10:12:32 +00:00
|
|
|
Dropzone.autoDiscover = false;
|
|
|
|
|
2016-07-27 03:32:10 +00:00
|
|
|
//
|
|
|
|
// ### Events
|
|
|
|
//
|
|
|
|
// `zen_mode:enter`
|
|
|
|
//
|
|
|
|
// Fired when the "Edit in fullscreen" link is clicked.
|
|
|
|
//
|
|
|
|
// **Synchronicity** Sync
|
|
|
|
// **Bubbles** Yes
|
|
|
|
// **Cancelable** No
|
|
|
|
// **Target** a.js-zen-enter
|
|
|
|
//
|
|
|
|
// `zen_mode:leave`
|
|
|
|
//
|
|
|
|
// Fired when the "Leave Fullscreen" link is clicked.
|
|
|
|
//
|
|
|
|
// **Synchronicity** Sync
|
|
|
|
// **Bubbles** Yes
|
|
|
|
// **Cancelable** No
|
|
|
|
// **Target** a.js-zen-leave
|
|
|
|
//
|
2017-07-05 17:20:41 +00:00
|
|
|
|
2017-06-30 21:37:31 +00:00
|
|
|
export default class ZenMode {
|
2017-06-30 21:27:31 +00:00
|
|
|
constructor() {
|
2017-07-05 17:20:41 +00:00
|
|
|
this.active_backdrop = null;
|
|
|
|
this.active_textarea = null;
|
2020-12-23 21:10:24 +00:00
|
|
|
$(document).on('click', '.js-zen-enter', (e) => {
|
2017-07-05 17:20:41 +00:00
|
|
|
e.preventDefault();
|
|
|
|
return $(e.currentTarget).trigger('zen_mode:enter');
|
|
|
|
});
|
2020-12-23 21:10:24 +00:00
|
|
|
$(document).on('click', '.js-zen-leave', (e) => {
|
2017-07-05 17:20:41 +00:00
|
|
|
e.preventDefault();
|
|
|
|
return $(e.currentTarget).trigger('zen_mode:leave');
|
|
|
|
});
|
2020-12-23 21:10:24 +00:00
|
|
|
$(document).on('zen_mode:enter', (e) => {
|
2020-12-23 12:10:26 +00:00
|
|
|
this.enter($(e.target).closest('.md-area').find('.zen-backdrop'));
|
2019-11-04 15:07:36 +00:00
|
|
|
});
|
|
|
|
$(document).on('zen_mode:leave', () => {
|
|
|
|
this.exit();
|
|
|
|
});
|
2020-12-23 21:10:24 +00:00
|
|
|
$(document).on('keydown', (e) => {
|
2017-07-05 17:20:41 +00:00
|
|
|
// Esc
|
|
|
|
if (e.keyCode === 27) {
|
2016-07-24 20:45:11 +00:00
|
|
|
e.preventDefault();
|
2017-07-05 17:20:41 +00:00
|
|
|
return $(document).trigger('zen_mode:leave');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2017-06-30 21:27:31 +00:00
|
|
|
enter(backdrop) {
|
2017-07-05 17:20:41 +00:00
|
|
|
Mousetrap.pause();
|
|
|
|
this.active_backdrop = $(backdrop);
|
|
|
|
this.active_backdrop.addClass('fullscreen');
|
|
|
|
this.active_textarea = this.active_backdrop.find('textarea');
|
|
|
|
// Prevent a user-resized textarea from persisting to fullscreen
|
|
|
|
this.active_textarea.removeAttr('style');
|
2017-11-22 23:20:23 +00:00
|
|
|
this.active_textarea.focus();
|
2017-06-30 21:27:31 +00:00
|
|
|
}
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2017-06-30 21:27:31 +00:00
|
|
|
exit() {
|
2017-07-05 17:20:41 +00:00
|
|
|
if (this.active_textarea) {
|
|
|
|
Mousetrap.unpause();
|
|
|
|
this.active_textarea.closest('.zen-backdrop').removeClass('fullscreen');
|
2020-12-30 09:10:10 +00:00
|
|
|
scrollToElement(this.active_textarea, { duration: 0, offset: -100 });
|
2017-07-05 17:20:41 +00:00
|
|
|
this.active_textarea = null;
|
|
|
|
this.active_backdrop = null;
|
2017-11-22 23:20:23 +00:00
|
|
|
|
|
|
|
const $dropzone = $('.div-dropzone');
|
|
|
|
if ($dropzone && !$dropzone.hasClass('js-invalid-dropzone')) {
|
|
|
|
Dropzone.forElement('.div-dropzone').enable();
|
|
|
|
}
|
2017-07-05 17:20:41 +00:00
|
|
|
}
|
2017-06-30 21:27:31 +00:00
|
|
|
}
|
|
|
|
}
|