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