Χρήστης:ArielGlenn/Προσθήκη στοιχείων στην εργαλειοθήκη επεξεργασίας

Προσθήκη στοιχείων στην εργαλειοθήκη επεξεργασίας κατά το Vector

Η μέθοδος που χρησιμοποιούμε για να προσθέσουμε κουμπιά, πρότυπα και ειδικούς χαρακτήρες στα Edittools για το Monobook δουλεύει στο Vector με τον ίδιον τρόπο και βάζει τα καινούργια μας στοιχεία κάτω από τη φόρμα επεξεργασίας, όπως στο Monobook. Αν θέλουμε να προσθέσουμε αυτά τα στοιχεία στην εργαλειοθήκη που εμφανίζεται πάνω από τη φόρμα επεξεργασίας, θα πρέπει να γράψουμε κώδικα για το προσωπικό μας vector.js.

Η συνάρτηση που θα ενεργοποιήσει τα εργαλεία μας

Θα φτιάξουμε λοιπόν τον εξής κώδικα:

if ( typeof $j != 'undefined' && typeof $j.fn.wikiEditor != 'undefined' ) {
    $j( document ).ready( function() {
    });
}

Η γραμμή if ( typeof $j != 'undefined' && typeof $j.fn.wikiEditor != 'undefined' ) ελέγχει την παρουσία της εργαλειοθήκης στη σελίδα. Αν δεν υπάρχει, δεν θέλουμε να προσθέσουμε τίποτα (θα προκαλούσε σφάλμα).

Η επόμενη γραμμή εκτελεί τις υπόλοιπες εντολές όταν έχει φορτωθεί η σελίδα.

Η δημιουργία καινούργιου τμήματος για κουμπιά

Τι θα βάλουμε στη θέση των τελειών; Πρέπει να δημιουργήσουμε το σύνδεσμο που φαίνεται στην μπάρα της εργαλειοθήκης (παρόμοιο με τα "Προχωρημένο" και "Ειδικοί Χαρακτήρες"). Ο σύνδεσμος θα μας ανοίξει έναν πίνακα κάτω από την μπάρα, το οποίο θα περιέχει τα στοιχεία μας. Υπάρχουν πίνακες δύο ειδών, για κουμπάκια και για σειρές χαρακτήρων ή προτύπων.

Αν θέλουμε να βάλουμε κουμπάκια, όπως φαίνονται όταν πατήσουμε το "Προχωρημένο", γράφουμε:

	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'sections': {
			'όνομα-τμήματος': {
				'type': 'toolbar',
				'label': 'όνομα-συνδέσμου'
			}
		}
	} );

Διαλέγουμε το είδος «toolbar» για κουμπάκια. Στη θέση του «όνομα-τμήματος» γράφουμε κάτι που περιγράφει τα κουμπάκια που θα βάλουμε εκεί, πχ. 'personal-buttons', και για το όνομα του συνδέσμου γράφουμε το κείμενο που θέλουμε να εμφανίζεται στην εργαλειοθήκη, πχ. 'Προσωπικά'.

Η δημιουργία ομάδας κουμπιών

Τα κουμπάκια ανήκουν σε ομάδες, και κάθε ομάδα έχει από μια ταμπέλα (ένα μικρό κείμενο που μπαίνει μπροστά τους και περιγράφει τη λειτουργία τους). Για παράδειγμα, στο «Προχωρημένο» βλέπουμε «Λίστα» πριν από τα τρία κουμπάκια με εικονίδια για λίστες. Προσθέτουμε μια ομάδα με τον παρακάτω κώδικα:

	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'section': 'όνομα-τμήματος',
		'groups': {
			'όνομα-ομάδας': {
				'label': 'περιγραφή'
			}
		}
	} );

Το «όνομα-τμήματος» θα πρέπει να είναι ίδιο με το όνομα που βάλαμε προηγουμένως, το «όνομα-ομάδας» είναι ένα ενδεικτικό όνομα για την ομάδα, πχ. 'miscellaneous', και το «περιγραφή» είναι το κείμενο που θα φαίνεται δίπλα στα κουμπάκια, πχ. 'Διάφορα'.

