Create a gist now

Instantly share code, notes, and snippets.

@Mode54 /BoxModel.js Secret
Last active May 30, 2016

BoxModel Titanium Mobile Module
/*
* BoxModel Module Example
*
* http://tihelp.me/?p=174
*/
var BoxModel = require("BoxModel");
var appWindow = Ti.UI.createWindow({
title : "BoxModel Example",
exitOnClose : true,
backgroundColor : "#FFFFFF"
}),
toggle = true,
// We are using a label view to apply box model to
// but you can use any view you want.
aLabel = Ti.UI.createLabel({
color : "#000000",
text : "Integer in dolor quis risus accumsan porta sit amet a ipsum.",
backgroundColor : "#87FC70"
}),
// Create BoxModel object with height setting.
// Use the constructor to set the height and width
// to make sure the entire object is the size you want.
// You can add a debug flag to make sure the margin and padding
// are applied correctly. Example: new BoxModel(aLabel, { height : 100, debug : true })
// You can change the debug colors in the module.
contentBox = new BoxModel(aLabel, { height : 100 });
// Swap content box model settings on click
// by using the applyProperties BoxModel function
aLabel.addEventListener(
"click",
function(){
if(toggle){
toggle = false;
contentBox.applyProperties({
margin : 20,
padding : 20,
borderWidth : 2,
borderColor : "#000000",
boderRadius : 5
});
}
else{
toggle = true;
contentBox.applyProperties({
height : 100,
borderWidth : 0
});
}
}
);
// Use getView() function to get UI object
appWindow.add(contentBox.getView());
appWindow.open();
/*
* BoxModel Module
*
* This module is used to mimic CSS Box Model features.
* It will convert any Ti.UI.View object into a BoxModel object.
*
* http://tihelp.me/?p=174
*/
var undef,
defaultMargin = 10,
defaultPadding = 10,
debugMarginColor = "#666666",
debugPaddingColor = "#000000";
module.exports = function(view, options) {
var container = Ti.UI.createView({
height : Ti.UI.SIZE,
width : Ti.UI.SIZE,
backgroundColor : options.debug ? debugMarginColor : "transparent"
}),
inner = Ti.UI.createView();
setProps(inner, view, options || {});
inner.add(view);
container.add(inner);
return {
"getView" : function(){
return container;
},
"applyProperties" : function(newOptions){
setProps(inner, view, newOptions);
}
};
};
function setProps(inner, view, options){
inner.applyProperties({
top : options.margin || defaultMargin,
right : options.margin || defaultMargin,
bottom : options.margin || defaultMargin,
left : options.margin || defaultMargin,
height : options.height || undef,
width : options.width || undef,
borderWidth : options.borderWidth || 0,
borderColor : options.borderColor || undef,
borderRadius : options.borderRadius || 0,
backgroundColor : options.debug ? debugPaddingColor : view.backgroundColor
});
view.applyProperties({
top : options.padding || defaultPadding,
right : options.padding || defaultPadding,
bottom : options.padding || defaultPadding,
left : options.padding || defaultPadding
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment