Window Manager in JavaScript

[Martin Rinehart]

There is now the beginning of a window manager written in JavaScript.
It was written in Opera on KDE Linux, and it runs in Opera on Windows.
You can try it here:

http://www.martinrinehart.com/examples/js-wm.html

Implemented: open, close, focus on click, drag w/title bar.
Not yet: maximize/minimize/resize.

The whole file, JS + a bit of HTML for a demo, tips the scale at
14.4KB. The basic window functionality, minified, should be under 10k
when complete. Peer review is most welcome. I'm still relatively new
to JS.

Bugs: dragging increments the window counter every time it repaints.
So click New to create all the windows you like before you start
dragging them around.

More bugs: It would be nice if this ran on a few more browsers. Opera-
only is not enough.

I'd be delighted if some of you responded like "I think I can get this
running in Firefox."

 

[Martin Rinehart]

Another bug: drag fails if you have only one window open. Odd.

 

[Jeremy J Starcher]

There is now the beginning of a window manager written in JavaScript. It
was written in Opera on KDE Linux, and it runs in Opera on Windows. You
can try it here:

http://www.martinrinehart.com/examples/js-wm.html

Running Firefox here, I can't actually test your code but I did take a
look at your source.

Your code, on the whole, looks very clean. The most cluttered part of
your code seems to be in setting colours and attributes. You could clean
up a lot of that with CSS styling and just setting the DIV class. Would
also make it much easier for the end-developer to change the look/feel of
your windows.



A few comments that might help.

1) (from your comments) No version of IE currently supports Canvas.
There is a script that emulates some Canvas functionality, but it is
*SLOW*

2) If you are making this for general use, make sure to include a
doctype. Better yet, test it under both strict and loose doctypes.

3) It is better to write your script tags as <script type="lang/
javascript">...</script> No problem with inline scripts for testing, but
they should be moved as a separate .js when you are done.

4) I'd rename the "alert" function. The sort of thing thats easy to
forget and will cause trouble later on.

5) IE and Firefox have two different event models.
Read < http://www.brainjar.com/dhtml/events/ > for an overview

 

[Kenny]

There is now the beginning of a window manager written in JavaScript.
It was written in Opera on KDE Linux, and it runs in Opera on Windows.
You can try it here:

Pretty. But nothing works on Safari, FF3, or Chrome except the New
button does make a new window.

hth, kt

 

[Thomas 'PointedEars' Lahn]

2) If you are making this for general use, make sure to include a
doctype. Better yet, test it under both strict and loose doctypes.

That's *DOCTYPE declaration*, and a document should declare HTML 4.01 Strict
with recognized system identifier (DTD URI, so as not to trigger Quirks
Mode) for general use, unless proprietary stylesheets or deprecated elements
or attributes require Transitional. Testing with the resulting document
type suffices.

3) It is better to write your script tags as <script type="lang/
javascript">...</script>

No problem with inline scripts for testing, but
they should be moved as a separate .js when you are done.

An inline script removes the need for a further request, which is costly, so
think also about that before you refactor.

5) IE and Firefox have two different event models.
Read < http://www.brainjar.com/dhtml/events/ > for an overview

MSHTML-based and Gecko-based user agents implement different event models,
that of the MSHTML DOM, and the W3C DOM augmented by the Gecko DOM, to be
precise.


PointedEars

 

[Jeremy J Starcher]

No, it should be <script type="text/javascript">...</script>. There is
no `lang' group in MIME media types to begin with.

I know that! Don't know why my fingers didn't TYPE it that way.

An inline script removes the need for a further request, which is
costly, so think also about that before you refactor.

True, on the first request. I haven't had much luck coming out with a
good metric on where the win-lose crossover point is.

MSHTML-based and Gecko-based user agents implement different event
models, that of the MSHTML DOM, and the W3C DOM augmented by the Gecko
DOM, to be precise.

ACK.

 

[Thomas 'PointedEars' Lahn]

I know that! Don't know why my fingers didn't TYPE it that way.

Maybe Freudian mistyping after reading "comp.*lang*.*javascript*"


Regards,

PointedEars

 

[Martin Rinehart]

Thanks for your feedback.

... Would
also make it much easier for the end-developer to change the look/feel of
your windows.

Something I should start to think about.

1) (from your comments) No version of IE currently supports Canvas.

MSIE is NOT my problem. It's Steve's problem. Site's that fail under
MSIE serve a useful purpose.

2) If you are making this for general use, make sure to include a
doctype. Better yet, test it under both strict and loose doctypes.

I gave up doctypes for Lent. Java 5 deprecates <br /> in favor of
<br>.

Seriously, when I'm done this will be .js, so the buggy 'strict'
police will be irrelevant.

3) It is better to write your script tags as <script type="lang/
javascript">...</script> No problem with inline scripts for testing, but
they should be moved as a separate .js when you are done.

Both Firefox and Opera permanently cache .js on Linux.
Permanently. .js is only an option after development is complete.

4) I'd rename the "alert" function. The sort of thing thats easy to
forget and will cause trouble later on.

Yeah. I started with real alert messages but that became impossible
when it was time to do drag.

5) IE and Firefox have two different event models.
Read < http://www.brainjar.com/dhtml/events/ > for an overview

Good. But how about Opera and Firefox?

 

[Martin Rinehart]

No, it should be <script type="text/javascript">...</script>. There is no
`lang' group in MIME media types to begin with.

