Skip to main content ↑ ↓
Topic: How to add a new js files into theme ? (Read 5653 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

How to add a new js files into theme ?

I am planning to include a jQuery menu ( http://cssmenumaker.com/menu/flat-jquery-responsive-menu ) into Silk theme. Just wondering how to add .js file into the theme.

In which template should I place this ?

Code: [Select]
 <script type="text/javascript" src="/scripts/script.js"></script>

Re: How to add a new js files into theme ?

Reply #1 –

The "best" way is to use addJavascriptFile.
Best between quotes because it has some limit, so it depends on many factors.
In that case, the first thing I see it's that the name may conflict with the existing script.js file, you may have to put it into a subdirectory. Then then in template_init (index.template.php) add:
Code: [Select]
addJavascriptFile('directory/script.js');
Bugs creator.
Features destroyer.
Template killer.

Re: How to add a new js files into theme ?

Reply #2 –

Thanks @emanuele

Re: How to add a new js files into theme ?

Reply #3 –

How to add these to theme ?

Code: [Select]
    <link rel="stylesheet" href="bower_components/angularjs-color-picker/angularjs-color-picker.min.css" />

    <script src="bower_components/tinycolor/tinycolor"></script>
    <script src="bower_components/angularjs-color-picker/angularjs-color-picker.min.js"></script>

Ref : http://angular-js.in/angular-color-picker/

Re: How to add a new js files into theme ?

Reply #4 –

One more

Code: [Select]
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

Re: How to add a new js files into theme ?

Reply #5 –

Did you try like emanuele explained?  Oh wait thats the wrong function name, I make that same mistake all the time  :-[

1) Open your themes index.template.php file
2) Find the function template_init
3) Use loadJavascriptFile() to add JS files
4) Use loadCSSFile() to add CSS files

You alternatively can just add the script and css tags as standard markup in that file, the major downside to that vs using the above functions is that the files will not be picked up by the script/css combiner and compactor.  But if you want to do that the CSS would go in the above head section in template_html_above.  Non deferred JS can go there as well.  Deferred JS would go in the template_html_below function.

The function way would be to change
Code: [Select]
function template_init()
{
	return array(

to
Code: [Select]
	loadCSSFile('bower_components/angularjs-color-picker/angularjs-color-picker.min.css');

	loadJavascriptFile('https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js');
	loadJavascriptFile(array(
		'bower_components/tinycolor/tinycolor.js',
    	'bower_components/angularjs-color-picker/angularjs-color-picker.min.js'));
	
	return array(


That's untested of course.  It also assumes the files are in themes/yourtheme/scripts/bower_components/.......... and  themes/yourtheme/css/bower_components/.......  etc  TBH you be better off using jquery plugins instead of installing both jquery and angular but thats your choice.

Re: How to add a new js files into theme ?

Reply #6 –

Syntax is much easier in Angular, that's why.

Re: How to add a new js files into theme ?

Reply #7 –

How/where to add an Angular module ? (https://github.com/danprince/ng-picky)

Code: [Select]
angular.module('myApp', ['ngPicky'])

Re: How to add a new js files into theme ?

Reply #8 –

@Spuds

Worked partially. I used

Code: [Select]
 loadJavascriptFile('https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js');   
	loadCSSFile('css/ng-picky.css');
        loadJavascriptFile('scripts/ng-picky.js');

Only Angular got loaded. The files ng-picky .js and .css ( though present in their respective directories ) were not shown in Firebug.

Re: How to add a new js files into theme ?

Reply #9 –

If they are in your themes css and scripts directory then there is not need to add css or scripts to the paths ... just use the filename by itself in the loadXXX functions

QuoteSyntax is much easier in Angular, that's why.
Are you writing those plugins or just using them?  Or is it some other syntax you are referring to?  Anyway, it was just a point about page load size, thats all.

Re: How to add a new js files into theme ?

Reply #10 –

Working like a charm. :)

Re: How to add a new js files into theme ?

Reply #11 –

@Spuds angular is pretty nice! :D
I used it for some of my addons as well, and at a certain time I was thinking to propose to bundle it... that doesn't mean I'll not propose it in the future. :P
Bugs creator.
Features destroyer.
Template killer.

Re: How to add a new js files into theme ?

Reply #12 –

Feature Cat returns !

Re: How to add a new js files into theme ?

Reply #13 –

Is there anything wrong in this addition of dependencies to template ?

Code: [Select]
function template_init()
{

        loadCSSFile('ngstyle.css');
        loadJavascriptFile('https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js');
        loadJavascriptFile('angular-growl-notifications.js');
        loadJavascriptFile('app.js');


	return array(

Re: How to add a new js files into theme ?

Reply #14 –

Templates shouldn't return values.