mirror of https://github.com/rails/rails
Improve js written for guides
* Stop using unnecessary global variable * Use function defined by jQuery for simplicity * Fix event listner for "more info button" to handle event on resize browser
This commit is contained in:
parent
f6cdc2282f
commit
501e663a25
|
@ -1,57 +1,53 @@
|
|||
function guideMenu(){
|
||||
if (document.getElementById('guides').style.display == "none") {
|
||||
document.getElementById('guides').style.display = "block";
|
||||
} else {
|
||||
document.getElementById('guides').style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
$.fn.selectGuide = function(guide){
|
||||
$.fn.selectGuide = function(guide) {
|
||||
$("select", this).val(guide);
|
||||
}
|
||||
};
|
||||
|
||||
guidesIndex = {
|
||||
bind: function(){
|
||||
var guidesIndex = {
|
||||
bind: function() {
|
||||
var currentGuidePath = window.location.pathname;
|
||||
var currentGuide = currentGuidePath.substring(currentGuidePath.lastIndexOf("/")+1);
|
||||
$(".guides-index-small").
|
||||
on("change", "select", guidesIndex.navigate).
|
||||
selectGuide(currentGuide);
|
||||
$(".more-info-button:visible").click(function(e){
|
||||
$(document).on("click", ".more-info-button", function(e){
|
||||
e.stopPropagation();
|
||||
if($(".more-info-links").is(":visible")){
|
||||
if ($(".more-info-links").is(":visible")) {
|
||||
$(".more-info-links").addClass("s-hidden").unwrap();
|
||||
} else {
|
||||
$(".more-info-links").wrap("<div class='more-info-container'></div>").removeClass("s-hidden");
|
||||
}
|
||||
$(document).on("click", function(e){
|
||||
var $button = $(".more-info-button");
|
||||
var element;
|
||||
});
|
||||
$("#guidesMenu").on("click", function(e) {
|
||||
$("#guides").toggle();
|
||||
return false;
|
||||
});
|
||||
$(document).on("click", function(e){
|
||||
e.stopPropagation();
|
||||
var $button = $(".more-info-button");
|
||||
var element;
|
||||
|
||||
// Cross browser find the element that had the event
|
||||
if (e.target) element = e.target;
|
||||
else if (e.srcElement) element = e.srcElement;
|
||||
// Cross browser find the element that had the event
|
||||
if (e.target) element = e.target;
|
||||
else if (e.srcElement) element = e.srcElement;
|
||||
|
||||
// Defeat the older Safari bug:
|
||||
// http://www.quirksmode.org/js/events_properties.html
|
||||
if (element.nodeType == 3) element = element.parentNode;
|
||||
// Defeat the older Safari bug:
|
||||
// http://www.quirksmode.org/js/events_properties.html
|
||||
if (element.nodeType === 3) element = element.parentNode;
|
||||
|
||||
var $element = $(element);
|
||||
var $element = $(element);
|
||||
|
||||
var $container = $element.parents(".more-info-container");
|
||||
var $container = $element.parents(".more-info-container");
|
||||
|
||||
// We've captured a click outside the popup
|
||||
if($container.length == 0){
|
||||
$container = $button.next(".more-info-container");
|
||||
$container.find(".more-info-links").addClass("s-hidden").unwrap();
|
||||
$(document).off("click");
|
||||
}
|
||||
});
|
||||
// We've captured a click outside the popup
|
||||
if($container.length === 0){
|
||||
$container = $button.next(".more-info-container");
|
||||
$container.find(".more-info-links").addClass("s-hidden").unwrap();
|
||||
}
|
||||
});
|
||||
},
|
||||
navigate: function(e){
|
||||
var $list = $(e.target);
|
||||
url = $list.val();
|
||||
var url = $list.val();
|
||||
window.location = url;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
<ul class="nav">
|
||||
<li><a class="nav-item" href="index.html">Home</a></li>
|
||||
<li class="guides-index guides-index-large">
|
||||
<a href="index.html" onclick="guideMenu(); return false;" id="guidesMenu" class="guides-index-item nav-item">Guides Index</a>
|
||||
<a href="index.html" id="guidesMenu" class="guides-index-item nav-item">Guides Index</a>
|
||||
<div id="guides" class="clearfix" style="display: none;">
|
||||
<hr />
|
||||
<% ['L', 'R'].each do |position| %>
|
||||
|
@ -141,7 +141,7 @@
|
|||
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushSql.js"></script>
|
||||
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushPlain.js"></script>
|
||||
<script type="text/javascript">
|
||||
SyntaxHighlighter.all()
|
||||
SyntaxHighlighter.all();
|
||||
$(guidesIndex.bind);
|
||||
</script>
|
||||
</body>
|
||||
|
|
Loading…
Reference in New Issue