Η δημιουργία ενός κουμπιού

Τώρα μπορούμε να προσθέσουμε ένα κουμπί. Ας πούμε ότι θέλουμε ένα κουμπί με εικονίδιο http://upload.wikimedia.org/wikipedia/commons/a/a7/Button_API_%C9%94.png που βάζει το σύμβολο του ΔΦΑ ɔ. (Το συγκεκριμένο σύμβολο είναι διαθέσιμο ήδη στον πίνακα ειδικών χαρακτήρων, αλλά ας πούμε ότι θέλουμε και κουμπί.) Γράφουμε:

	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'section': 'όνομα-τμήματος',
		'group': 'όνομα-ομάδας',
		'tools': {
			'όνομα-εργαλείου': {
				label: 'Προφορά ɔ',
				type: 'button',
				icon: 'http://upload.wikimedia.org/wikipedia/commons/a/a7/Button_API_%C9%94.png',
				action: {
					type: 'encapsulate',
					options: {
						pre: "ɔ" 
					}
				}
			}
		}
	} );

Το «όνομα-τμήματος» και το «όνομα-ομάδας» θα πρέπει να είναι ίδια με αυτά που βάλαμε στις προηγούμενες συναρτήσεις. Το «όνομα-εργαλείου» είναι ενδεικτικό όνομα του κουμπιού, πχ. 'profora-o'. Tο label εμφανίζεται όταν κάνουμε mouse-over, και το κείμενο μετά από το «pre» εισάγεται όταν πατήσουμε το κουμπί.

Παράδειγμα έτοιμο για αντιγραφή-επικόλληση

Αν θέλουμε κι άλλο κουμπί στην ίδια ομάδα, προσθέτουμε άλλο κώδικα παρόμοιο με το τελευταίο κομμάτι.

Αν όχι, οι αλλαγές μας έχουν ως εξής:

if ( typeof $j != 'undefined' && typeof $j.fn.wikiEditor != 'undefined' ) {
    $j( document ).ready( function() {
	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'sections': {
			'personal-stuff': {
				'type': 'toolbar',
				'label': 'Προσωπικά'
			}
		}
	} );
	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'section': 'personal-stuff',
		'groups': {
			'misc': {
				'label': 'Διάφορα'
			}
		}
	} );
	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'section': 'personal-stuff',
		'group': 'misc',
		'tools': {
			'pronunciation-o': {
				label: 'Προφορά ɔ',
				type: 'button',
				icon: 'http://upload.wikimedia.org/wikipedia/commons/a/a7/Button_API_%C9%94.png',
				action: {
					type: 'encapsulate',
					options: {
						pre: "ɔ" 
					}
				}
			}
		}
	} );
    } );
}

Αν θέλετε, μπορείτε να αντιγράψετε τον κώδικα και να τον δοκιμάσετε. Μην ξεχάσετε να κάνετε control-f5 !

Εναλλακτική μέθοδος

Τώρα κοντά σας, μια τοπική συνάρτηση που διευκολύνει την προσθήκη κουμπιών! Τα κουμπάκια θα προστεθούν στο τμήμα «Τοπικό». Έτοιμο παράδειγμα:

function addPersonalEditToolbarItems() {
    addCustomButtonToLocalVectorToolbarButtons('http://upload.wikimedia.org/wikipedia/commons/a/a7/Button_API_%C9%94.png','Προφορά ɔ','ɔ');
}

addOnloadHook(addPersonalEditToolbarItems);

Αν θέλετε να προσθέσετε τα κουμπιά σας σε άλλο τμήμα που δεν υπάρχει, απλώς γράψτε ως 4η παράμετρο το όνομα που θέλετε να φαίνεται στην μπάρα δίπλα στα άλλα (Προχωρημένο, Βοήθεια, Τοπικά κλπ). Παράδειγμα:

