Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.