Skip to content

Commit 7f88fda

Browse files
megothArne Hassel
megoth
authored and
Arne Hassel
committed
Migrated create module to TypeScript
1 parent 93816ec commit 7f88fda

4 files changed

Lines changed: 105 additions & 87 deletions

File tree

src/create.js renamed to src/create/create.ts

Lines changed: 72 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,15 @@
1-
/* create.js UI to craete new objects in the solid-app-set world
1+
/* create.js UI to create new objects in the solid-app-set world
22
**
33
*/
4-
// const error = require('./widgets/error')
5-
// const widgets = require('./widgets/index')
6-
// const utils = require('./utils')
74

8-
// const UI = require('solid-ui')
9-
10-
const UI = {
11-
authn: require('./authn/authn'),
12-
icons: require('./iconBase'),
13-
log: require('./log'),
14-
ns: require('./ns'),
15-
store: require('./store'),
16-
style: require('./style'),
17-
utils: require('./utils'),
18-
widgets: require('./widgets')
19-
}
20-
21-
const kb = UI.store
22-
23-
module.exports = {
24-
newThingUI
25-
}
5+
import icons from '../iconBase'
6+
import utils from '../utils'
7+
import widgets from '../widgets'
8+
import kb from '../store'
9+
import ns from '../ns'
10+
import { logInLoadProfile, selectWorkspace } from '../authn/authn'
11+
import { DataBrowserContext, NewPaneOptions, PaneDefinition } from 'pane-registry'
12+
import { CreateContext, NewAppInstanceOptions } from './types'
2613

