diff --git a/ply.css b/ply.css index bba86e9..93d57ad 100644 --- a/ply.css +++ b/ply.css @@ -98,6 +98,17 @@ /* Controls */ +.ply-x { + top: 10px; + right: 5px; + cursor: pointer; + padding: 5px; + z-index: 1000; + position: absolute; + font-size: 20px; + line-height: 0; +} + .ply-ok, .ply-cancel { color: #fff; @@ -122,6 +133,11 @@ box-shadow: 0 0 1px 2px rgba(255, 180, 0, .6); } +.ply-ok::-moz-focus-inner, +.ply-cancel::-moz-focus-inner { + border: 0; +} + /* Forms */ .ply-input { diff --git a/src/Ply.es6 b/src/Ply.es6 index 03b1c32..50cc78d 100644 --- a/src/Ply.es6 +++ b/src/Ply.es6 @@ -330,7 +330,7 @@ * @private */ function _css(el, prop, val) { - if (el && el.style) { + if (el && el.style && prop) { if (prop instanceof Object) { for (var name in prop) { _css(el, name, prop[name]); @@ -561,11 +561,11 @@ /** * Создать лаер с контентом * @param {HTMLElement} contentEl - * @param {Object} style стили лаера + * @param {Object} options * @returns {HTMLElement} * @private */ - function _createLayer(contentEl, style) { + function _createLayer(contentEl, options) { var el = _buildDOM({ css: { padding: '20px 20px 40px', // Сницу в два раза больше, так лучше @@ -579,8 +579,14 @@ children: contentEl }); + // Крестик + // @todo: Тесты + if (options.flags.closeBtn) { + _appendChild(contentEl, _buildDOM({ ply: ':close', tag: '.ply-x', text: '✖' })); + } + // Контент часть - style && _css(contentEl, style); + _css(contentEl, options.layer); _css(contentEl, { overflow: 'hidden', position: 'relative', @@ -629,11 +635,7 @@ */ function _createPly(target, options, onlyLayer) { // Корневой слой - target.wrapEl = _buildDOM({ - css: { - whiteSpace: 'nowrap' - } - }); + target.wrapEl = _buildDOM({ css: { whiteSpace: 'nowrap' } }); // Затемнение @@ -659,7 +661,7 @@ // Содержит контент - target.layerEl = _createLayer(target.el, options.layer); + target.layerEl = _createLayer(target.el, options); target.contentEl = target.layerEl.firstChild; target.context = new Context(target.layerEl); @@ -699,6 +701,7 @@ }, flags: { + closeBtn: false, bodyScroll: false, closeByEsc: true, closeByOverlay: true @@ -722,6 +725,7 @@ function Ply(options) { var _this = this; + // Локальный идентификатор _this.cid = 'c' + gid++; @@ -787,8 +791,8 @@ // @todo: Покрыть тестами // Сохраняем оригинальные значения - bodyEl.__of = _css(bodyEl, 'overflow'); - bodyEl.__pr = _css(bodyEl, 'paddingRight'); + this.__overflow = _css(bodyEl, 'overflow'); + this.__paddingRight = _css(bodyEl, 'paddingRight'); _appendChild(bodyEl, dummyEl); _css(bodyEl, { @@ -809,10 +813,9 @@ /** @private */ _deactivate: function () { if (!this.hasFlag('bodyScroll')) { - var bodyEl = this.bodyEl; - _css(bodyEl, { - overflow: bodyEl.__of, - paddingRight: bodyEl.__pr + _css(this.bodyEl, { + overflow: this.__overflow, + paddingRight: this.__paddingRight }); } @@ -1060,16 +1063,16 @@ /** * Заменить слой - * @param {Object} layer + * @param {Object} options * @param {Object} [effect] эффект замены * @returns {Promise} */ - swap: function (layer, effect) { - layer.layer = layer.layer || this.options.layer; + swap: function (options, effect) { + options = _extend({}, this.options, options); var _this = this, - ply = _createPly({}, layer, true), - effects = (effect || layer.effect) ? Ply.effects.get(effect || layer.effect) : _this.effects, + ply = _createPly({}, options, true), + effects = (effect || options.effect) ? Ply.effects.get(effect || options.effect) : _this.effects, closeEl = _this.layerEl, openEl = ply.layerEl ; diff --git a/src/Ply.ui.es6 b/src/Ply.ui.es6 index 7fd7f39..13e5874 100644 --- a/src/Ply.ui.es6 +++ b/src/Ply.ui.es6 @@ -258,6 +258,7 @@ ui.factory('dialog-form *', (data) => { return { tag: 'input.ply-input', + type: data.type || 'text', name: data.name, value: data.value, required: true,