# Recipe 说明文件
* CDN
* https://cdnjs.cloudflare.com/ajax/libs/*
* https://fonts.googleapis.com/css
* 分页面说明 （需要http-server启动）
* AUTH
* login
* create
* CREATE
* empty
* (gallery selection page =>) full *静态*
* recipe selection page + after search
* append / apply / replace popup
* add bgm page *静态*
* GALLERY
* view
* (create page, add images =>)selection *静态*
* UPLOAD
* (gallery page, add bundle =>)upload
*
**P.S. 在会议中修改或注明的部分 已用两颗✳️号在本文代码注释标明；会议后按列表更新部分用三颗✳️号在本文代码注释标明**
---
### 1 AUTH
#### 1.1 index.html + login.js
```
JSON: https://mockend.com/in-case-of/1222/users/10 （文档中有举例object）
```
*login*
```
/*login.js*/
// get 与查看合法性已有
// 以下为post内容
$.post('/login',hash).then(() =>
{window.location.href="./new-gallery-final.html"},
() => {
alert("登录失败，请重新登录")
})
```
#### 1.2 sign-up.html + create.js
*create account*
```
/*create.js*/
// 此处把 /register 改成我们的recipe pull 用户的地址
$.post('/register',hash).then((response) =>{console.log(response)},
(request) => {
let {errors} = request.responseJSON;
if(errors.enterusername && errors.enterusername === 'invalid'){
$('#RegisterForm').find('[name = "enterusername"]').siblings('.error').text('该用户已经存在。');
}
})
```
---
### 2 CREATE
#### 2.1 new-create-edit-0.html
*empty create page*
[](https://)
#### 2.2 new-create-edit-0-2.html （embeded js） + create-page-slider.js
*gif/video*
*编辑中的create page*
*是上一版静态文件保留了第一张图片*
```
<li class="nav-item"><a class="nav-link active d-flex justify-content-end align-content-center" href="#">gif</a></li>
<li class="nav-item"><a class="nav-link" href="#">video</a></li>
```
*编辑中的create page*
*是上一版静态文件保留了第一张图片*
```
// ** 大图方向确定正向
// ** 输入文本类型限制数字 未限制
// 规定时间轴内图盘最大张数的参数 maxlength
<textarea class="form-control form-control-xm " placeholder="3" maxlength="10"></textarea>
```
```
// 调整图片切换速度的参数 data-interval
// 1)
/* new-create-edit-0-2.html */
<div class="containerSlider" style="height: -2px;" data-interval="1"></div>
// 2)
/* create-page-slider.js */
var timer = setInterval(nextImage, 5);
var curImage = 0;
//edit number of images here
var numImages = 10;
```
*popup*
###### 生成api（同页面）create-pages-slider.js
#### 2.3.1 new-create-expand.html (embedded js)
*apply/append/replace recipe*
*跨域*
```
// embedded js 里有obj
JSON: data/recipe-lists.json
//选择recipe
$("#Recipes").click(function() {
$(this).replaceWith(this + '<p>selected</p>');
});
```
```
// *** 打印recipe date flow：
// Print recipe clicked
$('li').click(function() {
console.log(this);
})
// Print date and flow
function getDateAndFlow()
{
console.log(document.querySelector('input[id="hire-date"]').value);
console.log(document.querySelector('input[id="hire-date-1"]').value);
console.log(document.querySelector('select[id="subject"]').value)
}
// *** 对于未完成填充的网页alert
// alert if time input is empty or illegal
function dateHandler(){
if (document.querySelector('input[id="hire-date"]').value >= document.querySelector('input[id="hire-date-1"]').value)
{
alert("时间未填写或不合法！");
}
}
************************** CONSOLE ******************************
new-create-expand.html:141 2021-01-06
new-create-expand.html:142 2021-01-15
new-create-expand.html:143 0
new-create-expand.html:141 2021-01-06
new-create-expand.html:142 2021-01-15
new-create-expand.html:143 2
<如下图>
```
#### 2.3.2 new-create-expand-after-search.html (optional,看search api怎么使用)
```
// e.g.
<* new-create-expand.html *>
$('#Recipes').on('submit',(e) => {
e.preventDefault();
let hash = {};
let arg = ['searchField'];
arg.forEach((name) => {
let value = $('#Recipes').find(`[name= ${name}]`).val();
hash[name] = value;
})
hash['name'] = 'searchField';
if(hash['searchField'] === ''){
$('#Recipes').find('[name = "searchField"]').siblings('.error').text('no inputs');
alert("没有input");
return
}
else{
window.location.replace("./new-create-expand-after-search.html");
}
```
#### 2.4 new-BGM-page-1.html
*BGM lists*
*静态*
```
// JSON: data/bgm.json
{
"BGM":[
{
"Name": "data/music1.mp3",
},
{
"Name": "data/music2.mp3",
}
]
}
```
---
### 3 GALLERY
#### 3.1 new-gallery-final.html (embedded js) + popup.js
*gallery view*
```
JSON: data/gallery-view.json
{
// 注意"00001"是gallery page图片陈列的index而非group ID
"00001":[
{
"GroupID": "00003",
"Count": 16,
"KeyID": 7,
"KeyAddr": "00003_07.jpg",
"Addr":"data/00003_2.jpg"
},
{
"GroupID": "00003",
"Count": 16,
"KeyID": 7,
"KeyAddr": "00003_07.jpg",
"Addr":"data/00003_01.jpg"
},
{
"GroupID": "00003",
"Count": 16,
"KeyID": 7,
"KeyAddr": "00003_07.jpg",
"Addr":"data/00003_03.jpg"
}]
}
```
```
<script type="text/javascript">
// 为一组图片的parser
$.getJSON("data/gallery-view.json",function (result){
var setting = {
subject:'00001',
x : 2,
cardw : 30*2, //page card's width .
cardh : 40*2,
cardn : 7, //the number of visible page card .
margin : 2, //margin between cards .
JSON :result
};
$('#00001').slider(setting);
});
```
```
// *** 打印被选择的图片组div
// the img name when its div clicked
$('img').click(function() {
console.log(this);
})
```
*view images inside of a bundle after clicking*
#### 3.2 new-gallery-final-1.html
*在create page 按加号后的page*
*是上一版静态文件保留了第一行div*
---
### 4 UPLOAD
#### 4.1 gallery-up.html + upload.js
*upload multiple img/mv files*
*跨域*
```
// log例子如下 （从该图当下的console复制粘贴）
3*jpg <*成功*>
upload.js:161 FileList {0: File, 1: File, 2: File, length: 3}
upload.js:99 zip <*文件为zip遂失败*>
upload.js:161 FileList {0: File, 1: File, 2: File, length: 3}
upload.js:99 dmg <*文件为dmg遂失败*>
```
```
// 该图当下的FileList参数 （需要post给gallery page的json object）如下
FileList {0: File, 1: File, 2: File, length: 3}
0: File {name: "00001_00.jpg", lastModified: 1608889983055, lastModifiedDate: Fri Dec 25 2020 17:53:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 5871, …}
1: File {name: "00001_01.jpg", lastModified: 1608889998210, lastModifiedDate: Fri Dec 25 2020 17:53:18 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 5684, …}
2: File {name: "00001_02.jpg", lastModified: 1608890010934, lastModifiedDate: Fri Dec 25 2020 17:53:30 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 5868, …}
length: 3
__proto__: FileList
```
---
Sign in with Wallet
Connect another wallet