jQuery integration

Discussions and requests related to new CMSimple features, plugins, templates etc. and how to develop.
Please don't ask for support at this forums!
Post Reply
webscientist
Posts: 25
Joined: Wed Feb 23, 2011 10:13 am
Location: Karlsruhe

jQuery integration

Post by webscientist » Wed Feb 23, 2011 10:43 am

To use jQuery (http://jquery.com/) in several plugins it would be useful to add following changes to the file cms.php for the next version:

line 48:

Code: Select all

$hjq = ''; 
in function head():

Code: Select all

  if ($hjq != '') { $t .= '<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>'; }
  $t .= $hjs;
  if ($hjq != '') { $t .= head_jQuery($hjq); }
 
Finally we need the function head_jQuery() (would put it under the head() function:

Code: Select all

function head_jQuery($jq_code) {
  // jQuery code to load, first load whole document
  $t = '<script type="text/javascript"> $(document).ready(function(){ '.$jq_code.' } ); </script>';
  return trim($t);          
}
 
That's it!
Usage is similar to JavsScript ($hjs). Now you are able to refer to th global variable $hjq to add your jQuery code.

Martin
Posts: 346
Joined: Thu Oct 23, 2008 11:57 am
Contact:

Re: jQuery integration

Post by Martin » Fri Feb 25, 2011 12:37 pm

Hi Thomas,

of course that solution works (for those who are connected to the internet). At this very moment I would prefer not to introduce another global variable, as IMHO the next step should be a code clean up. But anyway, that 's only a question of implementation details.

The general question is:
  1. Do we want to establish a "default" js-Framework for CMSimple?
  2. Is jQuery the best choice?
  • ad 1.) I think it is a good idea: Nowadays almost every existing framework is used in some plugin. (+ a minimal js-library coming with the MenuManager-plugin.) That might cause incompatibility troubles between plugins and all the frameworks need to be downloaded. The comfort of a default framework might encourage the plugin developers to concentrate on this one. And, in the long run, CMSimple itself could make use of it and offer a more comfortable and up-to-date backend.
  • ad 2.) jQuery is the only one I had at least a glimpse into. So I can't compare them. I guess jQuery would be the best choice for us as it is easy to learn, well documented and widespread - and probably the one most used in CMSimple-plugins. (Here is a nice comparison between mootools and jQuery - but maybe some javascript integrators should drop a word ...)
To be short: IMHO it is a good thing to offer jQuery as a default js library.

KR
Martin

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: jQuery integration

Post by Holger » Fri Mar 04, 2011 11:03 am

Martin wrote:To be short: IMHO it is a good thing to offer jQuery as a default js library.
+1

That's my opinion too.
It'll save a lot of time on plugin development and support.

BR
Holger

webscientist
Posts: 25
Joined: Wed Feb 23, 2011 10:13 am
Location: Karlsruhe

Re: jQuery integration

Post by webscientist » Sat May 21, 2011 11:08 am

Martin wrote:of course that solution works (for those who are connected to the internet)
That's right. For off-line use we can add:

Code: Select all

    if ($hjq != '') {
        $jOuery_src = './plugins/jquery/jquery-1.6.1.min.js';
        $t .= '<script type="text/javascript" src="'.$jOuery_src.'"></script>';
    } 
 
Maybe we can add a new variable in config.php so that it's possible to adjust different versions of jQuery:

Code: Select all

if ($hjq != '') { $t .= '<script type="text/javascript" src="'.$cf['jquery'].'"></script>'; } 
 
Or it's reasonable to add the source of jQuery in array $pth.
Like this:

Code: Select all

if ($hjq != '') { $t .= '<script type="text/javascript" src="'.$pth['file']['jQuery'].'"></script>'; } 
 

I would prefer the last one.
Are there any news about the features of next version of CMSimple XH?

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: jQuery integration

Post by cmb » Sat Jun 25, 2011 1:47 pm

Hello community,

in http://www.cmsimpleforum.com/viewtopic. ... &sk=t&sd=a I've stumbled over problems with multiple jQuery versions.
Gert wrote: I have tested the final first version of jQuery4CMSimple from Holger right now, we will release it now
Good news! That may solve the most problems, when all plugins are rewritten to use jQuery4CMSimple. But until than?

IMHO a good solution would be, when plugin authors would use

Code: Select all

var $myjquery = jQuery.noConflict();
as is described in Detail on http://docs.jquery.com/Using_jQuery_wit ... _Libraries, und update their code accordingly.

This will even avoid problems with other Javascript libraries using $ (e.g. prototype.js). But so all the plugins must be rewritten -- and until than?

Another possible solution would be, to use only the newest jQuery version available. This is based on the assumption, that jQuery versions are upward compatible. The disadvantage: without using noConflict() there might still be problems with other js libraries. The idea was born in the above mentioned thread:
jerry wrote: It's the way I read jQuery

