was.wm.js – Blame information for rev 8

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