Skip to content

Instantly share code, notes, and snippets.

@fpalluel
Last active April 20, 2017 14:15
Show Gist options
  • Save fpalluel/2f88479aa469d0a498acb4332fe13abb to your computer and use it in GitHub Desktop.
Save fpalluel/2f88479aa469d0a498acb4332fe13abb to your computer and use it in GitHub Desktop.
EPS submenu
import Ember from 'ember';
export default Ember.Component.extend({
disabled: Ember.computed.reads('group.disabled'),
groupName: Ember.computed.reads('group.groupName'),
cancelClose: false,
calculatePosition(trigger, content) {
let { top, left, width, height } = trigger.getBoundingClientRect();
let { width: contentWidth,height: contentHeight } = content.getBoundingClientRect();
let style = {
left: left - contentWidth,
top: top + window.pageYOffset + (height / 2) - (contentHeight / 2) + 25
};
return { style };
},
actions: {
onTriggerMouseEnter(trigger) {
this.set('cancelClose', false);
trigger.actions.open();
},
onContentMouseEnter(trigger) {
this.set('cancelClose', true);
},
onContentMouseLeave(trigger) {
trigger.actions.close();
},
onTriggerMouseLeave(trigger) {
Ember.run.later((id) => {
if(this.get('_state') !== "destroying") {
if(!this.get('cancelClose')) {
trigger.actions.close();
}
this.set('cancelClose', false);
}
},trigger, 100);
},
onClose(trigger) {
},
onOpen(trigger) {
// Highlight first submenu item
this.get('select').actions.highlight(this.get('group.options.firstObject'));
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
options: [
'Item One',
'Item Two',
{groupName: 'Group One', options: [
'G1 - Sub Item One',
'G1 - Sub Item Two',
'G1 - Sub Item Three',
]
},
{groupName: 'Group Two', options: [
'G2 - Sub Item One',
'G2 - Sub Item Two',
'G2 - Sub Item Three',
]
},
'Item Three',
'Item Four',
'Item Five',
{groupName: 'Group Three', options: [
'G3 - Sub Item One',
'G3 - Sub Item Two',
'G3 - Sub Item Three',
]
},
]
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.power-wrapper {
width: 15em;
display: block;
float: right;
}
.ember-power-select-group {
background-color: #e8f0ff;
}
.content-bootstrap-feel {
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
padding: 5px;
margin: 2px 0 0;
}
.arrow-right-content {
margin-left: 10px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.arrow-right-content:after, .arrow-right-content:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow-right-content:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #fff;
border-width: 10px;
margin-top: -10px;
}
.arrow-right-content:before {
border-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0.15);
border-width: 11px;
margin-top: -11px;
}
<h1>Ember Power Select sub-menus</h1>
<br>
<br>
<div class='power-wrapper'>
{{#power-select
options=options
groupComponent="power-select-custom-group"
selected=selectedItem
onchange=(action (mut selectedItem))
as |opt|
}}
{{opt}}
{{/power-select}}
</div>
<br>
<br>
<div id="ember-basic-dropdown-wormhole"></div>
<li class="ember-power-select-group" aria-disabled={{ember-power-select-true-string-if-present disabled}} role="option">
{{#basic-dropdown
onClose=(action "onClose")
onOpen=(action "onOpen")
renderInPlace=false
matchTriggerWidth=false
calculatePosition=calculatePosition as |dd|}}
{{#dd.trigger
onMouseEnter=(action "onTriggerMouseEnter")
onMouseLeave=(action "onTriggerMouseLeave")
}}
<span class="ember-power-select-group-name">
{{groupName}}
</span>
{{/dd.trigger}}
{{#dd.content
class="content-bootstrap-feel arrow-right-content"
onMouseEnter=(action "onContentMouseEnter")
onMouseLeave=(action "onContentMouseLeave")
}}
{{#component 'power-select/options'
select=(readonly select)
options=(readonly group.options)
class="ember-power-select-options"
as |opt|
}}
{{opt}}
{{/component}}
{{/dd.content}}
{{/basic-dropdown}}
</li>
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1",
"ember-power-select": "1.7.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment