Luxter [HTML/CSS/JS/PHP)

Tutaj znajdziesz warsztaty poszczególnych projektantów forumowych.
ODPOWIEDZ ]
Awatar użytkownika

 Luxter#4127

#20799 28 cze 2016, 19:01

Oferuję pisanie skryptów w wyżej wymienionych technologiach i nie tylko. Zastrzegam, że wykonuję tylko niewielkie/średnie zlecenia (nie będę pisał całych rozszerzeń, systemów itp.) lecz bardziej jakieś krótkie skrypty, które po prostu ułatwiają życie na forum. Więc jeśli masz jakiś pomysł na techniczną rzecz, a nie potrafisz jej sam zaimplementować to możesz tu napisać.

Podkreślam techniczny aspekt mojej działalności, czyli NIE tworzę styli na forum, ładnych rameczek etc.

W skrócie:
  • skrypty
  • techniczne
  • małe/średnie
Jaki jest tego cel? Ano, żeby pbf-y były jak najlepsze. Celowo nie chcę się wiązać z jednym i bardzo się angażować w wielkie projekty, lecz pomóc każdemu, kto chciałby żeby jego forum oferowało ciut więcej dla wygody graczy.

Nie wiesz czy dany pomysł da się zrealizować lub czy mu podołam? Sprawdź mnie.

Czego oczekuję w zamian za wykonanie skryptu? Wzmianki o tym, że jestem jego twórcą jeśli go wykorzystasz u siebie (np. w formie ogłoszenia administracyjnego - tak żeby było to po prostu widoczne).

Spis skryptów:
Ostatnio zmieniony 15 sie 2018, 14:54 przez Luxter, łącznie zmieniany 8 razy.

Awatar użytkownika

 Luxter#4127

#20813 29 cze 2016, 13:53

Karuzela/pokaz slajdów w javscripcie z animacjami w css:
https://jsfiddle.net/Luxter/5p3ut92r/
Common sense is so rare that it should be classified as a super power. ~ Bill Murray.
Where ignorance is bliss, 'tis folly to be wise. ~ Thomas Gray.

Awatar użytkownika

 Luxter#4127

#20846 30 cze 2016, 13:32

Zmiana avatara po najechaniu nań kursorem: https://jsfiddle.net/Luxter/9yoe0epw/
I MEGA PROSTA animacja przy przejściu obrazka po kliknięciu: https://jsfiddle.net/Luxter/rotqs0vj/2/

Awatar użytkownika

#20946 05 lip 2016, 0:22

Dobrze, to tak:

Potrzebuję Automatycznego pokazu slajdów, który się automatycznie przesuwa. Posiada jednak pod spodem "kropki" danych slajdów - po kliknięciu w kropkę pokazuje dany z kolei slajd. Mam nadzieję, że wiesz o co chodzi :3 Dodatkowo, po najechaniu na slajd pojawia się taki hover: https://imgur.com/7M5iM6g
Przy czym, to nie jest całkiem szare, a jedynie czarne tło z opacity około 50%. Reszta opacity 100% .
Wymiary: slajd: 150 (wys) x 280 (szer), z kropkami: 180 (wys) x 280 (szer). w pixelach oczywiście.

Drugie, też hover. Po najechaniu na zwykły image pojawia się coś takiego: https://imgur.com/EEhCg8g
I tu znowu, tło jest białe z opacity 50%.
wymiary: 68 (wys) x 110 (szer) w pixelach.

Awatar użytkownika

#20950 05 lip 2016, 12:58

No to konkretnie tak:
Potrzebuję kodu pod informator (wymiary 500px szer. X 300px wys.). Ponieważ nie umiem dobrze opisać w szczegółach tego, co chcę, to Ci narysuję ładny schemacik w Paincie -> klik
Po wciśnięciu "przycisku 1" w obszarze "pole" ma mi się pojawiać "treść 1", tak to nazwijmy, zajmująca całe pole (czyli o tych samych wymiarach). Po wciśnięciu "przycisku 2" w tym samym miejscu pojawia mi się coś innego ("treść 2") i tak dalej, na tej samej zasadzie. :cool:
[center]Obrazek[/center]

