deadcxap/simple-bookreader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release

Browse Source
This commit is contained in:
Oleg Mokhov
2015-06-20 12:26:08 +03:00
committed by mokhov
parent a716969f4e
commit f3546ef3a5
85 changed files with 16682 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
client/core/controls/controls.bt.js Normal file
View File

@@ -0,0 +1,134 @@
module.exports = function (bt) {
bt.setDefaultView('controls', 'default');
bt.match('controls*', function (ctx) {
var content = [];
ctx.enableAutoInit();
var arrows = ctx.getParam('arrows') || false;
var zoom = ctx.getParam('zoom') || false;
var footnotes = ctx.getParam('footnotes') || false;
var pages = ctx.getParam('pages') || false;
ctx.setInitOption('zoom', zoom);
ctx.setInitOption('footnotes', footnotes);
ctx.setInitOption('pages', pages);
ctx.setState('hidden');
if (arrows) {
ctx.setInitOption('arrows', arrows);
content.push([
{
elem: 'arrow-left',
disabled: true
},
{
elem: 'arrow-right'
}
]);
}
if (zoom || footnotes || pages) {
content.push({
elem: 'menu',
zoom: zoom,
footnotes: footnotes,
pages: pages
});
}
ctx.setContent(content);
});
bt.match('controls*__menu', function (ctx) {
ctx.setState('state', 'closed');
ctx.setContent([
{
elem: 'trigger'
},
{
elem: 'buttons',
zoom: ctx.getParam('zoom'),
footnotes: ctx.getParam('footnotes'),
pages: ctx.getParam('pages')
}
]);
});
bt.match(['controls*__arrow-left', 'controls*__arrow-right'], function (ctx) {
if (ctx.getParam('disabled')) {
ctx.setState('disabled');
}
ctx.setContent({
elem: 'arrow-inner'
});
});
bt.match('controls*__buttons', function (ctx) {
var content = [];
var baseHeight = 42;
var items = 0;
if (ctx.getParam('zoom')) {
items += 2;
content.push({
elem: 'plus'
}, {
elem: 'minus'
});
}
if (ctx.getParam('footnotes')) {
items += 1;
content.push({
elem: 'footnotes',
footnotes: ctx.getParam('footnotes')
});
}
if (ctx.getParam('pages')) {
items += 1;
content.push({
elem: 'pages',
pages: ctx.getParam('pages')
});
}
ctx.setAttr('style', 'height: ' + baseHeight * items + 'px');
ctx.setContent(content);
});
bt.match('controls*__footnotes', function (ctx) {
ctx.setState('mode', ctx.getParam('footnotes') || 'appendix');
ctx.setContent([{
elem: 'footnotes-anchor'
}, {
elem: 'footnotes-footnote'
}
]);
});
bt.match('controls*__footnotes-anchor', function (ctx) {
ctx.setTag('span');
ctx.setContent('x');
});
bt.match('controls*__footnotes-footnote', function (ctx) {
ctx.setTag('span');
ctx.setContent('[x]');
});
bt.match('controls*__pages', function (ctx) {
ctx.setState('mode', ctx.getParam('pages') || 'auto');
ctx.setContent([{
elem: 'pages-one'
}, {
elem: 'pages-two'
}
]);
});
};

187
client/core/controls/controls.js vendored Normal file
View File

