From eea0ec3dc35bc8928249dc21ebd53b3eb22d3c4d Mon Sep 17 00:00:00 2001 From: andrigamerita <37557992+andrigamerita@users.noreply.github.com> Date: Tue, 12 Dec 2023 15:58:46 +0100 Subject: [PATCH] Add button to open context menu (#728) * Add button to open context menu In some contexts, it's hard or impossible to open the context menu of the emulator, which is required to access important secondary options such as quick states, screen recording, and software information. Primarily, it's apparently impossible to open the context menu on a mobile web browser, since a long press on the screen is, for good reason, not registered like a right mouse click is on desktop. This commit adds what I think is the ideal solution to the issue: a button on the menu bar/drawer that opens up the context menu, without cluttering it up with multiple options, just a single new one. * Update en locale (en.json, Translate.html) * Fix contextMenuButton dimensions * Set contextMenu to be centered when open via button --- data/emulator.js | 11 +++++++++++ data/emulator.min.js | 2 +- data/localization/Translate.html | 1 + data/localization/en.json | 1 + 4 files changed, 14 insertions(+), 1 deletion(-) diff --git a/data/emulator.js b/data/emulator.js index 5a7c3b5..25b566a 100644 --- a/data/emulator.js +++ b/data/emulator.js @@ -1788,6 +1788,16 @@ class EmulatorJS { } this.elements.menu.appendChild(volumeSettings); + + const contextMenuButton = addButton("Context Menu", '', () => { + if (this.elements.contextmenu.style.display == "none") { + this.elements.contextmenu.style.display = "block"; + this.elements.contextmenu.style.left = (getComputedStyle(this.elements.parent).width.split("px")[0]/2 - getComputedStyle(this.elements.contextmenu).width.split("px")[0]/2)+"px"; + this.elements.contextmenu.style.top = (getComputedStyle(this.elements.parent).height.split("px")[0]/2 - getComputedStyle(this.elements.contextmenu).height.split("px")[0]/2)+"px"; + } else { + this.elements.contextmenu.style.display = "none"; + } + }); this.settingParent = this.createElement("div"); this.settingsMenuOpen = false; @@ -1893,6 +1903,7 @@ class EmulatorJS { playPause: [pauseButton, playButton], restart: [restartButton], settings: [settingButton], + contextMenu: [contextMenuButton], fullscreen: [enter, exit], saveState: [saveState], loadState: [loadState], diff --git a/data/emulator.min.js b/data/emulator.min.js index 56d3633..f927b85 100644 --- a/data/emulator.min.js +++ b/data/emulator.min.js @@ -1 +1 @@ -!function(){var e,t;e=window,t=function(){return n=[function(e,t,n){"use strict";n.r(t);function b(e,t){var n=t.x-e.x,t=t.y-e.y;return Math.sqrt(n*n+t*t)}function _(e){return e*(Math.PI/180)}function o(e){f.has(e)&&clearTimeout(f.get(e)),f.set(e,setTimeout(e,100))}function a(e,t,n){for(var i,o=t.split(/[ ,]+/g),a=0;athis.options.threshold){var r,l={};for(r in this.direction)this.direction.hasOwnProperty(r)&&(l[r]=this.direction[r]);var c={};for(r in this.direction={x:n,y:i,angle:t},e.direction=this.direction,l)l[r]===this.direction[r]&&(c[r]=!0);if(c.x&&c.y&&c.angle)return e;c.x&&c.y||this.trigger("plain",e),c.x||this.trigger("plain:"+n,e),c.y||this.trigger("plain:"+i,e),c.angle||this.trigger("dir dir:"+t,e)}else this.resetDirection();return e};var x=w;function E(e,t){this.nipples=[],this.idles=[],this.actives=[],this.ids=[],this.pressureIntervals={},this.manager=e,this.id=E.id,E.id+=1,this.defaults={zone:document.body,multitouch:!1,maxNumberOfNipples:10,mode:"dynamic",position:{top:0,left:0},catchDistance:200,size:100,threshold:.1,color:"white",fadeTime:250,dataOnly:!1,restJoystick:!0,restOpacity:.5,lockX:!1,lockY:!1,shape:"circle",dynamicPage:!1,follow:!1},this.config(t),"static"!==this.options.mode&&"semi"!==this.options.mode||(this.options.multitouch=!1),this.options.multitouch||(this.options.maxNumberOfNipples=1);e=getComputedStyle(this.options.zone.parentElement);return e&&"flex"===e.display&&(this.parentIsFlex=!0),this.updateBox(),this.prepareNipples(),this.bindings(),this.begin(),this.nipples}E.prototype=new m,(E.constructor=E).id=0,E.prototype.prepareNipples=function(){var i=this.nipples;i.on=this.on.bind(this),i.off=this.off.bind(this),i.options=this.options,i.destroy=this.destroy.bind(this),i.ids=this.ids,i.id=this.id,i.processOnMove=this.processOnMove.bind(this),i.processOnEnd=this.processOnEnd.bind(this),i.get=function(e){if(void 0===e)return i[0];for(var t=0,n=i.length;t