From ecd8be4ddf50195c0445c1be0ddbeb264183b815 Mon Sep 17 00:00:00 2001 From: Erik Pearson Date: Fri, 21 Oct 2022 11:43:36 -0700 Subject: [PATCH 01/10] fix tabs behavior when deleting a dynamic tab; also removed unused code; improved other code. --- .../static/kbase/js/widgets/kbaseTabs.js | 354 +++++++++--------- 1 file changed, 178 insertions(+), 176 deletions(-) diff --git a/kbase-extension/static/kbase/js/widgets/kbaseTabs.js b/kbase-extension/static/kbase/js/widgets/kbaseTabs.js index 195e83e313..cac7205ef3 100644 --- a/kbase-extension/static/kbase/js/widgets/kbaseTabs.js +++ b/kbase-extension/static/kbase/js/widgets/kbaseTabs.js @@ -2,9 +2,15 @@ Easy widget to serve as a tabbed container. + It is an extension of the Bootstrap 3 tab (https://getbootstrap.com/docs/3.4/javascript/#tabs). + + The primary customizations are: + - tabs can be set as deletable + - + var $tabs = new kbaseTabs($('#tabs'), { - tabPosition : 'bottom', //or left or right or top. Defaults to 'top' - canDelete : true, //whether or not the tab can be removed. Defaults to false. + tabPosition : 'bottom', // or 'left' or 'right' or 'top'. Defaults to 'top' + canDelete : true, // whether the tab can be removed. Defaults to false. tabs : [ { tab : 'T1', //name of the tab @@ -24,32 +30,27 @@ ], } ); - - useful methods would be: - - $('#tabs').kbaseTabs('showTab', 'T1'); - $('#tabs').kbaseTabs('addTab', tabObject); //the tabObject defined up above - */ -define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( - KBWidget, - bootstrap, - $, - kbaseDeletePrompt -) => { +define([ + 'kbwidget', + 'jquery', + 'kbaseDeletePrompt', + 'widgets/common/ErrorMessage', + + // For effect + 'bootstrap', +], (KBWidget, $, kbaseDeletePrompt, $ErrorMessage) => { 'use strict'; + return KBWidget({ name: 'kbaseTabs', - version: '1.0.0', - - _accessors: ['tabsHeight'], + version: '1.1.0', options: { - tabPosition: 'top', canDelete: false, - borderColor: 'lightgray', + confirmDelete: true, }, init: function (options) { @@ -64,158 +65,141 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( }, appendUI: function ($elem, tabs) { - if (tabs == undefined) { + if (typeof tabs === 'undefined') { tabs = this.options.tabs; } - const $block = $('
').addClass('tabbable'); - const $tabs = $('
') - .addClass('tab-content') - .attr('id', 'tabs-content') - .css('height', this.tabsHeight()); - const $nav = $('') - .addClass('nav nav-tabs') - .attr('id', 'tabs-nav'); + const $block = $('
').addClass('tabbable'); + const $tabs = $('
').addClass('tab-content').attr('id', 'tabs-content'); + const $nav = $('