improving vaabd menu

2024-12-22 18:47:22 +03:30 · 2024-12-22 18:47:22 +03:30 · 36f618005b
commit 36f618005b
parent 10d363b4f5
10 changed files with 72 additions and 44 deletions
--- a/GanjooRazor/Pages/AudioClip.cshtml
+++ b/GanjooRazor/Pages/AudioClip.cshtml
@ -152,7 +152,7 @@
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/js/bk.js?version=63"></script>
        <script src="~/js/jplayersupport.js"></script>
-        <script src="~/js/vaabd.js?version=9"></script>
+        <script src="~/js/vaabd.js?version=10"></script>
        <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
        <script src="~/dist/add-on/jplayer.playlist.min.js"></script>
        <script>
--- a/GanjooRazor/Pages/FAQ.cshtml
+++ b/GanjooRazor/Pages/FAQ.cshtml
@ -115,7 +115,7 @@

        </div>

-        <script src="/js/vaabd.js?version=9"></script>
+        <script src="/js/vaabd.js?version=10"></script>

        @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
        {
--- a/GanjooRazor/Pages/Hashieha.cshtml
+++ b/GanjooRazor/Pages/Hashieha.cshtml
@ -202,7 +202,7 @@
        </div>


-        <script src="/js/vaabd.js?version=9"></script>
+        <script src="/js/vaabd.js?version=10"></script>

        @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
        {
--- a/GanjooRazor/Pages/Index.cshtml
+++ b/GanjooRazor/Pages/Index.cshtml
@ -102,7 +102,7 @@

 </head>
 <body>
-    <script src="/js/vaabd.js?version=9"></script>
+    <script src="/js/vaabd.js?version=10"></script>

    @if (Model.IsPoemPage)
    {
--- a/GanjooRazor/Pages/Quotes.cshtml
+++ b/GanjooRazor/Pages/Quotes.cshtml
@ -191,7 +191,7 @@

        </div>

-        <script src="/js/vaabd.js?version=9"></script>
+        <script src="/js/vaabd.js?version=10"></script>

        @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
        {
--- a/GanjooRazor/Pages/ReportRecitation.cshtml
+++ b/GanjooRazor/Pages/ReportRecitation.cshtml
@ -240,7 +240,7 @@

                <script src="~/js/bk.js?version=63"></script>
                <script src="~/js/jplayersupport.js"></script>
-                <script src="~/js/vaabd.js?version=9"></script>
+                <script src="~/js/vaabd.js?version=10"></script>
                <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
                <script src="~/dist/add-on/jplayer.playlist.min.js"></script>
                <script>
--- a/GanjooRazor/Pages/Search.cshtml
+++ b/GanjooRazor/Pages/Search.cshtml
@ -220,7 +220,7 @@
        </div>


-        <script src="/js/vaabd.js?version=9"></script>
+        <script src="/js/vaabd.js?version=10"></script>

        @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
        {
--- a/GanjooRazor/Pages/Simi.cshtml
+++ b/GanjooRazor/Pages/Simi.cshtml
@ -387,7 +387,7 @@
        </div>


-        <script src="/js/vaabd.js?version=9"></script>
+        <script src="/js/vaabd.js?version=10"></script>

        @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
        {
--- a/GanjooRazor/Pages/Tagged.cshtml
+++ b/GanjooRazor/Pages/Tagged.cshtml
@ -220,7 +220,7 @@
        </div>


-        <script src="/js/vaabd.js?version=9"></script>
+        <script src="/js/vaabd.js?version=10"></script>

        @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
        {
--- a/GanjooRazor/wwwroot/js/vaabd.js
+++ b/GanjooRazor/wwwroot/js/vaabd.js
@ -1,43 +1,62 @@
 // Create tooltip elements
-var $close = $('<a href="#" id="vaabx">x</a>').css({
-    cursor: "pointer",
-    color: "white",
-    padding: "0 10px",
-    lineHeight: '2.5em', // Set line-height to match the tooltip height
-    display: 'flex',      // Ensure it behaves like a flex item
-    justifyContent: 'center', // Center horizontally
-    alignItems: 'center'  // Center vertically
-});
-
 var $meaning = $('<a>لغتنامه</a>').css({
-    boxShadow: '10px 0 0 -9px rgba(255,255,255,0.2), -10px 0 0 -9px rgba(255,255,255,0.2)',
+    padding: '10px',
    display: 'flex',
    justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    textAlign: 'center',
 });

 var $abjad = $('<a>ابجد</a>').css({
+    padding: '10px',
    display: 'flex',
    justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    textAlign: 'center',
 });

 var $search = $('<a>🔍</a>').css({
+    padding: '10px',
    display: 'flex',
    justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    textAlign: 'center',
 });

 var $quran = $('<a>قرآن</a>').css({
+    padding: '10px',
    display: 'flex',
    justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    textAlign: 'center',
 });

 var $vazn = $('<a>وزن</a>').css({
+    padding: '10px',
    display: 'flex',
    justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    textAlign: 'center',
+});
+
+var $google = $('<a>گوگل</a>').css({
+    padding: '10px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    color: 'white',
+});
+
+var $close = $('<a href="#" id="vaabx">غیرفعال شود</a>').css({
+    cursor: "pointer",
+    color: "white",
+    padding: "10px",
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    borderTop: '1px solid rgba(255,255,255,0.2)', // Visual separator
 });

 // Tooltip container styling
@ -45,26 +64,29 @@ var $tooltip = $('<div>').addClass('tooltip').css({
    transform: 'scale(0)',
    transformOrigin: 'top',
    position: 'absolute',
-    height: '2.5em',
-    width: '16em',
    borderRadius: '10px',
    display: 'flex',
-    justifyContent: 'space-around',
-    alignItems: 'center',
+    flexDirection: 'column', // Vertical layout
    background: 'rgba(14,17,17,0.9)',
-    transition: 'transform 0.2s ease-out', // Add transition for scale effect
+    transition: 'transform 0.2s ease-out',
    zIndex: '2000',
-}).append($close, $meaning, $abjad, $quran, $search, $vazn);
+    maxWidth: '90%', // Responsive width for smaller screens
+    wordWrap: 'break-word',
+    padding: '5px',
+});
+
+// Append links and close button to tooltip
+$tooltip.append($meaning, $abjad, $quran, $search, $google, $vazn, $close);

 // Append tooltip to body
 $(document.body).append($tooltip);

 // Attach click event to the close button
 $close.on("click", function (event) {
-    event.preventDefault(); // Prevent default anchor behavior
-    alert('منو موقتاً غیرفعال شد.\r\nبرای فعالسازی مجدد دوباره صفحه را بارگذاری کنید.'); // Alert to indicate the click was registered
-    $tooltip.css({ transform: 'scale(0)' }); // Hide the tooltip
-    document.removeEventListener('selectionchange', vaabSelectionChanged); // Remove the selection change listener
+    event.preventDefault();
+    alert('منو موقتاً غیرفعال شد.\r\nبرای فعالسازی مجدد دوباره صفحه را بارگذاری کنید.');
+    $tooltip.css({ transform: 'scale(0)' });
+    document.removeEventListener('selectionchange', vaabSelectionChanged);
 });

 // Handle selection changes
@ -108,40 +130,46 @@ function vaabSelectionChanged() {
        .replaceAll("»", "")
        .replaceAll("ْ", "");

-    // Update tooltip links (same logic as before)
+    // Update tooltip links
    $meaning.attr({
        href: 'https://www.vajehyab.com/?q=' + encodeURI(text),
        title: 'جستجو در واژه‌یاب',
-        target: '_blank'
+        target: '_blank',
    });
    $abjad.attr({
        href: 'https://abjad.ganjoor.net/?q=' + encodeURI(text) + '&r=' + window.location.href,
        title: 'محاسبه ابجد معادل عبارت',
-        target: '_blank'
+        target: '_blank',
    });
    $search.attr({
        href: text.indexOf(' ') == -1 ? 'https://ganjoor.net/search?s=' + encodeURI(text) : 'https://ganjoor.net/search?s="' + encodeURI(text) + '"',
        title: 'جستجوی عبارت در گنجور',
-        target: '_blank'
+        target: '_blank',
    });
    $quran.attr({
        href: 'https://tanzil.ir/#search/quran/' + encodeURI(text),
        title: 'جستجوی عبارت در قرآن',
-        target: '_blank'
+        target: '_blank',
    });
    $vazn.attr({
        href: 'http://sorud.info/?Text=' + encodeURI(text),
        title: 'تعیین وزن عبارت',
-        target: '_blank'
+        target: '_blank',
+    });
+    $google.attr({
+        href: 'https://www.google.com/search?q=' + encodeURI(text),
+        title: 'جستجو در گپگل',
+        target: '_blank',
    });

    // Position tooltip near the selection
    var rect = sel.getRangeAt(0).getBoundingClientRect();
+    var tooltipWidth = $tooltip.outerWidth();
+
    $tooltip.css({
        transform: 'scale(1)',
-        top: rect.top + window.scrollY,
-        left: rect.right - $tooltip[0].getBoundingClientRect().width,
-        marginTop: '2em'
+        top: rect.bottom + window.scrollY + 10, // Place below the selection
+        left: rect.left + (rect.width / 2) - (tooltipWidth / 2), // Center tooltip horizontally
    });

    prevtext = text;