m5/m5-docs
0
0
Fork 0
mirror of https://github.com/m5stack/m5-docs.git synced 2026-05-20 10:23:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

add scrollFunc and product search

Browse Source
This commit is contained in:
shaoxiang
2019-10-10 16:59:42 +08:00
parent cafce7b6f3
commit c1c63ab01c
4 changed files with 1124 additions and 874 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/css/main.css
+97 -43
View File
@@ -16,19 +16,6 @@
}
/* en */
/* body[data-page="index.md"] article.markdown-section {
max-width: 80%;
margin-top: 50px;
} */
/* body[data-page="index.md"] article.markdown-section {
max-width: 80%;
margin-top: 50px;
} */
body[data-page="zh_CN/uiflow/uiflow_home_page.md"] article.markdown-section {
max-width: 100%;
@@ -108,23 +95,6 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
}
/* zh_CN */
/* body[data-page="zh_CN/README.md"] article.markdown-section {
max-width: 80%;
margin-top: 50px;
}
body[data-page="zh_CN/README.md"] article.markdown-section .item {
width: 150px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
position: relative;
transition: box-shadow 0.3s;
} */
.item a {
color: black;
@@ -136,12 +106,6 @@ body[data-page="zh_CN/README.md"] article.markdown-section .item {
}
/* body[data-page="zh_CN/README.md"] article.markdown-section p.item-title {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
} */
.dropdown{
display: inline-block;
}
@@ -282,7 +246,7 @@ div.card-img-overlay:hover {
}
.d-flex {
z-index: 9999;
z-index: 1000;
position: fixed;
top: 0;
right: 0;
@@ -293,12 +257,66 @@ div.card-img-overlay:hover {
display: none;
}
.back_top {
position: fixed;
right: 150px;
bottom: 150px;
.pc-navigation {
position:fixed;
top:20%;
left:5%;
}
.mb-navigation {
display: none;
}
.product_page {
margin-left:125px;
margin-top:55px;
}
.search{
display: none;
position: fixed;
z-index: 1001;
top: 20px;
left: 18%;
height: 56px;
line-height: 0px;
padding: 0 20px;
}
.search input{
border-radius: 40px;
border: 0;
outline: none;
background: #eee;
width: 240px;
height: 38px;
padding: 0 0 0 20px;
}
.search .search-btn {
position: absolute;
top: 10px;
right: 40px;
border-radius: 100px;
width: 30px;
height: 30px;
}
.search i {
position: absolute;
top: 6px;
right: 7px;
font-size: 18px;
}
body[data-page="index.md"] .search {
display: inline-block;
}
body[data-page="zh_CN/README.md"] .search {
display: inline-block;
}
@media screen and (max-width: 768px) {
.d-flex {
display: none !important;
@@ -310,7 +328,7 @@ div.card-img-overlay:hover {
right: 0;
width: 50%;
background-color: white;
z-index: 9999;
z-index: 1000;
left: inherit;
}
.d-flex.open>h5 {
@@ -326,7 +344,7 @@ div.card-img-overlay:hover {
top: 0;
width: 50px;
height: 50px;
z-index: 9999;
z-index: 1000;
}
.btn-toggle::before,
.btn-toggle::after {
@@ -394,6 +412,42 @@ div.card-img-overlay:hover {
.uiflow_p{
height: auto;
}
.pc-navigation {
display: none;
}
.product_page {
margin-left:0px;
margin-top:0px;
}
.mb-navigation {
z-index: 9999;
position: fixed;
top: 0px;
left: 0px;
right: 50px;
height: 50px;
color: #343a40;
border-radius: 0;
background: white;
line-height: inherit;
display: block;
box-shadow: -12px -1px 10px #888888;
}
.nav-content {
position: fixed;
top:50px;
left:0px;
right:0px;
z-index:999;
/* color: white; */
}
.search {
position: fixed;
bottom: 0px;
left: 20px;
z-index: 1001;
top: 92%;
}
}
#loading {
docs/index.html
+77 -1
View File
@@ -51,6 +51,12 @@
<body>
<div class="btn-toggle"></div>
<div class="search">
<form action="" method="get" accept-charset="utf-8">
<input type="text" placeholder="Search" oninput="onEnter(event)">
<a id="search_button" class="search-btn" style="width: 20px;height: 20px;color: #007bff" onclick="mode_search()"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" role="img" viewBox="0 0 24 24" focusable="false"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"></circle><path d="M21 21l-5.2-5.2"></path></svg></a>
</form>
</div>
<div class="d-flex a flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">
<a href="https://m5stack.com/"><img src="//cdn.shopify.com/s/files/1/0056/7689/2250/files/LOGO_70x.jpg?v=1563273356" style="margin-right:10px;margin-top:-5px" width="52"></a>M5Stack Docs</h5>
@@ -70,7 +76,7 @@
<a id="language" class="btn btn-primary" style="color:#fff" onclick="language()">中文</a>
</div>
<div id="app">loading...</div>
<div><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/back_top.png" class="back_top" onclick="(function(){$('html, body').animate({scrollTop: 0}, 500);})()"></div>
<!-- <div><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/back_top.png" class="back_top" onclick="(function(){$('html, body').animate({scrollTop: 0}, 500);})()"></div> -->
<script>
window.$docsify = {
// GENERAL
@@ -121,6 +127,76 @@
// }, 600);
};
function product_search(){
var p = $(".item p");
temp_product_name = [];
all_product_name = [];
for (var i=0; i<p.length; i++ ) {
temp_product_name.push(p[i].textContent.toLowerCase());
var match1 = temp_product_name.filter(item => item.startsWith(onEnter_content));
all_product_name.push(p[i].textContent.toLowerCase());
var match2 = all_product_name.filter(item => item.startsWith(onEnter_content));
if( match1.length > 0){
$(".item").eq(i).css("display","inline-block");
$(".item").eq(i).parent().children("p").css("display","block");
$(".item").eq(i).parent().next("hr").css("display","block");
}
else{
$(".item").eq(i).css("display","none");
$(".item").parent().children("p").css("display","none");
$(".item").eq(i).parent().next("hr").css("display","none");
}
if((match2.length == 0)){
$("#search_note").css("display","block");
}
else{
$("#search_note").css("display","none");
}
temp_product_name.shift();
}
}
function onEnter(event){
timer = setTimeout(function () {
onEnter_content = event.target.value.toLowerCase();
mode_search();
clearTimeout(timer);
timer = null;
}, 250);
}
function mode_search(){
link = window.location.href;
if(((link.slice(-4) == "/en/")||(link.slice(-7)== "/zh_CN/"))||((link.indexOf(/en/) == -1) && (link.indexOf(/zh_CN/) == -1))){
product_search();
}
}
// function keyup_submit(e){
// var evt = window.event || e;
// if (evt.keyCode == 13){
// mode_search();
// }
// }
var Input = $('form input');
Input.focusin(function (){
Input.animate({width:300});
});
Input.focusout(function (){
Input.animate({width:240});
onEnter_content = event.target.value.toLowerCase();
})
function select(event){
var s = event.textContent.toLowerCase();
$("#thetarget").removeClass("show");
$(".btn-group-vertical button").addClass("btn-light");
$(event).removeClass("btn-light");
$(event).addClass("btn-primary");
page_move(s);
}
$(document).ready(function() {
$(".btn-toggle").on('click', function() {
$(".btn-toggle").toggleClass('open');
docs/index.md
+143 -82
View File
@@ -1,63 +1,70 @@
<div>
<div class="banner img-fluid" onclick= page_move("core")>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/core.jpg">
<div class="card-img-overlay">
<h4 >Core</h4>
<div class="pc-navigation">
<div class="btn-group-vertical" style="width: 160px;">
<div class="btn-group">
<button id="core-btn" type="button" class="btn btn-primary" onclick="select(this)">Core</button>
</div>
</a>
</div>
<div class="banner img-fluid" onclick= page_move("module")>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/module.jpg">
<div class="card-img-overlay">
<h4>Module</h4>
<div class="btn-group">
<button id="module-btn" type="button" class="btn btn-light" onclick="select(this)">Module</button>
</div>
</div>
<div class="banner img-fluid" onclick= page_move("base")>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/base.jpg">
<div class="card-img-overlay">
<h4>Base</h4>
<div class="btn-group">
<button id="base-btn" type="button" class="btn btn-light" onclick="select(this)">Base</button>
</div>
</div>
<div class="banner img-fluid" onclick= page_move("unit")>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/unit.jpg">
<div class="card-img-overlay">
<h4>Unit</h4>
<div class="btn-group">
<button id="unit-btn" type="button" class="btn btn-light" onclick="select(this)">Unit</button>
</div>
</div>
<div class="banner img-fluid" onclick= page_move("application")>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/application.jpg">
<div class="card-img-overlay">
<h4>Application</h4>
<div class="btn-group">
<button id="application-btn" type="button" class="btn btn-light" onclick="select(this)">Application</button>
</div>
</div>
<div class="banner img-fluid" onclick= page_move("accessory")>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/accessory.jpg">
<div class="card-img-overlay">
<h4>Accessory</h4>
<div class="btn-group">
<button id="accessory-btn" type="button" class="btn btn-light" onclick="select(this)">Accessory</button>
</div>
</div>
<div class="banner img-fluid" onclick= page_move("aluminium")>
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/home_page/aluminium_profile.jpg">
<div class="card-img-overlay">
<h4>Aluminium Profile</h4>
<div class="btn-group">
<button id="aluminium-btn" type="button" class="btn btn-light" onclick="select(this)">Aluminium</button>
</div>
</div>
</div>
</div>
<div class="navbar-toggler mb-navigation" data-toggle="collapse" data-target="#thetarget">
Core
</div>
<div class="collapse navbar-collapse" id="thetarget">
<nav class="navbar-expand-sm bg-light navbar-dark nav-content">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="dropdown-item" onclick="select(this)">Core</a>
</li>
<li class="nav-item">
<a class="dropdown-item" onclick="select(this)">Module</a>
</li>
<li class="nav-item">
<a class="dropdown-item" onclick="select(this)">Base</a>
</li>
<li class="nav-item">
<a class="dropdown-item" onclick="select(this)">Unit</a>
</li>
<li class="nav-item">
<a class="dropdown-item" onclick="select(this)">Application</a>
</li>
<li class="nav-item">
<a class="dropdown-item" onclick="select(this)">Accessory</a>
</li>
<li class="nav-item">
<a class="dropdown-item" onclick="select(this)">Aluminium</a>
</li>
</ul>
</nav>
</div>
<div class="product_page">
<div id="search_note" style="display:none;position:fixed;top:30%">
<h3>not obtained the content, please enter the first letter of the product and search again.</h3>
</div>
<div id="core">
<img src="assets/img/product_pics/icon_core.png" style="vertical-align:middle;margin-top:30px">
<span style="font-size:30px">Core</span>
</div>
**M5Core**
@@ -67,7 +74,6 @@
<a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Core_Compare">M5Core comparison »</a>
<div class="item">
<a href="/#/en/core/basic">
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_basic_01.png">
@@ -148,12 +154,12 @@
</a>
</div>
</div>
***
<div id="module">
<img src="assets/img/product_pics/icon_module.png" style="vertical-align:middle;">
<span style="font-size:30px">Module</span>
</div>
<div id="module" >
<a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Module_I2C">I2C AddressTable</a>&nbsp;&nbsp;&nbsp;&nbsp;
@@ -324,16 +330,14 @@
</div>
<div id="base">
<img src="assets/img/product_pics/icon_base.png" style="vertical-align:middle;margin-top:20px">
<span style="font-size:30px">Base</span>
</div>
<!-- *( **[IIC Address Table](https://shimo.im/sheets/GWkjHV3XyCCgwDpQ)** )* -->
&nbsp;
***
<div id="base" >
**base**
<div class="item">
<a href="/#/en/base/lan_base">
@@ -415,13 +419,11 @@
</div>
***
<div id="unit">
<img src="assets/img/product_pics/icon_unit.png" style="vertical-align:middle;">
<span style="font-size:30px">Unit</span>
</div>
***
<div id="unit" >
<a class="btn btn btn-primary" href="#en/quick_start/m5camera/m5camera_quick_start" role="button" style="color:white;margin-top:10px;text-decoration:none">Camera QuickStart</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn btn-primary" href="https://shimo.im/sheets/GWkjHV3XyCCgwDpQ" role="button" style="color:white;margin-top:10px;text-decoration:none" data-toggle="modal" data-target="#Unit_I2C">I2C AddressTable</a>&nbsp;&nbsp;&nbsp;&nbsp;
@@ -906,15 +908,14 @@
***
<div id="application">
<img src="assets/img/product_pics/icon_app.png" style="vertical-align:middle;">
<span style="font-size:30px">Application</span>
</div>
<!-- *( **[IIC Address Table](https://shimo.im/sheets/GWkjHV3XyCCgwDpQ)** )* -->
***
<div id="application" >
**Application**
<div class="item">
<a href="/#/en/app/bala">
@@ -1014,13 +1015,14 @@
</div>
</div>
***
<div id="accessory">
<img src="assets/img/product_pics/icon_accessory.png" style="vertical-align:middle;">
<span style="font-size:30px">Accessory</span>
</div>
<div id="accessory" >
**Accessory**
<div class="item">
<a href="/#/en/accessory/converter/grove_t">
@@ -1116,15 +1118,15 @@
</div>
***
<div id="aluminium">
<img src="assets/img/product_pics/icon_1515.jpg" style="vertical-align:middle;">
<span style="font-size:30px">Aluminium Profile</span>
</div>
***
<div id="aluminium">
**Aluminium Profil**
<div class="item">
<a href="/#/en/1515/corner">
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/acs_corner_01.jpg">
@@ -1152,6 +1154,9 @@
<p class="item-title"> Aluminium-Profile</p>
</a>
</div>
</div>
</div>
@@ -1245,4 +1250,60 @@
</div>
</div>
</div>
</div>
</div>
<script>
var scrollFunc = function (e) {
e = e || window.event;
// if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
var test = window.location.href;
if(((test.slice(-4) == "/en/")||(test.slice(-4)== "/zh_CN/"))||((test.indexOf(/en/) == -1) && (test.indexOf(/zh_CN/) == -1))){
$(".btn-group-vertical button").addClass("btn-light");
if((core.getBoundingClientRect().top + core.getBoundingClientRect().height) > 200){
$(".mb-navigation").text('Core');
$("#core-btn").removeClass("btn-light");
$("#core-btn").addClass("btn-primary");
}else if((module.getBoundingClientRect().top + module.getBoundingClientRect().height) > 200){
$(".mb-navigation").text('Module');
$("#module-btn").removeClass("btn-light");
$("#module-btn").addClass("btn-primary");
}else if((base.getBoundingClientRect().top + base.getBoundingClientRect().height) > 200){
$(".mb-navigation").text('Base');
$("#base-btn").removeClass("btn-light");
$("#base-btn").addClass("btn-primary");
}else if((unit.getBoundingClientRect().top + unit.getBoundingClientRect().height) > 200){
$(".mb-navigation").text('Unit');
$("#unit-btn").removeClass("btn-light");
$("#unit-btn").addClass("btn-primary");
}else if((application.getBoundingClientRect().top + application.getBoundingClientRect().height) > 200){
$(".mb-navigation").text('Application');
$("#application-btn").removeClass("btn-light");
$("#application-btn").addClass("btn-primary");
}else if((accessory.getBoundingClientRect().top + accessory.getBoundingClientRect().height) > 700){
$(".mb-navigation").text('Accessory');
$("#accessory-btn").removeClass("btn-light");
$("#accessory-btn").addClass("btn-primary");
}else if((aluminium.getBoundingClientRect().top + aluminium.getBoundingClientRect().height) > 600){
$(".mb-navigation").text('Aluminium');
$("#aluminium-btn").removeClass("btn-light");
$("#aluminium-btn").addClass("btn-primary");
}
// }
}
}
/*IE、Opera注册事件*/
if(document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}
//Firefox使用addEventListener添加滚轮事件
if (document.addEventListener) {//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//Safari与Chrome属于同一类型
// window.onmousewheel = document.onmousewheel = scrollFunc;
// window.onscroll = document.onscroll = scrollFunc;
window.onscroll = scrollFunc;
</script>
docs/zh_CN/README.md
+807 -748
View File
File diff suppressed because it is too large Load Diff