generator-bcapi

A generator for Conduit Toolbar Apps using the BCAPI.js

generator-bcapi

A Yeoman generator that provides boilerplate code to easily create toolbar apps.

Maintainer: Petar Bojinov

  1. Have node.js installed on your computer. See instructions here

  2. Make sure you have yo installed

     npm install -g yo
    
  1. Install the generator by running

     npm install -g generator-bcapi
    
  2. Run the generator

     yo bcapi
    
  3. Install required depedencies

     npm install
    
  4. Start writing your app :)

Available generators:

Note: Generators are to be run from the root directory of your 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 bcapi

Example:

yo bcapi:component red

Produces 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();
};

Example:

yo bcapi:gadget green

Produces 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();
};

Example:

yo bcapi:launch greenLaunch

Produces 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();
};

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

BCAPI Documentation

MIT License