Project

General

Profile

1811q_201509008_2.txt

Sergey Ivanovskiy, 09/08/2015 01:09 PM

Download (17.5 KB)

 
1
=== modified file 'src/com/goldencode/p2j/ui/client/driver/web/index.html'
2
--- src/com/goldencode/p2j/ui/client/driver/web/index.html	2015-09-06 23:47:37 +0000
3
+++ src/com/goldencode/p2j/ui/client/driver/web/index.html	2015-09-08 16:08:21 +0000
4
@@ -42,8 +42,6 @@
5
                'referrer' : '${referrer}',
6
                'container' : 'cont'
7
             });
8
-            
9
-            document.getElementById("view-log").addEventListener('click', p2j.logger.viewLog, true);
10
          });
11
       });
12
       </script>
13
@@ -61,9 +59,6 @@
14
          </audio>
15
          
16
       </div>
17
-      <div style="position:fixed;top:600px;left:600px;visibility:true">
18
-         <button id="view-log" style="position:relative">View Log Output</button>
19
-      </div>
20
       <form name="form" action="javascript:void(0);" method="post">
21
          <input type="text" name="copy" id="copy" value="" style="opacity:0;position:fixed;top:0px;left:0px;margin-left:-200px"/>
22
       </form>
23

    
24
=== modified file 'src/com/goldencode/p2j/ui/client/driver/web/res/p2j.js'
25
--- src/com/goldencode/p2j/ui/client/driver/web/res/p2j.js	2015-09-05 16:09:44 +0000
26
+++ src/com/goldencode/p2j/ui/client/driver/web/res/p2j.js	2015-09-08 15:37:34 +0000
27
@@ -98,11 +98,11 @@
28
       // init modules (don't change the order here!)
29
       p2j.logger.init(1024);
30
       p2j.sound.init(cfg);
31
+      p2j.fonts.init();
32
       p2j.screen.init(cfg);
33
       p2j.socket.init(cfg);
34
       p2j.keyboard.init();
35
       p2j.clipboard.init(cfg);
36
-      p2j.fonts.init();
37
    };
38
    
39
    /**
40

    
41
=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js'
42
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js	2015-09-08 10:15:53 +0000
43
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js	2015-09-08 16:30:58 +0000
44
@@ -734,6 +734,9 @@
45
                fontId = p2j.socket.readInt32BinaryMessage(message, idx + 1);
46
 
47
                setFont(this.ctx, fontId);
48
+               
49
+               //sets font for the task bar
50
+               taskBar.setDefaultFont(fontId);
51
                break;
52
             case ops.SET_FONT_STYLE:
53
                var style = p2j.socket.readInt32BinaryMessage(message, idx + 1);
54
@@ -1594,6 +1597,7 @@
55
             sendWindowStateActive,
56
             [194, 194, 194],
57
             [128, 128, 128],
58
+            p2j.fonts,
59
             p2j.logger);
60
       taskBar = desktop.getTaskBar();
61
    };
62

    
63
=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js'
64
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js	2015-09-07 21:26:31 +0000
65
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js	2015-09-08 16:43:41 +0000
66
@@ -52,10 +52,12 @@
67
  * @param    {Array} fg
68
  *           The foreground task bar color for task icons. It is represented by the 3-elements array
69
  *           filled with red, green and blue values from 0 to 255.
70
+ * @param    {Object} fontsManager
71
+ *           The p2j fonts manager.
72
  * @param    {Object} logger
73
  *           The p2j global application logger.
74
  */
