Skip to content

Instantly share code, notes, and snippets.

@evoactivity
Last active August 2, 2019 22:07
Show Gist options
  • Save evoactivity/0ba02dd857eccbb3c642c4b1421887ff to your computer and use it in GitHub Desktop.
Save evoactivity/0ba02dd857eccbb3c642c4b1421887ff to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
calculatePosition(trigger, content) {
let { top, left, width, height } = trigger.getBoundingClientRect();
let { height: contentHeight } = content.getBoundingClientRect();
let style = {
left: left + width,
top: top + window.pageYOffset
};
return { style };
},
calculatePositionInPlace(trigger, content) {
let { top, left, width, height } = trigger.getBoundingClientRect();
let { height: contentHeight } = content.getBoundingClientRect();
let style = {
left: width,
top: window.pageYOffset
};
return { style };
}
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
* {
box-sizing: border-box;
}
.ember-basic-dropdown-trigger,
.list-item {
display: block;
width: 200px;
background: #333;
color: #fff;
padding: 1rem;
margin: 0;
}
.ember-basic-dropdown-content {
background: #333;
color: #fff;
}
.ember-basic-dropdown-trigger > .ember-basic-dropdown-content {
width: 100%;
}
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#basic-dropdown-hover calculatePosition=calculatePosition as |dd|}}
{{#dd.trigger}}Hover me{{/dd.trigger}}
{{#dd.content}}
{{#basic-dropdown-hover renderInPlace=true calculatePosition=calculatePositionInPlace as |dd|}}
{{#dd.trigger}}Embedded Dropdown{{/dd.trigger}}
{{#dd.content}}
<p class="list-item">Here's my content</p>
{{/dd.content}}
{{/basic-dropdown-hover}}
<p class="list-item">Hello world</p>
{{/dd.content}}
{{/basic-dropdown-hover}}
{{#basic-dropdown-hover calculatePosition=calculatePosition as |dd|}}
{{#dd.trigger}}Hover me{{/dd.trigger}}
{{#dd.content}}
{{#basic-dropdown-hover renderInPlace=true calculatePosition=calculatePositionInPlace as |dd|}}
{{#dd.trigger}}Embedded Dropdown{{/dd.trigger}}
{{#dd.content}}
<p class="list-item">Here's my content</p>
{{/dd.content}}
{{/basic-dropdown-hover}}
<p class="list-item">Hello world</p>
{{/dd.content}}
{{/basic-dropdown-hover}}
{{#basic-dropdown-hover calculatePosition=calculatePosition as |dd|}}
{{#dd.trigger}}Hover me{{/dd.trigger}}
{{#dd.content}}
{{#basic-dropdown-hover renderInPlace=true calculatePosition=calculatePositionInPlace as |dd|}}
{{#dd.trigger}}Embedded Dropdown{{/dd.trigger}}
{{#dd.content}}
<p class="list-item">Here's my content</p>
{{/dd.content}}
{{/basic-dropdown-hover}}
<p class="list-item">Hello world</p>
{{/dd.content}}
{{/basic-dropdown-hover}}
<div id="ember-basic-dropdown-wormhole"></div>
{
"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",
"ember-basic-dropdown-hover": "0.5.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment