Skip to content

K
kpp
Commit 1d3aa48f authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Заготовка библиотеки

parent 84576958
Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 69 deletions
src/docs-files/docs.html
View file @ 1d3aa48f
<div class="in-lib-block-info" id="in-lib-block-info">
<span class="in-lib-block-info__toggler" id="in-lib-block-info__toggler">&#8646;</span>
<div class="in-lib-block-info__inner">
<section class="in-lib-block-info__block">
<div class="in-lib-block-info__block-header">
<h1 class="in-lib-block-info__block-title">Секция 1</h1>
</div>
<div class="in-lib-block-info__block-content">
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись дорогу, ручеек дороге, пунктуация повстречался все образ последний ее текстов своих предупредила моей оксмокс! Всемогущая безорфографичный взгляд заманивший там.
</div>
</section>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Библиотека</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="docs.css">
</head>
<body>
<header class="docs-header">
<div class="docs-header__inner">
<h1 class="docs-logo">
<a href="/">Библиотека</a>
</h1>
<form action="" class="docs-search">
<input type="text" placeholder="Найти блок" />
</form>
<nav class="docs-nav">
<ul class="docs-nav__list">
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Главная</a>
</li>
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Github</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="docs-content">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Встретил они которой послушавшись всеми себя заголовок путь единственное одна, гор коварный правилами проектах текст если семь вопрос буквоград образ.</p>
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</body>
</html>
src/docs-files/docs.js
View file @ 1d3aa48f
document.addEventListener('DOMContentLoaded', function(){
$(document).ready(function(){
// Проверим запись показа панели доков
var panelShown = localStorage.getItem('panelShown');
if(!panelShown) {
localStorage.setItem('panelShown', '0');
}
console.log(panelShown);
if(panelShown === '1') {
document.getElementById('in-lib-block-info').classList.add('in-lib-block-info--visible');
}
// Следим за кликом и показываем/прячем панель, пишем состояние в LS
var toggler = document.getElementById('in-lib-block-info__toggler');
var panel = document.getElementById('in-lib-block-info');
toggler.onclick = function(){
if(panel.classList.contains('in-lib-block-info--visible')) {
panel.classList.remove('in-lib-block-info--visible');
localStorage.setItem('panelShown', '0');
// Заполняем блоки, демонстрирующие код
$('.docs-demo').each(function() {
var codeHtml =$(this).find('.docs-demo__demo').html();
var codeArray = $("<div>").text(codeHtml).html().split('\n');
if(!codeArray[codeArray.length]) {
codeArray.splice((codeArray.length - 1), 1); // убираем последний элемент
}
else {
panel.classList.add('in-lib-block-info--visible');
localStorage.setItem('panelShown', '1');
if(!codeArray[0]) {
codeArray.splice(0, 1); // убираем первый элемент
}
}
var tab = codeArray[0].match( /^\s*/ );
codeArray.forEach(function(item, i) {
codeArray[i] = '<span class="code__line">'+codeArray[i].replace( tab, '' )+'</span>';
});
$(this).find('.code__syntax').append(codeArray);
// console.log(codeArray);
});
// Обрабатываем клик показа/сокрытия блока с кодом
$('.docs-content__code-trigger').on('click', function() {
$(this).closest('.docs-content__code-wrapper').find('.docs-content__code-demo').slideToggle(150);
});
});
src/docs-files/docs.less
View file @ 1d3aa48f
.in-lib-block-info {
border: 1px solid #ddd;
* {box-sizing: border-box;}
body{margin: 0; font-size: 14px; font-family: 'Open Sans', sans-serif; line-height: 1.3;min-width: 320px; color: #333;}
a{color: #0000EE;text-decoration: underline;&:hover{text-decoration: none;}}
.docs-header {
position: fixed;
z-index: 999;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 480px;
max-height: 50vh;
box-shadow: 0 0 6px rgba(0,0,0,0.4);
transform: translateX(480px);
transition: all .2s;
min-height: 50px;
background-color: rgba(0,0,0,1);
color: #fff;
&--visible {
transform: translateX(0);
&__inner {
padding: 0 1em;
display: flex;
flex-wrap: wrap;
align-items: center;
}
}
&__inner {
.docs-logo {
margin: 0 0.5em 0 0;
font-size: 24px;
padding: 0.35em 0;
font-weight: 400;
a {
text-decoration: none;
color: #fff;
}
}
.docs-search {
margin-right: 0.5em;
input[type="text"] {
border: 1px solid #555;
padding: 0.5em;
margin: 0;
background-color: transparent;
color: #fff;
&::placeholder {
color: #808080;
opacity: 1;
}
}
}
.docs-nav {
margin-left: auto;
&__list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
&__item {
margin-left: 0.5em;
}
&__link {
display: block;
padding: 0 0.5em;
line-height: 50px;
color: #fff;
}
}
.docs-content {
padding: 50px 1em 1em;
&__title {
font-size: 36px;
font-weight: 400;
margin: 1em 0 0.5em;
}
&__subtitle {
font-size: 24px;
font-weight: 400;
margin: 1em 0 0.5em;
}
&__code-demo {
display: none;
.docs-content__subtitle {
margin-top: 0;
}
}
&__code-trigger {
position: relative;
z-index: 1;
background-color: #fff;
width: 100%;
height: 100%;
max-height: 100vh;
overflow-y: auto;
}
&__toggler {
position: absolute;
top: 5px;
left: -30px;
width: 30px;
height: 30px;
font-size: 0.8em;
text-align: center;
line-height: 26px;
background-color: #fff;
border: 1px solid #ddd;
font-size: 24px;
cursor: pointer;
box-shadow: 0 0 6px rgba(0,0,0,0.4);
transition: all 0.2s;
color: #0000EE;
margin: 0;
padding: 1em 0;
&:hover {
background-color: #eee;
span {
display: inline-block;
position: relative;
z-index: 1;
background-color: #fff;
padding: 0 1em;
}
&:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 1px solid #ddd;
}
}
}
.docs-demo {
&__demo {
display: block;
background-color: #F4F4F4;
padding: 1em;
border: 1px solid #ddd;
}
}
.code {
display: block;
width: 100%;
margin: 0;
overflow-x: auto;
background-color: #F4F4F4;
padding: 1em;
border: 1px solid #ddd;
white-space: normal;
tab-size: 2;
max-height: 50rem;
&__line {
display: block;
white-space: pre;
}
}
src/docs-files/docs__block.html 0 → 100644
View file @ 1d3aa48f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Библиотека</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="docs.css">
</head>
<body>
<header class="docs-header">
<div class="docs-header__inner">
<h1 class="docs-logo">
<a href="/">Библиотека</a>
</h1>
<form action="" class="docs-search">
<input type="text" placeholder="Найти блок" />
</form>
<nav class="docs-nav">
<ul class="docs-nav__list">
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Главная</a>
</li>
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Github</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="docs-content">
<h1 class="docs-content__title">Название этого блока</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi sit voluptatem assumenda officiis, porro ullam praesentium aliquid fuga nulla in repellat, sed facere, iusto hic architecto dolores ex alias.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi sit voluptatem assumenda officiis, porro ullam praesentium aliquid fuga nulla in repellat, <a href="asrfg">sed facere</a>, iusto hic architecto dolores ex alias.</p>
<div class="docs-demo">
<div class="docs-demo__demo">
<button>qwerty</button>
</div>
<div class="docs-content__code-wrapper">
<p class="docs-content__code-trigger"><span>Показать/скрыть код</span></p>
<div class="docs-content__code-demo">
<pre class="code"><code class="code__syntax html"></code></pre>
</div>
</div>
</div>
<div class="docs-demo">
<h2 class="docs-content__subtitle">Какая то вариация блока</h2>
<div class="docs-demo__demo">
<button>
<i class="icon-foo"></i>
qwerty
</button>
</div>
<div class="docs-content__code-wrapper">
<p class="docs-content__code-trigger"><span>Показать/скрыть код</span></p>
<div class="docs-content__code-demo">
<pre class="code"><code class="code__syntax html"></code></pre>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment