Author Topic: [SOLVED] Howto use "rcube_splitter()"?  (Read 5669 times)

Offline Loguithat1955

  • Full Member
  • ***
  • Posts: 54
[SOLVED] Howto use "rcube_splitter()"?
« on: February 10, 2018, 07:17:29 AM »
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?
« Last Edit: February 12, 2018, 02:16:30 AM by Loguithat1955 »

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Howto use "rcube_splitter()"?
« Reply #1 on: February 10, 2018, 12:16:01 PM »
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
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline Loguithat1955

  • Full Member
  • ***
  • Posts: 54
Re: Howto use "rcube_splitter()"?
« Reply #2 on: February 10, 2018, 04:00:30 PM »
Hi JohnDo, thx for your response. Just before the closing body tag, i have

Code: [Select]
<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]
<div id="sidebar" class="uibox listbox"> and directly the next div is
Code: [Select]
<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.

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Howto use "rcube_splitter()"?
« Reply #3 on: February 11, 2018, 02:38:11 AM »
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?
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline Loguithat1955

  • Full Member
  • ***
  • Posts: 54
Re: Howto use "rcube_splitter()"?
« Reply #4 on: February 11, 2018, 06:45:46 AM »
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...

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Howto use "rcube_splitter()"?
« Reply #5 on: February 11, 2018, 08:11:12 AM »
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?
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline Loguithat1955

  • Full Member
  • ***
  • Posts: 54
Re: Howto use "rcube_splitter()"?
« Reply #6 on: February 11, 2018, 08:19:36 AM »
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.

Offline JohnDoh

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2,845
Re: Howto use "rcube_splitter()"?
« Reply #7 on: February 11, 2018, 09:31:04 AM »
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.
Roundcube Plugins: Contextmenu, SpamAssassin Prefs, and more…

Offline Loguithat1955

  • Full Member
  • ***
  • Posts: 54
Re: Howto use "rcube_splitter()"?
« Reply #8 on: February 12, 2018, 02:16:09 AM »
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.