[SOLVED] Howto use "rcube_splitter()"?

[Loguithat1955]

I would like to add a splitter between some divs in one of my plugins. After seeing how this is done in other plugins, i have found that there is special additional div added with the help of a javascript function "rcube_splitter()". I have tried to add this also to my plugin but the special "resize div" wan't added between my re-sizable divs. In the webconsole there is no error message and if i add a simple alert('test'); to the "rcube_splitter()" function in the original .js file, this alertbox appears also on my screen. So i assume the function is called. But the special div does not appear. Can anyone please give me some hints?

[JohnDoh]

have you init'd the splitter? something like this https://github.com/roundcube/roundcubemail/blob/master/plugins/managesieve/skins/larry/templates/managesieve.html#L79

note: this example is for the Larry skin, as this is a skin function rather than a core one its dover slightly differently in the classic skin but if you look in the corresponding template for that skin you'll find a similar example

[Loguithat1955]

Hi JohnDo, thx for your response. Just before the closing body tag, i have

Code Select Expand

<script>
        new rcube_splitter({ id:'notessplitter', p1:'#sidebar', p2:'#main', orientation:'v', relative:true, start:400, min:300, size:12 }).init();
</script>

In the body, i have of course both divs:

Code Select Expand

<div id="sidebar" class="uibox listbox"> and directly the next div is

Code Select Expand

<div class="main uibox contentbox">. I have included the ui.js and ui.css files, both are found and loaded, since i get the small box from alert(); which i have inserted into the function rcube_splitter in ui.js. So i assume, the function is called correctly, but the div isnt inserted. The only difference is, that in managesieve plugin, the file is a template and in my case, i call it in a php file itself (which renders the html in my plugin currently). You can see the file at https://github.com/Offerel/roundcube_primitivenotes/blob/master/notes.php. Currently the changes for the splitter are not committed. If you want, i can commit them, but then i need to comment the relevant part, so that they arent executed, when a user calls them. or i make a new branch... i think a new branch could be useful for this. i will see, if i have the time for this tomorrow.

[JohnDoh]

In the HTML in notes.php you do not include Larry's ui.js anywhere that I can see. Are you sure the alert() box is coming from inside the iframe rather than the parent?

[Loguithat1955]

Sorry, i hadn't uploaded the branch as of yet: you can find the init in the new branch on line 581 and the reference to ui.js at line 513. I think the splitter should be inserted now directly between line 568 and 569, because the second div starts at line 569.

I hope i have committed this correctly...

[JohnDoh]

the js where you init rcube_splitter says the second div needs to have an id of main but it doesn't. in the html it doesn't have any id at all. could that be it?

[Loguithat1955]

Ahh good finding, but if i add such a id to the second div, does not change anything. Maybe this works only in a template file. I hope not.

[JohnDoh]

I probably should have done this to start with rather than just guessing but I have not tried runing your code. Did you check the browser console for JS errors? I think is a bit to do with the fact you are outside of the template system but after I add the missing id I noticed there is an error in the console about `bw` not being defined. Before you include skins/larry/ui.js you also need common.js from <rc root>/program/js/. Then the JS errors in ui.js will be solved and the splitter will load. After that you'll need to sort out the CSS for your 2 divs to have everything displayed just right but hopefully you can do that by refering to existing code.

[Loguithat1955]

Hmm thats strange. In my tests before, there was no such error on the js websonsole. Now im on a new computer, and there i see it. I have now included the common.js and the "splitter div" appears and is functional. Thx for that hint. Maybe this was some caching issue. Now i have additional errors in the websonsole, but im sure i could solve this. Again many thx for your help.