Awatar użytkownika

 Luxter#4127

#20953 05 lip 2016, 13:57

Ok, zlecenia dla Mizu gotowe:
Automatyczny pokaz slajdów ze wskaźnikami i hoverem: https://jsfiddle.net/Luxter/ybarbwn9/6/

Zwykły hover (z fajniejszymi urlami):
https://jsfiddle.net/Luxter/kL03mztx/

Jakbyś chciała "niezmienne" url-e w hoverze pokazu slajdów to wystarczy tylko skopiować odpowiednie css od znacznika "a" z drugiego przykładu.

Zachęcam do zabawy ze skryptem, wszystko jest zparametryzowane.

UWAGA: Klikanie w linki "nie działa" gdyż przykład jest w jsfiddle, który je przechwytuje. Można otworzyć link w nowej karcie (klikając np. kółkiem od myszki). W normalnym zastosowaniu linki powinny śmigać.

Awatar użytkownika

 Luxter#4127

#20955 05 lip 2016, 14:20

Yuffi, gotowe: https://jsfiddle.net/Luxter/139t82a0/5/

Kolor pod daną zakładką dałem tylko po to, żeby było widać ile faktycznie zajmuje miejsca.

Jeżeli zagwarantujesz, że zawartość zakładki nigdy nie przekroczy pożądanych wymiarów, możesz usunąć "overflow: scroll;" z css-ki od zakładki i wtedy nie będzie tych niepotrzebnych scrolli.

Awatar użytkownika

 Luxter#4127

#20996 07 lip 2016, 10:09

Upgrade do poprzedniego slidera dla Mizu: https://jsfiddle.net/Luxter/ybarbwn9/9/

Jest lepsza animacja (obrazek już nie wyjeżdża z jednej strony) oraz hovery na każdy slajd są indywidualne z dowolną treścią.
Common sense is so rare that it should be classified as a super power. ~ Bill Murray.
Where ignorance is bliss, 'tis folly to be wise. ~ Thomas Gray.

Awatar użytkownika

 Luxter#4127

#25096 31 sty 2017, 15:52

Jako, że trafiło mi się ostatnio drogą prywatną zlecenie na stworzenie BBCode pod phpBB by Przemo za zgodą zlecającego wrzucam tu kod, a także na jego przykładzie krótko i zwięźle wytłumaczę jak samemu taki BBCode stworzyć w przyszłości. WYDAJE MI SIĘ, że na zwykłym phpBB w wersji 2.x działa to w sposób analogiczny (a w 3.x jest to już dużo lepiej rozwiązane).

Aby stworzyć prosty BBCode bez żadnych fajerwerków typu: dodawanie go do spisu przycisków BBCode w widoku pisania posta czy prywatnej wiadomości wystarczy dokonać zmian w 2 plikach:
  1. includes/bbcode.php - tutaj zawiera się cała logika zamieniania znacznika BBCode na odpowiedni HTML
  2. templates/NAZWA_NASZEGO_STYLU/bbcode.tpl - tutaj zawiera się spis HTML BBCode, które są wstawiane w miejsce znaczników
Jak widać nie ma wielkiej filozofii. W bbcode.php jest zamiana znacznika BBCode na znacznik HTML, który dodajemy do bbcode.tpl. Banalnie proste.

Zacznijmy od pliku bbcode.tpl. Składa się on po prostu z serii linii w formacie:

Kod: Zaznacz cały

<!-- BEGIN IDENTYFIKATOR -->Znacznik HTML<!-- END IDENTYFIKATOR -->
Gdzie "IDENTYFIKATOR" to unikatowa nazwa pozwalająca rozróżnić znaczniki HTML między sobą a "Znacznik HTML" to jest to co chcemy żeby się pojawiało w miejsce naszego BBCode. W naszym przykładzie wygląda to tak:

Kod: Zaznacz cały

