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