mirror of
https://github.com/inspec/inspec
synced 2024-12-04 02:19:50 +00:00
326 lines
9.8 KiB
Text
326 lines
9.8 KiB
Text
doctype html
|
|
html
|
|
head
|
|
meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"
|
|
meta charset="utf-8"
|
|
meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"
|
|
|
|
link href="/favicon.png" rel="icon" type="image/png"
|
|
link href="/favicon.ico" rel="icon"
|
|
|
|
title = current_page.data.title || "InSpec"
|
|
meta name= "description" content = current_page.data.description
|
|
|
|
link rel='stylesheet' type='text/css' href='/css/inspec_tutorial.css'
|
|
link rel='stylesheet' type='text/css' href='/stylesheets/vendor/fontawesome.min.css'
|
|
|
|
== stylesheet_link_tag :site
|
|
|
|
body class="#{page_classes}"
|
|
= partial "layouts/global-message"
|
|
|
|
.container
|
|
= partial "layouts/nav"
|
|
|
|
main#main-content
|
|
== yield
|
|
|
|
= partial "layouts/footer"
|
|
|
|
script src='https://buttons.github.io/buttons.js'
|
|
script src='/scripts/inspec_tutorial.js'
|
|
script src='/dist/inspec_tutorial.js'
|
|
script src='/javascripts/vendor/jquery.min.js'
|
|
script src='https://s3.amazonaws.com/menumaker/menumaker.min.js'
|
|
div inspec-tutorial="true" class="inspec-tutorial" hidden="true"
|
|
= "Loading"
|
|
|
|
== javascript_include_tag "all"
|
|
|
|
javascript:
|
|
|
|
function initSlideGroup(group) {
|
|
var prev = -1;
|
|
var links = $(group).find('a')
|
|
|
|
links.click(function(e) {
|
|
e.stopPropagation()
|
|
|
|
links.removeClass('selected')
|
|
$(this).addClass('selected')
|
|
|
|
var idx = $(this).index();
|
|
if(prev == idx) return;
|
|
prev = idx;
|
|
|
|
$('.slider .view.slide-in').removeClass('slide-in').addClass('slide-out')
|
|
var el = $('.slider .view')[idx]
|
|
if(el == null) {
|
|
console.log("No element for slider index "+idx)
|
|
return
|
|
}
|
|
|
|
$(el).removeClass('slide-out').removeClass('hidden').addClass('slide-in')
|
|
})
|
|
|
|
if(links[0] != null) links[0].click();
|
|
}
|
|
|
|
function initSliders() {
|
|
$('.slider .view').addClass('hidden')
|
|
var groups = $('.slider .selectors')
|
|
groups.each(function(idx){
|
|
initSlideGroup(this)
|
|
})
|
|
}
|
|
|
|
//run code colors
|
|
|
|
$(document).ready(function() {
|
|
initSliders()
|
|
$('pre code').each(function(i, block) {
|
|
hljs.highlightBlock(block);
|
|
});
|
|
});
|
|
|
|
//copy to clipboard
|
|
|
|
function copyToClipboard(element) {
|
|
var $temp = $("<input>");
|
|
$("body").append($temp);
|
|
$temp.val($(element).text()).select();
|
|
document.execCommand("copy");
|
|
$temp.remove();
|
|
}
|
|
|
|
$('#copy').hover(function() {
|
|
$('#install').toggleClass("text-focus");
|
|
});
|
|
|
|
$('#copy').click(function() {
|
|
$(this).removeClass("fa-copy");
|
|
$(this).addClass("fa-check");
|
|
|
|
setTimeout(() => {
|
|
$(this).removeClass('fa-check').addClass('fa-copy');
|
|
}, 1500);
|
|
});
|
|
|
|
// homepage content slider
|
|
|
|
$(function() {
|
|
$("#expand").hide();
|
|
$("#expandBtn").html("Show all new InSpec 3.0 features");
|
|
|
|
$('#expandBtn').click(function() {
|
|
$('#expand').slideToggle("fast");
|
|
$(this).html($(this).html() == 'Collapse new InSpec 3.0 features' ? 'Show all new InSpec 3.0 features' : 'Collapse new InSpec 3.0 features');
|
|
});
|
|
});
|
|
|
|
// tutorial content slider
|
|
|
|
$(function() {
|
|
$(".collapseContent").hide();
|
|
$(".collapsebtn").addClass("fa-plus-square");
|
|
|
|
$('.collapseToggle').click(function() {
|
|
var el = $(this).parent().find('.collapseContent')
|
|
el.slideToggle("fast")
|
|
// $('.collapseContent').slideToggle("fast");
|
|
var btn = $(this).find('.collapsebtn')
|
|
if(btn.hasClass('fa-minus-square')) {
|
|
btn.addClass('fa-plus-square')
|
|
btn.removeClass('fa-minus-square')
|
|
} else {
|
|
btn.addClass('fa-minus-square')
|
|
btn.removeClass('fa-plus-square')
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// scroll spy animations
|
|
|
|
var $slide_left = $('.slide-left');
|
|
var $slide_right = $('.slide-right');
|
|
var $slide_up = $('.slide-up');
|
|
var $slide_up_slow = $('.slide-up-slow');
|
|
var $window = $(window);
|
|
|
|
function check_if_in_view() {
|
|
var window_height = $window.height();
|
|
var window_top_position = $window.scrollTop();
|
|
var window_bottom_position = (window_top_position + window_height);
|
|
|
|
$.each($slide_left, function() {
|
|
var $element = $(this);
|
|
var element_height = $element.outerHeight();
|
|
var element_top_position = $element.offset().top;
|
|
var element_bottom_position = (element_top_position + element_height);
|
|
|
|
//check to see if this current container is within viewport
|
|
if ((element_bottom_position >= window_top_position) &&
|
|
(element_top_position <= window_bottom_position)) {
|
|
$element.addClass('in-view');
|
|
} else {
|
|
$element.removeClass('in-view');
|
|
}
|
|
});
|
|
|
|
$.each($slide_right, function() {
|
|
var $element = $(this);
|
|
var element_height = $element.outerHeight();
|
|
var element_top_position = $element.offset().top;
|
|
var element_bottom_position = (element_top_position + element_height);
|
|
|
|
//check to see if this current container is within viewport
|
|
if ((element_bottom_position >= window_top_position) &&
|
|
(element_top_position <= window_bottom_position)) {
|
|
$element.addClass('in-view');
|
|
} else {
|
|
$element.removeClass('in-view');
|
|
}
|
|
});
|
|
|
|
$.each($slide_up, function() {
|
|
var $element = $(this);
|
|
var element_height = $element.outerHeight();
|
|
var element_top_position = $element.offset().top;
|
|
var element_bottom_position = (element_top_position + element_height);
|
|
|
|
//check to see if this current container is within viewport
|
|
if ((element_bottom_position >= window_top_position) &&
|
|
(element_top_position <= window_bottom_position)) {
|
|
$element.addClass('in-view');
|
|
} else {
|
|
$element.removeClass('in-view');
|
|
}
|
|
});
|
|
|
|
$.each($slide_up_slow, function() {
|
|
var $element = $(this);
|
|
var element_height = $element.outerHeight();
|
|
var element_top_position = $element.offset().top;
|
|
var element_bottom_position = (element_top_position + element_height);
|
|
|
|
//check to see if this current container is within viewport
|
|
if ((element_bottom_position >= window_top_position) &&
|
|
(element_top_position <= window_bottom_position)) {
|
|
$element.addClass('in-view');
|
|
} else {
|
|
$element.removeClass('in-view');
|
|
}
|
|
});
|
|
}
|
|
|
|
$window.on('scroll resize', check_if_in_view);
|
|
$window.trigger('scroll');
|
|
|
|
//scroll to top
|
|
$(document).ready(function(){
|
|
|
|
$(window).scroll(function(){
|
|
if ($(this).scrollTop() > 100) {
|
|
$('.scrollToTop').fadeIn();
|
|
} else {
|
|
$('.scrollToTop').fadeOut();
|
|
}
|
|
});
|
|
|
|
$('.scrollToTop').click(function(){
|
|
$('html, body').animate({scrollTop : 0},800);
|
|
return false;
|
|
});
|
|
|
|
// scrolling to resource sections
|
|
$(".resources-button").click(function() {
|
|
var dst = $(this).attr("href")
|
|
$(".resources-button").removeClass("btn-purple").addClass("btn-purple-o")
|
|
$(this).addClass("btn-purple").removeClass("btn-purple-o")
|
|
$("html, body").animate({
|
|
scrollTop: $(dst).offset().top - 105
|
|
}, 1000);
|
|
});
|
|
|
|
});
|
|
|
|
//scrolling code box
|
|
|
|
var div = $('#scrolled');
|
|
setInterval(function(){
|
|
var pos = div.scrollTop();
|
|
div.scrollTop(pos + 2);
|
|
}, 200);
|
|
|
|
//Animating progress bar for header
|
|
|
|
$(document).ready(function(){
|
|
|
|
var getMax = function(){
|
|
return $(document).height() - $(window).height();
|
|
}
|
|
|
|
var getValue = function(){
|
|
return $(window).scrollTop();
|
|
}
|
|
|
|
if('max' in document.createElement('progress')){
|
|
// Browser supports progress element
|
|
var progressBar = $('progress');
|
|
|
|
// Set the Max attr for the first time
|
|
progressBar.attr({ max: getMax() });
|
|
|
|
$(document).on('scroll', function(){
|
|
// On scroll only Value attr needs to be calculated
|
|
progressBar.attr({ value: getValue() });
|
|
});
|
|
|
|
$(window).resize(function(){
|
|
// On resize, both Max/Value attr needs to be calculated
|
|
progressBar.attr({ max: getMax(), value: getValue() });
|
|
});
|
|
}
|
|
else {
|
|
var progressBar = $('.progress-bar'),
|
|
max = getMax(),
|
|
value, width;
|
|
|
|
var getWidth = function(){
|
|
// Calculate width in percentage
|
|
value = getValue();
|
|
width = (value/max) * 100;
|
|
width = width + '%';
|
|
return width;
|
|
}
|
|
|
|
var setWidth = function(){
|
|
progressBar.css({ width: getWidth() });
|
|
}
|
|
|
|
$(document).on('scroll', setWidth);
|
|
$(window).on('resize', function(){
|
|
// Need to reset the Max attr
|
|
max = getMax();
|
|
setWidth();
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
javascript:
|
|
|
|
$(document).foundation();
|
|
$('.try-demo').click(function(event){
|
|
event.stopPropagation();
|
|
$('.inspec-tutorial').show()
|
|
window.dispatchEvent(new Event('resizeTerminal'));
|
|
$('.quit-inspec-tutorial').click(function(event){
|
|
event.stopPropagation();
|
|
$('.inspec-tutorial').hide()
|
|
})
|
|
});
|
|
|
|
== javascript_include_tag "segment"
|