🚀 go-pugleaf

W dniu 2018-02-21 o 11:50, konsul41@wp.pl pisze:

> działa w Chrome i IE tylko czy to jest prawidłowe

Slashowanie zagnieżdżonych apostrofów jest prawidłowe. Natomiast IMO 
pomysł na funkcję fatalny.

-- 
Pozdrawiam,
Marek

W dniu 21-02-2018 o 17:12, Marek S pisze:
> W dniu 2018-02-21 o 11:50, konsul41@wp.pl pisze:
> 
>> działa w Chrome i IE tylko czy to jest prawidłowe
> 
> Slashowanie zagnieżdżonych apostrofów jest prawidłowe. Natomiast IMO 
> pomysł na funkcję fatalny.
> 
W zasadzie :
Piszę "Applikację" SPA i nie ma sensu historia przeglądarki (wszystkie 
podstrony są ładowane dynamicznie do DIV, główny adres nie zmienia się).
Poszukuję pomysłu na coś w rodzaju historii na stronie.
w jednym z div mam dwa przyciski jeden w tył, a drugi w przód.
Jak w prosty sposób zrobić coś w rodzaju historii do której tylko 
nieliczne podstrony mogą dodawać "linki" gdzie można wrócić.

Miało by to działać w ten sposób
przyciski cofnij i dalej są zawsze widoczne, znajdują się w jednym z div 
innej gałęzi DOM o znanym id.
Na jednej z podstron klikamy w przycisk i on zapisuje "link" do historii 
gdzie użytkownik może wrócić, przycisk do tyłu "zna" link z historii i 
po jego kliknięciu wraca do linku w historii. Po skończonych operacjach 
na tej podstronie i zatwierdzeniu jej zmieniamy historię.

Przykład:
Serwis z listą kontrahentów. Klikam na kontrahenta i otwieram jego 
"stronę" Po lewej stronie mam przyciski menu po prawej zasadnicze dane 
kontrahenta. Klikam w menu edycja danych kontrahenta i ładuję do div 
podstronę edycji danych kontrahenta. I teraz jeżeli użytkownik pomylił 
się lub zmienił zdanie i nie chce edytować danych to może zamiast 
zatwierdzać dane przyciskiem zapisz kliknąć na przycisk cofnij i jest na 
"stronie" kontrahenta, może kliknąć w przycisk na przód i znowu będzie 
edytować dane kontrahenta. Jeżeli będąc na stronie kontrahenta kliknie 
jeszcze raz na cofnij to ma wrócić do listy kontrahentów.

Myślę zrobić to w magazynie lokalnym za pomocą JSON lub za pomocą 
jakiejś tablicy i jako pierwsze przechowywać "wskaźnik" na aktualny 
"link" i w miarę przechodzenia między podstronami dodawać linki i 
przesuwać wskaźnik, a przyciski dalej i cofnij będą pobierać linki z 
historii. W przypadku gdy nie będzie można z jakiegoś powodu iść do 
przodu to trzeba byłoby usunąć całą "gałąź" z historii.

Nie wiem czy to dobry pomysł i jak to zrobić. Raczkuję dopiero w 
Javascript.
A może można to lepiej zorganizować?

W dniu 2018-02-22 o 08:27, konsul41@wp.pl pisze:

> Poszukuję pomysłu na coś w rodzaju historii na stronie. w jednym z
> div mam dwa przyciski jeden w tył, a drugi w przód.

Ja tak w kwestii formalnej: dublowanie w ramach strony elementów
interfejsu przeglądarki to taki sobie pomysł. Wtedy domyślne przyciski /
gesty przestają działać.

Spróbuj może raczej,

1) podmieniając zawartość diva, podmieniać też aktualny hash w url strony:

https://www.w3schools.com/jsref/prop_loc_hash.asp
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_hash_set

2) dopisać funkcję ładującą właściwą zawartość diva przy zmianie
url/hasha z wykorzystaniem standardowych przycisków:

window.onhashchange = function() {
   // zmień zawartość diva
}

U mnie to się normalnie zapisuje w historii, ale gdybyś
chciał/potrzebował jednak w niej grzebać, patrz:
https://www.w3schools.com/jsref/met_his_back.asp
https://developer.mozilla.org/en-US/docs/Web/API/History_API

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

W dniu 2018-02-22 o 14:39, Freja Draco pisze:

> Spróbuj może raczej,

demonstrator na szybkiego:

-------------------------------------------
<!DOCTYPE html>
<html>
<body>