@@ -0,0 +1,187 @@
modules.define(
'controls',
[
'y-block',
'jquery',
'y-extend',
'inherit'
],
function (
provide,
YBlock,
$,
extend,
inherit
) {
/*jshint devel:true*/
var Controls = inherit(YBlock, {
__constructor: function () {
this.__base.apply(this, arguments);
var menu = this._findElement('menu');
var params = extend({
zoom: false,
// Длина свайпа в пикселах
swipeLength: 20
}, this._getOptions());
this._trigger = this._findElement('trigger');
this._bindTo(this._trigger, 'click', function () {
this._toggleElementState(menu, 'state', 'opened', 'closed');
});
if (params.zoom) {
this._initZoomControls();
}
if (params.footnotes) {
this._initFootnotes();
}
if (params.pages) {
this._initPageModes();
}
if (params.arrows) {
this._initArrowControls();
}
},
_initArrowControls: function () {
this.arrowLeft = this._findElement('arrow-left');
this.arrowRight = this._findElement('arrow-right');
this._bindTo(this.arrowRight, 'click', function () {
this.emit('next-page');
});
this._bindTo(this.arrowLeft, 'click', function () {
this.emit('previous-page');
});
},
_initZoomControls: function () {
this._bindTo(this._findElement('plus'), 'click', function () {
this.emit('zoom-in');
});
this._bindTo(this._findElement('minus'), 'click', function () {
this.emit('zoom-out');
});
},
/**
* Инициализация блока со сносками
*/
_initFootnotes: function () {
this._bindTo(this._findElement('footnotes'), 'click', function (e) {
this._toggleElementState($(e.currentTarget), 'mode', 'appendix', 'inline');
this.emit('footnotes-' + this._getElementState($(e.currentTarget), 'mode'));
});
},
/**
* Устанавливает режим сносок в нужный
*
* @param {String} mode
*/
setFootnotesMode: function (mode) {
this._setElementState(this._findElement('footnotes'), 'mode', mode);
},
/**
* Инициализация контрола страничного отображения
*/
_initPageModes: function () {
var pages = this._findElement('pages');
var modes = ['auto', 'one', 'two'];
this._pageMode = modes.indexOf(this._getElementState(pages, 'mode'));
this._bindTo(pages, 'click', function () {
this._pageMode = (this._pageMode + 1) % 3;
this._setElementState(pages, 'mode', modes[this._pageMode]);
this.emit('pages-' + this._getElementState(pages, 'mode'));
});
},
/**
* Устанавливает режим отображения в нужный
*
* @param {String} mode
*/
setPageViewMode: function (mode) {
var pages = this._findElement('pages');
var modes = ['auto', 'one', 'two'];
this._setElementState(pages, 'mode', mode);
this._pageMode = modes.indexOf(mode);
},
resetZoomButtons: function () {
this._removeElementState(
this._findElement('plus'),
'disabled'
);
this._removeElementState(
this._findElement('minus'),
'disabled'
);
},
disableZoomIn: function () {
this._setElementState(
this._findElement('plus'),
'disabled'
);
},
disableZoomOut: function () {
this._setElementState(
this._findElement('minus'),
'disabled'
);
},
resetArrows: function () {
this._removeElementState(
this.arrowLeft,
'disabled'
);
this._removeElementState(
this.arrowRight,
'disabled'
);
},
disableArrowNext: function () {
this._setElementState(
this.arrowRight,
'disabled'
);
},
disableArrowPrev: function () {
this._setElementState(
this.arrowLeft,
'disabled'
);
},
/**
* Показывает блок с контролами контролы
*/
show: function () {
this._removeState('hidden');
},
/**
* Показывает блок с контролами контролы
*/
hide: function () {
this._setState('hidden');
}
}, {
getBlockName: function () {
return 'controls';
}
});
provide(Controls);
});

319
client/core/controls/controls.styl Normal file
View File

