[pmwiki-devel] How to create a GUIEdit button using Javascript

[Randy Brown]

This works., thank you!

One problem: The img code you suggested doesn't find my icon. If I use both buttons, my previous code's button shows its icon, while the new code shows an icon-not-found image. Perhaps this is related to doing this outside of SDVA? I don't know how to fix it.

Randy

On Sep 19, 2014, at 6:38 PM, Petko Yotov <5ko at 5ko.fr> wrote:

> See the page http://www.pmwiki.org/wiki/Test/GUIButtons?action=edit and the last button there "Test JS".
> 
> You can insert any HTML in the GUI Edit toolbar. If the fourth element of the array starts with "<", it is inserted as-is, without relying on the function insButton().
> 
> So, we define the button in a local config file:
> 
> $GUIButtons['test-js'] = array(5000, '', '', 'Test-JS',
>  "<input type='button' name='b1' value='Test JS' onclick='MyFunc()' />");
> 
> instead of "<input..." you can have "<img src='$GUIButtonDirUrlFmt/mybuttonicon.png' title='DoXYZ' onclick='MyFunc()'/>" . The onclick part is important, when a user clicks on the button, it will fire your custom function.
> 
> Your custom function can be defined in a javascript included by the skin, or even in the same config file:
> 
> $HTMLFooterFmt['test-js'] = <<<EOF
> <script type="text/javascript">
> function MyFunc(){
>  var r = Math.round(Math.random()*1000);
>  insMarkup(
>     "{(mymarkupexpression "+r+" \\"",
>     "\\")}\\nThe above number is "+r+"\\n",
>     "Default text if none selected");
> }
> </script>
> EOF;
> 
> This custom function creates a random number between 0 and 1000, then calls insMarkup() with the constructed strings to be inserted at the position of the cursor.
> 
> Hope this helps.
> 
> Petko
> 
> On 19.09.2014 08:31, Randy Brown wrote:
>> I would appreciate help from someone who knows Javascript (which I
>> don't).
>> I'm creating a GUIEdit button that adds a markup expression containing
>> a random number and text containing the same number.
>> If I select in my edit form:
>> My text
>> and then click my guiedit button, I want a result like this:
>> {(mymarkupexpression 2 "My text")}
>> The above number is 2
>> Here's approximately what I've written to do this. Unfortunately, what
>> I wrote uses the same number for each page load rather than for each
>> button click. I want the number to change with each button click:
>> $num = rand ( 1, 1000 );
>> SDVA($GUIButtons, array(
>> 'mybutton' => array(8000, "{(mymarkupexpression ".$num." "",
>> "")}\nThe above number is ".$num."\n [1]", '$[Default text if
>> none selected]',
>> '$GUIButtonDirUrlFmt/mybuttonicon.png"$[DoXYZ]"','')
>> ));
>> $HTMLHeaderFmt['DoXYZ']= <<<EOF
>> <script type='text/javascript'><!--
>> function DoXYZ() {
>> I IMAGINE THERE IS A WAY TO DO THIS IN JAVASCRIPT
>> return;
>> }
>> //--></script>
>> EOF;
>> Thanks,
>> Randy
>> Links:
>> ------
>> [1] smb://n
>> _______________________________________________
>> pmwiki-devel mailing list
>> pmwiki-devel at pmichaud.com
>> http://www.pmichaud.com/mailman/listinfo/pmwiki-devel
> 
> _______________________________________________
> pmwiki-devel mailing list
> pmwiki-devel at pmichaud.com
> http://www.pmichaud.com/mailman/listinfo/pmwiki-devel