If statement for jquery header load

Permalink 1 user found helpful
I'm stuck on the good ole editor not loading due to jquery colliding with itself. I'm using jquery tools for a tab switcher, however when in editor mode the toolbar doesn't load. Looking through some of the documentation I'm having a hard time finding the statement to use on my jquery tools script to only load for unregistered users so it'll load for the public users, and when you are signed in it displays each tab as it's own editable content area?

Tags:

jquery, unregistered user
View Replies: View Best Answer
andrew replied on at Permalink Reply
andrew
If you're in a PHP script, you can do so this way:

$c = Page::getCurrentPage();
if ($c->isEditMode()) {
   // load your javascript libraries
}
akufc replied on at Permalink Reply
It's for my <head> statement.
<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>


I want to wrap that script in an if statement. Just want it to load when the user isn't logged in so that my interface will work for the public, and for the site editor to be able to edit the content.

Currently, commenting out the script when I need to go in and adjust items during the development.

Thanks.
LukeBMM replied on at Permalink Best Answer Reply
You could try this:
<?php
$u = new User;
if( ! $u->superUser ) {
// if not logged in as an admin, load the library
 echo('<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>');
}
?>
akufc replied on at Permalink Reply
Perfect, thank you so much.
akufc replied on at Permalink Reply
The script works great, I tried to modify it however to work for non superusers to be able to edit still. I've repalced the $u->superUser with $->Registered however it's not working. Reason being the two site editors will be the ones maintaining the site after I've finished developing it. I've tried various variables on the Users Documentation page, am I using the wrong case perhaps? I'm on the latest build on C5 and noticed that in the documentation superUser is listed as SuperUser.

Thanks again
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
I'm confused. If what you are trying to do is enable / disable your javascript from loading when the site is being edited vs. when the site is NOT being edited aka viewed by your 'public users' Andrew's code is what I've used for this and it's super easy: 
<?php
$c = Page::getCurrentPage();
//load javascript when IN edit mode
if ($c->isEditMode()) { ?>
   <script src="your.js"></script>
<?php } ?>
OR
<?php 
//load javascript when NOT IN edit mode
$c = Page::getCurrentPage();
if (!$c->isEditMode()) { ?>
   <script src="your.js"></script>
<?php } ?>


I just wanted to ask in case I was misunderstanding your need. After reading your posts a couple times sounds like you just want your editors to be able to edit the blocks without the javascript loading but as soon as they are done editing the javascript will load and your tab switcher then kicks in?

sorry if I'm missing something?
RafaelGP replied on at Permalink Reply
RafaelGP
Spot on MrNiceGaius!

That's exactly the code I was looking for.

Many thanks!
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
Cool! That's great, BTW I like how you came up with a different way to do this... although I'm thinking your method will be of use for serving different content for different user groups etc. Definitely useful.

cheers!
info250 replied on at Permalink Reply
i am sorry but where do i put this code exactly. (sorry i am new)
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
Hi 'info250' :) This code goes into either your elements/header.php, elements/footer.php (the header & footer of your theme e.g. site/themes/yourtheme/elements/header.php). Also you can put this code into the page type templates i.e. view.php, full.php, default.php, etc.

The code allows your theme to dynamically switch code during page editing (when you click the 'edit page button'). It is useful for changing the layout, enabling / disabling javascripts for easier/smoother page editing (in addition to resolving conflicts between the c5 js libraries and any custom libraries you've used for the site, although isEditMode only switches out code when the page is put into editing mode so if you need to address js conflicts there is a solution further down on the post for that)... or switching in/out css files during editing, to name a few.

This code also can be used within blocks view.php templates as well... although I believe that is done through the blocks controller so there is a slightly different approach (I'm pretty new too :)

Cheers,
SamB replied on at Permalink Reply
SamB
OMG YES MRNICEGAIUS your awesome lost this script a few weeks back saved me a lot of time.
RafaelGP replied on at Permalink Reply
RafaelGP
Did anyone find a solution for this?

if(! $u->superUser){ } works great but I would like to extend this to any users editing the site, not only the superUser.

Thank you!
RafaelGP replied on at Permalink Reply
RafaelGP
I've found a way to achieve this. I hope it help others.
Here is the code:

$u = User::getByUserID($userID);
$uname=$u->getUserName();
if (strlen($uname)!=0) {
    echo('<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script><script type="text/javascript">var $j = jQuery.noConflict();</script>');
}


Maybe it isn't the most elegant solution but it is alright considering my level of PHP programming. Of course any advice to improve it is very welcome.

Cheers
RafaelGP replied on at Permalink Reply
RafaelGP
Ok, back to square one.
My code actually doesn't work as whatever the user is logged in or not, userID's length is always 0 :-(

Although my initial reaction, MrNiceGaius' code doesn't do the trick for me as the problem is when an user is logged in, not when it's editing the page.

So this is a quick summary of the problem.

-> jquerytool conflicting with jquery. Because of this, conrete5 top bar is missing.

Solution:
Open /elements/header_required.php
Replace this line:
if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');
} else {
   echo '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>';
}

for this one:
if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');
} else {
   echo '<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
      <script type="text/javascript">var $j = jQuery.noConflict();</script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>';
}


Notice there is a jQuery.noConflict, so you will need to replace jquery-tools '$' symbol by 'j'
Example:
<script>
$j(function() {
    $j(".scrollable").scrollable({ circular: true });
});
</script>


Hope this helps future generations of jquery & jquery-tools users :-)

