var isStrict = document.compatMode == "CSS1Compat",
isOpera = ua.indexOf("opera") > -1,
isSafari = (/webkit|khtml/).test(ua),
+ isFirefox = ua.indexOf("firefox") > -1,
isIE = ua.indexOf("msie") > -1,
isIE7 = ua.indexOf("msie 7") > -1,
+ isIE11 = /trident.*rv\:11\./.test(ua),
isGecko = !isSafari && ua.indexOf("gecko") > -1,
isBorderBox = isIE && !isStrict,
isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
isLinux = (ua.indexOf("linux") != -1),
isSecure = window.location.href.toLowerCase().indexOf("https") === 0,
- isTouch = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
+ isIOS = /iphone|ipad/.test(ua),
+ isTouch = (function() {
+ try {
+ document.createEvent("TouchEvent");
+ return true;
+ } catch (e) {
+ return false;
+ }
+
+ })();
// remove css image flicker
if(isIE && !isIE7){
try{
/** @type Boolean */
isSafari : isSafari,
/** @type Boolean */
+ isFirefox : isFirefox,
+ /** @type Boolean */
isIE : isIE,
/** @type Boolean */
isIE7 : isIE7,
/** @type Boolean */
+ isIE11 : isIE11,
+ /** @type Boolean */
isGecko : isGecko,
/** @type Boolean */
isBorderBox : isBorderBox,
/** @type Boolean */
isMac : isMac,
/** @type Boolean */
+ isIOS : isIOS,
+ /** @type Boolean */
isTouch : isTouch,
/**
})();
Roo.namespace("Roo", "Roo.util", "Roo.grid", "Roo.dd", "Roo.tree", "Roo.data",
- "Roo.form", "Roo.menu", "Roo.state", "Roo.lib", "Roo.layout", "Roo.app", "Roo.ux");
+ "Roo.form", "Roo.menu", "Roo.state", "Roo.lib", "Roo.layout",
+ "Roo.app", "Roo.ux",
+ "Roo.bootstrap",
+ "Roo.bootstrap.dash");
/*
* Based on:
* Ext JS Library 1.1.1
*/
Roo.applyIf(Array.prototype, {
/**
+ *
* Checks whether or not the specified object exists in the array.
* @param {Object} o The object to check for
* @return {Number} The index of o in the array (or -1 if it is not found)
/**
* @private
*/
+
Date.createParser = function(format) {
var funcName = "parse" + Date.parseFunctions.count++;
var regexNum = Date.parseRegexes.length;
+ "y = d.getFullYear();\n"
+ "m = d.getMonth();\n"
+ "d = d.getDate();\n"
+ + "if (typeof(input) !== 'string') { input = input.toString(); }\n"
+ "var results = input.match(Date.parseRegexes[" + regexNum + "]);\n"
+ "if (results && results.length > 0) {";
var regex = "";
if(attr=="cls" && Roo.isIE){
el.className = o["cls"];
}else{
- if(useSet) el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);
- else el[attr] = o[attr];
+ if(useSet) { el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);}
+ else {
+ el[attr] = o[attr];
+ }
}
}
Roo.DomHelper.applyStyles(el, o.style);
var E = Roo.lib.Event;
var D = Roo.lib.Dom;
+
+
var fireDocReady = function(){
if(!docReadyState){
}, o.delay || 10);
};
};
+ var transitionEndVal = false;
+
+ var transitionEnd = function()
+ {
+ if (transitionEndVal) {
+ return transitionEndVal;
+ }
+ var el = document.createElement('div');
+
+ var transEndEventNames = {
+ WebkitTransition : 'webkitTransitionEnd',
+ MozTransition : 'transitionend',
+ OTransition : 'oTransitionEnd otransitionend',
+ transition : 'transitionend'
+ };
+
+ for (var name in transEndEventNames) {
+ if (el.style[name] !== undefined) {
+ transitionEndVal = transEndEventNames[name];
+ return transitionEndVal ;
+ }
+ }
+ }
+
var listen = function(element, ename, opt, fn, scope){
var o = (!opt || typeof opt == "boolean") ? {} : opt;
fn = fn || o.fn; scope = scope || o.scope;
var el = Roo.getDom(element);
+
+
if(!el){
throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
}
+
+ if (ename == 'transitionend') {
+ ename = transitionEnd();
+ }
var h = function(e){
e = Roo.EventObject.setEvent(e);
var t;
h = createBuffered(h, o);
}
fn._handlers = fn._handlers || [];
+
+
fn._handlers.push([Roo.id(el), ename, h]);
-
+
+
+
E.on(el, ename, h);
if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
el.addEventListener("DOMMouseScroll", h, false);
if(Roo.isLinux){
cls.push("roo-linux");
}
+ if(Roo.isIOS){
+ cls.push("roo-ios");
+ }
if(Roo.isBorderBox){
cls.push('roo-border-box');
}
* @type String
*/
defaultUnit : "px",
+
+ pxReg : '/^\d+(?:\.\d*)?px$/i',
/**
* Sets the element's visibility mode. When setVisible() is called it
* will use this to determine whether to set the visibility or the display property.
if(!local){
return this.getX();
}else{
- return parseInt(this.getStyle("left"), 10) || 0;
+ var x = this.getStyle("left");
+
+ if(!x || x === 'AUTO'){
+ return 0;
+ }
+
+ if(new RegExp(this.pxReg).test(x)){
+ return parseFloat(x);
+ }
+
+ x = this.getX();
+
+ var par = this.dom.offsetParent ? Roo.fly(this.dom.offsetParent) : false;
+
+ if (par !== false) {
+ x -= par.getX();
+ }
+
+ return x;
}
},
*/
mask : function(msg, msgCls)
{
- if(this.getStyle("position") == "static"){
+ if(this.getStyle("position") == "static" && this.dom.tagName !== 'BODY'){
this.setStyle("position", "relative");
}
if(!this._mask){
}
var mm = this._maskMsg;
mm.dom.className = msgCls ? "roo-el-mask-msg " + msgCls : "roo-el-mask-msg";
- mm.dom.firstChild.innerHTML = msg;
+ if (mm.dom.firstChild) { // weird IE issue?
+ mm.dom.firstChild.innerHTML = msg;
+ }
mm.setDisplayed(true);
mm.center(this);
mm.setStyle('z-index', z + 102);
/**
* Sets or Returns the value the dom attribute value
- * @param {String} name The attribute name
+ * @param {String|Object} name The attribute name (or object to set multiple attributes)
* @param {String} value (optional) The value to set the attribute to
* @return {String} The attribute value
*/
this.dom.setAttribute(name, arguments[1]);
return arguments[1];
}
+ if (typeof(name) == 'object') {
+ for(var i in name) {
+ this.attr(i, name[i]);
+ }
+ return name;
+ }
+
+
if (!this.dom.hasAttribute(name)) {
return undefined;
}
/**
* Filters this composite to only elements that match the passed selector.
* @param {String} selector A string CSS selector
+ * @param {Boolean} inverse return inverse filter (not matches)
* @return {CompositeElement} this
*/
- filter : function(selector){
+ filter : function(selector, inverse){
var els = [];
+ inverse = inverse || false;
this.each(function(el){
- if(el.is(selector)){
+ var match = inverse ? !el.is(selector) : el.is(selector);
+ if(match){
els[els.length] = el.dom;
}
});
destroy : true
});
if(!this.id){
- this.id = "ext-comp-" + (++Roo.Component.AUTO_ID);
+ this.id = "roo-comp-" + (++Roo.Component.AUTO_ID);
}
Roo.ComponentMgr.register(this);
Roo.Component.superclass.constructor.call(this);
* Whether the component can move the Dom node when rendering (defaults to true).
*/
allowDomMove : true,
- /** @cfg {String} hideMode
+ /** @cfg {String} hideMode (display|visibility)
* How this component should hidden. Supported values are
* "visibility" (css visibility), "offsets" (negative offset position) and
* "display" (css display) - defaults to "display".
* @class Roo.XComponent
* A delayed Element creator...
* Or a way to group chunks of interface together.
+ * technically this is a wrapper around a tree of Roo elements (which defines a 'module'),
+ * used in conjunction with XComponent.build() it will create an instance of each element,
+ * then call addxtype() to build the User interface.
*
* Mypart.xyx = new Roo.XComponent({
* It can be used to build a big heiracy, with parent etc.
* or you can just use this to render a single compoent to a dom element
* MYPART.render(Roo.Element | String(id) | dom_element )
+ *
+ *
+ * Usage patterns.
+ *
+ * Classic Roo
+ *
+ * Roo is designed primarily as a single page application, so the UI build for a standard interface will
+ * expect a single 'TOP' level module normally indicated by the 'parent' of the XComponent definition being defined as false.
+ *
+ * Each sub module is expected to have a parent pointing to the class name of it's parent module.
+ *
+ * When the top level is false, a 'Roo.BorderLayout' is created and the element is flagged as 'topModule'
+ * - if mulitple topModules exist, the last one is defined as the top module.
+ *
+ * Embeded Roo
+ *
+ * When the top level or multiple modules are to embedded into a existing HTML page,
+ * the parent element can container '#id' of the element where the module will be drawn.
+ *
+ * Bootstrap Roo
+ *
+ * Unlike classic Roo, the bootstrap tends not to be used as a single page.
+ * it relies more on a include mechanism, where sub modules are included into an outer page.
+ * This is normally managed by the builder tools using Roo.apply( options, Included.Sub.Module )
+ *
+ * Bootstrap Roo Included elements
+ *
+ * Our builder application needs the ability to preview these sub compoennts. They will normally have parent=false set,
+ * hence confusing the component builder as it thinks there are multiple top level elements.
+ *
+ *
*
* @extends Roo.util.Observable
* @constructor
el = el || false;
var hp = this.parent ? 1 : 0;
+ Roo.debug && Roo.log(this);
if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
// if parent is a '#.....' string, then let's use that..
- var ename = this.parent.substr(1)
- this.parent = (this.parent == '#bootstrap') ? { el : true} : false; // flags it as a top module...
- el = Roo.get(ename);
+ var ename = this.parent.substr(1);
+ this.parent = false;
+ Roo.debug && Roo.log(ename);
+ switch (ename) {
+ case 'bootstrap-body' :
+ if (typeof(Roo.bootstrap.Body) != 'undefined') {
+ this.parent = { el : new Roo.bootstrap.Body() };
+ Roo.debug && Roo.log("setting el to doc body");
+
+ } else {
+ throw "Container is bootstrap body, but Roo.bootstrap.Body is not defined";
+ }
+ break;
+ case 'bootstrap':
+ this.parent = { el : true};
+ // fall through
+ default:
+ el = Roo.get(ename);
+ break;
+ }
+
+
if (!el && !this.parent) {
- Roo.log("Warning - element can not be found :#" + ename );
+ Roo.debug && Roo.log("Warning - element can not be found :#" + ename );
return;
}
}
+ Roo.debug && Roo.log("EL:");
+ Roo.debug && Roo.log(el);
+ Roo.debug && Roo.log("this.parent.el:");
+ Roo.debug && Roo.log(this.parent.el);
+
+ var tree = this._tree ? this._tree() : this.tree();
+
+ // altertive root elements ??? - we need a better way to indicate these.
+ var is_alt = (typeof(Roo.bootstrap) != 'undefined' && tree.xns == Roo.bootstrap) ||
+ (typeof(Roo.mailer) != 'undefined' && tree.xns == Roo.mailer) ;
+ if (!this.parent && is_alt) {
+ //el = Roo.get(document.body);
+ this.parent = { el : true };
+ }
+
+
if (!this.parent) {
+ Roo.debug && Roo.log("no parent - creating one");
+
el = el ? Roo.get(el) : false;
// it's a top level one..
}
}
- if (!this.parent.el) {
- // probably an old style ctor, which has been disabled.
- return;
-
- }
+ if (!this.parent.el) {
+ // probably an old style ctor, which has been disabled.
+ return;
+
+ }
// The 'tree' method is '_tree now'
- var tree = this._tree ? this._tree() : this.tree();
tree.region = tree.region || this.region;
if (this.parent.el === true) {
this.panel = this.el;
this.layout = this.panel.layout;
- this.parentLayout = this.parent.layout || false;
+ this.parentLayout = this.parent.layout || false;
}
try {
obj.parent = this.toObject(opar);
} catch(e) {
- Roo.log("parent:toObject failed: " + e.toString());
+ Roo.debug && Roo.log("parent:toObject failed: " + e.toString());
return;
}
return;
}
if (obj.parent.constructor != Roo.XComponent) {
- Roo.log("Warning : Object Parent is not instance of XComponent:" + obj.name)
+ Roo.debug && Roo.log("Warning : Object Parent is not instance of XComponent:" + obj.name)
}
if (!obj.parent.modules) {
obj.parent.modules = new Roo.util.MixedCollection(false,
projects / roojs1 / blobdiff