TypeScript h.ul方法代码示例

export function header() {
    return h.nav({className: 'header'}, [
        h.h1({}, [
            h.a({href: '/'}, ['Kiwibit'])
        ]),
        h.ul({}, [
            h.li({}, [
                h.a({href: 'foods-details'}, ['Food details'])
            ]),
            h.li({}, [
                h.a({href: 'top-foods'}, ['Top foods'])
            ]),
            h.li({}, [
                h.a({href: 'label-builder'}, ['Label builder'])
            ])
        ])
    ])
}

export function findFoodsModal() {
    const $foodGroupSelect = h.select({
        oninput: () => {
            findFoodsByNameAndGroup($foodNameInput.value, $foodGroupSelect.value)
            if (!$foodNameInput.value) {
                $foodNameInput.focus()
            }
        }
    }, [
        h.option({value: '', selected: true}, ['All food groups'])
    ])

    get<contract.FoodGroup[]>(`${serverUrl}/foods/groups`)
        .then(cats => {
            cats.forEach(cat => {
                $foodGroupSelect.appendChild(
                    h.option({value: cat.FdGrp_Cd}, [cat.FdGrp_Desc])
                )
            })
        })

    const $foodNameInput = h.input({
        type: 'search',
        className: 's1',
        placeholder: 'Enter at least 3 characters, e.g. "lentils cooked"',
        oninput: () => findFoodsByNameAndGroup($foodNameInput.value, $foodGroupSelect.value)
    })

    const $resultList = h.ul()

    const $modal = h.div({className: 'hidden find-foods-modal'}, [
        h.div({className: 'h box'}, [
            $foodGroupSelect,
            $foodNameInput,
            h.button({onclick: close, title: 'Close (Esc)'}, [icon('times')]),
        ]),
        $resultList
    ])

    function handleEsc(evt: KeyboardEvent) {
        if (evt.key === 'Escape') {
            close()
        }
    }

    function open() {
        $modal.classList.remove('hidden')
        $foodNameInput.focus()
        document.addEventListener('keydown', handleEsc)
    }

    function close() {
        $modal.classList.add('hidden')
        $foodNameInput.value = ''
        document.removeEventListener('keydown', handleEsc)
    }

    function findFoodsByNameAndGroup(name: string, groupId: string) {
        if (name.length <= 2) {
            return
        }

        const urlName = 'name=' + name.replace(/\s/g, '%')
        const urlGroupId = groupId ? '&groupId=' + groupId : ''

        get<contract.FoundFood[]>(`${serverUrl}/foods/search?${urlName}${urlGroupId}`)
            .then(foods => {
                $resultList.innerHTML = ''

                if (foods.length === 0) {
                    $resultList.appendChild(
                        h.li({className: 'no-results'}, ['No results.'])
                    )
                    return
                }

                foods.forEach(food => $resultList.appendChild(
                    h.li({}, [
                        foodGroupCircle(food),
                        h.a({href: 'index.html?id=' + food.NDB_No}, [food.Long_Desc])
                    ])
                ))
            })
    }

    return Object.assign($modal, {open})
}

