Skip to content

Instantly share code, notes, and snippets.

@k0sukey

k0sukey/app.js

Created February 29, 2012 15:12
Download ZIP

Revisions

  1. k0sukey created this gist Feb 29, 2012.
    196 changes: 196 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,196 @@
    Ti.UI.setBackgroundColor('#fff');

    var window = Ti.UI.createWindow({
    navBarHidden: true
    });

    var assistiveTouch = require('ti.draggable').createView({
    top: 0,
    left: 0,
    width: 48,
    height: 48,
    minTop: 0,
    minLeft: 0,
    maxTop: window.height - 48,
    maxLeft: window.width - 48,
    adsorb: true,
    backgroundColor: '#000',
    borderRadius: 8,
    opacity: 0.7
    });
    window.add(assistiveTouch);

    assistiveTouch.addEventListener('end', function(e){
    if (!e.hasMoved) {
    var gearView;
    var gearLabel;
    var starView;
    var starLabel;
    var iphoneView;
    var iphoneLabel;
    var houseView;
    var houseLabel;

    var maskView = Ti.UI.createView();
    window.add(maskView);

    maskView.addEventListener('click', function(){
    window.remove(gearView);
    window.remove(gearLabel);
    window.remove(starView);
    window.remove(starLabel);
    window.remove(iphoneView);
    window.remove(iphoneLabel);
    window.remove(houseView);
    window.remove(houseLabel);

    menuView.animate({
    duration: 300,
    top: e.top,
    left: e.left,
    width: e.source.width,
    height: e.source.height
    }, function(){
    window.remove(menuView);
    window.remove(maskView);
    e.source.show();
    });
    });

    var menuView = Ti.UI.createView({
    top: e.top,
    left: e.left,
    width: e.source.width,
    height: e.source.height,
    backgroundColor: '#000',
    borderRadius: 8,
    opacity: 0.7
    });
    window.add(menuView);
    e.source.hide();
    e.source.setTop(e.top);
    e.source.setLeft(e.left);

    menuView.animate({
    duration: 300,
    top: 110,
    left: 40,
    width: 240,
    height: 240
    }, function(){
    gearView = Ti.UI.createImageView({
    bottom: 140,
    left: 136,
    width: 48,
    height: 48,
    image: 'images/19-gear.png'
    });
    window.add(gearView);

    gearView.addEventListener('click', function(){
    alert('Setting click!');
    });

    gearLabel = Ti.UI.createLabel({
    bottom: 120,
    left: 136,
    width: 48,
    height: 16,
    color: '#fff',
    font: { fontSize: 12 },
    textAlign: 'center',
    text: 'Setting'
    });
    window.add(gearLabel);

    starView = Ti.UI.createImageView({
    top: 206,
    left: 60,
    width: 48,
    height: 48,
    image: 'images/28-star.png'
    });
    window.add(starView);

    starView.addEventListener('click', function(){
    alert('Favorite click!');
    });

    starLabel = Ti.UI.createLabel({
    top: 254,
    left: 60,
    width: 48,
    height: 16,
    color: '#fff',
    font: { fontSize: 12 },
    textAlign: 'center',
    text: 'Favorite'
    });
    window.add(starLabel);

    iphoneView = Ti.UI.createImageView({
    top: 206,
    right: 60,
    width: 48,
    height: 48,
    image: 'images/32-iphone.png'
    });
    window.add(iphoneView);

    iphoneView.addEventListener('click', function(){
    alert('Device click!');
    });

    iphoneLabel = Ti.UI.createLabel({
    top: 254,
    right: 60,
    width: 48,
    height: 16,
    color: '#fff',
    font: { fontSize: 12 },
    textAlign: 'center',
    text: 'Device'
    });
    window.add(iphoneLabel);

    houseView = Ti.UI.createImageView({
    top: 130,
    left: 136,
    width: 48,
    height: 48,
    image: 'images/53-house.png'
    });
    window.add(houseView);

    houseView.addEventListener('click', function(){
    alert('Home click!');
    });

    houseLabel = Ti.UI.createLabel({
    top: 180,
    left: 136,
    width: 48,
    height: 16,
    color: '#fff',
    font: { fontSize: 12 },
    textAlign: 'center',
    text: 'Home'
    });
    window.add(houseLabel);
    });
    }
    });

    var circleView = Ti.UI.createView({
    top: 6,
    left: 6,
    width: 36,
    height: 36,
    backgroundColor: '#fff',
    borderColor: '#666',
    borderWidth: 4,
    borderRadius: 18
    });
    assistiveTouch.add(circleView);

    window.open();