As a way to show the problem I am encountering I have created a very, very trivial package and accompanying demo app and published them on Github: fliptext and fliptext-demo.
(You can see also the [Travis report] (Travis CI - Test and Deploy with Confidence) and the Atmosphere listing.)
fliptest/fliptest.js is the file that actually does something.
I am having no success following the Meteorpedia article paragraph “Packaging existing libraries >> jQuery libraries” that says, “… as simple as placing the library in the smart package and listing the appropriate files in package.js …”.
I have been able to get it to work two different ways, both of which seem wrong :
- Add a bit of Meteor to the plugin file
- Pull a bit of jQuery stuff out to a separate file
So, the first (current option) looks like this …
./fliptext/fliptext.js :
flipText = function(content) {
var len = content.length;
var result = new Array();
for (var idx = 0 ; idx < len ; idx++) {
var cOld = content[idx];
var cNew = FlipTable[content[idx]];
var xdi = len -1 - idx;
result[xdi] = (cNew == undefined) ? cOld : cNew;
};
return result.join('');
};
Meteor.startup(function () {
if (Meteor.isClient) {
(function ( $ ) {
$.fn.flipElementText = function() {
this.text(flipText(this.text()));
return this;
};
}( jQuery ));
}
});
The second option looks like this …
./fliptext/client/lib/compatibility/fliptext.js :
flipText = function(content) {
var len = content.length;
var result = new Array();
for (var idx = 0 ; idx < len ; idx++) {
var cOld = content[idx];
var cNew = FlipTable[content[idx]];
var xdi = len -1 - idx;
result[xdi] = (cNew == undefined) ? cOld : cNew;
};
return result.join('');
};
./fliptext/fliptext-jq.js :
Meteor.startup(function () {
if (Meteor.isClient) {
(function ( $ ) {
$.fn.flipElementText = function() {
this.text(flipText(this.text()));
return this;
};
}( jQuery ));
}
});
It seems to me that the “$.fn.flipElementText” declaration belongs in the original source file, but no matter how I do it I get a “jQuery not found” error.
My question is – what is the correct way to do this that will work for any jQuery plugin?