Name: firefoxos-webbing
Owner: Yahoo Inc.
Description: A template to package web apps for Firefox OS.
Created: 2015-02-27 00:32:04.0
Updated: 2017-10-04 11:05:45.0
Pushed: 2015-05-13 03:27:43.0
Size: 232
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
A template to package web apps for Firefox OS.
There a tons of well-written mobile web apps that would work wonderfully as Firefox OS apps. However, having an app that just loads a mobile site poses some issues.
Webbing solves those issues by providing the following features:
By default, the app will load yahoo.com. To change this to your app's URL, simply change the value of `core_site_urlin ``locales/app.en-US.properties` andlocales/app.es.properties`` to be the URL of your site.
Yahoo's theme may be purple, but yours probably isn't. To change how webbing looks, simply edit `css/style.css, or add another stylesheet that overrides the styles set in ``css/style.css```. Finding the right property to change shouldn't be too bad, but here are some common ones:
`background-colorproperty of ``#spinner```.`background-colorproperty of ``#footer```.`colorproperty of ``#footer span```.And don't forget to swap out Yahoo's icons in `img/` to your own.
If you're javascript-saavy, altering the behavior of webbing should be pretty simple. Simply poke around `js/script.js` and tweak things to your liking.
A common thing that you might want to change is when the footer appears, so we broke out that configuration into a file called `webbing.json`. Here, you can specify the patterns of the URL's where you'd like the footer to show or hide. Patterns are given as regular expressions. Here's the rundown of all the possible values in your config.
// Describes the configuration for the footer that contains a back button.
"footer": {
// A list of URL patterns that describe pages you DON'T want the footer to appear on. You can use {APP_URL} to
// specify the app url for the current locale. Note: If the current url does not match a pattern listed in this
// blacklist, the footer WILL be shown.
"blacklist": ["^{APP_URL}.*$"],
// A list of URL patters that describe pages you always DO want the footer to appear on. These will take
// precedence over the patterns specified in "blacklist". You can use {APP_URL} to specify the app url for the
// current locale.
"whitelist": []
},
// Describes properties relating to the loading screen that shows when your app is launching
"loading_indicator": {
// The maximum time the loading screen will show (in milliseconds). If you don't set this property, then the
// loading screen will be dismissed when the page is fully loaded. You can set this if you want to hide
// the loading screen after a specified time, even if the page hasn't finished loaded yet.
// IMPORTANT: Due to the amount of work being done while the app is loading, this interval may not be accurate.
// On most sites variances should be small (~250ms), but could be up to 1000ms when loading complicated websites.
"max_load_time": 2000
}
Important: Because these patterns are strings, don't forget to escape backslashes. For example, if you wanted to blacklist `http://mysite.com, you would write the pattern as ``http://mysite\.com```.
The default `webbing.json` file will hide the footer on any URL in your app's domain, and show it whenever your user navigate's off-domain.
This template was inspired by the work of the Harald Kirschner and Louis Stowasser
L20n
spin.js