Skip to content

Instantly share code, notes, and snippets.

@hakatashi hakatashi/web11.html
Last active Nov 4, 2016

Embed
What would you like to do?
TSG 第11回Web分科会 参考実装
<!DOCTYPE html>
<html>
<head>
<title>Ajax Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
<script>
const escapeHtml = (string) => {
return string
.toString()
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
};
const template = ({url = '', imageUrl = '', title = '', date = '201-11-02', views = 0}) => `
<div class="ui card">
<div class="image">
<img src="${escapeHtml(imageUrl)}">
</div>
<div class="content">
<a class="header" href="${escapeHtml(url)}">${escapeHtml(title)}</a>
</div>
<div class="extra content">
<a class="right floated created">${escapeHtml(date)}</a>
<a class="views"><i class="users icon"></i>${escapeHtml(views)}</a>
</div>
</div>
`;
const render = (photos) => {
document.getElementById('result').innerHTML += photos.map(photo => template({
url: photo.url,
imageUrl: photo.image_url,
title: photo.photo_title,
date: photo.date,
views: photo.view_num,
})).join('');
};
let loadedPhotos = 0;
let searchText = '';
let fetching = false;
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('search-button').addEventListener('click', () => {
if (fetching) {
return;
}
searchText = document.getElementById('search-text').value;
loadedPhotos = 0;
fetching = true;
document.getElementById('result').innerHTML = '';
fetch('http://photozou.hakatashi.com/rest/search_public.json?' + $.param({keyword: searchText}))
.then(response => response.json())
.then(data => {
render(data.info.photo);
loadedPhotos += data.info.photo.length;
fetching = false;
});
});
});
document.addEventListener('scroll', event => {
if (fetching) {
return;
}
const scrollableHeight = document.body.scrollHeight - document.body.clientHeight;
const scrollTop = document.body.scrollTop;
if (scrollTop >= scrollableHeight && searchText !== '') {
fetching = true;
fetch('http://photozou.hakatashi.com/rest/search_public.json?' + $.param({keyword: searchText, offset: loadedPhotos}))
.then(response => response.json())
.then(data => {
render(data.info.photo);
loadedPhotos += data.info.photo.length;
fetching = false;
});
}
});
</script>
</head>
<body>
<div class="ui container">
<h1 style="margin-top: 2em">TSG Photo Searcher</h1>
<div class="ui action left icon input">
<i class="search icon"></i>
<input id="search-text" type="text" name="name">
<button id="search-button" class="ui button">Search</button>
</div>
<div style="margin-top: 3em">
<div id="result" class="ui four cards">
<!-- ここにデータを突っ込む -->
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.