mirror of
				https://github.com/zulip/zulip.git
				synced 2025-10-31 03:53:50 +00:00 
			
		
		
		
	This commit was originally automatically generated using `tools/lint --only=eslint --fix`. It was then modified by tabbott to contain only changes to a set of files that are unlikely to result in significant merge conflicts with any open pull request, excluding about 20 files. His plan is to merge the remaining changes with more precise care, potentially involving merging parts of conflicting pull requests before running the `eslint --fix` operation. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
		
			
				
	
	
		
			140 lines
		
	
	
		
			3.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			140 lines
		
	
	
		
			3.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| const render_feedback_container = require('../templates/feedback_container.hbs');
 | |
| 
 | |
| /*
 | |
| 
 | |
| This code lets you show something like this:
 | |
| 
 | |
|     +-----
 | |
|     | TOPIC MUTES [undo] [x]
 | |
|     |
 | |
|     | You muted stream Foo, topic Bar.
 | |
|     +-----
 | |
| 
 | |
| And then you configure the undo behavior, and
 | |
| everything else is controlled by the widget.
 | |
| 
 | |
| Codewise it's a singleton widget that controls the DOM inside
 | |
| #feedback_container, which gets served up by server.
 | |
| 
 | |
| */
 | |
| 
 | |
| 
 | |
| const meta = {
 | |
|     hide_me_time: null,
 | |
|     alert_hover_state: false,
 | |
|     $container: null,
 | |
|     opened: false,
 | |
| };
 | |
| 
 | |
| const animate = {
 | |
|     maybe_close: function () {
 | |
|         if (!meta.opened) {
 | |
|             return;
 | |
|         }
 | |
| 
 | |
|         if (meta.hide_me_time < new Date().getTime() && !meta.alert_hover_state) {
 | |
|             animate.fadeOut();
 | |
|             return;
 | |
|         }
 | |
| 
 | |
|         setTimeout(animate.maybe_close, 100);
 | |
|     },
 | |
|     fadeOut: function () {
 | |
|         if (!meta.opened) {
 | |
|             return;
 | |
|         }
 | |
| 
 | |
|         if (meta.$container) {
 | |
|             meta.$container.fadeOut(500).removeClass("show");
 | |
|             meta.opened = false;
 | |
|             meta.alert_hover_state = false;
 | |
|         }
 | |
|     },
 | |
|     fadeIn: function () {
 | |
|         if (meta.opened) {
 | |
|             return;
 | |
|         }
 | |
| 
 | |
|         if (meta.$container) {
 | |
|             meta.$container.fadeIn(500).addClass("show");
 | |
|             meta.opened = true;
 | |
|             setTimeout(animate.maybe_close, 100);
 | |
|         }
 | |
|     },
 | |
| };
 | |
| 
 | |
| function set_up_handlers() {
 | |
|     if (meta.handlers_set) {
 | |
|         return;
 | |
|     }
 | |
| 
 | |
|     meta.handlers_set = true;
 | |
| 
 | |
|     // if the user mouses over the notification, don't hide it.
 | |
|     meta.$container.mouseenter(function () {
 | |
|         if (!meta.opened) {
 | |
|             return;
 | |
|         }
 | |
| 
 | |
|         meta.alert_hover_state = true;
 | |
|     });
 | |
| 
 | |
|     // once the user's mouse leaves the notification, restart the countdown.
 | |
|     meta.$container.mouseleave(function () {
 | |
|         if (!meta.opened) {
 | |
|             return;
 | |
|         }
 | |
| 
 | |
|         meta.alert_hover_state = false;
 | |
|         // add at least 2000ms but if more than that exists just keep the
 | |
|         // current amount.
 | |
|         meta.hide_me_time = Math.max(meta.hide_me_time, new Date().getTime() + 2000);
 | |
|     });
 | |
| 
 | |
|     meta.$container.on('click', '.exit-me', function () {
 | |
|         animate.fadeOut();
 | |
|     });
 | |
| 
 | |
|     meta.$container.on('click', '.feedback_undo', function () {
 | |
|         if (meta.undo) {
 | |
|             meta.undo();
 | |
|         }
 | |
|         animate.fadeOut();
 | |
|     });
 | |
| }
 | |
| 
 | |
| exports.is_open = function () {
 | |
|     return meta.opened;
 | |
| };
 | |
| 
 | |
| exports.dismiss = function () {
 | |
|     animate.fadeOut();
 | |
| };
 | |
| 
 | |
| exports.show = function (opts) {
 | |
|     if (!opts.populate) {
 | |
|         blueslip.error('programmer needs to supply populate callback.');
 | |
|         return;
 | |
|     }
 | |
| 
 | |
|     meta.$container = $('#feedback_container');
 | |
| 
 | |
|     const html = render_feedback_container();
 | |
|     meta.$container.html(html);
 | |
| 
 | |
|     set_up_handlers();
 | |
| 
 | |
|     meta.undo = opts.on_undo;
 | |
| 
 | |
|     // add a four second delay before closing up.
 | |
|     meta.hide_me_time = new Date().getTime() + 4000;
 | |
| 
 | |
|     meta.$container.find('.feedback_title').text(opts.title_text);
 | |
|     meta.$container.find('.feedback_undo').text(opts.undo_button_text);
 | |
|     opts.populate(meta.$container.find('.feedback_content'));
 | |
| 
 | |
|     animate.fadeIn();
 | |
| };
 | |
| 
 | |
| window.feedback_widget = exports;
 |