How about:

<meta http-equiv="Content-Script-Type" content="text/javascript">

Then you're standard-based and don't need 'type=...'.

Seriously, PE, I give you window management in JS and you focus on
this? Window management opens up a whole new world of website
possibilities, no?

 

[Martin Rinehart]

Bugs: dragging increments the window counter every time it repaints.

Fixed.

 

[Martin Rinehart]

Pretty. But nothing works on Safari, FF3, or Chrome except the New
button does make a new window.

Which one of those can you tackle? FF is clearly the most important.

 

[Jeremy J Starcher]

<meta http-equiv="Content-Script-Type" content="text/javascript">

Seriously, PE, I give you window management in JS and you focus on this?
Window management opens up a whole new world of website possibilities,
no?

Focus on, no. Mention in passing, yes.

 

[Jeremy J Starcher]

Thanks for your feedback.


Something I should start to think about.


MSIE is NOT my problem. It's Steve's problem. Site's that fail under
MSIE serve a useful purpose.

*Looking about*
Steve...?

As to MSIE, add my name to the list of people who would love to see it
disappear. However, I doubt that very many web designers are at liberty
to simply ignore it. I know in my business, 90% of my traffic is from
IE. A good chunk of that is from IE6. I don't have the luxury of
ignoring it.

I gave up doctypes for Lent. Java 5 deprecates <br /> in favor of <br>.

Seriously, when I'm done this will be .js, so the buggy 'strict' police
will be irrelevant.

I assume you mean HTML 5 instead of "Java 5"

<br /> has *never* been part of HTML. XHTML, yes.

As for strict vs loose: The doctype chosen *can* require changes in
Javascript. In many browsers, the DOM reacts differently when doing
absolute positioning. My suggestion to use and test doctype declarations
was based in more than simple ideology.

Both Firefox and Opera permanently cache .js on Linux. Permanently. .js
is only an option after development is complete.

Heh. I did said, when you are done.

On my system, neither Fx nor IE cache files from the local file system.
When I am testing something server side, control-F5 (or shift click-
refresh) force ignoring the cache.

Yeah. I started with real alert messages but that became impossible when
it was time to do drag.

Firebug lite has a nice cross-browser logging tool.

Good. But how about Opera and Firefox?

AFAICT, every HTML 4 browser, except IE, uses the W3C DOM. Make it work
in IE and Fx and it should pretty much work everywhere else.

 

[Martin Rinehart]

Steve...? Balmer

On my system, neither Fx nor IE cache files from the local file system.

There are some disadvantages to Linux.

AFAICT, every HTML 4 browser, except IE, uses the W3C DOM. Make it work
in IE and Fx and it should pretty much work everywhere else.

My experience too, until you get to intensive mouse handling.

 

[Thomas 'PointedEars' Lahn]

How about:

<meta http-equiv="Content-Script-Type" content="text/javascript">

Then you're standard-based and don't need 'type=...'.
Nonsense.

Seriously, PE, I give you window management in JS and you focus on
this? Window management opens up a whole new world of website
possibilities, no?

You think of yourself as too important.


PointedEars

 

[Thomas 'PointedEars' Lahn]

<br /> has *never* been part of HTML. XHTML, yes.

Incorrect. <br /> would mean the same as <br>&gt; in HTML. But few
existing user agents implement that feature, so it is thought of as a
means to make XHTML "HTML-compatible". However, SHORTTAG YES in the
SGML declaration of HTML 4.01[1] is one reason why XHTML 1.0,
Appendix C[2], on which this thinking is based, is flawed.


HTH

PointedEars
___________
[1] <http://www.w3.org/TR/1999/REC-html401-19991224/sgml/sgmldecl.html>
[2] <http://www.w3.org/TR/2000/REC-xhtml1-20000126/#guidelines>