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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

What is SilverStripe doing to my javascript code?


Go to End


3 Posts   1271 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, 344 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! :)