[skryptozakładki] Jak tworzyć? pomoce

[justuser]

Witam,
Chciałbym stworzyć bookmarklet, który będzie kopiował tekst z określonej komórki bez określonej frazy]. Nigdy nie tworzyłem bookmarkletów, jednak namiętnie korzystam z parun swietne narzeedzie. moznaby prosci o jakies poradniki w jezyku polskim jak je tworzyc? lub pomoc w napisaniu tego bookmarkletu?

[Mirek]

Hejka - o tworzeniu wspomniałem na dole tego postu - czyli powinieneś (po)znać podstawy modelu DOM (to tylko chwilka) oraz umieć programować w języku Javascript (jak znasz C/C++, Java lub PHP to nie będziesz miał z tym problemów). Konkretnych tutoriali czy książek nie polecę, ale z pewnością coś wygooglasz.

Pod koniec tego postu: jest też dość ciekawa skryptozakładka - jsenv (Javascript Development Enviroment 2.0.1) - która tworzy dla aktualnie otwartego okna dodatkowe okienko, w którym możemy tworzyć skryptozakładkę i na bieżącą ją testować. I kod nie musi być upchany w jednej linijce.

A jeśli chodzi o pomoc w napisaniu - to napisz co dokładnie ma ona robić, to pewnie ktoś pomoże

Pozdrawiam,
Mirek

PS: No i przydatna jest umiejętność "googlania" (najlepiej po angielsku) - żeby odnajdywać różne wbudowane funkcje, metody, właściwości i atrybuty.
PS2: Czemu moja wiadomość jest ciągle rozpoznawana jako SPAM? Za dużo linków?
// Update: jak objąłem je znacznikiem [ url = .......] ....... [ /url] to post przeszedł.

[Tomek]

@Mirek[PL] - zabezpieczamy się przed spamem - ostatnio był zalew... i chyba za daleko to zaszło Wszelkie uwagi do GMBH - ten problem już mu zgłosiłem.

[justuser]

Dziękuje Mirku za taką dobrą odpowiedź

