was.wm.js – Blame information for rev 10

Subversion Repositories:
Rev:
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.
10 office 72 openWindowManagerWindow(nucleon, file) {
8 office 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