Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

* Scrim!

  • Loading branch information...
commit 45421bad1d791fa88745e852204adf4a15d3b305 1 parent 9ac8bc3
Steve Orvell authored
View
12 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>
View
52 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"});
View
19 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;
+}
View
4 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"
);
Please sign in to comment.
Something went wrong with that request. Please try again.