-
-
Save JigarM/5883586 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function PassCode(_params){ | |
_params = _params || {}; | |
// @PARAMS:{ | |
// boxSize: (Number) size of the passcode character boxes | |
// backgroundColor: (String) background color of the mainview | |
// backgroundImage: (String) background image of the mainview | |
// panicColor: (String) background color of the view when panic() is called - when wrong password | |
// titleText: (String) the text of the title view, above the pass code boxes by default, | |
// mainView: (Object) params for the main view that hold the passcode boxes | |
// } | |
var self = {}; | |
var BOX_SIZE = _params.boxSize || 50; | |
var BACKGROUND_COLOR = _params.backgroundColor || 'transparent'; | |
var BACKGROUND_IMAGE = _params.backgroundImage || null; | |
var PANIC_COLOR = _params.panicColor || '#6e1e1e'; | |
var TITLE_TEXT = _params.titleText || ''; | |
var TOP_VIEW_PARAMS = _params.mainView || {top:80,height:120,backgroundColor:BACKGROUND_COLOR}; | |
self.submit = _params.submit || function(){}; | |
var mainView = Ti.UI.createView({ | |
top:0,bottom:0,right:0,left:0, | |
backgroundColor:BACKGROUND_COLOR, | |
backgroundImage:BACKGROUND_IMAGE | |
}); | |
var hiddenTextField = Ti.UI.createTextField({ | |
visible:false, | |
keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD | |
}); | |
TOP_VIEW_PARAMS.top = TOP_VIEW_PARAMS.top || 80; | |
TOP_VIEW_PARAMS.height = TOP_VIEW_PARAMS.height || 120; | |
TOP_VIEW_PARAMS.backgroundColor = TOP_VIEW_PARAMS.backgroundColor || BACKGROUND_COLOR; | |
var topView = Ti.UI.createView(TOP_VIEW_PARAMS); | |
var titleView = Ti.UI.createLabel({ | |
top:0, left:0, right:0, | |
height:TOP_VIEW_PARAMS.top, | |
text:TITLE_TEXT, | |
textAlign:'center', | |
font:{fontSize:20,fontWeight:'bold'} | |
}); | |
function box(top,left){ | |
return Ti.UI.createLabel({ | |
top:top, | |
left:left, | |
width:BOX_SIZE, | |
height:BOX_SIZE, | |
backgroundColor:'white', | |
borderColor:'black', | |
borderWidth:1, | |
textAlign:'center', | |
text:'', | |
font:{fontWeigh:'bold',fontSize:50} | |
}); | |
} | |
var viewWidth = mainView.size.width || 320; | |
var leftMargin = (viewWidth - (BOX_SIZE * 4))/5 | |
var left = 0; | |
var top = Math.round((topView.height - BOX_SIZE) / 2); | |
var field1 = box(top,left += leftMargin); | |
var field2 = box(top,left += leftMargin + BOX_SIZE); | |
var field3 = box(top,left += leftMargin + BOX_SIZE); | |
var field4 = box(top,left += leftMargin + BOX_SIZE); | |
mainView.add(hiddenTextField); | |
mainView.add(titleView); | |
topView.add(field1); | |
topView.add(field2); | |
topView.add(field3); | |
topView.add(field4); | |
mainView.add(topView); | |
hiddenTextField.addEventListener('change', function(e){ | |
var value = e.value; | |
var len = value.length; | |
switch(len){ | |
case 0: field1.text = ''; break; | |
case 1: field1.text = '*'; field2.text = ''; break; | |
case 2: field1.text = '*'; field2.text = '*'; field3.text = ''; break; | |
case 3: field1.text = '*'; field2.text = '*'; field3.text = '*'; field4.text = ''; break; | |
case 4: field1.text = '*'; field2.text = '*'; field3.text = '*'; field4.text = '*'; self.submit(); return; | |
} | |
}); | |
self.view = mainView; | |
self.focus = function(){ | |
hiddenTextField.focus(); | |
}; | |
self.empty = function(_textfield){ | |
hiddenTextField.value = ''; | |
field1.text = ''; | |
field2.text = ''; | |
field3.text = ''; | |
field4.text = ''; | |
}; | |
self.panic = function(){ | |
topView.animate({backgroundColor:PANIC_COLOR}, function(){ | |
self.empty(); | |
topView.animate({backgroundColor:TOP_VIEW_PARAMS.backgroundColor, duration:3000}); | |
}); | |
} | |
self.setTitle = function(_text){ | |
titleView.text = _text; | |
} | |
return self; | |
} | |
function Window(){ | |
var win = Ti.UI.createWindow({ | |
backgroundColor:'blue', | |
title:'Window' | |
}); | |
var passCode = PassCode({ | |
boxSize:50, | |
titleText:'Enter your passcode to unlock', | |
backgroundColor : '#ccc', | |
panicColor:'#6e1e1e' | |
}); | |
passCode.submit = function(){ | |
passCode.panic(); | |
} | |
win.add(passCode.view); | |
win.addEventListener('focus', function(){ | |
passCode.focus(); | |
}); | |
return win; | |
} | |
var Tab = []; | |
(function(){ | |
var tabGroup = Ti.UI.createTabGroup(); | |
Tab[0] = Ti.UI.createTab({ | |
window:Window() | |
}); | |
tabGroup.addTab(Tab[0]); | |
tabGroup.open(); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment