Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
331 lines (317 sloc) 10.4 KB
@extends(main, pageTitle: page.capFirst())
@args String page, String html, String fiddleWebSite, boolean localized
@set(bodyClass: "doc")
@set(title: page)
@section(moreHeaderScripts) {
<script type="text/javascript" src="/public/js/jquery.scrollto.js"></script>
}
@section(moreStyles) {
<link href="/public/css/prettify.css" type="text/css" rel="stylesheet" />
<style type="text/css">
section .h5 {padding-top: 0;}
h3 {
margin: 40px 0px 20px;
background-color: #e4e9ee;
font-size: 12pt;
padding: 10px;
line-height: 15px;
}
h4 {
border-bottom: 1px solid black;
padding-bottom: 4px;
}
h5 {margin-top: 20px;}
p {margin-top: 20px; margin-bottom: 15px; font-size: 12pt;}
footer p {font-size: 12pt;}
.main.container li {
font-size: 11pt;
line-height: 23px;
}
.main.container pre code li {
margin-bottom: 0;
}
/*li ul li:first-child {margin-top: 10px;}*/
pre {background-color: #000;}
pre > code * {font-size: 10pt;line-height: 16px;}
section {
padding-top: 20px;
}
section.h4 {
padding-top:44px;
}
#doc-nav {
width: 200px;
}
#doc-nav li {
font-size: 11pt;
}
#doc-content {position: relative;}
iframe {
width: 100%;
border: 1px solid #eee;
}
#overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
opacity: 0.9;
z-index: 1010;
cursor: progress;
display: none;
}
#overlay-spinner {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 250px);
text-align: center;
width: 500px;
height: 200px;
background-color: #eee;
}
#overlay.opera #overlay-spinner {
top: 49%;
left: 46%;
}
#overlay-spinner h2 {
margin-top: 50px;
font-size: 16px;
}
#overlay-spinner .gauge-container {
width: 400px;
margin-left: 50px;
height: 4px;
}
.gauge-container .gauge-meter {
background-color: #444;
height: 100%;
width: 0;
}
.alert {
background: transparent !important;
border-radius: 0 !important;
border-left-width: 5px;
color: #333;
border-color: rgb(67, 170, 219);
}
.main.container .alert li {
font-size: 11pt;
margin-bottom: 0;
margin-top: 6px;
}
.h4 .back-to-top {
margin-top: -28px;
}
.h3 .back-to-top {
margin-top: -46px;
}
.back-to-top {
margin-right: 10px;
cursor: pointer;
font-size: 11pt;
opacity: .6;
}
.back-to-top:hover {
opacity: 1;
}
#nav-box h4 {
border-bottom: 1px solid #aaa;
padding: 0 20px;
font-weight: normal;
display: none;
font-size: 10pt;
}
pre.code {
position: relative;
max-height: 600px;
overflow-y: auto;
}
pre .btn-try-it {
position: absolute;
right: 0px;
top: 0px;
color: #aaa;
padding: 1px 5px;
background-color: #333;
opacity: .8;
cursor: pointer;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", Tahoma, "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
pre .btn-try-it:hover {
opacity: 1;
background-color: #555;
color: #ccc;
}
iframe[data-id] {
max-height: 600px;
}
</style>
}
@init() {
if (page.startsWith("feature")) super.__setRenderArg("curPage", "feature");
else super.__setRenderArg("curPage", "doc");
}
@ifNot(localized) {
<style>
.icon-remove.absolute {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
<div id="localization" class="alert alert-warning" style="position: relative">
<p>@msg("load.no-translation", lang)</p>
<p>@msg("load.welcome-volunteer")</p>
<i class="icon-remove absolute"></i>
</div>
<script>
$(function(){
setTimeout(function(){
$('#localization').fadeOut();
}, 15000)
})
$('.icon-remove.absolute').click(function(){
$('#localization').fadeOut();
})
</script>
}
<div class="row">
<div class="span3" id="nav-box">
<div class="affix" style="position: fixed;">
<h4>place-holder</h4>
<ul class="nav nav-list" id="doc-nav">
</ul>
<div style="margin: 20px auto;font-size: 9pt; width:157px;padding-right: 14px;">
@msg("load.found-bug")
<br/>
<a target="_blank" href="https://github.com/greenlaw110/rythm-doc/issues">
<i class="icon-github"></i>
@msg("load.report-bug")
</a>
</div>
</div>
</div>
<div class="span9 pull-right" id="doc-content" style="width: 680px;">
@html.raw()
</div>
</div>
@args org.osgl.web.util.UserAgent __ua__;
@{boolean hasShift = __ua__.isWebKit() || __ua__.isOpera();}
@if (hasShift) {
<div id="overlay" @if(__ua__.isOpera() || __ua__.isSafari())class="opera"@>
<div id="overlay-spinner">
<h2>Loading fiddles ...</h2>
<div class="gauge-container">
<div class="gauge-meter"></div>
</div>
</div>
</div>
}
<script type="text/javascript">
$('gauge-meter').width(0);
var fx = function(){
$('pre code').each(function() {
var $me = $(this);
if (!$me.hasClass('prettyprint')) {
$me.addClass('prettyprint linenums');
} else {
$me.addClass('linenums');
}
});
prettyPrint();
var names = {
h2: 0,
h3: 0,
h4: 0
};
// set anchor for all headers
var r = /^\s*\[(.*)\](.*)/;
$('#doc-content > h3, #doc-content > h4, #doc-content > h5').each(function(){
var $h = $(this), s = $h.text(), v = r.exec(s), id = false;
if (v) {
id = v[1];
$h.text(' ' + v[2]);
} else {
var nm = this.tagName.toLowerCase();
id = nm + "_" + names[nm]++;
}
//$('<a id="' + nm0 + '"></a>').prependTo($h);
var $section = $('<section></section>')
$h.wrap($section.prop('id', id).addClass(this.tagName.toLowerCase()));
if ($h.parent('section').hasClass('h3')) {
$h.parent('section').append('<i class="icon-double-angle-up pull-right back-to-top" title="back to top"></i>')
} else {
$h.parent('section').append('<i class="icon-double-angle-up pull-right back-to-top" title="back to section top"></i>')
}
});
$('body').on('click', '.back-to-top', function(){
if ($(this).parent('section').hasClass('h3')) {
$('html,body').scrollTo(0, 0) ;
} else {
var $h4 = $(this).parent('.h4'), $h3 = $h4.prev();
while($h3 && $h3.size() > 0 && !$h3.hasClass('h3')) {$h3 = $h3.prev();}
var hash = '#' + $h3.attr('id');
$('html,body').scrollTo(hash, hash) ;
}
})
$('body').on('click', '.btn-try-it', function(){
var $pre = $(this).parent(), fid = $(this).data('fiddle'), fiddle = "@fiddleWebSite";
if (window.location.href.indexOf("rythmengine.com") > -1) {
fiddle = "fiddle.rythmengine.com";
}
var url = fiddle + "/embed/#/" + fid;
$pre.replaceWith($('<iframe src="' + url + '" data-id="' + fid + '"></iframe>'));
});
$('body').on('load', 'iframe', function(){
$(this).height(this.contentWindow.document.body.offsetHeight);
})
// construct navigation for named anchors
$('#doc-content section[id]').each(function(){
if (!$(this).hasClass('h3')) return;
var $a = $(this), nm = $a.prop('id'), lbl = $a.text();
if (!lbl) {
lbl = $a.parent().text();
}
if (!lbl) {
lbl = $a.next().text();
}
if (lbl) {
$('<li><a href="#' + nm + '"><i class="icon-angle-right"></i> ' + lbl + '</li>').appendTo('#doc-nav');
}
});
$('.affix').affix();
$('pre code.prettyprint').each(function(){
var $me = $(this), clss = $me.attr('class').split(" ");
$.each(clss, function(id, cls) {
if (cls.indexOf(',') != -1) {
//lang-html,fid-c5a55bb34cf4476984a6faea9f875fe0 style
var s = cls.split(",");
setTimeout(function(){
$me.removeClass(cls);
$me.addClass(s[0].trim());
},1);
cls = s[1].trim();
var id = cls.substring(4);
//$me.parent().replaceWith('<iframe data-id="' + id + '"></iframe>');
$me.parent().addClass("code").append($('<div class="btn-try-it" data-fiddle="' + id + '">Try it yourself <i class="icon-angle-right"></i>'));
return false;
}
})
});
$('body').bind('_resize', function(evt){
$if = $('iframe[data-id=' + evt.id + ']');
if ($if.size() == 0) return;
var css = {height: evt.h};
$if.animate(css, 300);
});
$('body').bind('_show_sample_code', function(){
var popup = window.open("about:blank", "_rythmfiddle_sample_code");
popup.location.href = "@(fiddleWebSite)/#/sample_model_code";
});
};
fx();
document.domain = location.host.replace(/^.*?([^.]+\.[^.]+)$/g,'$1');
</script>