I am using requirejs to load my file(s) and dependancies. I am then using grunt to compress everything into one file. I can see that all of my plugins are getting loaded/compiled in my final js file (above all of my application specific methods).
I have a select input with some values, when the select changes - depending on the value, I want to show/hide some additional things on my page. Pretty straight-forward.
What I don't quite understand is why i'm getting "velocity is not a function" when I call it. I know it's because it isn't seeing something - but what I can tell, everything is there.
Here is my config file and the application file that has the event listener. Everything is working great - until velocity is called. Looking at the docs, it seems like I'm calling velocity correctly.
config.js
'use strict';
/**
* RequireJS configuration.
*
*/
requirejs.config({
'baseUrl': '/resources/js/',
'paths': {
'jquery': '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min',
'bootstrap': 'vendor/bootstrap.min',
'domReady': 'plugins/domReady',
'velocity': 'plugins/velocity.min'
},
'shim': {
'bootstrap': {
'deps': ['jquery']
}, 'velocity': {
'deps': ['jquery']
}
}
});
/**
* Application initialization.
*
* @param {object} application | Main application module.
* @returns {object}
*
*/
requirejs(['application'], function (application) {
application.initialize();
});
application.js
'use strict';
/**
* Primary application module.
*
* @param {function} $ | jQuery library.
* @returns {object}
*
*/
define([
'jquery',
'bootstrap',
'velocity',
'domReady!'
], function ($) {
var initialize = function () {
console.info('Application initialized');
/**
* Event listener for change.
*
* @param {object} event | The change event.
* @returns void
*
*/
$('#mySelect').change(function (event) {
switch ($(this).val()) {
case'Value One':
$('#isValueOne').velocity('slideDown', { 'duration': 1500 });
break;
case'Small Value Two':
break;
case'Value Three':
break;
default:
break;
}
});
};
return {
'initialize': initialize
};
});
html
<div id="isValueOne">
<h1>Hello World!</h1>
</div>
EDIT
If I use slideDown()
, Everything works - the div slides down to reveal the text.
jquery
....
$("#isValueOne").slideDown("fast", function () {
// this works great.
});
EDIT
Here is my Gruntfile.js configuration:
grunt.initConfig({
'pkg': grunt.file.readJSON('package.json'),
'requirejs': {
'options': {
'baseUrl': 'resources/js',
'mainConfigFile': 'resources/js/config.js',
'name': 'application',
'include': ['config'],
'wrapShim': true,
'out': 'resources/js/application.js'
},
'development': {
'options': {
'_build': false,
'optimize': 'none',
'out': '../web/resources/js/application.js'
}
},
'production': {
'options': {
'_build': true,
'optimize': 'uglify',
'out': '../web/resources/js/application.min.js'
}
}
},
....
....
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('development', ['requirejs:development', 'sass', 'watch']);
To run, I use grunt development