Cheers
TheRealSean replied on at Permalink Reply
TheRealSean
You can load a version of JqueryTools without jQuery, this can save the checking within the header_required

though this relies on your own hosted version of js and not using the cdn
RafaelGP replied on at Permalink Reply
RafaelGP
Well spotted!

There is actually a cdn available with a version of jquerry-tools without jquery!

Here is the new code for that:
if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');
} else {
   echo '
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
      <script type="text/javascript">var $j = jQuery.noConflict();</script>';
}


Cheers
boomgraphics replied on at Permalink Reply
boomgraphics
I am curious why you have these in your code:
if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');

All this stuff is loaded automatically in header_required without that code.

So all you need to avoid major issues is to disable your stuff when in edit mode. You could also disable it when user is logged in, but if your js is properly written and loaded you shouldn't have any conflicts.

The following is something like what you should have in your header.
I disable custom js when in edit mode, I enable css when user can edit things, and I enable another bit of css when the page id is ==1 so that I can style the first link, and still use the nav-path-selected on the other links for usability.

It sets the global variable at the start of the page.

Then I have some header logic, such as making the nav area editable, unless there is a block named Header_Nav and then it uses that block. Same logic in the logo area. I also wrote a javascript function that styles the first word of any sentence, so I could use the SITE variable and still have two separate colors and styles in the logo. Then if they create a global image block with the name Logo the template will use that image instead. Note, this code is only a simple example, but you can maybe get some ideas.
Hope it helps!

PS, So far I have zero conflict issues with my code.(don't know about IE yet, as I use a mac...).

<?php defined('C5_EXECUTE') or die("Access Denied.");
global $c; ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/print.css" type="text/css" media="print" />
        <!--[if lt IE 8]><link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
        <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getThemePath() ?>/main.css" />
        <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css') ?>" />
        <?php
        Loader::element('header_required');
        $cp = new Permissions($c);
        if ($cp->canAdmin() && $cp->canAddSubContent()) {
            print "<link rel=\"stylesheet\" href=\"" . $this->getThemePath() . "/interface-theme/interface.css\" type=\"text/css\" media=\"screen, projection\" />";
Viewing 15 lines of 71 lines. View entire code block.

:-)
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
For the sake of clarity,

From Boomgraphics code:
$cp = new Permissions($c);
if ($cp->canAdmin() && $cp->canAddSubContent()) {
//javascripts to run when user is logged in to edit the site
}


Load scripts when logged in to edit the site rather than load scripts if you're in edit mode on a particular page.

Is this not what you are trying to do?
boomgraphics replied on at Permalink Reply
boomgraphics
Yes, my intention was to only include the additional CSS if the edit bar was across the page.
I am going to start a new thread about the header.php.
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
Oops sorry, I meant to direct my question towards RafaelGP, I was still trying to help ... the header.php file you posted is cool I just was trying to make sure it was clear which particular snippet was doing the magic :)
boomgraphics replied on at Permalink Reply
boomgraphics
Ah, it's cool. I figured I had accidentally hijacked the thread. To do what you were asking about, I have changed my code to this so it's less specific than the old version:
global $cp;
        if (is_object($cp) && ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage())) {
            echo ('<link rel="stylesheet" href="' . $this->getThemePath() . '/interface-theme/interface.css" type="text/css" media="screen, projection" />');
        }


