corrade-nucleus-nucleons – Diff between revs 42 and 43
?pathlinks?
Rev 42 | Rev 43 | |||
---|---|---|---|---|
1 | // Load the window manager desktop icons. |
1 | // Load the window manager desktop icons. |
|
2 | function loadWindowManagerIcons(path) { |
2 | function loadWindowManagerIcons(path) { |
|
3 | // Search and load all nucleons. |
3 | // Search and load all nucleons. |
|
4 | $.get(path, function(nucleons) { |
4 | $.get(path, function(nucleons) { |
|
5 | var ix = 0, iy = 0; |
5 | var ix = 0, iy = 0; |
|
6 | var states = {}; |
6 | var states = {}; |
|
7 | var cookie = Cookies.get('window-manager-icons'); |
7 | var cookie = Cookies.get('window-manager-icons'); |
|
8 | if(cookie) |
8 | if(cookie) |
|
9 | states = JSON.parse(cookie); |
9 | states = JSON.parse(cookie); |
|
10 | $.each(nucleons, function(index, file) { |
10 | $.each(nucleons, function(index, file) { |
|
11 | // Skip files starting with full stop (POSIX). |
11 | // Skip files starting with full stop (POSIX). |
|
12 | if (/^\./.test(file)) return; |
12 | if (/^\./.test(file)) return; |
|
13 | $.get(path + '/' + file, function(data) { |
13 | $.get(path + '/' + file, function(data) { |
|
14 | data = $(data).get(0); |
14 | data = $(data).get(0); |
|
15 | var nucleon = data.getAttribute('data-target'); |
15 | var nucleon = data.getAttribute('data-target'); |
|
16 | |
16 | |
|
17 | if(typeof states[nucleon] !== 'undefined') { |
17 | if(typeof states[nucleon] !== 'undefined') { |
|
18 | var sx = states[nucleon].x, |
18 | var sx = states[nucleon].x, |
|
19 | sy = states[nucleon].y; |
19 | sy = states[nucleon].y; |
|
20 | |
20 | |
|
21 | data.style.webkitTransform = |
21 | data.style.webkitTransform = |
|
22 | data.style.transform = |
22 | data.style.transform = |
|
23 | 'translate(' + sx + 'px, ' + sy + 'px)'; |
23 | 'translate(' + sx + 'px, ' + sy + 'px)'; |
|
24 | |
24 | |
|
25 | // Update the position attributes |
25 | // Update the position attributes |
|
26 | data.setAttribute('data-x', sx); |
26 | data.setAttribute('data-x', sx); |
|
27 | data.setAttribute('data-y', sy); |
27 | data.setAttribute('data-y', sy); |
|
28 | |
28 | |
|
29 | $('#window-manager-desktop').append(data); |
29 | $('#window-manager-desktop').append(data); |
|
30 | return; |
30 | return; |
|
31 | } |
31 | } |
|
32 | |
32 | |
|
33 | // Translate the desktop icons so they do not overlap. |
33 | // Translate the desktop icons so they do not overlap. |
|
34 | data.style.webkitTransform = |
34 | data.style.webkitTransform = |
|
35 | data.style.transform = |
35 | data.style.transform = |
|
36 | 'translate(' + ix + 'px, ' + iy + 'px)'; |
36 | 'translate(' + ix + 'px, ' + iy + 'px)'; |
|
37 | |
37 | |
|
38 | // Update the position attributes |
38 | // Update the position attributes |
|
39 | data.setAttribute('data-x', ix); |
39 | data.setAttribute('data-x', ix); |
|
40 | data.setAttribute('data-y', iy); |
40 | data.setAttribute('data-y', iy); |
|
41 | |
41 | |
|
42 | $('#window-manager-desktop').append(data); |
42 | $('#window-manager-desktop').append(data); |
|
43 | // Translate by the desktop icon size. |
43 | // Translate by the desktop icon size. |
|
44 | ix += 64; |
44 | ix += 64; |
|
45 | }); |
45 | }); |
|
46 | }); |
46 | }); |
|
47 | }); |
47 | }); |
|
48 | } |
48 | } |
|
49 | |
49 | |
|
50 | // Open a window manager window. |
50 | // Open a window manager window. |
|
51 | function openWindowManagerWindow(nucleon) { |
51 | function openWindowManagerWindow(nucleon) { |
|
52 | // If the nucleon already exists, then do not append the content again. |
52 | // If the nucleon already exists, then do not append the content again. |
|
53 | if($('#' + nucleon).length) |
53 | if($('#' + nucleon).length) |
|
54 | return; |
54 | return; |
|
55 | |
55 | |
|
56 | // Store the icon. |
56 | // Store the icon. |
|
57 | var nucleon_icon = $('#' + nucleon + '-window-manager-button-icon').attr('src'); |
57 | var nucleon_icon = $('#' + nucleon + '-window-manager-button-icon').attr('src'); |
|
58 | |
58 | |
|
59 | // Change the nucleon icon to a loading icon. |
59 | // Change the nucleon icon to a loading icon. |
|
60 | $('#' + nucleon + '-window-manager-button-icon').attr('src', '/img/loader.gif'); |
60 | $('#' + nucleon + '-window-manager-button-icon').attr('src', '/img/loader.gif'); |
|
61 | |
61 | |
|
62 | // Disable button for successive clicks. |
62 | // Disable button for successive clicks. |
|
63 | $('#' + nucleon + '-window-manager-button').prop('disabled', true); |
63 | $('#' + nucleon + '-window-manager-button').prop('disabled', true); |
|
64 | |
64 | |
|
65 | // Load the nucleon. |
65 | // Load the nucleon. |
|
66 | $.get('/' + nucleon + '/index.html', function(data) { |
66 | $.get('/' + nucleon + '/index.html', function(data) { |
|
67 | // Get the DOM object. |
67 | // Get the DOM object. |
|
68 | data = $(data).get(0); |
68 | data = $(data).get(0); |
|
69 | |
69 | |
|
70 | // Select all new scripts that have to be inserted into the DOM. |
70 | // Select all new scripts that have to be inserted into the DOM. |
|
71 | var nucleonScripts = []; |
71 | var nucleonScripts = []; |
|
72 | $(data).find('script').each(function() { |
72 | $(data).find('script').each(function() { |
|
73 | var src = $(this).attr('src'); |
73 | var src = $(this).attr('src'); |
|
74 | if(src === undefined) |
74 | if(src === undefined) |
|
75 | return; |
75 | return; |
|
76 | nucleonScripts[src] = $(this); |
76 | nucleonScripts[src] = $(this); |
|
77 | }); |
77 | }); |
|
78 | // Remove scripts from the nucleon if they are already added to the DOM. |
78 | // Remove scripts from the nucleon if they are already added to the DOM. |
|
79 | $(document).find('script').each(function() { |
79 | $(document).find('script').each(function() { |
|
80 | var src = $(this).attr('src'); |
80 | var src = $(this).attr('src'); |
|
81 | if(nucleonScripts[src] === undefined) |
81 | if(nucleonScripts[src] === undefined) |
|
82 | return; |
82 | return; |
|
83 | nucleonScripts[src].remove(); |
83 | nucleonScripts[src].remove(); |
|
84 | }); |
84 | }); |
|
85 | |
85 | |
|
86 | // Restore windows to their saved position. |
86 | // Restore windows to their saved position. |
|
87 | var cookie = Cookies.get('window-manager-windows'); |
87 | var cookie = Cookies.get('window-manager-windows'); |
|
88 | if(cookie) { |
88 | if(cookie) { |
|
89 | var states = JSON.parse(cookie); |
89 | var states = JSON.parse(cookie); |
|
90 | if(typeof states[nucleon] !== 'undefined') { |
90 | if(typeof states[nucleon] !== 'undefined') { |
|
91 | var x = states[nucleon].x, |
91 | var x = states[nucleon].x, |
|
92 | y = states[nucleon].y, |
92 | y = states[nucleon].y, |
|
93 | wm = $(data).find('.window-manager-window').get(0); |
93 | wm = $(data).find('.window-manager-window').get(0); |
|
94 | |
94 | |
|
95 | if(typeof wm !== 'undefined') { |
- | ||
96 | wm.style.webkitTransform = |
95 | wm.style.webkitTransform = |
|
97 | wm.style.transform = |
96 | wm.style.transform = |
|
98 | 'translate(' + x + 'px, ' + y + 'px)'; |
97 | 'translate(' + x + 'px, ' + y + 'px)'; |
|
99 | |
98 | |
|
100 | // Update the position attributes |
99 | // Update the position attributes |
|
101 | wm.setAttribute('data-x', x); |
100 | wm.setAttribute('data-x', x); |
|
102 | wm.setAttribute('data-y', y); |
101 | wm.setAttribute('data-y', y); |
|
103 | } |
- | ||
104 | } |
102 | } |
|
105 | } |
103 | } |
|
106 | $(data).hide().appendTo('#window-manager-desktop').fadeIn(750); |
104 | $(data).hide().appendTo('#window-manager-desktop').fadeIn(750); |
|
107 | }).done(function(data) { |
105 | }).done(function(data) { |
|
108 | // Change the nucleon icon back. |
106 | // Change the nucleon icon back. |
|
109 | $('#' + nucleon + '-window-manager-button-icon').attr('src', nucleon_icon); |
107 | $('#' + nucleon + '-window-manager-button-icon').attr('src', nucleon_icon); |
|
110 | // Enable the button. |
108 | // Enable the button. |
|
111 | $('#' + nucleon + '-window-manager-button').prop('disabled', false); |
109 | $('#' + nucleon + '-window-manager-button').prop('disabled', false); |
|
112 | }); |
110 | }); |
|
113 | } |
111 | } |
|
114 | |
112 | |
|
115 | // Retrieve the top-most window manager window z-index. |
113 | // Retrieve the top-most window manager window z-index. |
|
116 | function getTopWindowIndex() { |
114 | function getTopWindowIndex() { |
|
117 | return Math.max.apply(null, |
115 | return Math.max.apply(null, |
|
118 | $.map($('.window-manager-window'), function(e, n) { |
116 | $.map($('.window-manager-window'), function(e, n) { |
|
119 | if ($(e).css('position') != 'static') |
117 | if ($(e).css('position') != 'static') |
|
120 | return parseInt($(e).css('z-index')) || 1; |
118 | return parseInt($(e).css('z-index')) || 1; |
|
121 | }) |
119 | }) |
|
122 | ); |
120 | ); |
|
123 | } |
121 | } |
|
124 | |
122 | |
|
125 | // Draggable and moveable windows. |
123 | // Draggable and moveable windows. |
|
126 | $(document).ready(() => { |
124 | $(document).ready(() => { |
|
127 | // Window manager windows. |
125 | // Window manager windows. |
|
128 | interact('.window-manager-window') |
126 | interact('.window-manager-window') |
|
129 | .draggable({ |
127 | .draggable({ |
|
130 | // enable inertial throwing |
128 | // enable inertial throwing |
|
131 | inertia: true, |
129 | inertia: true, |
|
132 | // keep the element within the area of it's parent |
130 | // keep the element within the area of it's parent |
|
133 | restrict: { |
131 | restrict: { |
|
134 | restriction: $('#window-manager-desktop').get(0), |
132 | restriction: $('#window-manager-desktop').get(0), |
|
135 | endOnly: true, |
133 | endOnly: true, |
|
136 | elementRect: { top: 0, left: 0, bottom: 1, right: 1 } |
134 | elementRect: { top: 0, left: 0, bottom: 1, right: 1 } |
|
137 | }, |
135 | }, |
|
138 | |
136 | |
|
139 | // enable autoScroll |
137 | // enable autoScroll |
|
140 | autoScroll: true, |
138 | autoScroll: true, |
|
141 | |
139 | |
|
142 | onmove: dragMoveListener, |
140 | onmove: dragMoveListener, |
|
143 | onend: function (event) { |
141 | onend: function (event) { |
|
144 | event.target.style.opacity = 1; |
142 | event.target.style.opacity = 1; |
|
145 | |
- | ||
146 | // Save the window position. |
- | ||
147 | var states = {}; |
- | ||
148 | var cookie = Cookies.get('window-manager-windows'); |
- | ||
149 | if(cookie) |
- | ||
150 | states = JSON.parse(cookie); |
- | ||
151 | |
- | ||
152 | $('.window-manager-window').each(function(i, wm) { |
- | ||
153 | states[$(wm).data('target')] = { |
- | ||
154 | x: $(wm).data('x'), |
- | ||
155 | y: $(wm).data('y') |
- | ||
156 | }; |
- | ||
157 | }); |
- | ||
158 | |
- | ||
159 | Cookies.set('window-manager-windows', states, { path: '' }); |
- | ||
160 | }, |
143 | }, |
|
161 | onstart: function(event) { |
144 | onstart: function(event) { |
|
162 | // Move windows to top on drag. |
145 | // Move windows to top on drag. |
|
163 | event.target.style.zIndex = getTopWindowIndex() + 1; |
146 | event.target.style.zIndex = getTopWindowIndex() + 1; |
|
164 | event.target.style.opacity = 0.5; |
147 | event.target.style.opacity = 0.5; |
|
165 | } |
148 | } |
|
166 | }) |
149 | }) |
|
167 | .allowFrom('.panel-heading'); |
150 | .allowFrom('.panel-heading'); |
|
168 | |
151 | |
|
169 | // Window manager icons. |
152 | // Window manager icons. |
|
170 | interact('.window-manager-icon') |
153 | interact('.window-manager-icon') |
|
171 | .draggable({ |
154 | .draggable({ |
|
172 | // enable inertial throwing |
155 | // enable inertial throwing |
|
173 | inertia: false, |
156 | inertia: false, |
|
174 | // keep the element within the area of it's parent |
157 | // keep the element within the area of it's parent |
|
175 | restrict: { |
158 | restrict: { |
|
176 | restriction: $('#window-manager-desktop').get(0), |
159 | restriction: $('#window-manager-desktop').get(0), |
|
177 | endOnly: true, |
160 | endOnly: true, |
|
178 | elementRect: { top: 0, left: 0, bottom: 1, right: 1 } |
161 | elementRect: { top: 0, left: 0, bottom: 1, right: 1 } |
|
179 | }, |
162 | }, |
|
180 | snap: { |
163 | snap: { |
|
181 | targets: [ |
164 | targets: [ |
|
182 | interact.createSnapGrid({ x: 64, y: 64 }) |
165 | interact.createSnapGrid({ x: 64, y: 64 }) |
|
183 | ], |
166 | ], |
|
184 | range: Infinity, |
167 | range: Infinity, |
|
185 | relativePoints: [ { x: 0, y: 0 } ] |
168 | relativePoints: [ { x: 0, y: 0 } ] |
|
186 | }, |
169 | }, |
|
187 | // enable autoScroll |
170 | // enable autoScroll |
|
188 | autoScroll: true, |
171 | autoScroll: true, |
|
189 | |
172 | |
|
190 | onmove: dragMoveListener, |
173 | onmove: dragMoveListener, |
|
191 | onend: function (event) { |
174 | onend: function (event) { |
|
192 | event.target.style.opacity = 1; |
175 | event.target.style.opacity = 1; |
|
193 | |
- | ||
194 | // Save the icon position. |
- | ||
195 | var states = {}; |
- | ||
196 | var cookie = Cookies.get('window-manager-icons'); |
- | ||
197 | if(cookie) |
- | ||
198 | states = JSON.parse(cookie); |
- | ||
199 | |
- | ||
200 | $('.window-manager-icon').each(function(i, wm) { |
- | ||
201 | states[$(wm).data('target')] = { |
- | ||
202 | x: $(wm).data('x'), |
- | ||
203 | y: $(wm).data('y') |
- | ||
204 | }; |
- | ||
205 | }); |
- | ||
206 | |
- | ||
207 | Cookies.set('window-manager-icons', states, { path: '' }); |
- | ||
208 | }, |
176 | }, |
|
209 | onstart: function(event) { |
177 | onstart: function(event) { |
|
210 | event.target.style.opacity = 0.5; |
178 | event.target.style.opacity = 0.5; |
|
211 | } |
179 | } |
|
212 | }); |
180 | }); |
|
213 | |
181 | |
|
214 | // Closing windows. |
182 | // Closing windows. |
|
215 | $(document).on('click', '.window-manager-close-button', function(event) { |
183 | $(document).on('click', '.window-manager-close-button', function(event) { |
|
216 | var wm = $('#' + $(this).data('target')); |
184 | var wm = $('#' + $(this).data('target')); |
|
217 | wm.fadeOut(750, function() { |
185 | wm.fadeOut(750, function() { |
|
218 | wm.remove(); |
186 | wm.remove(); |
|
219 | }); |
187 | }); |
|
220 | }); |
188 | }); |
|
221 | |
189 | |
|
222 | // Windows clicking brings to front. |
190 | // Windows clicking brings to front. |
|
223 | $(document).on('click', '.window-manager-window', function(event) { |
191 | $(document).on('click', '.window-manager-window', function(event) { |
|
224 | $(event.target) |
192 | $(event.target) |
|
225 | .closest('.window-manager-window') |
193 | .closest('.window-manager-window') |
|
226 | .css('z-index', getTopWindowIndex() + 1); |
194 | .css('z-index', getTopWindowIndex() + 1); |
|
227 | }); |
195 | }); |
|
228 | |
196 | |
|
229 | function dragMoveListener (event) { |
197 | function dragMoveListener (event) { |
|
230 | var target = event.target, |
198 | var target = event.target, |
|
231 | // keep the dragged position in the data-x/data-y attributes |
199 | // keep the dragged position in the data-x/data-y attributes |
|
232 | x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, |
200 | x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, |
|
233 | y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; |
201 | y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; |
|
234 | |
202 | |
|
235 | // translate the element |
203 | // translate the element |
|
236 | target.style.webkitTransform = |
204 | target.style.webkitTransform = |
|
237 | target.style.transform = |
205 | target.style.transform = |
|
238 | 'translate(' + x + 'px, ' + y + 'px)'; |
206 | 'translate(' + x + 'px, ' + y + 'px)'; |
|
239 | |
207 | |
|
240 | // update the position attributes |
208 | // update the position attributes |
|
241 | target.setAttribute('data-x', x); |
209 | target.setAttribute('data-x', x); |
|
242 | target.setAttribute('data-y', y); |
210 | target.setAttribute('data-y', y); |
|
- | 211 | |
||
- | 212 | if(target.classList.contains('window-manager-window')) { |
||
- | 213 | // Save the window position. |
||
- | 214 | var states = {}; |
||
- | 215 | var cookie = Cookies.get('window-manager-windows'); |
||
- | 216 | if(cookie) |
||
- | 217 | states = JSON.parse(cookie); |
||
- | 218 | |
||
- | 219 | states[$(event.target).data('target')] = { |
||
- | 220 | x: x, |
||
- | 221 | y: y |
||
- | 222 | }; |
||
- | 223 | |
||
- | 224 | Cookies.set('window-manager-windows', states, { path: '' }); |
||
- | 225 | } |
||
- | 226 | |
||
- | 227 | if(target.classList.contains('window-manager-icon')) { |
||
- | 228 | // Save the icon position. |
||
- | 229 | var states = {}; |
||
- | 230 | var cookie = Cookies.get('window-manager-icons'); |
||
- | 231 | if(cookie) |
||
- | 232 | states = JSON.parse(cookie); |
||
- | 233 | |
||
- | 234 | states[$(event.target).data('target')] = { |
||
- | 235 | x: x, |
||
- | 236 | y: y |
||
- | 237 | }; |
||
- | 238 | |
||
- | 239 | Cookies.set('window-manager-icons', states, { path: '' }); |
||
- | 240 | } |
||
243 | } |
241 | } |
|
244 | |
242 | |
|
245 | // this is used later in the resizing and gesture demos |
243 | // this is used later in the resizing and gesture demos |
|
246 | window.dragMoveListener = dragMoveListener; |
244 | window.dragMoveListener = dragMoveListener; |
|
247 | }); |
245 | }); |
|
248 | |
246 | |
|
249 |
|
247 |
|
|
250 | |
248 | |
|
251 | |
249 | |
|
252 | |
250 | |