was.wm.js – Diff between revs 4 and 7

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