Skip to content

Instantly share code, notes, and snippets.

@ASH-Michael
Last active May 7, 2021 21:10
Show Gist options
  • Save ASH-Michael/9712cdae49ae871cdb87e30919c917e6 to your computer and use it in GitHub Desktop.
Save ASH-Michael/9712cdae49ae871cdb87e30919c917e6 to your computer and use it in GitHub Desktop.
Component Stacking Contexts
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['my-component']
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['slider-component']
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
/*
PARENT WEBSITE
outside of my control
*/
body {
width: 100%;
margin: 0;
font-family: Verdana;
text-align: center;
background-color: white;
}
.header {
width: 100%;
height: 5rem;
background-color: rgb(255, 255, 220);
/* stacking context */
position: fixed;
z-index: 600;
}
.main {
padding-top: 5rem;
background-color: rgb(220, 255, 255);
height: 1500px;
}
.main .title {
margin: 2rem 0 0;
}
.footer {
width: 100%;
height: 5rem;
background-color: rgb(255, 255, 220);
}
.title {
display: block;
font-size: 2rem;
}
/*
THIRD PARTY COMPONENT
{{slider-component}}
(black box) out of my control
*/
.slider-component {
/* stacking context */
position: relative;
}
.slider-container {
margin: 0 auto;
width: 20rem;
height: 10rem;
display: flex;
justify-content: center;
align-items: center;
background: orange;
/* stacking context */
z-index: 1;
}
.slider-component svg {
width: 40px;
height: 40px;
color: orange;
position: absolute;
top: 60px;
cursor: pointer;
/* stacking context */
z-index: 999;
}
.slider-component svg path {
fill: currentColor;
}
.slider-component .leftArrow {
left: 75px;
}
.slider-component .rightArrow {
right: 75px;
}
/*
MY COMPONENT
{{my-component}}
completely under my control
*/
.my-component {
padding: 20px;
background: lightgray;
position: relative;
z-index: 0;
}
<div class="header">
<span class="title">Header</span>
</div>
<div class="main">
<span class="title">Main Content</span>
belongs to the parent website
<br>
<br>
<br>
{{#my-component}}
{{slider-component}}
{{/my-component}}
</div>
<div class="footer">
<span class="title">Footer</span>
</div>
{my-component}
<br>
I only have control over this context
<br>
<br>
{{yield}}
<svg class="leftArrow" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg">
<title>left arrow</title>
<path d="M6.4 12.3c-.2 0-.4 0-.5-.2L0 6.1 5.9.3c.3-.3.8-.3 1 0 .4.3.4.8 0 1.1L2.3 6.2 7 11a.8.8 0 0 1-.6 1.3" fill="#FFF" fill-rule="evenodd"/>
</svg>
<div class="slider-container">
{slider-component}
<br>
from a 3rd party vendor
</div>
<svg class="rightArrow" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg">
<title>right arrow</title>
<path d="M.8 12.3c.2 0 .4 0 .5-.2l5.9-6L1.3.3a.8.8 0 0 0-1 0c-.4.3-.4.8 0 1.1L5 6.2.2 11a.8.8 0 0 0 .6 1.3" fill="#FFF" fill-rule="evenodd"/>
</svg>
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment