Release

client/core/chitalka-ui/chitalka-ui.bt.js

@@ -0,0 +1,90 @@
+module.exports = function (bt) {
+    bt.match('chitalka-ui', function (ctx) {
+        ctx.enableAutoInit();
+
+        var content = [];
+
+        if (ctx.getParam('controls')) {
+            var controls = ctx.getParam('controls');
+            ctx.setInitOption('controls', controls);
+
+            if (ctx.getParam('book')) {
+                if (ctx.getParam('book').footnotes) {
+                    controls.footnotes = ctx.getParam('book').footnotes;
+                }
+
+                if (ctx.getParam('book').pages) {
+                    controls.pages = ctx.getParam('book').pages;
+                }
+            }
+
+            controls.block = 'controls';
+            content.push({
+                elem: 'controls',
+                /*
+                 Передается объект вида(по умолчанию)
+                 {
+                     block: controls,
+                     zoom: true,
+                     arrows: true
+                 }
+                 */
+                content: controls
+            });
+        }
+
+        content.push({
+            elem: 'book',
+            content: ctx.getParam('book')
+        });
+
+        if (ctx.getParam('progress')) {
+            ctx.setInitOption('progress', true);
+
+            content.push({
+                elem: 'progress'
+            });
+        }
+
+        if (ctx.getParam('progress_bar')) {
+            ctx.setInitOption('progress-bar', true);
+
+            content.push({
+                elem: 'progress-bar'
+            });
+        }
+
+        if (ctx.getParam('annotations')) {
+            ctx.setInitOption('annotations', true);
+
+            content.push({
+                elem: 'back-to-page'
+            });
+        }
+
+        content.push({
+            elem: 'estimated'
+        });
+
+        ctx.setState('loading');
+        content.push({
+            elem: 'loader'
+        });
+
+        ctx.setContent(content);
+    });
+
+    bt.match('chitalka-ui*__loader', function (ctx) {
+        ctx.setContent({
+            block: 'spin',
+            view: 'default-large'
+        });
+    });
+
+    bt.match([
+        'chitalka-ui*__controls',
+        'chitalka-ui*__book'
+    ], function (ctx) {
+        ctx.setContent(ctx.getParam('content'));
+    });
+};

client/core/chitalka-ui/chitalka-ui.deps.yaml

@@ -0,0 +1,21 @@
+- block: y-page
+  required: true
+- block: y-block
+  required: true
+- block: jquery
+  required: true
+- block: inherit
+  required: true
+- block: chitalka-fb2
+  required: true
+- controls
+- spin
+
+- block: 'file-drag'
+  required: true
+
+- block: spin
+  view: 'default-large'
+
+- block: y-block
+  elem: auto-init

client/core/chitalka-ui/chitalka-ui.js

