Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added a splash screen for unsupported browsers.
  • Loading branch information
max99x committed Sep 17, 2011
1 parent dfbe7a7 commit b7f617a
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 31 deletions.
6 changes: 3 additions & 3 deletions Cakefile
Expand Up @@ -5,9 +5,9 @@ coffee = require 'coffee-script'

INCLUDES = ['images', 'lib']
LIBRARIES = ['lib/jqconsole.js']
APP_FILES = ['base.coffee', 'hash.coffee', 'dom.coffee', 'repl.coffee',
'pager.coffee', 'session.coffee', 'languages.coffee',
'analytics.coffee']
APP_FILES = ['browser-check.coffee', 'base.coffee', 'hash.coffee', 'dom.coffee',
'repl.coffee', 'pager.coffee', 'session.coffee',
'languages.coffee', 'analytics.coffee']
JS_MINIFIER = "uglifyjs -nc --unsafe "
CSS_MINIFIER = "java -jar ./jsrepl/tools/yuicompressor-2.4.6/build/yuicompressor-2.4.6.jar "

Expand Down
14 changes: 14 additions & 0 deletions browser-check.coffee
@@ -0,0 +1,14 @@
chromeVersion = navigator.userAgent.match /Chrome\/(\d+)/i
safariVersion = navigator.userAgent.match /Version\/(\d+)/i
if (($.browser.msie and $.browser.version < 9.0) or
($.browser.mozilla and $.browser.version < 3.6) or
($.browser.opera and $.browser.version < 11.51) or
($.browser.safari and chromeVersion and chromeVersion[1] < 13) or
($.browser.safari and safariVersion and safariVersion[1] < 5))
$ ->
$('#content-fallback').show()
$('#fallback-ignore').click -> $('#content-fallback').hide()

$.extend REPLIT,
ISMOBILE: Boolean navigator.userAgent.match /iPhone|iPad|iPod|Android/i
ISIOS: Boolean navigator.userAgent.match /iPhone|iPad|iPod/i
78 changes: 71 additions & 7 deletions css/style.css
Expand Up @@ -336,13 +336,13 @@ html, body {
height: 16px;
padding-left: 5px;
border-radius: 6px;
background-image: url(../images/progress-precomposed.png);
background-image: url(../images/progress.png), -webkit-gradient(linear, left top, left bottom, from(#fa6e43), to(#f2220c));
background-image: url(../images/progress.png), -webkit-linear-gradient(top, #fa6e43, #f2220c);
background-image: url(../images/progress.png), -moz-linear-gradient(top, #fa6e43, #f2220c);
background-image: url(../images/progress.png), -ms-linear-gradient(top, #fa6e43, #f2220c);
background-image: url(../images/progress.png), -o-linear-gradient(top, #fa6e43, #f2220c);
background-image: url(../images/progress.png), linear-gradient(top, #fa6e43, #f2220c);
background-image: url('../images/progress-precomposed.png');
background-image: url('../images/progress.png'), -webkit-gradient(linear, left top, left bottom, from(#fa6e43), to(#f2220c));
background-image: url('../images/progress.png'), -webkit-linear-gradient(top, #fa6e43, #f2220c);
background-image: url('../images/progress.png'), -moz-linear-gradient(top, #fa6e43, #f2220c);
background-image: url('../images/progress.png'), -ms-linear-gradient(top, #fa6e43, #f2220c);
background-image: url('../images/progress.png'), -o-linear-gradient(top, #fa6e43, #f2220c);
background-image: url('../images/progress.png'), linear-gradient(top, #fa6e43, #f2220c);
}

.jqconsole {
Expand Down Expand Up @@ -899,6 +899,70 @@ code .il { color: #40a070 } /* Literal.Number.Integer.Long */
text-decoration: underline;
}

/* Language Selector */

#content-fallback {
color: #666;
display: none;
z-index: 100;
position: absolute;
top: 61px;
left: 0;
width: 100%;
background: white;
height: 100%;
}

#fallback-header {
text-align: center;
font-size: 24pt;
width: 500px !important;
margin: 22pt auto;
}

#fallback-content {
text-align: center;
width: 500px !important;
margin: 22pt auto;
}

#fallback-content a, #fallback-content a:link, #fallback-content a:visited {
width: 100px;
height: 20px;
padding-top: 100px;
display: inline-block;
text-align: center;
margin: 10pt;
color: #666;
text-decoration: none;
white-space: nowrap;
}

#browser-firefox {
background: url('../images/browsers.png') 0px 0px no-repeat;
}

#browser-chrome {
background: url('../images/browsers.png') -100px 0px no-repeat;
}

#browser-safari {
background: url('../images/browsers.png') -200px 0px no-repeat;
}

#browser-ie {
background: url('../images/browsers.png') -300px 0px no-repeat;
}

#browser-opera {
background: url('../images/browsers.png') -400px 0px no-repeat;
}

#fallback-ignore, #fallback-ignore:active {
margin-top: 22px;
cursor: pointer;
}

/* Save */

#save-box {
Expand Down
21 changes: 9 additions & 12 deletions dom.coffee
@@ -1,7 +1,5 @@
# Core module.
# Responsible for DOM initializations, and most interactions.
ISMOBILE = window.ISMOBILE
ISIOS = Boolean navigator.userAgent.match /iPhone|iPad|iPod/i
DEFAULT_CONTENT_PADDING = 200
FOOTER_HEIGHT = 30
HEADER_HEIGHT = 61
Expand Down Expand Up @@ -44,8 +42,7 @@ $.extend REPLIT,
CONSOLE_HIDDEN: CONSOLE_HIDDEN
EDITOR_HIDDEN: EDITOR_HIDDEN
DEFAULT_CONTENT_PADDING: DEFAULT_CONTENT_PADDING
ISMOBILE: ISMOBILE
split_ratio: if ISMOBILE then EDITOR_HIDDEN else DEFAULT_SPLIT
split_ratio: if REPLIT.ISMOBILE then EDITOR_HIDDEN else DEFAULT_SPLIT
# NOTE: These should be synced with PAGES.workspace.width in pager.coffee.
min_content_width: 500
max_content_width: 3000
Expand Down Expand Up @@ -242,12 +239,12 @@ $.extend REPLIT,
bottom = "rgb(#{red_bottom}, #{green_bottom}, #{blue_bottom})"

if $.browser.webkit
fill.css 'background-image': "url(../images/progress.png), -webkit-gradient(linear, left top, left bottom, from(#{top}), to(#{bottom}))"
fill.css 'background-image': "url('/images/progress.png'), -webkit-gradient(linear, left top, left bottom, from(#{top}), to(#{bottom}))"
else if $.browser.mozilla
fill.css 'background-image': "url(../images/progress.png), -moz-linear-gradient(top, #{top}, #{bottom})"
fill.css 'background-image': "url('/images/progress.png'), -moz-linear-gradient(top, #{top}, #{bottom})"
else if $.browser.opera
fill.css 'background-image': "url(../images/progress.png), -o-linear-gradient(top, #{top}, #{bottom})"
fill.css 'background-image': "url(../images/progress.png), linear-gradient(top, #{top}, #{bottom})"
fill.css 'background-image': "url('/images/progress.png'), -o-linear-gradient(top, #{top}, #{bottom})"
fill.css 'background-image': "url('/images/progress.png'), linear-gradient(top, #{top}, #{bottom})"

# Resize containers on each window resize, split ratio change or
# content padding change.
Expand All @@ -269,7 +266,7 @@ $.extend REPLIT,
# Resize container and current page.
@$container.css
width: width
if ISMOBILE and not $('.page:visible').is '#content-workspace'
if @ISMOBILE and not $('.page:visible').is '#content-workspace'
@$container.css 'height', 'auto'
else
@$container.css 'height', height
Expand Down Expand Up @@ -319,7 +316,7 @@ $.extend REPLIT,
@$editor.css 'height', @$editorContainer.innerHeight() - editor_vpadding

# Call to Ace editor resize.
@editor.resize() if not ISMOBILE
@editor.resize() if not @ISMOBILE

InjectSocial: ->
$rootDOM = $('#social-buttons-container')
Expand All @@ -339,7 +336,7 @@ $.extend REPLIT,
$.getScript 'https://apis.google.com/js/plusone.js'

$ ->
if ISIOS then $('html, body').css 'overflow', 'hidden'
if REPLIT.ISIOS then $('html, body').css 'overflow', 'hidden'
REPLIT.$this.bind 'language_loading', (_, system_name) ->
REPLIT.$progress.animate opacity: 1, 'fast'
REPLIT.$progressFill.css width: 0
Expand Down Expand Up @@ -374,7 +371,7 @@ $ ->
# Android takes time to know its own width!
setTimeout cb, 300
$(window).bind 'orientationchange', check_orientation
if ISMOBILE then check_orientation()
if REPLIT.ISMOBILE then check_orientation()
REPLIT.InitDOM()
$(window).bind 'load', ->
cb = -> REPLIT.InjectSocial()
Expand Down
Binary file added images/browsers.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 21 additions & 9 deletions index.html
Expand Up @@ -17,15 +17,8 @@
<link rel="shortcut icon" href="/images/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" type="image/png" />

<!-- Style -->
<script>
window.ISMOBILE = Boolean(navigator.userAgent.match(/iPhone|iPad|iPod|Android/i));
document.write('<link type="text/css" rel="stylesheet" href="/css/' + (ISMOBILE ? 'mobile' : 'style') + '.css" />');
</script>

<!-- Libraries -->
<script src="/lib/ace/ace.js"></script>
<script src="/lib/ace/theme-textmate.js"></script>
<!-- Scripts -->
<link type="text/css" rel="stylesheet" href="/css/style.css" />

<!-- Application -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Expand All @@ -40,6 +33,7 @@
<!-- repl.it -->
<script src="/lib/jqconsole.js"></script>
<script src="/base.js"></script>
<script src="/browser-check.js"></script>
<script src="/hash.js"></script>
<script src="/dom.js"></script>
<script src="/repl.js"></script>
Expand All @@ -48,6 +42,8 @@
<script src="/languages.js"></script>
<script src="/analytics.js"></script>
<!--/UNBAKED-->
<script src="/lib/ace/ace.js"></script>
<script src="/lib/ace/theme-textmate.js"></script>

<!-- Session -->
<script>try{ {{SESSION_PLACEHOLDER}} } catch(e) {}</script>
Expand Down Expand Up @@ -168,6 +164,22 @@

<div id="resize-right"></div>
</div>
<!-- Browser fallback page. -->
<div id="content-fallback">
<div id="fallback-header">Browser Version Not Supported</div>
<div id="fallback-content">
Due to repl.it's reliance on advanced JavaScript techniques, older browsers might have problems running it correctly. Please download the latest version of your favourite browser.
<br />
<a href="http://www.google.com/chrome" id="browser-chrome">Chrome 13+</a>
<a href="http://www.mozilla.org/firefox/" id="browser-firefox">Firefox 3.6+</a>
<a href="http://www.opera.com/download/" id="browser-opera">Opera 11.51+</a>
<br />
<a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie" id="browser-ie">IE 9+</a>
<a href="http://www.apple.com/safari/download/" id="browser-safari">Safari 5+</a>
<div id="fallback-ignore">Let me try anyway!</div>
</div>
</div>
<!-- Session save box. -->
<div id="save-box">
<div id="save-box-handle"></div>
<label for="save-box-link">Share on:</label>
Expand Down

0 comments on commit b7f617a

Please sign in to comment.