What are best practices for adding a collapsible section to a theme?

Started by I Agree, January 30, 2011, 07:36:57 PM

Previous topic - Next topic

I Agree

What are best practices for adding a collapsible section to a theme?

I see there is a lot of code in the main index template...


   echo '
   <script type="text/javascript"><!-- // --><![CDATA[
      var oMainHeaderToggle = new smc_Toggle({
         bToggleEnabled: true,
         bCurrentlyCollapsed: ', empty($options['collapse_header']) ? 'false' : 'true', ',
         aSwappableContainers: [
            \'user_section\',
            \'news_section\'
         ],
         aSwapImages: [
            {
               sId: \'upshrink\',
               srcExpanded: smf_images_url + \'/upshrink.gif\',
               altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
               srcCollapsed: smf_images_url + \'/upshrink2.gif\',
               altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
            }
         ],
         oThemeOptions: {
            bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
            sOptionName: \'collapse_header\',
            sSessionVar: ', JavaScriptEscape($context['session_var']), ',
            sSessionId: ', JavaScriptEscape($context['session_id']), '
         },
         oCookieOptions: {
            bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
            sCookieName: \'upshrink\'
         }
      });
   // ]]></script>';


I'm assuming that's repeated for every collapsible button / wonder if it would be better to add the script to the js template file somehow.

The only thing that raises my eyebrow is "$options['collapse_header']" ... I assume there's one of these for each one. Could I just make up a new option right there? Or is there more to it than that?

Anyway. I'd like to be sure I'm doing it right, if anyone is up to help out.

Thanks


Joker™

This is to collapse stats column

// Info center collapse object.
echo '
<script type="text/javascript"><!-- // --><![CDATA[
var oInfoCenterToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: ', empty($options['collapse_header_ic']) ? 'false' : 'true', ',
aSwappableContainers: [
\'upshrinkHeaderIC\'
],
aSwapImages: [
{
sId: \'upshrink_ic\',
srcExpanded: smf_images_url + \'/collapse.gif\',
altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
srcCollapsed: smf_images_url + \'/expand.gif\',
altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
}
],
oThemeOptions: {
bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
sOptionName: \'collapse_header_ic\',
sSessionVar: ', JavaScriptEscape($context['session_var']), ',
sSessionId: ', JavaScriptEscape($context['session_id']), '
},
oCookieOptions: {
bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
sCookieName: \'upshrinkIC\'
}
});
// ]]></script>';
This code is present in BoardIndex.template.php


QuoteThe only thing that raises my eyebrow is "$options['collapse_header']" ... I assume there's one of these for each one. Could I just make up a new option right there? Or is there more to it than that?
Actually for me your question was unclear, can you elaborate a bit more so that we can assist you with the issue.
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

I Agree

I think I have everything replicated, paying mind to the relevant differences between the values. It looks good, except basically the collapse state isn't remembered after reloading. And it defaults to collapsed. And you must then press it twice to get it to expand / begin to behave like the others.

Works the same way while logged out. I don't suppose I've changed anything outside of index.template.php (which is where the collapsible section resides)

If I need to change something elsewhere I'm missing it so far. Thanks for the attention/assistance btw ::)

Joker™

Can you tell me what exactly are you trying to achieve in simplest way, and also can you show me the code you are using.
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

I Agree

Am using the same code you'd posted and which I'd posted prior, as well as all the bits of the index.template.php file that make use of the upshrink setup.


   // We'll have to use the cookie to remember the header...
   if ($context['user']['is_guest'])
   {
      $options['collapse_header'] = !empty($_COOKIE['upshrink']);
      $options['collapse_header_ic'] = !empty($_COOKIE['upshrinkIC']);
      $options['collapse_copyright'] = !empty($_COOKIE['upshrinkC']);
   }




<img id="upshrink_c" src="', $settings['images_url'], '/collapse.gif" alt="*" title="', $txt['upshrink_description'], '" align="bottom" style="display: none; position:absolute; right:13px; top:12px; margin:0; padding:0;" />




   echo '
   <script type="text/javascript"><!-- // --><![CDATA[
      var oMainHeaderToggle = new smc_Toggle({
         bToggleEnabled: true,
         bCurrentlyCollapsed: ', empty($options['collapse_copyright']) ? 'false' : 'true', ',
         aSwappableContainers: [
            \'copyright_section\'
         ],
         aSwapImages: [
            {
               sId: \'upshrink_c\',
               srcExpanded: smf_images_url + \'/collapse.gif\',
               altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
               srcCollapsed: smf_images_url + \'/expand.gif\',
               altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
            }
         ],
         oThemeOptions: {
            bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
            sOptionName: \'collapse_copyright\',
            sSessionVar: ', JavaScriptEscape($context['session_var']), ',
            sSessionId: ', JavaScriptEscape($context['session_id']), '
         },
         oCookieOptions: {
            bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
            sCookieName: \'upshrinkC\'
         }
      });
   // ]]></script>';




That's about it I think.

The idea is to have an additional collapsible portion plainly.

Thanks.

Joker™

I've one request, next time please post the codes in [ code ] [ /code ] tags.

Also look at this code in index.template.php
<div id="upper_section" class="middletext"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

I Agree

Ah yes, I'd left out that bit. I did have it in place...


echo '<div id="copyright_section" class="bordercolor"',
'style="padding:1px; margin:1px 0 0; ', //same as #user_section
(empty($options['collapse_copyright'])?'':'display:none;'),'">',
   '<div class="windowbg clearfix"

style="background-image:url(', $settings['images_url'], '/smflogo.gif); background-repeat:no-repeat; background-position:bottom center;">';


