Wikipedysta:Sławek Borewicz/customizeToolbar.js/opis


Wikipedysta:Sławek Borewicz/customizeToolbar.js/opis w encyklopedii

Z Wikipedii, wolnej encyklopedii < Wikipedysta:Sławek Borewicz‎ | customizeToolbar.js Przejdź do nawigacji Przejdź do wyszukiwania

Poniżej znajduje się krótki opis skryptu customizeToolbar.js, który pozwala na rozbudowę własnego paska narzędziowego.

(Opis raczej nieprofesjonalny. Można skorzystać też z opisu rozszerzenia WikiEditor na MediaWiki: mw:Extension:WikiEditor/Toolbar customization) Profesjonalny opis znajduje się na stronie mw:Extension:WikiEditor/Toolbar customization#action.

Spis treści

Przygotowanie przycisków w pasku narzędziowym - testowe | edytuj kod

Aby poszerzyć własny pasek narzędziowy, należy:

1. Na stronie common.js wkleić kod

// Dodanie skrótow do paska edycji importScript('Wikipedysta:Login/customizeToolbar.js'); 

Oczywiście zamiast "Login" wpisać należy nazwę własnego konta. Np. dla użytkownika Jan Kowalski w taki sposób:

// Dodanie skrótow do paska edycji importScript('Wikipedysta:Jan Kowalski/customizeToolbar.js'); 

Strona: Wikipedysta:Login/customizeToolbar.js będzie własną stroną skryptu.


2. Na własnej stronie skryptu customizeToolbar.js (można tu kliknąć, by ją założyć) należy wpisać kod wg poniższego schematu. Można wkleić cały poniższy schemat, aby sprawdzić działanie skryptu. (Oczywiście bez wchodzenia w tryb edycji niniejszej strony opisu).


 // częściowo przeklejone z [[wikt:MediaWiki:Gadget-add-word.js]] (dokładnie z [[Wikipedysta:Peter Bowman/customizeToolbar.js]]) function customizeToolbar() { d=new Date() jQuery( '#wpTextbox1' ).wikiEditor( 'addToToolbar', { 'sections': { 'Dodatek': { 'type': 'toolbar', 'label': 'Dodatek' } } } ); // Sekcja 'Testowy' jQuery( '#wpTextbox1' ).wikiEditor( 'addToToolbar', { 'section': 'Dodatek', 'groups': { 'other': { 'label': 'Pomoc', 'tools': { 'Testowy': { label: 'Testowy', type: 'button', icon: '//upload.wikimedia.org/wikipedia/commons/thumb/9/91/Nuvola_action_edit_add-2.svg/16px-Nuvola_action_edit_add-2.svg.png', action: { type: 'encapsulate', options: { pre: "Testowy przycisk w pasku narzędziowym, wykorzystywany dzięki skryptowi. [[Wikipedysta:Sławek Borewicz/customizeToolbar.js/opis|Tu znajduje się opis działania skryptu]]." } } } } } } } ); } /* Czy widok w trybie edycji i wymagane moduły są załadowane */ if ( [ 'edit', 'submit' ].indexOf( mw.config.get( 'wgAction' ) ) !== -1 ) { mw.loader.using( 'user.options' ).then( function () { // Może być tekst "0" jeśli ustawienie wyłączone ([[phab:T54542#555387]]) if ( mw.user.options.get( 'usebetatoolbar' ) == 1 ) { $.when( mw.loader.using( 'ext.wikiEditor' ), $.ready ).then( customizeToolbar ); } } ); }  

Efekty testowego przycisku | edytuj kod

3. Po wykonaniu powyższych poleceń na pasku narzędziowym powinna pojawić się zakładka: "Dodatek". Zaawansowane ► Znaki specjalne ► Pomoc ► Dodatek

  • Po kliknięciu w nią powinien pojawić się napis "Pomoc", a obok niego ikona . Uwaga do 2018 roku mona było wstawić link za pomocą składni HTML <a href. Teraz (nie ma tego jeszcze w przykładzie) można użyć takiego rozwiązania
  • Po kliknięciu w ikonę powinien pojawić się tekst:

