TypeScript h.div方法代码示例

function renderNoFoodScreen() {
    document.body.appendChild(
        h.div({className: 'no-food'}, [
            h.p({}, [
                foodId
                    ? `No food exists with id ${foodId}. Try finding another food.`
                    : 'No food id was present in the URL. Look for some food.'
            ]),
            h.a({
                onclick: () => $findFoodsModal.open(),
                title: 'Find details of some food'
            }, [
                icon('search')
            ])
        ])
    )
}

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})
}

        title(`Top foods high in ${nutrient.display_name || nutrient.NutrDesc}`)
    }
})

const $unitParamSelect = h.select({
    className: 's1',
    onchange: () => reload($nutrientSelect.value, $unitParamSelect.value as api.NutrientReferenceUnit)
}, [
    h.option({value: 'gram'}, ['Per 100 grams']),
    h.option({value: 'calory'}, ['Per 100 calories'])
])

// TODO $nutrientSelect.value = ''
$unitParamSelect.value = urlUnit

const $chartWrapper = h.div({className: 'chart-wrapper hidden'})

const $chart = Highcharts.chart($chartWrapper, {
    chart: {type: 'bar'},
    title: {text: null},
    xAxis: {
        type: 'category',
        labels: {
            style: {color: '#333', fontSize: '13px'}
        }
    },
    yAxis: {title: {text: null}},
    tooltip: {
        headerFormat: '',
        pointFormat: `<b>{point.Nutr_Val:.2f}\u2009{point.Units}</b> / {point.Long_Desc} ({point.FdGrp_Desc})`
    },

.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)))
    }
})

const foodSelector = h.div({className: 'food-selector'}, [
    h.div({className: 'top-controls'}, [
        h.input({
            type: 'search',
            placeholder: 'Find foods (at least 3 characters)',
            oninput: evt => {
                const text = (evt.target as h.Input).value
                if (text.length <= 2) {
                    foodSelect.innerHTML = ''
                    foodSelect.appendChild(foodSelectPlaceholderOption)
                    return
                }

                get('/find-foods/' + text)
                    .then((foods: BasicFood[]) => {
                        foodSelect.innerHTML = ''
                        foods
                            .map(f => h.option({value: f.ndb_no}, [f.long_desc]))
                            .forEach(opt => foodSelect.appendChild(opt))
                    })
            }
        }),
        h.button({
            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
])

export function clear() {
    return h.div({style: {clear: 'both'}})
}

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)

        .then((data: FoodDetails) => {
            const details = h.dl({}, [
                h.dt({}, ['Food group']),
                h.dd({}, [data.fdgrp_desc]),
                h.dt({}, ['Common name']),
                h.dd({}, [data.long_desc + (data.comname ? ` (${data.comname})` : '')]),
                h.dt({}, ['Scientific name']),
                h.dd({}, [data.sciname || nbsp]),
                h.dt({}, ['Inedible']),
                h.dd({}, [(data.refuse || 0) + '%']),
                h.dt({}, ['Inedible parts']),
                h.dd({}, [data.ref_desc || nbsp]),
                h.dt({}, ['Manufacturer']),
                h.dd({}, [data.manufacname || nbsp])
            ])

            const nutrition = h.table({}, [
                h.thead({}, [
                    h.tr({}, [
                        h.th({}, ['Nutrient']),
                        h.th({}, ['Value']),
                        h.th({}, ['Minimum']),
                        h.th({}, ['Maximum']),
                        h.th({}, [
                            h.abbr({title: 'Added for fortification or enrichment'}, ['Added'])
                        ])
                    ]),
                ]),
                h.tbody({}, data.nutrition.map(nut => h.tr({}, [
                    h.td({}, [nut.nutrdesc]),
                    h.td({}, [nut.nutr_val + ' ' + nut.units]),
                    h.td({}, [nut.min + ' ' + nut.units]),
                    h.td({}, [nut.max + ' ' + nut.units]),
                    h.td({}, [nut.add_nutr_mark ? 'Yes' : 'No'])
                ])))
            ])

            const sources = h.table({style: {marginBottom: '20px'}}, [
                h.thead({}, [
                        h.tr({}, [
                        h.th({}, ['Title']),
                        h.th({}, ['Authors']),
                        h.th({}, ['Journal']),
                        h.th({}, ['Year'])
                    ]),
                ]),
                h.tbody({}, data.sources.map(src => h.tr({}, [
                    h.td({}, [src.title]),
                    h.td({}, [src.authors]),
                    h.td({}, [src.journal]),
                    h.td({}, [src.year])
                ])))
            ])

            const modal = h.div({className: 'overlay', onclick: () => removeModal()}, [
                h.div({className: 'padded modal', onclick: evt => evt.stopPropagation()}, [
                    h.h2({}, ['Details']),
                    details,
                    h.div({style: {clear: 'both'}}),
                    h.h2({}, ['Nutrition facts']),
                    nutrition,
                    h.h2({}, ['Sources']),
                    sources
                ])
            ])

            document.body.appendChild(modal)

            window.addEventListener('keydown', handleEscape)

            function handleEscape(evt: KeyboardEvent) {
                if (evt.key === 'Escape') {
                    removeModal()
                }
            }

            function removeModal() {
                modal.remove()
                window.removeEventListener('keydown', handleEscape)
            }
        })

                    nutrition,
                    h.h2({}, ['Sources']),
                    sources
                ])
            ])

            document.body.appendChild(modal)

            window.addEventListener('keydown', handleEscape)

            function handleEscape(evt: KeyboardEvent) {
                if (evt.key === 'Escape') {
                    removeModal()
                }
            }

            function removeModal() {
                modal.remove()
                window.removeEventListener('keydown', handleEscape)
            }
        })
}

document.body.appendChild(header())
document.body.appendChild(h.div({className: 'padded'}, [
    $foodGroupSelect,
    foodList
]))

$foodGroupSelect.focus()