Scrollable Tabs + Draggable Windows example (Titanium Alloy)

Hey Folks, not necessary a question, but I just made a prototype of a working scrolling tab bar combined with dragable windows in both Android and iOS.

I know this is a feature that is coming for Titanium 3.4.0 (https://jira.appcelerator.org/browse/TIMOB/fixforversion/15972/?selectedTab=com.atlassian.jira.jira-projects-plugin:version-summary-panel), but this example is already a good example of that. And it can be used for iOS.

It's almost like the Android Scrollable Tabs:

alloy.js:

Alloy.Globals.scrWidth = Ti.Platform.displayCaps.platformHeight > Ti.Platform.displayCaps.platformWidth ? Ti.Platform.displayCaps.platformWidth : Ti.Platform.displayCaps.platformHeight;
Alloy.Globals.scrHeight = Ti.Platform.displayCaps.platformHeight < Ti.Platform.displayCaps.platformWidth ? Ti.Platform.displayCaps.platformWidth : Ti.Platform.displayCaps.platformHeight;
Alloy.Globals.tabWidthPortrait = Alloy.Globals.scrWidth / 4;
Alloy.Globals.tabWidthLandscape = Alloy.Globals.scrHeight / 4;

".container": {
    backgroundColor:"white",
    exitOnClose: true
},
"ScrollView": {
    width: Ti.UI.FILL,
    height: 60,
    top: 20,
    backgroundColor:"#f8f8f8",
    scrollType: "horizontal",
    layout: "horizontal",
    contentWidth: Ti.UI.SIZE,
    disableBounce: true,
    horizontalWrap: false
},
".tab":{
    left: 0,
    height: "100%",
    tab: true
},
"#selected": {
    bottom: 0,
    left: 0,
    width: "100%",
    height: "10%",
    backgroundColor:"#5295E3"
},
".split":{
    left: 0,
    width: 1,
    height: "100%",
    backgroundColor: "lightgray"
}
".tabLabel":{
    width: "100%",
    height: "100%",
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
},
".subwindow": {
    width: "100%",
    height: "100%"
},
"ScrollableView":{
    width: "100%",
    top: 80
}

<Alloy>
    <Window id="index" class="container">
        <ScrollView id="scrollView">
            <View class="tab">
                <Label class="tabLabel" text="Tab 1"></Label>
                <View id="selected"></View>
            </View>
            <View class="split">
            </View>
            <View class="tab">
                <Label class="tabLabel" text="Tab 2"></Label>
            </View>
            <View class="split">
            </View>
            <View class="tab">
                <Label class="tabLabel" text="Tab 3"></Label>
            </View>
            <View class="split">
            </View>
            <View class="tab">
                <Label class="tabLabel" text="Tab 4"></Label>
            </View>
            <View class="split">
            </View>
            <View class="tab">
                <Label class="tabLabel" text="Tab 5"></Label>
            </View>
        </ScrollView>
        <ScrollableView id="scrollableView">
            <Window id="win1" class="subwindow">
                <ImageView height="75%" width="auto" image="http://www.appcelerator.com/wp-content/uploads/titanium_sdk_blue.png"></ImageView>
            </Window>
            <Window id="win2" class="subwindow">
                <ImageView height="75%" width="auto" image="http://www.appcelerator.com/wp-content/uploads/titanium_sdk_blue.png"></ImageView>
            </Window>
            <Window id="win3" class="subwindow">
                <ImageView height="75%" width="auto" image="http://www.appcelerator.com/wp-content/uploads/titanium_sdk_blue.png"></ImageView>
            </Window>
            <Window id="win4" class="subwindow">
                <ImageView height="75%" width="auto" image="http://www.appcelerator.com/wp-content/uploads/titanium_sdk_blue.png"></ImageView>
            </Window>
            <Window id="win5" class="subwindow">
                <ImageView height="75%" width="auto" image="http://www.appcelerator.com/wp-content/uploads/titanium_sdk_blue.png"></ImageView>
            </Window>
        </ScrollableView>
    </Window>
</Alloy>

var children = [];
Alloy.Globals.scrollPage = 0;
Alloy.Globals.clickedTab = undefined;
Alloy.Globals.currentTabWidth = Alloy.Globals.tabWidthPortrait;
function adjustTabBarToOrientation(orientation, child) {
    var width;
    if(orientation == Ti.UI.PORTRAIT || orientation == Ti.UI.UPSIDE_PORTRAIT) {
        width = Alloy.Globals.tabWidthPortrait;
    } else if(orientation !== Ti.UI.FACE_DOWN || orientation !== Ti.UI.FACE_UP) {
        width = Alloy.Globals.tabWidthLandscape;
    }
 
    Alloy.Globals.currentTabWidth = width;
    if(Ti.Android) {
        switch(Ti.Platform.displayCaps.dpi) {
            case 120: width /= 0.75;            break;
            case 160: width =  width;           break;
            case 240: width /= width * 1.5;     break;
            case 320: width /= 2;               break;
        }
        child.setWidth(width);
    } else {
        child.setWidth(width);
    }
    setTabCenter(Alloy.Globals.scrollPage);
};
for(var i = 0; i < $.scrollView.children.length; i++) {
    var child = $.scrollView.children[i];
    if(child.tab) {
        children.push(child);
        adjustTabBarToOrientation($.index.orientation, child);
    } 
};
 
Ti.Gesture.addEventListener("orientationchange", function(e) {
    for(var i = 0; i < children.length; i++) {
        adjustTabBarToOrientation(e.orientation, children[i]);
    }
});
 
/*
 * Adjust this function to the width of the tabs and amount of tabs visible by standard.
 */
function setTabCenter(index) {
    var tabWidth = Alloy.Globals.currentTabWidth;
 
    if(index == 2) {
        $.scrollView.scrollTo(tabWidth * 0.5, 0);
    } else if(index < 2) {
        $.scrollView.scrollTo(0, 0);
    } else {
        $.scrollView.scrollTo(tabWidth, 0);
    }
};
 
for(var i = 0; i < children.length; i++) {
    children[i].addEventListener("touchstart", function() {
        this.setBackgroundColor("#ddd");
        var that = this;
        var timeout = setTimeout(function() {
            that.setBackgroundColor("#0fff");
            clearTimeout(timeout);
        }, 100);
    });
    children[i].addEventListener("click", (function(i) {
        return function() {
            try {
                var view = $.selected;
                if(view.parent) {
                    view.parent.remove(view);
                }
                view.parent = this;
                $.scrollableView.scrollToView(i);
                this.add(view);
                setTabCenter(i);
                if(Alloy.Globals.clickedTab === undefined) {
                    Alloy.Globals.clickedTab = false;
                } else {
                    Alloy.Globals.clickedTab = true;
                }
            } catch(e) {
                Ti.API.info(e.error || e);
            }
        };
    })(i));
}
 
$.scrollableView.addEventListener("scroll", function(e) {
    if(e.currentPage != Alloy.Globals.scrollPage) {
        try {
            if(!Alloy.Globals.clickedTab) {
                setTabCenter(e.currentPage);
                var view = $.selected;
                if(view.parent) {
                    view.parent.remove(view);
                }
                view.parent = children[e.currentPage];
                children[e.currentPage].add(view);
            } 
            Alloy.Globals.scrollPage = e.currentPage; 
        } catch(e) {
            Ti.API.info(e.error || e);
        }
    }
});
children[0].fireEvent("click");
 
$.scrollableView.addEventListener("scrollend", function(e) {
    Alloy.Globals.clickedTab = false;
});
 
$.index.open();