It turns out though that I'd got the ternary operator flipped around somehow... dyslexia or something. I guess I did not copy/paste it. Or thought it read better that way and forgot to invert the condition. Fixed in the code above just in case someone copies it.

Anyway. That seems to have done the trick. Thanks bunches.

PS: The code seems to suggest cookies are only used for guests. I'm assuming the database is used for logged in users. Either way it seems to work fine :laugh:

Disclaimer: I am making the SMF copyright collapsible. But it also featured very prominently first thing on the page in big letters. And even collapsed the name of the forum is "simple machine forum'. If that's a prob let me know.

BTW, should we update the SMF copyright for 2011? If so, which file is that?

Joker™

Quote from: I Agree on January 31, 2011, 09:58:11 PM
Anyway. That seems to have done the trick. Thanks bunches.
Glad that your issue is resolved. Can you mark the topic solved?


QuoteDisclaimer: I am making the SMF copyright collapsible. But it also featured very prominently first thing on the page in big letters. And even collapsed the name of the forum is "simple machine forum'. If that's a prob let me know.
As far as I know a copyright must be clearly visible all the time to everyone and as you are making it collapsible so that is looking like infringement of copyrights to me ( my point of view). I would suggest you to, not to alter the copyrights and its area in any way what so ever.


Quote
BTW, should we update the SMF copyright for 2011? If so, which file is that?
That is going to be done in next upgrade. Don't worry about that :).
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

Illori

as Joker™ said you are not allowed to modify the copyright in anyway. Am I allowed to remove or modify the copyright?

if you have any questions about modifying the copyright for your site and the above link is not clear, please reply and direct the reply toward smf staff and someone should in time reply with the correct answer.

I Agree

Quote from: Illori on February 01, 2011, 05:25:50 AM
as Joker™ said you are not allowed to modify the copyright in anyway. Am I allowed to remove or modify the copyright?

if you have any questions about modifying the copyright for your site and the above link is not clear, please reply and direct the reply toward smf staff and someone should in time reply with the correct answer.

It's not modified. The copyright is part of the theme. So I assume there must be some leeway in modifying it as long as the wording is not changed. A user intentionally collapsing a section does not make it go away. As far as I can tell if javascript is not enabled, it should be visible.

Anyway: http://www.swordofmoonlight.net/bbs2/

PS: The visibility:visible is also kind of annoying because the page itself is not always visible. I was just going to wrap it in a display:none (so not to modify the theme_copyright function) and make it visible along with the page. Since the page itself will never display (for the time being) if javascript is not available, I figure there's no harm no foul there either. Seems like just theme stuff to me.

EDITED: If there's something I can change to make things cool... like in case two people were visiting our obscure website in a shared public place (which could theoretically cause some confusion) let me know.

I could for instance repeat the copyright in the login form for guests, but that can be hidden too  ::)

It's clear I think the theme is not trying to pretend to not be a SMF forum. And people can't actually copy it via the website, so...

Illori

the copyright should be visible, there is no le way in that at this point. if you dont agree you are more then welcome to ask staff to review this thread. you are going to modify the code that generates the copyright to hide it from being visible this will flag your forum as not having a copyright as people will not know it can be expanded at first glance.

kat


Aleksi "Lex" Kilpinen

That's a bit tricky that one - It is visible, and as far as I can see, unaltered as it is - but it has been moved to a section where a user can remove it from sight...
Slava
Ukraini!
"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

Joker™

This is what I can see(I scrolled till bottom) and I can't  see copyrights (might be coz too tired right now). But to me it looks like pretty against SMF copyright policy.
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

Aleksi "Lex" Kilpinen

Quote from: Joker™ on February 02, 2011, 08:26:47 AM
This is what I can see(I scrolled till bottom) and I can't  see copyrights (might be coz too tired right now). But to me it looks like pretty against SMF copyright policy.
It is moved up, it is not at the bottom - but the first thing you see on top. Moving it is fine, as long as it stays visible.
Slava
Ukraini!
"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

Joker™

Quote from: LexArma on February 02, 2011, 08:28:29 AM
It is moved up, it is not at the bottom - but the first thing you see on top. Moving it is fine, as long as it stays visible.
Lol surely I need to get my head in place, but Lex don't you think giving a collapsible option will make it hidden for some users which is against SMF policy?
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

Aleksi "Lex" Kilpinen

Quote from: Joker™ on February 02, 2011, 08:32:04 AM
Quote from: LexArma on February 02, 2011, 08:28:29 AM
It is moved up, it is not at the bottom - but the first thing you see on top. Moving it is fine, as long as it stays visible.
Lol surely I need to get my head in place, but Lex don't you think giving a collapsible option will make it hidden for some users which is against SMF policy?
That's the part I am hesitant about, and will not comment on further at the moment.
Slava
Ukraini!
"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

Joker™

Quote from: LexArma on February 02, 2011, 08:39:15 AM
That's the part I am hesitant about, and will not comment on further at the moment.
I think Kindred will the most appropriate person to comment on this.
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

Aleksi "Lex" Kilpinen

I'd say Oldiesmann would probably be the best to answer that...
Slava
Ukraini!
"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

I Agree

For the record, I just had to get rid of the disembodied text stuff because it was just illegible/not pretty more or less. Since there was no "block" that appears on every single page template it would've been slightly more work to invent one.

I don't think it's something to get worked up about. It's certainly not collapsed by default as someone I think suggested. But I'll probably add a thin bar to the footer with a TOP button and the copyright text in small print... maybe a navigation select box or something to fill the space. Just something I have to get around to doing...

I always thought displaying free software's copyright was usually Gratis, but if it's in the agreement (which we all know everyone reads) it's in the agreement.

Has the SMF crew ever remotely locked down a forum or had to deal with any bad apples legally or otherwise ever?

Advertisement: