I have this code:
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define(classie );
} else {
// browser global
window.classie = classie;
}
})( window );
When I insert the dojo toolkit which has AMD, define( classie ); is called and when I try to use the classie object like so: classie.hasClass(document.getElementById('some_element'), 'some_class') I receive an error in the console telling me "Uncaught ReferenceError: classie is not defined"
I have been searching and reading about Async Module Definition in Dojo and I am not able to find how to handle anonymous defined modules, how to require them or what I need to run to get it in the place I need it.
If I remove Dojo the code works because the variable can be found globaly in window.classie or just by classie itself.
I am also using another library https://github.com/hgoebl/mobile-detect.js/blob/master/mobile-detect.js which has the same issue as classie.
I do not want to change these js libraries, what am I doing wrong on my part when I am trying to use these defined objects with AMD?
Edit: Here is the stripped version of the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.9/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if (false && 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return 1;
};
addClass = function( elem, c ) {
return 1;
};
removeClass = function( elem, c ) {
return 1;
};
}
else {
hasClass = function( elem, c ) {
return 1;
};
addClass = function( elem, c ) {
return 1;
};
removeClass = function( elem, c ) {
return 1;
};
}
function toggleClass( elem, c ) {
return 1;
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
// test object
alert(classie.hasClass(document.getElementById('some_element'), 'some_class'));
</script>
<div id="some_element"></div>
</body>
</html>
