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, simon_w

What is SilverStripe doing to my javascript code?


Reply

3 Posts   318 Views

Avatar
kylehudson00

26 June 2013 at 6:05pm (Last edited: 26 June 2013 6:09pm), Community Member, 22 Posts

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

26 June 2013 at 7:44pm Community Member, 215 Posts

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

26 June 2013 at 7:55pm Community Member, 22 Posts

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

Thanks a million! :)