Informacja o dawno zadanym pytaniu

[wizarddos]

Ta zmiana jest z issue #293 Dodałem prostą informację otoczoną czerwoną ramką. Pojawia się gdy użytkownik otworzy za pomocą przycisku formularz odpowiedzi, a przy pytaniach bez odpowiedzi, po prostu domyślnie się pokazuje

Kwestią do ustalenia może być jeszcze kolor ramki, oraz treść informacji

A tak prezentuje się ramka

Jasny Motyw:

Ciemny Motyw:

[event15]

"(...) i może nie być już aktualne" albo "(...) i może być już nieaktualne"

[ScriptyChris]

Na oko, kontrast czcionki względem tła (grafitowy vs beżowy?) jest zbyt mały na jasnym motywie. Może białe tło byłoby lepsze dla tego koloru czcionki?

[awaluk]

Wg mnie ten tekst, padding od niego do ramki jak i margines pod ramką są stanowczo zbyt duże. Dobrze, że zwraca to na siebie uwagę, ale bez przesady. Na małych ekranach jak telefon jest jeszcze gorzej, bo ten komunikat np. u mnie zajmuje jakieś mniejsze pół ekranu.

Gdy ktoś kliknie "odpowiedz", pojawia się ta informacja, a następnie kliknie się "anuluj" to informacja dalej pozostaje, wydaje się, że wtedy powinna też znikać.

Poza tym ok, faktycznie pomyślałbym jeszcze tylko nad ustaleniem tekstu w ramce. "To pytanie zostało zadane ponad 2 miesiące temu" brzmi jak dla mnie myląco w sytuacji, gdy mamy pytanie, które zostało zadane np. rok temu - można to dwuznacznie odebrać. Jak już to zmieniłbym ten początek na coś w rodzaju "To pytanie zostało zadane już dawno temu". A w drugim zdaniu jest wtedy ciągle powtórzone słowo "pytanie". Można by spróbować więc zmienić całość, może np. na coś w rodzaju "To pytanie zostało zadane już dawno temu i może być nieaktualne. Upewnij się, że Twoja odpowiedź nadal będzie pomocna."

[awaluk]

To już jest gotowe do sprawdzenia? Bo wydaje mi się, że opisane rzeczy w większości nadal są

[wizarddos]

Teraz jest wszystko. Nie wrzuciłem tu wczoraj jednego z commitów. Teraz już jest

[awaluk]

Jeśli chodzi o funkcjonalność, to po dodaniu odpowiedzi komunikat nadal pozostaje, a nie ma już sensu, aby tam był. Do tego wchodząc jako niezalogowany na pytanie bez odpowiedzi widoczny jest od razu komunikat, co też nie ma sensu, bo niezalogowany nawet nie ma jak odpowiedzieć. No i jak dla mnie ten rozmiar czcionki nadal jest sporo za duży, wystarczyłoby lekkie zwrócenie uwagi, co już robi czerwona ramka, a nie info na pół ekranu :)

[wizarddos]

Można wyciągnąć wszystkie te inputy (przyciski) i w pętli podpiąć im event listener

Coś w tym stylu?

const buttons = document.querySelectorAll('button');

buttons.for_each(button =>{
     if(button.name === "docancel"){
        button.addEventListener('click', ()=>{
            // kod zmieniający widoczność
        });
    }
});

albo podpiąć się pod aktualnie aktywną instancję CKEditora i relatywnie od niej znaleźć przycisk anulujący

Z tym rozwiązaniem mam problem. Na razie nie mogę dobrze zrozumieć dokumentacji i znaleźć w niej jak mogę 'złapać' buttony z dołu

Jeśli chodzi o funkcjonalność, to po dodaniu odpowiedzi komunikat nadal pozostaje, a nie ma już sensu, aby tam był.

Tak się teraz zastanawiam. Dlaczego to ma znikać? Rozumiem gdy są odpowiedzi, a użytkownik nie chce odpowiadać, lub wchodzi ktoś nie zalogowany, Ale gdy ktoś odpowiada, to może to chyba zawsze widzieć?

[ScriptyChris]

Coś w tym stylu?

Nie ma potrzeby robić ifa w pętli, skoro można elementy wyfiltrować poprzez selektor:

