/**
|
* portal - jQuery EasyUI
|
*
|
* Licensed under the GPL:
|
* http://www.gnu.org/licenses/gpl.txt
|
*
|
* Copyright 2010-2012 stworthy [ stworthy@gmail.com ]
|
*
|
* Dependencies:
|
* draggable
|
* panel
|
*
|
* jQuery EasyUI portal Plugin 1.0 beta
|
* jQuery EasyUI portal ²å¼þ
|
* jquery.portal.js
|
* ¶þ´Î¿ª·¢ Á÷ÔÆ
|
* ×î½ü¸üУº2014-06-19
|
*
|
* Copyright (c) 2013-2014 ChenJianwei personal All rights reserved.
|
* http://www.chenjianwei.org
|
*/
|
(function ($) {
|
/**
|
* initialize the portal
|
*/
|
function init(target) {
|
$(target).addClass('portal');
|
var table = $('<table border="0" cellspacing="0" cellpadding="0"><tr></tr></table>').appendTo(target);
|
var tr = table.find('tr');
|
|
var columnWidths = [];
|
var totalWidth = 0;
|
$(target).children('div:first').addClass('portal-column-left');
|
$(target).children('div:last').addClass('portal-column-right');
|
$(target).find('>div').each(function () { // each column panel
|
var column = $(this);
|
totalWidth += column.outerWidth();
|
columnWidths.push(column.outerWidth());
|
|
var td = $('<td class="portal-column-td"></td>').appendTo(tr)
|
column.addClass('portal-column').appendTo(td);
|
column.find('>div').each(function () { // each portal panel
|
var p = $(this).addClass('portal-p').panel({
|
doSize: false,
|
cls: 'portal-panel'//,
|
//onClose: function () { $(this).panel("destroy"); }
|
});
|
var opts = p.panel("options"), onClose = opts.onClose;
|
opts.onClose = function () {
|
if ($.isFunction(onClose)) { onClose.apply(this, arguments); }
|
$(this).panel("destroy");
|
};
|
makeDraggable(target, p);
|
});
|
});
|
for (var i = 0; i < columnWidths.length; i++) {
|
columnWidths[i] /= totalWidth;
|
}
|
|
$(target).bind('_resize', function () {
|
var opts = $.data(target, 'portal').options;
|
if (opts.fit == true) {
|
setSize(target);
|
}
|
return false;
|
});
|
|
return columnWidths;
|
}
|
|
function setSize(target) {
|
var t = $(target);
|
var opts = $.data(target, 'portal').options;
|
if (opts.fit) {
|
var p = t.parent();
|
opts.width = p.width();
|
opts.height = p.height();
|
}
|
if (!isNaN(opts.width)) {
|
t._outerWidth(opts.width);
|
} else {
|
t.width('auto');
|
}
|
if (!isNaN(opts.height)) {
|
t._outerHeight(opts.height);
|
} else {
|
t.height('auto');
|
}
|
|
var hasScroll = t.find('>table').outerHeight() > t.height();
|
var width = t.width();
|
var columnWidths = $.data(target, 'portal').columnWidths;
|
var leftWidth = 0;
|
|
// calculate and set every column size
|
for (var i = 0; i < columnWidths.length; i++) {
|
var p = t.find('div.portal-column:eq(' + i + ')');
|
var w = Math.floor(width * columnWidths[i]);
|
if (i == columnWidths.length - 1) {
|
// w = width - leftWidth - (hasScroll == true ? 28 : 10);
|
w = width - leftWidth - (hasScroll == true ? 18 : 0);
|
}
|
p._outerWidth(w);
|
leftWidth += p.outerWidth();
|
|
// resize every panel of the column
|
p.find('div.portal-p').panel('resize', { width: p.width() });
|
}
|
opts.onResize.call(target, opts.width, opts.height);
|
}
|
|
/**
|
* set draggable feature for the specified panel
|
*/
|
function makeDraggable(target, panel) {
|
var spacer;
|
panel.panel('panel').draggable({
|
handle: '>div.panel-header>div.panel-title',
|
proxy: function (source) {
|
var p = $('<div class="portal-proxy">proxy</div>').insertAfter(source);
|
p.width($(source).width());
|
p.height($(source).height());
|
p.html($(source).html());
|
p.find('div.portal-p').removeClass('portal-p').hide();
|
return p;
|
},
|
onBeforeDrag: function (e) {
|
e.data.startTop = $(this).position().top + $(target).scrollTop();
|
},
|
onStartDrag: function (e) {
|
$(this).hide();
|
spacer = $('<div class="portal-spacer"></div>').insertAfter(this);
|
setSpacerSize($(this).outerWidth(), $(this).outerHeight());
|
},
|
onDrag: function (e) {
|
var p = findPanel(e, this);
|
if (p) {
|
if (p.pos == 'up') {
|
spacer.insertBefore(p.target);
|
} else {
|
spacer.insertAfter(p.target);
|
}
|
setSpacerSize($(p.target).outerWidth());
|
} else {
|
var c = findColumn(e);
|
if (c) {
|
if (c.find('div.portal-spacer').length == 0) {
|
spacer.appendTo(c);
|
setSize(target);
|
setSpacerSize(c.width());
|
}
|
}
|
}
|
},
|
onStopDrag: function (e) {
|
$(this).css('position', 'static');
|
$(this).show();
|
spacer.hide();
|
$(this).insertAfter(spacer);
|
spacer.remove();
|
setSize(target);
|
panel.panel('move');
|
|
var opts = $.data(target, 'portal').options;
|
opts.onStateChange.call(target);
|
}
|
});
|
|
/**
|
* find which panel the cursor is over
|
*/
|
function findPanel(e, source) {
|
var result = null;
|
$(target).find('div.portal-p').each(function () {
|
var pal = $(this).panel('panel');
|
if (pal[0] != source) {
|
var pos = pal.offset();
|
if (e.pageX > pos.left && e.pageX < pos.left + pal.outerWidth()
|
&& e.pageY > pos.top && e.pageY < pos.top + pal.outerHeight()) {
|
if (e.pageY > pos.top + pal.outerHeight() / 2) {
|
result = {
|
target: pal,
|
pos: 'down'
|
};
|
} else {
|
result = {
|
target: pal,
|
pos: 'up'
|
}
|
}
|
}
|
}
|
});
|
return result;
|
}
|
|
/**
|
* find which portal column the cursor is over
|
*/
|
function findColumn(e) {
|
var result = null;
|
$(target).find('div.portal-column').each(function () {
|
var pal = $(this);
|
var pos = pal.offset();
|
if (e.pageX > pos.left && e.pageX < pos.left + pal.outerWidth()) {
|
result = pal;
|
}
|
});
|
return result;
|
}
|
|
/**
|
* set the spacer size
|
*/
|
function setSpacerSize(width, height) {
|
spacer._outerWidth(width);
|
if (height) {
|
spacer._outerHeight(height);
|
}
|
}
|
}
|
|
|
$.fn.portal = function (options, param) {
|
if (typeof options == 'string') {
|
return $.fn.portal.methods[options](this, param);
|
}
|
options = options || {};
|
return this.each(function () {
|
var state = $.data(this, 'portal');
|
if (state) {
|
$.extend(state.options, options);
|
} else {
|
state = $.data(this, 'portal', {
|
options: $.extend({}, $.fn.portal.defaults, $.fn.portal.parseOptions(this), options),
|
columnWidths: init(this)
|
});
|
}
|
if (state.options.border) {
|
$(this).removeClass('portal-noborder');
|
} else {
|
$(this).addClass('portal-noborder');
|
}
|
setSize(this);
|
});
|
};
|
|
$.fn.portal.methods = {
|
options: function (jq) {
|
return $.data(jq[0], 'portal').options;
|
},
|
resize: function (jq, param) {
|
return jq.each(function () {
|
if (param) {
|
var opts = $.data(this, 'portal').options;
|
if (param.width) opts.width = param.width;
|
if (param.height) opts.height = param.height;
|
}
|
setSize(this);
|
});
|
},
|
getPanels: function (jq, columnIndex) {
|
var c = jq; // the panel container
|
if (columnIndex >= 0) {
|
c = jq.find('div.portal-column:eq(' + columnIndex + ')');
|
}
|
var panels = [];
|
c.find('div.portal-p').each(function () {
|
panels.push($(this));
|
});
|
return panels;
|
},
|
add: function (jq, param) { // param: {panel,columnIndex}
|
return jq.each(function () {
|
if (!param || !$.isNumeric(param.columnIndex) || !param.panel) { return; }
|
var portal = $(this), opts = portal.portal("options");
|
if (opts.onBeforeAdd.call(this, param.columnIndex, param.panel) == false) { return; }
|
var c = portal.find('div.portal-column:eq(' + param.columnIndex + ')');
|
var p = param.panel.addClass('portal-p');
|
p.panel('panel').addClass('portal-panel').appendTo(c);
|
makeDraggable(this, p);
|
p.panel('resize', { width: c.width() });
|
var panelOpts = p.panel("options"), onClose = panelOpts.onClose;
|
panelOpts.onClose = function () {
|
if ($.isFunction(onClose)) { onClose.apply(this, arguments); }
|
if (!p.length) { return; }
|
var body = $("body");
|
if ($.contains(body[0], p[0])) { p.panel("destroy"); }
|
}
|
opts.onAdd.call(this, param.columnIndex, param.panel);
|
});
|
},
|
remove: function (jq, panel) {
|
return jq.each(function () {
|
var p = $(this), opts = p.portal("options");
|
if (opts.onBeforeRemove.call(this, panel) == false) { return; }
|
var panels = p.portal('getPanels'), panelOpts = panel.panel("options");
|
for (var i = 0; i < panels.length; i++) {
|
var p = panels[i];
|
if (p[0] == $(panel)[0]) {
|
p.panel('destroy');
|
}
|
}
|
opts.onRemove.call(this, panelOpts);
|
});
|
},
|
addColumn: function (jq) {
|
return jq.each(function () {
|
var state = $.data(this, "portal"), opts = state.options, columnWidths = state.columnWidths,
|
portal = $(this), totalWidth = portal.outerWidth(),
|
tr = portal.find(">table tr"), td = $("<td></td>").addClass("portal-column-td").appendTo(tr),
|
column = $("<div></div>").addClass("portal-column").appendTo(td),
|
width = parseFloat(1) / (columnWidths.length + 1);
|
if (opts.onBeforeAddColumn.call(this, columnWidths.length) == false) { return; }
|
for (var i = 0; i < columnWidths.length; i++) { columnWidths[i] = width; }
|
columnWidths.push(width);
|
tr.find(">td>div.portal-column").removeClass("portal-column-left portal-column-right");
|
tr.find(">td>div.portal-column:first").addClass("portal-column-left");
|
tr.find(">td>div.portal-column:last").addClass("portal-column-right");
|
setSize(this);
|
opts.onAddColumn.call(this, columnWidths.length - 1);
|
});
|
},
|
removeColumn: function (jq, index) {
|
return jq.each(function () {
|
var state = $.data(this, "portal"), opts = state.options, columnWidths = state.columnWidths;
|
if (!$.isNumeric(index) || !columnWidths || !columnWidths.length || index > columnWidths.length - 1) { return; }
|
if (opts.onBeforeRemoveColumn.call(this, index) == false) { return; }
|
var tr = $(this).find(">table tr"), width = parseFloat(1) / (columnWidths.length - 1);
|
columnWidths.pop();
|
for (var i = 0; i < columnWidths.length; i++) { columnWidths[i] = width; }
|
tr.find(">td:eq(" + index + ")").remove();
|
tr.find(">td>div.portal-column").removeClass("portal-column-left portal-column-right");
|
tr.find(">td>div.portal-column:first").addClass("portal-column-left");
|
tr.find(">td>div.portal-column:last").addClass("portal-column-right");
|
setSize(this);
|
opts.onRemoveColumn.call(this, index);
|
});
|
},
|
columns: function (jq) {
|
return $.data(jq[0], "portal").columnWidths.length;
|
},
|
disableDragging: function (jq, panel) {
|
panel.panel('panel').draggable('disable');
|
return jq;
|
},
|
enableDragging: function (jq, panel) {
|
panel.panel('panel').draggable('enable');
|
return jq;
|
}
|
};
|
|
$.fn.portal.parseOptions = function (target) {
|
return $.extend({}, $.parser.parseOptions(target, ["width", "height", { border: "boolean", fit: "boolean"}]));
|
};
|
|
$.fn.portal.defaults = {
|
width: 'auto',
|
height: 'auto',
|
border: true,
|
fit: false,
|
onResize: function (width, height) { },
|
onStateChange: function () { },
|
|
onBeforeAdd: function (columnIndex, panel) { },
|
onAdd: function (columnIndex, panel) { },
|
|
onBeforeAddColumn: function (columnIndex) { },
|
onAddColumn: function (columnIndex) { },
|
|
onBeforeRemove: function (panel) { },
|
onRemove: function (panelOption) { },
|
|
onBeforeRemoveColumn: function (columnIndex) { },
|
onRemoveColumn: function (columnIndex) { }
|
};
|
|
$.parser.plugins.push("portal");
|
|
})(jQuery);
|
