debian-mirror-gitlab/app/assets/javascripts/zen_mode.js

100 lines
2.6 KiB
JavaScript
Raw Normal View History

2017-09-10 17:25:29 +05:30
/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, consistent-return, camelcase, comma-dangle, max-len, class-methods-use-this */
2017-08-17 22:00:37 +05:30
2016-09-29 09:46:39 +05:30
// Zen Mode (full screen) textarea
//
2016-09-13 17:45:13 +05:30
/*= provides zen_mode:enter */
/*= provides zen_mode:leave */
2017-08-17 22:00:37 +05:30
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2017-09-10 17:25:29 +05:30
import 'vendor/jquery.scrollTo';
import Dropzone from 'dropzone';
2018-03-17 18:26:18 +05:30
import Mousetrap from 'mousetrap';
2017-09-10 17:25:29 +05:30
import 'mousetrap/plugins/pause/mousetrap-pause';
2018-03-17 18:26:18 +05:30
Dropzone.autoDiscover = false;
2016-09-13 17:45:13 +05:30
2016-09-29 09:46:39 +05:30
//
// ### 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
//
2016-09-13 17:45:13 +05:30
2017-09-10 17:25:29 +05:30
export default class ZenMode {
constructor() {
this.active_backdrop = null;
this.active_textarea = null;
$(document).on('click', '.js-zen-enter', function(e) {
e.preventDefault();
return $(e.currentTarget).trigger('zen_mode:enter');
});
$(document).on('click', '.js-zen-leave', function(e) {
e.preventDefault();
return $(e.currentTarget).trigger('zen_mode:leave');
});
$(document).on('zen_mode:enter', (function(_this) {
return function(e) {
return _this.enter($(e.target).closest('.md-area').find('.zen-backdrop'));
};
})(this));
$(document).on('zen_mode:leave', (function(_this) {
return function(e) {
return _this.exit();
};
})(this));
$(document).on('keydown', function(e) {
// Esc
if (e.keyCode === 27) {
e.preventDefault();
return $(document).trigger('zen_mode:leave');
2016-09-13 17:45:13 +05:30
}
2017-09-10 17:25:29 +05:30
});
}
enter(backdrop) {
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');
2018-03-17 18:26:18 +05:30
this.active_textarea.focus();
2017-09-10 17:25:29 +05:30
}
2016-09-13 17:45:13 +05:30
2017-09-10 17:25:29 +05:30
exit() {
if (this.active_textarea) {
Mousetrap.unpause();
this.active_textarea.closest('.zen-backdrop').removeClass('fullscreen');
this.scrollTo(this.active_textarea);
this.active_textarea = null;
this.active_backdrop = null;
2018-03-17 18:26:18 +05:30
const $dropzone = $('.div-dropzone');
if ($dropzone && !$dropzone.hasClass('js-invalid-dropzone')) {
Dropzone.forElement('.div-dropzone').enable();
}
2017-09-10 17:25:29 +05:30
}
}
2016-09-13 17:45:13 +05:30
2017-09-10 17:25:29 +05:30
scrollTo(zen_area) {
return $.scrollTo(zen_area, 0, {
offset: -150
});
}
}