Hello,

I would like to be able to to add an icon at the taskbar when a window was shown. The icon on taskbar should only be removed when the window was closed. In this case, even when all the windows are maximized, I can still navigate to any window using the icons on the taskbar.

On the example provided in http://prototype-window.xilinus.com/PWC-OS/, the icon is added to the taskbar only when the window was minimized and the icon was removed once the window was restored.

Does anybody have any idea on how to do this?

Just do what you wanna do (HTML speaking) on event onShow and onClose

Here is an example i recently very quickly build, there might be so wierd stuff in it, but it works.
Its partly based on the PWS-OS, but i changed the bit were there’s allways a taskbar element for a window.
It also changes the style when a window is focussed, so you can see what window is active in the taskbar.
I have used a <table> as an element on the ‘desktopDockWindows’ taskbar because it was quicker to style, but divs should be better.

I’ll put up an example page soon.
screenshot: http://www.dreamit.nl/windows_js/desktop.jpg

// Overide Windows minimize to move window inside dock  
Object.extend(Windows, {
  // Overide minimize function
  minimize: function(id, event) {
    var win = this.getWindow(id)
    if (win && win.visible) {
      // Hide current window
     var oldHideEffect = win.options.hideEffect;
     win.options.hideEffect = Element.hide; 
     win.hide();            
     win.options.hideEffect = oldHideEffect;
     Windows.blur(win.getId());

    }
   // Event.stop(event);
  },                 

  // Restore function
  restore: function(event) { 
    var element = Event.element(event);
    // Show window
    element.win.show();                   
    element.win.toFront();   
  }
});

var dockWindow = {
    onShow: function(eventName, win) {
        // Create a dock element
        var element = $("desktopDockWindowsItem_" + win.getId());

        if(!element) {
            element = document.createElement("div");
            element.className         = 'desktopDockWindowsItem'; 
            element.id                 = 'desktopDockWindowsItem_' + win.getId(); 
            element.style.display     = 'none';
            element.win                = win;
            $('desktopDockWindows').appendChild(element);
            $(element).update('<table class="desktopDockWindowsItemTable" id="desktopDockWindowsItemTable_' + win.getId() + '"><tr><td class="desktopDockWindowsItemCellL desktopDockWindowsItemCellL_Focus" id="desktopDockWindowsItemCellL_' + win.getId() + '"></td><td class="desktopDockWindowsItemCellM desktopDockWindowsItemCellM_Focus" id="desktopDockWindowsItemCellM_' + win.getId() + '"><div id="desktopDockWindowsItemButton_' + win.getId() + '"><img src="<?php echo WS_ROOT;?>images/icons/16x16/'+ icons[win.getId()] + '" class="desktopDockWindowsItemIcon" id="desktopDockWindowsItemIcon_' + win.getId() + '">' + win.getTitle() + '</div></td><td class="desktopDockWindowsItemCellR desktopDockWindowsItemCellR_Focus" id="desktopDockWindowsItemCellR_' + win.getId() + '"></td></tr></table>');

            win.dock                = $(element);

            $('desktopDockWindowsItemButton_' + win.getId()).win     = win;
            $('desktopDockWindowsItemIcon_' + win.getId()).win        = win;

            Event.observe($('desktopDockWindowsItemButton_' + win.getId()), "mouseup", Windows.restore);
            Event.observe($('desktopDockWindowsItemIcon_' + win.getId()),     "mouseup", Windows.restore);

            new Effect.Appear(element,{duration:0.1});
        }
    },

    onDestroy: function(eventName, win) {
        var element = win.dock;
        if(element) {
            new Effect.Fade(element, {duration:0.1,afterFinish: function() {element.remove()}});
        }
    },

    onFocus: function(eventName, win) {
        var element = win.dock;

        if(element) {
            $('desktopDockWindowsItemCellL_' + win.getId()).addClassName("desktopDockWindowsItemCellL_Focus");
            $('desktopDockWindowsItemCellM_' + win.getId()).addClassName("desktopDockWindowsItemCellM_Focus");
            $('desktopDockWindowsItemCellR_' + win.getId()).addClassName("desktopDockWindowsItemCellR_Focus");
        }
    },

    onBlur: function(eventName, win) {
        var element = win.dock;
        if(element) {
            $('desktopDockWindowsItemCellL_' + win.getId()).removeClassName("desktopDockWindowsItemCellL_Focus");
            $('desktopDockWindowsItemCellM_' + win.getId()).removeClassName("desktopDockWindowsItemCellM_Focus");
            $('desktopDockWindowsItemCellR_' + win.getId()).removeClassName("desktopDockWindowsItemCellR_Focus");
        }
    }
}