<!-- BEGIN karta_open --><div style="background-color: #101019; width: 634px; border: 8px double #020307; padding: 4px; color: #56565D; font-family: tahoma; font-size: 12px; text-align: justify;"><!-- END karta_open -->
<!-- BEGIN karta_close --></div><!-- END karta_close -->
Jak widać nasz BBCode składa się z dwóch części. Znacznika otwierającego "karta_open" i zamykającego "karta_close", które de facto odpowiadają znacznikom <div> z HTML-a (z atrybutem style, żeby nadać mu pożądany wygląd). I już. Czyli nasz BBCode składający się z dwóch części [karta]Treść[/karta] sprawi, że [karta] zamieni się na <div style="nasze stylowanie">, a znacznik [/karta] na </div>. I już.

Teraz trzeba sprawić, żeby faktycznie ta zamiana miała miejsce. Na razie jedyne co zrobiliśmy to zdefiniowaliśmy NA CO ma się zamienić nasz znacznik BBCode, ale to nie oznacza, że zamiana od tak odbywa się automatycznie. Przyjrzyjmy się teraz zawartości bbcode.php.

Interesują nas dwie zdefiniowane wewnątrz niego funkcje: function bbencode_first_pass($text, $uid), oraz function bbencode_second_pass($text, $uid, $username = ''). Są one wywoływane odpowiednio: first_pass przed zapisem postu do bazy danych i second_pass przed wyświetleniem postu.

W praktycznie dowolnym miejscu funkcji function bbencode_first_pass($text, $uid) (najlepiej gdzieś koło podobnych linijek) dodajemy taką oto linijkę:

Kod: Zaznacz cały

$text = preg_replace("#\[karta\](.*?)\[/karta\]#si", "[karta:$uid]\\1[/karta:$uid]", $text);
W kwestii minimalnego wyjaśnienia. Zmienna $text to treść naszego postu. Wywołując funkcję preg_replace wyszukujemy w zmiennej $text (w poście) danego elementu "#\[karta\](.*?)\[/karta\]#si" i zamieniamy go na "[karta:$uid]\\1[/karta:$uid]". Po szczegóły odsyłam do dokumentacji funkcji preg_replace oraz zagadnienia wyrażeń regularnych. Nie zagłębiając się w to wybitnie to co tu się tak naprawdę dzieje? Ano wyszukujemy w poście fragmentu [karta]TUTAJ_COKOLWIEK[/karta] i zamieniamy go na [karta:$uid]TUTAJ_TO_COKOLWIEK_CO_BYŁO_WCZEŚNIEJ[/karta:$uid]. Czyli de facto dodajemy do naszych znaczników [karta][/karta] :$uid gdzie zmienna $uid przechowuje unikalny identyfikator posta.

Właściwie to trochę zgaduję po co robimy ten krok, ale wszystkie przykładowe BBCode właśnie trzymają się ten konwencji, więc przez analogię również uwzględniam ten krok. WYDAJE MI SIĘ, że dodawanie unikalnego identyfikatora posta do każdego BBCode w nim zawartego sprawia, że BBCode działają w obrębie jednego posta (CZYLI NIE MOŻNA OTWORZYĆ BBCode W JEDNYM POŚCIE I ZAMKNĄĆ GO W INNYM). Ale jak mówię, jest to moje gdybanie. Jeśli się nie mylę to w bazie danych, w treści posta, wszystkie BBCode typu [ b] czy [ center] powinny być z identyfikatorami tego posta czyli [b:$uid] [center:$uid]. No nic, przyjmijmy że tak jest. Jak zapewne zauważyliście udało nam się dokleić do naszego BBCode [karta][/karta] uid posta czyli [karta:uid][/karta:uid].

A skoro potrafimy to zrobić, to analogicznie wystarczy teraz zamienić [karta:uid][/karta:uid] na nasz html z bbcode.tpl. W tym celu musimy w praktycznie dowolnym miejscu funkcji function bbencode_second_pass($text, $uid, $username = '') (najlepiej gdzieś koło podobnych linijek) dodać linie:

Kod: Zaznacz cały

