corrade-nucleus-nucleons – Diff between revs 35 and 37
?pathlinks?
Rev 35 | Rev 37 | |||
---|---|---|---|---|
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(data) { |
4 | $.get(path, function(nucleons) { |
|
5 | var nucleons = wasCSVToArray(data); |
- | ||
6 | var x = 0, y = 0; |
5 | var x = 0, y = 0; |
|
7 | $.each(nucleons, function(index, value) { |
6 | $.each(nucleons, function(index, value) { |
|
8 | // Skip files starting with full stop (POSIX). |
7 | // Skip files starting with full stop (POSIX). |
|
9 | if (/^\./.test(value)) return; |
8 | if (/^\./.test(value)) return; |
|
10 | $.get(path + '/' + value, function(doc) { |
9 | $.get(path + '/' + value, function(doc) { |
|
11 | var button = $(doc).get(0); |
10 | var button = $(doc).get(0); |
|
12 | // Translate the desktop icons so they do not overlap. |
11 | // Translate the desktop icons so they do not overlap. |
|
13 | button.style.webkitTransform = |
12 | button.style.webkitTransform = |
|
14 | button.style.transform = |
13 | button.style.transform = |
|
15 | 'translate(' + x + 'px, ' + y + 'px)'; |
14 | 'translate(' + x + 'px, ' + y + 'px)'; |
|
16 | |
15 | |
|
17 | // Update the position attributes |
16 | // Update the position attributes |
|
18 | button.setAttribute('data-x', x); |
17 | button.setAttribute('data-x', x); |
|
19 | button.setAttribute('data-y', y); |
18 | button.setAttribute('data-y', y); |
|
20 | |
19 | |
|
21 | $('#window-manager-desktop').append(button); |
20 | $('#window-manager-desktop').append(button); |
|
22 | // Translate by the desktop icon size. |
21 | // Translate by the desktop icon size. |
|
23 | x += 64; |
22 | x += 64; |
|
24 | }); |
23 | }); |
|
25 | }); |
24 | }); |
|
26 | }); |
25 | }); |
|
27 | } |
26 | } |
|
28 | |
27 | |
|
29 | // Open a window manager window. |
28 | // Open a window manager window. |
|
30 | function openWindowManagerWindow(nucleon) { |
29 | function openWindowManagerWindow(nucleon) { |
|
31 | // If the nucleon already exists, then do not append the content again. |
30 | // If the nucleon already exists, then do not append the content again. |
|
32 | if($('#' + nucleon).length) |
31 | if($('#' + nucleon).length) |
|
33 | return; |
32 | return; |
|
34 | |
33 | |
|
35 | // Change the nucleon icon to a loading icon. |
34 | // Change the nucleon icon to a loading icon. |
|
36 | $('#' + nucleon + '-window-manager-button-icon').attr('src', '/img/loader.gif'); |
35 | $('#' + nucleon + '-window-manager-button-icon').attr('src', '/img/loader.gif'); |
|
37 | |
36 | |
|
38 | // Disable button for successive clicks. |
37 | // Disable button for successive clicks. |
|
39 | $('#' + nucleon + '-window-manager-button').prop('disabled', true); |
38 | $('#' + nucleon + '-window-manager-button').prop('disabled', true); |
|
40 | |
39 | |
|
41 | // Load the nucleon. |
40 | // Load the nucleon. |
|
42 | $.get('/' + nucleon + '/index.html', function(data) { |
41 | $.get('/' + nucleon + '/index.html', function(data) { |
|
43 | // Select all new scripts that have to be inserted into the DOM. |
42 | // Select all new scripts that have to be inserted into the DOM. |
|
44 | var nucleonScripts = []; |
43 | var nucleonScripts = []; |
|
45 | $(data).find('script').each(function() { |
44 | $(data).find('script').each(function() { |
|
46 | var src = $(this).attr('src'); |
45 | var src = $(this).attr('src'); |
|
47 | if(src === undefined) |
46 | if(src === undefined) |
|
48 | return; |
47 | return; |
|
49 | nucleonScripts[src] = $(this); |
48 | nucleonScripts[src] = $(this); |
|
50 | }); |
49 | }); |
|
51 | // Remove scripts from the nucleon if they are already added to the DOM. |
50 | // Remove scripts from the nucleon if they are already added to the DOM. |
|
52 | var nowScripts = $(document).find('script').each(function() { |
51 | var nowScripts = $(document).find('script').each(function() { |
|
53 | var src = $(this).attr('src'); |
52 | var src = $(this).attr('src'); |
|
54 | if(nucleonScripts[src] === undefined) |
53 | if(nucleonScripts[src] === undefined) |
|
55 | return; |
54 | return; |
|
56 | nucleonScripts[src].remove(); |
55 | nucleonScripts[src].remove(); |
|
57 | }); |
56 | }); |
|
58 | $(data).hide().appendTo('#window-manager-desktop').fadeIn(750); |
57 | $(data).hide().appendTo('#window-manager-desktop').fadeIn(750); |
|
59 | }).done(function(data) { |
58 | }).done(function(data) { |
|
60 | // Change the nucleon icon back. |
59 | // Change the nucleon icon back. |
|
61 | $('#' + nucleon + '-window-manager-button-icon').attr('src', '/' + nucleon + '/img/' + nucleon + '.png'); |
60 | $('#' + nucleon + '-window-manager-button-icon').attr('src', '/' + nucleon + '/img/' + nucleon + '.png'); |
|
62 | // Enable the button. |
61 | // Enable the button. |
|
63 | $('#' + nucleon + '-window-manager-button').prop('disabled', false); |
62 | $('#' + nucleon + '-window-manager-button').prop('disabled', false); |
|
64 | }); |
63 | }); |
|
65 | } |
64 | } |
|
66 | |
65 | |
|
67 | // Retrieve the top-most window manager window z-index. |
66 | // Retrieve the top-most window manager window z-index. |
|
68 | function getTopWindowIndex() { |
67 | function getTopWindowIndex() { |
|
69 | return Math.max.apply(null, |
68 | return Math.max.apply(null, |
|
70 | $.map($('.window-manager-window'), function(e, n) { |
69 | $.map($('.window-manager-window'), function(e, n) { |
|
71 | if ($(e).css('position') != 'static') |
70 | if ($(e).css('position') != 'static') |
|
72 | return parseInt($(e).css('z-index')) || 1; |
71 | return parseInt($(e).css('z-index')) || 1; |
|
73 | }) |
72 | }) |
|
74 | ); |
73 | ); |
|
75 | } |
74 | } |
|
76 | |
75 | |
|
77 | // Draggable and moveable windows. |
76 | // Draggable and moveable windows. |
|
78 | $(document).ready(() => { |
77 | $(document).ready(() => { |
|
79 | // Window manager windows. |
78 | // Window manager windows. |
|
80 | interact('.window-manager-window') |
79 | interact('.window-manager-window') |
|
81 | .draggable({ |
80 | .draggable({ |
|
82 | // enable inertial throwing |
81 | // enable inertial throwing |
|
83 | inertia: true, |
82 | inertia: true, |
|
84 | // keep the element within the area of it's parent |
83 | // keep the element within the area of it's parent |
|
85 | restrict: { |
84 | restrict: { |
|
86 | restriction: $('#window-manager-desktop').get(0), |
85 | restriction: $('#window-manager-desktop').get(0), |
|
87 | endOnly: true, |
86 | endOnly: true, |
|
88 | elementRect: { top: 0, left: 0, bottom: 1, right: 1 } |
87 | elementRect: { top: 0, left: 0, bottom: 1, right: 1 } |
|
89 | }, |
88 | }, |
|
90 | |
89 | |
|
91 | // enable autoScroll |
90 | // enable autoScroll |
|
92 | autoScroll: true, |
91 | autoScroll: true, |
|
93 | |
92 | |
|
94 | onmove: dragMoveListener, |
93 | onmove: dragMoveListener, |
|
95 | onend: function (event) { |
94 | onend: function (event) { |
|
96 | event.target.style.opacity = 1; |
95 | event.target.style.opacity = 1; |
|
97 | }, |
96 | }, |
|
98 | onstart: function(event) { |
97 | onstart: function(event) { |
|
99 | // Move windows to top on drag. |
98 | // Move windows to top on drag. |
|
100 | event.target.style.zIndex = getTopWindowIndex() + 1; |
99 | event.target.style.zIndex = getTopWindowIndex() + 1; |
|
101 | event.target.style.opacity = 0.5; |
100 | event.target.style.opacity = 0.5; |
|
102 | } |
101 | } |
|
103 | }) |
102 | }) |
|
104 | .allowFrom('.panel-heading'); |
103 | .allowFrom('.panel-heading'); |
|
105 | |
104 | |
|
106 | // Window manager icons. |
105 | // Window manager icons. |
|
107 | interact('.window-manager-icon') |
106 | interact('.window-manager-icon') |
|
108 | .draggable({ |
107 | .draggable({ |
|
109 | // enable inertial throwing |
108 | // enable inertial throwing |
|
110 | inertia: false, |
109 | inertia: false, |
|
111 | // keep the element within the area of it's parent |
110 | // keep the element within the area of it's parent |
|
112 | restrict: { |
111 | restrict: { |
|
113 | restriction: $('#window-manager-desktop').get(0), |
112 | restriction: $('#window-manager-desktop').get(0), |
|
114 | endOnly: true, |
113 | endOnly: true, |
|
115 | elementRect: { top: 0, left: 0, bottom: 1, right: 1 } |
114 | elementRect: { top: 0, left: 0, bottom: 1, right: 1 } |
|
116 | }, |
115 | }, |
|
117 | snap: { |
116 | snap: { |
|
118 | targets: [ |
117 | targets: [ |
|
119 | interact.createSnapGrid({ x: 64, y: 64 }) |
118 | interact.createSnapGrid({ x: 64, y: 64 }) |
|
120 | ], |
119 | ], |
|
121 | range: Infinity, |
120 | range: Infinity, |
|
122 | relativePoints: [ { x: 0, y: 0 } ] |
121 | relativePoints: [ { x: 0, y: 0 } ] |
|
123 | }, |
122 | }, |
|
124 | // enable autoScroll |
123 | // enable autoScroll |
|
125 | autoScroll: true, |
124 | autoScroll: true, |
|
126 | |
125 | |
|
127 | onmove: dragMoveListener, |
126 | onmove: dragMoveListener, |
|
128 | onend: function (event) { |
127 | onend: function (event) { |
|
129 | event.target.style.opacity = 1; |
128 | event.target.style.opacity = 1; |
|
130 | }, |
129 | }, |
|
131 | onstart: function(event) { |
130 | onstart: function(event) { |
|
132 | event.target.style.opacity = 0.5; |
131 | event.target.style.opacity = 0.5; |
|
133 | } |
132 | } |
|
134 | }); |
133 | }); |
|
135 | |
134 | |
|
136 | // Closing windows. |
135 | // Closing windows. |
|
137 | $(document).on('click', '.window-manager-close-button', function(event) { |
136 | $(document).on('click', '.window-manager-close-button', function(event) { |
|
138 | var wm = $('#' + $(this).data('target')); |
137 | var wm = $('#' + $(this).data('target')); |
|
139 | wm.fadeOut(750, function() { |
138 | wm.fadeOut(750, function() { |
|
140 | wm.remove(); |
139 | wm.remove(); |
|
141 | }); |
140 | }); |
|
142 | }); |
141 | }); |
|
143 | |
142 | |
|
144 | // Windows clicking brings to front. |
143 | // Windows clicking brings to front. |
|
145 | $(document).on('click', '.window-manager-window', function(event) { |
144 | $(document).on('click', '.window-manager-window', function(event) { |
|
146 | $(this).attr('z-index', getTopWindowIndex() + 1); |
145 | $(this).attr('z-index', getTopWindowIndex() + 1); |
|
147 | }); |
146 | }); |
|
148 | |
147 | |
|
149 | function dragMoveListener (event) { |
148 | function dragMoveListener (event) { |
|
150 | var target = event.target, |
149 | var target = event.target, |
|
151 | // keep the dragged position in the data-x/data-y attributes |
150 | // keep the dragged position in the data-x/data-y attributes |
|
152 | x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, |
151 | x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, |
|
153 | y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; |
152 | y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; |
|
154 | |
153 | |
|
155 | // translate the element |
154 | // translate the element |
|
156 | target.style.webkitTransform = |
155 | target.style.webkitTransform = |
|
157 | target.style.transform = |
156 | target.style.transform = |
|
158 | 'translate(' + x + 'px, ' + y + 'px)'; |
157 | 'translate(' + x + 'px, ' + y + 'px)'; |
|
159 | |
158 | |
|
160 | // update the position attributes |
159 | // update the position attributes |
|
161 | target.setAttribute('data-x', x); |
160 | target.setAttribute('data-x', x); |
|
162 | target.setAttribute('data-y', y); |
161 | target.setAttribute('data-y', y); |
|
163 | } |
162 | } |
|
164 | |
163 | |
|
165 | // this is used later in the resizing and gesture demos |
164 | // this is used later in the resizing and gesture demos |
|
166 | window.dragMoveListener = dragMoveListener; |
165 | window.dragMoveListener = dragMoveListener; |
|
167 | }); |
166 | }); |
|
168 | |
167 | |
|
169 |
|
168 |
|
|
170 | |
169 | |
|
171 | |
170 | |
|
172 | |
171 | |