html 橙色测试日演示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 橙色测试日演示相关的知识，希望对你有一定的参考价值。
const $cards = document.querySelector('#cards')
const $file = document.querySelector('[type="file"]')
const $form = document.querySelector('#form')
const $tags = document.querySelector('#tags')
const $progress = document.querySelector('.progress')
const UNSECURE_PATTERN = /^http:\/\/|^\/\//
const securize = (url, forceHttps) => url.replace(UNSECURE_PATTERN, 'https://')
const thumnail = ({ url, metadata }) => securize((metadata['thumb-500'] && metadata['thumb-500'].url) || url.url)
const chipTemplate = (tag) => `<div class="chip" data-tag="${tag}"></div>`
const cardTemplate = ({ name, url, metadata, tags } = {}) => `
<div card-name="${name}" class="col s6 m4">
<div class="card">
<div class="card-image">
<a href="${url.url}" target="_blank">
<img src="${thumnail({ url, metadata })}" class="center-cropped">
</a>
</div>
<div class="card-action">
${tags.map(chipTemplate).join('')}
</div>
</div>
</div>
`
const upload = ({ file, url, httpMethod, guid, tags }) => {
return $.ajax({
url: securize(url),
method: httpMethod,
contentType: false,
processData: false,
data: file,
headers: {
'Content-Type': file.type
}
})
}
const render = (cards) => $cards.innerHTML = cards.map(cardTemplate).join('')
const client = new ZetaPush.Client({
sandboxId: 'qOFdwGSn',
authentication() {
return ZetaPush.Authentication.simple({
login: 'demo',
password: 'demo'
})
}
})
const fs = client.createService({
Type: ZetaPush.services.Zpfs_hdfs,
listener: {
updateMeta({ data }) {
document.querySelector(`[card-name="${data.name}"] img`).src = thumnail(data)
}
}
})
const api = client.createService({
Type: ZetaPush.services.Macro,
listener: {
error(message) {
console.error('error', message)
},
addFile({ data: { result } }) {
$progress.classList.add('hide')
api.call({ name: 'listFiles' })
},
deleteFile({ data: { result } }) {
api.call({ name: 'listFiles' })
},
listFiles({ data: { result } }) {
const cards = result.listing.entries.content
render(cards)
},
searchFiles({ data: { result } }) {
const cards = result.items.content.map(({ data }) => data)
render(cards)
},
uploadFile({ data: { result } }) {
const file = $file.files[0]
const { url, httpMethod, guid } = result.upload
const tags = $tags.value ? $tags.value.split(' ') : []
upload({ file, url, httpMethod, guid, tags }).then(() => {
$form.reset()
api.call({ name: 'addFile', parameters: { guid, tags } })
})
}
}
})
client.onConnectionEstablished(() => {
api.call({ name: 'listFiles' })
})
client.connect()
$form.addEventListener('submit', (event) => {
event.preventDefault()
$progress.classList.remove('hide')
api.call({ name: 'uploadFile' })
})
$('main').on('click', '[data-tag]', (event) => {
api.call({ name: 'searchFiles', parameters: { tags: [ event.target.dataset.tag ] } })
})
$(window).on('keyup', ({ key }) => {
if (key === 'Escape') {
api.call({ name: 'listFiles' })
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Demo</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<style>nav { background-color: #26a69a; } main { height: calc(100vh - 64px); overflow-y: auto; } .center-cropped { height: 250px; object-fit: cover; object-position: center; } [data-tag]::before { content: attr(data-tag) }</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="https://unpkg.com/zetapush-js@3.0.0-alpha.3/dist/zetapush.min.js"></script>
</head>
<body>
<nav>
<div class="nav-wrapper">
<span class="brand-logo"><i class="material-icons">cloud_upload</i>Flickr</span>
</div>
</nav>
<main>
<form id="form" class="row">
<div class="file-field input-field col m4 s12">
<div class="btn">
<span>File</span>
<input type="file" accept="image/*" required>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field col m4 s12">
<input id="tags" type="text" class="validate" required>
<label class="active" for="tags">Tags</label>
</div>
<div class="input-field col m4 s12">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
<div class="progress hide">
<div class="indeterminate"></div>
</div>
</form>
<div id="cards" class="row"></div>
</main>
<script src="utils.js"></script>
<script src="index.js"></script>
</body>
</html>
以上是关于html 橙色测试日演示的主要内容，如果未能解决你的问题，请参考以下文章
我想知道如何阅读 galen 框架报告生成的图像映射以进行布局测试。橙色、绿色、红色的颜色是啥意思？