$text = ($board_config['button_b']) ? str_replace("[karta:$uid]", $bbcode_tpl['karta_open'], $text) : str_replace("[karta:$uid]", '', $text);
$text = ($board_config['button_b']) ? str_replace("[/karta:$uid]", $bbcode_tpl['karta_close'], $text) : str_replace("[/karta:$uid]", '', $text);
Dodając to w funkcji bbencode_second_pass gwarantujemy, że wcześniej wywołana była bbencode_first_pass (w której to doklejaliśmy nasze :$uid). Jak widać są one bardzo podobne do tej doklejającej :$uid. Najważniejsza rzecz to zastosowany operator "(warunek) ? (kod jeśli prawda) : (kod jeśli fałsz)". Jak widać naszym warunkiem jest ($board_config['button_b']), który po prostu sprawdza czy w ustawieniach forum jest włączone przetwarzanie BBCode. Jeśli tak to zamieniamy [karta:$uid] na $bbcode_tpl['karta_open'], czyli na znacznik HTML pomiędzy <!-- BEGIN karta_open --><!-- END karta_open --> z pliku bbcode.tpl, który wcześniej dodaliśmy. Jeśli nie to po prostu zamieniamy [karta:$uid] na '' czyli pusty znak, czyli usuwamy. Dla [/karta] rzecz ma się zupełnie analogicznie.

Tym oto sposobem nasz znacznik [karta]COŚ[/karta] najpierw w funkcji bbencode_first_pass zamieniany jest na [karta:$uid]COŚ[/karta:$uid], a następnie w funkcji bbencode_second_pass znacznik [karta:$uid]COŚ[/karta:$uid] zamieniany jest na

Kod: Zaznacz cały

<div style="background-color: #101019; width: 634px; border: 8px double #020307; padding: 4px; color: #56565D; font-family: tahoma; font-size: 12px; text-align: justify;">COŚ</div>
I gotowe. Nasz prosty, zupełnie nowy BBCode zajął dosłownie 3 linie w pliku bbcode.php i 2 linie w bbcode.tpl. Mam nadzieję, że każdemu teraz uda się dodać własny BBCode na swoje forum. Powodzenia.

PS. Link do archiwum .zip z zedytowanymi plikami bbcode.php i bbcode.tpl http://www.filedropper.com/kartabbcode jakby ktoś się zgubił w wyjaśnieniach bądź nie wiedział co gdzie wkleić.

Awatar użytkownika

 Luxter#4127

#25178 07 lut 2017, 11:18

No i zamówienie zrealizowane (z mojego warsztatu na VL). Jest to nowy BBCode, który wyświetla w dymku definicje wprowadzone do bazy danych. Udało się je też poprawnie wgrać na forum, więc można powiedzieć, że działa w 100%. Zgodnie z życzeniem jest to extension pod phpBB w wersji 3.2 (ale podejrzewam, że przy niewielkich/braku poprawek na 3.1 też by zadziałało).
Pora na krótką instrukcję obsługi, gdzie skupię się na tym jak ext-a wgrać i doprowadzić do stanu używalności, a nie jak tworzyć ext-y (o czym jest wybitnie dużo materiałów na samej stronie phpBB). Przyjmę tylko jako hosting cba.pl na potrzeby objaśnień, ale to bez najmniejszego znaczenia. A więc do dzieła.

1. Zaczynamy od ściągnięcia mojego ext-a stąd: http://www.filedropper.com/luxter Jest to zwykły .zip z typową strukturą katalogów dla ext-ów, tak żeby szybko, łatwo i przyjemnie go wgrać na nasze forum.
2. Bierzemy cały folder "luxter" i wrzucamy go przez FTP na nasz serwer do katalogu /ext
3. Wchodzimy w panel administracyjny naszego forum zakładka "Customize" i szukamy naszego "Dictionary BBCode" oczywiście klikając "Enable". I już. Czyż wgrywanie rozszerzeń nie jest piękne? Ale uwaga!
Obrazek
4. Jako, że nasz ext służy do podmieniania definicji z bazy danych, to musimy też ręcznie wprowadzić zmiany do bazy. Wchodzimy więc sobie do zarządzania naszą bazą danych przez panel cba wybieramy naszą bazę danych i od razu wybieramy na górze "SQL".
Obrazek
Teraz wklejamy sobie takie coś:

Kod: Zaznacz cały

