generator-bcapi
v0.0.6
Published
A generator for Conduit Toolbar Apps using the BCAPI.js
Downloads
18
Maintainers
pbojinovReadme
generator-bcapi
A Yeoman generator that provides boilerplate code to easily create toolbar apps.
Maintainer: Petar Bojinov
Prerequisites
Have node.js installed on your computer. See instructions here
Make sure you have yo installed
npm install -g yo
Getting Started
Install the generator by running
npm install -g generator-bcapiRun the generator
yo bcapiInstall required depedencies
npm installStart writing your app :)
Generators
Available generators:
Note: Generators are to be run from the root directory of your app.
app
Generates a new toolbar app, generating all the boilerplate you need to get started. The app generator also optionally installs Twitter Bootstrap 3.0 and jQuery (1.10.2)
Example:
yo bcapicomponent
Example:
yo bcapi:component redProduces three files: app/red.html, app/scripts/red.js, app/styles/red.css
app/red.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../favicon.ico">
<title>red Launch</title>
<link rel="stylesheet" href="styles/red.css"/>
</head>
<body>
<button id="launchGadget" name="Launch Gadget"></button>
<!-- Core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://api.conduit.com/BrowserCompApi.js"></script>
<script type="text/javascript" src="scripts/red.js"></script>
</body>
</html>app/scripts/red.js:
window.onload = function() {
//some functions omitted for brevity
function initialize() {
window.EBDocumentComplete = function(tabid) {
//the page has loaded!
};
}
initialize();
};gadget
Example:
yo bcapi:gadget greenProduces three files: app/green.html, app/scripts/green.js, app/styles/green.css
app/green.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../favicon.ico">
<title>green Gadget</title>
<link rel="stylesheet" href="styles/green.css"/>
</head>
<body>
<button id="closeButton" name="close"></button>
<!-- Core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://api.conduit.com/BrowserCompApi.js"></script>
<script type="text/javascript" src="scripts/green.js"></script>
</body>
</html>app/scripts/green.js:
window.onload = function() {
var closeButton;
function closeWindow() {
CloseFloatingWindow(); //closes gadget window
}
function initialize() {
closeButton = document.getElementById('closeButton');
closeButton.onclick = closeWindow;
}
initialize();
};launch
Example:
yo bcapi:launch greenLaunchProduces three files: app/greenLaunch.html, app/scripts/greenLaunch.js, app/styles/greenLaunch.css
app/greenLaunch.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../favicon.ico">
<title>greenLaunch Launch</title>
<link rel="stylesheet" href="styles/greenLaunch.css"/>
</head>
<body>
<button id="launchGadget" name="Launch Gadget"></button>
<!-- Core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://api.conduit.com/BrowserCompApi.js"></script>
<script type="text/javascript" src="scripts/greenLaunch.js"></script>
</body>
</html>app/scripts/greenLaunch.js:
window.onload = function() {
var closeButton;
function toggleGadget() {
//get the current absolute URL path
var currentAbsPath = (((document.URL).toString()).split('#'))[0]; // the hash is to support chrome HTML components
var APP_PATH = currentAbsPath.substring(0, currentAbsPath.lastIndexOf('/')) + '/';
//use the absolute path, make sure gadget and greenGadget.html are in the same folder!
var url = APP_PATH + 'greenGadget.html';
var width = 100;
var height = 300;
var features = 'resizable=no, scrollbars=no, titlebar=no, savelocation=no, saveresizedsize=no, closeonexternalclick=yes, openposition=alignment:(B,R)';
LaunchGadget(url, width, height, features);
}
function initialize() {
closeButton = document.getElementById('close');
closeButton.onclick = toggleGadget;
}
initialize();
};Structure
The basic structure of the project is given in the following way:
├── app/
│ └── scripts/
│ └── styles/
│ └── assets/
├── dist/
│ └── Apps/
├── .editorconfig
├── .jshintrc
├── favicon.ico
├── Gruntfile.js
└── package.json