<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * This handles both multiple menus and the main navigation.
 * It supports both tablet via a split window approach.
 * It also supports dynamic manipulation of menu / navbar icons and functionality.
 *
 * The beginninng was based off of: https://github.com/danielsefton/AlloySliderMenu
 * with a lot of refactorings, enhancements, and better comments
 *
 * @version 0.5
 * @author Steven House &lt;steven.m.house@gmail.com&gt;
 *
 * @link https://github.com/danielsefton/AlloySliderMenu
 */

// Access the Global Log Controller
var log = Alloy.Globals.log;
log.debug(&#39;[ROOT] Vroom!  Starting up!&#39;);

var leftMenuWidth = 350;

// Variable declarations
var animateRight, animateLeft, animateReset, animateSideContent;

var touchStartX = 0;
var touchStartY = 0;
var touchRightStarted = false;
var touchLeftStarted = false;
var buttonPressed = false;
var hasSlided = false;
var direction = &quot;reset&quot;;

var viewRefMain;

var sidebarActive = false;

// Icons
var iconStyle = &#39;dark&#39;;

var currentCallbackL1 = [];
var currentCallbackL2 = [];
var currentCallbackR1 = [];
var currentCallbackR2 = [];

var breadcrumbs = [];

init();

Alloy.Globals.Menu = this;



//Alloy.Globals.MainView = $.viewContainer;

//var events = require(&#39;utils/eventReg&#39;);

<span id='global-method-init'>/**
</span> * Start this running
 */
function init() {
    log.debug(&#39;[FOUNDATION] : init&#39;);
    addEventListeners();
    setAnimations();
}

<span id='global-method-cleanup'>/**
</span> * Do any cleanup you want
 * @method cleanup
 */
function cleanup() {
    $.buttonRight.image = &#39;&#39;;
    $.buttonRight.removeEventListener(&#39;click&#39;, currentCallbackR1);

    $.buttonRight2.image = &#39;&#39;;
    $.buttonRight2.removeEventListener(&#39;click&#39;, currentCallbackL2);

    $.buttonLeft.image = &#39;&#39;;
    $.buttonLeft.removeEventListener(&#39;click&#39;, currentCallbackL1);

    $.buttonLeft2.image = &#39;&#39;;
    $.buttonLeft2.removeEventListener(&#39;click&#39;, currentCallbackL2);
}

<span id='global-method-configureSideBar'>/**
</span> * Configure the Side Bar - Image / Text
 * @param {Object} args
 *
 */
function configureSideBar(args) {
    log.debug(&#39;[FOUNDATION] : configureSideBar&#39;);
    args = args ? args : {};

    /*
    var mainColor = args.mainColor ? args.mainColor : Alloy.CFG.themeColors
        .lightObserve;
    var accentColor = args.accentColor ? args.accentColor : Alloy.CFG.themeColors
        .darkObserve;
    var title = args.title ? args.title : &#39;&#39;;
    */
}

<span id='global-method-configureNavBar'>/**
</span> * Configure the main navigation bar: colors, title
 * @method configureNavBar
 * @param {Object} args
 */
function configureNavBar(args) {
    /*
    log.debug(&#39;[FOUNDATION] : configureNavBar()&#39;);

    //$.imageViewTitle.visible = false;
    var mainColor, accentColor, title;

    var colors = {
        mainColor: mainColor
    };

    $.labelTitle.text = args.title ? args.title : &quot;TEST TEST&quot;;
    $.labelTitle.visible = true;

    if (title) {
        resetTabBar();
    } else {
        //$.viewBottomBar.visible = false;
    }

    //exports.setColor(colors.mainColor);
    */
}

<span id='global-method-setColor'>/**
</span> * Set the color of the navigation bar
 * @method setColor
 */
exports.setColor = function(color) {
    var animation = Titanium.UI.createAnimation();
    animation.backgroundColor = color;
    animation.duration = 250;

    $.viewNav.animate(animation);
    $.buttonLeft.animate(animation);
    $.buttonRight.animate(animation);
    //$.imageViewTitle.animate(animation);
    $.viewTitleHolder.animate(animation);

    $.viewMainContent.animate(animation);

}

<span id='global-method-resetTabBar'>/**
</span> * Reset Tab Bar
 * @method resetTabBar
 */
function resetTabBar() {
    // bottom bar reset function
}

var mainContentTitle = &quot;&quot;;
<span id='global-method-setMainContent'>/**
</span> * Set the view that will appear as the main content
 * @method setMainContent
 */
exports.setMainContent = function(viewTitle, args) {
    args = args ? args : {};
    log.info(&#39;[FOUNDATION] : Opening &#39; + viewTitle, args);
    breadcrumbs.push({
        controller: viewTitle,
        args: args
    });

    exports.hideButton(&#39;r2&#39;);
    exports.hideButton(&#39;l2&#39;);

    args = args || {};

    // Reset sidebar if it is currently active
    if (sidebarActive) {
        $.viewSideContent.width = 0;
        $.viewMainContent.width = &quot;100%&quot;;
        sidebarActive = false;
    }

    // Only render if a different page
    if (mainContentTitle !== viewTitle) {
        mainContentTitle = viewTitle;
        // Remove children, save render
        if ($.viewMainContent.children.length &gt; 0) {
            // First cleanup the view
            //if ($.viewMainContent.children[0].cleanup !== null) {
                //$.viewMainContent.children[0].cleanup();
            //}
            $.viewMainContent.removeAllChildren();
        }
        var mainContentView = Alloy.createController(viewTitle, args);
        $.viewMainContent.add(mainContentView.getView());
        configureNavBar(viewTitle);

        args.title ? exports.setTitle(args.title) : function() {};
    }
};

var sideContentTitle = &quot;&quot;;
<span id='global-method-setSideContent'>/**
</span> * Set the view that will appear as the sidebar content.  Used in tablets
 * @method setSideContent
 */
exports.setSideContent = function(controller, args) {
    args = args || {};
    var title = args.title || &#39;&#39;;

    log.info(&#39;[ROOT] :: Set Side to &#39; + controller, args);
    //breadcrumbs.push({controller: controller, args: args});
    sidebarActive = true;

    $.viewSideContent.width = &quot;50%&quot;;
    $.viewMainContent.width = &quot;50%&quot;;
    //$.viewSideContent.animate(animateSideContent);

    // Remove children, save render
    if ($.viewSideContent.children.length &gt; 0) {
        // First cleanup the view
        //$.viewSideContent.children[0].cleanup();
        $.viewSideContent.removeAllChildren();
    }

    var sideContentView = Alloy.createController(controller, args);
    $.viewSideContent.add(sideContentView.getView());
    configureSideBar(title);

};

<span id='global-method-hideSideContent'>/**
</span> * Hide the sidebar content.  Used in tablets
 * @method hideSideContent
 */
exports.hideSideContent = function() {
    log.debug(&#39;[FOUNDATION] : hideSideContent&#39;);
    $.viewSideContent.width = 0;
};

<span id='global-method-setTitle'>/**
</span> * Set the Title of the Nav Bar
 * @method setTitle
 */
exports.setTitle = function(title) {
    log.debug(&#39;[FOUNDATION] : setTitle : title = &#39; + title);
    if (!_.isUndefined(title)) {
        $.labelTitle.text = title;
    }
};

<span id='global-method-setButton'>/**
</span> * Set the navigation buttons.  Image and callback
 * @method setButton
 * @param {Object} args
 * @param {String} args.image Location of image
 * @param {Function} args.callback The callback to happen upon click
 * @param {String} args.button The button to affect
 */
exports.setButton = function(args) {
    // @see https://developer.appcelerator.com/question/127638/why-does-removeeventlistener-need-a-callback
    log.debug(&#39;[ROOT] Setting Button &#39; + args.button, args);

    var image = args.image ? args.image : &#39;&#39;;
    //var success = args.success ? args.success : function(){};

    var button = args.button ? args.button : false;

    if (!button) {
        return false;
    }

    switch (button) {
        case &#39;r1&#39;:
            // If there is an event listener, pop it off the stack to remove
            if (currentCallbackR1.length &gt; 0) {
                $.buttonRight.removeEventListener(&#39;click&#39;, currentCallbackR1.pop());
            }
            currentCallbackR1.push(args.success ? args.success : function() {
                log.warn(&quot;No Success callback provided&quot;);
            });
            $.buttonRight.image = image;

            $.buttonRight.addEventListener(&#39;click&#39;, _.first(
                currentCallbackR1));

            break;
        case &#39;r2&#39;:
            // If there is an event listener, pop it off the stack to remove
            if (currentCallbackR2.length &gt; 0) {
                $.buttonRight2.removeEventListener(&#39;click&#39;,
                    currentCallbackR2.pop());
            }

            currentCallbackR2.push(args.success ? args.success : function() {
                log.warn(&quot;No Success callback provided&quot;);
            });
            $.buttonRight2.image = image;

            $.buttonRight2.addEventListener(&#39;click&#39;, _.first(
                currentCallbackR2));
            break;
        case &#39;l1&#39;:
            // If there is an event listener, pop it off the stack to remove
            if (currentCallbackL1.length &gt; 0) {
                $.buttonLeft.removeEventListener(&#39;click&#39;, currentCallbackL1.pop());
            }
            // Push new callback to stack
            currentCallbackL1.push(args.success ? args.success : function() {
                log.warn(&quot;No Success callback provided&quot;);
            });
            // Set Button Image
            $.buttonLeft.image = image;
            // Add the event listener
            $.buttonLeft.addEventListener(&#39;click&#39;, _.first(currentCallbackL1));
            break;
        case &#39;l2&#39;:
            // If there is an event listener, pop it off the stack to remove
            if (currentCallbackL2.length &gt; 0) {
                $.buttonLeft2.removeEventListener(&#39;click&#39;, currentCallbackL2.pop());
            }

            currentCallbackL2.push(args.success ? args.success : function() {
                log.warn(&quot;No Success callback provided&quot;);
            });
            $.buttonLeft2.image = image;
            $.buttonLeft2.addEventListener(&#39;click&#39;, _.first(
                currentCallbackL2));
            break;
        default:
            break;
    }

};

<span id='global-method-hideButton'>/**
</span> * Set the navigation buttons.  Image and callback
 * @method hideButton
 * @param {Object} args
 */
exports.hideButton = function(selectedButton) {
    log.debug(&#39;[FOUNDATION] : hideButton : selectedButton = &#39; +
        selectedButton);
    if (!selectedButton) {
        return false;
    }

    switch (selectedButton) {
        case &#39;r1&#39;:
            $.buttonRight.visible = false;
            break;
        case &#39;r2&#39;:
            $.buttonRight2.visible = false;
            break;
        case &#39;l1&#39;:
            $.buttonLeft.visible = false;
            break;
        case &#39;l2&#39;:
            $.buttonLeft2.visible = false;
            break;
        default:
            break;
    }
};

<span id='global-method-setButton'>/**
</span> * Set the navigation buttons.  Image and callback
 * @method setButton
 * @param {Object} args
 */
exports.showButton = function(selectedButton) {
    log.debug(&#39;[ROOT] Show Button &#39; + selectedButton);
    if (!selectedButton) {
        alert(&#39;Attempted to show navigation button but did not provide the button to show&#39;);
        return false;
    }

    switch (selectedButton) {
        case &#39;r1&#39;:
            $.buttonRight.visible = true;
            break;
        case &#39;r2&#39;:
            $.buttonRight2.visible = true;
            break;
        case &#39;l1&#39;:
            $.buttonLeft.visible = true;
            break;
        case &#39;l2&#39;:
            $.buttonLeft2.visible = true;
            break;
        default:
            alert(&quot;Default.  Shouldn&#39;t see this&quot;);
            break;
    }
};

<span id='global-method-hideNavBar'>/**
</span> * Hide the Nav Bar
 * @method hideNavBar
 */
exports.hideNavBar = function() {
    $.viewNav.height = 0;
    $.viewContentArea.top = 0;
    $.viewShadow.visible = 0;
};

<span id='global-method-showNavBar'>/**
</span> * Show the Nav Bar
 * @method showNavBar
 */
exports.showNavBar = function() {
    if (Alloy.isTablet) {
        $.viewNav.height = 90;
        $.viewContentArea.top = 90;
    } else {
        $.viewNav.height = 65;
        $.viewContentArea.top = 65;
    }

    $.viewShadow.visible = 1;
};

<span id='global-method-hideNavBar'>/**
</span> * Hide the Bottom Bar
 * @method hideNavBar
 */
exports.hideBottomBar = function() {
    //$.viewShadow.visible = 0;
    $.viewBottomBar.height = 0;
};

<span id='global-method-hideNavBar'>/**
</span> * Show the Bottom Bar
 * @method hideNavBar
 */
exports.showBottomBar = function() {
    //$.viewShadow.visible = 0;
    $.viewBottomBar.height = 65;
};

exports.setBottomBar = function() {
    $.viewBottomBar.removeAllChildren();
};

<span id='global-method-hideInfoBar'>/**
</span> * Hide the Info Bar
 * @method hideInfoBar
 */
exports.hideInfoBar = function() {
    var animation = Ti.UI.createAnimation({
        height: 1,
        opacity: 0.0,
        duration: 500,
        curve: Titanium.UI.ANIMATION_CURVE_EASE_IN
    });
    $.viewInfoBar.animate(animation);
};

<span id='global-method-showInfoBar'>/**
</span> * Show the Info Bar
 * @method showInfoBar
 */
exports.showInfoBar = function(args) {
    // If no buttons hide imageViews
    if (!args.yes &amp;&amp; !args.cancel) {
        $.imageViewInfoBarIcon.width = 0;
        $.imageViewInfoBarIcon2.width = 0;
        $.labelInfoBarTitle.left = 0;
        $.labelInfoBarTitle.right = 0;
    } else {
        $.imageViewInfoBarIcon.width = 35;
        $.imageViewInfoBarIcon2.width = 35;
        $.labelInfoBarTitle.left = 65;
        $.labelInfoBarTitle.right = 65;
    }

    //@TODO formFactor
    args = args || {};
    var duration = args.duration ? args.duration : 3500;
    $.labelInfoBarTitle.text = args.title ? args.title : &#39;Use args.title&#39;;
    $.viewInfoBar.backgroundColor = args.color ? args.color : &quot;#333&quot;;
    $.imageViewInfoBarIcon.image = args.icon ? args.icon : &quot;/images/navigation/ic_cancel_white_48dp.png&quot;;
    $.imageViewInfoBarIcon2.image = args.icon ? args.icon : &quot;/images/navigation/ic_check_white_48dp.png&quot;;

    var cancel;
    if (args.cancel !== null &amp;&amp; args.cancel !== undefined) {
        var cancel = function() {
            args.cancel();
            exports.hideInfoBar();
        };

        var yes = function() {
            exports.hideInfoBar();
            alert(&#39;here&#39;);
        };

        $.imageViewInfoBarIcon.removeEventListener(cancel);
        $.imageViewInfoBarIcon2.removeEventListener(yes);
        $.imageViewInfoBarIcon.addEventListener(&#39;click&#39;, cancel);
        $.imageViewInfoBarIcon2.addEventListener(&#39;click&#39;, yes);
    }


    _.delay(function(){
        var animation = Ti.UI.createAnimation({
            height: 45,
            opacity: 0.85,
            duration: 500,
            curve: Titanium.UI.ANIMATION_CURVE_EASE_IN
        });
        $.viewInfoBar.animate(animation);
    }, 500);

    if (duration) {
        _.delay(function(){
            exports.hideInfoBar();
        }, duration);
    }

};


<span id='global-method-getBreadcrumbs'>/**
</span> * Get Breadcrumbs
 * @method getBreadcrumbs
 * @param {Number} numCrumbs Number of breadcrumbs to return.  Defaults to 5.
 * @return {Object} breadcrumbs Returns specified number of breadcrumbss
 */
exports.getBreadcrumbs = function(numCrumbs) {
    numCrumbs = numCrumbs ? numCrumbs : 5;
    return _.last(breadcrumbs, numCrumbs);
};

<span id='global-method-goBack'>/**
</span> * Get the last Controller and open it
 */
exports.goBack = function() {
    var lastController = _.first(exports.getBreadcrumbs(2));
    if (!_.isUndefined(lastController.viewTitle) &amp;&amp; !_.isUndefined(lastController.args)) {
        exports.setMainContent(lastController.viewTitle, lastController.args);
    } else if (!_.isUndefined(lastController.viewTitle)) {
        exports.setMainContent(lastController.viewTitle);
    } else {
        exports.setMainContent(&quot;HomePage&quot;);
    }

};

<span id='global-method-toggleLeftSlider'>/**
</span> * Toggle the Left Slider
 * @method toggleLeftSlider
 */
exports.toggleLeftSlider = function() {
    if (!hasSlided) {
        direction = &quot;right&quot;;
        $.viewMovable.animate(animateRight);
        hasSlided = true;
        $.leftMenu.zIndex = 4;
        $.topNavigationDrawer.zIndex = 0;
    } else {
        direction = &quot;reset&quot;;
        $.viewMovable.animate(animateReset);
        hasSlided = false;
        $.leftMenu.zIndex = 1;
        $.topNavigationDrawer.zIndex = 0;

        $.buttonLeft.touchEnabled = true;
        $.buttonRight.touchEnabled = true;
    }

    log.debug(&#39;[FOUNDATION] : Left Menu Has Slided: &#39; + hasSlided +
        &#39; in direction: &#39; + direction);
};

<span id='global-method-toggleRightSlider'>/**
</span> * Toggle the Right Slider
 * @method toggleRightSlider
 */
exports.toggleRightSlider = function() {
    if (!hasSlided) {
        direction = &quot;left&quot;;
        $.viewMovable.animate(animateLeft);
        hasSlided = true;
        $.rightMenu.zIndex = 4;
        $.topNavigationDrawer.zIndex = 0;
    } else {
        direction = &quot;reset&quot;;
        $.viewMovable.animate(animateReset);
        hasSlided = false;
        $.rightMenu.zIndex = 1;
        $.topNavigationDrawer.zIndex = 0;

        $.buttonLeft.touchEnabled = true;
        $.buttonRight.touchEnabled = true;
    }

    log.debug(&#39;[FOUNDATION] : Left Menu Has Slided: &#39; + hasSlided +
        &#39; in direction: &#39; + direction);
};

<span id='global-method-toggleTopSlider'>/**
</span> * Toggle the Right Slider
 * @method toggleTopSlider
 */
exports.toggleTopSlider = function() {};

<span id='global-method-handleRotation'>/**
</span> * When device is rotated, handle View sizing accordingly
 * @method handleRotation
 */
exports.handleRotation = function() {
    log.debug(&#39;[FOUNDATION] : handleRotation()&#39;);

    /*
    $.viewContainer.width = Ti.Platform.displayCaps.platformWidth;
    $.viewContainer.height = Ti.Platform.displayCaps.platformHeight;

    $.viewMovable.width = Ti.Platform.displayCaps.platformWidth;
    $.viewMovable.height = Ti.Platform.displayCaps.platformHeight;

    $.viewNav.width = Ti.Platform.displayCaps.platformWidth;

    $.viewContentArea.width = Ti.Platform.displayCaps.platformWidth;
    $.viewMainContent.height = &quot;Ti.UI.FILL&quot;;


    if (sidebarActive) {
        $.viewSideContent.width = &quot;50%&quot;;
        $.viewMainContent.width = &quot;50%&quot;;

    } else {
        //$.viewSideContent.width = 0;
        $.viewMainContent.width = Ti.Platform.displayCaps.platformWidth;
    }
    */
};

<span id='global-method-addMenuView'>/**
</span> * Add a view to the menu
 * @method addMenuView
 * @param {Object} view The View to add to the menu
 */
exports.addMenuView = function(view) {
    log.info(&#39;Menu Widget :: Adding a view to the menu&#39;);
    $.leftMenu.add(view);
};

<span id='global-method-changeMenu'>/**
</span> * Add a view to the menu
 * @method changeMenu
 * @param {Object} args Args to be passed to the function
 */
exports.changeMenu = function(args) {
    args = args ? args : {};
    // Left or right menu?
    var menuSide = args.side;
    var image = args.image;
    var onclick = args.onclick;

    if (menuSide === &#39;right&#39;) {
        if (image) {
            $.buttonRight.image;
        }
        if (onclick) {
            $.buttonRight.removeEventListener(&#39;touchend&#39;);
            $.buttonRight.addEventListener(&#39;click&#39;, onclick);
        }

    } else {
        if (image) {
            $.buttonLeft.image;
        }
        if (onclick) {
            $.buttonLeft.removeEventListener(&#39;touchend&#39;);
            $.buttonLeft.addEventListener(&#39;click&#39;, onclick);
        }
    }


};

<span id='global-method-addEventListeners'>/**
</span> * Add menu event listeners
 * @method addEventListeners
 */
function addEventListeners() {
    log.debug(&#39;[FOUNDATION] : Adding Menu Event Listeners&#39;);

    // Handle Orientation Change
    Ti.Gesture.addEventListener(&#39;orientationchange&#39;, function() {
        exports.handleRotation();
    });

    // Open Logger via Menu
    $.viewNav.addEventListener(&#39;longpress&#39;, function() {
        displayLogs();
    });

    // Opens Logger via top Nav Longpress
    $.viewNav.addEventListener(&#39;longpress&#39;, function() {
        displayLogs();
    });

    // Left Menu Toggle
    $.leftMenu.addEventListener(&#39;click&#39;, function(e) {
        _.delay($.toggleLeftSlider, 250);
    });

    /*
    $.viewHome.addEventListener(&#39;click&#39;, function() {
        exports.setMainContent(&#39;HomePage&#39;);
    });


    // Open Settings
    $.viewSettings.addEventListener(&#39;click&#39;, function() {
        exports.setMainContent(&#39;Settings&#39;);
    });

    // Open Private Messages
    $.viewInbox.addEventListener(&#39;click&#39;, function() {
        exports.setMainContent(&#39;UserMessages&#39;);
    });

    // Open Feedback
    $.viewFeedback.addEventListener(&#39;click&#39;, function() {
        //@TODO send screenshot to feedback
        var feedbackWindow = Alloy.createWidget(&quot;com.sprint.qwo.common.feedback&quot;);
        feedbackWindow.show({title: &quot;Feedback&quot;});
    });
    */
    Ti.App.addEventListener(&quot;sliderToggled&quot;, function(e) {
        alert(&#39;Does this code ever get hit???&#39;);
        if (e.direction == &quot;right&quot;) {
            $.leftMenu.zIndex = 2;
            $.rightMenu.zIndex = 100;
            $.topNavigationDrawer.zIndex = 0;
        } else if (e.direction == &quot;left&quot;) {
            $.leftMenu.zIndex = 1;
            $.rightMenu.zIndex = 200;
            $.topNavigationDrawer.zIndex = 0;
        }
    });
}

<span id='global-method-setAnimations'>/**
</span> * Declare the animations to be used
 * @method setAnimations
 */
function setAnimations() {
    // Variable declarations
    animateRight = Ti.UI.createAnimation({
        left: Alloy.isTablet ? 350 : 250,
        curve: Ti.UI.ANIMATION_CURVE_EASE_OUT,
        duration: 150
    });

    animateLeft = Ti.UI.createAnimation({
        left: Alloy.isTablet ? -350 : -250,
        curve: Ti.UI.ANIMATION_CURVE_EASE_OUT,
        duration: 150
    });

    animateReset = Ti.UI.createAnimation({
        left: 0,
        curve: Ti.UI.ANIMATION_CURVE_EASE_OUT,
        duration: 150
    });

    animateSideContent = Ti.UI.createAnimation({
        width: &quot;50%&quot;,
        curve: Ti.UI.ANIMATION_CURVE_EASE_OUT,
        duration: 500
    });
}

<span id='global-method-displayLogs'>/**
</span> * Logging Utilities
 * @method displayLogs
 */
function displayLogs() {
    log.debug(&#39;[ROOT] :: Opening Logs&#39;);

    var widgetLogger = Alloy.createWidget(&quot;com.sivci.logger&quot;);
    widgetLogger.show({
        title: &quot;Logs&quot;
    });
}
</pre>
</body>
</html>
