Skip to content

Commit 645965a

Browse files
megothArne Hassel
megoth
authored and
Arne Hassel
committed
Migrated tabs.js to TypeScript
1 parent 1148e5b commit 645965a

2 files changed

Lines changed: 73 additions & 91 deletions

File tree

‎src/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,7 @@ import store from './store'
6666
import style from './style'
6767
// @ts-ignore
6868
import table from './table'
69-
// @ts-ignore
70-
import tabs from './tabs'
69+
import * as tabs from './tabs'
7170
// @ts-ignore
7271
import utils from './utils'
7372
import widgets from './widgets'

src/tabs.js renamed to src/tabs.ts

Lines changed: 72 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,9 @@
77
// written 2016-05-27
88
// See https://github.com/solid/solid-ui/issues/183 for styles
99

10-
var tabs = {}
11-
module.exports = tabs
12-
13-
var UI = {
14-
icons: require('./iconBase'),
15-
log: require('./log'),
16-
ns: require('./ns'),
17-
store: require('./store'),
18-
tabs: tabs,
19-
widgets: require('./widgets')
20-
}
21-
22-
const utils = require('./utils')
10+
import store from './store'
11+
import { cancelButton } from './widgets'
12+
import { label } from './utils'
2313

2414
// options.subject
2515
// options.orientation 0 top, 1 left, 2 bottom, 3 right
@@ -29,132 +19,128 @@ const utils = require('./utils')
2919
// options.onClose if given, will present a cancelButton next to tabs that calls this optional method
3020
//
3121

