| /* | |
| * Динамическая сетка | |
| * Внедряется подмешиванием DOM-узлу поведенческих классов: grid_col_3, grid_cell... | |
| */ | |
| .grid | |
| box-sizing border-box | |
| /* | |
| * Генерирует стили для сетки |
| { | |
| "window.nativeTabs": true, | |
| "workbench.editor.tabCloseButton": "right", | |
| "explorer.autoReveal": false, | |
| "explorer.openEditors.visible": 0, | |
| "workbench.colorTheme": "Visual Studio Light", | |
| "workbench.iconTheme": null, | |
| "editor.tabSize": 2, | |
| "editor.minimap.enabled": false, |
Safe json data extraction.
Перед обращением к полям данных, пришедших от серверной ручки, нужно предвариетльно проверить наличие этих полей — в противном случае, код время от времени будет падать, а затем обрастать громоздкими условиями с проверкой всего на свете:
if (json.tv && Array.isArray(json.tv.events)) {
json.events.forEach(function (event) {| // JS | |
| Beast.decl({ | |
| Loader: { | |
| mix: 'typo_text', | |
| expand: function () { | |
| this.append( | |
| (this.text() + '...').replace(/ /, ' ').split('').map( | |
| letter => <letter>{letter}</letter> | |
| ) |
| /* CSS | |
| .Loader | |
| color gray-300 | |
| &__letter | |
| display inline-block | |
| transition color 500ms | |
| &_state_active | |
| color black | |
| */ |
| /* | |
| * Блок тумбнеила | |
| * Ширина задается числом колонок сетки (добавлением классов grid_col_1, grid_col_2...) | |
| * Высота вычисляется согласно пропорции (_ratio), в процентах от ширины | |
| */ | |
| .thumb | |
| display inline-block | |
| background center center no-repeat | |
| background-size cover |
| /** | |
| * @block Tooltip Всплывающая подсказка | |
| * @dep Control | |
| * @tag control | |
| * @ext control | |
| */ | |
| Beast.decl({ | |
| Tooltip: { | |
| inherits: 'Control', | |
| mod: { |
| import Option from 'b:Radiogroup e:Option' | |
| export default decl({ | |
| block: 'Radiogroup', | |
| content () { | |
| ... | |
| }, | |
| }, { | |
| propTypes: ... | |
| }, { | |
| Option: Option // Статическое поле класса - ссылка на элемент |
| /* | |
| * Параметры экранов | |
| */ | |
| screen-desktop = 'screen and (min-width: 1025px)' | |
| screen-touch = 'screen and (max-width: 1024px)' | |
| screen-tablet = 'screen and (min-width: 600px) and (max-width: 1024px)' | |
| screen-phone = 'screen and (max-width: 599px)' | |
| screen-desktop-1460 = 'screen and (min-width: 1460px)' | |
| screen-desktop-1280 = 'screen and (min-width: 1280px) and (max-width: 1459px)' |
| import data from '../../data' | |
| import createHistory from 'history/createBrowserHistory' | |
| import React from 'react' | |
| import {decl} from 'bem-react-core' | |
| import Content from 'b:Content' | |
| import NavBar from 'b:NavBar' | |
| export default decl({ | |
| block: 'Doc', | |
| willInit (props) { |