Browse Source

+ baseHtml

modules
RubaXa 11 years ago
parent
commit
da69ff8e3c
  1. 75
      src/Ply.es6
  2. 26
      src/Ply.ui.es6
  3. 10
      tests/Ply.tests.js

75
src/Ply.es6

@ -566,7 +566,7 @@
* @private * @private
*/ */
function _createLayer(contentEl, options) { function _createLayer(contentEl, options) {
var el = _buildDOM({ return _buildDOM({
css: { css: {
padding: '20px 20px 40px', // Сницу в два раза больше, так лучше padding: '20px 20px 40px', // Сницу в два раза больше, так лучше
display: 'inline-block', display: 'inline-block',
@ -576,27 +576,25 @@
verticalAlign: 'middle', verticalAlign: 'middle',
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)'
}, },
children: contentEl children: options.baseHtml ? [{
}); ply: 'layer',
tag: '.ply-layer',
// Крестик className: options.mod,
// @todo: Тесты css: _extend({
if (options.flags.closeBtn) { overflow: 'hidden',
_appendChild(contentEl, _buildDOM({ ply: ':close', tag: '.ply-x', text: '✖' })); position: 'relative',
} backfaceVisibility: 'hidden'
}, options.layer),
// Контент часть children: [options.flags.closeBtn && {
_css(contentEl, options.layer); ply: ':close',
_css(contentEl, { tag: '.ply-x',
overflow: 'hidden', text: Ply.lang.cross
position: 'relative', }, {
backfaceVisibility: 'hidden' tag: '.ply-inside',
children: contentEl
}]
}] : contentEl
}); });
el.setAttribute(_plyAttr, 'layer');
_appendChild(el, contentEl);
return el;
} }
@ -662,7 +660,7 @@
// Содержит контент // Содержит контент
target.layerEl = _createLayer(target.el, options); target.layerEl = _createLayer(target.el, options);
target.contentEl = target.layerEl.firstChild; target.contentEl = _getContentEl(target.layerEl);
target.context = new Context(target.layerEl); target.context = new Context(target.layerEl);
_appendChild(target.wrapEl, target.layerEl); _appendChild(target.wrapEl, target.layerEl);
@ -689,6 +687,18 @@
} }
/**
* Получить ссылку на контент
* @param {HTMLElement} layerEl
* @returns {HTMLElement}
* @private
*/
function _getContentEl(layerEl) {
return layerEl.firstChild.lastChild.firstChild;
}
// //
// Настройки по умолчанию // Настройки по умолчанию
// //
@ -701,11 +711,13 @@
}, },
flags: { flags: {
closeBtn: false, closeBtn: true,
bodyScroll: false, bodyScroll: false,
closeByEsc: true, closeByEsc: true,
closeByOverlay: true closeByOverlay: true
} },
baseHtml: true
}; };
@ -1088,7 +1100,7 @@
_this.el = ply.el; _this.el = ply.el;
_this.layerEl = openEl; _this.layerEl = openEl;
_this.contentEl = openEl.firstChild; _this.contentEl = _getContentEl(openEl);
_this.context.el = openEl; _this.context.el = openEl;
}) })
; ;
@ -1097,16 +1109,16 @@
/** /**
* Заменить внутренности слоя * Заменить внутренности слоя
* @param {Object} layer * @param {Object} options
* @param {Object} [effect] эффект замены * @param {Object} [effect] эффект замены
* @returns {Promise} * @returns {Promise}
*/ */
innerSwap: function (layer, effect) { innerSwap: function (options, effect) {
layer.layer = layer.layer || this.options.layer; options = _extend({}, this.options, options);
var _this = this, var _this = this,
ply = _createPly({}, layer, true), ply = _createPly({}, options, true),
effects = (effect || layer.effect) ? Ply.effects.get(effect || layer.effect) : _this.effects, effects = (effect || options.effect) ? Ply.effects.get(effect || options.effect) : _this.effects,
inEl = _querySelector('.ply-inside', ply.layerEl), inEl = _querySelector('.ply-inside', ply.layerEl),
outEl = _querySelector('.ply-inside', _this.layerEl) outEl = _querySelector('.ply-inside', _this.layerEl)
@ -1592,7 +1604,8 @@
// Export // Export
Ply.lang = { Ply.lang = {
ok: 'OK', ok: 'OK',
cancel: 'Cancel' cancel: 'Cancel',
cross: '✖'
}; };
Ply.css = _css; Ply.css = _css;

26
src/Ply.ui.es6

@ -112,19 +112,16 @@
// Ply-слой - корневой элемент // Ply-слой - корневой элемент
ui.factory(':root', function (data) { ui.factory(':root', function (data) {
return { return {
tag: 'form.ply-layer', tag: 'form.ply-form',
className: data.mod, className: data.mod,
children: [{ children: [
tag: '.ply-inside', ui(':header', data.header),
children: [ ui(':content', data.content),
ui(':header', data.header), data.ctrls && ui(':default', {
ui(':content', data.content), tag: 'div.ply-footer',
data.ctrls && ui(':default', { children: data.ctrls
tag: 'div.ply-footer', })
children: data.ctrls ]
})
]
}]
}; };
}); });
@ -200,7 +197,7 @@
/** /**
* Абстрактный диалог * Абстрактный диалог
* @param {String} mod * @param {String} mod модификатор
* @param {Object} options * @param {Object} options
* @param {Object} data * @param {Object} data
* @param {Object} defaults * @param {Object} defaults
@ -208,10 +205,11 @@
* @private * @private
*/ */
function _dialogFactory(mod, options, data, defaults) { function _dialogFactory(mod, options, data, defaults) {
options.mod = mod;
options.effect = options.effect || 'slide'; options.effect = options.effect || 'slide';
options.flags = _extend({ closeBtn: false }, options.flags);
return { return {
mod: mod,
header: data.title, header: data.title,
content: data.form content: data.form
? { 'dialog-form': { children: data.form } } ? { 'dialog-form': { children: data.form } }

10
tests/Ply.tests.js

@ -53,7 +53,7 @@
// Layer // Layer
layer = new Ply({ layer: { textAlign: 'center' } }); layer = new Ply({ layer: { textAlign: 'center' } });
equal(layer.contentEl.style.textAlign, 'center', 'textAlign: center'); equal(layer.layerEl.firstChild.style.textAlign, 'center', 'textAlign: center');
}); });
@ -73,11 +73,11 @@
test('content', function () { test('content', function () {
var content = document.createElement('b'); var content = document.createElement('b');
content.innerHTML = '!'; content.innerHTML = '<b>!</b>';
equal(new Ply().contentEl.innerHTML, ''); equal(new Ply({ }).contentEl.innerHTML, '', 'conentEl');
equal(new Ply({ el: 'Wow!' }).contentEl.innerHTML, 'Wow!'); equal(new Ply({ el: 'Wow!' }).contentEl.innerHTML, 'Wow!', 'contentEl');
equal(new Ply({ el: content }).layerEl.innerHTML.replace(/\sstyle=".*?"/, ''), '<b>!</b>'); equal(new Ply({ el: content }).contentEl.innerHTML, '<b>!</b>');
}); });

Loading…
Cancel
Save