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 ?
<script type="text/javascript" src="/scripts/script.js"></script>
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:
addJavascriptFile('directory/script.js');
How to add these to theme ?
<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/
One more
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
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
function template_init()
{
return array(
to
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.
Syntax is much easier in Angular, that's why.
How/where to add an Angular module ? (https://github.com/danprince/ng-picky)
angular.module('myApp', ['ngPicky'])
@Spuds Worked partially. I used
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.
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
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.
Working like a charm. :)
@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
Feature Cat returns !
Is there anything wrong in this addition of dependencies to template ?
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(
Templates shouldn't return values.
Read posts above
Oh, didn't realize template_init() now returns $settings. Interesting.
Yep, it is a first attempt to fix some odd behaviours that will disappear only when that function will be wrapped in a class. O:-)