32-
UI.tabs.tabWidget = function (options) {
33-
var kb = UI.store
34-
var subject = options.subject
35-
var dom = options.dom
36-
var orientation = parseInt(options.orientation || '0')
37-
var backgroundColor = options.backgroundColor || '#ddddcc'
38-
var color
39-
var flipped = orientation & 2
40-
var vertical = orientation & 1
22+
export function tabWidget (options) {
23+
const kb = store
24+
const subject = options.subject
25+
const dom = options.dom
26+
const orientation = parseInt(options.orientation || '0')
27+
const backgroundColor = options.backgroundColor || '#ddddcc'
28+
let color
29+
const flipped = orientation & 2
30+
const vertical = orientation & 1
31+
const onClose = options.onClose
4132

42-
var mainElement, navElement
43-
var tabContainer, tabElement
44-
var onClose = options.onClose
45-
46-
var isLight = function (x) {
47-
var total = 0
48-
for (var i = 0; i < 3; i++) {
33+
const isLight = function (x) {
34+
let total = 0
35+
for (let i = 0; i < 3; i++) {
4936
total += parseInt(x.slice(i * 2 + 1, i * 2 + 3), 16)
5037
}
5138
return total > 128 * 3
5239
}
53-
var colorBlend = function (a, b, mix) {
54-
var ca, cb, res
55-
var str = '#'
40+
const colorBlend = function (a, b, mix) {
41+
let ca, cb, res
42+
let str = '#'
5643
const hex = '0123456789abcdef'
57-
for (var i = 0; i < 3; i++) {
44+
for (let i = 0; i < 3; i++) {
5845
ca = parseInt(a.slice(i * 2 + 1, i * 2 + 3), 16)
5946
cb = parseInt(b.slice(i * 2 + 1, i * 2 + 3), 16)
6047
res = ca * (1.0 - mix) + cb * mix // @@@ rounding
61-
var res2 = parseInt(('' + res).split('.')[0]) // @@ ugh
62-
var h = parseInt(('' + res2 / 16).split('.')[0]) // @@ ugh
63-
var l = parseInt(('' + (res2 % 16)).split('.')[0]) // @@ ugh
48+
const res2 = parseInt(('' + res).split('.')[0]) // @@ ugh
49+
const h = parseInt(('' + res2 / 16).split('.')[0]) // @@ ugh
50+
const l = parseInt(('' + (res2 % 16)).split('.')[0]) // @@ ugh
6451
str += hex[h] + hex[l]
6552
}
6653
// console.log('Blending colors ' + a + ' with ' + mix + ' of ' + b + ' to give ' + str)
6754
return str
6855
}
6956

70-
var selectedColor
57+
let selectedColor
7158
if (isLight(backgroundColor)) {
7259
selectedColor = colorBlend(backgroundColor, '#ffffff', 0.3)
7360
color = '#000000'
7461
} else {
7562
selectedColor = colorBlend(backgroundColor, '#000000', 0.3)
7663
color = '#ffffff'
7764
}
78-
var bodyMainStyle = `flex: 2; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: ${selectedColor}; padding: 1em;`
65+
const bodyMainStyle = `flex: 2; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: ${selectedColor}; padding: 1em;`
7966

8067
/*
8168
'resize: both; overflow: scroll; margin:0; border: 0.1em; border-style: solid; border-color: ' +
8269
selectedColor +
8370
'; padding: 1em; min-width: 30em; min-height: 450px; width:100%;'
84-
*/
71+
*/
8572
const rootElement = dom.createElement('div') // 20200117a
8673

87-
rootElement.style = 'display: flex; height: 100%; width: 100%; flex-direction: ' +
88-
(vertical ? 'row' : 'column') + (flipped ? '-reverse;' : ';')
74+
rootElement.setAttribute('style', 'display: flex; height: 100%; width: 100%; flex-direction: ' +
75+
(vertical ? 'row' : 'column') + (flipped ? '-reverse;' : ';'))
8976

90-
navElement = rootElement.appendChild(dom.createElement('nav'))
91-
navElement.style = 'margin: 0;'
77+
const navElement = rootElement.appendChild(dom.createElement('nav'))
78+
navElement.setAttribute('style', 'margin: 0;')
9279

93-
mainElement = rootElement.appendChild(dom.createElement('main'))
80+
const mainElement = rootElement.appendChild(dom.createElement('main'))
9481

9582
mainElement.setAttribute('style', 'margin: 0; width:100%; height: 100%;') // override tabbedtab.css
96-
tabContainer = navElement.appendChild(dom.createElement('ul'))
97-
tabContainer.style = 'list-style-type: none;' + // No bullet please ...
98-
'display: flex; height: 100%; width: 100%; flex-direction: ' +
99-
(vertical ? 'column' : 'row') // + (flipped ? '-reverse;' : ';')
100-
// Never flip the direction of readuing the tabs, assuming people read left to right and top to bottom
83+
const tabContainer = navElement.appendChild(dom.createElement('ul'))
84+
tabContainer.setAttribute('style', 'list-style-type: none;' + // No bullet please ...
85+
'display: flex; height: 100%; width: 100%; flex-direction: ' +
86+
(vertical ? 'column' : 'row')) // + (flipped ? '-reverse;' : ';')
87+
// Never flip the direction of readuing the tabs, assuming people read left to right and top to bottom
10188

102-
tabElement = 'li'
89+
const tabElement = 'li'
10390

104-
var bodyContainer = mainElement // .appendChild(dom.createElement('table'))
91+
const bodyContainer = mainElement // .appendChild(dom.createElement('table'))
10592
rootElement.tabContainer = tabContainer // ussed by caller
10693
rootElement.bodyContainer = bodyContainer
10794

108-
var getItems = function () {
95+
const getItems = function () {
10996
if (options.items) return options.items
11097
if (options.ordered !== false) {
11198
// default to true
112-
var list = kb.the(subject, options.predicate)
99+
const list = kb.the(subject, options.predicate)
113100
return list.elements
114101
} else {
115102
return kb.each(subject, options.predicate)
116103
}
117104
}
118105

119-
var corners = ['2em', '2em', '0', '0'] // top left, TR, BR, BL
106+
let corners = ['2em', '2em', '0', '0'] // top left, TR, BR, BL
120107
corners = corners.concat(corners).slice(orientation, orientation + 4)
121-
corners = 'border-radius: ' + corners.join(' ') + ';'
108+
const cornersStyle = 'border-radius: ' + corners.join(' ') + ';'
122109

123-
var margins = ['0.3em', '0.3em', '0', '0.3em'] // top, right, bottom, left
110+
let margins = ['0.3em', '0.3em', '0', '0.3em'] // top, right, bottom, left
124111
margins = margins.concat(margins).slice(orientation, orientation + 4)
125-
margins = 'margin: ' + margins.join(' ') + ';'
112+
const marginsStyle = 'margin: ' + margins.join(' ') + ';'
126113

127-
var tabStyle = corners + 'padding: 0.7em; max-width: 20em;' // border: 0.05em 0 0.5em 0.05em; border-color: grey;
114+
let tabStyle = cornersStyle + 'padding: 0.7em; max-width: 20em;' // border: 0.05em 0 0.5em 0.05em; border-color: grey;
128115
tabStyle += 'color: ' + color + ';'
129-
var unselectedStyle =
116+
const unselectedStyle =
130117
tabStyle +
131118
'opacity: 50%; margin: 0.3em; background-color: ' +
132119
backgroundColor +
133120
';' // @@ rotate border
134-
var selectedStyle =
135-
tabStyle + margins + ' background-color: ' + selectedColor + ';'
136-
var shownStyle = 'height: 100%; width: 100%;'
137-
var hiddenStyle = shownStyle + 'display: none;'
121+
const selectedStyle = tabStyle + marginsStyle + ' background-color: ' + selectedColor + ';'
122+
const shownStyle = 'height: 100%; width: 100%;'
123+
const hiddenStyle = shownStyle + 'display: none;'
138124

139-
var resetTabStyle = function () {
140-
for (var i = 0; i < tabContainer.children.length; i++) {
125+
const resetTabStyle = function () {
126+
for (let i = 0; i < tabContainer.children.length; i++) {
141127
const tab = tabContainer.children[i]
142128
if (tab.classList.contains('unstyled')) {
143129
continue
144130
}
145131
tab.firstChild.setAttribute('style', unselectedStyle)
146132
}
147133
}
148-
var resetBodyStyle = function () {
149-
for (var i = 0; i < bodyContainer.children.length; i++) {
134+
const resetBodyStyle = function () {
135+
for (let i = 0; i < bodyContainer.children.length; i++) {
150136
bodyContainer.children[i].setAttribute('style', hiddenStyle)
151137
}
152138
}
153139

154-
var makeNewSlot = function (item) {
155-
var ele = dom.createElement(tabElement)
140+
const makeNewSlot = function (item) {
141+
const ele = dom.createElement(tabElement)
156142
ele.subject = item
157-
var div = ele.appendChild(dom.createElement('div'))
143+
const div = ele.appendChild(dom.createElement('div'))
158144
div.setAttribute('style', unselectedStyle)
159145

160146
div.addEventListener('click', function (e) {
@@ -164,7 +150,7 @@ UI.tabs.tabWidget = function (options) {
164150
}
165151
div.setAttribute('style', selectedStyle)
166152
ele.bodyTR.setAttribute('style', shownStyle)
167-
var bodyMain = ele.bodyTR.firstChild
153+
let bodyMain = ele.bodyTR.firstChild
168154
if (!bodyMain) {
169155
bodyMain = ele.bodyTR.appendChild(dom.createElement('main'))
170156
bodyMain.setAttribute('style', bodyMainStyle)
@@ -187,19 +173,19 @@ UI.tabs.tabWidget = function (options) {
187173
if (options.renderTab) {
188174
options.renderTab(div, item)
189175
} else {
190-
div.textContent = utils.label(item)
176+
div.textContent = label(item)
191177
}
192178
return ele
193179
}
194180

195181
// @@ Use common one from utils?
196-
var orderedSync = function () {
197-
var items = getItems()
182+
const orderedSync = function () {
183+
const items = getItems()
198184
if (!vertical) {
199185
// mainElement.setAttribute('colspan', items.length + (onClose ? 1 : 0))
200186
}
201-
var slot, i, j, left, right
202-
var differ = false
187+
let slot, i, j, left, right
188+
let differ = false
203189
// Find how many match at each end
204190
for (left = 0; left < tabContainer.children.length; left++) {
205191
slot = tabContainer.children[left]
@@ -222,7 +208,7 @@ UI.tabs.tabWidget = function (options) {
222208
}
223209
}
224210
// The elements left ... right in tabContainer.children do not match
225-
var insertables = items.slice(
211+
const insertables = items.slice(
226212
left,
227213
right - tabContainer.children.length + items.length + 1
228214
)
@@ -233,9 +219,9 @@ UI.tabs.tabWidget = function (options) {
233219
right -= 1
234220
}
235221
for (i = 0; i < insertables.length; i++) {
236-
var newSlot = makeNewSlot(insertables[i])
237-
var newBodyDiv = dom.createElement('div')
238-
// var newBodyDiv = newBodyDiv.appendChild(dom.createElement('div'))
222+
const newSlot = makeNewSlot(insertables[i])
223+
const newBodyDiv = dom.createElement('div')
224+
// const newBodyDiv = newBodyDiv.appendChild(dom.createElement('div'))
239225
newSlot.bodyTR = newBodyDiv
240226
if (left === tabContainer.children.length) {
241227
// None left of original on right
@@ -253,7 +239,7 @@ UI.tabs.tabWidget = function (options) {
253239
}
254240
}
255241

256-
var sync = function () {
242+
const sync = function () {
257243
if (options.ordered) {
258244
orderedSync()
259245
} else {
@@ -270,9 +256,9 @@ UI.tabs.tabWidget = function (options) {
270256
tabContainer.children.length &&
271257
options.selectedTab
272258
) {
273-
var tab
274-
var found = false
275-
for (var i = 0; i < tabContainer.children.length; i++) {
259+
let tab
260+
let found = false
261+
for (let i = 0; i < tabContainer.children.length; i++) {
276262
tab = tabContainer.children[i]
277263
if (
278264
tab.firstChild &&
@@ -299,11 +285,8 @@ UI.tabs.tabWidget = function (options) {
299285
}
300286
const extraTab = dom.createElement(tabElement)
301287
extraTab.classList.add('unstyled')
302-
if (tabElement === 'td') {
303-
extraTab.style.textAlign = 'right'
304-
}
305-
const cancelButton = UI.widgets.cancelButton(dom, onClose)
306-
extraTab.appendChild(cancelButton)
288+
const tabCancelButton = cancelButton(dom, onClose)
289+
extraTab.appendChild(tabCancelButton)
307290
tabContainer.appendChild(extraTab)
308291
tabContainer.dataset.onCloseSet = 'true'
309292
}

0 commit comments

Comments
 (0)