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

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