Code: Select all

       if (!preg_match('/<.*jquery([.|-]{0,1}\d*){0,3}([.]{0,1}[min|all|pack]*){0,2}[.]js.*>/i', $hjs)) {
          $hjs.='<!-- include jQuery library -->
          <script type="text/javascript" src="'.$pth['folder']['base'].$cf['plugins']['folder'].'/'.$plugin.'/js/jquery.min.js"></script>
          <script type="text/javascript"> jQuery.noConflict();</script>';
       }
But this way the plugin will not work, if there's already an older jQuery version included, that doesn't fit the plugins needs.

I have written the following function (to not pollute the global namespace any further; it's name should be adjusted to the particular plugin it's used in) to do the trick. It's heavily commented and self explaining (at least I hope so ;)) It should be adapted and called instead of manipulating $hjs "manually" to include jQuery.

Code: Select all

function pluginname_use_newest_jquery_version() {
    global $hjs, $plugin, $pth;
    
    // the pattern I'm looking for, to see if jquery is already in $hjs
    $pattern = '/<script.*jquery-([0-9])\.([0-9])\.?([0-9])?.*?<\/script>/';
    
    // the <script> to include if there is no jquery already included,
    // or if my version is newer than the already included one
    $my_jquery_include = '<script type="text/javascript" src="'.$pth['folder']['plugins']
                .$plugin.'/jstree/_lib/jquery-1.5.1.js"></script>';
                
    // the version of my jquery version
    // (this should match the filename given above)
    $my_jquery_version = array(1, 5, 1);
    
    
    $has_jquery = preg_match($pattern, $hjs, $matches);
    if (!$has_jquery) {
        // then include new version
        $hjs .= $jquery.PHP_EOL;
    }
    else {
        // find out the version of already included jquery
        $other_jquery_version = array_slice($matches, 1);
        
        // compare version to include only newest
        for ($i = 0; $i < 3; $i++) {
            if ($my_jquery_version[$i] < $other_jquery_version[$i]) {
                $my_jquery_version_is_newer = FALSE;
                break;
            } elseif ($my_jquery_version[$i] > $other_jquery_version[$i]) {
                $my_jquery_version_is_newer = TRUE;
                break;
            } else {
                // spare the preg_replace in case of same version:
                $my_jquery_version_is_newer = FALSE;
                // and continue comparison
            }
        }
        if ($my_jquery_version_is_newer) {
            // replace old jquery include with my one
            $hjs = preg_replace($pattern, $my_jquery_include, $hjs);
        }
    }
}
The code is free for anyone to use and modify (let's say MIT license). Maybe this function could be useful for plugin authors until other plugins are updated to use jQuery4CMSimple, and they can't rewrite their code to use noConflict(). Maybe it could be used in jQuery4CMSimple itself.

Any comments appreciated.

Christoph

BTW: How can I use syntax highlighting?
Christoph M. Becker – Plugins for CMSimple_XH

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: jQuery integration

Post by Holger » Sat Jun 25, 2011 2:10 pm

@cmb

just wait the few hours to see how jQuery4CMSimple will work.
There're just a few jQuery based Plugins for CMSimple available at the moment.
And the authors of that plugins (jerry, webscientist, Gert, you and me ;) ) are all active members here.
So let's create an easy to handle solution for the future now.

I bet it's not hard for a developer to update the existing plugins and, if they agree to use jQuery4CMSimple (which become part of CMSimple_XH) there's no need to discuss anymore.

Holger

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: jQuery integration

Post by cmb » Sat Jun 25, 2011 2:21 pm

Hello Holger,

thanks for enlighting me :)
Holger wrote: And the authors of that plugins (jerry, webscientist, Gert, you and me ;) ) are all active members here.
That disburdens me. I thought there were more authors of plugins using jQuery. Is it known, if somebody uses another js library for CMSimple plugins?

But please take a look at my latest post in http://www.cmsimpleforum.com/viewtopic. ... a&start=10. I guess the plugin authors should agree on a common solution for the noConflict() problem.

Sorry for stealing your development time, but I guess this last point could be important.

Thanks,
Christoph
Christoph M. Becker – Plugins for CMSimple_XH

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: jQuery integration

Post by Holger » Sat Jun 25, 2011 3:46 pm

Today a new plugin called "jQuery4CMSimple" was released to solve the problems around the jQuery-integration in CMSimple:
More informations: http://www.cmsimpleforum.com/viewtopic.php?f=12&t=3200

BR
Holger

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: jQuery integration

Post by cmb » Wed Jul 27, 2011 2:07 pm

Hello Kyle,

in the general case it's possible to point to a local installation or to a CDN URL.

But with CMSimple the best solution is to use jQuery4CMSimple. This is already included from CMSimple_XH 1.4.1 on, and available for older versions as a plugin. You should have a look at it, if you're planning to extend CMSimple with jQuery.

The problem with using local jquery or CDN versions is, that they will probably clash with plugins using other jQuery versions :(

For learning jQuery you should have a look on http://docs.jquery.com/Main_Page, if you've not already done. For general information about extending CMSimple from a developers POV you could have a look at http://www.cmsimple-xh.com/wiki/doku.ph ... nual:start.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply