Browse Source

+ baseHtml

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

69
src/Ply.es6

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

10
src/Ply.ui.es6

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

10
tests/Ply.tests.js

@ -53,7 +53,7 @@
// Layer
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 () {
var content = document.createElement('b');
content.innerHTML = '!';
content.innerHTML = '<b>!</b>';
equal(new Ply().contentEl.innerHTML, '');
equal(new Ply({ el: 'Wow!' }).contentEl.innerHTML, 'Wow!');
equal(new Ply({ el: content }).layerEl.innerHTML.replace(/\sstyle=".*?"/, ''), '<b>!</b>');
equal(new Ply({ }).contentEl.innerHTML, '', 'conentEl');
equal(new Ply({ el: 'Wow!' }).contentEl.innerHTML, 'Wow!', 'contentEl');
equal(new Ply({ el: content }).contentEl.innerHTML, '<b>!</b>');
});

Loading…
Cancel
Save