Windows.addObserver(dockWindow);

It looks nice

Ok, i have setup a example page of the desktop here:
http://www.dreamit.nl/windows_js/desktop/

vista themes can be dowloaded here:
http://www.dreamit.nl/windows_js/themes/vista.rar

there are still some focus bug sometimes but most of it works pretty good.

mkoper
This is THE BEST AJAX fisheye I have seen so far!

And the whole OS is simply AWESOME!!!!!!

So, question, do you intend to make a library of some sort for public use or would you rather keep this to your self?

If, hopefully, you are willing to share this, please tell me who do I have to kill for the code :D

By the way, I am already using the Vista Theme at this concept web search site http://www.PeekStr.com

mkoper, I tested protoDesktop on Opera and IE. As expect crappy IE simply didn’t work. The page loaded but no window ever opened. “Object doesn’t support this property or method” on line 115 comes every time. I didn’t go into debug mode. I honestly wish there would be a vote to KILL IE.

On Opera it works with a few bugs. There is the general PWC Flash bug, but protoDesktop taskbar didn’t work properly. One button was always displayed under the taskbar. You can see what I mean in the screenshot: http://www.stojadinovic.net/Data/protoDesktop.gif

Thx for the comments, glad you like it, i found the result pretty cool too.

I agree with you on that IE is a crappy browser, thats why i never develop in it.
The fact is that 80% of all the page requests are done with it so its worth rebuilding the code to be compliant.
As i mentioned in my first post i build it fairly quickly, and i didn’t check it with IE since i knew that would give me a headache.

Basically the dockWindow object in my first post is all need (and PWC off course), but a simple “save page as” would give you all the extra js code you need, and I would recommend that because i have updated the code after my first post.
The alignment of the dock in Opera is probably because of the use of tables, divs are better, a float:left property should do the trick.

The nice Mac Dock at the bottom is EuDock: http://eudock.jules.it/euDock.php

If I have time this week I’ll try to debug the protoDesktop for IE and post here when i’m finished.

Awesome!

I already looked at the source a bit and figured out EuDock. Still, thanks for sharing :)

I’ll be looking forward to your post about an improved protoDesktop :)

Pedja

Nice work, if you want to add it to PWC let me know

Thx, that would be cool, but….

As promised I’ll debug/test the code first, and then if you have the time, check it out too, because i ain’t a js/prototype pro.

WHOA! I really, really like it …
Like Predrag said – awesome!
Are you planning to release this cool stuff to the public? I’d really appreciate this!

Cheers,
Manu

Very nice indeed!
Got it up and running with MySQL (and minor hick-ups on IE)
But I got a question that isnt related to PWC, but I hope for an answer anyway… Can You post the code for the page called “saveSettings.php”? I’d be very greatfull if You did :-)

all that page does is set session vars from the chosen setting in setting.php but i don’t mind posting it.

<?php
session_start();

    unset($_POST['_']);

    if(is_array($_POST) && count($_POST)) {
        foreach($_POST as $key => $value) {
            $_SESSION['desktop']['settings'][$key] = $value;
        }
    }
?>

here’s the code that generates the settings window

<?php
    session_start();

    if(substr($_SERVER['HTTP_HOST'],-1) != '/') {
        $addslash = '/';
    }
    if(substr($_SERVER['DOCUMENT_ROOT'], -1) != '/') {
        $addslash2 = '/';
    }

    if(!defined('FS_ROOT'))
        define('FS_ROOT', str_replace('\\', '/',dirname(__FILE__)).'/');
    if(!defined('WS_ROOT'))
        define('WS_ROOT', 'http://'.$_SERVER['HTTP_HOST'].$addslash.str_replace($_SERVER['DOCUMENT_ROOT'].$addslash2,'',FS_ROOT));

