WordPress.org
Get WordPress

Plugin Directory

Changeset 3283852


Ignore:
Timestamp:
04/29/2025 07:21:29 AM (11 months ago)
Author:
vikral8
Message:

changed some features like dropdown css and some fixes in javascript

Location:
langly
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • langly/tags/1.0/langly.js

    r3281775 r3283852  
    3131  const safeLanguage = sanitizeInput(language);
    3232  const selectedLanguageEl = document.getElementById("selected-language");
     33 
    3334
    3435  if (selectedLanguageEl) {
    … …  
    3738  langlyTranslate(langPair);
    3839};
     40
     41
     42function toggleDropdown() {
     43  const menu = document.getElementById('customDropdownMenu');
     44  const arrow = document.getElementById('dropdown-arrow');
     45  menu.classList.toggle('show');
     46  arrow.style.transform = menu.classList.contains('show') ? 'rotate(-135deg)' : 'rotate(45deg)';
     47}
     48
     49document.addEventListener('click', function (e) {
     50  const dropdown = document.getElementById('languageDropdown');
     51  const menu = document.getElementById('customDropdownMenu');
     52  const arrow = document.getElementById('dropdown-arrow');
     53  if (!dropdown.contains(e.target)) {
     54      menu.classList.remove('show');
     55      arrow.style.transform = 'rotate(45deg)';
     56  }
     57});
     58

  • langly/tags/1.0/langly.php

    r3281775 r3283852  
    333333
    334334    <!-- Dropdown for language selection -->
    335     <div class="dropdown show">
    336         <span class="dropdown-toggle language-header" id="languageDropdown" data-toggle="dropdown" aria-haspopup="true"
    337             aria-expanded="false">
     335    <div class="custom-dropdown" id="languageDropdown">
     336        <span class="language-header" onclick="toggleDropdown()">
    338337            <span id="selected-language">English</span>
    339             <i id="dropdown-arrow" class="fas fa-angle-down"></i>
     338            <i id="dropdown-arrow" class="arrow"></i>
    340339        </span>
    341         <div class="dropdown-menu" aria-labelledby="languageDropdown">
     340        <div class="dropdown-menu" id="customDropdownMenu">
    342341            <?php foreach ($selected_languages as $code): ?>
    343342                <?php if (isset($all_languages[$code])): ?>

  • langly/tags/1.0/style.css

    r3281775 r3283852  
     1.custom-dropdown {
     2    position: relative;
     3    display: inline-block;
     4    font-family: sans-serif;
     5}
     6
     7.language-header {
     8    background-color: #ffffff;
     9    border: 1px solid #ccc;
     10    padding: 8px 12px;
     11    border-radius: 4px;
     12    display: flex;
     13    align-items: center;
     14    justify-content: space-between;
     15    cursor: pointer;
     16    min-width: 120px;
     17}
     18
    119.arrow {
    220    margin-left: 5px;
    321    border: solid #47565f;
    422    border-width: 0 2px 2px 0;
    5     padding: 2px;
     23    padding: 3px;
    624    display: inline-block;
    7     cursor: pointer;
     25    transform: rotate(45deg);
    826    transition: transform 0.2s;
    927}
    1028
    11 .dropdown{
    12     cursor: pointer;
     29.dropdown-menu {
     30    position: absolute;
     31    top: 100%;
     32    left: 0;
     33    background-color: #ffffff;
     34    border: 1px solid #ccc;
     35    border-radius: 4px;
     36    display: none;
     37    flex-direction: column;
     38    min-width: 100%;
     39    z-index: 1000;
     40    margin-top: 2px;
     41    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    1342}
    1443
    15 .dropdown-menu {
    16     text-transform: uppercase;
    17     margin-top: 0;
    18     padding: 9px;
    19     background-color: #EEEEEE;
    20     padding: 0px;
    21     cursor: pointer;
    22     border: none;
    23     min-width: 0%;
    24     transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
     44.dropdown-menu.show {
     45    display: flex;
    2546}
    2647
     48.dropdown-item {
     49    padding: 8px 12px;
     50    font-size: 14px;
     51    color: #212529;
     52    cursor: pointer;
     53    text-transform: uppercase;
     54    text-decoration: none;
     55}
    2756
    28 .dropdown-item {
    29     width: 100%;
    30     padding: 2px 19px 2px 10px;
    31     font-size: 14px;
    32     cursor: pointer;
    33     font-weight: 400;
    34     color: #212529;
    35     border: none;
     57.dropdown-item:hover {
     58    background-color: #dcdcdc;
    3659}
    3760

  • langly/trunk/langly.js

    r3281775 r3283852  
    3131  const safeLanguage = sanitizeInput(language);
    3232  const selectedLanguageEl = document.getElementById("selected-language");
     33 
    3334
    3435  if (selectedLanguageEl) {
    … …  
    3738  langlyTranslate(langPair);
    3839};
     40
     41
     42function toggleDropdown() {
     43  const menu = document.getElementById('customDropdownMenu');
     44  const arrow = document.getElementById('dropdown-arrow');
     45  menu.classList.toggle('show');
     46  arrow.style.transform = menu.classList.contains('show') ? 'rotate(-135deg)' : 'rotate(45deg)';
     47}
     48
     49document.addEventListener('click', function (e) {
     50  const dropdown = document.getElementById('languageDropdown');
     51  const menu = document.getElementById('customDropdownMenu');
     52  const arrow = document.getElementById('dropdown-arrow');
     53  if (!dropdown.contains(e.target)) {
     54      menu.classList.remove('show');
     55      arrow.style.transform = 'rotate(45deg)';
     56  }
     57});
     58

  • langly/trunk/langly.php

    r3281775 r3283852  
    333333
    334334    <!-- Dropdown for language selection -->
    335     <div class="dropdown show">
    336         <span class="dropdown-toggle language-header" id="languageDropdown" data-toggle="dropdown" aria-haspopup="true"
    337             aria-expanded="false">
     335    <div class="custom-dropdown" id="languageDropdown">
     336        <span class="language-header" onclick="toggleDropdown()">
    338337            <span id="selected-language">English</span>
    339             <i id="dropdown-arrow" class="fas fa-angle-down"></i>
     338            <i id="dropdown-arrow" class="arrow"></i>
    340339        </span>
    341         <div class="dropdown-menu" aria-labelledby="languageDropdown">
     340        <div class="dropdown-menu" id="customDropdownMenu">
    342341            <?php foreach ($selected_languages as $code): ?>
    343342                <?php if (isset($all_languages[$code])): ?>

  • langly/trunk/style.css

    r3281775 r3283852  
     1.custom-dropdown {
     2    position: relative;
     3    display: inline-block;
     4    font-family: sans-serif;
     5}
     6
     7.language-header {
     8    background-color: #ffffff;
     9    border: 1px solid #ccc;
     10    padding: 8px 12px;
     11    border-radius: 4px;
     12    display: flex;
     13    align-items: center;
     14    justify-content: space-between;
     15    cursor: pointer;
     16    min-width: 120px;
     17}
     18
    119.arrow {
    220    margin-left: 5px;
    321    border: solid #47565f;
    422    border-width: 0 2px 2px 0;
    5     padding: 2px;
     23    padding: 3px;
    624    display: inline-block;
    7     cursor: pointer;
     25    transform: rotate(45deg);
    826    transition: transform 0.2s;
    927}
    1028
    11 .dropdown{
    12     cursor: pointer;
     29.dropdown-menu {
     30    position: absolute;
     31    top: 100%;
     32    left: 0;
     33    background-color: #ffffff;
     34    border: 1px solid #ccc;
     35    border-radius: 4px;
     36    display: none;
     37    flex-direction: column;
     38    min-width: 100%;
     39    z-index: 1000;
     40    margin-top: 2px;
     41    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    1342}
    1443
    15 .dropdown-menu {
    16     text-transform: uppercase;
    17     margin-top: 0;
    18     padding: 9px;
    19     background-color: #EEEEEE;
    20     padding: 0px;
    21     cursor: pointer;
    22     border: none;
    23     min-width: 0%;
    24     transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
     44.dropdown-menu.show {
     45    display: flex;
    2546}
    2647
     48.dropdown-item {
     49    padding: 8px 12px;
     50    font-size: 14px;
     51    color: #212529;
     52    cursor: pointer;
     53    text-transform: uppercase;
     54    text-decoration: none;
     55}
    2756
    28 .dropdown-item {
    29     width: 100%;
    30     padding: 2px 19px 2px 10px;
    31     font-size: 14px;
    32     cursor: pointer;
    33     font-weight: 400;
    34     color: #212529;
    35     border: none;
     57.dropdown-item:hover {
     58    background-color: #dcdcdc;
    3659}
    3760
Note: See TracChangeset for help on using the changeset viewer.