const cancelButtons = document.querySelectorAll('[name="docancel"]');

cancelButtons.forEach((cancelBtn) => {
  cancelBtn.addEventListener('click', () => {
    // kod zmieniający widoczność
  });
});

Z tym rozwiązaniem mam problem. Na razie nie mogę dobrze zrozumieć dokumentacji i znaleźć w niej jak mogę 'złapać' buttony z dołu

Poniżej przykład kodu, który łapie przycisk do anulowania posta - setTimeout jest tylko do celów deweloperskich, żeby móc zfocusować edytor (inaczej nie złapie aktualnej instancji). Dodałem też filmik, w którym widać jak to działa. Otworzyłem trzy instancje CKEditora (dla komentarza do pytania, komentarza do odpowiedzi i do samej odpowiedzi) i spośród wielu instancji można dostać się do aktualnej:

// setTimeout(() => {
    const currentCKEInstanceElement = CKEDITOR.currentInstance.element.$;
    console.log('currentCKEInstanceElement:', currentCKEInstanceElement, '\n/cke instance name:', currentCKEInstanceElement.name);

    const closestCKEInstanceForm = currentCKEInstanceElement.form;
    const cancelButton = closestCKEInstanceForm.docancel;

    console.log('cancelButton:', cancelButton);
// }, 1000);

https://user-images.githubusercontent.com/18393526/166912142-8102ea47-0b3f-4ab8-ac18-19d6a2968857.mp4

---

---

Tylko teraz tak sobie myślę, że nie wiem czy jest sens łapać aktualną instancję edytora, bo przecież użytkownik wcale nie musi mieć jej zfocusowanej w danym momencie. Można by więc po prostu złapać wszystkie przyciski [name="docancel"], w pętli podpiąć im listenery i na klik ukryć komunikat relatywny/najbliższy przyciskowi - tak jak do tej pory togglujesz klasę "hidden" (tyle, że bezpieczniej by było ją eksplicytnie dodawać zamiast togglować). Analogicznie w przypadku pokazania komunikatu - usunąć klasę "hidden", zamiast ją togglować.

Ponadto, myślę że też przydało by się obsłużyć przypadek pokazania wielu komunikatów, a nie jednego - bo przecież użytkownik może próbować dodać komentarze do różnych odpowiedzi i pytania oraz samą odpowiedź i przy każdej instancji edytora będzie pokazywany osobny komunikat, który wypada zamknąć po kliknięciu w przycisk "Anuluj".

Przy okazji, czy zostało już ustalone, że komunikat pokazuje się dla odpowiedzi i komentarzy, czy tylko odpowiedzi? Bo, jeśli to ma dotyczyć obu przypadków, to trzeba by uelastycznić ten skrypt.

Na oko, przerobiłbym go w ten sposób:

const allPostSendingButtons = document.querySelectorAll(
  'form[name*="_form"] input:is([value="Odpowiedz"], [value="Skomentuj"])'
); // weź wszystkie przyciski zatwierdzające dodanie posta
allPostSendingButtons.forEach((postSendingButton) => {
  postSendingButton.addEventListener('click', possiblyShowOutdatedInfo);
});

function possiblyShowOutdatedInfo({ target: postSendingButton }) {
  if (!isOutdatedInfoNeeded()) {
    return;
  }

  const postFormContainer = postSendingButton.form.parentElement;
  prepareToHideOutdatedInfo(postSendingButton.form.docancel, postFormContainer);

  // to jest chyba zbędne, bo skoro kontener jest ukryty, to i komunikat będzie ukryty
  const outdatedInfoMaybeHidden = postFormContainer.style.display === 'none' ? "hidden" : "";

  postFormContainer.insertAdjacentHTML(
    'beforebegin', 
    `<p class = "qa-outdated-question-container ${outdatedInfoMaybeHidden}">
      To pytanie zostało zadane już dawno temu i może być nieaktualne.<br/>
      Upewnij się, że Twoja odpowiedź nadal będzie pomocna.
    </p>`
  );
}