@@ -0,0 +1,356 @@
+modules.define(
+    'chitalka-ui',
+    [
+        'controls',
+        'y-block',
+        'jquery',
+        'y-extend',
+        'spin',
+        'file-drag',
+        'inherit'
+    ],
+    function (
+        provide,
+        Controls,
+        YBlock,
+        $,
+        extend,
+        Spin,
+        FileDrag,
+        inherit
+    ) {
+
+    var ChitalkaUI = inherit(YBlock, {
+        __constructor: function () {
+            this.__base.apply(this, arguments);
+
+            //var params = extend({
+                //menu: false,
+                //progress: false
+            //}, this._getOptions());
+        },
+
+        init: function (chitalka) {
+            this._chitalka = chitalka;
+
+            this._bindTo(this._chitalka, 'ready', this._onBookLoaded.bind(this));
+
+            if (this._getOptions().controls) {
+                this._initControls();
+            }
+
+            if (this._getOptions().progress) {
+                this._initProgress();
+            }
+
+            if (this._getOptions()['progress-bar']) {
+                this._initProgressBar();
+            }
+
+            if (this._getOptions().annotations) {
+                this._initAnnotationsControl();
+            }
+
+            this._initEstimated();
+
+            this._initDragListeners();
+
+            return this;
+        },
+
+        _initControls: function () {
+            this._controls = Controls.find(this.getDomNode());
+
+            if (this._getOptions().controls.arrows) {
+                this._initArrows();
+            }
+
+            this._bindTo(this._chitalka, 'ready', function () {
+                if (this._getOptions().controls.zoom) {
+                    this._controls.setFootnotesMode(this._chitalka.getFootnotesMode());
+                    this._controls.setPageViewMode(this._chitalka.getPageViewMode());
+                    this._initMenu();
+                }
+            }.bind(this));
+        },
+
+        _initArrows: function () {
+            this._bindTo(this._controls, 'next-page', function () {
+                this._chitalka.nextPage();
+            });
+            this._bindTo(this._controls, 'previous-page', function () {
+                this._chitalka.previousPage();
+            });
+
+            this._bindTo(this._chitalka, 'page-changed', function () {
+                 this._updateArrows();
+            });
+        },
+
+        _initMenu: function () {
+            this._bindTo(this._controls, 'zoom-in', function () {
+                this._chitalka.zoomIn();
+            });
+            this._bindTo(this._controls, 'zoom-out', function () {
+                this._chitalka.zoomOut();
+            });
+
+            this._bindTo(this._controls, 'footnotes-appendix', function () {
+                this._chitalka.setFootnotesMode('appendix');
+            });
+            this._bindTo(this._controls, 'footnotes-inline', function () {
+                this._chitalka.setFootnotesMode('inline');
+            });
+
+            this._bindTo(this._controls, 'pages-one', function () {
+                this._chitalka.setPageViewMode('one');
+                this._setState('mode', 'one-page');
+            });
+            this._bindTo(this._controls, 'pages-two', function () {
+                this._chitalka.setPageViewMode('two');
+                this._setState('mode', 'two-page');
+            });
+            this._bindTo(this._controls, 'pages-auto', function () {
+                this._chitalka.setPageViewMode();
+                this._removeState('mode');
+            });
+
+            this._bindTo(this._chitalka, 'disabled-zoom-in', function () {
+                this._controls.disableZoomIn();
+            });
+            this._bindTo(this._chitalka, 'disabled-zoom-out', function () {
+                this._controls.disableZoomOut();
+            });
+            this._bindTo(this._chitalka, 'reset-zoom-buttons', function () {
+                this._controls.resetZoomButtons();
+            });
+
+            this._bindTo(this._chitalka, 'load-fail', function () {
+                this._noBook();
+                this._fileLoaded = false;
+            }.bind(this));
+        },
+
+        /**
+         * Переводит ui в состояние «нет книги
+         */
+        _noBook: function () {
+            this._setState('no-book');
+            Spin.find(this._findElement('loader')).stop();
+        },
+
+        /**
+         * Активировать слушатели drag-событий
+         */
+        _initDragListeners: function () {
+            this._drag = new FileDrag(this.getDomNode());
+
+            this._bindTo(this._drag, 'show-drag', this._showDrag.bind(this));
+            this._bindTo(this._drag, 'hide-drag', this._hideDrag.bind(this));
+            this._bindTo(this._drag, 'file-dropped', this._onFileDropped.bind(this));
+            this._bindTo(this._drag, 'file-loaded', this._onFileLoaded.bind(this));
+        },
+
+        /**
+         * Активировать состояние drag
+         */
+        _showDrag: function () {
+            this._setState('drag');
+            this._removeState('no-book');
+            this._controls.hide();
+        },
+
+        /**
+         * Убрать состояние drag
+         */
+        _hideDrag: function () {
+            if (this._fileLoaded) {
+                this._removeState('drag');
+                this._controls.show();
+            }
+        },
+
+        /**
+         * Действия по киданию файла внутрь интерфейса
+         */
+        _onFileDropped: function () {
+            this._fileLoaded = true;
+            this.loading();
+        },
+
+        /**
+         * Действия по загрузке файла
+         * @param {Event} e
+         */
+        _onFileLoaded: function (e) {
+            this._chitalka._prepareBook(e.data).then(function () {
+                this._removeState('drag');
+                this._controls.show();
+            }.bind(this));
+        },
+
+        /**
+         * Вернуть UI в состояние «загрузка»
+         */
+        loading: function () {
+            // Остановить кручения спиннера
+            Spin.find(this._findElement('loader')).start();
+
+            // Убирает стейт загрузки с текущего элемента
+            this._setState('loading');
+
+            // Показываем блок с контролами
+            this._controls.hide();
+
+        },
+
+        /**
+         * Действия после загрузки книги
+         * @private
+         */
+        _onBookLoaded: function () {
+            this._fileLoaded = true;
+
+            // Остановить кручения спиннера
+            Spin.find(this._findElement('loader')).stop();
+
+            // Убирает стейт загрузки с текущего элемента
+            this._removeState('loading');
+
+            // Показываем блок с контролами
+            this._controls.show();
+
+        },
+
+        /**
+         * Если текущая страница первая/последняя,
+         * то левая/правая(соответственно) стралка дизейблится.
+         * @private
+         */
+        _updateArrows: function () {
+            this._controls.resetArrows();
+
+            if (this._chitalka.isFirstPage()) {
+                this._controls.disableArrowPrev();
+            }
+
+            if (this._chitalka.isLastPage()) {
+                this._controls.disableArrowNext();
+            }
+        },
+
+        /**
+         * Инициализация элемента, который отображает
+         * номер текущей страницы из общего количества страниц
+         * @private
+         */
+        _initProgress: function () {
+            this._progress = this._findElement('progress');
+
+            this._bindTo(this._chitalka, 'page-changed', this._updateProgress.bind(this));
+            this._bindTo(this._chitalka, 'ready', this._updateProgress.bind(this));
+        },
+
+        /**
+         * Инициализация элемента, который отображает
+         * номер текущей страницы из общего количества страниц
+         * @private
+         */
+        _initEstimated: function () {
+            this._estimated = this._findElement('estimated');
+
+            this._bindTo(this._chitalka, 'page-changed', this._updateEstimated.bind(this));
+            this._bindTo(this._chitalka, 'ready', this._updateEstimated.bind(this));
+        },
+
+        _updateEstimated: function () {
+            var estimatedTime = this._chitalka.getEstimatedTime();
+            var estimatedPhrase = 'До конца книги ' +
+                (estimatedTime[0] ? estimatedTime[0] + ' ч ' : '') +
+                estimatedTime[1] + ' м';
+            this._estimated.html(estimatedPhrase);
+        },
+
+        /**
+         * Обновляет состояние элемента прогресса
+         */
+        _updateProgress: function () {
+            this._progress.html(this._chitalka.getCurrentPage() + ' из ' + this._chitalka.getTotalPages());
+        },
+
+        /**
+         * Инициализация прогресс-бара
+         * @private
+         */
+        _initProgressBar: function () {
+            this._progressBar = this._findElement('progress-bar');
+
+            this._bindTo(this._chitalka, 'page-changed', function () {
+                var progress = this._getCurrentProgress() + '%';
+
+                this._progressBar.width(progress);
+                this._progressBar.attr('title', progress);
+            });
+        },
+
+        /**
+         * Инициализация элемента работы с аннотациями
+         * @private
+         */
+        _initAnnotationsControl: function () {
+            this._backTo = this._findElement('back-to-page');
+            var counter = 0;
+
+            this._bindTo(this._chitalka, 'page-changed', function () {
+                var prevPage = this._chitalka.getBackPage();
+
+                // Когда нет prevPage значит его сбросили и надо убрать «возвращатор»
+                if (!prevPage || counter === 1) {
+                    this._setBackTo();
+                    this._chitalka.resetBackPage();
+                    counter = 0;
+                } else if (counter) {
+                    counter--;
+                } else if (prevPage) {
+                    this._setBackTo('Вернуться на страницу ' + prevPage);
+
+                    // Сколько страниц даём пролистнуть
+                    counter = 3;
+                } else {
+                    this._setBackTo();
+                }
+            });
+
+            this._bindTo(this._backTo, 'click', function () {
+                this._setBackTo();
+                this._chitalka.moveBackFromAnnotation();
+                counter = 0;
+            });
+        },
+
+        _setBackTo: function (text) {
+            if (text) {
+                this._setElementState(this._backTo, 'visible');
+                this._backTo.html(text);
+            } else {
+                this._removeElementState(this._backTo, 'visible');
+            }
+        },
+
+        /**
+         * Возвращает процент прочтения
+         * @returns {number}
+         * @private
+         */
+        _getCurrentProgress: function () {
+            return ((this._chitalka.getCurrentPage() / this._chitalka.getTotalPages()) * 100).toFixed(2);
+        }
+
+    }, {
+        getBlockName: function () {
+            return 'chitalka-ui';
+        }
+    });
+
+    provide(ChitalkaUI);
+});