<script>
window.onhashchange = function() {
   var x = location.hash;
   if (x=="") x = "start";
   document.getElementById("zmienny").innerHTML = x;
}

function zmien() {
   location.hash = "costam";
}
</script>


<button onclick="zmien();">zmiana tresci</button>
<br><br>

<div id="zmienny" style="border:1px solid green;">start</div>

</body>
</html>
-------------------------------------------

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

W dniu 2018-02-22 o 08:27, konsul41@wp.pl pisze:

> Piszę "Applikację" SPA i nie ma sensu historia przeglądarki (wszystkie 
> podstrony są ładowane dynamicznie do DIV, główny adres nie zmienia się).+

Nie lepiej mieć wtedy iframe'a? Nie będzie kłopotu z URLami. To tak na 
marginesie bo poza wątkiem.

> Poszukuję pomysłu na coś w rodzaju historii na stronie.
> w jednym z div mam dwa przyciski jeden w tył, a drugi w przód.
> Jak w prosty sposób zrobić coś w rodzaju historii do której tylko 
> nieliczne podstrony mogą dodawać "linki" gdzie można wrócić.

 > (...) Nie wiem czy to dobry pomysł i jak to zrobić. Raczkuję dopiero w
 > Javascript.
 > A może można to lepiej zorganizować?

Ok, rozumiem. Tą pseudo-historię możesz trzymać gdzie chcesz - 
cookies/magazyn. To jest ok. Ja bym to zrobił zupełnie inaczej.

Po pierwsze pakowanie fragmentów HTML'a, kodu JS z nim powiązanego itp. 
jako kroków w historii to chory pomysł. Moim zdaniem krok historii 
powinien być obiektem np:

krok={url_powrotu:xxx, cecha1:xxx, cechaN:xxx ...}

"Cecha" to jakiś parametr jeśli w ogóle go potrzebujesz. Potem 
poszczególne kroki byłyby umieszczane w tablicy:

krkoki=[];
kroki.push(krok1);
kroki.push(krok2);

...i taki obiekt gdzieś tam, gdzie chcesz zapisywany i odczytywany. Zero 
HTMLa, zero jakiś dziwactw - tylko dane.

Po drugie.
Rysowanie historii w dokumencie HTML powinno odbywać się z poziomu JS w 
postaci odtwarzania kroków w/w tablicy i DYNAMICZNEGO kreowania 
poszczególnych składowych. Zapomnij o innerHTML. Np. jeśli krok ma 
wyglądać jako:

<section id="historia">
   <div class="krok"></div>
   <div class="krok"></div>
   <div class="krok"></div>
   ...
</section>

To użyj

document.createElement("div");

Przypisz klasę, która określi wygląd, użyj addEventListener("click") do 
uwrażliwienia na kliknięcie, przypisz obrazek do tła tego DIVa i/lub 
dodaj tekst do DIVa. Potem go appenduj do elementu "historia". I tak w 
pętli po wszystkich elementach historii za pomocą for...of.

Albo inaczej: przeczytaj najpierw jakiś podręcznik do programowania w 
JS. Przy czym taki, który jest w miarę świeży, najlepiej dotyczący 
ECMA6. Nie chodzi wyłącznie o zapoznanie się z referencjami JS ale 
zasadami posługiwania się tym językiem w kontekście DOM, aplikacji WWW. 
2-3 dni lektury z pewnością sporo rozjaśnią.

-- 
Pozdrawiam,
Marek

> Po pierwsze pakowanie fragmentów HTML'a, kodu JS z nim powiązanego itp. 
> jako kroków w historii to chory pomysł. 
W historii tylko linki

> Moim zdaniem krok historii powinien być obiektem np:

> 
> krok={url_powrotu:xxx, cecha1:xxx, cechaN:xxx ...}
> 
> "Cecha" to jakiś parametr jeśli w ogóle go potrzebujesz. Potem 
> poszczególne kroki byłyby umieszczane w tablicy:
> 
> krkoki=[];
> kroki.push(krok1);
> kroki.push(krok2);
> 
O czymś takim właśnie myslałem

> Albo inaczej: przeczytaj najpierw jakiś podręcznik do programowania w 
> JS. Przy czym taki, który jest w miarę świeży, najlepiej dotyczący 
> ECMA6. Nie chodzi wyłącznie o zapoznanie się z referencjami JS ale 
> zasadami posługiwania się tym językiem w kontekście DOM, aplikacji WWW. 
> 2-3 dni lektury z pewnością sporo rozjaśnią.
To zawsze warto.