function prepareToHideOutdatedInfo(cancelBtn, postFormContainer) {
  cancelBtn.addEventListener('click', () => {
    // skoro komunikat został wstawiony jako 'beforebegin', to można założyć, że jest poprzednim rodzeństwem kontenera
    // chociaż pytanie, czy nie lepiej usunąć komunikat niż go ukrywać? Bo co jeśli użytkownik znowu zechce dodać post - wtedy zobaczy zduplikowany komunikat?
    postFormContainer.previousElementSibling.classList.add('hidden');
  }, { once: true });
}

function isOutdatedInfoNeeded() {
    const publishDateSpan = document.querySelector('.published > .value-title');
    const now = new Date();
    const publishDate = new Date(publishDateSpan.title);
    const publishYearOlderThanNow = publishDate.getFullYear() < now.getFullYear();
    const publishMonthNewerThanNow = publishDate.getMonth() - 1 >= now.getMonth();

    return publishYearOlderThanNow && publishMonthNewerThanNow;
}

[wizarddos]

No i jak dla mnie ten rozmiar czcionki nadal jest sporo za duży, wystarczyłoby lekkie zwrócenie uwagi, co już robi czerwona ramka, a nie info na pół ekranu :)

Niby racja, ale spójrzmy jeszcze na jedną rzecz. Gdy dodajemy pytanie w kategorii programowanie i nie wstawimy bloczka pokazuje nam się takie okienko

Jest ono średniej wielkości i zwraca uwagę, ale pomimo tego jest naprawdę sporo pytań, w których jest kod ale bez bloczka. To był główny powód, dlaczego ta informacja jest tak duża

Przy okazji, czy zostało już ustalone, że komunikat pokazuje się dla odpowiedzi i komentarzy, czy tylko odpowiedzi? Bo, jeśli to ma dotyczyć obu przypadków, to trzeba by uelastycznić ten skrypt.

Ostatecznie to jeszcze nie. Wg. mnie powinniśmy podłączyć to tylko dla odpowiedzi, bo tylko odpowiedź odkopuje pytanie. To właśnie jest główny cel tej ramki, w jakimś stopniu zapobiegać odkopywaniu pytań.

[awaluk]

Tak się teraz zastanawiam. Dlaczego to ma znikać? Rozumiem gdy są odpowiedzi, a użytkownik nie chce odpowiadać, lub wchodzi ktoś nie zalogowany, Ale gdy ktoś odpowiada, to może to chyba zawsze widzieć?

Pomyślałem o znikaniu, bo ta informacja po dodaniu odpowiedzi już nic nie da, a wręcz ktoś może nie wiedzieć o co z nią chodzi. W końcu miał formularz odpowiedzi, postanowił np. zignorować komunikat i jednak dodać odpowiedź, bo np. uznał, że będzie ona pomocna i skoro już dodał odpowiedź i nic więcej nie pisze, to nie wiem po co nadal go ostrzegać, że temat może być przeterminowany. Jedyne co mi przychodzi do głowy to aby mógł się zreflektować i jednak odpowiedź usunąć, ale skoro juz ją napisał... Poza tym jak wtedy odświeży stronę to i tak zniknie. Więc nie wiem, zdawało mi się, że ten napis powinien być zawsze związany z momentem pisania odpowiedzi.

Jest ono średniej wielkości i zwraca uwagę, ale pomimo tego jest naprawdę sporo pytań, w których jest kod ale bez bloczka. To był główny powód, dlaczego ta informacja jest tak duża

Trafna uwaga, ale obawiam się, że tu okienko żadnej wielkości nic nie da. Że część osób jest po prostu bardzo oporna i nie zwróci uwagi na żadne okienko, bo stwierdzi, że to ich nie dotyczy, że nie wiedzą jak to zrobić albo że wiedzą lepiej, że należy wstawić właśnie tak. No ale ok, jeśli tak to można dać to okienko trochę większe niż dotyczące bloczka kodu, ale nadal mam wątpliwości czy aż tak duże. Tym bardziej w kontekście mniejszych ekranów.

Ostatecznie to jeszcze nie. Wg. mnie powinniśmy podłączyć to tylko dla odpowiedzi, bo tylko odpowiedź odkopuje pytanie. To właśnie jest główny cel tej ramki, w jakimś stopniu zapobiegać odkopywaniu pytań.

