Ply

Ply

Amazing layer/modal/dialog system. Wow!

Features

• Demo: http://rubaxa.github.io/Ply/
• Support browsers: Chrome 20+, FireFox 20+, Safari 6+, Opera 12+, IE8+
• No jQuery (but then need Promise polyfill)
• More than 90% test code coverage
• Preloading content before displaying
• Smart focus on form elements
• ES6 syntax

Base usage

Include ply.css in `` (optional)

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
Ply.dialog("confirm", "Do you like it?")
	.done(function (ui) {
		// OK
	})
	.fail(function (ui) {
		// Cancel
	})
	.always(function (ui) {
		if (ui.state) {
			// Clicked "OK"
		}
		else {
			// Clicked "Cancel"
			//   details: `ui.by` — "cancel", "overlay", "esc", "x"
		}
	});

---

Dialogs

Ply.dialog({
	"init-state": {
		ui: "alert",
		data: "Wow!",
		next: "other-step"
		nextEffect: "3d-flip[180,-180]"
	},

	"other-step": {
		ui: "confirm",
		data: {
			text: "What's next?",
			ok: "Exit",     // button text
			cancel: "Back"
		},
		back: "init-state",
		backEffect: "3d-flip[-180,180]"
	}
}).always(function (ui) {
	if (ui.state) {
		// OK
	} else {
		// Cancel
		// ui.by — 'overlay', 'x', 'esc'
	}
})

---

Low-level

new Ply(el[, options])

• el:String|HTMLElement — content of layer
• options:Object — layer options

new Ply(options)

• options:Object — layer options

…

open([effect]):Promise

close(effect):Promise

swap(layer[, effect]):Promise

Swapping one layer to another

innerSwap(layer[, effect]):Promise

Swapping the content of one layer to another

destroy()

Destroy layer

---

Preset effects

• fade
• scale
• fall
• slide
• 3d-flip
• 3d-sign

Combined effects

Ply.dialog("alert", { effect: ["fade", "scale"] }, "Fade & scale");

Custom effects

Ply.effects["my-effect"] = {
	open:  { layer: "fade-in", overlay: "background-in" },
	close: { layer: "fade-out", overlay: "background-out" }
};

Ply.effects["background-in"] = {
	"from": { opacity: 0, backgroundColor: "red" },
	"to":   { opacity: 1, backgroundColor: "white" }
};

Ply.effects["background-out"] = {
	"from": { opacity: 1, backgroundColor: "white" },
	"to":   { opacity: 0, backgroundColor: "green" }
};

---

Ply.stack

• last:Ply|null
• length:Number

---

Ply.support

• transition:String|Boolean
• transform:String|Boolean
• perspective:String|Boolean
• transformStyle:String|Boolean
• transformOrigin:String|Boolean
• backfaceVisibility:String|Boolean

---

Ply.lang (localization)

• ok:String — "OK"
• cancel:String — "Cancel"
• cross:String — "✖"

---

Ply.defaults

• layer:Object — css
• overlay:Object — style overlay
• opacity:Number — default 0.6
• backgroundColor:String — default rgb(0, 0, 0)'
• flags:Object
• closeBtn:Boolean — presence close button "✖"
• bodyScroll:Boolean — disable scrollbars, default false
• closeByEsc:Boolean — closing the layer by pressing the esc key, default true
• closeByOverlay:Boolean — closing the layer by clicking on the overlay, default true
• hideLayerInStack:Boolean — hide the layer if it is not the first in the stack
• visibleOverlayInStack:Boolean — visibility overlay, if the layer is not the first in the stack

---

Ply.dom

build(tag:String|Object):HTMLElement

Ply.build(); // 

Ply.build({ html: "!" }); // 

append(parent:HTMLElement, el:HTMLElement)

remove(el:HTMLElement)

addEvent(el:HTMLElement, name:String, fn:Function)

removeEvent(el:HTMLElement, name:String, fn:Function)

---

Create a dialog template

Ply.ui(name):HTMLElement

• name:String — ui-element name

var el = Ply.ui("btn", {
	title: "click me",
	value: "Wow!"
})

Ply.ui.factory(name, factory)

• name:String — ui-element name
• factory:Function — callback

Ply.ui.factory("btn", function (data, children) {
	// data:`Object`
	// children:`HTMLElement`

	return {
		"tag": ".btn",
		"text": data.value
	};
});

// or button with icon (optional)
Ply.ui.factory("btn", function (data, children) {
	return {
		"tag": ".btn",
		"title": data.title
		"children": [
			data.icon && { "tag": "span.glyphicon.glyphicon-" + data.icon },
			{ "tag": "span", "text": data.value }
		]
	};
});

Ply.factory(name, factory)

• name:String — template name
• factory:Function — callback

…

---

Development

• grunt watch — dev mode
• grunt build — assembly project

---

Changelog

0.5.0

• 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