75
-function VirtualDesktop(taskIconOnClickCallback, bg, fg, logger)
76
+function VirtualDesktop(taskIconOnClickCallback, bg, fg, fontsManager, logger)
77
 {
78
    /** task bar id*/
79
    var TASK_BAR_ID = "taskBar";
80
@@ -65,7 +67,12 @@
81
    
82
    /** task bar side */
83
    var TASK_BAR_WIDTH  = 42;
84
-   
85
+
86
+   /** z-index is assigned to the drop zone to which the task bar is attached. */
87
+   var MAX_Z_INDEX = 1000;
88
+   /** z-index is assigned to all others drop zones */
89
+   var MIN_Z_INDEX = 1;
90
+
91
    /** the parent element for the virtual desktop */
92
    var desktop = document.createElement("div");
93
    
94
@@ -83,7 +90,7 @@
95
    desktop.appendChild(bottom);
96
    desktop.appendChild(createRightDropZone(DOCK_CLASS_NAME, TASK_BAR_WIDTH));
97
    
98
-   var taskBar = new TaskBar(taskBarPeer, bg, fg, logger);
99
+   var taskBar = new TaskBar(taskBarPeer, bg, fg, fontsManager, logger);
100
 
101
    /**
102
     * Creates the bottom drop zone.
103
@@ -107,6 +114,8 @@
104
       
105
       bottom.style["height"] = height + "px";
106
       bottom.style["width"]  = "100%";
107
+
108
+      bottom.style.zIndex = MAX_Z_INDEX;
109
       return bottom;
110
    };
111
    
112
@@ -132,6 +141,8 @@
113
       
114
       right.style["height"] = "100%";
115
       right.style["width"]  = width + "px";
116
+
117
+      right.style.zIndex = MIN_Z_INDEX;
118
       return right;
119
    };
120
    
121
@@ -148,10 +159,14 @@
122
    {
123
       var peer = document.createElement("div");
124
       peer.id = id;
125
+      peer.tabIndex = 1;
126
       peer.style["position"] = "relative";
127
       
128
       peer.style["height"] = "100%";
129
       peer.style["width"]  = "100%";
130
+      
131
+      peer.style.zIndex = MAX_Z_INDEX;
132
+      
133
       peer.draggable = true;
134
       return peer;
135
    };
136
@@ -179,38 +194,46 @@
137
     * @param    {Array} fg
138
     *           The foreground task bar color for task icons. It is represented by the 3-elements array
139
     *           filled with red, green and blue values from 0 to 255.
140
+    * @param    {Object} fontsManager
141
+    *           The p2j fonts manager.
142
     * @param    {Object} logger
143
     *           The p2j global application logger.
144
     */
145
-   function TaskBar(peer, bg, fg, logger)
146
+   function TaskBar(peer, bg, fg, fontsManager, logger)
147
    {
148
       var DRAGGED_OPACITY = 0.3;
149
       var TOP_PADDING  = 2;
150
       var LEFT_PADDING = 2;
151
       var TASK_BAR_TITLE = "Task Bar"; 
152
       var TASK_ICON_WIDTH  = 40; 
153
-      var TASK_ICON_HEIGHT = 32; 
154
-      
155
+      var TASK_ICON_HEIGHT = 32;
156
       var SHIFT = 2;
157
       
158
+      var TASK_BAR_FONT_ID = createDefaultFont();
159
+      
160
+      
161
       var dragged;
162
       var canvas = document.createElement('canvas');
163
       canvas.className="canvas";
164
       canvas.style["height"] = "100%";
165
       canvas.style["width"]  = "100%";
166
+      canvas.style.zIndex = MAX_Z_INDEX;
167
       
168
       peer.appendChild(canvas);
169
       var ctx = canvas.getContext('2d', {alpha : true});
170
 //      console.log("peer width = " + peer.offsetWidth);
171
 //      console.log("peer height = " + peer.offsetHeight);
172
       var strokesManager = new LineStrokes();
173
-      var canvasRenderer = new CanvasRenderer(canvas, ctx, strokesManager, logger);
174
+      var canvasRenderer = new CanvasRenderer(canvas, ctx, strokesManager, fontsManager, logger);
175
       
176
       var taskIcons = [];
177
 
178
+      var viewLogButton = createViewLogButton(logger);
179
+
180
       var foreground  = fg;
181
       var background  = bg;
182
-      
183
+
184
+
185
       if (peer)
186
       {
187
          /** events fired on the draggable target */
188
@@ -221,13 +244,86 @@
189
       }
190
       
191
       /**
192
+       * Creates the default font for the task bar.
193
+       * It is added for the standalone test.
194
+       */
195
+      function createDefaultFont()
196
+      {
197
+         var font = 1;
198
+         var name = "sans-serif";
199
+         var size = 8;
200
+         var style = 1;
201
+         var b64Font = "";
202
+         return fontsManager.createFont(font, name, size, style, b64Font);
203
+      };
204
+      
205
+      /**
206
        * The default task bar tooltip.
207
        */
208
       function setDefaultTooltip()
209
       {
210
          peer.title = TASK_BAR_TITLE;
211
       }
212
-
213
+      /**
214
+       * The special use case: view log.
215
+       * 
216
+       * @param    {Object} logger
217
+       *           The application logger.
218
+       * @return   {TaskIcon}
219
+       *           The view log button.
220
+       */
221
+      function createViewLogButton(logger)
222
+      {
223
+         var taskIcon = new TaskIcon(
224
+               {title : "View Log Output"},
225
+               null, 3 * TASK_ICON_WIDTH, TASK_ICON_HEIGHT, fg);
226
+         taskIcon.setActive(false);
227
+         /**
228
+          * Opens new log window.
229
+          */
230
+         taskIcon.doClick = function()
231
+         {
232
+            logger.viewLog();
233
+            /**
234
+             * Change the view log button to inactive after 500 ms.
235
+             */
236
+            window.setTimeout(
237
+                  function()
238
+                  {
239
+                     taskIcon.setActive(false);
240
+                     taskIcon.draw();
241
+                  }, 500);
242
+         }
243
+         return taskIcon;
244
+      }
245
+      
246
+      /**
247
+       * Layouts the view log button on the task bar.
248
+       * 
249
+       * @param    {Boolean} horizontalLayout
250
+       *           Indicates the task bar layout, true if the task bar is along a horizontal line, otherwise,
251
+       *           it is along a vertical line.
252
+       */
253
+      function doViewLogButtonLayout(width, height, horizontalLayout)
254
+      {
255
+         var x;
256
+         var y;
257
+         if (horizontalLayout)
258
+         {
259
+            x = width - viewLogButton.width - LEFT_PADDING;
260
+            // to place on the centered horizontal line of the task bar.
261
+            y = (height - viewLogButton.height) / 2;
262
+         }
263
+         else
264
+         {
265
+            // to place on the centered vertical line of the task bar.
266
+            x = (width - viewLogButton.width) / 2;
267
+            y = height - viewLogButton.height - TOP_PADDING;
268
+         }
269
+         viewLogButton.setLocation(x, y);
270
+         viewLogButton.draw();
271
+      }
272
+      
273
       /**
274
        * Layouts task icons according to the current task bar position:
275
        * the horizontal or the vertical.
276
@@ -245,6 +341,11 @@
277
 //         console.log("canvas height = " + canvas.height);
278
          
279
          canvasRenderer.draw3DRect(ctx, 0, 0, width, height, background, true, true);
280
+         //check taskIcons is not empty
281
+         if (taskIcons.length === 0)
282
+         {
283
+            return;
284
+         }
285
          
286
          var horizontalLayout;
287
          
288
@@ -256,7 +357,6 @@
289
          {
290
             horizontalLayout = false;
291
          }
292
-         
293
          var x;
294
          var y;
295
          
296
@@ -264,12 +364,12 @@
297
          {
298
             x = LEFT_PADDING;
299
             // to place on the centered horizontal line of the task bar.
300
-            y = (height - TASK_ICON_HEIGHT) / 2;
301
+            y = (height - taskIcons[0].height) / 2;
302
          }
303
          else
304
          {
305
             // to place on the centered vertical line of the task bar.
306
-            x = (width - TASK_ICON_WIDTH) / 2;
307
+            x = (width - taskIcons[0].width) / 2;
308
             y = TOP_PADDING;
309
          }
310
          
311
@@ -287,6 +387,7 @@
312
                y += (SHIFT + taskIcon.height);
313
             }
314
          }
315
+         doViewLogButtonLayout(width, height, horizontalLayout);
316
       }
317
       
318
       /**
319
@@ -349,6 +450,15 @@
320
       
321
       this.addTaskIcon    = addTaskIcon;
322
       this.setIconForTask = setIconForTask;
323
+      this.setDefaultFont = setDefaultFont;
324
+      
325
+      /**
326
+       * Sets the default font to be used by the task bar.
327
+       */
328
+      function setDefaultFont(fontId)
329
+      {
330
+         TASK_BAR_FONT_ID = fontId;
331
+      };
332
 
333
       /**
334
        * Find the window task that represents the target window.
335
@@ -361,16 +471,15 @@
336
        */
337
       function findTaskIcon(windowId)
338
       {
339
-         var taskIcon;
340
          for (var i = 0; i < taskIcons.length; i++)
341
          {
342
             var taskIcon = taskIcons[i];
343
             if (taskIcon.win.id === windowId)
344
             {
345
-               break;
346
+               return taskIcon;
347
             }
348
          }
349
-         return taskIcon;
350
+         return null;
351
       };
352
       
353
       /**
354
@@ -382,7 +491,7 @@
355
       this.iconify = function(windowId)
356
       {
357
          var taskIcon = findTaskIcon(windowId);
358
-         if (taskIcon === undefined)
359
+         if (taskIcon === null)
360
          {
361
             return;
362
          }
363
@@ -400,7 +509,7 @@
364
       this.deiconify = function(windowId)
365
       {
366
          var taskIcon = findTaskIcon(windowId);
367
-         if (taskIcon === undefined)
368
+         if (taskIcon === null)
369
          {
370
             return;
371
          }
372
@@ -447,6 +556,9 @@
373
       /* events fired on the drop targets */
374
       document.addEventListener("dragover", function(event) { event.preventDefault(); }, false);
375
 
376
+      /**
377
+       * The dragged task panel enters the drop zone
378
+       */
379
       document.addEventListener("dragenter", function( event )
380
       {
381
          var cls = event.target.className;
382
@@ -455,7 +567,10 @@
383
              event.target.style["background"] = getTransparentColor(background, 0.5);
384
           }
385
       }, false);
386
-
387
+      
388
+      /**
389
+       * The dragged task panel leaves the drop zone
390
+       */
391
       document.addEventListener("dragleave", function( event )
392
       {
393
          var cls = event.target.className;
394
@@ -466,6 +581,9 @@
395
          }
396
       }, false);
