How to use the @hyperapp/html.div function in @hyperapp/html
To help you get started, we’ve selected a few @hyperapp/html examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
jc21 / docker-registry-ui / src / frontend / js / routes / image.js View on Github 
}
if (refresh) {
view.push(span({class: 'loader'}));
actions.fetchImage(image_id);
}
return div(
Nav(state.status.config.REGISTRY_STORAGE_DELETE_ENABLED),
div({class: 'my-3 my-md-5'},
div({class: 'container'}, view)
),
// Delete modal
append_delete_model ? Modal(
div({class: 'modal-dialog'},
div({class: 'modal-content'}, [
div({class: 'modal-header text-left'},
h4({class: 'modal-title'}, 'Confirm Delete')
),
div({class: 'modal-body'},
p('Are you sure you want to delete this image and tag' + (image.data.tags.length === 1 ? '' : 's') + '?')
),
div({class: 'modal-footer'}, [
button({
class: 'btn btn-danger',
type: 'button',
onclick: actions.deleteImageClicked,
'data-image_id': image_id,
'data-digest': digest
}, 'Yes I\'m sure'),
button({class: 'btn btn-default', type: 'button', 'data-dismiss': 'modal'}, 'Cancel')
])actions.fetchImage(image_id);
}
return div(
Nav(state.status.config.REGISTRY_STORAGE_DELETE_ENABLED),
div({class: 'my-3 my-md-5'},
div({class: 'container'}, view)
),
// Delete modal
append_delete_model ? Modal(
div({class: 'modal-dialog'},
div({class: 'modal-content'}, [
div({class: 'modal-header text-left'},
h4({class: 'modal-title'}, 'Confirm Delete')
),
div({class: 'modal-body'},
p('Are you sure you want to delete this image and tag' + (image.data.tags.length === 1 ? '' : 's') + '?')
),
div({class: 'modal-footer'}, [
button({
class: 'btn btn-danger',
type: 'button',
onclick: actions.deleteImageClicked,
'data-image_id': image_id,
'data-digest': digest
}, 'Yes I\'m sure'),
button({class: 'btn btn-default', type: 'button', 'data-dismiss': 'modal'}, 'Cancel')
])
])
),
// onclose function
function () {export default (show_delete) => {
let selected = 'images';
if (window.location.hash.substr(0, 14) === '#/instructions') {
selected = 'instructions';
}
return div({class: 'header collapse d-lg-flex p-0', id: 'headerMenuCollapse'},
div({class: 'container'},
div({class: 'row align-items-center'},
div({class: 'col-lg order-lg-first'}, [
ul({class: 'nav nav-tabs border-0 flex-column flex-lg-row'}, [
li({class: 'nav-item'},
Link({class: 'nav-link' + (selected === 'images' ? ' active' : ''), to: '/'}, [
i({class: 'fe fe-box'}),
'Images'
])
),
li({class: 'nav-item'}, [
a({class: 'nav-link' + (selected === 'instructions' ? ' active' : ''), href: 'javascript:void(0)', 'data-toggle': 'dropdown'}, [
i({class: 'fe fe-feather'}),
'Instructions'
]),
div({class: 'dropdown-menu dropdown-menu-arrow'}, [
Link({class: 'dropdown-item', to: '/instructions/pulling'}, 'Pulling'),
Link({class: 'dropdown-item', to: '/instructions/pushing'}, 'Pushing'),
show_delete ? Link({class: 'dropdown-item', to: '/instructions/deleting'}, 'Deleting') : nullexport default (tag, config) => {
let total_size = 0;
if (typeof tag.layers !== 'undefined' && tag.layers) {
tag.layers.map(layer => total_size += layer.size);
total_size = total_size / 1024 / 1024;
total_size = total_size.toFixed(0);
}
let domain = config.REGISTRY_DOMAIN || window.location.hostname;
return div({class: 'card tag-card'}, [
div({class: 'card-header'},
h3({class: 'card-title'}, tag.name)
),
div({class: 'card-alert alert alert-secondary mb-0 pull-command'},
'docker pull ' + domain + '/' + tag.image_name + ':' + tag.name
),
div({class: 'card-body'},
div({class: 'row'}, [
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Image ID'),
p(Utils.getShortDigestId(tag.config.digest))
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Author'),
p(tag.info.author)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Docker Version'),
p(tag.info.docker_version)
]),export default (tag, config) => {
let total_size = 0;
if (typeof tag.layers !== 'undefined' && tag.layers) {
tag.layers.map(layer => total_size += layer.size);
total_size = total_size / 1024 / 1024;
total_size = total_size.toFixed(0);
}
let domain = config.REGISTRY_DOMAIN || window.location.hostname;
return div({class: 'card tag-card'}, [
div({class: 'card-header'},
h3({class: 'card-title'}, tag.name)
),
div({class: 'card-alert alert alert-secondary mb-0 pull-command'},
'docker pull ' + domain + '/' + tag.image_name + ':' + tag.name
),
div({class: 'card-body'},
div({class: 'row'}, [
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Image ID'),
p(Utils.getShortDigestId(tag.config.digest))
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Author'),
p(tag.info.author)
]),
div({class: 'col-lg-3 col-sm-6'}, [div({class: 'card-body'},
div({class: 'row'}, [
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Image ID'),
p(Utils.getShortDigestId(tag.config.digest))
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Author'),
p(tag.info.author)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Docker Version'),
p(tag.info.docker_version)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Size'),
p(total_size ? total_size + ' mb' : 'Unknown')
])
])
)
]);
})
]);
} else {
content = TableCard([
'Name',
'Tags'
], {
name: {manipulator: Manipulators.imageName()},
tags: {manipulator: Manipulators.joiner(', ')}
}, state.repos);
}
return div(
Nav(state.status.config.REGISTRY_STORAGE_DELETE_ENABLED),
div({class: 'my-3 my-md-5'},
div({class: 'container'}, content)
),
p({class: 'text-center'},
a({
class: 'btn btn-link text-faded', onclick: function () {
actions.bootstrap();
}
}, 'Refresh')
)
);
}export default (show_delete) => {
let selected = 'images';
if (window.location.hash.substr(0, 14) === '#/instructions') {
selected = 'instructions';
}
return div({class: 'header collapse d-lg-flex p-0', id: 'headerMenuCollapse'},
div({class: 'container'},
div({class: 'row align-items-center'},
div({class: 'col-lg order-lg-first'}, [
ul({class: 'nav nav-tabs border-0 flex-column flex-lg-row'}, [
li({class: 'nav-item'},
Link({class: 'nav-link' + (selected === 'images' ? ' active' : ''), to: '/'}, [
i({class: 'fe fe-box'}),
'Images'
])
),
li({class: 'nav-item'}, [
a({class: 'nav-link' + (selected === 'instructions' ? ' active' : ''), href: 'javascript:void(0)', 'data-toggle': 'dropdown'}, [
i({class: 'fe fe-feather'}),
'Instructions'
]),
div({class: 'dropdown-menu dropdown-menu-arrow'}, [
Link({class: 'dropdown-item', to: '/instructions/pulling'}, 'Pulling'),export default (show_delete) => {
let selected = 'images';
if (window.location.hash.substr(0, 14) === '#/instructions') {
selected = 'instructions';
}
return div({class: 'header collapse d-lg-flex p-0', id: 'headerMenuCollapse'},
div({class: 'container'},
div({class: 'row align-items-center'},
div({class: 'col-lg order-lg-first'}, [
ul({class: 'nav nav-tabs border-0 flex-column flex-lg-row'}, [
li({class: 'nav-item'},
Link({class: 'nav-link' + (selected === 'images' ? ' active' : ''), to: '/'}, [
i({class: 'fe fe-box'}),
'Images'
])
),
li({class: 'nav-item'}, [
a({class: 'nav-link' + (selected === 'instructions' ? ' active' : ''), href: 'javascript:void(0)', 'data-toggle': 'dropdown'}, [
i({class: 'fe fe-feather'}),
'Instructions'
]),
div({class: 'dropdown-menu dropdown-menu-arrow'}, []);
} else {
content = TableCard([
'Name',
'Tags'
], {
name: {manipulator: Manipulators.imageName()},
tags: {manipulator: Manipulators.joiner(', ')}
}, state.repos);
}
return div(
Nav(state.status.config.REGISTRY_STORAGE_DELETE_ENABLED),
div({class: 'my-3 my-md-5'},
div({class: 'container'}, content)
),
p({class: 'text-center'},
a({
class: 'btn btn-link text-faded', onclick: function () {
actions.bootstrap();
}
}, 'Refresh')
)
);
}
