Skip to content
Browse files

Billboard feature, used by Reader to display 'Browser unsupported'.

  • Loading branch information...
1 parent 1b5c86f commit 351f9cc8a5f46f3546d77b9f1da04912d7461b5f @joseph committed Feb 10, 2012
Showing with 184 additions and 2 deletions.
  1. +41 −0 src/core/billboard.js
  2. +4 −2 src/core/reader.js
  3. +1 −0 src/monocore.js
  4. +42 −0 styles/monocore.css
  5. +27 −0 test/billboard/ad.html
  6. +69 −0 test/billboard/index.html
View
41 src/core/billboard.js
@@ -0,0 +1,41 @@
+Monocle.Billboard = function (reader) {
+ var API = { constructor: Monocle.Billboard };
+ var k = API.constants = API.constructor;
+ var p = API.properties = {
+ reader: reader,
+ cntr: null
+ };
+
+
+ function show(urlOrElement, options) {
+ var options = options || {};
+ var elem = urlOrElement;
+ if (typeof urlOrElement == 'string') {
+ var url = urlOrElement;
+ elem = reader.dom.make('iframe');
+ elem.setAttribute('src', url);
+ }
+ p.cntr = reader.dom.append('div', k.CLS.cntr);
+ p.cntr.appendChild(elem);
+ if (options.closeButton != false) {
+ var cBtn = p.cntr.dom.append('div', k.CLS.closeButton);
+ Monocle.Events.listen(cBtn, 'click', hide);
+ }
+ }
+
+
+ function hide() {
+ p.cntr.parentNode.removeChild(p.cntr);
+ }
+
+
+ API.show = show;
+ API.hide = hide;
+
+ return API;
+}
+
+Monocle.Billboard.CLS = {
+ cntr: 'billboard_container',
+ closeButton: 'billboard_close'
+}
View
6 src/core/reader.js
@@ -86,10 +86,11 @@ Monocle.Reader = function (node, bookData, options, onLoadCallback) {
if (typeof box == "string") { box = document.getElementById(box); }
dom = API.dom = box.dom = new Monocle.Factory(box, 'box', 0, API);
+ API.billboard = new Monocle.Billboard(API);
+
if (!Monocle.Browser.env.isCompatible()) {
if (dispatchEvent("monocle:incompatible", {}, true)) {
- // TODO: Something cheerier? More informative?
- box.innerHTML = "Your browser is not compatible with Monocle.";
+ API.billboard.show(k.SUPPORT_URL, { closeButton: false });
}
return;
}
@@ -766,3 +767,4 @@ Monocle.Reader.DEFAULT_STYLE_RULES = [
"height: auto !important;" +
"}"
]
+Monocle.Reader.SUPPORT_URL = 'http://unsupported.monoclejs.com';
View
1 src/monocore.js
@@ -10,6 +10,7 @@
//= require "core/book"
//= require "core/place"
//= require "core/component"
+//= require "core/billboard"
//= require "controls/panel"
//= require "panels/twopane"
//= require "panels/imode"
View
42 styles/monocore.css
@@ -43,6 +43,48 @@ div.monelem_overlay {
}
+/* A full-size panel to display an announcement (iframe or div) */
+div.monelem_billboard_container {
+ background: #FFF;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 9999;
+}
+
+div.monelem_billboard_container iframe {
+ border: none;
+ width: 100%;
+ height: 100%;
+}
+
+div.monelem_billboard_close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 50px;
+ height: 20px;
+ color: white;
+ background: #C00;
+ cursor: pointer;
+ border-bottom-left-radius: 4px;
+ text-shadow: 1px 1px 1px #900;
+ font: 9pt Helvetica Neue, Helvetica, sans-serif;
+}
+
+div.monelem_billboard_close:after {
+ display: block;
+ content: 'Close';
+ width: 100%;
+ line-height: 20px;
+ text-align: center;
+}
+
+
+
+
/*===========================================================================
PANELS
---------------------------------------------------------------------------*/
View
27 test/billboard/ad.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Full-page Announcement</title>
+ <style>
+ body {
+ background: #CCD;
+ color: #036;
+ text-align: center;
+ font-family: Helvetica Neue, Helvetica, sans-serif;
+ line-height: 1.2;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Full-page Announcement</h1>
+ <p>
+ This full-page announcement is displayed to announce something.
+ It's used internally by Monocle to display a helpful message if
+ the browser environment does not have required features.
+ </p>
+ <p>
+ You can also use it for your own purposes - like tutorials or
+ whatever.
+ </p>
+ </body>
+</html>
View
69 test/billboard/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Billboard</title>
+ <link rel="stylesheet" type="text/css" href="../tests.css" />
+
+ <link rel="stylesheet" type="text/css" href="../../dist/styles/monocore.css" />
+ <style type="text/css">
+ #reader {
+ position: relative;
+ width: 300px;
+ height: 400px;
+ border: 1px solid #000;
+ background-color: #CCC;
+ margin-bottom: 50px;
+ }
+ </style>
+
+ <script type="text/javascript" src="../../dist/scripts/monocore.js"></script>
+ <script>
+ (function () {
+ function init() {
+ window.reader = Monocle.Reader('reader', null, null, function (rdr) {
+ Monocle.defer(function () {
+ rdr.billboard.show('ad.html');
+ }, 2000);
+ });
+ }
+
+ Monocle.Events.listen(window, 'load', init);
+ })();
+ </script>
+ </head>
+ <body class="narrow">
+ <a href="../index.html" class="backToGuide">&larr; Back to Guide</a>
+
+ <h1>Billboard</h1>
+ <p>
+ Two seconds after initialisation, this reader will display a message.
+ </p>
+
+ <div id="reader">
+ <h1>Hello world.</h1>
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <p>
+ Lorem ipsum dollar sit amet.
+ </p>
+ </div>
+
+ </body>
+</html>

0 comments on commit 351f9cc

Please sign in to comment.
Something went wrong with that request. Please try again.