Testowy przycisk w pasku narzędziowym, wykorzystywany dzięki skryptowi. Tu znajduje się opis działania skryptu.

  • Poza tym po najechaniu kursorem na ikonę powinien pojawić się napis "Testowy".

W powyższej instrukcji:

  • na czerwono zaznaczony tekst sekcji, który pojawi się na pasku.
  • na fioletowo oznaczony jest kod ikony przycisku. Podać należy ją w formacie //upload.wikimedia.org/wikipedia/commons/thumb/nazwa grafiki1/16px-Nazwa grafiki2.png, przy czym nazwa grafiki1 to końcówka urla po kliknięciu w grafikę - na stronie grafiki (np. dla tego urla będzie to 8/8b/Feedbin-Icon-settings.svg), natomiast Nazwa grafiki2.png to prostu nazwa grafiki, ale z podkreślnikami - jak w urlu, a jeśli jest to svg, trzeba dodać .png np. dla powyższego Feedbin-Icon-settings.svg.png. Jeśli grafika będzie niewyraźna, można zwiększyć 16px np. do 64px;
  • na zielono zaznaczony jest tekst, który się pojawi po kliknięciu w przycisk

Rozbudowa paska z przyciskami | edytuj kod

4. Więcej przycisków

  • Aby dodać kolejne przyciski, trzeba powielić następującą część kodu:
 // Sekcja 'Testowy' jQuery( '#wpTextbox1' ).wikiEditor( 'addToToolbar', { 'section': 'Dodatek', 'groups': { 'other': { 'label': 'Nazwa sekcji', 'tools': { 'Testowy': { label: 'Testowy', type: 'button', icon: '//upload.wikimedia.org/wikipedia/commons//8/8b/Feedbin-Icon-settings.svg/16px-Feedbin-Icon-settings.svg.png', action: { type: 'encapsulate', options: { pre: "Tu jakiś inny kod. Jak w wyrażeniach regularnych, dla nowego wiersza wpisać należy \n (zamiast kliknięcia w "enter"), można też przed | dodać \, o tak: \|" } } } } } } } );  

To, co jest pokolorowane można zmieniać. Ale 'section': 'Dodatek', musi być takie samo jak w kodzie "nowej zakładki". Na górze tej strony to jest 8 linii rozpoczynających się od jQuery. Jeśli tam zmieni się "Dodatek" na "Coś innego", to aby w zakładce był przyciski w sekcji trzeba zmienić również na 'section': 'Coś innego',

