##// END OF EJS Templates
add tooltip to pager button
Matthias BUSSONNIER -
Show More
@@ -1,162 +1,163 b''
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2008-2011 The IPython Development Team
2 // Copyright (C) 2008-2011 The IPython Development Team
3 //
3 //
4 // Distributed under the terms of the BSD License. The full license is in
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
6 //----------------------------------------------------------------------------
7
7
8 //============================================================================
8 //============================================================================
9 // Pager
9 // Pager
10 //============================================================================
10 //============================================================================
11
11
12 var IPython = (function (IPython) {
12 var IPython = (function (IPython) {
13
13
14 var utils = IPython.utils;
14 var utils = IPython.utils;
15
15
16 var Pager = function (pager_selector, pager_splitter_selector) {
16 var Pager = function (pager_selector, pager_splitter_selector) {
17 this.pager_element = $(pager_selector);
17 this.pager_element = $(pager_selector);
18 this.pager_button_area = $('#pager_button_area');
18 this.pager_button_area = $('#pager_button_area');
19 var that = this;
19 var that = this;
20 this.percentage_height = 0.40;
20 this.percentage_height = 0.40;
21 this.pager_splitter_element = $(pager_splitter_selector)
21 this.pager_splitter_element = $(pager_splitter_selector)
22 .draggable({
22 .draggable({
23 containment: 'window',
23 containment: 'window',
24 axis:'y',
24 axis:'y',
25 helper: null ,
25 helper: null ,
26 drag: function(event, ui) {
26 drag: function(event, ui) {
27 // recalculate the amount of space the pager should take
27 // recalculate the amount of space the pager should take
28 var pheight = ($(body).height()-event.clientY-4);
28 var pheight = ($(body).height()-event.clientY-4);
29 var downprct = pheight/IPython.layout_manager.app_height();
29 var downprct = pheight/IPython.layout_manager.app_height();
30 downprct = Math.min(0.9, downprct);
30 downprct = Math.min(0.9, downprct);
31 if (downprct < 0.1) {
31 if (downprct < 0.1) {
32 that.percentage_height = 0.1;
32 that.percentage_height = 0.1;
33 that.collapse({'duration':0});
33 that.collapse({'duration':0});
34 } else if (downprct > 0.2) {
34 } else if (downprct > 0.2) {
35 that.percentage_height = downprct;
35 that.percentage_height = downprct;
36 that.expand({'duration':0});
36 that.expand({'duration':0});
37 }
37 }
38 IPython.layout_manager.do_resize();
38 IPython.layout_manager.do_resize();
39 }
39 }
40 });
40 });
41 this.expanded = false;
41 this.expanded = false;
42 this.style();
42 this.style();
43 this.create_button_area();
43 this.create_button_area();
44 this.bind_events();
44 this.bind_events();
45 };
45 };
46
46
47 Pager.prototype.create_button_area = function(){
47 Pager.prototype.create_button_area = function(){
48 var that = this;
48 var that = this;
49 this.pager_button_area.append(
49 this.pager_button_area.append(
50 $('<a>').attr('role', "button")
50 $('<a>').attr('role', "button")
51 .attr('title',"open the pager in an external window")
51 .addClass('ui-button')
52 .addClass('ui-button')
52 .click(function(){that.detach()})
53 .click(function(){that.detach()})
53 .attr('style','position: absolute; right: 10px;')
54 .attr('style','position: absolute; right: 10px;')
54 .append(
55 .append(
55 $('<span>').addClass("ui-icon ui-icon-arrowstop-l-n")
56 $('<span>').addClass("ui-icon ui-icon-arrowstop-l-n")
56 )
57 )
57 )
58 )
58 };
59 };
59
60
60 Pager.prototype.style = function () {
61 Pager.prototype.style = function () {
61 this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
62 this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
62 this.pager_element.addClass('border-box-sizing ui-widget');
63 this.pager_element.addClass('border-box-sizing ui-widget');
63 this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area, drag to Resize');
64 this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area, drag to Resize');
64 };
65 };
65
66
66
67
67 Pager.prototype.bind_events = function () {
68 Pager.prototype.bind_events = function () {
68 var that = this;
69 var that = this;
69
70
70 this.pager_element.bind('collapse_pager', function (event, extrap) {
71 this.pager_element.bind('collapse_pager', function (event, extrap) {
71 time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
72 time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
72 that.pager_element.hide(time);
73 that.pager_element.hide(time);
73 });
74 });
74
75
75 this.pager_element.bind('expand_pager', function (event, extrap) {
76 this.pager_element.bind('expand_pager', function (event, extrap) {
76 time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
77 time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
77 that.pager_element.show(time);
78 that.pager_element.show(time);
78 });
79 });
79
80
80 this.pager_splitter_element.hover(
81 this.pager_splitter_element.hover(
81 function () {
82 function () {
82 that.pager_splitter_element.addClass('ui-state-hover');
83 that.pager_splitter_element.addClass('ui-state-hover');
83 },
84 },
84 function () {
85 function () {
85 that.pager_splitter_element.removeClass('ui-state-hover');
86 that.pager_splitter_element.removeClass('ui-state-hover');
86 }
87 }
87 );
88 );
88
89
89 this.pager_splitter_element.click(function () {
90 this.pager_splitter_element.click(function () {
90 that.toggle();
91 that.toggle();
91 });
92 });
92
93
93 $([IPython.events]).on('open_with_text.Pager', function (event, data) {
94 $([IPython.events]).on('open_with_text.Pager', function (event, data) {
94 if (data.text.trim() !== '') {
95 if (data.text.trim() !== '') {
95 that.clear();
96 that.clear();
96 that.expand();
97 that.expand();
97 that.append_text(data.text);
98 that.append_text(data.text);
98 };
99 };
99 });
100 });
100 };
101 };
101
102
102
103
103 Pager.prototype.collapse = function (extrap) {
104 Pager.prototype.collapse = function (extrap) {
104 if (this.expanded === true) {
105 if (this.expanded === true) {
105 this.expanded = false;
106 this.expanded = false;
106 this.pager_element.add($('div#notebook')).trigger('collapse_pager', extrap);
107 this.pager_element.add($('div#notebook')).trigger('collapse_pager', extrap);
107 };
108 };
108 };
109 };
109
110
110
111
111 Pager.prototype.expand = function (extrap) {
112 Pager.prototype.expand = function (extrap) {
112 if (this.expanded !== true) {
113 if (this.expanded !== true) {
113 this.expanded = true;
114 this.expanded = true;
114 this.pager_element.add($('div#notebook')).trigger('expand_pager', extrap);
115 this.pager_element.add($('div#notebook')).trigger('expand_pager', extrap);
115 };
116 };
116 };
117 };
117
118
118
119
119 Pager.prototype.toggle = function () {
120 Pager.prototype.toggle = function () {
120 if (this.expanded === true) {
121 if (this.expanded === true) {
121 this.collapse();
122 this.collapse();
122 } else {
123 } else {
123 this.expand();
124 this.expand();
124 };
125 };
125 };
126 };
126
127
127
128
128 Pager.prototype.clear = function (text) {
129 Pager.prototype.clear = function (text) {
129 this.pager_element.empty();
130 this.pager_element.empty();
130 };
131 };
131
132
132 Pager.prototype.detach = function(){
133 Pager.prototype.detach = function(){
133 var w = window.open("","_blank")
134 var w = window.open("","_blank")
134 $(w.document.head)
135 $(w.document.head)
135 .append(
136 .append(
136 $('<link>')
137 $('<link>')
137 .attr('rel',"stylesheet")
138 .attr('rel',"stylesheet")
138 .attr('href',"/static/css/notebook.css")
139 .attr('href',"/static/css/notebook.css")
139 .attr('type',"text/css")
140 .attr('type',"text/css")
140 );
141 );
141 var pager_body = $(w.document.body)
142 var pager_body = $(w.document.body)
142 pager_body.attr('style','overflow:scroll');
143 pager_body.attr('style','overflow:scroll');
143
144
144 pager_body.append(this.pager_element.children())
145 pager_body.append(this.pager_element.children())
145 w.document.close();
146 w.document.close();
146 this.collapse();
147 this.collapse();
147
148
148 }
149 }
149
150
150 Pager.prototype.append_text = function (text) {
151 Pager.prototype.append_text = function (text) {
151 var toinsert = $("<div/>").addClass("output_area output_stream");
152 var toinsert = $("<div/>").addClass("output_area output_stream");
152 toinsert.append($('<pre/>').html(utils.fixCarriageReturn(utils.fixConsole(text))));
153 toinsert.append($('<pre/>').html(utils.fixCarriageReturn(utils.fixConsole(text))));
153 this.pager_element.append(toinsert);
154 this.pager_element.append(toinsert);
154 };
155 };
155
156
156
157
157 IPython.Pager = Pager;
158 IPython.Pager = Pager;
158
159
159 return IPython;
160 return IPython;
160
161
161 }(IPython));
162 }(IPython));
162
163
General Comments 0
You need to be logged in to leave comments. Login now