2714
/* newThingUI -- return UI for user to select a new object, folder, etc
2815
**
@@ -31,29 +18,33 @@ module.exports = {
3118
** (suppresses asking for a full URI or workspace)
3219
**
3320
*/
34-
function newThingUI (context, thePanes) {
35-
const dom = context.dom
36-
const div = context.div
37-
if (context.me && !context.me.uri) {
38-
throw new Error('newThingUI: Invalid userid: ' + context.me)
21+
export function newThingUI (
22+
createContext: CreateContext,
23+
dataBrowserContext: DataBrowserContext,
24+
thePanes: Array<PaneDefinition>
25+
): void {
26+
const dom = createContext.dom
27+
const div = createContext.div
28+
if (createContext.me && !createContext.me.uri) {
29+
throw new Error('newThingUI: Invalid userid: ' + createContext.me)
3930
}
4031

41-
var iconStyle = 'padding: 0.7em; width: 2em; height: 2em;' // was: 'padding: 1em; width: 3em; height: 3em;'
42-
var star = div.appendChild(dom.createElement('img'))
43-
var visible = false // the inividual tools tools
32+
const iconStyle = 'padding: 0.7em; width: 2em; height: 2em;' // was: 'padding: 1em; width: 3em; height: 3em;'
33+
const star = div.appendChild(dom.createElement('img'))
34+
let visible = false // the inividual tools tools
4435
// noun_272948.svg = black star
4536
// noun_34653_green.svg = green plus
46-
star.setAttribute('src', UI.icons.iconBase + 'noun_34653_green.svg')
37+
star.setAttribute('src', icons.iconBase + 'noun_34653_green.svg')
4738
star.setAttribute('style', iconStyle)
4839
star.setAttribute('title', 'Add another tool to the meeting')
4940

50-
var complain = function complain (message) {
51-
var pre = div.appendChild(dom.createElement('pre'))
41+
const complain = function complain (message) {
42+
const pre = div.appendChild(dom.createElement('pre'))
5243
pre.setAttribute('style', 'background-color: pink')
5344
pre.appendChild(dom.createTextNode(message))
5445
}
5546

56-
var selectNewTool = function (_event) {
47+
const selectNewTool = function (_event?) {
5748
visible = !visible
5849
star.setAttribute(
5950
'style',
@@ -64,60 +55,51 @@ function newThingUI (context, thePanes) {
6455

6556
star.addEventListener('click', selectNewTool)
6657

67-
function makeNewAppInstance (options) {
58+
function makeNewAppInstance (options: NewAppInstanceOptions) {
6859
return new Promise(function (resolve, reject) {
69-
var selectUI // , selectUIParent
60+
let selectUI // , selectUIParent
7061
function callbackWS (ws, newBase) {
71-
UI.authn.logInLoadProfile(context).then(
62+
logInLoadProfile(createContext).then(
7263
_context => {
73-
var newPaneOptions = {
64+
const newPaneOptions: NewPaneOptions = Object.assign({
7465
newBase: newBase,
7566
workspace: ws
76-
}
77-
for (var opt in options) {
78-
// get div, dom, me, folder, pane, refreshTable
79-
newPaneOptions[opt] = options[opt]
80-
}
81-
console.log(
82-
'newThingUI: Minting new ' +
83-
newPaneOptions.pane.name +
84-
' at ' +
85-
newPaneOptions.newBase
86-
)
87-
options.pane
88-
.mintNew(context, newPaneOptions)
67+
}, options)
68+
console.log(`newThingUI: Minting new ${newPaneOptions.pane.name} at ${newPaneOptions.newBase}`)
69+
options.pane.mintNew!(dataBrowserContext, newPaneOptions)
8970
.then(function (newPaneOptions) {
9071
if (!newPaneOptions || !newPaneOptions.newInstance) {
9172
throw new Error('Cannot mint new - missing newInstance')
9273
}
9374
if (newPaneOptions.folder) {
94-
var tail = newPaneOptions.newInstance.uri.slice(
75+
const tail = newPaneOptions.newInstance.uri.slice(
9576
newPaneOptions.folder.uri.length
9677
)
9778
const isPackage = tail.includes('/')
9879
console.log(' new thing is packge? ' + isPackage)
9980
if (isPackage) {
10081
kb.add(
10182
newPaneOptions.folder,
102-
UI.ns.ldp('contains'),
83+
ns.ldp('contains'),
10384
kb.sym(newPaneOptions.newBase),
10485
newPaneOptions.folder.doc()
10586
)
10687
} else {
10788
// single file
10889
kb.add(
10990
newPaneOptions.folder,
110-
UI.ns.ldp('contains'),
91+
ns.ldp('contains'),
11192
newPaneOptions.newInstance,
11293
newPaneOptions.folder.doc()
11394
) // Ping the patch system?
11495
}
11596
if (newPaneOptions.refreshTarget) {
116-
newPaneOptions.refreshTarget.refresh() // Refresh the cntaining display
97+
// @@ TODO Remove the need to cast as any
98+
;(newPaneOptions.refreshTarget as any).refresh() // Refresh the containing display
11799
}
118100
// selectUI.parentNode.removeChild(selectUI) It removes itself
119101
} else {
120-
var p = options.div.appendChild(dom.createElement('p'))
102+
const p = options.div.appendChild(dom.createElement('p'))
121103
p.setAttribute('style', 'font-size: 120%;')
122104
// Make link to new thing
123105
p.innerHTML =
@@ -148,47 +130,50 @@ function newThingUI (context, thePanes) {
148130
)
149131
} // callbackWS
150132

151-
var pa = options.pane
133+
const pa = options.pane
152134
options.appPathSegment = 'edu.mit.solid.pane.' + pa.name
153-
options.noun = pa.mintClass ? UI.utils.label(pa.mintClass) : pa.name
135+
options.noun = pa.mintClass ? utils.label(pa.mintClass) : pa.name
154136

155137
if (!options.folder) {
156138
// No folder given? Ask user for full URI
157-
selectUI = UI.authn.selectWorkspace(dom, options, callbackWS)
139+
selectUI = selectWorkspace(dom, {
140+
noun: options.noun,
141+
appPathSegment: options.appPathSegment
142+
}, callbackWS)
158143
options.div.appendChild(selectUI)
159144
// selectUIParent = options.div
160145
} else {
161-
var gotName = function (name) {
146+
const gotName = function (name) {
162147
if (!name) {
163148
// selectUIParent.removeChild(selectUI) itremves itself if cancelled
164149
selectNewTool() // toggle star to plain and menu vanish again
165150
} else {
166-
var uri = options.folder.uri
151+
let uri = options.folder!.uri
167152
if (!uri.endsWith('/')) {
168153
uri = uri + '/'
169154
}
170155
uri = uri + encodeURIComponent(name) + '/'
171156
callbackWS(null, uri)
172157
}
173158
}
174-
UI.widgets
159+
widgets
175160
.askName(
176161
dom,
177-
UI.store,
162+
kb,
178163
options.div,
179-
UI.ns.foaf('name'),
164+
ns.foaf('name'),
180165
null,
181166
options.noun
182167
)
183168
.then(gotName)
184-
// selectUI = getNameForm(dom, UI.store, options.noun, gotName)
169+
// selectUI = getNameForm(dom, kb, options.noun, gotName)
185170
// options.div.appendChild(selectUI)
186171
// selectUIParent = options.div
187172
}
188173
})
189174
} // makeNewAppInstance
190175

191-
const iconArray = []
176+
const iconArray: Array<HTMLElement> = []
192177
const mintingPanes = Object.values(thePanes).filter(pane => pane.mintNew)
193178
const mintingClassMap = mintingPanes.reduce((classMap, pane) => {
194179
if (pane.mintClass) {
@@ -197,12 +182,13 @@ function newThingUI (context, thePanes) {
197182
return classMap
198183
}, {})
199184
mintingPanes.forEach(pane => {
200-
const icon = context.div.appendChild(dom.createElement('img'))
185+
// @@ TODO Remove the need to cast to any
186+
const icon: any = createContext.div.appendChild(dom.createElement('img'))
201187
icon.setAttribute('src', pane.icon)
202188
const noun = pane.mintClass
203189
? mintingClassMap[pane.mintClass] > 1
204-
? `${UI.utils.label(pane.mintClass)} (using ${pane.name} pane)`
205-
: UI.utils.label(pane.mintClass)
190+
? `${utils.label(pane.mintClass)} (using ${pane.name} pane)`
191+
: utils.label(pane.mintClass)
206192
: pane.name + ' @@'
207193
icon.setAttribute('title', 'Make new ' + noun)
208194
icon.setAttribute('style', iconStyle + 'display: none;')
@@ -212,31 +198,32 @@ function newThingUI (context, thePanes) {
212198
selectTool(icon)
213199
makeNewAppInstance({
214200
event: e,
215-
folder: context.folder,
201+
folder: createContext.folder || null,
216202
iconEle: icon,
217203
pane,
218204
noun,
219205
noIndexHTML: true, // do NOT @@ for now write a HTML file
220-
div: context.div,
221-
me: context.me,
222-
dom: context.dom,
223-
refreshTarget: context.refreshTarget
206+
div: createContext.div,
207+
me: createContext.me,
208+
dom: createContext.dom,
209+
refreshTarget: createContext.refreshTarget
224210
})
225211
})
226212
}
227213
})
228214

229-
var styleTheIcons = function (style) {
230-
for (var i = 0; i < iconArray.length; i++) {
231-
var st = iconStyle + style
232-
if (iconArray[i].disabled) {
215+
const styleTheIcons = function (style) {
216+
for (let i = 0; i < iconArray.length; i++) {
217+
let st = iconStyle + style
218+
// @@ TODO Remove need to cast iconArray[i]
219+
if ((iconArray[i] as any).disabled) {
233220
// @@ unused
234221
st += 'opacity: 0.3;'
235222
}
236223
iconArray[i].setAttribute('style', st) // eg 'background-color: #ccc;'
237224
}
238225
}
239-
var selectTool = function (icon) {
226+
const selectTool = function (icon) {
240227
styleTheIcons('display: none;') // 'background-color: #ccc;'
241228
icon.setAttribute('style', iconStyle + 'background-color: yellow;')
242229
}
@@ -248,16 +235,16 @@ function newThingUI (context, thePanes) {
248235
//
249236
/*
250237
function getNameForm (dom, kb, classLabel, gotNameCallback) {
251-
var form = dom.createElement('div') // form is broken as HTML behaviour can resurface on js error
238+
const form = dom.createElement('div') // form is broken as HTML behaviour can resurface on js error
252239
form.innerHTML = '<p>Name of new ' + classLabel + ':</p>'
253-
var namefield = dom.createElement('input')
240+
const namefield = dom.createElement('input')
254241
namefield.setAttribute('type', 'text')
255242
namefield.setAttribute('size', '30')
256-
namefield.setAttribute('style', UI.style.textInputStyle)
243+
namefield.setAttribute('style', style.textInputStyle)
257244
namefield.setAttribute('maxLength', '2048') // No arbitrary limits
258245
namefield.select() // focus next user input
259246
260-
var gotName = function () {
247+
const gotName = function () {
261248
namefield.setAttribute('class', 'pendingedit')
262249
namefield.disabled = true
263250
continueButton.disabled = true
@@ -274,13 +261,13 @@ function getNameForm (dom, kb, classLabel, gotNameCallback) {
274261
275262
form.appendChild(dom.createElement('br'))
276263
277-
var cancel = form.appendChild(UI.widgets.cancelButton(dom))
264+
const cancel = form.appendChild(widgets.cancelButton(dom))
278265
cancel.addEventListener('click', function (e) {
279266
form.parentNode.removeChild(form)
280267
gotNameCallback(false)
281268
}, false)
282269
283-
var continueButton = form.appendChild(UI.widgets.continueButton(dom))
270+
const continueButton = form.appendChild(widgets.continueButton(dom))
284271
continueButton.addEventListener('click', function (e) {
285272
gotName()
286273
}, false)

‎src/create/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {
2+
newThingUI
3+
} from './create'
4+
5+
export const create = {
6+
newThingUI
7+
}

‎src/create/types.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { NamedNode } from 'rdflib'
2+
import { PaneDefinition } from 'pane-registry'
3+
4+
export type CreateContext = {
5+
div: HTMLElement
6+
dom: HTMLDocument
7+
folder?: NamedNode
8+
me: NamedNode
9+
refreshTarget?: HTMLTableElement
10+
statusArea: HTMLElement
11+
}
12+
13+
export interface NewAppInstanceOptions {
14+
appPathSegment?: string
15+
event: any
16+
folder: NamedNode | null
17+
iconEle: HTMLImageElement
18+
pane: PaneDefinition
19+
noun: string
20+
noIndexHTML: boolean
21+
div: HTMLElement,
22+
me: NamedNode,
23+
dom: HTMLDocument,
24+
refreshTarget?: HTMLTableElement
25+
}

‎src/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,7 @@ import * as rdf from 'rdflib' // pull in first avoid cross-refs
4242
import ns from './ns'
4343
import { acl, aclControl } from './acl/index'
4444
import { authn } from './authn/index'
45-
// @ts-ignore
46-
import create from './create'
45+
import { create } from './create/index'
4746
// @ts-ignore
4847
import icons from './iconBase'
4948
// @ts-ignore

0 commit comments

Comments
 (0)