r1754 - trunk/ui
r1754 - trunk/ui
Author: paul.bakaus
Date: Thu Jan 22 06:53:53 2009
New Revision: 1754
Modified:
trunk/ui/ui.resizable.js
Log:
resizable:
- knobHandles and default themes + theme detection removed (fixes #3906)
- partial refactor
Modified: trunk/ui/ui.resizable.js
==============================================================================
--- trunk/ui/ui.resizable.js (original)
+++ trunk/ui/ui.resizable.js Thu Jan 22 06:53:53 2009
@@ -16,158 +16,100 @@
_init: function() {
- var self = this, o = this.options;
-
- var elpos = this.element.css('position');
-
- this.originalElement = this.element;
-
- // simulate .ui-resizable { position: relative; }
- this.element.addClass("ui-resizable").css({ position:
/static/.test(elpos) ? 'relative' : elpos });
-
- $.extend(o, {
+ var self = this, o = this.options;
+ this.element.addClass("ui-resizable");
+
+ $.extend(this, {
_aspectRatio: !!(o.aspectRatio),
- helper: o.helper || o.ghost || o.animate ? o.helper |
| 'ui-resizable-helper' : null,
- knobHandles: o.knobHandles === true ? 'ui-resizable-knob-handle' :
o.knobHandles
+ aspectRatio: o.aspectRatio,
+ originalElement: this.element,
+ proportionallyResize: o.proportionallyResize ?
[o.proportionallyResize] : [],
+ _helper: o.helper || o.ghost || o.animate ? o.helper |
| 'ui-resizable-helper' : null
});
- //Default Theme
- var aBorder = '1px solid #DEDEDE';
-
- o.defaultTheme = {
- 'ui-resizable': { display: 'block' },
- 'ui-resizable-handle': { position: 'absolute', background: '#F2F2F2',
fontSize: '0.1px' },
- 'ui-resizable-n': { cursor: 'n-resize', height: '4px', left: '0px',
right: '0px', borderTop: aBorder },
- 'ui-resizable-s': { cursor: 's-resize', height: '4px', left: '0px',
right: '0px', borderBottom: aBorder },
- 'ui-resizable-e': { cursor: 'e-resize', width: '4px', top: '0px',
bottom: '0px', borderRight: aBorder },
- 'ui-resizable-w': { cursor: 'w-resize', width: '4px', top: '0px',
bottom: '0px', borderLeft: aBorder },
- 'ui-resizable-se': { cursor: 'se-resize', width: '4px', height: '4px',
borderRight: aBorder, borderBottom: aBorder },
- 'ui-resizable-sw': { cursor: 'sw-resize', width: '4px', height: '4px',
borderBottom: aBorder, borderLeft: aBorder },
- 'ui-resizable-ne': { cursor: 'ne-resize', width: '4px', height: '4px',
borderRight: aBorder, borderTop: aBorder },
- 'ui-resizable-nw': { cursor: 'nw-resize', width: '4px', height: '4px',
borderLeft: aBorder, borderTop: aBorder }
- };
-
- o.knobTheme = {
- 'ui-resizable-handle': { background: '#F2F2F2', border: '1px solid
#808080', height: '8px', width: '8px' },
- 'ui-resizable-n': { cursor: 'n-resize', top: '0px', left: '45%' },
- 'ui-resizable-s': { cursor: 's-resize', bottom: '0px', left: '45%' },
- 'ui-resizable-e': { cursor: 'e-resize', right: '0px', top: '45%' },
- 'ui-resizable-w': { cursor: 'w-resize', left: '0px', top: '45%' },
- 'ui-resizable-se': { cursor: 'se-resize', right: '0px', bottom: '0px' },
- 'ui-resizable-sw': { cursor: 'sw-resize', left: '0px', bottom: '0px' },
- 'ui-resizable-nw': { cursor: 'nw-resize', left: '0px', top: '0px' },
- 'ui-resizable-ne': { cursor: 'ne-resize', right: '0px', top: '0px' }
- };
-
- o._nodeName = this.element[0].nodeName;
-
//Wrap the element if it cannot hold child nodes
- if(o._nodeName.match(/canvas|textarea|input|select|button|img/i)) {
- var el = this.element;
+ if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|
img/i)) {
- //Opera fixing relative position
- if (/relative/.test(el.css('position')) && $.browser.opera)
- el.css({ position: 'relative', top: 'auto', left: 'auto' });
+ //Opera fix for relative positioning
+ if (/relative/.test(this.element.css('position')) && $.browser.opera)
+ this.element.css({ position: 'relative', top: 'auto', left: 'auto' });
//Create a wrapper element and set the wrapper to the new current
internal element
- el.wrap(
- $('<div class="ui-wrapper" style="overflow: hidden;"></div>').css( {
- position: el.css('position'),
- width: el.outerWidth(),
- height: el.outerHeight(),
- top: el.css('top'),
- left: el.css('left')
+ this.element.wrap(
+ $('<div class="ui-wrapper" style="overflow: hidden;"></div>').css({
+ position: this.element.css('position'),
+ width: this.element.outerWidth(),
+ height: this.element.outerHeight(),
+ top: this.element.css('top'),
+ left: this.element.css('left')
})
);
- var oel = this.element; this.element = this.element.parent();
-
- // store instance on wrapper
- this.element.data('resizable', this);
+ //Overwrite the original this.element
+ this.element = this.element.parent();
+ this.elementIsWrapper = true;
//Move margins to the wrapper
- this.element.css({ marginLeft: oel.css("marginLeft"), marginTop:
oel.css("marginTop"),
- marginRight: oel.css("marginRight"), marginBottom:
oel.css("marginBottom")
- });
-
- oel.css({ marginLeft: 0, marginTop: 0, marginRight: 0, marginBottom:
0});
+ this.element.css({ marginLeft: this.originalElement.css("marginLeft"),
marginTop: this.originalElement.css("marginTop"), marginRight:
this.originalElement.css("marginRight"), marginBottom:
this.originalElement.css("marginBottom") });
+ this.originalElement.css({ marginLeft: 0, marginTop: 0, marginRight: 0,
marginBottom: 0});
//Prevent Safari textarea resize
- if ($.browser.safari && o.preventDefault) oel.css('resize', 'none');
+ if ($.browser.safari && o.preventDefault)
this.originalElement.css('resize', 'none');
- o.proportionallyResize = oel.css({ position: 'static', zoom: 1,
display: 'block' });
+ //Push the actual element to our proportionallyResize internal array
+ this.proportionallyResize.push(this.originalElement.css({
position: 'static', zoom: 1, display: 'block' }));
- // avoid IE jump
- this.element.css({ margin: oel.css('margin') });
+ // avoid IE jump (hard set the margin)
+ this.originalElement.css({ margin: this.originalElement.css('margin')
});
// fix handlers offset
this._proportionallyResize();
+
}
- if(!o.handles) o.handles = !$('.ui-resizable-handle',
this.element).length ? "e,s,se" : { n: '.ui-resizable-n',
e: '.ui-resizable-e', s: '.ui-resizable-s', w: '.ui-resizable-w',
se: '.ui-resizable-se', sw: '.ui-resizable-sw', ne: '.ui-resizable-ne',
nw: '.ui-resizable-nw' };
- if(o.handles.constructor == String) {
-
- o.zIndex = o.zIndex || 1000;
+ this.handles = o.handles || (!$('.ui-resizable-handle',
this.element).length ? "e,s,se" : { n: '.ui-resizable-n',
e: '.ui-resizable-e', s: '.ui-resizable-s', w: '.ui-resizable-w',
se: '.ui-resizable-se', sw: '.ui-resizable-sw', ne: '.ui-resizable-ne',
nw: '.ui-resizable-nw' });
+ if(this.handles.constructor == String) {
- if(o.handles == 'all') o.handles = 'n,e,s,w,se,sw,ne,nw';
-
- var n = o.handles.split(","); o.handles = {};
-
- // insertions are applied when don't have theme loaded
- var insertionsDefault = {
- handle: 'position: absolute; display: none; overflow:hidden;',
- n: 'top: 0pt; width:100%;',
- e: 'right: 0pt; height:100%;',
- s: 'bottom: 0pt; width:100%;',
- w: 'left: 0pt; height:100%;',
- se: 'bottom: 0pt; right: 0px;',
- sw: 'bottom: 0pt; left: 0px;',
- ne: 'top: 0pt; right: 0px;',
- nw: 'top: 0pt; left: 0px;'
- };
+ if(this.handles == 'all') this.handles = 'n,e,s,w,se,sw,ne,nw';
+ var n = this.handles.split(","); this.handles = {};
for(var i = 0; i < n.length; i++) {
- var handle = $.trim(n[i]), dt = o.defaultTheme, hname
= 'ui-resizable-'+handle, loadDefault = !$.ui.css(hname) && !o.knobHandles,
userKnobClass = $.ui.css('ui-resizable-knob-handle'),
- allDefTheme = $.extend(dt[hname], dt['ui-resizable-handle']),
allKnobTheme = $.extend(o.knobTheme[hname], !userKnobClass ?
o.knobTheme['ui-resizable-handle'] : {});
-
+
+ var handle = $.trim(n[i]), hname = 'ui-resizable-'+handle;
+ var axis = $('<div class="ui-resizable-handle ' + hname + '"></div>');
+
// increase zIndex of sw, se, ne, nw axis
- var applyZIndex = /sw|se|ne|nw/.test(handle) ? { zIndex: ++o.zIndex
} : {};
-
- var defCss = (loadDefault ? insertionsDefault[handle] : ''),
- axis = $(['<div class="ui-resizable-handle ', hname, '" style="',
defCss, insertionsDefault.handle, '"></div>'].join('')).css( applyZIndex );
+ //TODO : this modifies original option
+ if(/sw|se|ne|nw/.test(handle)) axis.css({ zIndex: ++o.zIndex });
+ //TODO : What's going on here?
if ('se' == handle) {
axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
};
- o.handles[handle] = '.ui-resizable-'+handle;
-
- this.element.append(
- //Theme detection, if not loaded, load o.defaultTheme
- axis.css( loadDefault ? allDefTheme : {} )
- // Load the knobHandle css, fix width, height, top, left...
- .css( o.knobHandles ? allKnobTheme : {}
).addClass(o.knobHandles ? 'ui-resizable-knob-handle' : '').addClass(o.knobHandles)
- );
+ //Insert into internal handles object and append to element
+ this.handles[handle] = '.ui-resizable-'+handle;
+ this.element.append(axis);
}
- if (o.knobHandles)
this.element.addClass('ui-resizable-knob').css( !$.ui.css('ui-resizable-knob') ?
{ /*border: '1px #fff dashed'*/ } : {} );
}
this._renderAxis = function(target) {
+
target = target || this.element;
- for(var i in o.handles) {
- if(o.handles[i].constructor == String)
- o.handles[i] = $(o.handles[i], this.element).show();
+ for(var i in this.handles) {
+
+ if(this.handles[i].constructor == String)
+ this.handles[i] = $(this.handles[i], this.element).show();
if (o.transparent)
- o.handles[i].css({opacity:0});
+ this.handles[i].css({ opacity: 0 });
//Apply pad to wrapper element, needed to fix axis position (textarea,
inputs, scrolls)
- if (this.element.is('.ui-wrapper') &&
- o._nodeName.match(/textarea|input|select|button/i)) {
+ if (this.elementIsWrapper &&
this.originalElement[0].nodeName.match(/textarea|input|select|button/i)) {
- var axis = $(o.handles[i], this.element), padWrapper = 0;
+ var axis = $(this.handles[i], this.element), padWrapper = 0;
//Checking the correct pad and border
padWrapper = /sw|ne|nw|se|n|s/.test(i) ? axis.outerHeight() :
axis.outerWidth();
@@ -182,48 +124,58 @@
target.css(padPos, padWrapper);
this._proportionallyResize();
+
}
- if(!$(o.handles[i]).length) continue;
+
+ //TODO: What's that good for? There's not anything to be executed left
+ if(!$(this.handles[i]).length)
+ continue;
+
}
};
+ //TODO: make renderAxis a prototype function
this._renderAxis(this.element);
- o._handles = $('.ui-resizable-handle', self.element);
+
+ this._handles = $('.ui-resizable-handle', this.element);
if (o.disableSelection)
- o._handles.disableSelection();
+ this._handles.disableSelection();
//Matching axis name
- o._handles.mouseover(function() {
- if (!o.resizing) {
+ this._handles.mouseover(function() {
+ if (!self.resizing) {
if (this.className)
var axis = this.className.match(/ui-resizable-(se|sw|ne|nw|n|e|s|
w)/i);
//Axis, default = se
- self.axis = o.axis = axis && axis[1] ? axis[1] : 'se';
+ self.axis = axis && axis[1] ? axis[1] : 'se';
}
});
//If we want to auto hide the elements
if (o.autoHide) {
- o._handles.hide();
- $(self.element).addClass("ui-resizable-autohide").hover(function() {
- $(this).removeClass("ui-resizable-autohide");
- o._handles.show();
- },
- function(){
- if (!o.resizing) {
- $(this).addClass("ui-resizable-autohide");
- o._handles.hide();
- }
- });
+ this._handles.hide();
+ $(this.element)
+ .addClass("ui-resizable-autohide")
+ .hover(function() {
+ $(this).removeClass("ui-resizable-autohide");
+ self._handles.show();
+ },
+ function(){
+ if (!self.resizing) {
+ $(this).addClass("ui-resizable-autohide");
+ self._handles.hide();
+ }
+ });
}
+ //Initialize the mouse interaction
this._mouseInit();
+
},
destroy: function() {
- var el = this.element, wrapped = el.children(".ui-resizable").get(0);
-
+
this._mouseDestroy();
var _destroy = function(exp) {
@@ -231,34 +183,32 @@
.removeData("resizable").unbind(".resizable").find('.ui-resizable-handle').remove();
};
- _destroy(el);
-
- if (el.is('.ui-wrapper') && wrapped) {
- el.parent().append(
- $(wrapped).css({
- position: el.css('position'),
- width: el.outerWidth(),
- height: el.outerHeight(),
- top: el.css('top'),
- left: el.css('left')
+ //TODO: Unwrap at same DOM position
+ if (this.elementIsWrapper) {
+ _destroy(this.element);
+ this.wrapper.parent().append(
+ this.originalElement.css({
+ position: this.wrapper.css('position'),
+ width: this.wrapper.outerWidth(),
+ height: this.wrapper.outerHeight(),
+ top: this.wrapper.css('top'),
+ left: this.wrapper.css('left')
})
).end().remove();
-
- _destroy(wrapped);
}
+
+ _destroy(this.originalElement);
+
},
_mouseCapture: function(event) {
- if(this.options.disabled) return false;
-
var handle = false;
- for(var i in this.options.handles) {
- if($(this.options.handles[i])[0] == event.target) handle = true;
+ for(var i in this.handles) {
+ if($(this.handles[i])[0] == event.target) handle = true;
}
- if (!handle) return false;
- return true;
+ return this.options.disabled || !!handle;
},
@@ -266,12 +216,12 @@
var o = this.options, iniPos = this.element.position(), el =
this.element,
num = function(v) { return parseInt(v, 10) || 0; }, ie6 =
$.browser.msie && $.browser.version < 7;
- o.resizing = true;
- o.documentScroll = { top: $(document).scrollTop(), left:
$(document).scrollLeft() };
+
+ this.resizing = true;
+ this.documentScroll = { top: $(document).scrollTop(), left:
$(document).scrollLeft() };
// bugfix #1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
-
// sOffset decides if document scrollOffset will be added to the
top/left of the resizable element
var sOffset = $.browser.msie && !o.containment &&
(/absolute/).test(el.css('position'))
&& !(/relative/).test(el.parent().css('position'));
var dscrollt = sOffset ? o.documentScroll.top : 0, dscrolll = sOffset ?
o.documentScroll.left : 0;
@@ -288,21 +238,21 @@
var c