Rotacja tablicy w JavaScript

pytanie zadane 20 czerwca 2021 w JavaScript przez xjafajx Użytkownik (740 p.)
edycja 20 czerwca 2021 przez xjafajx

Cześć,

Mam problem z js.

Chcę zaimplementować responsywne menu. Mam na myśli to, że kiedy jestem na stronie startowej, strona startowa jest na pierwszym miejscu na liście. Jeśli jestem na stronie kontaktowej, kontakt jest pierwszy na liście.

Menu to okrąg z poruszającymi się po nim ikonami. Pierwszy element na liście znajduje się na dole koła.

Podsumowując, muszę zmienić dynamicznie listę w skrypcie js w zależności od podstrony, na której się znajduję.

Wiem, że mogę utworzyć kilka plików js i to zadziała, ale chcę spróbować w js lub HTML.

Dzięki za wszelką pomoc

Link do podglądu:stackoverflow.com/questions/68041721/responsive-menu-in-javascript

Kod źródłowy znajduje się na stackoverflow.

Dokładniej mam problem jak przerobić te listę var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"]; Aby na każdej stronie menu zaczynało się odpowiednio do strony czyli na stronie index.html menu zaczyna się od Start, na stronie First.html menu zaczyna się od first na stronie contact.html menu zaczyna się od Contact itd. Div w HTML <div class="name_container"> <p class="pn">Start</p> <p class="more">READ MORE</p> </div>

Proszę o pomoc. Dziękuję za wszelką pomoc

3 odpowiedzi

odpowiedź 20 czerwca 2021 przez tangarr Mędrzec (154,780 p.)

Wystarczy, żebyś zdejmował pierwszy element tablicy i przerzucał go na koniec tak długo aż nie będziesz miał wymaganego elementu na pierwszym miejscu.

var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"]

while (planet[0] != 'Third') {
    let head = planet.shift()
    planet.push(head)
}

komentarz 20 czerwca 2021 przez xjafajx Użytkownik (740 p.)

Dziękuję za pomoc kod jest pożyteczny ale miałbym jeszcze do niego kilka pytań.

1. Jak widać każdy element tablicy to osobna podstrona jak zatem zaimplementować aby sam mi wykrywał na jakiej jestem stronie i wyświetlał odpowiednią nazwę?

            		<div class="name_container">
              			<p class="pn">Start</p>
              			<p class="more">READ MORE</p>
            		</div>

W HTML wpisuję nazwę aktualnie wyświetlanej strony niestety na każdej stronie wpisuję osobno nazwę. Chciałbym mieć jedno menu w pliku base,html czyli takiego template (szablon) w którym będzie menu i stopka.

2. Zatem jak zaimplementować kod abym w szablonie mając jedno menu i odwołując się do niego zauważył na jakiej jestem stronie?

Z góry dziękuję za wszelką pomoc

1	komentarz 20 czerwca 2021 przez tangarr Mędrzec (154,780 p.) Aby dowiedzieć się która strona jest aktualnie wyświetlana możesz użyć obiektu location i odczytać z niego pole pathname https://www.w3schools.com/jsref/prop_loc_pathname.asp

komentarz 21 czerwca 2021 przez VBService Ekspert (252,740 p.)
edycja 21 czerwca 2021 przez VBService

Przykład dla location.pathname

<!DOCTYPE html>
<html>
  <body>
    <button onclick="myFunction()">Pokaż</button>

    <pre id="show_pathname"></pre>

    <script>
      function myFunction() {
        const show = document.getElementById('show_pathname');
        
        show.textContent = location.href + '\n';
        show.textContent += 'location.pathname: ' + location.pathname + '\n';
  
        let x = location.pathname.split('/');
        show.textContent += x[x.length - 1] + '\n';
  
        x = x[x.length - 1].split('.');
        show.textContent += x[0] + '\n';
        show.textContent += x[1];
      }
    </script>
  </body>
</html>

odpowiedź 20 czerwca 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

const planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];

const first = "First";
planet.sort(function(x,y){ return x === first ? -1 : y === first ? 1 : 0; });

console.log(planet);

komentarz 21 czerwca 2021 przez Wiciorny Ekspert (269,710 p.)

jak dobierane tu są wartości ? (x,y) w kolejnych krokach ? Szczególnie dla pozostałych elementów gdy x === first. to przestawienie idzie x+1 y+1?.

odpowiedź 21 czerwca 2021 przez VBService Ekspert (252,740 p.)
edycja 22 czerwca 2021 przez VBService

Nazwę strony możesz też pobierać z document.title, jak masz ustawione w kodzie html <title>

<!DOCTYPE html>
<html>
  <head>
    . . .
    <title>NAZWA STRONY</title>

    . . .
  </head>

  . . .
</html>

Moja propozycja na rotowanie danych

const planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];

planet_name = 'First';
console.log('Wybrany: ' + planet_name, rotateArray(planet , planet_name));
planet_name = 'Contact';
console.log('Wybrany: ' + planet_name, rotateArray(planet , planet_name));

function rotateArray(arr, choice) {
    const from_index = arr.indexOf(choice);
    return [].concat(arr.slice(from_index, arr.length), arr.slice(0, from_index)); 
}

Zestawienie podanych propozycji, wybór należy do Ciebie

const planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];
console.info('Orginalna: ', planet);
 
/* kopie do testów */
let test1 = [...planet];
let test2 = [...planet];
let test3 = [...planet];
 
console.warn('Wersja: rotateArray_v1');
let planet_name = 'First';
console.log('Wybrany: ' + planet_name, rotateArray_v1(test1, planet_name));
planet_name = 'Contact';
console.log('Wybrany: ' + planet_name, rotateArray_v1(test1, planet_name));
 
console.warn('Wersja: rotateArray_v2');
planet_name = 'First';
test2 = rotateArray_v2(test2, planet_name);
console.log('Wybrany: ' + planet_name, test2);
planet_name = 'Contact';
test2 = rotateArray_v2(test2, planet_name);
console.log('Wybrany: ' + planet_name, test2);
 
console.warn('Wersja: rotateArray_v3');
planet_name = 'First';
test3 = rotateArray_v3(test3, planet_name);
console.log('Wybrany: ' + planet_name, test3);
planet_name = 'Contact';
test3 = rotateArray_v3(test3, planet_name);
console.log('Wybrany: ' + planet_name, test3);
 
function rotateArray_v1(arr, choice) {
  return arr.sort(function(x, y) { return x === choice ? -1 : y === choice ? 1 : 0; });
}
 
function rotateArray_v2(arr, choice) {
  while (arr[0] != choice) arr.push(arr.shift());
  return arr;
}
 
function rotateArray_v3(arr, choice) {
  const from_index = arr.indexOf(choice);
  return [].concat(arr.slice(from_index, arr.length), arr.slice(0, from_index)); 
}

Demonstracja z użyciem document.title

<!DOCTYPE html>
<html>
  <head>
    <title>Contact</title>
  </head>
  <body>

    <div class="name_container">
      <p class="pn"></p>
      <p class="more">READ MORE</p>
    </div>

    <script>
      const planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];
      let planet_menu = [];

      /* symulacja odczytania <title> na potrzeby codepen-a */
      document.title = 'Contact';

      planet_menu = rotateArray(planet, document.title);
      document.querySelector('.pn').textContent = planet_menu[0];
      console.log(planet_menu);

      function rotateArray(arr, choice) {
        if (arr.indexOf(choice) > -1) { // lub if (arr.includes(choice))
          const from_index = arr.indexOf(choice);
          return [].concat(arr.slice(from_index, arr.length), arr.slice(0, from_index));
        }   
        return arr;
      }     
    </script>
  </body>
</html>