fix(context menu): make ContextMenu show up on fullscreen

cwrc · May 26, 2020 · 23376ab · 23376ab
1 parent 186c75f
commit 23376ab
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git a/src/css/tagContextMenu.css b/src/css/tagContextMenu.css
@@ -2,6 +2,7 @@
     font-family: Lato,Arial,Helvetica,sans-serif;
     font-size: 14px;
     z-index: 5 !important;
+    overflow: visible !important;
 }
 
 .cwrc .context-menu-list {

diff --git a/src/js/layout/layoutManager.js b/src/js/layout/layoutManager.js
@@ -44,8 +44,10 @@ LayoutManager.prototype = {
         this.modulesLayout = config.modules || defaultModulesLayout;
 
         this.modules = [];
-
-        this.$container = $('<div id="'+this.w.getUniqueId('cwrc_')+'" class="cwrc cwrcWrapper"></div>').appendTo(config.container);
+
+        this.$containerid = this.w.getUniqueId('cwrc_');
+
+        this.$container = $(`<div id="${this.$containerid}" class="cwrc cwrcWrapper"></div>`).appendTo(config.container);
 
         /* // experimental iframe container
         this.$iframe = $('<iframe src="about:blank" style="height: 100%; width: 100%; border: 0;"></iframe>').appendTo(config.container);

diff --git a/src/js/tagContextMenu.js b/src/js/tagContextMenu.js
@@ -5,7 +5,8 @@ require('jquery-contextmenu');
 
 function TagContextMenu(writer) {
     this.w = writer;
-    this.selector = '#'+writer.containerId;
+    this.container = `#${writer.containerId}`;
+    this.selector = `#${this.w.layoutManager.$containerid}`; //`#${writer.containerId}`;
 
     // these properties are set in the show method
     this.tagId = null;
@@ -19,17 +20,16 @@ function TagContextMenu(writer) {
         trigger: 'none',
         build: function($trigger, event) {
             return {
-                appendTo: '#'+this.w.containerId,
+                appendTo: `#${this.w.layoutManager.$containerid}`,
                 className: 'tagContextMenu cwrc',
                 animation: {duration: 0, show: 'show', hide: 'hide'},
                 items: getItems.call(this),
                 callback: function(key, options, event) {
                     // general callback used for addTagDialog and changeTagDialog
-                    var $li = $(event.target).closest('li.context-menu-item');
-                    var action = $li.data('action');
-                    if (action === undefined) {
-                        return;
-                    }
+                    const $li = $(event.target).closest('li.context-menu-item');
+                    const action = $li.data('action');
+
+                    if (action === undefined) return;
 
                     this.w.editor.currentBookmark = this.w.editor.selection.getBookmark(1);
 
@@ -96,7 +96,7 @@ TagContextMenu.prototype = {
      * Destroy the tag contextmenu
      */
     destroy: function() {
-        $(this.selector).contextMenu('destroy');
+        $(this.container).contextMenu('destroy');
     }
 }
 

diff --git a/src/js/tinymceWrapper.js b/src/js/tinymceWrapper.js
@@ -40,8 +40,8 @@ const buttons1 = [
     'savebutton',
     'loadbutton',
     'logoutbutton',
-    // '|',
-    // 'fullscreen'
+    '|',
+    'fullscreen'
 ]
 
 function TinymceWrapper() {