Difference between revisions of "Template:TokyoTech/header"
| Line 9: | Line 9: | ||
{{TokyoTech/js/jquery-3.1.0.min}} | {{TokyoTech/js/jquery-3.1.0.min}} | ||
{{TokyoTech/js/jquery.magnific-popup.min}} | {{TokyoTech/js/jquery.magnific-popup.min}} | ||
| − | |||
<html> | <html> | ||
| Line 20: | Line 19: | ||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet"> | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | ||
| − | <script | + | <script> |
| + | $(document).ready(function () { | ||
| + | // Menu. | ||
| + | var $menu = $('#menu'); | ||
| + | var $body = $('body'); | ||
| + | |||
| + | $menu.wrapInner('<div class="inner"></div>'); | ||
| + | |||
| + | $menu._locked = false; | ||
| + | |||
| + | $menu._lock = function() { | ||
| + | |||
| + | if ($menu._locked) | ||
| + | return false; | ||
| + | |||
| + | $menu._locked = true; | ||
| + | |||
| + | window.setTimeout(function() { | ||
| + | $menu._locked = false; | ||
| + | }, 350); | ||
| + | |||
| + | return true; | ||
| + | |||
| + | }; | ||
| + | |||
| + | $menu._show = function() { | ||
| + | |||
| + | if ($menu._lock()) | ||
| + | $body.addClass('is-menu-visible'); | ||
| + | |||
| + | }; | ||
| + | |||
| + | $menu._hide = function() { | ||
| + | |||
| + | if ($menu._lock()) | ||
| + | $body.removeClass('is-menu-visible'); | ||
| + | |||
| + | }; | ||
| + | |||
| + | $menu._toggle = function() { | ||
| + | |||
| + | if ($menu._lock()) | ||
| + | $body.toggleClass('is-menu-visible'); | ||
| + | |||
| + | }; | ||
| + | |||
| + | $menu | ||
| + | .appendTo($body) | ||
| + | .on('click', function(event) { | ||
| + | event.stopPropagation(); | ||
| + | }) | ||
| + | .on('click', 'a', function(event) { | ||
| + | |||
| + | var href = $(this).attr('href'); | ||
| + | |||
| + | event.preventDefault(); | ||
| + | event.stopPropagation(); | ||
| + | |||
| + | // Hide. | ||
| + | $menu._hide(); | ||
| + | |||
| + | // Redirect. | ||
| + | if (href == '#menu') | ||
| + | return; | ||
| + | |||
| + | window.setTimeout(function() { | ||
| + | window.location.href = href; | ||
| + | }, 350); | ||
| + | |||
| + | }) | ||
| + | .append('<a class="close" href="#menu">Close</a>'); | ||
| + | |||
| + | $body | ||
| + | .on('click', 'a[href="#menu"]', function(event) { | ||
| + | |||
| + | event.stopPropagation(); | ||
| + | event.preventDefault(); | ||
| + | |||
| + | // Toggle. | ||
| + | $menu._toggle(); | ||
| + | |||
| + | }) | ||
| + | .on('click', function(event) { | ||
| + | |||
| + | // Hide. | ||
| + | $menu._hide(); | ||
| + | |||
| + | }) | ||
| + | .on('keydown', function(event) { | ||
| + | |||
| + | // Hide on escape. | ||
| + | if (event.keyCode == 27) | ||
| + | $menu._hide(); | ||
| + | |||
| + | }); | ||
| + | |||
| + | }); | ||
| + | |||
| + | /*--------------popup------------*/ | ||
| + | $('.open-popup-link').magnificPopup({ | ||
| + | type:'inline', | ||
| + | midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href. | ||
| + | gallery:{ | ||
| + | enabled:true | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | |||
$('.open-popup-link').magnificPopup({ | $('.open-popup-link').magnificPopup({ | ||
type:'inline', | type:'inline', | ||
Revision as of 05:41, 7 September 2017