function addPersonalEditToolbarItems() {
    addCustomButtonToLocalVectorToolbarButtons('http://upload.wikimedia.org/wikipedia/commons/a/a7/Button_API_%C9%94.png','Προφορά ɔ','ɔ', 'Προσωπικά');
}

addOnloadHook(addPersonalEditToolbarItems);

Αν βάλετε το όνομα ενός υπάρχοντος τμήματος, τα κουμπιά σας θα προστεθούν εκεί. Πχ. αν βάλετε «advanced» θα μπουν στο «Προχωρημένο» και αν βάλετε «local» θα μπουν στο «Τοπικά».

Η δημιουργία τμήματος για σειρές χαρακτήρων ή προτύπων

Αν θέλουμε αντί για κουμπάκια να βάλουμε μια σειρά προτύπων ή ειδικών χαρακτήρων, όπως φαίνονται όταν πατήσουμε το "Ειδικοί χαρακτήρες", γράφουμε:

	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'sections': {
			'όνομα-τμήματος': {
				'type': 'booklet',
				'label': 'όνομα-συνδέσμου'
			}
		}
	} );

Αυτή τη φορά διαλέγουμε τμήμα του είδους «booklet». Στη θέση του «όνομα-τμήματος» γράφουμε περιγραφή των «σελίδων» χαρακτήρων ή προτύπων που θέλουμε να προσθέσουμε, πχ. 'personal-templates', και για το όνομα του συνδέσμου γράφουμε το κείμενο που θέλουμε να εμφανίζεται στην εργαλειοθήκη, πχ. 'Δικά μου πρότυπα'.

Η δημιουργία σελίδας για τα στοιχεία μας

Έπειτα βάζουμε μια «σελίδα» στο booklet με τα στοιχεία που θέλουμε να φαίνονται:

	$j( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
		'section': 'όνομα-τμήματος',
		'pages': {
			'όνομα-σελίδας': {
				'layout': 'characters',
				'label': 'περιγραφή-στοιχείων',
				'characters': [ '\{{PAGENAME}\}', '\{{τ|fr|\{{PAGENAME}\}}\}', 'œ' ]
			}
		}
	} );

Το «όνομα-τμήματος» θα είναι πάλι ίδιο με το όνομα που δώσαμε προηγουμένως και το «όνομα-σελίδας» θα είναι όνομα της ομάδας («σελίδας») χαρακτήρων ή προτύπων, πχ. 'personal-templates'. Για την «περιγραφή-στοιχείων» θα βάλουμε το κείμενο που θα εμφανίζεται στη στήλη αριστερά όταν ο πίνακας είναι ανοικτός, πχ. 'Διάφορα περίεργα'. Δίπλα στο «characters» βάζουμε μέσα σε τετράγωνες αγκύλες και με αποστρόφους τους χαρακτήρες ή τις συμβολοσειρές που θέλουμε. Αν πρόκειται για πρότυπο, πρέπει να βάλουμε κάθετο πριν από τα εξωτερικά άγκιστρα του καθενός, όπως το παράδειγμα.

Μια προειδοποίηση

Αν έχετε τη συνήθεια να αντιγράφετε αρχεία js από άλλους, ή αν άλλοι αντιγράφουν συχνά από εσάς, θα υπάρξει πρόβλημα αν οι συναρτήσεις έχουν το ίδιο όνομα στο δικό σας κώδικα και στον κώδικα που πήρατε εσείς ή που σας αντέγραψαν άλλοι. Επίσης δεν θα έπρεπε δύο τμήματα στην εργαλειοθήκη να έχουν το ίδιο όνομα. Γι' αυτό, διαλέξτε άλλα ονόματα από αυτά στα παραδείγματα εδώ!

Περισσότερες πληροφορίες

Η εργαλειοθήκη και οι σχετικές συναρτήσεις βρίσκονται τώρα σε στάδιο γρήγορης ανάπτυξης. Καλό θα κάνατε να παρακολουθείτε την επίσημη σελίδα για την εξατομίκευσή της (usability:Toolbar_customization). Αν ενδιαφέρεστε για τον κώδικα, μπορείτε να συμβουλευτείτε το svn.