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-bcapi
-
Run the generator
yo bcapi
-
Install required depedencies
npm install
-
Start 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 bcapi
component
Example:
yo bcapi:component red
Produces three files: app/red.html
, app/scripts/red.js
, app/styles/red.css
app/red.html
:
red Launch <!-- Core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster -->
app/scripts/red.js
:
window { //some functions omitted for brevity { window { //the page has loaded! }; } ;};
gadget
Example:
yo bcapi:gadget green
Produces three files: app/green.html
, app/scripts/green.js
, app/styles/green.css
app/green.html
:
green Gadget <!-- Core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster -->
app/scripts/green.js
:
window { var closeButton; { ; //closes gadget window } { closeButton = document; closeButtononclick = closeWindow; } ;};
launch
Example:
yo bcapi:launch greenLaunch
Produces three files: app/greenLaunch.html
, app/scripts/greenLaunch.js
, app/styles/greenLaunch.css
app/greenLaunch.html
:
greenLaunch Launch <!-- Core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster -->
app/scripts/greenLaunch.js
:
window { var closeButton; { //get the current absolute URL path var currentAbsPath = documentURL0; // the hash is to support chrome HTML components var APP_PATH = currentAbsPath + '/'; //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)'; ; } { closeButton = document; closeButtononclick = toggleGadget; } ;};
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