CREATE TABLE `phpbb_dictionary` (
 `name` varchar(255) COLLATE utf8_bin NOT NULL,
 `definition` varchar(1000) COLLATE utf8_bin NOT NULL,
 PRIMARY KEY (`name`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin ROW_FORMAT=DYNAMIC
I klikamy wykonaj.
Obrazek
Jest to komenda tworząca nową tabelę w naszej bazie danych. Można ją sobie równie dobrze wyklikać z interfejsu, ale tak jest po prostu szybciej.
Teraz nie pozostało nam już nic innego jak powypełniać nasz słownik danymi. Można to znowu zrobić poprzez interfejs (wybieramy naszą nową tabelę"phpbb_dictionary" -> klikamy "Wstaw" -> uzupełniamy pola), albo przez konsolę SQL jak poprzednio, przykładowo:

Kod: Zaznacz cały

INSERT INTO `phpbb_dictionary` (`name`, `definition`) VALUES ('python', 'język programowania wysokiego poziomu ogólnego przeznaczenia[2], o rozbudowanym pakiecie bibliotek standardowych[3], którego ideą przewodnią jest czytelność i klarowność kodu źródłowego. Jego składnia cechuje się przejrzystością i zwięzłością[4][5].')
Zwracam tylko uwagę, że pierwsza wartość pod kolumną "name" to klucz i musi być ona unikatowa oraz zaczynać się z małej litery.
Obrazek
Obrazek
5. Teraz możemy korzystać sobie z naszego nowego BBCode (domyślnie jest to [d]<name_z_bazy_danych[/d]) i po wysłaniu posta i jego przeglądaniu będą nam się pojawiać dymki z definicjami prosto z bazy danych.

Przykład:
Obrazek

Niestety na zrzucie ekranu nie widać kursora (ale zaznaczyłem czerwonym prostokątem gdzie był i co się pojawiło).

Kod jest dostępny dla wszystkich i każdy może go sobie wgrać na forum. Pragnę tylko przypomnieć by wspomnieć gdzieś na forum w widocznym miejscu o tym kto jest autorem rozszerzenia. Enjoy!

PS. Można by tę całą zabawę z bazą danych zautomatyzować, lecz postanowiłem tego nie robić, gdyż wtedy usuwając rozszerzenie (lub przypadkowo je wyłączając i czyszcząc) utracilibyśmy wszelkie wprowadzone dane. W ten sposób dane zostają z resztą bazy danych niezależnie od tego co się z ext-em dzieje.
PS2. Klikając PPM->"Otwórz obrazek w nowym oknie" możemy go zobaczyć w lepszym rozmiarze i rozdzielczości.

Awatar użytkownika

 Luxter#4127

#25938 13 mar 2017, 19:12

Kolejny ekspresowy tutorial. Tym razem będą to "ciekawsze" ramki do avatarów. Postaramy się zrobić coś, co nie jest zwykłym czarnym prostokątem, lecz bardziej fikuśnym tym: https://jsfiddle.net/Luxter/u9wyj1wf/3

Jak widać html jest MEGA prosty: to <div> kontener na dwa obrazki <img> (każdy element ze swoją klasą css).

Do tego mamy tylko i wyłącznie css, bez żadnych javascriptów i innych takich.

Kod: Zaznacz cały

.parent {
  position: relative;
}
Ustalamy, że pozycje dzieci (obrazków) mają być względem rodzica (kontenera).

Kod: Zaznacz cały

.image1 {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
To skomplikowane coś "przycina" nam spodni obrazek, w tym przypadku avatar, do zadanego kształtu. Niestety o tym trzeba doczytać LUB skorzystać z narzędzia, które to wygeneruje za nas: http://bennettfeely.com/clippy/

Kod: Zaznacz cały

.image2 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 150px;
  height: 200px;
}
Tym natomiast przenosimy wierzchni obrazek (należy pamiętać, żeby miał przezroczyste tło, inaczej zasłoni drugi) nad spodni. Ja dodatkowo dodałem parametry width i height, gdyż oba obrazki były różnych wymiarów. Ramka może mieć dowolny kształt, gdyż clip-path przytnie do dowolnego wielokąta. I to wszystko. Enjoy!

Awatar użytkownika

 Luxter#4127

#42489 26 lip 2018, 19:58

Ok, dawno nic nie wrzucałem. Tym razem będzie to losowy obrazek, który się zmienia przy każdej wizycie/odświeżeniu strony. Dość często na zagranicznych forach spotyka się tego typu rozwiązanie, np. w nagłówku. Po interaktywny przykład zapraszam tutaj: https://jsfiddle.net/r3Lsctfv/4/

Jak zwykle mega szybkie omówienie tego, jak kod działa:

W HTML mamy tylko proste miejsce na obrazek:

Kod: Zaznacz cały

<img id="background" />
Zwróćcie uwagę, że nadałem mu id "background", po którym później w Javascripcie będziemy się do niego odwoływać.

W samym JS-ie mamy następujące linie:

Kod: Zaznacz cały

var backgrounds = [
  "http://www.w3schools.com/w3css/img_nature_wide.jpg",
  "http://www.w3schools.com/w3css/img_fjords_wide.jpg",
  "http://www.w3schools.com/w3css/img_mountains_wide.jpg"
];
Lista naszych obrazków, może być dowolnie długa, tutaj wstawiacie swoje linki.

Kod: Zaznacz cały

var size = backgrounds.length
var idx = Math.floor(size*Math.random())
To jest właściwa "magia", czyli losowanie indeksu naszego obrazka z dostępnej puli. Najpierw pobieramy liczbę dostępnych możliwości, a później losujemy wartość - zaokrąglając w dół. Czemu zaokrąglamy w dół? Otóż Math.random() zwraca liczbę z przedziału [0, 1) (0 otwarte, 1 domknięte). A więc mnożąc przez nasz rozmiar (w tym wypadku 3), otrzymujemy wyniki w zakresie [0, 3). Teraz biorąc podłogę zapewniamy, że dostępne możliwości to: 0, 1 oraz 2 (czyli dokładnie takich indeksów potrzebujemy).

Na koniec już tylko wstawiamy obrazek w przygotowane w HTML miejsce:

Kod: Zaznacz cały

document.getElementById('background').src=backgrounds[idx];
Common sense is so rare that it should be classified as a super power. ~ Bill Murray.
Where ignorance is bliss, 'tis folly to be wise. ~ Thomas Gray.

Awatar użytkownika
O mnie
Jestem demonicznym kapłanem, zesłanym do tego świata przez Starych Bogów. Szaleństwo to jedyna słuszna droga.

#44362 10 paź 2018, 18:23

Chciałabym złożyć zamówienie na skrypt samozapisujący post, na phpbb by Przemo, który po prostu ratowałby przed utratą posta w wyniku wyłączenia okna/prądu/crashu przeglądarki itp.

Awatar użytkownika

 Luxter#4127

#44425 15 paź 2018, 19:35

Na początku przestrzegam, że zakładam, że każdy wie jak do swojego forum w odpowiednim miejscu dodać skrypt JavaScript (a jako, że na każdym silniku wygląda to inaczej, pozostawiam ten krok dla instalującego).

Poniżej przedstawiam absolutnie minimalny skrypt na autozapis posta:
https://jsfiddle.net/Luxter/6s8drhow/25/

Skrypt ten w swojej najprostszej (i obecnej) postaci ma szereg ograniczeń:
  1. Zapisuje tylko jeden post, bez względu w jakim temacie odpowiadamy.
  2. Zapisuje tylko jeden post, bez względu na jakie konto jesteśmy zalogowani.
  3. Zapisuje post pod jednym, ściśle zdefiniowanym kluczem (to znaczy, że w przypadku duplikatu, jakby jakaś inna strona posługiwała się tym kluczem, wystąpią konflikty, których efekty trudno przewidzieć).
Czyli jednym słowem zapisuje wyłącznie jeden post w jednym ściśle określonym miejscu.
Ale ma wiele zalet:
  1. Zapisuje post po każdym wciśniętym (a będąc bardziej szczegółowym - puszczonym) znaku.
  2. Obsługuje treści wklejane przez ctrl+v.
  3. Wymaga wyłącznie jQuery (które jak się orientuję jest praktycznie na każdym silniku forumowym, więc nie ma problemu).
  4. Jest mega krótki i prosty w zrozumieniu, o czym przekonacie się za chwilę.
Skrypt składa się z 3 części:
  1. HTML - lewa, górna ćwiartka. TEN KOD JEST WYŁĄCZNIE PRZYKŁADOWY, Wy już macie swój formularz do wysyłania postów na stronie.
  2. CSS - prawa, górna ćwiartka. TEN KOD JEST WYŁĄCZNIE PRZYKŁADOWY, tylko po to, żeby przykład nieco lepiej wyglądał.
  3. JavaScript - lewa, dolna ćwiartka. TEN KOD JEST WŁAŚCIWY, ALE UZUPEŁNIONY PRZYKŁADOWYMI WARTOŚCIAMI, KTÓRE W ZALEŻNOŚCI OD WASZEGO SILNIKA TRZEBA ZMIENIĆ.
Przechodząc więc do rzeczy najważniejszej, czyli tego jak kod działa w JavaScripcie:

Kod: Zaznacz cały

post_input = $('#post-input');
post_key = 'my_saved_post_key'
post_form = $('#post-form')

event.preventDefault(); //REMOVE THIS WHOLE LINE FOR USAGE!!!
Te linijki TO JEDYNE, KTÓRE NALEŻY ZMIENIĆ.

Kod: Zaznacz cały

post_form.submit(function(event) {
  localStorage.removeItem(post_key);
  event.preventDefault(); //REMOVE THIS WHOLE LINE FOR USAGE!!!
});
Ten fragment odpowiada za "zapomnienie" posta, po tym jak już go wyślemy formularzem.
NAJWAŻNIEJSZE JEST USUNIĘCIE CAŁEJ TEJ LINIJKI:
event.preventDefault(); //REMOVE THIS WHOLE LINE FOR USAGE!!!

Jest ona tylko po to, żeby formularz nic nie robił w moim przykładzie, ale u Was chcecie żeby wysyłał post.

Kod: Zaznacz cały

post_input = $('#post-input');
Jest po prostu wybraniem naszego elementu, w który wpisujemy post. W tym przypadku chodzi nam o <textarea id="post-input">, więc wybieramy element o id '#post-input', ale u Was w HTML prawdopodobnie ten element ma inne id/klasę, więc musicie tutaj wpisać odpowiednio.

Kod: Zaznacz cały

post_key = 'my_saved_post_key'
Jest kluczem, pod którym w lokalnej pamięci zapisujemy nasz post. TO TEN KLUCZ MUSI BYĆ UNIKALNY. Warto więc zapewnić, żeby faktycznie nikt inny na podobny nie wpadł, dodając np. nazwę swojego fora czy cokolwiek innego co uznacie za stosowne.

Kod: Zaznacz cały

post_form = $('#post-form')
Jest po prostu wybraniem naszego formularza, odpowiedzialnego za wysłanie posta. U Was w HTML prawdopodobnie ten formularz ma inne id/klasę, więc musicie tutaj wpisać odpowiednio.

To wszystko, po zmianie tych 3 wartości na odpowiednie (zależnie od waszego silnika/tego co macie w HTML) skrypt powinien działać.

Poniżej przedstawiam dla ciekawskich opis pozostałej części skryptu:

Kod: Zaznacz cały

post_input.keyup(function() {
  post_content = post_input.val();
  localStorage.setItem(post_key, post_content);
});
Ta funkcja (która wywołuje się za każdym razem, gdy puszczamy klawisz po wciśnięciu - dzięki czemu mamy również nasz ostatnio wciśnięty klawisz zapisany), po prostu odczytuje zawartość naszego posta i ustawia w pamięci lokalnej (localStorage) pod naszym kluczem ten post.

Kod: Zaznacz cały

$(document).ready(function() {
  saved_post_content = localStorage.getItem(post_key);
  post_input.val(saved_post_content)
});
Ten kod wywołuje się za każdym razem kiedy dokument jest gotowy - a więc otworzony po raz pierwszy bądź odświeżony. Jedyne co tu robimy to odczytujemy zapisany post (lub nic, jeśli nic nie mamy zapisanego) i wstawiamy do naszego pola na post.
Common sense is so rare that it should be classified as a super power. ~ Bill Murray.
Where ignorance is bliss, 'tis folly to be wise. ~ Thomas Gray.

ODPOWIEDZ ]