That will echo the stylesheet (or whatever) whenever you have the edit bar across the top of the page. I use this to override the edit bar css and style it to match my theme, or you could use it to replace the default concrete5 logo with your own logo using CSS.
That is also the reason I had placed it beneath the header_include bit, since the header_include adds all the base css files I want to override. Hope that helps!
MrNiceGaius replied on at Permalink Reply
MrNiceGaius
Perfect. That should be the best answer of this entire thread :)

Nice tip for customizing the edit toolbar too. Thanks!
RafaelGP replied on at Permalink Reply
RafaelGP
Thank you very much to you two for the help, and sorry for the late reply.
I've been really busy, but now I finally have some time to write a post properly. It's going to be a long one, but I hope it will clear any doubts.

I think there is a confusion understanding that the problem happens when an user is Logged in, not when it's in Edit mode. I'll try to explain it better this time.

The problem:
jQuery and jQuery Tools conflicting, and as a result, the edit bar is not displayed when an user is Logged in.

Please notice the problem is nothing to do with being in Edit mode. It is actually before that, as the user cannot enter in Edit mode, because the top bar is not there! :-)
I thought MrNiceGaius code was the perfect solution, but it didn't work as the problem happens before enter Edit mode. It happens in Logged in mode. I hope everything is clear now.

In a summary, this is exactly what I'm looking for:

1 - When the web page is in normal mode (no one is logged in): jQuery and jQuery Tools load in a way that they don't conflict. To achieve this, they need to be loaded in the following order:

jQuery
jQuery Tools
jQuery.noconflict

2 - When either, a super user or a no super user, are Logged in: Concrete 5 works. I only ask for that :-) Everything in header_required, including jQuery, loads and the bar at the top is displayed. I don't really bother if jQuery Tools is loaded or not. I don't care. C5 is the priority :-)

Being in Logged in mode, this doesn't work, I don't know why:

HeaderRequired (which includes jQuery)
jQuery Tools
jQuery.noconflict

So I stop trying adding things into the template, and I decided attack the header_required.php file in order to do NOT load jQuery Tools when an user is logged in.

This:
<?php
$u = new User;
if( ! $u->superUser ) {
// if not logged in as an admin, load the library
 echo('<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>');
}
?>

does the trick, but ONLY when the user is a Super user.

Boomgraphics code, thank you very very much for trying to help, but is not what I'm looking for:

- Firstly, when I tried, it only loaded the scripts when the user was a super user.
- Secondly, what it does, is loading scripts in Logged in mode, and what I need is NOT load jQuery Tools.

Boomgraphics, you mentioned that 'All this stuff is loaded automatically in header_required without that code.' Sorry but it doesn't. If I remove this:

if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');


it doesn't load jQuery. Remember that my code is in header_required.php, not in a template.

So I came up with this code:
if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');
} else {
   echo '<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
      <script type="text/javascript">var $j = jQuery.noConflict();</script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>';
}


It might not look pretty, but it does what I need (see the points 1 and 2 above mentioned).
I'm actually surprised there aren't more users facing this problem (jQuery + jQuery Tools + non super user logged in).

Anyway, if anyone thinks that my piece of code sucks or that what I want to achieve can be done in a more efficient and professional way, please please let me know. I'm open to any suggestion as long as it works.

Sorry for the long post and once again sorry if I didn't explain my problem better at the first instance.

My best regards

Rafael
boomgraphics replied on at Permalink Reply
boomgraphics
Actually your issue with jquery conflicting isn't hard to fix. I heartily recommend using the tools version that does not have jquery in it. :-)

Second, I don't recommend modifying the header_required.php, since everything can be done in the theme itself.

I wrote a javascript that make blocks into tabs using jquery.tools.min.js, along with my own javascript. This is great, but not so cool when you have to edit the page. So my php, in my header.php which is in my theme, removes the javascript when I am in edit mode. Problem solved.

$themePath = $this->getThemePath();
if (!$c->isEditMode()) {
echo '<script type="text/javascript" src="' . $themePath . '/js/js.php"></script>';
}


That logic is the only thing you need. Everything else you are having issues with is because you are trying to load two versions of jquery. Get the version of jquery tools that doesn't have jquery in it, then load jquery.tools beneath header_required in your theme. I am using jquery tools along with a few other scripts with zero issues, without modifying header_required.php.
boomgraphics replied on at Permalink Reply
boomgraphics
Also, yes I thought you were talking about the theme header not the header_required.php file when I said everything was included automatically. :-)