Permalink
Browse files

integrate app install library

  • Loading branch information...
1 parent caeb5a7 commit ffdb2e3cabb48f03aab749aa9c08d5f05c550a2f @jlongster committed Jul 27, 2012
View
1 bin/run-templates
@@ -21,6 +21,7 @@ var blocks = {
footer: 'footer.html',
js_global: 'js_global.js',
js_init: 'js_init.js',
+ js_require_cfg: 'js_require_cfg.js',
css: 'css.css'
};
View
3 default-project/package.json
@@ -4,7 +4,8 @@
},
"volo": {
"dependencies": {
- "jquery": "github:jquery/jquery/1.7.2"
+ "jquery": "github:jquery/jquery/1.7.2",
+ "install": "github:wavysandbox/install/master"
}
}
}
View
2 default-project/volofile
@@ -267,6 +267,7 @@ module.exports = {
},
run: function (d, v, namedArgs) {
+ var q = v.require('q');
var dir = namedArgs.dir,
files = v.getFilteredFileList(dir),
digests = [],
@@ -326,6 +327,7 @@ module.exports = {
},
appcache: function (d, v, namedArgs) {
+ var q = v.require('q');
var hasBuilt = v.exists(buildDir);
v.command('build')
View
36 default-project/www/css/defaults.css
@@ -230,7 +230,43 @@ td { vertical-align: top; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
+/* Install button */
+.install-ios-msg, .install-error {
+ margin: 1em auto;
+ padding: 1em;
+ width: 200px;
+ display: none;
+}
+
+.install-ios-msg {
+ background-color: yellow;
+}
+
+.install-error {
+ background-color: #ff4444;
+}
+
+.install-btn {
+ background: #0088cc; /* Old browsers */
+ background: -moz-linear-gradient(top, #0088cc 0%, #0055cc 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0055cc)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #0088cc 0%,#0055cc 100%); /* IE10+ */
+ background: linear-gradient(to bottom, #0088cc 0%,#0055cc 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088cc', endColorstr='#0055cc',GradientType=0 ); /* IE6-9 */
+
+ text-align: center;
+ font-size: 200%;
+ margin: 1em auto;
+ display: block;
+ padding: .5em;
+ color: white;
+ width: 10em;
+ max-width: 80%;
+ line-height: 1.2em;
+}
/* ==|== print styles =======================================================
Print styles.
View
13 default-project/www/index.html
@@ -25,6 +25,19 @@
<script src="js/lib/modernizr-2.5.3.min.js"></script>
</head>
<body>
+ <!-- These messages can appear when the user tries to install the
+ app. You can customize the how it looks with CSS and how it
+ behaves (see app.js) -->
+ <div class="install-error"></div>
+ <div class="install-ios-msg">
+ To install, press the forward arrow in Safari and touch "Add to
+ Home Screen"
+ </div>
+
+ <!-- Put this install button somewhere on the page and the user
+ will be able to click it to install your app -->
+ <!-- <button class="install-btn">Install</button> -->
+
<!-- Add your site or application content here -->
View
52 default-project/www/js/app.js
@@ -2,7 +2,10 @@
// The code below uses require.js, a module system for javscript:
// http://requirejs.org/docs/api.html#define
-var global = this;
+require.config({
+ baseUrl: 'js/lib',
+<%- js_require_cfg %>
+});
<%- js_global %>
@@ -13,6 +16,49 @@ define("app", function(require) {
<%- js_init %>
// START HERE: Put your js code here
+
+
+
+
+
+ // Hook up the installation button, feel free to customize how
+ // this works
+
+ var install = require('install');
+
+ function updateInstallButton() {
+ $(function() {
+ var btn = $('.install-btn');
+ if(install.state == 'uninstalled') {
+ btn.show();
+ }
+ else if(install.state == 'installed' || install.state == 'unsupported') {
+ btn.hide();
+ }
+ });
+ }
+
+ $(function() {
+ $('.install-btn').click(install);
+ });
+
+ install.on('change', updateInstallButton);
+
+ install.on('error', function(e, err) {
+ // Feel free to customize this
+ $('.install-error').text(err.toString()).show();
+ });
+
+ install.on('showiOSInstall', function() {
+ // Feel free to customize this
+ var msg = $('.install-ios-msg');
+ msg.show();
+
+ setTimeout(function() {
+ msg.hide();
+ }, 8000);
+ });
+
});
// Include the in-app payments API, and if it fails to load handle it
@@ -21,8 +67,8 @@ define("app", function(require) {
require(['https://marketplace-cdn.addons.mozilla.net/mozmarket.js'],
function() {},
function(err) {
- global.mozmarket = global.mozmarket || {};
- global.mozmarket.buy = function() {
+ window.mozmarket = window.mozmarket || {};
+ window.mozmarket.buy = function() {
alert('The in-app purchasing is currently unavailable.');
};
});
View
137 default-project/www/js/lib/install.js
@@ -0,0 +1,137 @@
+/*jslint nomen: true */
+/*global define, navigator, location, window, chrome */
+
+define(function (require) {
+ 'use strict';
+
+ var $ = require('jquery'),
+ dispatcher = $({}),
+ prop;
+
+ //Create event functions based on dispatcher object
+ function createDispatchFn(id) {
+ return function () {
+ return dispatcher[id].apply(dispatcher, arguments);
+ };
+ }
+
+ /**
+ * Detects if the current app has been installed.
+ *
+ * See https://github.com/wavysandbox/install/blob/master/README.md
+ * for details on how to use.
+ *
+ */
+ function install() {
+ var fn = install[install.type + 'Install'];
+ if (fn) {
+ fn();
+ } else {
+ install.trigger('error', 'unsupported install: ' + install.type);
+ }
+ }
+
+ function triggerChange(state) {
+ install.state = state;
+ install.trigger('change', install.state);
+ }
+
+ /**
+ * The install state. Values are:
+ * 'unknown': the code has not tried to detect any state.
+ *
+ * @type {String}
+ */
+ install.state = 'unknown';
+
+ install.check = function () {
+ var apps = navigator.mozApps,
+ request;
+
+ if (navigator.mozApps) {
+ //Mozilla web apps
+ install.type = 'mozilla';
+ request = navigator.mozApps.getSelf();
+ request.onsuccess = function () {
+ if (this.result) {
+ triggerChange('installed');
+ } else {
+ triggerChange('uninstalled');
+ }
+ };
+
+ request.onerror = function (err) {
+ // Just console log it, no need to bother the user.
+ install.error = err;
+ triggerChange('error');
+ };
+
+ } else if (typeof chrome !== 'undefined' &&
+ chrome.webstore &&
+ chrome.app) {
+ //Chrome web apps
+ install.type = 'chromeStore';
+ if (chrome.app.isInstalled) {
+ triggerChange('installed');
+ } else {
+ triggerChange('uninstalled');
+ }
+ } else if (typeof window.navigator.standalone !== 'undefined') {
+ install.type = 'ios';
+ if (window.navigator.standalone) {
+ triggerChange('installed');
+ } else {
+ triggerChange('uninstalled');
+ }
+ } else {
+ install.type = 'unsupported';
+ triggerChange('unsupported');
+ }
+ };
+
+ /* Mozilla/Firefox installation */
+ install.mozillaInstallUrl = location.href + 'manifest.webapp';
+ install.mozillaInstall = function () {
+ var installRequest = navigator.mozApps.install(install.mozillaInstallUrl);
+
+ installRequest.onsuccess = function (data) {
+ triggerChange('installed');
+ };
+
+ installRequest.onerror = function (err) {
+ install.error = err;
+ triggerChange('error');
+ };
+ };
+
+ /* Chrome installation */
+ install.chromeInstallUrl = null;
+ install.chromeInstall = function () {
+ chrome.webstore.install(install.chromeInstallUrl,
+ function () {
+ triggerChange('installed');
+ }, function (err) {
+ install.error = err;
+ triggerChange('error');
+ });
+ };
+
+ /* iOS installation */
+ //Right now, just asks that something show a UI
+ //element mentioning how to install using the Safari
+ //"Add to Home Screen" button.
+ install.iosInstall = function () {
+ install.trigger('showiOSInstall', navigator.platform.toLowerCase());
+ };
+
+ //Allow install to do events.
+ install.on = createDispatchFn('on');
+ install.off = createDispatchFn('off');
+ install.trigger = createDispatchFn('trigger');
+
+
+ //Start up the checks
+ install.check();
+
+ return install;
+});
View
7 templates/app-stub/js_global.js
@@ -1,7 +0,0 @@
-// Set the path to jQuery, which will fall back to the local version
-// if google is down
-require.config({
- paths: {'jquery':
- ['//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
- 'lib/jquery']}
-});
View
3 templates/app-stub/js_require_cfg.js
@@ -0,0 +1,3 @@
+ paths: {'jquery':
+ ['//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
+ 'lib/jquery']},

0 comments on commit ffdb2e3

Please sign in to comment.