397
 
398
+      /**
399
+       * The dragged task panel is attached to new drop zone
400
+       */
401
       document.addEventListener("drop", function( event )
402
       {
403
          var cls = event.target.className;
404
@@ -476,6 +594,7 @@
405
             try
406
             {
407
                event.target.appendChild(dragged);
408
+               event.target.style.zIndex = MAX_Z_INDEX;
409
                parent.style["background"] = getTransparentColor(background, 0.0);
410
             }
411
             catch(e)
412
@@ -488,6 +607,70 @@
413
       }, false);
414
 
415
       /**
416
+       * Adds the "on click" task bar action. If a task icon widget gets the mouse pointer,
417
+       * then this icon widget sets the active state and sends the request to server in order
418
+       * to change the state of the window represented by this widget.
419
+       */
420
+      canvas.addEventListener("click", function(event)
421
+      {
422
+         //special view log use case.
423
+         if (viewLogButton.testMousePointerInside(event) && !viewLogButton.isActive())
424
+         {
425
+            viewLogButton.setActive(true);
426
+            viewLogButton.doClick();
427
+            viewLogButton.draw();
428
+            return;
429
+         }
430
+         for (var i = 0; i < taskIcons.length; i++)
431
+         {
432
+            var taskIcon = taskIcons[i];
433
+            if (taskIcon.testMousePointerInside(event) && !taskIcon.isActive())
434
+            {
435
+               taskIcon.setActive(true);
436
+               if (taskIconOnClickCallback)
437
+               {
438
+                  taskIconOnClickCallback(taskIcon.win.id);
439
+               }
440
+               taskIcon.draw();
441
+               break;
442
+            }
443
+            
444
+         }
445
+      });
446
+
447
+      /**
448
+       * Changes the tooltip for the task bar peer if the mouse pointer is over the task widget.
449
+       * 
450
+       * @param    {MouseEvent} event
451
+       *           Describes the current mouse pointer.
452
+       */
453
+      function changeTooltipOverWidget(event)
454
+      {
455
+         //special view log use case.
456
+         if (viewLogButton.testMousePointerInside(event))
457
+         {
458
+            peer.title = viewLogButton.win.title;
459
+            return;
460
+         }
461
+         
462
+         for (var i = 0; i < taskIcons.length; i++)
463
+         {
464
+            var taskIcon = taskIcons[i];
465
+            if (taskIcon.testMousePointerInside(event))
466
+            {
467
+               peer.title = (taskIcon.win.title !== null && taskIcon.win.title !== undefined)
468
+                                 ? taskIcon.win.title : " ";
469
+               break;
470
+            }
471
+            
472
+         }
473
+      }
474
+
475
+      canvas.addEventListener("mousemove", changeTooltipOverWidget);
476
+      canvas.addEventListener("mouseover", changeTooltipOverWidget);
477
+      canvas.addEventListener("mouseleave", function(event) { setDefaultTooltip(); });
478
+
479
+      /**
480
        * Returns rgba(r,g,b,a) string representation for the target color
481
        * with the target transparency.
482
        * 
483
@@ -539,6 +722,7 @@
484
          this.setActive = setActive;
485
          this.isActive  = isActive;
486
          this.draw = draw;
487
+         this.testMousePointerInside = testMousePointerInside;
488
 
489
          /**
490
           * Sets the widget location.
491
@@ -587,6 +771,18 @@
492
                canvasRenderer.drawImage(ctx, that.x, that.y + (that.height - iconHeight) / 2,
493
                      iconWidth, iconHeight, that.iconData, 0);
494
             }
495
+            else
496
+            {
497
+               var text = that.win.title;
498
+               if (TASK_BAR_FONT_ID !== undefined)
499
+               {
500
+                  var textWidth  = fontsManager.getTextWidth(TASK_BAR_FONT_ID, text);
501
+                  var textHeight = fontsManager.getTextHeight(TASK_BAR_FONT_ID, text);
502
+                  ctx.font = fontsManager.getFontName(TASK_BAR_FONT_ID);
503
+                  canvasRenderer.drawText(that.win.title, that.x + (that.width - textWidth) / 2,
504
+                        that.y + (that.height + textHeight) / 2, false);
505
+               }
506
+            }
507
          };
508
          
509
          /**
510
@@ -613,41 +809,6 @@
511
             return true;
512
          };
513
          
514
-         /**
515
-          * Adds the "on click" widget action. If window is inactive, sets the active state and
516
-          * sends the request to server in order to change the window state.
517
-          */
518
-         peer.addEventListener("click", function(event)
519
-         {
520
-            if (testMousePointerInside(event) && !that.isActive())
521
-            {
522
-               that.setActive(true);
523
-               if (taskIconOnClickCallback)
524
-               {
525
-                  taskIconOnClickCallback(that.win.id);
526
-               }
527
-               that.draw();
528
-            }
529
-         });
530
-         
531
-         /**
532
-          * Changes the tooltip for the task bar peer if the mouse pointer is over the task widget.
533
-          * 
534
-          * @param    {MouseEvent} event
535
-          *           Describes the current mouse pointer.
536
-          */
537
-         function changeTooltipOverWidget(event)
538
-         {
539
-            if (testMousePointerInside(event))
540
-            {
541
-               peer.title = (that.win.title !== null && that.win.title !== undefined)
542
-                                 ? that.win.title : " ";
543
-            }
544
-         }
545
-
546
-         peer.addEventListener("mousemove", changeTooltipOverWidget);
547
-         peer.addEventListener("mouseover", changeTooltipOverWidget);
548
-         peer.addEventListener("mouseleave", function(event) { setDefaultTooltip(); });
549
       }
550
    }
551
 }
552