Extending WikiEditor toolbar

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Extending WikiEditor toolbar

Alex Zaddach
I'm the developer of the "RefToolbar" gadget on the English Wikipedia,
which adds additional functionality to the editing toolbar to add
references. The script itself is at
http://en.wikipedia.org/wiki/User:Mr.Z-man/refToolbar_2.0.js with some
more in the /base.js subpage imported near the top.

It adds an additional section to the toolbar with a dialog for common
reference templates.

I tried to integrate it as neatly as possible, though the lack of
documentation hasn't helped. Everything works fine, except when using
IE. In IE, it just inserts the ref in some random location on the page,
sometimes *near* where the cursor/highlight is, but sometimes its not
even close. It seems to work differently with different compatibility
mode settings, but even that isn't consistent. I've looked at some of
the WikiEditor code and can't figure out why it isn't working, when the
other dialogs in the standard toolbar work just fine.

The relevant code, from the dialog object:

        buttons: {
          'cite-form-submit': function() {
            var ref = CiteTB.getRef(false, true);
            $j.wikiEditor.modules.toolbar.fn.doAction( $j(this).data(
'context' ), {
              type: 'replace',
              options: {
                pre: ref
              }
            }, $j(this) );
            $j(this).dialog( 'close' );
          },


Any thoughts would be appreciated.

--
Alex (wikipedia:en:User:Mr.Z-man)

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Extending WikiEditor toolbar

Krinkle
The simplest way to add an icon to the main bar of the WikiEditor is  
the following:

kCustomMainInsertButton(
        'welcome', //imageId
        'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png' 
, //imageFile
        'Welcome', //speedTip
        '{\{Welcome}\}\~\~\~\~', //tagOpen
        '', //tagClose
        '' //sampleText
);


( requires importing a script[[0]  )

To do it without "insertVectorButtons.js" check it's sourcecode[0] or  
it's documentation[1].
See also:
* http://usability.wikimedia.org/wiki/Toolbar_customization
* http://usability.wikimedia.org/wiki/Toolbar_customization/Library



--
Krinkle

[0] http://meta.wikimedia.org/wiki/User:Krinkle/Scripts/insertVectorButtons.js
[1] http://meta.wikimedia.org/wiki/User:Krinkle/Scripts/insertVectorButtons


Op 16 jan 2011, om 08:16 heeft Alex het volgende geschreven:

> I'm the developer of the "RefToolbar" gadget on the English Wikipedia,
> which adds additional functionality to the editing toolbar to add
> references. The script itself is at
> http://en.wikipedia.org/wiki/User:Mr.Z-man/refToolbar_2.0.js with some
> more in the /base.js subpage imported near the top.
>
> It adds an additional section to the toolbar with a dialog for common
> reference templates.
>
> I tried to integrate it as neatly as possible, though the lack of
> documentation hasn't helped. Everything works fine, except when using
> IE. In IE, it just inserts the ref in some random location on the  
> page,
> sometimes *near* where the cursor/highlight is, but sometimes its not
> even close. It seems to work differently with different compatibility
> mode settings, but even that isn't consistent. I've looked at some of
> the WikiEditor code and can't figure out why it isn't working, when  
> the
> other dialogs in the standard toolbar work just fine.
>
> The relevant code, from the dialog object:
>
>        buttons: {
>          'cite-form-submit': function() {
>            var ref = CiteTB.getRef(false, true);
>            $j.wikiEditor.modules.toolbar.fn.doAction( $j(this).data(
> 'context' ), {
>              type: 'replace',
>              options: {
>                pre: ref
>              }
>            }, $j(this) );
>            $j(this).dialog( 'close' );
>          },
>
>
> Any thoughts would be appreciated.
>
> --
> Alex (wikipedia:en:User:Mr.Z-man)
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Extending WikiEditor toolbar

Alex Zaddach
Adding the stuff to the toolbar works fine. The problem is inserting
things into the article's wikitext. As far as I can tell, I'm doing it
exactly the same way as the other dialogs in the toolbar, and it works
the same in every browser except IE.

--
Alex (wikipedia:en:User:Mr.Z-man)

On 1/16/2011 8:50 AM, Krinkle wrote:

> The simplest way to add an icon to the main bar of the WikiEditor is  
> the following:
>
> kCustomMainInsertButton(
> 'welcome', //imageId
> 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png' 
> , //imageFile
> 'Welcome', //speedTip
> '{\{Welcome}\}\~\~\~\~', //tagOpen
> '', //tagClose
> '' //sampleText
> );
>
>
> ( requires importing a script[[0]  )
>
> To do it without "insertVectorButtons.js" check it's sourcecode[0] or  
> it's documentation[1].
> See also:
> * http://usability.wikimedia.org/wiki/Toolbar_customization
> * http://usability.wikimedia.org/wiki/Toolbar_customization/Library
>
>
>
> --
> Krinkle
>
> [0] http://meta.wikimedia.org/wiki/User:Krinkle/Scripts/insertVectorButtons.js
> [1] http://meta.wikimedia.org/wiki/User:Krinkle/Scripts/insertVectorButtons
>
>
> Op 16 jan 2011, om 08:16 heeft Alex het volgende geschreven:
>
>> I'm the developer of the "RefToolbar" gadget on the English Wikipedia,
>> which adds additional functionality to the editing toolbar to add
>> references. The script itself is at
>> http://en.wikipedia.org/wiki/User:Mr.Z-man/refToolbar_2.0.js with some
>> more in the /base.js subpage imported near the top.
>>
>> It adds an additional section to the toolbar with a dialog for common
>> reference templates.
>>
>> I tried to integrate it as neatly as possible, though the lack of
>> documentation hasn't helped. Everything works fine, except when using
>> IE. In IE, it just inserts the ref in some random location on the  
>> page,
>> sometimes *near* where the cursor/highlight is, but sometimes its not
>> even close. It seems to work differently with different compatibility
>> mode settings, but even that isn't consistent. I've looked at some of
>> the WikiEditor code and can't figure out why it isn't working, when  
>> the
>> other dialogs in the standard toolbar work just fine.
>>
>> The relevant code, from the dialog object:
>>
>>        buttons: {
>>          'cite-form-submit': function() {
>>            var ref = CiteTB.getRef(false, true);
>>            $j.wikiEditor.modules.toolbar.fn.doAction( $j(this).data(
>> 'context' ), {
>>              type: 'replace',
>>              options: {
>>                pre: ref
>>              }
>>            }, $j(this) );
>>            $j(this).dialog( 'close' );
>>          },
>>
>>
>> Any thoughts would be appreciated.
>>
>> --
>> Alex (wikipedia:en:User:Mr.Z-man)
>>
>> _______________________________________________
>> Wikitech-l mailing list
>> [hidden email]
>> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Extending WikiEditor toolbar

Roan Kattouw-2
In reply to this post by Alex Zaddach
2011/1/16 Alex <[hidden email]>:
> I tried to integrate it as neatly as possible, though the lack of
> documentation hasn't helped. Everything works fine, except when using
> IE. In IE, it just inserts the ref in some random location on the page,
> sometimes *near* where the cursor/highlight is, but sometimes its not
> even close. It seems to work differently with different compatibility
> mode settings, but even that isn't consistent. I've looked at some of
> the WikiEditor code and can't figure out why it isn't working, when the
> other dialogs in the standard toolbar work just fine.
>
Yeah IE has some nasty issues with selections.

Have you tried calling .dialog( 'close' ) before doAction() instead of
after? That's the only difference I can find between your code and the
built-in dialogs.

Roan Kattouw (Catrope)

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Extending WikiEditor toolbar

Alex Zaddach
On 1/17/2011 2:02 PM, Roan Kattouw wrote:

> 2011/1/16 Alex <[hidden email]>:
>> I tried to integrate it as neatly as possible, though the lack of
>> documentation hasn't helped. Everything works fine, except when using
>> IE. In IE, it just inserts the ref in some random location on the page,
>> sometimes *near* where the cursor/highlight is, but sometimes its not
>> even close. It seems to work differently with different compatibility
>> mode settings, but even that isn't consistent. I've looked at some of
>> the WikiEditor code and can't figure out why it isn't working, when the
>> other dialogs in the standard toolbar work just fine.
>>
> Yeah IE has some nasty issues with selections.
>
> Have you tried calling .dialog( 'close' ) before doAction() instead of
> after? That's the only difference I can find between your code and the
> built-in dialogs.
>

No, that still didn't fix it. From some further testing, it looks like
the regular dialogs are also broken in the current IE9 beta when using
IE9 standards document mode.

However, I found my dialogs do work in IE (except in IE9 standards mode)
if some text is actually selected. It seems to forget the cursor
position if nothing is selected and just places it randomly.

--
Alex (wikipedia:en:User:Mr.Z-man)

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Extending WikiEditor toolbar

Alex Zaddach
On 1/17/2011 3:17 PM, Alex wrote:

> On 1/17/2011 2:02 PM, Roan Kattouw wrote:
>> 2011/1/16 Alex <[hidden email]>:
>>> I tried to integrate it as neatly as possible, though the lack of
>>> documentation hasn't helped. Everything works fine, except when using
>>> IE. In IE, it just inserts the ref in some random location on the page,
>>> sometimes *near* where the cursor/highlight is, but sometimes its not
>>> even close. It seems to work differently with different compatibility
>>> mode settings, but even that isn't consistent. I've looked at some of
>>> the WikiEditor code and can't figure out why it isn't working, when the
>>> other dialogs in the standard toolbar work just fine.
>>>
>> Yeah IE has some nasty issues with selections.
>>
>> Have you tried calling .dialog( 'close' ) before doAction() instead of
>> after? That's the only difference I can find between your code and the
>> built-in dialogs.
>>
>
> No, that still didn't fix it. From some further testing, it looks like
> the regular dialogs are also broken in the current IE9 beta when using
> IE9 standards document mode.
>
> However, I found my dialogs do work in IE (except in IE9 standards mode)
> if some text is actually selected. It seems to forget the cursor
> position if nothing is selected and just places it randomly.
>

Based on this discovery, I tested a complete shot in the dark, and
managed to fix it (or at least work around it). Before inserting the
actual content, I have it insert a single space. Why it works I'm not
entirely sure, but it does. The code is now:

        buttons: {
          'cite-form-submit': function() {
            $j.wikiEditor.modules.toolbar.fn.doAction( $j(this).data(
'context' ), {
              type: 'encapsulate',
              options: {
                peri: ' '
              }
            }, $j(this) );
            var ref = CiteTB.getRef(false, true);
            $j(this).dialog( 'close' );
            $j.wikiEditor.modules.toolbar.fn.doAction( $j(this).data(
'context' ), {
              type: 'encapsulate',
              options: {
                pre: ref
              }
            }, $j(this) );
          },


I've filed a bug for the IE9 standards mode issue that affects all the
dialogs (not just mine).
https://bugzilla.wikimedia.org/show_bug.cgi?id=26785

--
Alex (wikipedia:en:User:Mr.Z-man)

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l