Tijden veranderen
UBBBar Revisited
Met betrekking tot het gebruik van sneltoetsen levert het gebruik van bijvoorbeeld ctrl+b direct [b][/b] op. De cursor wordt nu wel tussen de tags geplaatst maar dat voorkomt niet dat ik na het tikken van de vetgedrukte tekst altijd de pijltjestoetsen moet gebruiken om achter de laatste [/b] tag te komen.
Ik zou het persoonlijk fijner vinden als het indrukken van ctrl+b als er niets geselecteerd is enkel de openingstag oplevert en het wederom intoetsen van ctrl+b de sluitingstab. Op die manier is het mogelijk om (net als in elke texteditor) vetgedrukte tekst te blijven typen en daar vervolgs een einde aan te maken door weer op ctrl+b te drukken.
Verder moet ik zeggen, dat het weer een mooi staaltje werk is. Enkel de de phplookup werkt nog niet helemaal lekker in FF, maar ik neem aan dat die nog niet af was?
in die gele tooltip als je over een afbeelding gaat, staat er [Object object] als die knop geen sneltoets heeft..
PS. ja ik had SIMBL niet staan :$
Klik eens op het link-knopje, zet dan je cursor tussen en , en klik er dan weer op. Er blijft dan een klein 'restantje' over.
En een bug bij je eerste addon:
Als ik iets intyp in het 'zoekvak', krijg ik dit:
Quote:
window.ihgubbbarcallback is not a function
http://phphulp.ikhoefgeen.nl/ubb/revisited/Scripts/function_lookup.php?query=co
Line 48
http://phphulp.ikhoefgeen.nl/ubb/revisited/Scripts/function_lookup.php?query=co
Line 48
En als ik dan annuleren doe, en opnieuw ga proberen, krijg ik dit:
Quote:
window.ihgubbbarcallback is not a function
http://phphulp.ikhoefgeen.nl/ubb/revisited/Scripts/function_lookup.php?query=lo
Line 24
http://phphulp.ikhoefgeen.nl/ubb/revisited/Scripts/function_lookup.php?query=lo
Line 24
Edit:
Op de testpagina doet 'ie het gelukkig wel.
Daarnaast
Trouwens, komt er nog een simpele handleiding hoe je addons maakt? Want in de oude versie heb ik zelf dingen toegevoegd, maar als dat nu via een simpele addon kan, word ik helemaal blij :-)
Gewijzigd op 01/01/1970 01:00:00 door - -
Dat de php-lookup (nog) niet werkt in Firefox komt (wederom) door greasemonkey. Normaal gesproken hang ik een functie aan de window-eigenschap van het document, en haal ik daarna via een script-tag de lijst met suggesties op. Maar greasemonkey heeft wel cross-domain-xhr, dus dat is simpel op te lossen.
En Jonathan, velden als Browser & OS zijn niet verplicht. Dus als je gewoon Windows vermeld ben ik al blij, dan weet ik welk toetsenbordindeling je gebruikt (ctrl of cmd) En als OS of browser wel van belang zijn kan je die natuurlijk gewoon vermelden in het report zelf.
Zodra ik de plugins goed werkend heb, maak ik een kleine documentatie. Als het goed is (en de variabele EXPORT_API is true) dan is heel de namespace IHG beschikbaar in de plugins. En via de IHG.Toolbar.Default kan je alle toolbars op de pagina uitbreiden. Ook als ze al actief zijn.
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -
Ik heb mijn laatste versie even erbij online gezet, ubbbar.user.js. Hij werkt nu zoals Blanche beschreef en om eerlijk te zijn voelt dit echt veel beter aan. Ik was bezig met regular expressions voor de tags zoals voor URL, maar dit werkt nog niet. Daardoor kan hij wat vreemd doen wanneer je bijvoorbeeld een url-tag wilt weghalen met de sneltoets of het knopje. Plaatje & quote werken ook nog niet omdat ik die nog niet vertaald heb naar de nieuwere API voor selecties (hij kan nu veel meer informatie geven omtrent de locatie van de cursor, welke tags eromheen staan, waar die staan etc.)
Worst of all: ik heb hem nog niet getest in greasemonkey, maar ik hoop stiekem dat ik hem niet weer stuk heb gemaakt.
Simpel gezegd is alles wat begint met "IHG" van buitenaf beschikbaar. Via IHG.Toolbar.Default.addButton() kan je nieuwe knopjes aan alle bars toevoegen. Als argument verwacht addButton een instantie van IHG.Toolbar.Button. Button is een hele ingewikkelde klasse die allemaal toeters en bellen aanbiedt die nodig zijn om te bepalen of het knopje moet oplichten, wat er moet gebeuren bij een sneltoets etc. Gelukkig zitten de meeste functies al in deze klasse, en kan je heel simpel je eigen tags toevoegen door een Button te maken met wat parameters:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
with(IHG.Toolbar) {
Default.addButton(new Button({
label: 'Vet',
image: RESOURCES + '/bold.png',
shortcut: Keys.CMD + 'b',
tag: ['[b]', '[/b]']
}));
}
Default.addButton(new Button({
label: 'Vet',
image: RESOURCES + '/bold.png',
shortcut: Keys.CMD + 'b',
tag: ['[b]', '[/b]']
}));
}
label is de naam (de alt-tekst), image is het pad naar een 16 bij 16 plaatje, shortcut is de sneltoets (meestal Keys.CMD + een letter) en tags is een array met 2 elementen: de opentag en de sluittag. Je kan ook nog action & condition meegeven, dit zijn dan functies. action wordt aangeroepen wanneer er op het knopje gedrukt wordt of de sneltoets gebruikt wordt. condition wordt om de zoveel tijd aangeroepen om te bepalen of de knop actief is of niet. Je kan hier het beste even kijken naar regel 757 in het script waar de standaard-condition-callback staat. Je ziet dat this.state 3 verschillende waarden kan hebben, afhankelijk van hoe de selectie gemarkeerd is (arguments[1].selectionController.isMarked)
1) IHG.Toolbar.DISABLED = grijsgemaakt, niet klikbaar
2) IHG.Toolbar.ACTIVE = geel, actief
3) IHG.Toolbar.ENABLED = normaal, beschikbaar.
Je zou misschien nog bezig willen met de draw-method, maar als je zover wilt gaan moet je die handmatig toevoegen aan je instantie van Button, want die kan je niet toevoegen via de constructor. draw kan op 2 manieren aangeroepen worden: met 1 argument, de sender, en 2 argumenten, de sender en een container. De sender is de toolbar waar hij aan gekoppeld is, een instantie van IHG.Toolbar en container is de ul-node van die toolbar. Hij wordt alleen met 2 argumenten aangeroepen bij de eerste keer tekenen, wanneer je hem toevoegt met IHG.Toolbar.Default.addButton. Dit is het moment waarop je je DOMNode voor het knopje gaat maken. Wordt hij alleen met een sender aangeroepen dan betekent dat dat de toolbar (sender) aan het vernieuwen is, en je dus de state moet weergeven. Dit is dus meestal alleen het style-attribuut wat aanpassen. Let op dat deze method heel vaak wordt aangeroepen, dus maak hem zo efficiënt mogelijk.
Verder heb ik nog een paar hulpmethods, IHG.JSONRequest(url, callback) spreekt voor zich, IHG.patch kan je over een DOMNode heen halen om node.on('click', callback) aan te kunnen roepen, en dat werkt dan in IE, Safari & Firefox. IHG.clone is een object kopiëren - zoals 'clone $object' in PHP, maar dat zal je wss niet nodig hebben.
Verder kan ik je alleen maar aanraden om te kijken naar de php addon om te zien hoe je een button moet toevoegen, en de definitie van IHG.Toolbar.Button om te zien hoe hij wordt opgebouwd. En wat rondneuzen in de methods van SelectionController, die geven je alle mogelijke opties met de tekst. Deze zou voor IE, Safari & Firefox moeten werken, al heb ik zo af en toe mijn twijfels :)
Tip: gebruik Firebug, je kan echt niet zonder. Hiermee kan je ook meteen kijken welke klassen & functies allemaal beschikbaar zijn.
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -
Wel heb ik een dingetje:
- Is het mogelijk om een button een bepaald stukje JavaScript-code uit te laten voeren, in plaats van een tekst inserten? Ik wil namelijk een addon maken waarmee je met een druk op de knop Courier als lettertype in de textarea krijgt, zodat inspringen makkelijker gaat.
En een paar bugs in Firefox 2.0.x op Windows XP Professional (staan inmiddels ook in de bugtracker):
- Het knopje voor een [_img_] tag is altijd disabled.
- Als je twee keer achter elkaar op het knopje voor de [_url_] tag klikt, blijft er een rechter-haak over.
- Het knopje voor [_quote_] is altijd disabled.
- Het knopje om in de PHP-documentatie te kijken is altijd disabled.
Gewijzigd op 01/01/1970 01:00:00 door - -
Alleen werkt bij de nieuwe versie in Safari de php lookup plugin niet meer? Het knopje blijft standaard disabled?
Verder werken de opmaak knopjes voor bold, italic, etc. helemaal top met de sneltoetsen. Alleen is wat mij betreft de gebruiksvriendelijkheid van de url functie achteruit gegaan.
In de vorige versie kreeg je bij ctrl+L direct dit in de text area:
Code (php)
1
[url=][/url]
met de cursor op de juiste plaats. Ik vul altijd de url achter de = in en een tekst voor de link tussen de tags. Nu komt er enkel de [url] tag te staan, waardoor je nu zelf die = moet typen.
Je hoort het uiteraard als ik nog meer dingen tegenkom...
Ik werk daar nog aan :)
Zodra ik op enterdruk wordt alles geselecteerd..
Blanche schreef op 01.02.2008 10:21:
Nice Jelmer!
Alleen werkt bij de nieuwe versie in Safari de php lookup plugin niet meer? Het knopje blijft standaard disabled?
Verder werken de opmaak knopjes voor bold, italic, etc. helemaal top met de sneltoetsen. Alleen is wat mij betreft de gebruiksvriendelijkheid van de url functie achteruit gegaan.
In de vorige versie kreeg je bij ctrl+L direct dit in de text area:
met de cursor op de juiste plaats. Ik vul altijd de url achter de = in en een tekst voor de link tussen de tags. Nu komt er enkel de [url] tag te staan, waardoor je nu zelf die = moet typen.
Je hoort het uiteraard als ik nog meer dingen tegenkom...
Alleen werkt bij de nieuwe versie in Safari de php lookup plugin niet meer? Het knopje blijft standaard disabled?
Verder werken de opmaak knopjes voor bold, italic, etc. helemaal top met de sneltoetsen. Alleen is wat mij betreft de gebruiksvriendelijkheid van de url functie achteruit gegaan.
In de vorige versie kreeg je bij ctrl+L direct dit in de text area:
Code (php)
1
[url=][/url]
met de cursor op de juiste plaats. Ik vul altijd de url achter de = in en een tekst voor de link tussen de tags. Nu komt er enkel de [url] tag te staan, waardoor je nu zelf die = moet typen.
Je hoort het uiteraard als ik nog meer dingen tegenkom...
Alternatieve methode (tot de bug er uit is):
1) url naar het prikbord kopiëren
2) linktekst in je post typen en selecteren
3) ctrl + v
Dan staat alles in 1 keer goed.
http://code.google.com/p/ihg-ubbbar/
Ik heb hem als project op Google Code gezet, vooral in de hoop dat anderen er ook mee verder gaan. Heb je tips? Zin? Fouten? Post ze in de issue-tracker, of pm mij even zodat ik je direct toegang kan geven tot de SVN repository, dan kan je je wijzigingen direct doorvoeren.
Op die pagina vind je onder andere een greasemonkey-script dat ik op dit moment van schrijven gebruik, en onder het source tabje kan je de broncode terugvinden. Helaas is op het moment van schrijven alleen Firefox 3 getest en goed werkend bevonden door mij. In Safari zit er een probleempje in de stylesheets, maar dat zou het enige moeten zijn. Internet Explorer en Opera durf ik zo niets over te zeggen.
edit: Waarom staat dit topic eigenlijk bij 'site reviews'. Als een modje dit even naar een wat beter passende categorie kan verplaatsen, bedankt :)
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -
bug?
Gewijzigd op 01/01/1970 01:00:00 door Kay Kay