Author Topic: Droplet idea (help needed)  (Read 3541 times)

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Droplet idea (help needed)
« on: July 03, 2012, 02:36:15 PM »
I have an idea for a droplet that shows a jQuery tabbed field for multiple WYSIWYG sections. What I envision is this:
1. create the WB sections for all tabbed contents you need. Let's say you want to show info on 3 products. So you create 3 sections with content, that show up when you click on the tabs: Product 1, Product 2, Product 3.  
2. use a droplet like [[ShowTabs?section=10,11,12&tabs=Product 1, Product 2, Product 3]]

And then the droplet adds all markup needed (of course you need jquery and the jquery call active, and css for the tabs). Maybe even extra class and id parameters can be added to the droplet, for extra styling options.

I think maybe http://www.websitebakers.com/pages/droplets/official-library/content/show-multiple-wysiwyg.php may be a good starting point for this droplet.

For the tabs I think it's best to use some standard like http://jqueryui.com/demos/tabs/ or http://jquerytools.org/demos/tabs/index.html

To prevent the tabbed sections be visible on the page as regular sections as well, you can just set their end dates in the past. That way they don't show up, but they can still be called with a droplet.

I have tried to do this myself based on the ShowMultipleWYSIWYG droplet, but failed miserably. My coding knowledge is too minimal... But I have a feeling this won't be too difficult to do for some experienced WB coders...  :wink:
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline BlackBird

  • Posts: 2573
Re: Droplet idea (help needed)
« Reply #1 on: July 03, 2012, 07:49:00 PM »
I'm sure I can help, you may contact me by PN.

Offline pcwacht

  • Posts: 2923
  • Gender: Male
    • Dutch ICT info
Re: Droplet idea (help needed)
« Reply #2 on: July 03, 2012, 09:13:27 PM »
Could help as well.

You both know my info ;)
http://www.ictwacht.nl = Dutch ICT info
http://www.pcwacht.nl = My first
both still work in progress, since years.....

Offline BlackBird

  • Posts: 2573
Re: Droplet idea (help needed)
« Reply #3 on: July 04, 2012, 12:15:20 PM »
Some thoughts about this: I've converted existing HTML into Tabbed by using jQuery in the past. So there may be no need to set publishing dates in the past or something. Advantage: The tabs are only shown if jQuery / JavaScript is available, while the user sees a "normal" page if it isn't. (Same for browsers that are not able to show tabs correctly, like old IE.)

I use this technique for FormBuilder input forms, in wbProfiles, for example.

The advantage of the droplet solution is that one could choose sections from different pages for this and add custom headers (=tab text).

Maybe we should combine these methods.

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: Droplet idea (help needed)
« Reply #4 on: July 04, 2012, 11:18:22 PM »
I agree the date workaround is lousy. I'm working on a little droplet for showing infoboxes within a WYSIWYG section using droplets. I just use a block name for the infobox content sections, that is not hardcoded and used in the template. So it doesn't show up unless you call it with the droplet.

I'm going to try a little more with that droplet (adding parameters for classes for example) and if that all
works out, I maybe can try again for the tabs-doplet. I have to try a bit longer before asking for your help  :wink:
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline BlackBird

  • Posts: 2573
Re: Droplet idea (help needed)
« Reply #5 on: July 05, 2012, 11:01:19 AM »
You know where to find us. :-D

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: Droplet idea (help needed)
« Reply #6 on: July 07, 2012, 01:54:11 PM »
Allmost there... I need to output this basic code:

Code: [Select]
<div>
    <ul class="tabs">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>
    <div class="pane">Content 1</div>
    <div class="pane">Content 2</div>
    <div class="pane">Content 3</div>
</div>

Right now I have this droplet:
Code: [Select]
<?php // this line is not part of the droplet, but just to color the code below

$tabs .= '<li><a href="#">'.$tab.'</a></li>';

global 
$database$wb;
$sections=explode(",",$section);
reset($sections);
array_unshift($sections," ");
while(
$sectionid=next($sections)){
$get_content $database->query("SELECT content FROM ".TABLE_PREFIX."mod_wysiwyg WHERE section_id = '$sectionid'");
while ( $fetch_content $get_content->fetchRow()){
$contentlist .= '<div class="pane">'.$content.($fetch_content['content']).'</div>';
}
}
$wb->preprocess($content);
return 
'<div><ul class="tabs">'.$tabs.'</ul>'.$contentlist.'</div>';

It shows the content of the WYSIWYG sections in the rigt place, but the tabs are not there yet. Instead of:
Code: [Select]
    <ul class="tabs">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>

it shows:

Code: [Select]
    <ul class="tabs">
        <li><a href="#">Tab 1,Tab2,Tab3</a></li>
    </ul>

I guess I need to use some loop like is used for the content sections, but I don't succeed in creating it... My droplet call is [[test?tab=Tab 1,Tab2,Tab3&section=47,48,49]]

Please give me a hand here  :roll:
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline marmot

  • Posts: 1103
Re: Droplet idea (help needed)
« Reply #7 on: July 07, 2012, 05:12:39 PM »
Hi,

I guess I need to use some loop like is used for the content sections, but I don't succeed in creating it... My droplet call is [[test?tab=Tab 1,Tab2,Tab3&section=47,48,49]]
Please give me a hand here
you already have the loop running. Just use it in the way you did for sections: Split the tab string and build the code for class tabs in every iteration. It could look like this (untested):
Code: [Select]
<?php // this line is not part of the droplet, but just to color the code below

$atabs explode(",",$tab);
$stabs '';

global 
$database$wb;
$sections=explode(",",$section);
reset($sections);
array_unshift($sections," ");
while(
$sectionid=next($sections)){
$stabs .= '<li><a href="#">'.(array_shift($atabs)).'</a></li>';
$get_content $database->query("SELECT content FROM ".TABLE_PREFIX."mod_wysiwyg WHERE section_id = '$sectionid'");
while ( $fetch_content $get_content->fetchRow()){
$contentlist .= '<div class="pane">'.$content.($fetch_content['content']).'</div>';
}
}
$wb->preprocess($content);
return 
'<div><ul class="tabs">'.$stabs.'</ul>'.$contentlist.'</div>';

regards

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: Droplet idea (help needed)
« Reply #8 on: July 07, 2012, 05:24:41 PM »
It works! Thank alot Marmot  :-D

I'm no coder, and I managed with copy/paste and trial&error to get half of it running, but I don't really have a clue how it all works. I spent about 6 hours trying, but I didn't succeed. I'll study the code and hopefully I learn a little bit from it...  :roll:
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: Droplet idea (help needed)
« Reply #9 on: July 07, 2012, 06:02:07 PM »
Allright, the first version is public. It works great, if I may say so  :-D

You can choose between a tabbed version, or an accordion.

You can find it here: http://www.argosmedia.net/wb/pages/droplets/tabby.php
« Last Edit: July 10, 2012, 05:19:06 PM by Argos »
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

 

postern-length