Forum Discussion

msavage's avatar
msavage
Expert
13 years ago

Default polls module to 'open' state

I don't think there's any direct access to modify the code for the Polls modules, but does anyone have a workaround for changing this default behavior?  By default, lithium only displays the poll question and a 'vote' link.  Clicking 'vote' explands the poll to show all of the voting options.  I'd like to set this 'open' state as the default, as it's more likely to draw attention and encourage participation.  The only options I see for tinkering with it are the header/footer HTML sections of the poll itself or JS for the entire page/site.  Any ideas?

  • Hi msavage,

     

    Here are a couple of options I've thought up....

     

    Option 1: A little bit of JS

     

    Our poll component uses jQuery to toggle hiding and showing the results. You could add your own custom component containing some jQuery to "undo" the default togging. Perhaps something like:

     

    <@liaAddScript>
    (function ($) {
    	$(document).ready(function() {
    		$('.lia-show-trigger').hide();
    		$('.lia-hide-trigger').show();
    		$('.lia-toggler-component').show();
    	});
     }(LITHIUM.jQuery));
    </@liaAddScript>

     

    To me this approach seems fairly clean, and fairly easy. I'd definitely suggest some testing to ensure it's working exactly as you expect.

     

    Option 2: Build your own polls component 

     

    It's a little less than ideal, but if you don't want to tinker with JS... There's a an additional poll component in our platform, separate from the one you'll find in Studio, called forums.widget.poll-component. This component requires a pollId parameter corresponding to the internal id of the poll, but also accepts a parameter called initiallyHidden which can be set to true or false.

     

    If you're using this component inside your own custom component, it would look something like:

    <@component id="forums.widget.poll-component" pollId="82" initiallyHidden="false"/>

     Where 82 is the id of the poll you'd like to display.

     

    A few caveats (why this is a little less than ideal)...

     

    First, this component doesn't have a wrapper like the standard component (ie. no title, no borders, minimal styling). That's why I suggested placing it inside your own custom component instead of directly in a Page via Studio. What this means is that if you would like a wrapper, you'll need to construct that HTML and place this component inside of it.

     

    Second, using this just as I've mentioned above will require obtaining the poll id and manually updating it. With a combination of freemarker and the REST API, you should be able to automate this. For example, you could use the REST API method polls/active to obtain a list of all the currently active polls for that particular node. You could then iterate through the list of polls and add a component for each.

     

    Putting it all together, your custom component might look something like this (psuedocode)

    <HTML for wrapper>
    
    <REST API call to polls/active for the desired node>
    
    <#list polls.poll as poll>
    
         <@component id="forums.widget.poll-component" pollId="${poll.id}" initiallyHidden="false"/>
    
    </#list>
    
    <HTML for wrapper>

     

    If you decide to go with Option 2 and need more help thinking through the code, just let me know.

     

    I hope this helps!

  • AdamN's avatar
    AdamN
    Khoros Oracle

    Hi msavage,

     

    Here are a couple of options I've thought up....

     

    Option 1: A little bit of JS

     

    Our poll component uses jQuery to toggle hiding and showing the results. You could add your own custom component containing some jQuery to "undo" the default togging. Perhaps something like:

     

    <@liaAddScript>
    (function ($) {
    	$(document).ready(function() {
    		$('.lia-show-trigger').hide();
    		$('.lia-hide-trigger').show();
    		$('.lia-toggler-component').show();
    	});
     }(LITHIUM.jQuery));
    </@liaAddScript>

     

    To me this approach seems fairly clean, and fairly easy. I'd definitely suggest some testing to ensure it's working exactly as you expect.

     

    Option 2: Build your own polls component 

     

    It's a little less than ideal, but if you don't want to tinker with JS... There's a an additional poll component in our platform, separate from the one you'll find in Studio, called forums.widget.poll-component. This component requires a pollId parameter corresponding to the internal id of the poll, but also accepts a parameter called initiallyHidden which can be set to true or false.

     

    If you're using this component inside your own custom component, it would look something like:

    <@component id="forums.widget.poll-component" pollId="82" initiallyHidden="false"/>

     Where 82 is the id of the poll you'd like to display.

     

    A few caveats (why this is a little less than ideal)...

     

    First, this component doesn't have a wrapper like the standard component (ie. no title, no borders, minimal styling). That's why I suggested placing it inside your own custom component instead of directly in a Page via Studio. What this means is that if you would like a wrapper, you'll need to construct that HTML and place this component inside of it.

     

    Second, using this just as I've mentioned above will require obtaining the poll id and manually updating it. With a combination of freemarker and the REST API, you should be able to automate this. For example, you could use the REST API method polls/active to obtain a list of all the currently active polls for that particular node. You could then iterate through the list of polls and add a component for each.

     

    Putting it all together, your custom component might look something like this (psuedocode)

    <HTML for wrapper>
    
    <REST API call to polls/active for the desired node>
    
    <#list polls.poll as poll>
    
         <@component id="forums.widget.poll-component" pollId="${poll.id}" initiallyHidden="false"/>
    
    </#list>
    
    <HTML for wrapper>

     

    If you decide to go with Option 2 and need more help thinking through the code, just let me know.

     

    I hope this helps!