mirror of
https://github.com/twirl/The-API-Book.git
synced 2025-05-13 21:26:26 +02:00
85 lines
3.0 KiB
HTML
85 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>
|
||
|
|
“The API” book by Sergey Konstantinov. Examples to the “Decomposing
|
||
|
|
UI Components” chapter.
|
||
|
|
</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="../fonts.css" />
|
||
|
|
<style>
|
||
|
|
body > ul {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
body > ul > li {
|
||
|
|
list-style-type: node;
|
||
|
|
margin: 0;
|
||
|
|
padding: 5px;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 320px;
|
||
|
|
border: 1px solid gray;
|
||
|
|
border-collapse: collapse;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
window.onload = () => {
|
||
|
|
const dummySearchApi = {
|
||
|
|
search: () => ({
|
||
|
|
results: [
|
||
|
|
{
|
||
|
|
offer_id: '1',
|
||
|
|
title: 'Cafe “Chamomile”',
|
||
|
|
subtitle: '200m · 2 min',
|
||
|
|
coffee_chain: {
|
||
|
|
id: 'chamomile_chain',
|
||
|
|
logo: './logo.png'
|
||
|
|
},
|
||
|
|
recipe: {
|
||
|
|
id: 'lungo'
|
||
|
|
},
|
||
|
|
place: {
|
||
|
|
location: [0, 0]
|
||
|
|
},
|
||
|
|
offer_details: {
|
||
|
|
description: `It's our best Lungo.
|
||
|
|
Smart SDK developers always choose Cafe “Chamomile” lungo!`
|
||
|
|
},
|
||
|
|
pricing: {
|
||
|
|
price: '37',
|
||
|
|
currency: 'USD',
|
||
|
|
formatted_price: '$37'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
};
|
||
|
|
|
||
|
|
const examples = document.querySelectorAll('.example');
|
||
|
|
for (const example of examples) {
|
||
|
|
const preview = example.querySelector('.example-preview');
|
||
|
|
const code = example.querySelector('.code').innerHTML;
|
||
|
|
let Class;
|
||
|
|
eval(`Class = ${code}`);
|
||
|
|
const instance = Class.build(preview, dummySearchApi);
|
||
|
|
instance.setSearchPhrase('lungo');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>
|
||
|
|
Examples of Overriding Different Aspects of a Decomposed UI
|
||
|
|
Component
|
||
|
|
</h1>
|
||
|
|
<ul>
|
||
|
|
<li class="example">
|
||
|
|
<h2>Example #1: A regular <code>SearchBox</code></h2>
|
||
|
|
<h3>Preview:</h3>
|
||
|
|
<div class="example-preview"></div>
|
||
|
|
<h3>Source code:</h3>
|
||
|
|
<pre class="code"></pre>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</body>
|
||
|
|
</html>
|