UWAGA Następujący fragment kodu zawsze musi być na dole strony (czyli wklejać należy nad nim):

} /* Czy widok w trybie edycji i wymagane moduły są załadowane */ if ( [ 'edit', 'submit' ].indexOf( mw.config.get( 'wgAction' ) ) !== -1 ) { mw.loader.using( 'user.options' ).then( function () { // Może być tekst "0" jeśli ustawienie wyłączone ([[phab:T54542#555387]]) if ( mw.user.options.get( 'usebetatoolbar' ) == 1 ) { $.when( mw.loader.using( 'ext.wikiEditor' ), $.ready ).then( customizeToolbar ); } } ); } 

Przykłady | edytuj kod

4.1. Przykład: dwa przyciski w sekcji i szablon otaczający tekst

 // Sekcja 'Fakty' jQuery( '#wpTextbox1' ).wikiEditor( 'addToToolbar', { 'section': 'Dodatek', 'groups': { 'other': { 'label': 'Fakty', 'tools': { 'fd': { label: 'Fakty', type: 'button', icon: '//upload.wikimedia.org/wikipedia/commons/thumb/2/21/Citaton-needed-vertical.svg/64px-Citaton-needed-vertical.svg.png', action: { type: 'encapsulate', options: { pre: "{{subst:fd\|", peri: "", post: "}}" } } }, 'zdsekcja': { label: 'zdsekcja', type: 'button', icon: '//upload.wikimedia.org/wikipedia/commons/thumb/6/64/Question_book-4.svg/64px-Question_book-4.svg.png', action: { type: 'encapsulate', options: { pre: "{{dopracować|sekcja|źródła}}" } } } } } } } );  

Pierwszy przycisk pozwala na szybkie otoczenie fragmentu szablonem {[s|fakt}} w taki sposób: {{fakt|tutaj zaznaczony tekst|data=2015-01}}, a drugi na wstawienie {{dopracować|sekcja|źródła}}. Ta sekcja jest zdefiniowana dla zakładki "inne", w kodzie: 'section': 'inne', i użyta w skrypcie na stronie Wikipedysta:Sławek Borewicz/customizeToolbar.js.

4.2. Przykład: przycisk wstawiający szablon z parametrami:

 // Sekcja 'Ilustracje' jQuery( '#wpTextbox1' ).wikiEditor( 'addToToolbar', { 'section': 'Dodatek', 'groups': { 'other': { 'label': 'Ilustracje', 'tools': { 'misc': { label: 'Ilustracje', type: 'button', icon: '//upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Multiple_image_icon.svg/64px-Multiple_image_icon.svg.png', action: { type: 'encapsulate', options: { pre: "{{Grafika rozwinięta\n\| położenie = center\n\| tytuł =", peri: "", post: "\n\| tło = #eeeeee\n\n\| grafika1 = \n\| szerokość1 = {{#expr: (150 * / ) round 0}}\n\| opis1 = \n\n\| grafika2 = \n\| szerokość2 = {{#expr: (150 * / ) round 0}}\n\| opis2 = \n\n| grafika3 = \n\| szerokość3 = {{#expr: (150 * / ) round 0}}\n\| opis3 = \n\n\| grafika4 = \n\| szerokość4 = {{#expr: (150 * / ) round 0}}\n\| opis4 = \n\n\| grafika5 = \n\| szerokość5 = {{#expr: (150 * / ) round 0}}\n\| opis5 = \n}}\n{{clear|left}}" } } } } } } } );  

Ta sekcja również jest zdefiniowana dla zakładki "inne", w kodzie: 'section': 'inne', i użyta w skrypcie na stronie Wikipedysta:Sławek Borewicz/customizeToolbar.js. Po wklejeniu szablon {{Grafika rozwinięta}} kursor ustawia się przy parametrze tytuł =

4.3. Przykład: przycisk wstawiający szablon przypisu z bieżącą datą dostępu:

 // Sekcja 'HYDRO P' jQuery( '#wpTextbox1' ).wikiEditor( 'addToToolbar', { 'section': 'Dodatek', 'groups': { 'HYDRO P': { 'label': 'Hydro p', 'tools': { 'HYDRO P': { label: 'HYDRO P', type: 'button', icon: '//upload.wikimedia.org/wikipedia/commons/thumb/6/63/Contribs_icon.svg/16px-Contribs_icon.svg.png', action: { type: 'encapsulate', options: { pre: '<ref name="hydronimy p">{{cytuj stronę | url = http://ksng.gugik.gov.pl/pliki/hydronimy1.pdf | tytuł = Wykaz nazw wód płynących | opublikowany = [[Główny Urząd Geodezji i Kartografii]] | strony =', peri: "", post: '| data dostępu = '+d.getFullYear()+'-'+(d.getMonth()+1<10 ? '0'+(d.getMonth()+1) : d.getMonth()+1)+'-'+(d.getDate()<10 ? '0'+d.getDate() : d.getDate())+' }}</ref>' } } }, } } } } );  

Kursor ustawia się przy parametrze strony =

Aby data dostępu była wyświetlona wymagana jest w kodzie skryptu linia
d=new Date()
Na górze tej strony już jest - zaznaczona na szaro.

5. Więcej zakładek z przyciskami

  • Analogicznie do powyższego, aby dodać nową zakładkę z przyciskami, zdublować należy kod:


 jQuery( '#wpTextbox1' ).wikiEditor( 'addToToolbar', { 'sections': { 'Nazwa zakładki': { 'type': 'toolbar', 'label': 'Nazwa zakładki' } } } );  
Na podstawie artykułu: "Wikipedysta:Sławek Borewicz/customizeToolbar.js/opis" pochodzącego z Wikipedii
OryginałEdytujHistoria i autorzy