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

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