Skip to content

Instantly share code, notes, and snippets.

@mauritslamers
Created May 7, 2014 22:13
Show Gist options
  • Save mauritslamers/2591cc2304e306df1e1c to your computer and use it in GitHub Desktop.
Save mauritslamers/2591cc2304e306df1e1c to your computer and use it in GitHub Desktop.
<%
// # SPROUTCORE DEFAULT INDEX TEMPLATE
// # This template provide provides a basic wrapper for a SproutCore client.
// # Most of the time, it will be sufficient for your own needs. However, if
// # you need to create your own template, you can do so by copying this file
// # into your client, naming it 'index.rhtml' and then adding the options
// # :layout => 'lib/index' to your Buildfile.
// #
// # See the comments in this file for more information on what you can
// # change.
// As this is the EJS template, we are going to change a few things
// one of those things is that this document has to be fed a single hash with all the data contained
// what follows here is a specification of that hash
// {
// config: {
// contentForHtml5Manifest: "",
// useChromeFrame: false,
// statusBarStyle: "default",
// touchEnabled: true,
// precomposedIcon: "", // an url to an icon
// icon: "", //url to an icon, which is not precomposed (what is the difference?)
// startupImagePortrait: "",
// startupImageLandscape: "",
// favicon: "",
// bootStrap: "", // string with script tags
// buildMode: "" // "debug", or "build" (perhaps more options?) BT.runMode =>!!
//
// },
// // should appData not simply be the app itself?
// appData: {
// scripts: [], // array of urls
// stylesheets: [] // array of urls,
// title: "",
// buildNumber: "", // build number
// language: "en",
// }
//
// a few other things:
// - sc_static: a function which looks up the url of a specific static resource
// -
//
-%>
<!DOCTYPE html>
<html <% if (app.useHtml5Manifest) { %> manifest="manifest.appcache" <% } %> class="no-js" lang="<%= app.language %>">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge<%= app.useChromeFrame ? ',chrome=1' : '' %>" >
<script>
var SC_benchmarkPreloadEvents = { headStart: new Date().getTime() };
var docElem = window.documentElement || document.documentElement;
if(docElem) {
docElem.className = docElem.className.replace(/(^|\s)no-js(\s|$)/, '$1js$2');
docElem = null;
}
</script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" >
<meta http-equiv="Content-Script-Type" content="text/javascript" >
<meta name="apple-mobile-web-app-capable" content="yes" >
<meta name="apple-mobile-web-app-status-bar-style" content="<%= app.statusBarStyle || 'default' %>" >
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" >
<% if (app.touchEnabled) { %>
<% if (app.precomposedIcon) { %>
<link rel="apple-touch-icon-precomposed" href="<%- sc_static(app.precomposedIcon) %>" >
<% } else if (app.icon) { %>
<link rel="apple-touch-icon" href="<%- sc_static(app.icon) %>" >
<% } %>
<% if (app.startupImagePortrait) { %>
<link rel="apple-touch-startup-image" media="screen and (orientation:portrait)" href="<%- sc_static(app.startup_image_portrait) %>" >
<% } %>
<% if (app.startupImageLandscape) { %>
<link rel="apple-touch-startup-image" media="screen and (orientation:landscape)" href="<%- sc_static(config.startup_image_landscape) %>" >
<% } %>
<% } %>
<% if (app.favicon) { %>
<link rel="shortcut icon" href="<%- sc_static(config.favicon) %>" type="image/x-icon" >
<% } %>
<%
//Set the 'title' in your config to alter this setting
%>
<title><%= app.get('title') %></title>
<% //
// You may choose to load one or more bootstrap resources. These are
// JS targets that you would like to load at the top of the page. Specify
// these in your Buildfile with the 'bootstrap' config.
%>
<script>
window.SC = window.SC || { MODULE_INFO: {}, LAZY_INSTANTIATION: {} };
SC.buildMode = '<%= BT.runMode %>';
SC.buildNumber = '<%= app.get("buildNumber") %>';
SC.buildLocale = '<%= app.get("language") %>';
</script>
<%- app.get('bootstrap') %>
<% // This line should appear in your head area to include the stylesheets
// generated by your client. If you need to include your own
// stylesheets, you don't need to change it here. Instead use the
// required option in your config.
%>
<script>
(function() {
var styles = [];
if (window.devicePixelRatio > 1 || window.location.search.indexOf("2x") > -1) {
styles = <%- app.stylesheetUrls({ x2: true }) %>;
SC.APP_IMAGE_ASSETS = <%- app.imageUrls({ sprited: true, x2: true }) %>;
} else {
styles = <%- app.stylesheetUrls() %>;
SC.APP_IMAGE_ASSETS = <%- app.imageUrls({ sprited: true }) %>;
}
var head = document.getElementsByTagName("head")[0],
len = styles.length, idx, css;
for (idx = 0; idx < len; idx++) {
css = document.createElement('link');
css.rel = 'stylesheet';
css.type = 'text/css';
css.href = styles[idx];
css.media = 'screen'
head.appendChild(css);
}
})();
</script>
<%- app.contentForPageStyles %>
<script>
SC.benchmarkPreloadEvents['headEnd'] = new Date().getTime();
</script>
</head>
<%
// The theme CSS class is added automatically based on your chosen theme.
// If you need to specify a custom theme name, use app.themeName
%>
<body class="<%= [app.get('themeName'), 'sc-focus'].join(' ') %>">
<script>
SC.benchmarkPreloadEvents['bodyStart'] = new Date().getTime();
</script>
<%
// This section is used to setup additional optional class names on the
// body content based on JS-selected conditions. Use this to make sure you
// show the proper CSS as soon as the page appears.
%>
<%- app.get('bootstrapSetupBodyClassNames') %>
<%
//
// This is where you root body element will appear. To cause your
// content to appear here, just declare content_for('body') in one of
// your partials. (??)
%>
<%- app.get('contentForBody') || "" %>
<% //
// This is where your loading screen will appear. To add a loading screen
// just declare content_for('loading') in one of your partials. If you use
// sc-gen to generate your app, it will create a file called loading.rhtml
// under english.lproj. You can insert the desired content there.
%>
<% if (app.get('contentForLoading')) { %>
<div id="loading">
<%- app.get('contentForLoading') %>
</div>
<% } %>
<% //
// This is where the resources you declare will appear. By default anything
// you add to partials will be added to this section unless you specify
// otherwise. Note that resources are initially hidden so you can pull them
// apart as needed on page load.
%>
<% if (app.get('contentForResources')) { %>
<!-- Resources to be removed from DOM on page load -->
<div id="resources" style="display:none; visibility: hidden;">
<%- app.get('contentForResources') %>
</div>
<% } %>
<% //
// This line should appear at the bottom of your page to include your
// generated JavaScript and any libraries you reference. If you need
// to include other javascripts, add them to the :requires option of
// your client in routes.rb instead of changing it here.
%>
<% app.get('scripts').forEach(function (script) { %>
<script type="text/javascript" src="<%= script.get('relativePath') %>"> </script>
<% }) %>
<% if (app.get('contentForPageJavascript')) { %>
<%- app.get('contentForPageJavascript') %>
<% } %>
<% // If config.html5_history is true, HTML5 history will be activated for
// SC.routes and the SC.routes.baseURI setting will be automatically
// set.
%>
<% if (app.get('html5History')) { %>
<% // TODO: Can we check for the framework in Ruby instead?
%>
<script>
if (SC.routes) {
SC.routes.wantsHistory = true;
SC.routes.baseURI = <%= "" /*"#{@bundle.index_root}/#{language}".to_json */ %>;
}
</script>
<% } %>
<% //
// If you use old-style view helpers in your page, this method must be
// called to actually add the page views to your HTML. Normally this will
// not generate any content.
%>
<%
//render_page_views
%>
<% // Older SproutCore applications need SC.didLoad to be called after onload.
// This is no longer required by SproutCore so it is off by default. To
// reenable set use_window_onload = true in yur config.
%>
<% if (app.get('useWindowOnLoad')) { %>
<!-- Start SproutCore on Page Load -->
<script type="text/javascript">window.onload = SC.didLoad;</script>
<% } %>
<% //
// The final content section can be used to add any last minute setup you
// need to do before the page ends. This is required for loading unit
// tests among other things.
%>
<%= app.get('contentForFinal') %>
<%
//disable main if the application is loaded in design mode
%>
<%= app.get('contentForDesigner') %>
<script>
SC.benchmarkPreloadEvents['bodyEnd'] = new Date().getTime();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment