From da69ff8e3c7485f5bc423c18059783454045c8d4 Mon Sep 17 00:00:00 2001
From: RubaXa <ibnRubaXa@gmail.com>
Date: Tue, 1 Jul 2014 23:51:31 +0400
Subject: [PATCH] + baseHtml

---
 src/Ply.es6        | 75 +++++++++++++++++++++++++++-------------------
 src/Ply.ui.es6     | 26 ++++++++--------
 tests/Ply.tests.js | 10 +++----
 3 files changed, 61 insertions(+), 50 deletions(-)

diff --git a/src/Ply.es6 b/src/Ply.es6
index 50cc78d..ea75332 100644
--- a/src/Ply.es6
+++ b/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, {
-			overflow: 'hidden',
-			position: 'relative',
-			backfaceVisibility: 'hidden'
+			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;
diff --git a/src/Ply.ui.es6 b/src/Ply.ui.es6
index 13e5874..8f47b20 100644
--- a/src/Ply.ui.es6
+++ b/src/Ply.ui.es6
@@ -112,19 +112,16 @@
 	// 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),
-					data.ctrls && ui(':default', {
-						tag: 'div.ply-footer',
-						children: data.ctrls
-					})
-				]
-			}]
+			children: [
+				ui(':header', data.header),
+				ui(':content', data.content),
+				data.ctrls && ui(':default', {
+					tag: 'div.ply-footer',
+					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 } }
diff --git a/tests/Ply.tests.js b/tests/Ply.tests.js
index 1b7154e..7c585ad 100644
--- a/tests/Ply.tests.js
+++ b/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>');
 	});