Jump to:

22984 Posts in 11765 Topics by 2827 members

General Questions

SilverStripe Forums » General Questions » What is SilverStripe doing to my javascript code?

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

Page: 1
Go to End
Author Topic: 222 Views
  • kylehudson00
    Avatar
    Community Member
    22 Posts

    What is SilverStripe doing to my javascript code? Link to this post

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

  • Devlin
    Avatar
    Community Member
    186 Posts

    Re: What is SilverStripe doing to my javascript code? Link to this post

    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

  • kylehudson00
    Avatar
    Community Member
    22 Posts

    Re: What is SilverStripe doing to my javascript code? Link to this post

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

    Thanks a million!

    222 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.