I have the following code towards the end of my source:
<script>
var Page = (function() {
var config = {
$bookBlock : $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' ),
$navFirst : $( '#bb-nav-first' ),
$navLast : $( '#bb-nav-last' )
},
init = function() {
config.$bookBlock.bookblock( {
speed : 800,
shadowSides : 0.8,
shadowFlip : 0.7
} );
initEvents();
},
initEvents = function() {
var $slides = config.$bookBlock.children();
// add navigation events
config.$navNext.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'next' );
return false;
} );
config.$navPrev.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'prev' );
return false;
} );
config.$navFirst.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'first' );
return false;
} );
config.$navLast.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'last' );
return false;
} );
// add swipe events
$slides.on( {
'swipeleft' : function( event ) {
config.$bookBlock.bookblock( 'next' );
return false;
},
'swiperight' : function( event ) {
config.$bookBlock.bookblock( 'prev' );
return false;
}
} );
// add keyboard events
$( document ).keydown( function(e) {
var keyCode = e.keyCode || e.which,
arrow = {
left : 37,
up : 38,
right : 39,
down : 40
};
switch (keyCode) {
case arrow.left:
config.$bookBlock.bookblock( 'prev' );
break;
case arrow.right:
config.$bookBlock.bookblock( 'next' );
break;
}
} );
};
return { init : init };
})();
</script>
<script>
Page.init();
</script>However, when SilverStripe renders the template, I see this in the source code:
<script>
var Page = (function() {
var config = {
: $( '#bb-bookblock' ),
: $( '#bb-nav-next' ),
: $( '#bb-nav-prev' ),
: $( '#bb-nav-first' ),
: $( '#bb-nav-last' )
},
init = function() {
config.;
initEvents();
},
initEvents = function() {
var = config.;
// add navigation events
config. {
config.;
return false;
} );
config. {
config.;
return false;
} );
config. {
config.;
return false;
} );
config. {
config.;
return false;
} );
// add swipe events
{
config.;
return false;
},
'swiperight' : function( event ) {
config.;
return false;
}
} );
// add keyboard events
$( document ).keydown( function(e) {
var keyCode = e.keyCode || e.which,
arrow = {
left : 37,
up : 38,
right : 39,
down : 40
};
switch (keyCode) {
case arrow.left:
config.;
break;
case arrow.right:
config.;
break;
}
} );
};
return { init : init };
})();
</script>
<script>
Page.init();
</script>Can anyone explain how and why this code is being modified? It seems to be making the associated flipbook plugin completely inoperable.
EDIT: I have tried encapsulating the code with the following:
(function($) {
$(document).ready(function(){
// your code here.
})
})(jQuery);but it seems to have no effect. I am hardly a javascript expert - if encapsulating the script is the answer, what am I doing wrong?
Any advice would be most appreciated!!!
