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