?>
<div style="position:relative;height:295px;;width:345px;padding:0px;">
    <div id="currentDesktop" style="position:absolute;top:5px;left:5px;width:200px;"><img src="<?php echo $_SESSION['desktop']['settings']['desktop'];?>" width="150" border="0" style="display:inline;padding:0px;margin:0px;"></div>

    <div style="position:absolute;left:5px;bottom:30px;">
        Background<br>
        <select name="desktop_bg" id="desktop_bg" onChange="$('currentDesktop').update('<img src=\'' + this.value + '\' width=\'150\' border=\'0\'>');">
        <?php
            $fs_path = FS_ROOT.'images/desktops/';
            $ws_path = WS_ROOT.'images/desktops/';
            if($handle = opendir($fs_path )) {
                    while(($file = readdir($handle)) !== false) {

                        if(!is_dir($path.$file) && (strpos(strtolower($file), '.jpg') !== FALSE || strpos(strtolower($file), '.jpeg') !== FALSE))  {    // No directories / subdirectories
                            echo '<option value="'.$ws_path.$file.'"';

                            if($_SESSION['desktop']['settings']['desktop'] == $ws_path.$file) {
                                echo ' SELECTED';
                            }
                            echo '>'.substr($file, 0, strrpos($file,'.')).'</option>';
                        }
                    }
                }
                closedir($handle);
        ?>
        </select><br><br>
        Window Theme<br>
        <select name="windows_theme" id="windows_theme">
            <option value="vista_glass">Vista Glass</option>
            <option value="vista_normal"<?php if($_SESSION['desktop']['settings']['windows'] == 'vista_normal'){echo ' SELECTED';}?>>Vista Normal</option>
        </select>
    </div>
    <div style="position:absolute;bottom:0px;right:0px;">
        <input type="button" value="ok" onClick="setSettings(true);">
        <input type="button" value="cancel" onClick="closeWindow();">
        <input type="button" value="apply" onClick="setSettings(false);">
    </div>
</div>
<script type="text/javascript">
    setSettings = function(doClose) {
        $(document.body).setStyle({backgroundImage:'url(' + $('desktop_bg').value + ')'});
        changeTheme($F('windows_theme'));
        var ajax = new Ajax.Request('<?php echo WS_ROOT;?>saveSettings.php', {method: 'post', parameters: 'desktop=' + $F('desktop_bg') + '&windows=' + $F('windows_theme'), onComplete: (doClose) ? function() {closeWindow();}:''});
    }

    closeWindow = function() {
        Windows.close('settings');
    }

    // Change theme callback
    var currentTheme = '<?php echo $_SESSION['desktop']['settings']['windows'];?>';
    function changeTheme(selectedTheme) {
        if (selectedTheme == currentTheme) {
            return;
        }

        Windows.windows.each(function(win) {
            win.options.focusClassName     = selectedTheme; 
            win.options.blurClassName     = 'blur_' + selectedTheme;
            win.changeClassName('blur_' + selectedTheme);
        });
        Windows.focusedWindow.changeClassName(selectedTheme);
        currentTheme = selectedTheme;
    }
</script>

Hmm I was wondering if you could fully explain the process used to create an instants where you see dock icons at all times…it would help me alot i looked threw your code seeing as how i haven’t studied the pwc-os very much some of it doesn’t make complete sense. so i am rather confused haha. i see that you update/create the table when its opened…but im not sure how too do it…without just copying your code.. and id rather not just script kiddie mask your code you know? its not my style..any help would be amazing, and i thank you in advanced :D

Hello,

I hope the author of that DesktopDock is still active and help me with my problem.
When I close a window its dockelement wont be destroyed. Any solution?

Others who knows the answer are welcome to post as well :)

Best regards
ak

EDIT: ok, I found out the solution by myself :D for other with same problem here´s the solution:
var win = new Window(...);

win.setDestroyOnClose();
win.show