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   362 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, 217 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! :)