281 lines
8.7 KiB
JavaScript
281 lines
8.7 KiB
JavaScript
/**
|
|
* jQuery ligerUI 1.3.2
|
|
*
|
|
* http://ligerui.com
|
|
*
|
|
* Author daomi 2015 [ gd_star@163.com ]
|
|
*
|
|
*/
|
|
(function ($)
|
|
{
|
|
$.fn.ligerResizable = function (options)
|
|
{
|
|
return $.ligerui.run.call(this, "ligerResizable", arguments,
|
|
{
|
|
idAttrName: 'ligeruiresizableid', hasElement: false, propertyToElemnt: 'target'
|
|
});
|
|
};
|
|
|
|
$.fn.ligerGetResizableManager = function ()
|
|
{
|
|
return $.ligerui.run.call(this, "ligerGetResizableManager", arguments,
|
|
{
|
|
idAttrName: 'ligeruiresizableid', hasElement: false, propertyToElemnt: 'target'
|
|
});
|
|
};
|
|
|
|
|
|
$.ligerDefaults.Resizable = {
|
|
handles: 'n, e, s, w, ne, se, sw, nw',
|
|
maxWidth: 2000,
|
|
maxHeight: 2000,
|
|
minWidth: 20,
|
|
minHeight: 20,
|
|
scope: 3,
|
|
animate: false,
|
|
onStartResize: function (e) { },
|
|
onResize: function (e) { },
|
|
onStopResize: function (e) { },
|
|
onEndResize: null
|
|
};
|
|
|
|
$.ligerui.controls.Resizable = function (options)
|
|
{
|
|
$.ligerui.controls.Resizable.base.constructor.call(this, null, options);
|
|
};
|
|
|
|
$.ligerui.controls.Resizable.ligerExtend($.ligerui.core.UIComponent, {
|
|
__getType: function ()
|
|
{
|
|
return 'Resizable';
|
|
},
|
|
__idPrev: function ()
|
|
{
|
|
return 'Resizable';
|
|
},
|
|
_render: function ()
|
|
{
|
|
var g = this, p = this.options;
|
|
g.target = $(p.target);
|
|
g.set(p);
|
|
|
|
g.target.mousemove(function (e)
|
|
{
|
|
if (p.disabled) return;
|
|
g.dir = g._getDir(e);
|
|
if (g.dir)
|
|
g.target.css('cursor', g.dir + '-resize');
|
|
else if (g.target.css('cursor').indexOf('-resize') > 0)
|
|
g.target.css('cursor', 'default');
|
|
if (p.target.ligeruidragid)
|
|
{
|
|
var drag = $.ligerui.get(p.target.ligeruidragid);
|
|
if (drag && g.dir)
|
|
{
|
|
drag.set('disabled', true);
|
|
} else if (drag)
|
|
{
|
|
drag.set('disabled', false);
|
|
}
|
|
}
|
|
}).mousedown(function (e)
|
|
{
|
|
if (p.disabled) return;
|
|
if (g.dir)
|
|
{
|
|
g._start(e);
|
|
}
|
|
});
|
|
},
|
|
_rendered: function ()
|
|
{
|
|
this.options.target.ligeruiresizableid = this.id;
|
|
},
|
|
_getDir: function (e)
|
|
{
|
|
var g = this, p = this.options;
|
|
var dir = '';
|
|
var xy = g.target.offset();
|
|
var width = g.target.width();
|
|
var height = g.target.height();
|
|
var scope = p.scope;
|
|
var pageX = e.pageX || e.screenX;
|
|
var pageY = e.pageY || e.screenY;
|
|
if (pageY >= xy.top && pageY < xy.top + scope)
|
|
{
|
|
dir += 'n';
|
|
}
|
|
else if (pageY <= xy.top + height && pageY > xy.top + height - scope)
|
|
{
|
|
dir += 's';
|
|
}
|
|
if (pageX >= xy.left && pageX < xy.left + scope)
|
|
{
|
|
dir += 'w';
|
|
}
|
|
else if (pageX <= xy.left + width && pageX > xy.left + width - scope)
|
|
{
|
|
dir += 'e';
|
|
}
|
|
if (p.handles == "all" || dir == "") return dir;
|
|
if ($.inArray(dir, g.handles) != -1) return dir;
|
|
return '';
|
|
},
|
|
_setHandles: function (handles)
|
|
{
|
|
if (!handles) return;
|
|
this.handles = handles.replace(/(\s*)/g, '').split(',');
|
|
},
|
|
_createProxy: function ()
|
|
{
|
|
var g = this;
|
|
g.proxy = $('<div class="l-resizable"></div>');
|
|
g.proxy.width(g.target.width()).height(g.target.height())
|
|
g.proxy.attr("resizableid", g.id).appendTo('body');
|
|
},
|
|
_removeProxy: function ()
|
|
{
|
|
var g = this;
|
|
if (g.proxy)
|
|
{
|
|
g.proxy.remove();
|
|
g.proxy = null;
|
|
}
|
|
},
|
|
_start: function (e)
|
|
{
|
|
var g = this, p = this.options;
|
|
g._createProxy();
|
|
g.proxy.css({
|
|
left: g.target.offset().left,
|
|
top: g.target.offset().top,
|
|
position: 'absolute'
|
|
});
|
|
g.current = {
|
|
dir: g.dir,
|
|
left: g.target.offset().left,
|
|
top: g.target.offset().top,
|
|
startX: e.pageX || e.screenX,
|
|
startY: e.pageY || e.clientY,
|
|
width: g.target.width(),
|
|
height: g.target.height()
|
|
};
|
|
$(document).bind("selectstart.resizable", function () { return false; });
|
|
$(document).bind('mouseup.resizable', function ()
|
|
{
|
|
g._stop.apply(g, arguments);
|
|
});
|
|
$(document).bind('mousemove.resizable', function ()
|
|
{
|
|
g._drag.apply(g, arguments);
|
|
});
|
|
g.proxy.show();
|
|
g.trigger('startResize', [g.current, e]);
|
|
},
|
|
changeBy: {
|
|
t: ['n', 'ne', 'nw'],
|
|
l: ['w', 'sw', 'nw'],
|
|
w: ['w', 'sw', 'nw', 'e', 'ne', 'se'],
|
|
h: ['n', 'ne', 'nw', 's', 'se', 'sw']
|
|
},
|
|
_drag: function (e)
|
|
{
|
|
var g = this, p = this.options;
|
|
if (!g.current) return;
|
|
if (!g.proxy) return;
|
|
g.proxy.css('cursor', g.current.dir == '' ? 'default' : g.current.dir + '-resize');
|
|
var pageX = e.pageX || e.screenX;
|
|
var pageY = e.pageY || e.screenY;
|
|
g.current.diffX = pageX - g.current.startX;
|
|
g.current.diffY = pageY - g.current.startY;
|
|
g._applyResize(g.proxy);
|
|
g.trigger('resize', [g.current, e]);
|
|
},
|
|
_stop: function (e)
|
|
{
|
|
var g = this, p = this.options;
|
|
if (g.hasBind('stopResize'))
|
|
{
|
|
if (g.trigger('stopResize', [g.current, e]) != false)
|
|
g._applyResize();
|
|
}
|
|
else
|
|
{
|
|
g._applyResize();
|
|
}
|
|
g._removeProxy();
|
|
g.trigger('endResize', [g.current, e]);
|
|
$(document).unbind("selectstart.resizable");
|
|
$(document).unbind('mousemove.resizable');
|
|
$(document).unbind('mouseup.resizable');
|
|
},
|
|
_applyResize: function (applyResultBody)
|
|
{
|
|
var g = this, p = this.options;
|
|
var cur = {
|
|
left: g.current.left,
|
|
top: g.current.top,
|
|
width: g.current.width,
|
|
height: g.current.height
|
|
};
|
|
var applyToTarget = false;
|
|
if (!applyResultBody)
|
|
{
|
|
applyResultBody = g.target;
|
|
applyToTarget = true;
|
|
if (!isNaN(parseInt(g.target.css('top'))))
|
|
cur.top = parseInt(g.target.css('top'));
|
|
else
|
|
cur.top = 0;
|
|
if (!isNaN(parseInt(g.target.css('left'))))
|
|
cur.left = parseInt(g.target.css('left'));
|
|
else
|
|
cur.left = 0;
|
|
}
|
|
if ($.inArray(g.current.dir, g.changeBy.l) > -1)
|
|
{
|
|
cur.left += g.current.diffX;
|
|
g.current.diffLeft = g.current.diffX;
|
|
|
|
}
|
|
else if (applyToTarget)
|
|
{
|
|
delete cur.left;
|
|
}
|
|
if ($.inArray(g.current.dir, g.changeBy.t) > -1)
|
|
{
|
|
cur.top += g.current.diffY;
|
|
g.current.diffTop = g.current.diffY;
|
|
}
|
|
else if (applyToTarget)
|
|
{
|
|
delete cur.top;
|
|
}
|
|
if ($.inArray(g.current.dir, g.changeBy.w) > -1)
|
|
{
|
|
cur.width += (g.current.dir.indexOf('w') == -1 ? 1 : -1) * g.current.diffX;
|
|
g.current.newWidth = cur.width;
|
|
}
|
|
else if (applyToTarget)
|
|
{
|
|
delete cur.width;
|
|
}
|
|
if ($.inArray(g.current.dir, g.changeBy.h) > -1)
|
|
{
|
|
cur.height += (g.current.dir.indexOf('n') == -1 ? 1 : -1) * g.current.diffY;
|
|
g.current.newHeight = cur.height;
|
|
}
|
|
else if (applyToTarget)
|
|
{
|
|
delete cur.height;
|
|
}
|
|
if (applyToTarget && p.animate)
|
|
applyResultBody.animate(cur);
|
|
else
|
|
applyResultBody.css(cur);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
})(jQuery); |