Promises reworked, menubar functionality in events/options improved

package.json

@@ -1,6 +1,6 @@
 {
   "name": "atvjs",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Blazing fast Apple TV application development using pure JavaScript.",
   "keywords": [
     "atvjs",

src/handler.js

@@ -88,36 +88,57 @@ let handlers = {
          *
          * @private
          * @param  {Event} e    The event passed while this handler was invoked
+         * @return {Promise}
          */
         onMenuItemSelect(e) {
             let element = e.target;
             let menuId = element.getAttribute('id');
             let elementType = element.nodeName.toLowerCase();
             let page = element.page;
+            let options = element.options;
 
             if (elementType === 'menuitem') {
                 // no need to proceed if the page is already loaded or there is no page definition present
                 if ((!element.pageDoc || element.getAttribute(menuItemReloadAttribute)) && page) {
-                    // set a loading message intially to the menuitem
-                    Menu.setDocument(Navigation.getLoaderDoc(Menu.getLoadingMessage()), menuId)
-                    // load the page
-                    page().then((doc) => {
+                    // Loading element
+                    let loading = function (res) {
+                        Menu.setDocument(res, menuId);
+                    };
+                    // Load page
+                    let loadPage = function(){
+                        return page(options);
+                    };
+                    // Page loaded
+                    let pageLoaded = function(doc) {
                         // if there is a document loaded, assign it to the menuitem
                         if (doc) {
                             // assign the pageDoc to disable reload everytime
                             element.pageDoc = doc;
                             Menu.setDocument(doc, menuId);
                         }
-                        // dissmiss any open modals
+                        // dismiss any open modals
                         Navigation.dismissModal();
-                    }, (error) => {
+                    };
+                    // Error occurred
+                    let error = function(error) {
                         // if there was an error loading the page, set an error page to the menu item
-                        Menu.setDocument(Navigation.getErrorDoc(error), menuId);
-                        // dissmiss any open modals
-                        Navigation.dismissModal();
-                    });
+                        return Navigation.getErrorDoc(error)
+                            .then(function (res) {
+                                Menu.setDocument(res, menuId);
+                                // dismiss any open modals
+                                Navigation.dismissModal();
+                            });
+                    };
+
+                    return Navigation
+                        .getLoaderDoc(Menu.getLoadingMessage())
+                        .then(loading)
+                        .then(loadPage)
+                        .then(pageLoaded)
+                        .catch(error);
                 }
             }
+            return Promise.resolve(false)
         }
     }
 };
@@ -130,7 +151,7 @@ let handlers = {
 function setOptions(cfg = {}) {
     console.log('setting handler options...', cfg);
     // override the default options
-    _.defaultsDeep(handlers, cfg.handlers);
+    _.defaultsDeep(handlers, cfg.handlers); 
 }
 
 /**

src/index.js

@@ -1,5 +1,7 @@
 // external libraries
-import 'babel-polyfill';
+if (!global._babelPolyfill) {
+    require('babel-polyfill');
+}
 import _ from 'lodash';
 import PubSub from 'pubsub-js';
 import LZString from 'lz-string';

src/menu.js

@@ -2,15 +2,14 @@ import _ from 'lodash';
 import Parser from './parser';
 
 // base menu string for initial document creation
-const docStr = '<document><menuBarTemplate><menuBar></menuBar></menuBarTemplate></document>';
-
+let docStr = '<document><menuBarTemplate><menuBar></menuBar></menuBarTemplate></document>';
 // indicate whether the menu was created
 let created = false;
 
 // few private instances
-let doc = Parser.dom(docStr);
-let menuBarEl = (doc.getElementsByTagName('menuBar')).item(0);
-let menuBarFeature = menuBarEl && menuBarEl.getFeature('MenuBarDocument');
+let doc;
+let menuBarEl;
+let menuBarFeature;
 let itemsCache = {};
 
 // default menu options
@@ -44,13 +43,13 @@ function setAttributes(el, attributes) {
 /**
  * Returns instance of the menu document (auto create if not already created)
  * 
- * @return {Document}		Instance of the created menu document.
+ * @return {Promise}		Promise with instance of the created menu document.
  */
 function get() {
     if (!created) {
-        create();
+        return create();
     }
-    return doc;
+    return Promise.resolve(doc);
 }
 
 /**
@@ -74,6 +73,8 @@ function addItem(item = {}) {
     el.innerHTML = `<title>${(_.isFunction(item.name) ? item.name() : item.name)}</title>`;
     // add page reference
     el.page = item.page;
+    // add page options reference
+    el.options = item.options;
     // appends to the menu
     menuBarEl.insertBefore(el, null);
     // cache for later use
@@ -83,29 +84,41 @@ function addItem(item = {}) {
 }
 
 /**
- * Generates a menu from the configuration obejct.
+ * Generates a menu from the configuration object.
  * 
  * @param  {Object} cfg 		Menu related configurations
- * @return {Document}     		The created menu document
+ * @return {Promise<Document>}     		Promise with created menu document
  */
 function create(cfg = {}) {
     if (created) {
         console.warn('An instance of menu already exists, skipping creation...');
-        return;
+        return Promise.resolve(doc);
     }
     // defaults
     _.assign(defaults, cfg);
 
     console.log('creating menu...', defaults);
-
-    // set attributes to the menubar element
-    setAttributes(menuBarEl, defaults.attributes);
-    // add all items to the menubar
-    _.each(defaults.items, (item) => addItem(item));
-    // indicate done
-    created = true;
-
-    return doc;
+
+    let afterMenuDocCreated = function (res) {
+        doc = res;
+        menuBarEl = (doc.getElementsByTagName('menuBar')).item(0);
+        menuBarFeature = menuBarEl && menuBarEl.getFeature('MenuBarDocument');
+        // set attributes to the menubar element
+        setAttributes(menuBarEl, defaults.attributes);
+        // add all items to the menubar
+        _.each(defaults.items, (item) => addItem(item));
+        // indicate done
+        created = true;
+        return doc;
+    };
+
+    if(!!defaults.template){
+        // if template was specified, use it.
+        docStr = _.isFunction(defaults.template) ? defaults.template() : defaults.template
+    }
+
+    return Parser.dom(docStr)
+        .then(afterMenuDocCreated);
 }
 
 /**