/*!
* ZUI: 标签页管理器 - v1.8.1 - 2018-01-18
* http://zui.sexy
* GitHub: https://github.com/easysoft/zui.git
* Copyright (c) 2018 cnezsoft.com; Licensed MIT
*/
/* ========================================================================
* ZUI: tabs.js
* http://zui.sexy
* ========================================================================
* Copyright (c) 2017-2018 cnezsoft.com; Licensed MIT
* ======================================================================== */
(function($) {
'use strict';
/**
* Tab object
* @param {Object | String} tab
*/
var Tab = function(tab) {
var that = this;
if(typeof tab === 'string') {
that.url = tab;
} else if($.isPlainObject(tab)) {
$.extend(that, tab);
}
if(!that.id) {
that.id = $.zui.uuid();
}
if(!that.type) {
if(that.iframe) {
that.type = 'iframe';
that.url = that.url || that.iframe;
} else if(that.ajax) {
that.type = 'ajax';
that.url = that.url || ($.isPlainObject(that.ajax) ? that.ajax.url : that.ajax);
} else if(that.url) {
that.type = tab.ajax ? 'ajax' : 'iframe';
} else {
that.type = 'custom';
}
}
that.createTime = new Date().getTime();
that.openTime = 0;
that.onCreate && that.onCreate.call(that);
};
Tab.prototype.open = function() {
var that = this;
that.openTime = new Date().getTime();
that.onOpen && that.onOpen.call(that);
};
Tab.prototype.close = function() {
var that = this;
that.openTime = 0;
that.onClose && that.onClose.call(that);
};
Tab.create = function(data) {
if (data instanceof Tab) {
return data;
}
return new Tab(data);
};
var NAME = 'zui.tabs'; // model name
var DEFAULTS = {
tabs: [],
defaultTabIcon: 'icon-window',
contextMenu: true,
errorTemplate: '
',
// messagerOptions: null,
showMessage: true,
navTemplate: '',
containerTemplate: ''
};
var LANG = {
zh_cn: {
reload: '重新加载',
close: '关闭',
closeOthers: '关闭其他标签页',
closeRight: '关闭右侧标签页',
reopenLast: '恢复上次关闭的标签页',
errorCannotFetchFromRemote: '无法从远程服务器({0})获取内容。'
},
zh_tw: {
reload: '重新加載',
close: '關閉',
closeOthers: '關閉其他標籤頁',
closeRight: '關閉右側標籤頁',
reopenLast: '恢復上次關閉的標籤頁',
errorCannotFetchFromRemote: '無法從遠程服務器({0})獲取內容。'
},
en: {
reload: 'Reload',
close: 'Close',
closeOthers: 'Close others',
closeRight: 'Close right',
reopenLast: 'Reopen last',
errorCannotFetchFromRemote: 'Cannot fetch data from remote server {0}.'
}
};
// The tabs model class
var Tabs = function(element, options) {
var that = this;
that.name = NAME;
that.$ = $(element);
options = that.options = $.extend({}, DEFAULTS, this.$.data(), options);
var lang = options.lang || 'zh_cn';
that.lang = $.isPlainObject(lang) ? ($.extend(true, {}, LANG[lang.lang || $.zui.clientLang()], lang)) : LANG[lang];
// Initialize here
var $navbar = that.$.find('.tabs-navbar');
if (!$navbar.length) {
$navbar = $(options.navTemplate).appendTo(that.$);
}
that.$navbar = $navbar;
var $nav = $navbar.find('.tabs-nav');
if (!$nav.length) {
$nav = $('').appendTo($navbar);
}
that.$nav = $nav;
var $tabs = that.$.find('.tabs-container');
if (!$tabs.length) {
$tabs = $(options.containerTemplate).appendTo(that.$);
}
that.$tabs = $tabs;
that.activeTabId = options.defaultTab;
var tabs = options.tabs || [];
that.tabs = {};
$.each(tabs, function(index, item) {
var tab = Tab.create(item);
that.tabs[tab.id] = tab;
if (!that.activeTabId) {
that.activeTabId = tab.id;
}
that.renderTab(tab);
});
that.closedTabs = [];
that.open(that.getActiveTab());
$nav.on('click.' + NAME, '.tab-nav-link', function () {
that.open(that.getTab($(this).data('id')));
}).on('click.' + NAME, '.tab-nav-close', function (e) {
that.close($(this).closest('.tab-nav-link').data('id'));
e.stopPropagation();
}).on('resize.' + NAME, function () {
that.adjustNavs();
});
if (options.contextMenu) {
$nav.contextmenu({
selector: '.tab-nav-link',
itemsCreator: function (e) {
return that.createMenuItems(that.getTab($(this).data('id')));
},
onShow: function () {
that.$.addClass('tabs-show-contextmenu');
},
onHide: function () {
that.$.removeClass('tabs-show-contextmenu');
}
});
}
};
Tabs.prototype.createMenuItems = function (tab) {
var that = this;
var lang = that.lang;
return [{
label: lang.reload,
onClick: function () {
that.open(tab, true);
}
}, '-', {
label: lang.close,
disabled: tab.forbidClose,
onClick: function () {
that.close(tab.id);
}
}, {
label: lang.closeOthers,
disabled: that.$nav.find('.tab-nav-item:not(.hidden)').length <= 1,
onClick: function () {
that.closeOthers(tab.id);
}
}, {
label: lang.closeRight,
disabled: !$('#tab-nav-item-' + tab.id).next('.tab-nav-item:not(.hidden)').length,
onClick: function () {
that.closeRight(tab.id);
}
}, '-', {
label: lang.reopenLast,
disabled: !that.closedTabs.length,
onClick: function () {
that.reopen();
}
}];
};
Tabs.prototype.adjustNavs = function (immediately) {
var that = this;
if (!immediately) {
if (that.adjustNavsTimer) {
clearTimeout(that.adjustNavsTimer);
}
that.adjustNavsTimer = setTimeout(function() {
that.adjustNavs(true);
}, 50);
return;
}
if (that.adjustNavsTimer) {
that.adjustNavsTimer = null;
}
var $nav = that.$nav;
var $navItems = $nav.find('.tab-nav-item:not(.hidden)');
var totalWidth = $nav.width();
var totalCount = $navItems.length;
var maxWidth = Math.floor(totalWidth/totalCount);
if(maxWidth < 96) {
maxWidth = Math.floor((totalWidth-96)/(totalCount-1))
}
$nav.toggleClass('tab-nav-condensed', maxWidth <= 50);
$navItems.css('max-width', maxWidth);
};
Tabs.prototype.renderTab = function(tab, beforeTabId) {
var that = this;
var $nav = that.$nav;
var $tabNav = $('#tab-nav-item-' + tab.id);
if (!$tabNav.length) {
var $a = $('×').attr({
href: '#tabs-item-' + tab.id,
'data-id': tab.id
});
$tabNav = $('').append($a).appendTo(that.$nav);
if (beforeTabId) {
var $before$nav = $('#tab-nav-item-' + beforeTabId);
if ($before$nav.length) {
$tabNav.insertAfter($before$nav);
}
}
that.adjustNavs();
}
var $a = $tabNav.find('a').attr('title', tab.desc).toggleClass('not-closable', !!tab.forbidClose);
$a.find('.icon').attr('class', 'icon ' + (tab.icon || that.options.defaultTabIcon));
$a.find('.title').text(tab.title || tab.defaultTitle || '');
return $tabNav;
};
Tabs.prototype.getActiveTab = function() {
var that = this;
return that.activeTabId ? that.tabs[that.activeTabId] : null;
};
Tabs.prototype.getTab = function(tabId) {
var that = this;
if (!tabId) {
return that.getActiveTab();
}
if (typeof tabId === 'object') {
tabId = tabId.id;
}
return that.tabs[tabId];
};
Tabs.prototype.close = function(tabId, forceClose) {
var that = this;
var tab = that.getTab(tabId);
if (tab && (forceClose || !tab.forbidClose)) {
$('#tab-nav-item-' + tab.id).remove();
$('#tab-' + tab.id).remove();
tab.close();
delete that.tabs[tab.id];
that.closedTabs.push(tab);
that.$.callComEvent(that, 'onClose', tab);
var lastTab;
$.each(that.tabs, function (tabId, tab) {
if (!lastTab || lastTab.openTime < tab.openTime) {
lastTab = tab;
}
});
lastTab && that.open(lastTab);
}
};
Tabs.prototype.open = function(tab, forceReload) {
var that = this;
if (!(tab instanceof Tab)) {
tab = Tab.create(tab);
}
var $tabNav = that.renderTab(tab);
that.$nav.find('.tab-nav-item.active').removeClass('active');
$tabNav.addClass('active');
var $tabPane = $('#tab-' + tab.id);
if (!$tabPane.length) {
$tabPane = $('').appendTo(that.$tabs);
}
that.$tabs.find('.tab-pane.active').removeClass('active');
$tabPane.addClass('active');
tab.open();
that.activeTabId = tab.id;
that.tabs[tab.id] = tab;
if (forceReload || !tab.loaded) {
that.reload(tab);
}
that.$.callComEvent(that, 'onOpen', tab);
};
Tabs.prototype.showMessage = function (message, type) {
$.zui.messager.show(message, $.extend({
placement: 'center'
}, this.options.messagerOptions, {
type: type
}));
};
Tabs.prototype.reload = function(tab) {
var that = this;
if (typeof tab === 'string') {
tab = that.getTab(tab);
} else if (!tab) {
tab = that.getActiveTab();
}
if (!tab) {
return;
}
if (!tab.openTime) {
return that.open(tab);
}
var $tabNav = $('#tab-nav-item-' + tab.id).addClass('loading').removeClass('has-error');
var $tabPane = $('#tab-' + tab.id).addClass('loading').removeClass('has-error');
var afterRefresh = function (content, error) {
if (!tab.openTime) {
return;
}
$tabNav.removeClass('loading');
$tabPane.removeClass('loading');
that.$.callComEvent(that, 'onLoad', tab);
if(typeof content === 'string' || content instanceof $) {
if (tab.contentConverter) {
content = tab.contentConverter(content, tab);
}
$tabPane.empty().append(content);
if (!tab.title) {
content = $tabPane.text().replace(/\n/g, '');
tab.title = content.length > 10 ? content.substr(0, 10) : content;
that.renderTab(tab);
}
}
if (error) {
$tabNav.addClass('has-error');
$tabPane.addClass('has-error');
var showMessage = that.options.showMessage;
if (showMessage) {
if ($.isFunction(showMessage)) {
error = showMessage(error);
}
that.showMessage(error, 'danger');
}
if (!content) {
$tabPane.html(that.options.errorTemplate.format(error));
}
}
tab.loaded = new Date().getTime();
};
if (tab.type === 'ajax') {
var ajaxOption = {
type: 'get',
url: tab.url,
error: function(jqXHR, textStatus, errorThrown) {
afterRefresh(false, that.lang.errorCannotFetchFromRemote.format(tab.url));
},
success: function(data) {
afterRefresh(data);
}
};
if($.isPlainObject(tab.ajax)) {
ajaxOption = $.extend(ajaxOption, tab.ajax);
}
$.ajax(ajaxOption);
} else if (tab.type === 'iframe') {
try {
var iframeName = 'tab-iframe-' + tab.id;
var $iframe = $('');
$iframe.appendTo($tabPane.empty());
$('').appendTo($tabPane);
var frame = document.getElementById(iframeName);
frame.onload = frame.onreadystatechange = function() {
if(this.readyState && this.readyState != 'complete') return;
afterRefresh();
var contentDocument = frame.contentDocument;
if (contentDocument && !tab.title) {
tab.title = contentDocument.title;
that.renderTab(tab);
}
};
} catch (e) {
afterRefresh();
}
} else {
var content = tab.content || tab.custom;
if (typeof content === 'function') {
content = content(tab, afterRefresh, that);
if (content !== true) {
afterRefresh(content);
}
} else {
afterRefresh(content);
}
}
};
Tabs.prototype.closeOthers = function(tabId) {
var that = this;
that.$nav.find('.tab-nav-link:not(.hidden)').each(function() {
var thisTabId = $(this).data('id');
if (thisTabId !== tabId) {
that.close(thisTabId);
}
});
};
Tabs.prototype.closeRight = function(tabId) {
var $tabNav = $('#tab-nav-item-' + tabId);
var $rightNav = $tabNav.next('.tab-nav-item:not(.hidden)');
while ($rightNav.length) {
this.close($rightNav.data('id'));
$rightNav = $tabNav.next('.tab-nav-item:not(.hidden)');
}
};
Tabs.prototype.closeAll = function() {
var that = this;
that.$nav.find('.tab-nav-link:not(.hidden)').each(function() {
that.close($(this).data('id'));
});
};
Tabs.prototype.reopen = function() {
var that = this;
if(that.closedTabs.length) {
that.open(that.closedTabs.pop());
}
};
// Extense jquery element
$.fn.tabs = function(option) {
return this.each(function() {
var $this = $(this);
var data = $this.data(NAME);
var options = typeof option == 'object' && option;
if(!data) $this.data(NAME, (data = new Tabs(this, options)));
if(typeof option == 'string') data[option]();
});
};
Tabs.NAME = NAME;
$.fn.tabs.Constructor = Tabs;
}(jQuery));