Chodzi mi o to, aby kopiowało (lub zaznaczało tekst piosenki bo mam rozszerzenie AutoCopy) i usuwało ciąg [tylko tekstyhh.pl]
Strona to [url=http://tekstyhh.pl]

[Mirek]

No to czas na moje Kung Fu

1. Zacznijmy od usunięcia wspomnianego tekstu ze strony - do tego wystarczy takie coś:

Kod: Zaznacz cały

javascript:document.body.innerHTML= document.body.innerHTML.replace(/\[tylko tekstyhh\.pl\]/gi,''); void 0;

czyli w całym HTMLu wewnątrz sekcji BODY podmieniamy (replace()) tekst pasujący do podanego wzorca (flagi: g = globalnie - czyli wszystkie wystąpienia na stronie, i - ignorowanie wielkości liter) na pusty ciąg (czyli nic między dwoma apostrofami)

2. Teraz zaznaczanie - zaglądamy do źródła strony ([CTRL]+[U]) i szukamy w którym miejscu pojawia się interesująca nas część strony.

Kod: Zaznacz cały

      <table class="contentpaneopen">
      <tr>
         <td valign="top" colspan="2">
            Tytuł<br /><br />Bla bla bla<br />Bla, bla...<br />
            Bla bla bla...<br />Bla bla...<br />
         </td>

<td align="right"><!--MIEJSCE NA REKLAME OBOK TEKSTU--></td>
      </tr>
   </table>

Okazuje się, że jest to tabelka - niestety nie ma ustawionego parametru id ani name przy pomocy którego można by łatwo namierzyć dany element strony - ale za to ma ustawioną nazwę klasy. Wyszukiwania elementów strony po nazwie klasy nie ma - ale za to możemy wyszukać wszystkie tabelki na stronie i sprawdzać, czy któraś przypadkiem nie należy do klasy contentpaneopen.

Kod: Zaznacz cały

tbls=document.getElementsByTagName('table');
for(i=0; i<tbls.length; ++i)
{
    if(tbls[i].className == "contentpaneopen")
    {
      .... // tabelka tbls[i] należy do poszukiwanej klasy
    }
}

Skoro już odnaleźliśmy, to zaznaczamy - jak? - gotowy kawałek kodu albo znamy, albo szukamy np. z pomocą google - javascript select text
Ja wybrałem mniej więcej taką wersję:

Kod: Zaznacz cały

if (document.selection) // to działa w IE
{
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
}
else if (window.getSelection) // ...a to w FF i Operze
{
    var range = document.createRange();
    range.selectNodeContents(elm);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

choć okazało się, że w Operze to nie działa, ponieważ:

Kod: Zaznacz cały

if (document.selection) // to działa w IE

zwraca o dziwo wartość true - i próbuje kopiować tak, jak to robi IE - rozwiązanie - zamiana kolejności warunków (czyli najpierw sprawdzamy czy w aktualnie używanej przeglądarce jest dostępny sposób działający w FF i Operze - a jeśli nie, to dopiero wtedy próbujemy sposób dla IE. Czyli po zmianie kolejności mamy:

Kod: Zaznacz cały

if (window.getSelection) // FF i Opera
{
    var range = document.createRange();
    range.selectNodeContents(elm);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}
else if (document.selection) // IE
{
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
}

3. Kopiowanie - to sobie darowałem, ponieważ wymaga zmiany zabezpieczeń w FF lub korzystania ze sztuczek w stylu przekazanie tekstu do skopiowania jako parametr dla (podpisanego certyfikatem?) apletu w Javie lub Flashu, które już potrafią skopiować tekst do schowka - ogólnie sporo zabawy w porównaniu z możliwością wciśnięcia [CTRL]+[C] lub wybrania Kopiuj z menu kontekstowego. A jeszcze skoro masz AutoCopy, to już w ogóle nie warto komplikować (bo mam nadzieję, że na takie programowe zaznaczanie też reaguje, a nie tylko na to wykonane myszką lub z klawiatury).

Ostatecznie skryptozakładka wygląda tak:

Kod: Zaznacz cały

javascript:document.body.innerHTML= document.body.innerHTML.replace(/\[tylko tekstyhh\.pl\]/gi,''); tbls=document.getElementsByTagName('table'); for(i=0; i<tbls.length; ++i) { if(tbls[i].className.toLowerCase() == "contentpaneopen") { elm=tbls[i].rows[0].cells[0]; if (window.getSelection) {    var range = document.createRange();    range.selectNodeContents(elm);    var selection = window.getSelection();    selection.removeAllRanges();    selection.addRange(range); } else if(document.selection) {    var range = document.body.createTextRange();    range.moveToElementText(elm);    range.select();  }   } }; void 0;

Zaznaczanie tekstu ograniczyłem do pierwszej kolumny w pierwszym wierszu wyszukanej tabelki

elm=tbls[ i].rows[0].cells[0];

A na wszelki wypadek przy porównywaniu nazw klas tabel dodałem zamianę na małe literki

if(tbls[ i].className.toLowerCase() == "contentpaneopen")

- na wypadek, gdyby na jakiejś podstronie klasa nazywała się np. "ContentPaneOpen".

Dodam tylko, że na stronie odnajdywane są dwie tabelki przynależące do wspomnianej klasy - i najpierw zaznaczana jest zawartość pierwszej tabelki, a dopiero potem tej, co nas interesuje - ale skoro pamiętane jest tylko ostatnie zaznaczenie, to nie powinno to sprawić problemów.
Jeśli tabelka nie miałaby nazwy klasy, to można by ją odnajdywać np. po tym, że występuje w niej tytuł piosenki podany także np. w tytule strony lub korzystać z tego, że jest to chyba zawsze 8 tabelka na stronie (tbls[7]).

Pozdrawiam,
Mirek

Update: Przy testowaniu na innych piosenkach widzę, że tytuł piosenki nie zawsze jest podawany (dodatkowo) wewnątrz odszukanej tabelki - natomiast występuję w poprzedniej tabelce...
W takim wypadku wypadałoby pokombinować z funkcjami:
range.setStart(selectionObject.anchorNode, selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode, selectionObject.focusOffset);
i ewentualnie wcześniej usunąć niepotrzebne elementy między tytułem a tekstem - np.: coś w stylu tbls[i].rows[0].deleteCell(1);

[justuser]

dziekuje bardzo, w prawdzie nie dziala z autocopy ale jest wysmienite