* Added `ply-loading`

* `ui.layer` -> `ui.widget` * Added a `on` prefix to all callbacks
10 years ago · ad04ad556f
11 changed files with 242 additions and 42 deletions
--- a/Ply.min.js
+++ b/Ply.min.js
--- a/README.md
+++ b/README.md
@ -25,6 +25,7 @@ Create a dialog:
 Ply.dialog("alert", "Wow!").always(function (ui) {
 	ui.state; // true — "OK", false — "cancel"
 	ui.by; // submit, overlay, esc, "x"
+	ui.widget; // Ply instance
 });

 //or
@ -120,11 +121,11 @@ var ply = new Ply({
 	},

 	// Callback
-	init: function () {},
-	open: function (ply) {},
-	close: function (ply) {},
-	destory: function (ply) {},
-	callback: function (ui) {},
+	oninit: function (ply) {},
+	onopen: function (ply) {},
+	onclose: function (ply) {},
+	ondestory: function (ply) {},
+	onaction: function (ui) {},
 });


@ -392,10 +393,17 @@ Ply.dialog("subscribe", {

 ## Changelog

+
+ * Added `ply-loading`
+ * `ui.layer` -> `ui.widget`
+ * Added a `on` prefix to all callbacks
+
+
 ##### 0.4.0
 * + 'always' method (using inheritance «Promise»).
 * + Modularization

+
 ##### 0.3.0
 * #1: Testing and documentation
 * #3: Stack features
--- a/index.html
+++ b/index.html
@ -140,6 +140,81 @@
 				</code></pre>
 			</div>
 		</div>
+
+
+		<div style="text-align: center; padding: 50px 0;">
+			<h2 style="font-size: 40px">&infin; Customization examples &infin;</h2>
+		</div>
+
+
+		<div class="row">
+			<h2><a href="#Login" name="Login">Login</a></h2>
+
+			<div class="col-left">
+				<div class="ply-layer base example">
+					<div class=" ply-inside">
+						<div class=" ply-form ply-ui">
+							<div class=" ply-header ply-ui">Login</div>
+							<div class=" ply-content ply-ui">
+								<div data-ply-name="dialog-form" class=" ply-ui">
+									<input type="text" placeholder="E-mail" class=" ply-input ply-ui"/>
+									<input type="password" placeholder="Password" class=" ply-input ply-ui"/>
+								</div>
+							</div>
+							<div class=" ply-footer ply-ui">
+								<button class=" ply-ctrl ply-ok ply-ui">Enter</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="col-right">
+				<pre class="javascript"><code>
+					// Usage: ply@rubaxa.org / 123
+					// ply/login.dialog.js
+					Ply.factory('login', function (options, data, resolve) {
+						options.flags = {
+							closeBtn: false,
+							closeByEsc: true,
+							closeByOverlay: true,
+							visibleOverlayInStack: true
+						};
+
+						options.onaction = function (ui) {
+							var data = ui.data;
+							return !ui.state || $.post('/api/login', data).fail(function () {
+								$(ui.widget.el)
+									.addClass('ply-invalid')
+									.on('input', function () {
+										$(this).removeClass('ply-invalid')
+									})
+								;
+							});
+						};
+
+						// Use base factory
+						Ply.factory.use('base', options, {
+							title: 'Login',
+							form: {
+								email: 'E-mail',
+								password: { hint: 'Password', type: 'password' }
+							},
+							ok: 'Enter',
+							cancel: false
+						}, resolve);
+					});
+
+
+					// app.js
+					Ply.dialog('login').done(function (ui) {
+						Ply.dialog('alert', 'Bingo!');
+					});
+				</code></pre>
+			</div>
+		</div>
+
+
 	</div>


@ -170,6 +245,8 @@
 				files.push('//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min', './Ply.min');
 			}

+			files.push('//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax');
+
 			for (var i = 0; i < files.length; i++) {
 				document.write('<script src="' + files[i] + '.js"></' + 'script>');
 			}
@ -180,6 +257,10 @@
 		(function ($) {
 			window.hljs && hljs.configure({ classPrefix: '' });

+			$.mockjax({ url: '/api/login', data: { email: 'ibn@rubaxa.org', password: '123' }, status: 200 });
+			$.mockjax({ url: '/api/login', data: { email: 'ply@rubaxa.org', password: '123' }, status: 200 });
+			$.mockjax({ url: '/api/login', urlParams: ['email', 'password'], status: 400 });
+
 			$('.example')
 				.each(function () {
 					var $el = $(this);
@ -201,7 +282,8 @@
 					} catch (err) {}
 				})
 				.on('click', function () {
-					Function($(this).data('code'))();
+					var code = $.data(this, 'code');
+					Function(code)();
 					return false;
 				})
 			;
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ply",
  "exportName": "Ply",
-  "version": "0.4.0",
+  "version": "0.5.0",
  "devDependencies": {
    "grunt": "*",
    "grunt-contrib-watch": "*",
--- a/ply.css
+++ b/ply.css
@ -1,5 +1,5 @@
-/* Loading */
-.ply-loading {
+/* Global loading */
+.ply-global-loading {
 	top: 50%;
 	left: 50%;
 	padding: 30px;
@ -67,6 +67,7 @@
 		text-align: center;
 	}

+	.ply-layer.base .ply-footer,
 	.ply-layer.alert .ply-footer,
 	.ply-layer.confirm .ply-footer,
 	.ply-layer.prompt .ply-footer {
@ -101,7 +102,7 @@

 /* Controls */
 .ply-x {
-	top: 10px;
+	top: 12px;
 	right: 5px;
 	cursor: pointer;
 	padding: 5px;
@ -143,6 +144,7 @@
 }


+
 /* Forms */
 .ply-input {
 	width: 100%;
@ -161,3 +163,62 @@
 	.ply-input:focus {
 		border-color: #39C082;
 	}
+
+
+
+/* Global modifiers */
+.ply-invalid .ply-input {
+	border-color: #c00;
+}
+
+.ply-loading:before {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: block;
+	content: '';
+	position: absolute;
+}
+
+.ply-loading .ply-ok {
+	color: rgba(255,255,255,.7);
+	-webkit-animation: ply-ok-loading 1s linear infinite;
+	   -moz-animation: ply-ok-loading 1s linear infinite;
+	        animation: ply-ok-loading 1s linear infinite;
+	-webkit-background-size: 30px 30px;
+       -moz-background-size: 30px 30px;
+	        background-size: 30px 30px;
+	background-image: -webkit-gradient(linear, left top, right bottom,
+						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
+						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
+						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
+						to(transparent));
+	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+						transparent 75%, transparent);
+	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+						transparent 75%, transparent);
+	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+						transparent 75%, transparent);
+	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+						transparent 75%, transparent);
+	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+						transparent 75%, transparent);
+}
+
+@-webkit-keyframes ply-ok-loading {
+	to { background-position: 60px; }
+}
+
+@-moz-keyframes ply-ok-loading {
+	to { background-position: 60px; }
+}
+
+@keyframes ply-ok-loading {
+	to { background-position: 60px; }
+}
--- a/src/Ply.es6
+++ b/src/Ply.es6
@ -8,7 +8,8 @@
 (factory => {
 	'use strict';

-	if( typeof define === 'function' && define.amd ){
+	/* istanbul ignore next */
+	if (typeof define === 'function' && define.amd) {
 		define(factory);
 	}
 	else {
@ -88,7 +89,7 @@
 	 * @returns {HTMLElement}
 	 */
 	_loading.get = () => {
-		return _loading.el || (_loading.el = _buildDOM({ tag: '.ply-loading', children: { '.ply-loading-spinner': true } }));
+		return _loading.el || (_loading.el = _buildDOM({ tag: '.ply-global-loading', children: { '.ply-loading-spinner': true } }));
 	};


@ -301,7 +302,7 @@


 		// Событие инициализации
-		_this.options.init(this);
+		_this.options.oninit(this);
 	}


@ -383,6 +384,26 @@
 		},


+		/**
+		 * jQuery выборка из слоя
+		 * @param   {String}  selector
+		 * @returns {jQuery}
+		 */
+		$: function (selector) {
+			return $(selector, this.layerEl);
+		},
+
+
+		/**
+		 * Найти элемент внутри слоя
+		 * @param   {String}  selector
+		 * @returns {HTMLElement}
+		 */
+		find: function (selector) {
+			return _querySelector(selector, this.layerEl);
+		},
+
+
 		/**
 		 * Применить эффект к элементу
 		 * @param   {HTMLElement}    el
@ -412,19 +433,31 @@
 			var ui = {
 					by: name,
 					state: name === 'submit',
-					layer: this,
 					data: this.context.toJSON(),
+					widget: this,
 					context: this.context
 				},
-				result = this.options.callback(ui)
+				el = this.el,
+				result = this.options.onaction(ui)
 			;

-			_cast(result).then((result) => {
-				if (result !== false) {
-					this.result = ui;
-					this.close();
-				}
-			});
+			if (!this.__lock) {
+				this.__lock = true;
+				this.el.className += ' ply-loading';
+
+				_cast(result)
+					.done(state => {
+						if (state !== false) {
+							this.result = ui;
+							this.close();
+						}
+					})
+					.always(() => {
+						this.__lock = false;
+						this.el.className = this.el.className.replace(/\s?ply-loading/, '');
+					})
+				;
+			}
 		},


@ -559,7 +592,7 @@
 								_appendChild(_this.overlayEl, _this.overlayBoxEl);
 							}
 							// «Событие» open или close
-							_this.options[mode](_this);
+							_this.options['on' + mode](_this);
 						});
 					});
 				});
@ -694,7 +727,7 @@
 			Ply.stack.remove(this);

 			this.visible = false;
-			this.options.destroy(this);
+			this.options.ondestroy(this);
 		}
 	};

@ -753,7 +786,7 @@
 	};


-	Ply.version = '0.4.0';
+	Ply.version = '0.5.0';

 	return Ply;
 });
--- a/src/defaults.es6
+++ b/src/defaults.es6
@ -1,5 +1,5 @@
 /**
- * @desc Найтроки по умолчанию
+ * @desc Настройки по умолчанию
 */

 module.exports = {
@ -24,9 +24,9 @@ module.exports = {
 	baseHtml: true,

 	// Callback's
-	init: noop,
-	open: noop,
-	close: noop,
-	destroy: noop,
-	callback: noop
+	oninit: noop,
+	onopen: noop,
+	onclose: noop,
+	ondestroy: noop,
+	onaction: noop
 };
--- a/src/promise.es6
+++ b/src/promise.es6
@ -56,6 +56,7 @@ function _resolvePromise(value) {
 * @private
 */
 function _cast(value) {
+	/* istanbul ignore next */
 	return value && value.then ? value : _resolvePromise(value);
 }

@ -66,6 +67,7 @@ function _cast(value) {
 //
 var __promise__ = _resolvePromise();

+/* istanbul ignore next */
 if (NativePromise && !__promise__.always) {
 	Promise = function (executor) {
 		var promise = new NativePromise(executor);
@ -73,7 +75,14 @@ if (NativePromise && !__promise__.always) {
 		return promise;
 	};

-	Promise.prototype = Object.create(NativePromise.prototype, { constructor: { value: Promise } });
+	Promise.prototype = Object.create(NativePromise.prototype);
+	Promise.prototype.constructor = Promise;
+
+	Promise.prototype.then = function (callback) {
+		var promise = NativePromise.prototype.then.call(this, callback);
+		promise.__proto__ = this.__proto__; // for FireFox
+		return promise;
+	};

 	Promise.prototype.done = function (callback) {
 		this.then(callback);
--- a/src/ui.es6
+++ b/src/ui.es6
@ -220,6 +220,12 @@
 	});


+	// Базовый жиалог
+	factory('base', (options, data, resolve) => {
+		resolve(_dialogFactory('base', options, data));
+	});
+
+
 	// Диалог: «Предупреждение»
 	factory('alert', (options, data, resolve) => {
 		resolve(_dialogFactory('alert', options, data, { ok: true }));
@ -317,7 +323,7 @@
 							length:		length,
 							stack:		stack,
 							current:	current,
-							layer:		layer
+							widget:		layer
 						}, ui), dialogs);
 					},

@ -365,7 +371,7 @@
 					_progress({}, layer);

 					//noinspection FunctionWithInconsistentReturnsJS
-					rootLayer.options.callback = (ui) => {
+					rootLayer.options.onaction = (ui) => {
 						if (interactive) {
 							return false;
 						}
@ -397,7 +403,7 @@

 			return Ply.open(name, options, data).then((layer) => {
 				return _promise((resolve, reject) => {
-					layer.options.close = () => {
+					layer.options.onclose = () => {
 						(layer.result.state ? resolve : reject)(layer.result);
 					};
 				});
--- a/st/app.css
+++ b/st/app.css
@ -42,6 +42,7 @@ h1 {
 h2 {
 	position: relative;
 	font-size: 30px;
+	margin-left: -40px;
 	margin-bottom: 10px;
 }
 	/* anchors */
@ -52,11 +53,11 @@ h2 {
 	}
 		h2 a:before {
 			right: 100%;
-			padding-right: 10px;
-			display: block;
 			content: '→';
-			position: absolute;
+			display: inline-block;
 			visibility: hidden;
+			line-height: 30px;
+			padding-right: 10px;
 		}

 		h2 a:hover:before,
--- a/tests/Ply.ui.tests.js
+++ b/tests/Ply.ui.tests.js
@ -70,8 +70,8 @@
 		}, 50);

 		return Ply.dialog("confirm", { effect: 'none:1' }, { ok: 'YES', cancel: 'NO' }).then(function (ui) {
-			equal(ui.layer.layerEl.getElementsByTagName('button')[0].innerHTML, 'YES', 'ok');
-			equal(ui.layer.layerEl.getElementsByTagName('button')[1].innerHTML, 'NO', 'cancel');
+			equal(ui.widget.layerEl.getElementsByTagName('button')[0].innerHTML, 'YES', 'ok');
+			equal(ui.widget.layerEl.getElementsByTagName('button')[1].innerHTML, 'NO', 'cancel');
 		});
 	});

@ -101,7 +101,7 @@
 				log.push(ui.name + ':' + ui.state);

 				setTimeout(function () {
-					var el = ui.layer.layerEl;
+					var el = ui.widget.layerEl;
 					(el.getElementsByTagName('button')[1] || el.getElementsByTagName('button')[0]).click();
 				}, 100);
 			}