@@ -0,0 +1,319 @@
.controls_default {
$item-height = 42px;
$margin = 15px;
$arrowWidth = 70px;
$arrowImageWidth = 15px;
$arrowImageHeight = 24px;
item() {
position: relative;
width: 42px;
height: $item-height;
cursor: pointer;
background-repeat: no-repeat;
background-position: center, 50% 100%;
&._disabled {
cursor: default;
}
}
&._hidden &__menu {
/*
Добавляем стартовое положение для анимации появления элемента menu.
131px - длина окружности кнопки "menu",
что бы выкатывание(появление) кнопки было реалистичней
*/
transform: translateX(-131px) rotate(-360deg);
}
&__menu {
width: 42px;
margin-left: $margin;
user-select: none;
transition-timing-function: cubic-bezier(.75, 0, .25, 1);
transition-duration: .25s, .25s, .25s, .5s;
transition-property: background-color, box-shadow, opacity, transform;
transform: translateX(0) rotate(0);
border-radius: 21px;
}
&__trigger {
item();
&::before {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 6px;
height: 28px;
margin: -14px 0 0 -3px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 2px #999;
transition-timing-function: inherit;
transition-duration: .25s;
transition-property: width, height, margin, background-color;
transition:
.15s width cubic-bezier(.75, 0, .25, 1),
.15s height cubic-bezier(.75, 0, .25, 1),
.15s margin cubic-bezier(.75, 0, .25, 1),
.05s background-color linear;
}
}
&__plus,
&__minus {
item();
&::before {
position: absolute;
top: 50%;
left: 50%;
content: '';
height: 2px;
width: 18px;
margin: -1px 0 0 -9px;
background: #000;
}
&:hover::before,
&:hover::after {
background: #ffce00;
}
&._disabled::before,
&._disabled::after {
background: #ccc !important;
}
}
&__plus {
&::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 2px;
height: 18px;
margin: -9px 0 0 -1px;
background: #000;
}
}
&__footnotes {
item();
line-height: ($item-height - 2);
text-align: center;
&._mode_appendix &-footnote {
vertical-align: super;
font-size: 13px;
}
}
&__pages {
item();
text-align: center;
line-height: $item-height;
&::before {
position: absolute;
z-index: 1;
top: 0;
left: 0;
content: 'auto';
width: 100%;
height: 100%;
/* Выравнивает текст по центру */
line-height: ($item-height - 8);
}
&-one {
width: 8px;
height: 14px;
display: inline-block;
border: 2px solid #eee;
}
&-two {
position: relative;
width: 12px;
height: 14px;
margin-left: 3px;
display: inline-block;
border: 2px solid #eee;
&::before {
position: absolute;
left: 50%;
content: '';
margin-left: -1px;
width: 2px;
height: 100%;
background: #eee;
}
}
&._mode_one::before,
&._mode_two::before {
display: none;
}
&._mode_one &-one,
&._mode_two &-two {
border-color: #000;
margin-left: 0;
}
&._mode_two &-two::before {
background: #000;
}
&._mode_one &-two {
display: none;
}
&._mode_two &-one {
display: none;
}
}
&__menu._state_closed {
background-color: rgba(127, 127, 127, .5);
}
&__menu._state_closed &__buttons {
height: 0 !important;
}
&__buttons {
overflow: hidden;
transition-timing-function: cubic-bezier(.75, 0, .25, 1);
transition-duration: .25s;
transition-property: height opacity;
transform: translateZ(0);
}
&__menu._state_opened {
background-color: #fff;
box-shadow: rgba(0, 0, 0, .3) 0 1px 4px 0;
}
&__menu._state_opened &__trigger::before {
height: 10px;
width: 10px;
margin: -5px 0 0 -5px;
box-shadow: none;
background: #000;
transition:
.15s width cubic-bezier(.75, 0, .25, 1),
.15s height cubic-bezier(.75, 0, .25, 1),
.15s margin cubic-bezier(.75, 0, .25, 1);
}
&__menu._state_opened &__trigger:hover::before {
background: #ffce00;
}
&._hidden &__arrow-right {
opacity: 0;
}
&__arrow {
&-left,
&-right {
position: absolute;
top: 90px;
bottom: 4px;
width: $arrowWidth;
cursor: pointer;
user-select: none;
transition: transform .5s ease;
}
&-left:hover &-inner,
&-right:hover &-inner {
opacity: 1;
}
&-left &-inner,
&-right &-inner {
position: absolute;
top: 50%;
left: 50%;
width: $arrowImageWidth;
height: $arrowImageHeight;
margin-top: -($arrowImageHeight / 2);
margin-left: -($arrowImageWidth / 2);
opacity: .3;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTMiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCAxMyA0OCI+PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMjQiIGlkPSJhcnJvd19sZWZ0IiB5PSIwIj48cGF0aCBkPSJNMTMgLjY2N0wxMi4zMTYgMCAwIDEyLjAxbC42ODQuNjY3TDEzIC42NjdtMCAyMi42NjZsLS42ODQuNjY3TDAgMTEuOTlsLjY4NC0uNjY3TDEzIDIzLjMzMyIgb3BhY2l0eT0iMSIgZmlsbD0iIzAwMCIvPjwvc3ZnPjxzdmcgd2lkdGg9IjEzIiBoZWlnaHQ9IjI0IiBpZD0iYXJyb3dfcmlnaHQiIHk9IjI0Ij48cGF0aCBkPSJNMCAuNjY3TC42ODQgMCAxMyAxMi4wMWwtLjY4NC42NjdMMCAuNjY3bTAgMjIuNjY2TC42ODQgMjQgMTMgMTEuOTlsLS42ODQtLjY2N0wwIDIzLjMzMyIgb3BhY2l0eT0iMSIgZmlsbD0iIzAwMCIvPjwvc3ZnPjwvc3ZnPgo="); no-repeat;
transition: opacity .3s ease;
/*.y-ua_svg_no & {*/
/*background-image: url(images/arrows.png);*/
/*}*/
}
&-left._disabled {
transform: translateX(-100%);
}
&-left {
left: 0;
}
&-right &-inner {
background-position: 0 -24px;
}
&-right._disabled {
transform: translateX(100%);
}
&-right {
opacity: 1;
right: 0;
}
}
}