Teoretycznie komentarz też jakoś odkopuje pytanie, ale fakt faktem wtedy nie wybija się na górę strony głównej, a tylko na "ostatnia aktywność". No i spora różnica jest tu w znaczeniu odpowiedzi, która ma wprost odpowiadać na dany problem (co może nie mieć sensu jak ktoś o coś zapytał rok temu), a komentarzem (który może służyć np. tylko do tego, aby dopytać kogoś po roku o to czy mu podane w odpowiedzi rozwiązanie działa). Inna rzecz, że ludzie czasem to mylą... :) Jak dla mnie możemy na razie zostać przy odpowiedziach, a najwyżej kiedyś się to rozwinie jeśli uznamy, że jest potrzeba.

[wizarddos]

Dobra, wszystko powinno już działać jak należy. Przy okazji poprawiłem wyświetlanie się informacji u osób nie zalogowanych (wcześniej się wyświetlało, teraz już nie)

Czekam na review i ewentualne poprawki

[wizarddos]

Poprawione

[awaluk]

Funkcjonalnie zdaje się, że wszystko jest ok, o ile komunikat celowo nie ukrywa się po dodaniu odpowiedzi i tak po prostu ma być, wyżej o tym wspominałem.

Nadal uważam, że komunikat jest za wielki na mniejszych ekranach, u mnie na telefonie zajmuje jakąś 1/3 strony.

I jeszcze jedna rzecz nieco poboczna mi wpadła: jak mamy pytanie, które ma wiele komentarzy do pytania i klikamy pod jego treścią (a więc nad komentarzami) przycisk "odpowiedz" to następuje otwarcie formularza odpowiedzi (na dole, pod komentarzami) i automatyczne przewinięcie strony do niego. Problem jest jednak taki, że przewinięcie następuje do samego edytora, a więc pod ramkę z komunikatem, można wtedy jej zwyczajnie nie zauważyć. Chyba lepiej jakby scrollowało do początku ramki, aby ona była od razu widoczna.

[wizarddos]

problem jest jednak taki, że przewinięcie następuje do samego edytora, a więc pod ramkę z komunikatem, można wtedy jej zwyczajnie nie zauważyć.

Naprawiłem to. Zmniejszyłem też lekko tekst.

[awaluk]

Coś to przewijanie do edytora nie do końca działa, przynajmniej u mnie na Chrome. Na standardowym full HD zostaje sporo miejsca nad komunikatem, choć jest na tyle miejsca, aby jeszcze przewinąć w dół, strona się nie kończy. A im mniejszy ekran, tym jakby się przewijało coraz niżej i w efekcie na bardzo małym przewija się gdzieś na środek edytora. Poniżej filmik na którym to widać. Myślałem, że może to Q2A ma takie problemy samo w sobie, ale potestowałem też na produkcji i tam wygląda dobrze.

https://user-images.githubusercontent.com/13801608/175607566-7b59be55-f0e4-47b0-8404-4b1bd4f33ac0.mp4

[wizarddos]

Naprawiłem tego scrolla na full HD ale na ten moment nie jestem w stanie poprawić tego scrollowania na mniejszych ekranach Przy moim debugowaniu znalazłem coś co może być tego przyczyną

Na samym początku mój kod scrolluje do ramki z informacją i wszystko wygląda dobrze, gdy jednak edytor się załaduje to scroll idzie jeszcze dalej, zakładam przez użycie czegoś w rodzaju window.scroll() (nie jestem tego pewien, jeszcze nie znalazłem kodu odpowiedzialnego za to w oryginałach CKEditora)

[ScriptyChris]

Na samym początku mój kod scrolluje do ramki z informacją i wszystko wygląda dobrze, gdy jednak edytor się załaduje to scroll idzie jeszcze dalej, zakładam przez użycie czegoś w rodzaju window.scroll() (nie jestem tego pewien, jeszcze nie znalazłem kodu odpowiedzialnego za to w oryginałach CKEditora)

Możesz do window lub document.documentElement spróbować podpiąć MutationObserver obserwujący zmianę atrybutów i jeśli on złapie moment tego niewiadomego scrollowania, to wtedy ustaw breakpoint i powinno przekierować Cię do kodu, który to powoduje.

Albo skorzystaj z breakpointa łapiącego scroll (z tego co widzę on jest w grupie Control -> scroll).