Марат Дулин, Вадим Макишвили
РИТ 2014
Фреймворк.
... и получать от этого удовольствие ;)
pages.declare('index', function () {
return [
{ block: 'header' },
{ block: 'authorization' }
];
});
[
{ block: 'header' },
{ block: 'authorization' }
]
<div class="header">
<a class="header__logo" href="/">
<img src="logo.png">
</a>
<h1 class="header__title">Демо-страница</h1>
<h2 class="header__slogan">Слоган</h2>
<a class="header__rss" href="/?rss">
<img src="rss.png">
</a>
</div>
<form class="authorization" action="/?task=login">
<label class="authorization__label">Логин</label>
<input class="authorization__login" value="">
<label class="authorization__label">Пароль</label>
<input class="authorization__password"
value="" type="password">
<button class="authorization__submit">
Войти
</button>
</form>
{
друг: 'Марат'
}
{
суп: 'солянка',
сметанаНужна: 'да'
}
{
block: 'header',
showSearch: true
}
<p>Уважаемый {{ person }}</p>
<p>Ваш заказ от {{ date:"F j, Y" }} принят на обработку.</p>
<p>Пожалуйста, убедитесь, что всё выбрано верно:</p>
<ul>
{% for item in item_list %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% if ordered_warranty %}
<p>Гарантия - 12 месяцев.</p>
{% else %}
<p>Со всеми неполадками обращайтесь в наш сервиcный центр.</p>
{% endif %}
h1 {
color: red;
}
pages.declare('index', function () {
return {
block: 'header'
}
});
<div class="header">
РИТ 2014
</div>
header {
tag: div;
content: 'РИТ 2014'
}
header {
tag: div;
content: 'РИТ 2014'
}
bt.match('header', function (ctx) {
ctx.setTag('div');
ctx.setContent('РИТ 2014');
});
<div class="header">
РИТ 2014
</div>
{
block: "y-header",
view: "islet-search",
showSearch: true,
showSuggest: true
}
{
block: "y-header",
view: "islet-search",
showSearch: true,
showSuggest: true
}
<header class="y-header_islet-search _init _live-events" data-block="y-header" data-options="{"mixins":[{"name":"location-form"}]}">
<div class="y-header_islet-search__wrapper">
<a class="y-header_islet-search__logo _lang_ru" href="http://www.yandex.ru">
<img class="y-header_islet-search__logo-img" alt="Яндекс" src="//yandex.st/lego/_/X31pO5JJJKEifJ7sfvuf3mGeD_8.png">
</a>
<div class="y-header_islet-search__info">
<span class="y-header_islet-search__board-call">
<a class="y-button_islet-board _init" data-block="y-button" role="button" href="http://www.yandex.ru/all">
<span class="y-button_islet-board__icon">
<div class="y-header_islet__board-call-icon"></div>
</span>
</a>
</span>
</div>
<div class="y-header_islet-search__arrow">
<form class="y-header_islet-search__form _live-events" action="/">
<div class="y-header_islet-search__button">
<button class="y-button_islet _init" data-block="y-button" tabindex="2" type="submit"><span class="y-button_islet__text">Найти</span></button>
</div>
<div class="y-header_islet-search__input">
<div class="y-suggest_islet _init" data-block="y-suggest"
data-options="{"options":{"suggestDropOptions":{"view":"islet-header","suggestDropItemView":"islet-header"},"dataProviderOptions":{"queryParams":{"lang":"ru-RU","search_type":"all","fullpath":1,"v":5},"posQueryParamName":"pos","textQueryParamName":"part","disableGrouping":true}},"mixins":[{"name":"header-suggest-configurer"}]}">
<span class="y-input_islet-label-icons _init" data-block="y-input"><span class="y-input_islet-label-icons__label"><a class="y-input_islet-label-icons__label-link" href="/">Карты</a></span><span
class="y-input_islet-label-icons__icons"><span class="y-input_islet-label-icons__close-small"></span></span><span class="y-input_islet-label-icons__context"><input
class="y-input_islet-label-icons__control" id="uniq0" name="text" value="" autocomplete="off"></span></span>
<div class="y-suggest-drop_islet-header" data-block="y-suggest-drop" data-options="{"options":{"wide":true}}"></div>
</div>
</div>
</form>
</div>
</div>
<div class="y-header_islet-search__board"></div>
</header>
BEViS - это как Web Components, только работает уже сегодня ;)
<div class="header authorization">
</div>
<div class="button button_theme_normal button_shadow_yes">
нажми меня
</div>
<div class="button">
нажми меня
</div>
<div class="button_normal-shadow">
нажми меня
</div>
{
block: "button",
view: "normal-shadow"
}
.button {
skin-common();
skin-theme-normal();
}
.button_normal-shadow {
skin-common();
skin-theme-normal();
skin-shadow();
}
.button {
skin-common();
skin-theme-normal();
}
.button_normal-shadow {
skin-common();
skin-theme-normal();
skin-shadow();
}
skin-common() {
/* общие стили кнопки */
}
skin-theme-normal() {
/* цвета кнопки */
}
skin-shadow() {
/* тень под кнопкой */
}
.button {
skin-common();
skin-theme-normal();
/* а здесь разрулил все конфликты этих миксинов */
}
.button_normal-shadow {
skin-common();
skin-theme-normal();
skin-shadow();
/* а здесь разрулил все конфликты этих миксинов */
}
$(document).ready(function() {
var form = $('#my-form');
form.submit(onSubmited);
function onSubmited() {
if ($('#my-form .button').hasClass('disabled')) {
return false;
}
}
});
modules.define(
'form',
['jquery'],
function(provide, $) {
var form = $('#my-form');
form.submit(onSubmited);
function onSubmited() {
if ($('#my-form .button').hasClass('disabled')) {
return false;
}
}
provide(form);
}
);
modules.define(
'form',
['y-button', 'y-block'],
function(provide, YButton, YBlock) {
var Form = inherit(YBlock, {
__constructor: function () {
this._submitButton = YButton.find(this);
this._bindTo(this.getDomNode(), 'submit', this._onSubmitted);
},
_onSubmitted: function (e) {
if (this._submitButton.isDisabled()) {
e.preventDefault();
} else {
this.emit('submit');
}
}
});
provide(Form);
}
);
<div
class="header"
data-block="header">
</div>
<input class="login _unfilled" type="text"/>
/* обычное состояние */
.login {
...
}
/* тревожное состояние */
.login._unfilled {
border: 1px solid red;
}
blocks/
form/
form.styl
form.js
form.bt.js
header/
header.styl
header.js
header.bt.js
git clone git@github.com:bevis-ui/bevis-stub.git your-project
cd your-project
make
BEViS — серьёзный инструмент с добрым лицом ;)
