Mootools Breaking Panoramio Javascript API

Question

I am trying to use Panoramio's JavaScript API but it fails to display when the MooTools framework is used. Using Chrome's inspect feature on this jsFiddle reveals this error with the included JavaScript:

Uncaught SyntaxError: Invalid regular expression: /function (keys){
    var obj = {}, length = Math.min(this.length, keys.length);
    for (var i = 0; i < length; i++) obj[keys[i]] = this[i];
    return obj;
}/: Nothing to repeat

The site I am trying to use the API on is a Joomla 2.5 one, hence the use of the MooTools framework. Changing the framework on the fiddle to jQuery or removing it entirely produces the pictures and the error does not appear.

I've looked at trying to incorporate jQuery's noConflict() function somehow and searched for a similar function for MooTools but have had no success.

Any suggestions to solve this would be greatly welcome. Or is it a limitation of Panoramio's JavaScript API itself?

score 2 · Accepted Answer · edited May 23 '17 at 11:55

2

MooTools adds a bunch of functions to Array.prototype without preventing them from being enumerated. This means they show up in for-in loops on arrays.

It would appear that the Panoramio JavaScript is using for..in on an array without allowing for this, because the error message contains the source of the associate function that MooTools adds:

// (Result of `String(Array.prototype.associate)` when MooTools is loaded
function (keys){
    var obj = {}, length = Math.min(this.length, keys.length);
        for (var i = 0; i < length; i++) obj[keys[i]] = this[i];
        return obj;
}

This is a bug in the Panoramio script, one should never use for..in to loop over an array without correct safeguards. See Myths and realities of for..in (from my blog). If you can get an uncompressed version of the Panoramio script, you can probably fix the relevant loop(s).

Some would also argue that it's a bug (or at least, a bad design decision) for MooTools to add enumerable properties to Array.prototype.

Dimitar Christoff notes in the comments (thanks Dimitar!) that if you load the Panoramio script after loading MooTools, it works: http://jsfiddle.net/DEWvZ/2/ But beware that if you make any calls into Panoramio later, once MooTools is loaded, those could fail, because if they've made the mistake in one place (initialization), they're likely to make it elsewhere as well.

edited May 23 '17 at 11:55

Community

1
1

answered Dec 08 '12 at 12:44

T.J. Crowder

1,031,962
187
1,923
1,875

Thanks. So does this mean it is a bug in Panoramio's JavaScript with no workaround? – ab853 Dec 08 '12 at 12:48
@Adder: As I said above, if you can get an uncompressed version of the script, you can find the relevant `for..in` loop(s) and fix them (the fix is to add `theArray.hasOwnProperty(propName)` as needed, see the linked article). (Technically, of course, you can find and fix them in the compressed version as well, it's just a lot harder.) – T.J. Crowder Dec 08 '12 at 12:49
@T.J.Crowder Finding the compressed version is probably not too difficult ;-) – John Dvorak Dec 08 '12 at 12:53
It should probably be mentioned you're linking to your own article. – John Dvorak Dec 08 '12 at 12:58
@T.J.Crowder Thank you, I must have been looking at an earlier version of your answer. I'll look for an uncompressed version and try and let Panoramio know about the issue. Cheers guys :) – ab853 Dec 08 '12 at 13:02
@Adder: Sorry, I didn't realize I didn't say that up front. :-) Glad that helped. – T.J. Crowder Dec 08 '12 at 13:07
@JanDvorak: I don't think it's really necessary to mark each link with an affiliation, although I generally do. I updated, though, in response to your comment. – T.J. Crowder Dec 08 '12 at 13:08
@DimitarChristoff: Thanks! Added (with attribution) to the answer. – T.J. Crowder Dec 08 '12 at 13:11
1

https://gist.github.com/4240237#2460 - line 2460, for in on array. 99% of incompat errors with mootools are this very thing. the last thing people that don't know how to loop arrays correctly should be doing, is public js APIs. – Dimitar Christoff Dec 08 '12 at 13:17
Excellent article T.J.Crowder! @DimitarChristoff Thanks for the code, line 3299 also needed changing. The script import solution didn't work for me in Joomla due to its structure but modifying the script worked a treat! Thanks all :) – ab853 Dec 08 '12 at 22:39

score 0 · Answer 2 · answered Oct 21 '13 at 08:35

this Panoramio JavaScript API widget.

Another type of Panoramio JavaScript API widget in which you can also change background color with example and code is here.

I have made a blogspot page where i have created many Panoramio JavaScript and HTML API widgets.

It does not show in composing mood.It show after publishing.I have used this on my blogspot website.its work.

<div dir="ltr" style="text-align: center;" trbidi="on">
<script src="https://ssl.panoramio.com/wapi/wapi.js?v=1&amp;hl=en"></script>
<div id="wapiblock" style="float: right; margin: 10px 15px"></div>
<script type="text/javascript">
var myRequest = {
  'tag': 'kahna',
  'rect': {'sw': {'lat': -30, 'lng': 10.5}, 'ne': {'lat': 50.5, 'lng': 30}}
};
  var myOptions = {
  'width': 300,
  'height': 200
};
var wapiblock = document.getElementById('wapiblock');
var photo_widget = new panoramio.PhotoWidget('wapiblock', myRequest, myOptions);
photo_widget.setPosition(0);
</script>
</div>

Mootools Breaking Panoramio Javascript API

2 Answers2