client/core/chitalka-ui/chitalka-ui.styl

@@ -0,0 +1,177 @@
+.chitalka-ui {
+    $text-size = 12px;
+    $margin = 15px;
+
+    font: 15px/1.4 Arial, sans-serif;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    overflow: hidden;
+
+    min-width: 790px;
+
+    &._drag {
+        background: #fff;
+
+        &::after {
+            position: absolute;
+            content: '';
+            left: 30px;
+            bottom: 30px;
+            right: 30px;
+            top: 30px;
+            text-align: center;
+            border: 4px dashed #0f0;
+        }
+        &::before {
+            position: absolute;
+            top: 50%;
+            width: 100%;
+            transform: translateY(-50%);
+            text-align: center;
+            content: 'drag file here';
+        }
+    }
+
+
+    &._mode_one-page {
+        min-width: 790px;
+    }
+    &._mode_two-page {
+        min-width: 1490px;
+    }
+
+    &__book {
+        padding: 0 30px;
+        visibility: visible;
+
+        opacity: 1;
+
+        transition: visibility 0s ease, opacity 1s ease;
+    }
+
+    &__controls {
+        position: absolute;
+        top: $margin;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    &__progress-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        height: 4px;
+
+        background: #fc0;
+
+        transition: width .5s ease;
+    }
+
+    &__progress {
+        font-size: $text-size;
+
+        position: absolute;
+        bottom: $margin;
+        left: 50%;
+
+        margin-left: -150px;
+        width: 300px;
+
+        text-align: center;
+
+        color: #999;
+    }
+
+    &__estimated {
+        font-size: $text-size;
+
+        position: absolute;
+        bottom: $margin;
+        right: $margin;
+        text-align: right;
+
+        width: 200px;
+
+        color: #999;
+    }
+
+    &._loading &__loader {
+        display: block;
+    }
+
+    &__loader,
+    &._loading &__progress,
+    &._loading &__estimated,
+    &._drag &__progress,
+    &._drag &__loader,
+    &._drag &__estimated {
+        display: none;
+    }
+
+    &._loading &__book,
+    &._drag &__book {
+        visibility: hidden;
+
+        opacity: 0;
+    }
+
+    &._no-book {
+        &::before {
+            position: absolute;
+            top: 50%;
+            width: 100%;
+            transform: translateY(-50%);
+            text-align: center;
+            content: 'no book, drag book here';
+        }
+    }
+
+
+    &__loader {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        text-align: center;
+
+        /* Псевдо-элмемент нужен для вертикального выравнивания inline-block'а */
+        &:after {
+            display: inline-block;
+            height: 100%;
+            content: '';
+            vertical-align: middle
+        }
+    }
+    &__back-to-page {
+        font-size: $text-size;
+
+        position: absolute;
+        bottom: $margin;
+        left: $margin;
+
+        width: 200px;
+
+        display: none;
+
+        color: #999;
+        cursor: pointer;
+        text-decoration: underline;
+
+        &:hover {
+            color: #333;
+        }
+
+        &._visible {
+            display: block;
+        }
+    }
+}

