From e82612b21f7eeaa266dc34b00f708d447b50d0a0 Mon Sep 17 00:00:00 2001 From: Salty kheera <142778969+saltykheera@users.noreply.github.com> Date: Fri, 9 Aug 2024 03:01:11 +0530 Subject: [PATCH] Resolves Bubble on selection positioning #33 (#118) * Resolves Bubble on selection positioning #33 --- content_scripts/signit.js | 21 +++++++++++++------- popup/popup.js | 41 +++++++++++++++++++++++++++++++++++++-- sw.js | 15 +++++++++++++- 3 files changed, 67 insertions(+), 10 deletions(-) diff --git a/content_scripts/signit.js b/content_scripts/signit.js index d1d76ac..a12aeb0 100644 --- a/content_scripts/signit.js +++ b/content_scripts/signit.js @@ -25,7 +25,7 @@ } return text.trim(); } - + function getSelectionCoords() { var rect, x = 0, @@ -46,11 +46,16 @@ return { x: x, y: y, width: width, height: height }; } - var selectionToHintIconCoords = function (coords,shiftX,shiftY){ + var selectionToHintIconCoords = function (coords,shiftX,shiftY,positionData){ console.log(coords); + console.log(positionData); const iconX = coords.x + coords.width + shiftX; - const iconY = coords.y - shiftY; - return { x: iconX, y: iconY } + const iconY = coords.y - shiftY ; + var HintShift=0 + if(positionData=='bottom'){ + HintShift=32 + } + return { x: iconX, y: iconY + HintShift } } /* *************************************************************** */ @@ -76,15 +81,16 @@ async function toggleHintIcon() { var isActive = Object.values( await browser.storage.local.get( 'hinticon' ) )[0] + var positiondata= await browser.storage.local.get('position') var selection = getSelectionText(); $anchorHintIcon = $(".signit-hint-icon"); if(isActive && selection && selection.toString().trim() != '') { // Update title, position, display $anchorHintIcon.attr("title", `Rechercher "${selection}"`); $anchorHintIcon.attr("text", selection); - + console.log('Function toggle Hint icon executed',positiondata.position); var selectionCoords = getSelectionCoords(), - hintCoords = selectionToHintIconCoords(selectionCoords,0,25); + hintCoords = selectionToHintIconCoords(selectionCoords,0,25,positiondata.position); repositionElement($anchorHintIcon,hintCoords); $anchorHintIcon.show(); @@ -186,7 +192,7 @@ } var resizeElement = function ($selector, coords ){ - $selector.css( 'width', coords.width ); + $selector.css( 'width', coords.width ); $selector.css( 'height', coords.height ); } // SignIt modal width depends on number of active panels @@ -218,6 +224,7 @@ // initialising modal everytime not only when popup is undefined , // by this we won't have to reload the web page everytime initModalUI(); + var coords = getSelectionCoords(); repositionElement($anchorModal,coords); resizeElement($anchorModal,coords); diff --git a/popup/popup.js b/popup/popup.js index 40ab47f..e295973 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -232,6 +232,31 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') help: await banana.i18n("si-popup-settings-uilanguage-help"), //helpInline: true } ); + // Position dropdown + // Positions Data + positionItems = [ + new OO.ui.MenuOptionWidget({ + data: 'top', + label:"▲" + }), + new OO.ui.MenuOptionWidget({ + data: 'bottom', + label: "▼" + }) +]; + + // Hint-icon layout + positionDropdown = new OO.ui.DropdownWidget({ + label: "Hint icon Position", + menu: { items: positionItems }, + + } ); + positionLayout = new OO.ui.FieldLayout( positionDropdown, { + label: "Position", + align: 'top', + help: "Choose Hint icon Position", + //helpInline: true + } ); // History-logs length historyWidget = new OO.ui.NumberInputWidget( { @@ -306,6 +331,17 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') // Select menus signLanguageDropdown.getMenu().selectItemByData( _backgroundPage.params.signLanguage ); uiLanguageDropdown.getMenu().selectItemByData( _backgroundPage.params.uiLanguage ); + positionDropdown.getMenu().on('choose', (item) => { + const position = item.getData(); + sendMessageUp("storeHintIconPosition", position); + console.log('position', position) + }); + + async function sendMessageUp(msg, argument) { + console.log('here in sendMessageUp', msg, argument) + const response = await browser.runtime.sendMessage({ command: msg, argument }); + if (response !== undefined) return response; + } // Toogle buttons historyWidget.setValue( _backgroundPage.params.historylimit ); wpintegrationWidget.setValue( _backgroundPage.params.wpintegration ); @@ -316,7 +352,7 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') // Tri-buttons : selectItemByData or setData choosepanelsWidget.setData( _backgroundPage.params.choosepanels ); choosepanelsWidget.selectItemByData( _backgroundPage.params.choosepanels ); - + // Changes events signLanguageDropdown.getMenu().on( 'choose', changeSignLanguage ); uiLanguageDropdown.getMenu().on( 'choose', changeUiLanguage ); @@ -345,7 +381,8 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') .append( twospeedLayout.$element ) .append( hinticonLayout.$element ) .append( coloredwordsLayout.$element ) - .append( choosepanelsLayout.$element ); + .append( choosepanelsLayout.$element ) + .append( positionLayout.$element ) }; /* *********************************************************** */ diff --git a/sw.js b/sw.js index a71ac8d..a7e9dca 100644 --- a/sw.js +++ b/sw.js @@ -83,8 +83,9 @@ WHERE { hinticon: true, coloredwords: true, choosepanels: "both", // issues/36 + position:'top', }; - + /* *************************************************************** */ /* i18n context ************************************************** */ // List of UI languages with translations on github via translatewiki @@ -553,6 +554,10 @@ async function setState(value) { records = await getAllRecords(newLang); await storeParam("signLanguage", newLang); // localStorage save } + async function changePosition(newPosition) { + await storeParam('position',newPosition); // localStorage save + console.log("changePosition executed") + } // Given language's Qid, reload available translations async function changeUiLanguage(newLang) { @@ -735,6 +740,13 @@ async function setState(value) { else if (message.command === "changeUiLanguage") { await changeUiLanguage(message.argument); } + else if (message.command==='storeHintIconPosition'){ + const position = message.argument; + // Store the position in localStorage + console.log('Hint icon position stored:', position); + storeParam('position',position) + console.log("done") + } }); /* *************************************************************** */ @@ -753,6 +765,7 @@ async function setState(value) { await getStoredParam("hinticon"); await getStoredParam("coloredwords"); await getStoredParam("choosepanels"); + await getStoredParam("position"); let signLanguage = await getStoredParam("signLanguage"); signLanguages = await getSignLanguagesWithVideos();