* Scrim!

examples/Samples/popup.html

@@ -27,24 +27,30 @@
 			components: [
 				{classes: "onyx-toolbar-inline", components: [
 					{kind: "onyx.Button", content: "Popup...", ontap: "showPopup", popup: "popup"},
-					{name: "popup", classes: "popup", kind: "onyx.Popup", centered: true, floating: true, components: [
+					{name: "popup", classes: "popup", kind: "onyx.Popup", centered: true, floating: true, onHide: "popupHidden", components: [
 						{kind: "onyx.Spinner"},
 						{content: "Popup"}
 					]},
 					{kind: "onyx.Button", content: "Light Popup...", ontap: "showPopup", popup: "lightPopup"},
-					{name: "lightPopup", classes: "popup light", kind: "onyx.Popup", centered: true, floating: true, components: [
+					{name: "lightPopup", classes: "popup light", kind: "onyx.Popup", centered: true, floating: true, onHide: "popupHidden", components: [
 						{kind: "onyx.Spinner", classes: "onyx-light"},
 						{content: "Popup"}
 					]},
 					{kind: "onyx.Button", content: "Modal Popup...", ontap: "showPopup", popup: "modalPopup"},
-					{name: "modalPopup", classes: "popup", kind: "onyx.Popup", centered: true, modal: true, floating: true, content: "Modal Popup..."}
+					{name: "modalPopup", classes: "popup", kind: "onyx.Popup", centered: true, modal: true, floating: true, onHide: "popupHidden", content: "Modal Popup..."}
 				]}
 			],
 			showPopup: function(inSender) {
 				var p = this.$[inSender.popup];
 				if (p) {
+					onyx.scrim.show();
+					//onyx.scrimTransparent.show();
 					p.show();
 				}
+			},
+			popupHidden: function() {
+				onyx.scrim.hide();
+				//onyx.scrimTransparent.hide();
 			}
 		}))().write();
 	</script>

source/Scrim.js

@@ -0,0 +1,52 @@
+enyo.kind({
+	name: "onyx.Scrim",
+	showing: false,
+	classes: "onyx-scrim enyo-fit",
+	floating: false,
+	//*@ protected
+	create: function() {
+		this.inherited(arguments);
+		if (this.floating) {
+			this.setParent(enyo.floatingLayer);
+		}
+	},
+	showingChanged: function() {
+	// auto render when shown.
+		if (this.floating && this.showing && !this.hasNode()) {
+			this.render();
+		}
+		this.inherited(arguments);
+		//this.addRemoveClass(this.showingClassName, this.showing);
+	},
+	//* @protected
+	make: function() {
+		return this;
+	}
+});
+
+//* @protected
+//
+// Scrim singleton exposing a subset of Scrim API. 
+// is replaced with a proper enyo.Scrim instance.
+//
+enyo.kind({
+	name: "onyx.scrimSingleton",
+	kind: null,
+	constructor: function(inName, inProps) {
+		this.instanceName = inName;
+		enyo.setObject(this.instanceName, this);
+		this.props = inProps || {};
+	},
+	make: function() {
+		var s = new onyx.Scrim(this.props);
+		enyo.setObject(this.instanceName, s);
+		return s;
+	},
+	show: function() {
+		var s = this.make();
+		s.show();
+	}
+});
+
+new onyx.scrimSingleton("onyx.scrim", {floating: true, classes: "onyx-scrim-translucent"});
+new onyx.scrimSingleton("onyx.scrimTransparent", {floating: true, classes: "onyx-scrim-transparent"});

source/css/Scrim.css

@@ -0,0 +1,19 @@
+.onyx-scrim {
+	z-index: 1;
+	/*
+		note: by using pointer-events we allow tapping on scrim
+		while it is fading out; however, this requires any showing classes
+		to set pointer events to auto or scrim will not function as expected.
+	*/
+	pointer-events: none;
+}
+
+.onyx-scrim.onyx-scrim-translucent{
+	pointer-events: auto;
+	background: rgba(0, 0, 0, 0.65);
+}
+
+.onyx-scrim.onyx-scrim-transparent {
+	pointer-events: auto;
+	background: transparent;
+}

source/wip-package.js

@@ -5,6 +5,7 @@ enyo.depends(
 	"css/Picker.css",
 	"css/Item.css",
 	"css/Spinner.css",
+	"css/Scrim.css",
 	"Tooltip.js",
 	"TooltipDecorator.js",
 	"Menu.js",
@@ -18,5 +19,6 @@ enyo.depends(
 	"FlyweightPicker.js",
 	"Item.js",
 	"SwipeableItem.js",
-	"Spinner.js"
+	"Spinner.js",
+	"Scrim.js"
 );