aboutsummaryrefslogtreecommitdiff
path: root/javascript/app/components/resizable-panel.js
blob: 20d781b87359e0748558a57e4ec760c28788df8a (plain) (blame)
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') ? "&gt;" : "&lt;";
  }),
  willDestroyElement() {
    if(this._onresize) {
      window.removeEventListener('resize',this._onresize);
    }
  },
  actions : {
    hide() {
      if(this.get('hidden')) {
        show(this,true);
      } else {
        hide(this,true);
      }
    }
  }
});