Resolves Bubble on selection positioning #33 (#118)

* Resolves Bubble on selection positioning #33
lingua-libre · Aug 8, 2024 · e82612b · e82612b
1 parent f2c27f1
commit e82612b
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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();