.then(([rdis, foodDetails]) => {
    title(foodDetails.Long_Desc)

    const extendedRdis = rdis
        .map(rdi => {
            const nutr = foodDetails.nutrients.find(nutr => nutr.NutrDesc === rdi.NutrDesc)
            return !nutr ? undefined : {
                ...rdi,
                ...nutr,
                pct: pct(nutr.Nutr_Val, rdi.value)
            }
        })
        .filter(pct => pct !== undefined) as ExtendedRdi[]

    const overallPct = pct(
        extendedRdis.map(rdi => Math.min(rdi.pct, 100)).reduce(add, 0),
        100 * extendedRdis.length
    )

    const $sortByNameBtn = h.a({
        title: 'Sort nutrients alphabetically',
        onclick: () => renderNutrientsSortedByName()
    }, [icon('sort-alpha-down')])

    const $sortByPctBtn = h.a({
        title: 'Sort nutrients by RDI coverage',
        onclick: () => renderNutrientsSortedByPct()
    }, [icon('sort-amount-down')])

    const $nutrientList = h.ul({})

    if ((localStorage.getItem('nutrients_order') || 'alpha') === 'alpha') {
        renderNutrientsSortedByName()
    } else {
        renderNutrientsSortedByPct()
    }

    const $foodDetails = h.div({className: 'food-details'}, [
        h.h1({}, [
            foodGroupCircle(foodDetails),
            foodDetails.Long_Desc,
            h.output({}, [
                h.span({title: 'Overall percentage of nutrients covered by 100 grams of this food'}, [overallPct.toFixed(2) + nbsp + '%']),
                ', ',
                100 + nbsp + 'g'
            ]),
            h.a({
                href: 'https://www.google.com/search?tbm=isch&q=' + encodeURIComponent(foodDetails.Long_Desc),
                title: 'See in Google Images'
            }, [icon('images')]),
            h.a({
                onclick: () => $findFoodsModal.open(),
                title: 'Find details of a different food'
            }, [icon('search')]),
            $sortByNameBtn,
            $sortByPctBtn,
            clear()
        ]),
        $nutrientList
    ])

    document.body.appendChild($foodDetails)

    function renderNutrientsSortedByName() {
        localStorage.setItem('nutrients_order', 'alpha')
        $sortByPctBtn.classList.remove('disabled')
        $sortByNameBtn.classList.add('disabled')
        $nutrientList.innerHTML = ''
        extendedRdis
            .sort((a, b) => {
                const nameA = a.display_name || a.NutrDesc
                const nameB = b.display_name || b.NutrDesc
                return nameA > nameB ? 1 : -1
            })
            .forEach(rdi => $nutrientList.appendChild(nutrientItem(rdi)))
    }

    function renderNutrientsSortedByPct() {
        localStorage.setItem('nutrients_order', 'pct')
        $sortByPctBtn.classList.add('disabled')
        $sortByNameBtn.classList.remove('disabled')
        $nutrientList.innerHTML = ''
        extendedRdis
            .sort((a, b) => a.pct > b.pct ? -1 : 1)
            .forEach(rdi => $nutrientList.appendChild(nutrientItem(rdi)))
    }
})

            onclick: () => {
                Array
                    .from(foodSelect.options)
                    .filter(opt => opt.selected)
                    .forEach(opt => {
                        for (let i = 0; i < selectedFoods.length; ++i) {
                            if (selectedFoods[i].ndb_no === opt.value) {
                                return;
                            }
                        }

                        selectedFoods.push({
                            ndb_no: opt.value,
                            long_desc: opt.textContent!
                        })
                        selectedFoodList.appendChild(h.li({}, [opt.textContent!]))
                    })
            }
        }, ['Add']),
    ]),
    foodSelect
])

const selectedFoodList = h.ul()

document.body.appendChild(header())
document.body.appendChild(h.div({className: 'container padded'}, [
    foodSelector,
    selectedFoodList
]))

import {h} from '@soil/dom'
import {icon} from '../shared/dom/icon'

const page = h.div({className: 'page'}, [
    h.h1({className: 'main-title'}, ['Your profile']),
    h.form({}, [
        h.ul({className: 'field-list'}, [
            h.li({}, [
                h.label({htmlFor: 'field-age'}, ['Age']),
                h.input({id: 'field-age', type: 'number', min: '0', max: '150'})
            ]),
            h.li({}, [
                h.label({htmlFor: 'field-gender'}, ['Gender']),
                h.select({id: 'field-gender'}, [
                    h.option({value: 'M'}, ['Male']),
                    h.option({value: 'F'}, ['Female'])
                ])
            ])
        ]),
        h.hr(),
        h.button({onclick: () => save()}, [icon('save'), 'Save'])
    ])
])

function save() {
    // TODO
    console.log('Saving...')
}

document.body.appendChild(page)

//         for (let i = 0; i < optionsData.length; ++i) {
//             const option = document.createElement('option')
//             option.value = optionsData[i].value
//             option.text = optionsData[i].text
//             optionsFragment.appendChild(option)
//         }
//         select.appendChild(optionsFragment)
//     }
// }

// const _foodGroupSelect = document.createElement('select')
// html.addOptionsToSelect(_foodGroupSelect, [
//     {value: 'beverages', text: 'Beverages'}
// ])

const foodList = h.ul({className: 'food-list'})

function fillFoodList(foods: BasicFood[]) {
    foodList.innerHTML = ''

    foods
        .map(f => h.li({}, [
            h.span({
                tabIndex: 0,
                style: {cursor: 'pointer'},
                onclick: () => showFoodDetails(f.ndb_no),
                onkeydown: evt => {
                    if (evt.key === 'Enter') {
                        showFoodDetails(f.ndb_no)
                    }
                }