+ clone & rootTag option

Gruntfile.js

@@ -100,5 +100,6 @@ module.exports = function (grunt){
 	grunt.registerTask('es', ['export', 'es6transpiler']);
 	grunt.registerTask('build', ['es', 'qunit']);
 	grunt.registerTask('min', ['uglify']);
+	grunt.registerTask('quick', ['es', 'min']);
 	grunt.registerTask('default', ['version', 'build', 'min']);
 };

README.md

@@ -394,6 +394,7 @@ Ply.dialog("subscribe", {
 ## Changelog
 
 
+##### 0.5.0
  * Added `ply-loading`
  * `ui.layer` -> `ui.widget`
  * Added a `on` prefix to all callbacks

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ply",
   "exportName": "Ply",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "devDependencies": {
     "grunt": "*",
     "grunt-contrib-watch": "*",

src/Ply.es6

@@ -167,8 +167,10 @@
 	function _createPly(target, options, onlyLayer) {
 		// Корневой слой
 		target.wrapEl = _buildDOM({
-			tag: 'form',
+			tag: options.rootTag,
-			css: { whiteSpace: 'nowrap', zIndex: options.zIndex }
+			css: { whiteSpace: 'nowrap', zIndex: options.zIndex },
+			method: 'post',
+			action: '/'
 		});
 
 
@@ -192,7 +194,7 @@
 
 		// Контент
 		var el = options.el;
-		target.el = (el && el.cloneNode) ? el.cloneNode(true) : _buildDOM({ html: el || '' });
+		target.el = (el && el.cloneNode) ? (options.clone ? el.cloneNode(true) : el) : _buildDOM({ html: el || '' });
 
 
 		// Содержит контент
@@ -786,7 +788,7 @@
 	};
 
 
-	Ply.version = '0.5.0';
+	Ply.version = '0.6.0';
 
 	return Ply;
 });

src/defaults.es6

@@ -3,7 +3,10 @@
  */
 
 module.exports = {
+	clone: true,
 	zIndex: 10000,
+	rootTag: 'form',
+	baseHtml: true,
 
 	layer: {}, // css
 
@@ -21,9 +24,7 @@ module.exports = {
 		visibleOverlayInStack: false
 	},
 
-	baseHtml: true,
+	// Callbacks
-
-	// Callback's
 	oninit: noop,
 	onopen: noop,
 	onclose: noop,

src/effects.preset.es6

@@ -112,8 +112,8 @@ module.exports = {
 	},
 
 	'3d-flip-in': {
-		'from': (el, args) => {
+		'from': (el, deg) => {
-			Ply.effects.rotate3d(el, 0, 'Y', args || -70);
+			Ply.effects.rotate3d(el, 0, 'Y', deg || -70);
 		},
 		'to': (el) => {
 			_css(el.firstChild, { opacity: 1, transform: 'rotateY(0)' });
@@ -124,8 +124,8 @@ module.exports = {
 		'from': (el) => {
 			Ply.effects.rotate3d(el, 1, 'Y', 0);
 		},
-		'to': (el, args) => {
+		'to': (el, deg) => {
-			_css(el.firstChild, { opacity: 0, transform: 'rotateY(' + (args || 70) + 'deg)' });
+			_css(el.firstChild, { opacity: 0, transform: 'rotateY(' + (deg || 70) + 'deg)' });
 		}
 	},
 

src/ui.es6

@@ -6,6 +6,9 @@
 ;;;(Ply => {
 	'use strict';
 
+	function _isNode(el) {
+		return el && el.appendChild;
+	}
 
 	function _toBlock(block, name) {
 		if (block == null) {
@@ -63,14 +66,15 @@
 	 */
 	ui.factory = function (name, renderer, simpleMode) {
 		ui[name.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ')] = function (data, path) {
-			var fragment = document.createDocumentFragment();
+			var fragment = document.createDocumentFragment(), result;
 
 			if ((data != null) || name === ':root') {
 				data = simpleMode ? data : _toBlock(data);
 
 				_each(simpleMode ? data : data.children, function (block, key) {
-					var abs = ((path || name) + ' ' + key).replace(/^:\w+\s+/, '');
+					var abs = ((path || name) + ' ' + key).replace(/^:\w+\s+/, ''),
-					var el = ui(abs, _toBlock(block, key), abs);
+						el = _isNode(block) ? block : ui(abs, _toBlock(block, key), abs)
+					;
 
 					_appendChild(fragment, el);
 				});
@@ -79,10 +83,10 @@
 					delete data.children;
 				}
 
-				var result = renderer(data, fragment);
+				result = renderer(data, fragment);
 
 				/* istanbul ignore else */
-				if (!result.appendChild) {
+				if (!_isNode(result)) {
 					_extend(result, data);
 				}
 
@@ -164,7 +168,7 @@
 				renderer(options, data, resolve, reject);
 			}).then((el) => {
 				/* istanbul ignore else */
-				if (!el.appendChild) {
+				if (!_isNode(el)) {
 					el = ui(':root', el);
 				}
 
@@ -271,6 +275,10 @@
 	 * @returns {Promise}
 	 */
 	Ply.create = (name, options, data) => {
+		if (_isNode(name)) {
+			return _resolvePromise(new Ply(_extend(options || {}, { el: name })));
+		}
+
 		if (!data) {
 			data = options;
 			options = {};
@@ -305,7 +313,7 @@
 	 * @returns {Promise}
 	 */
 	Ply.dialog = (name, options, data) => {
-		if (name instanceof Object) {
+		if ((name instanceof Object) && !_isNode(name)) {
 			options = options || /* istanbul ignore next */ {};
 
 			return _promise((resolve, reject) => {
@@ -396,7 +404,7 @@
 			});
 		}
 		else {
-			if (!data) {
+			if (!data && !_isNode(name)) {
 				data = options || {};
 				options = {};
 			}

tests/Ply.effects.tests.js

@@ -130,7 +130,7 @@
 	});
 
 
-	test('effects:args', function () {
+	test('effects[args]:duration', function () {
 		Ply.effects.defaults = { duration: 300, open: {}, close: {} };
 
 		deepEqual(Ply.effects.get('scale[0.5,0.3]'), {

tests/Ply.ui.tests.js

@@ -1,6 +1,17 @@
 (function (Ply) {
 	module('Ply.ui');
 
+	asyncTest('dialog(el)', function () {
+		setTimeout(function () {
+			var el = Ply.stack.last.wrapEl;
+			el.getElementsByTagName('button')[0].click();
+		}, 50);
+
+		Ply.dialog(document.getElementById('dialog-el'), { clone: false, rootTag: 'div' }).always(function (ui) {
+			equal(ui.state, true);
+			start();
+		});
+	});
 
 	asyncTest('dialog("unknown")', function () {
 		setTimeout(function () {

tests/index.html

@@ -119,6 +119,10 @@
 	<h2 id="qunit-userAgent"></h2>
 	<ol id="qunit-tests"></ol>
 	<div id="playground"></div>
+	<form id="dialog-el">
+		<input name="foo"/>
+		<button data-ply=":ok">bar</button>
+	</form>
 
 
 	<!-- lib:css -->