client/core/chitalka-ui/images/arrows.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="48" viewBox="0 0 13 48"><svg width="13" height="24" id="arrow_left" y="0"><path d="M13 .667L12.316 0 0 12.01l.684.667L13 .667m0 22.666l-.684.667L0 11.99l.684-.667L13 23.333" opacity="1" fill="#000"/></svg><svg width="13" height="24" id="arrow_right" y="24"><path d="M0 .667L.684 0 13 12.01l-.684.667L0 .667m0 22.666L.684 24 13 11.99l-.684-.667L0 23.333" opacity="1" fill="#000"/></svg></svg>

client/core/chitalka-ui/images/arrows.svg.base64

@@ -0,0 +1,9 @@
+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRw
+Oi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTMiIGhlaWdodD0iNDgiIHZpZXdCb3g9
+IjAgMCAxMyA0OCI+PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMjQiIGlkPSJhcnJvd19sZWZ0IiB5
+PSIwIj48cGF0aCBkPSJNMTMgLjY2N0wxMi4zMTYgMCAwIDEyLjAxbC42ODQuNjY3TDEzIC42Njdt
+MCAyMi42NjZsLS42ODQuNjY3TDAgMTEuOTlsLjY4NC0uNjY3TDEzIDIzLjMzMyIgb3BhY2l0eT0i
+MSIgZmlsbD0iIzAwMCIvPjwvc3ZnPjxzdmcgd2lkdGg9IjEzIiBoZWlnaHQ9IjI0IiBpZD0iYXJy
+b3dfcmlnaHQiIHk9IjI0Ij48cGF0aCBkPSJNMCAuNjY3TC42ODQgMCAxMyAxMi4wMWwtLjY4NC42
+NjdMMCAuNjY3bTAgMjIuNjY2TC42ODQgMjQgMTMgMTEuOTlsLS42ODQtLjY2N0wwIDIzLjMzMyIg
+b3BhY2l0eT0iMSIgZmlsbD0iIzAwMCIvPjwvc3ZnPjwvc3ZnPgo=