https://www.animate-onlineshop.jp/user_data/packages/default/jpn/responsive/js/lib/menu-slide.js

1/*
2 * jQuery pageSlide
3 * Version 2.0
4 * http://srobbin.com/jquery-pageslide/
5 *
6 * jQuery Javascript plugin which slides a webpage over to reveal an additional interaction pane.
7 *
8 * Copyright (c) 2011 Scott Robbin (srobbin.com)
9 * Dual licensed under the MIT and GPL licenses.
10*/
11
12// for global-menu
13
14;(function($){
15    // Convenience vars for accessing elements
16    var $body = $('body'),
17        $pageslide = $('#pageslide');
18    
19    var _sliding = false,   // Mutex to assist closing only once
20        _lastCaller;        // Used to keep track of last element to trigger pageslide
21    
22	// If the pageslide element doesn't exist, create it
23    if( $pageslide.length == 0 ) {
24         $pageslide = $('<div />').attr( 'id', 'pageslide' )
25                                  .css( 'display', 'none' )
26                                  .appendTo( $('body') );
27    }
28    
29    /*
30     * Private methods 
31     */
32    function _load( url, useIframe ) {
33        // Are we loading an element from the page or a URL?
34        if ( url.indexOf("#") === 0 ) {                
35            // Load a page element                
36            $(url).clone(true).appendTo( $pageslide.empty() ).show();
37        } else {
38            // Load a URL. Into an iframe?
39            if( useIframe ) {
40                var iframe = $("<iframe />").attr({
41                                                src: url,
42                                                frameborder: 0,
43                                                hspace: 0
44                                            })
45                                            .css({
46                                                width: "100%",
47                                                height: "100%"
48                                            });
49                
50                $pageslide.html( iframe );
51            } else {
52                $pageslide.load( url );
53            }
54            
55            $pageslide.data( 'localEl', false );
56            
57        }
58    }
59    
60    // Function that controls opening of the pageslide
61    function _start( direction, speed ) {
62        var slideWidth = $pageslide.outerWidth( true ),
63            bodyAnimateIn = {},
64            slideAnimateIn = {};
65        
66        // If the slide is open or opening, just ignore the call
67        if( $pageslide.is(':visible') || _sliding ) return;	        
68        _sliding = true;
69                                                                    
70        switch( direction ) {
71            case 'left':
72                $pageslide.css({ left: 'auto', right: '-' + slideWidth + 'px' });
73                bodyAnimateIn['margin-left'] = '-=' + slideWidth;
74                if ($('body').css('position') !== 'relative') {
75                    slideAnimateIn['right'] = '+=' + slideWidth;
76                }
77                break;
78            default:
79                $pageslide.css({ left: '-' + slideWidth + 'px', right: 'auto' });
80                bodyAnimateIn['margin-left'] = '+=' + slideWidth;
81                if ($('body').css('position') !== 'relative') {
82                    slideAnimateIn['left'] = '+=' + slideWidth;
83                }
84                break;
85        }
86                    
87        // Animate the slide, and attach this slide's settings to the element
88        $body.animate(bodyAnimateIn, speed);
89        $pageslide.show()
90                  .animate(slideAnimateIn, speed, function() {
91                      _sliding = false;
92                  });
93    }
94      
95    /*
96     * Declaration 
97     */
98    $.fn.pageslide = function(options) {
99        var $elements = this;
100        
101        // On click
102        $elements.click( function(e) {
103            var $self = $(this),
104                settings = $.extend({ href: $self.attr('href') }, options);
105            
106            // Prevent the default behavior and stop propagation
107            e.preventDefault();
108            e.stopPropagation();
109            
110            if ( $pageslide.is(':visible') && $self[0] == _lastCaller ) {
111                // If we clicked the same element twice, toggle closed
112                $.pageslide.close();
113            } else {                 
114                // Open
115                $.pageslide( settings );
116
117                // Record the last element to trigger pageslide
118                _lastCaller = $self[0];
119            }       
120        });                   
121	};
122	
123	/*
124     * Default settings 
125     */
126    $.fn.pageslide.defaults = {
127        speed:      200,        // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
128        direction:  'right',    // Accepts 'left' or 'right'
129        modal:      false,      // If set to true, you must explicitly close pageslide using $.pageslide.close();
130        iframe:     true,       // By default, linked pages are loaded into an iframe. Set this to fal

130se if you don't want an iframe.
131        href:       null        // Override the source of the content. Optional in most cases, but required when opening pageslide programmatically.
132    };
133	
134	/*
135     * Public methods 
136     */
137	
138	// Open the pageslide
139	$.pageslide = function( options ) {	    
140	    // Extend the settings with those the user has provided
141        var settings = $.extend({}, $.fn.pageslide.defaults, options);
142	    
143	    // Are we trying to open in different direction?
144        if( $pageslide.is(':visible') && $pageslide.data( 'direction' ) != settings.direction) {
145            $.pageslide.close(function(){
146                _load( settings.href, settings.iframe );
147                _start( settings.direction, settings.speed );
148            });
149        } else {                
150            _load( settings.href, settings.iframe );
151            if( $pageslide.is(':hidden') ) {
152                _start( settings.direction, settings.speed );
153            }
154        }
155        
156        $pageslide.data( settings );
157
158        var stylesheet = document.styleSheets.item(0);
159        stylesheet.insertRule("#flickable1 { margin: 2px 23px 0 64px; }", stylesheet.cssRules.length);
160	}
161	
162	// Close the pageslide
163	$.pageslide.close = function( callback ) {
164        var $pageslide = $('#pageslide'),
165            slideWidth = $pageslide.outerWidth( true ),
166            speed = $pageslide.data( 'speed' ),
167            bodyAnimateIn = {},
168            slideAnimateIn = {}
169            	        
170        // If the slide isn't open, just ignore the call
171        if( $pageslide.is(':hidden') || _sliding ) return;	        
172        _sliding = true;
173        
174        switch( $pageslide.data( 'direction' ) ) {
175            case 'left':
176                bodyAnimateIn['margin-left'] = '+=' + slideWidth;
177                slideAnimateIn['right'] = '-=' + slideWidth;
178                break;
179            default:
180                bodyAnimateIn['margin-left'] = '-=' + slideWidth;
181                slideAnimateIn['left'] = '-=' + slideWidth;
182                break;
183        }
184        
185        $pageslide.animate(slideAnimateIn, speed);
186        $body.animate(bodyAnimateIn, speed, function() {
187            $pageslide.hide();
188            _sliding = false;
189            if( typeof callback != 'undefined' ) callback();
190        });
191
192        var stylesheet = document.styleSheets.item(0);
193        stylesheet.insertRule("#flickable1 { margin: 2px 23px 0 64px; }", stylesheet.cssRules.length);
194    }
195	
196	/* Events */
197	
198	// Don't let clicks to the pageslide close the window
199    $pageslide.click(function(e) {
200        e.stopPropagation();
201    });
202
203	// Close the pageslide if the document is clicked or the users presses the ESC key, unless the pageslide is modal
204	$(document).bind('click keyup', function(e) {
205	    // If this is a keyup event, let's see if it's an ESC key
206        if( e.type == "keyup" && e.keyCode != 27) return;
207	    
208	    // Make sure it's visible, and we're not modal	    
209	    if( $pageslide.is( ':visible' ) && !$pageslide.data( 'modal' ) ) {	        
210	        $.pageslide.close();
211	    }
212	});
213	
214})(jQuery);