Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba

What is SilverStripe doing to my javascript code?


Go to End
Reply


3 Posts   575 Views

Avatar
kylehudson00

Community Member, 22 Posts

26 June 2013 at 6:05pm

Edited: 26/06/2013 6:09pm

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!!!

Avatar
Devlin

Community Member, 246 Posts

26 June 2013 at 7:44pm

Can anyone explain how and why this code is being modified?

I guess your script is in a template file. Well, the template system tries to replace all variables (e.g. $bookBlock) with data in its current scope.

So $project will be parsed as 'mysite' and $bookBlock will be parsed as a empty space, because there is no data accessable for this placeholder.

Please delete this script from your template, put this script in a new file (e.g. mysite/javascript/flipbook.js) and require this script with <% require javascript(mysite/javascript/flipbook.js) %>

http://doc.silverstripe.org/framework/en/reference/requirements
http://doc.silverstripe.org/framework/en/topics/javascript

Avatar
kylehudson00

Community Member, 22 Posts

26 June 2013 at 7:55pm

*slaps forehead* Of course! That makes sense. Moving the code to a separate file solved the problem.

Thanks a million! :)