Fixed popup not showing

src/node/utils/toolbar.ts

@@ -2,7 +2,7 @@
 /**
  * The Toolbar Module creates and renders the toolbars and buttons
  */
-const _ = require('underscore');
+import {isString, reduce, each, isUndefined, map, first, last, extend, escape} from 'underscore';
 
 const removeItem = (array: string[], what: string) => {
     let ax;
@@ -21,7 +21,7 @@ const defaultButtonAttributes = (name: string, overrides?: boolean) => ({
 const tag = (name: string, attributes: AttributeObj, contents?: string) => {
     const aStr = tagAttributes(attributes);
 
-    if (_.isString(contents) && contents!.length > 0) {
+    if (isString(contents) && contents!.length > 0) {
         return `<${name}${aStr}>${contents}</${name}>`;
     } else {
         return `<${name}${aStr}></${name}>`;
@@ -34,14 +34,14 @@ type AttributeObj = {
 }
 
 const tagAttributes = (attributes: AttributeObj) => {
-    attributes = _.reduce(attributes || {}, (o: AttributeObj, val: string, name: string) => {
+    attributes = reduce(attributes || {}, (o: AttributeObj, val: string, name: string) => {
-        if (!_.isUndefined(val)) {
+        if (!isUndefined(val)) {
             o[name] = val;
         }
         return o;
     }, {});
 
-    return ` ${_.map(attributes, (val: string, name: string) => `${name}="${_.escape(val)}"`).join(' ')}`;
+    return ` ${map(attributes, (val: string, name: string) => `${name}="${escape(val)}"`).join(' ')}`;
 };
 
 type ButtonGroupType = {
@@ -58,7 +58,7 @@ class ButtonGroup {
 
     public static fromArray = function (array: string[]) {
         const btnGroup = new ButtonGroup();
-        _.each(array, (btnName: string) => {
+        each(array, (btnName: string) => {
             const button = Button.load(btnName) as Button
             btnGroup.addButton(button);
         });
@@ -70,18 +70,19 @@ class ButtonGroup {
         return this;
     }
 
-    render() {
+    render(): string {
         if (this.buttons && this.buttons.length === 1) {
             this.buttons[0].grouping = '';
         } else if (this.buttons && this.buttons.length > 1) {
-            _.first(this.buttons).grouping = 'grouped-left';
+            first(this.buttons)!.grouping = 'grouped-left';
-            _.last(this.buttons).grouping = 'grouped-right';
+            last(this.buttons)!.grouping = 'grouped-right';
-            _.each(this.buttons.slice(1, -1), (btn: Button) => {
+            each(this.buttons.slice(1, -1), (btn: Button) => {
                 btn.grouping = 'grouped-middle';
             });
         }
 
-        return _.map(this.buttons, (btn: ButtonGroup) => {
+        // @ts-ignore
+      return map(this.buttons, (btn: ButtonGroup) => {
             if (btn) return btn.render();
         }).join('\n');
     }
@@ -151,8 +152,8 @@ class SelectButton extends Button {
     select(attributes: AttributeObj) {
         const options: string[] = [];
 
-        _.each(this.options, (opt: AttributeSelect) => {
+        each(this.options, (opt: AttributeSelect) => {
-            const a = _.extend({
+            const a = extend({
                 value: opt.value,
             }, opt.attributes);
 
@@ -299,7 +300,7 @@ module.exports = {
             buttons[0].push('savedrevision');
         }
 
-        const groups = _.map(buttons, (group: string[]) => ButtonGroup.fromArray(group).render());
+        const groups = map(buttons, (group: string[]) => ButtonGroup.fromArray(group).render());
         return groups.join(this.separator());
     },
 };

src/static/js/ace2_inner.js

@@ -3188,10 +3188,10 @@ function Ace2Inner(editorInfo, cssManagers) {
   editorInfo.ace_getInInternationalComposition = () => inInternationalComposition;
 
   const bindTheEventHandlers = () => {
-    $(document).on('keydown', handleKeyEvent);
+    $(targetDoc).on('keydown', handleKeyEvent);
-    $(document).on('keypress', handleKeyEvent);
+    $(targetDoc).on('keypress', handleKeyEvent);
-    $(document).on('keyup', handleKeyEvent);
+    $(targetDoc).on('keyup', handleKeyEvent);
-    $(document).on('click', handleClick);
+    $(targetDoc).on('click', handleClick);
     // dropdowns on edit bar need to be closed on clicks on both pad inner and pad outer
     $(outerDoc).on('click', hideEditBarDropdowns);
 

src/static/js/pad_savedrevs.js

@@ -20,7 +20,7 @@ let pad;
 
 exports.saveNow = () => {
   pad.collabClient.sendMessage({type: 'SAVE_REVISION'});
-  $.gritter.add({
+  window.$.gritter.add({
     // (string | mandatory) the heading of the notification
     title: html10n.get('pad.savedrevs.marked'),
     // (string | mandatory) the text inside the notification

src/static/js/pad_utils.js

@@ -356,7 +356,6 @@ const padutils = {
 let globalExceptionHandler = null;
 padutils.setupGlobalExceptionHandler = () => {
   if (globalExceptionHandler == null) {
-    require('./vendors/gritter');
     globalExceptionHandler = (e) => {
       let type;
       let err;

src/static/js/vendors/gritter.js

@@ -42,8 +42,8 @@
 			return Gritter.add(params || {});
 		} catch(e) {
 
-			var err = 'Gritter Error: ' + e;
+      const err = 'Gritter Error: ' + e;
-			(typeof(console) != 'undefined' && console.error) ?
+      (typeof(console) != 'undefined' && console.error) ?
 				console.error(err, params) :
 				alert(err);
 
@@ -289,7 +289,7 @@
 		*/
 		_runSetup: function(){
 
-			for(opt in $.gritter.options){
+			for(let opt in $.gritter.options){
 				this[opt] = $.gritter.options[opt];
 			}
 			this._is_setup = 1;