1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
import Ember from 'ember';
function hide (component,byUser) {
component.$alsoResizeElement.css({left: 0});
component.$().css({width:0});
component.set('hidden',true);
component.$(".show-left-panel-button").show();
if(byUser) {
component.set('hiddenByUser',true);
}
}
function show (component,byUser) {
component.$alsoResizeElement.css({left: 300});
component.$().css({width:300});
component.set('hidden',false);
component.$(".show-left-panel-button").hide();
if(byUser) {
component.set('hiddenByUser',false);
}
}
export default Ember.Component.extend({
hidden:false,
hiddenByUser:false,
didInsertElement : function () {
this._super(...arguments);
Ember.run.next(this,() => {
const onresize = () => {
if(!this.get('hiddenByUser')) {
const width = window.innerWidth;
if(!this.get('hidden') && width < 700) {
hide(this,false);
} else if(this.get('hidden') && width > 700) {
show(this,false);
}
}
};
this._onresize = onresize;
window.addEventListener('resize', onresize);
const $alsoResizeElement = Ember.$(this.get('alsoResizeElementId'));
Ember.$(this.element).resizable({
maxWidth: 800,
minWidth: 200,
handles: 'e',
resize: (event,ui) => {
Ember.run.next(this,() => {
$alsoResizeElement.css({left: ui.size.width});
});
}
});
this.$alsoResizeElement = $alsoResizeElement;
if(window.innerWidth < 700) {
this.set('hidden',true);
hide(this,false);
}
});
},
hideButtonLabel : Ember.computed('hidden',function() {
return this.get('hidden') ? ">" : "<";
}),
willDestroyElement() {
if(this._onresize) {
window.removeEventListener('resize',this._onresize);
}
},
actions : {
hide() {
if(this.get('hidden')) {
show(this,true);
} else {
hide(this,true);
}
}
}
});
|
