Git Product home page Git Product logo

mochaui's Introduction

Demo

https://nyov.github.io/mochaui/Demo

About

A MooTools UI Library User Interface Library

Development Source

/Source - all source files required to build /Demo - demonstration of MochaUI

Development Branch Expected Release Version # is 1.0.0

Expect some breaking changes

mochaui's People

Contributors

akwerks avatar amonaco avatar ango avatar cdotyone avatar dehenne avatar dvlife3 avatar eerne avatar gerhobbelt avatar greghouston avatar juanparati avatar marcjeanson avatar pauluswebster avatar robernet avatar sunbox avatar thisconnect avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mochaui's Issues

Panel onResize

From the documentation of MUI.Panel: onResize (function) Fired when the panel is resized.

This is a bit misleading, since it only fires if the panel's handle is draged, but not:

  • if the column resizes
  • if the neighbour panel resizes

One could use the MUI.Column onResize event, but there seems no generic way to get all the panels in this column.

Feature request:

  • onResize also fires if column or neighbour panel is resized
    OR
  • solution for getting all panels in a column

See also:
http://groups.google.com/group/mocha-ui/browse_thread/thread/f75fe7b409721237/3817cac884e267af
AND
http://groups.google.com/group/mocha-ui/browse_thread/thread/fad1e08b39ed1000/8b26dd4b1ee83de7?lnk=gst&q=resize+panel#8b26dd4b1ee83de7

MochaUI.Window, shadowOffset parameter not working and generating an error - #88

Reported by luca.boccianti, Jan 06, 2010

What steps will reproduce the problem?

  1. add a correct shadowOffset parameter to a new MochaUI.Windows.

What is the expected output? What do you see instead?
I'd expect a floating window with a shadow shifted in some direction. the
window isn't even created, instead.

What version of MochaUI are you using?
0.9.5

On what operating system and with what browser?
windows vista, firefox 3.5 something

Youtube video restarts when in Iframe and redocked. - #70

Reported by [email protected], May 28, 2009

What steps will reproduce the problem?

  1. Open a panel with YouTube Player in it
  2. Press play
  3. Drag to a new docking position

What is the expected output? What do you see instead?
Expect it to just keep playing.
Instead it restarts.

What version of MochaUI are you using?
Trunk. R 527

On what operating system and with what browser?
Chrome, Vista

Please provide any additional information below.

scrollbar handle doesn't scale down enough - #79

Reported by corn13read, Aug 25, 2009

when resizing some of the panels the scrollbar drag doesn't resize down
beyond a certain point and it gets to the point where you have to use the
up or down arrow instead.

Fantastic project! I hope to see future development.

Error: $("modalOverlay") is null - #84

What steps will reproduce the problem?

  1. insert javascript code like this that follow;
    (note that don't matter if the code is in the event click of the button,
    is the same also in a <script></script> block):

  1. the error is fired only if I use type:'modal', creating the object
  2. Until version 0.9.5 there isn't this error

What is the expected output? What do you see instead?
I been expecting a Modal MochaUI Window

What version of MochaUI are you using?
I use 0.9.6 due to IE8

On what operating system and with what browser?
Windows 7 Ultimate

Please provide any additional information below.
there is the error in every browser: FireFox (were I develop), IE, Safari,
Opera, etc.

closeColumn doesn't close panels - #82

Reported by fblomqvist, Sep 28, 2009

What steps will reproduce the problem?

  1. create a column and a panel
  2. close the column using closeColumn()

What is the expected output? What do you see instead?
column should be closed including the panel inside it.
It looks like the panel is being closed but only because the DOM is
removed. The code inside closeColumn that should call closePanel uses and
incorrect selector and thus closePanel is never called.

What version of MochaUI are you using?
Current SVN.

On what operating system and with what browser?
Win Vista, FF3

Please provide any additional information below.
Actually a second error in closeColumn in the case of sortable columns.
#1431 uses "instance.container" instead of "instance.options.container".

Comment 1 by fblomqvist, Oct 13, 2009

Another observation could be that closePanel should close any containing columns.
A fully generic version of close should traverse the full tree of containing elements
and close them bottom-up. (also for window.close).

how to use this mocha ui by iframe ??? - #94

Reported by webercode, Mar 26, 2010

hi,

when i use this mocha ui by iframe like this :

<iframe src="./mochaui/index.html" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="width:100%; height: 608px"></iframe>

it will be an error like this:

  1. mochaui/scripts/source/Core/Core.js:436 Uncaught TypeError: Object
    [object DOMWindow] has no method 'getCoordinates'
  2. mochaui/scripts/source/Window/Window.js:2403 Uncaught TypeError: Cannot
    call method 'setStyle' of null

What version of MochaUI are you using?
---r529

On what operating system and with what browser?
---win xp google browser

Thanks

onContentLoaded should be called on panel/window update

Hi !
the onContentLoaded callback of a panel/window doesn't get called if you perform a MUI.updateContent() on them.
e.g.
new MUI.Panel({
id: 'myPanel',
onContentLoaded: function(){ alert('called!'); }
});
MUI.updateContent({element: 'myPanel'});

should alert 'called'
I think this is a general issue. But especially if you do tab-switching which also uses the updateContent within the initializeTabs function to load the appropriate tab content.

greetings

Search box wont focus in FF 3.5 - #75

Reported by a2b2c2d, Jul 03, 2009

What steps will reproduce the problem?

  1. Use Firefox 3.5 to view main index.html
  2. Attempt to type in search box.

What is the expected output? What do you see instead?
It should allow you to type text into the box. It works on IE8 for me but
in firefox it will not allow the search box to take focus when clicking in
the field.

What version of MochaUI are you using?
r529

On what operating system and with what browser?
XP Pro SP3 using Firefox 3.5

Comment 1 by jpiulachs, Aug 28, 2009

The problem does not happen when you set the sortable property of the column to false
in mocha-init.js

new MUI.Column({
id: 'mainColumn',
placement: 'main',
sortable: false,
resizeLimit: [100, 300]
});

dock tabs don't get correct tooltips - #76

Reported by fblomqvist, Jul 17, 2009

What steps will reproduce the problem?

  1. open a window
  2. hover with mouse over it's dock tab

What is the expected output? What do you see instead?

  • A tooltip with same title as windows should show up
    -> no tooltip shows up.

What version of MochaUI are you using?
Current SVN.

On what operating system and with what browser?
Win Vista, Firefox3

Please provide any additional information below.
Bug is in Dock.js : createDockTab().
The dockTab div is created first in the method but the title variable
"titleText" is only created at the end of the method, thus it is undefined
when first used.
Simple fix is to move variable titleText to top of method (just below
extraction of the window instance).

Regards
// Fredrik Blomqvist

Provide an object-oriented menu system #44

Reported by gravydish, Jul 28, 2008

This is some code I've written for MochaUI to allow for dynamic menu
modifications. This is likely not the right place for this, but I did not
find your (Greg Houston's) email address to mail you directly (most likely
due in part to my laziness).

Using the code works kinda like this:

MochaUI.RootMenu = new MochaUI.RootMenu();
MochaUI.RootMenu.merge({
'Start': {
'>': {
'Widget: Clock': {
onClick: lib.clockWindow,
id: 'clockLinkCheck'
},
'Widget: Mario Kart': {
onClick: lib.marioKart,
id: 'mario-kartLinkCheck'
},
'Login': {
divider: true,
onClick: lib.startLogin
},
'Logout': {}
}}
});

This would render a menu like the following:

,-+---------------------+---------------//
| | Start |
`-+---------------------+-----------------------/
| Widget: Clock |

Widget: Mario Kart
Login
Logout
`---------------------'

Nothing special is done behind the scenes. It renders HTML exactly the
same as what is found in the index.html file. It just does it dynamically
with MooTools.

The menu could be stored in a separate JSON file and included dynamically
or could be included in-line as in the above example.

The merge() method supports alterations as well as additions. For example,
executing this code after the above would cleanly (visually) remove the
Login menu item:

MochaUI.RootMenu.merge({
'Start': {
'>': {
Login: null,
Logout: { divider: true }
}}
});

You don't have to re-give the options you don't intend to change. Also,
setting a menu item to 'null' inidicates that you wish to remove it
completely.

Perhaps the code could be better written to make assumptions on the sub
menus and not require them to be placed under a special '>' key, but it
seems intuitive to read as it is written above.

Lastly, for small changes, a static forPath() method exists:

MochaUI.MenuItem.forPath('/Start/Login').set('enabled',false);

would disable the 'Login' menu item under the 'Start' menu.

The code makes the assumption that the developer would want to use the
global name MochaUI.RootMenu for the root menu variable after the example
of many other MochaUI components; however, a simple variable (var root,
for instance) is fully supported so that more than one menu could exist at
the same time. In this case, the above code would change to:

MochaUI.MenuItem.forPath('/Start/Login', root).set('enabled',false);

I wanted mainly to post my work here to see if there is any interest. If
so, I could provide a better example (with an HTML file, etc). I didn't
want to waste the time if the MochaUI developers are not interested in
this type of approach.

What version of the product are you using? On what operating system?
MochaUI 0.9 Beta, Windows
Code has been tested with IE6 and Opera 9.50 on Windows XP only; however,
the code uses MooTools 1.2 exclusively and so should be compatible with
any browser MooTools 1.2 is compatible with.

mocha-menu.js

10.9 KB Download
Comment 1 by gravydish, Jul 28, 2008

Mario kart widget is derived from the canvas/javascript experiment: http://
blog.nihilogic.dk/2008/05/javascript-super-mario-kart.html

Comment 2 by gregory.houston, Jul 28, 2008

This looks great. I would probably put this at source/Window/Menu.js

Will you do a couple things:

  1. Format the comments like in source/Window/Window.js. This will make it so your
    comments can be parsed by Natural Docs and thus added to the Mocha UI documentation.
    Tabs, naming, and so forth need to be like in Window.js for the parsing to work.
    "@param options" for example needs to be "Options:". The extra asterisks on the left
    side of your comments should be removed.

All the Mocha UI documentation comes from the javascript files so it is a good idea
to add some of the above instructions and examples to the javascript file. Note the
(start code) and (end) tags in the Window.js examples.

  1. Make an example html page. Since mocha-init.js is already being used for the main
    demo, will you put the javascript that initializes the menu in the head tag of the
    example page. See no-toolbars.html for an example.

Thanks, and this is a great place to submit features like this. This way it is
documented and I won't forget about it.

Labels: -Type-Defect Type-Enhancement
Comment 3 by gravydish, Jul 29, 2008

Greg,

I deviated from your requests in a couple ways...

Personally, I feel that remaking the mocha-init.js file with dynamic menu items
makes it more structured and approachable. It also groups the code for menu click
events with the menu items themselves. I've included the remade index.html and mocha-
init.js files along with a newer version of the mocha-menu.js file (including a
couple of bug fixes I've come across). Also, I condensed a couple of the menu click
event routines (for the clock, for instance), because they did not appear to work in
stock MooTools 1.2. I've used the Asset.javascript() method which apparently has a
bug for Opera 9.50 -- and I noticed you've already posted a bug for that.

The dynamic menu appears to look and function equivalently for me on IE6 and Opera
9.50. It at least serves as a better example for you of how I'm using it. For
whatever reason, the version of MooTools that is shipped with MochaUI 0.9 does not
work with the mocha-menu.js script I've written. You'll see in the index.html file,
I'm including MooTools 1.2 'core' and 'more' files as I have them named on my
machine. You may need to adjust as necessary.

I feel that including the dynamic menu in the main demo would be really sweet, if,
for instance, in the Tools menu you simply gave access to a tool like the Window
Parametrics or Window Builder to dork around with the menu itself and example how
dynamic it could be.

Also, the documentation for Natural Doc explains that leaving asterisks in your
comments is supported. I personally feel that asterisks make the code documentation
inside class declarations easier to read. I understand the importance and
significance of consistency, and I most assuredly don't mind removing the asterisks
for your version, but I feel I would like the keep the asterisks for my version. The
version I've included here still includes the asterisks. Please elaborate on your
feelings there.

I am also unaware of how to document the MochaUI.MenuItem.forPath() static method
which is defined outside the class. I gave it my best shot with a namespace operator
(::).

Please understand I don't mean to be controlling or overbearing. I really appreciate
what you've done and am excited about contributing a small portion.

mocha-init.js

19.5 KB Download
index.html
2.3 KB Download
mocha-menu.js
17.1 KB Download
Comment 4 by gregory.houston, Jul 29, 2008

The latest available version of 0.9 comes with Mootools 1.2 'core' and 'more'.

I definitely want to keep the commenting style consistent from one file to another.

Since you want to add your feature set to the main demo it will have to wait until I
have a chance to work on Mocha UI again and can review this. That could be a few
months. I'm not sure how much more I want to complicate the demo. As it's own example
page however I could probably add it to the SVN within a week as long as it works in
all the browsers supported by Mocha UI.

It would be good if you tested in IE7, Firefox 2 and 3. If you don't have a Mac I can
test it in Safari and Mac Firefox. Even with the Mootools abstraction layer it is
actually pretty rare that new code immediately works in all the A-Class browsers
without a little tweaking.

Regarding, MochaUI.MenuItem.forPath(), I don't know what this is but keep in mind
that functions or classes that the user will not directly use should not be commented
in such a way that they will show up in Natural Docs. Notice that there are many
times more comments in source/Window/Window.js than what you see in the documents.
All those extra comments are for people actually modifying the code. They are not
meant to be seen by the end user in the documentation because it would just confuse
them and not really benefit them in anyway.

// ... if in the Tools menu you simply gave access to a tool like the Window
// Parametrics or Window Builder to dork around with the menu itself and example how
// dynamic it could be.

Please feel free to make a plugin for this. Both the Parametrics and the Window
Builder you mention are in mocha/plugins/

G.

Comment 5 by gravydish, Nov 17, 2008

I like the work you've done with MochaUI 0.9.5!

I've added context (popup) menu support into the dynamic menu library along with a
couple of other bug fixed. I am going to try and write a demo plugin for 0.9.5 this
week and post the new code and plugin.

Comment 6 by mfuery, Nov 25, 2008

Nice work guys! This will come in very handy in my current app I'm working on at work.

Dock.js ignores initialization options - #77

Reported by noeldacosta, Jul 20, 2009

What steps will reproduce the problem?

  1. function(){MUI.Dock.initialize({'useControls':false});},

What is the expected output? What do you see instead?
MUI.Dock is ignoring any options that are passed as arguments to the initialize function and
instead always uses those hard-coded options within dock.js itself. So with the above
initialisation string, it should hide the dock controls, but it doesn't.

What version of MochaUI are you using?
0.9.6 development

On what operating system and with what browser?
Mac OS X leopard and firefox 3

Please provide any additional information below.
I'm used this implemented by making Dock an extension of the Mootools Class native, which
gives it the setOptions() method. Along these lines..

MUI.Dock = new Class({

Implements:Options,

options: {
    useControls:          true,      // Toggles autohide and dock placement controls.
    dockPosition:         'bottom',  // Position the dock starts in, top or bottom.
    // Style options
    trueButtonColor:      [70, 245, 70],     // Color for autohide on
    enabledButtonColor:   [115, 153, 191], 
    disabledButtonColor:  [170, 170, 170]
},

initialize: function(options){

    this.setOptions(options);

...

...
});

reset of css top property if a window is dragged "too high" - #90

Reported by luca.boccianti, Jan 14, 2010

What does your patch do?

if a window with no limitation on dragging is dragged "too high" so that
when the user release the mouse button then the user can't drag it back,
then the window top css property is set to a value that make it draggable
again.

What version of MochaUI is it for and what revision number in the SVN?

0.9.5

What files were changed?

mocha.js

What browsers have you tested it in?

windows vista:
firefox 3.5.7
internet explorer 8
safari 4.0.4
chrome 3.0.195.38

ubuntu:
firefox 3.0.9

mac osX:
firefox 3.5.7
safari 4.0.4

I've modified internal function attachDraggable() in file mocha.js. mine
start at line 1392.

sorry for being pedantic in the comments but I tend to forget things.

/*

Internal Function: attachDraggable()
    Make window draggable.

Arguments:
    windowEl

*/
attachDraggable: function(windowEl){
    if (!this.options.draggable) return;
    this.windowDrag = new Drag.Move(windowEl, {
        handle: this.titleBarEl,
        container: this.options.restrict == true ? $(this.options.container) :

false,
grid: this.options.draggableGrid,
limit: this.options.draggableLimit,
snap: this.options.draggableSnap,
onStart: function() {
if (this.options.type != 'modal' && this.options.type != 'modal2'){
MochaUI.focusWindow(windowEl);
$('windowUnderlay').setStyle('display','block');
}
if ( this.iframeEl )
this.iframeEl.setStyle('visibility', 'hidden');
}.bind(this),
onComplete: function() {
if (this.options.type != 'modal' && this.options.type != 'modal2') {
$('windowUnderlay').setStyle('display', 'none');
}
if ( this.iframeEl ){
this.iframeEl.setStyle('visibility', 'visible');
}
// Store new position in options.
this.saveValues();

            // ****************************
            // here my modifications start

// dragMinY is an optional parameter that can be added or not
// when setting the new MochaUI.window. it represent the minimum
// px value you want to accept for the css top of your window.
// operator !== should be used because 0 is an acceptable value.

            if(this.options.dragMinY !== false) {
                var dragMinY = this.options.dragMinY;
                var ttop = $(this.options.id).getStyle('top');

                // we will obtain a *string* like "-100px", so we need to get rid of "px"
                ttop = ttop.replace('px', '');
                if(ttop < dragMinY) {
                    $(this.options.id).setStyle('top', dragMinY + 'px');
                }
            }
            // and that's all ************************

        }.bind(this)
    });
},
/*

an example of the use of such new parameter:

new MochaUI.Window({
id: 'myMochaUIWindow',
title: 'my title',
loadMethod: 'xhr',
contentURL: 'index.php?myparam=something&'+new Date().getTime(),
y: 120,
//here, here!
dragMinY: 0,
}

with some easy modifications one could set different parameters for the y
coord at which repositionate the window and the actual repositioning, say
that when the css top goes below zero reset it at 60px.

Enhancement: Tabs.js more versatile and automatic - #62

Reported by carlsholmberg, Jan 30, 2009

What does your patch do?
Instead of having to specify every tab, link and target MochaUI.initializeTabs() takes a second
argument which is the target of the link in the tab. The tab's link is specified in the a-tag
instead.
I feel this is a 'cleaner' way of doing it and also easier to attach to current html.

What version of MochaUI is it for and what revision number in the SVN?
r395

What files were changed?
Tabs.js, features-tabs.html, panel-tabs.html, youtube-tabs.html

What browsers have you tested it in?
Safari 3.2.1, Firefox 3.0.5 and Opera 9.60.5246

Tabs.js

1.1 KB Download
features-tabs.html
578 bytes Download
panel-tabs.html
360 bytes Download
youtube-tabs.html
449 bytes Download
Comment 1 by gregory.houston, Jan 30, 2009

This looks good. I'm not adding any patches in the next release that break backward
compatibility, but will probably make these changes in the release after that.

Cheers.

Summary: Enhancement: Tabs.js more versatile and automatic
Status: Accepted
Labels: -Type-Defect -Priority-Medium Type-Enhancement Priority-Low

Safari4 maximize window error - #73

Reported by fblomqvist, Jun 16, 2009

What steps will reproduce the problem?

  1. Open the Demo
  2. Open the "Ajax/XHR Demo", "Split window" or "Iframe: Youtube" window
  3. click maximize window

What is the expected output? What do you see instead?
Window should be maximized.
Nothing happens and the window can't be dragged anymore (though it can be
closed)

What version of MochaUI are you using?
Current SVN version (June 16:th)

On what operating system and with what browser?
Win Vista and XP. Safari4

Please provide any additional information below.
This errors shows up in the error console:
"TypeError: Result of expression
'this.windowEl.getElements('.handle').hide' [undefined] is not a function."
Thrown from the detachResizable() in Window.js

Regards
// Fredrik Blomqvist

Tab tadget doesn't work well - #89

Reported by huangfengjing, Jan 07, 2010

What steps will reproduce the problem?

  1. I've download the sources code and deploied to my Server
  2. I just enjoy the wonderfull UI and then I encounted a bug(maybe): when I
    click the Features link under Help menu, the popped window was a Tab
    window, but with only the first tab works, both of other two tabs were
    cannot actived or even focused.

What is the expected output? What do you see instead?
Can view all the tabs content, but only the first one works.

What version of MochaUI are you using?
The newest source code from SVN

On what operating system and with what browser?
Windows & FF3.5.6

Please provide any additional information below.

Comment 1 by huangfengjing, Jan 07, 2010

And the error is :
MUI.initializeTabs is not a function
[Break on this error] MUI.initializeTabs('featuresTabs');

Enhancements to MochaUI.updateContent(), Window constructor, and Panel constructor - #52

Reported by jasonlfunk, Dec 18, 2008

I wanted to be able to specify whether to use GET or POST when updating
content, or creating a Window or Panel. This wasn't possible so I made it
so. This is specified with the 'method' option as with Request in mootools.
Also, I added the 'data' option as well, but it takes a Hash object instead
of a query string as Request does. No reason to have the user to do when
the library can.

Also, I made it so the user could specify function to run after onSuccess
completes. I've found this useful in my AJAX programming as I wanted a
function to run when my asynchronous call is finished.

Example with my code:

MochaUI.updateContent({
'element': $('mainPanel'),
'loadMethod': 'xhr',
'method': 'post',
'url': 'pages/lipsum.html',
'title': 'Lorem Ipsum',
'chain': function(text){
MochaUI.notification("Do Something");
},
'padding': { top: 8, right: 8, bottom: 8, left: 8 }
});

I've enjoyed using Mocha thus far. I'm pretty impressed with the code that
I've seen. Was there a reason that these options were not included in the
first place?

Start reviewing: /branches/
mocha-ui.zip
307 KB Download
Comment 1 by jasonlfunk, Dec 18, 2008

I marked this as "Code to be reviewed for inclusion in MochaUI" but for some reason
it would not let me submit it as that. It would always switch me to the "Review"
template. I don't know why.

Comment 2 by gregory.houston, Dec 23, 2008

I added the data and method options in r387, r388.

Your chain option does what onContentLoaded is meant to do though unfortunately
onContentLoaded cannot be directly changed after it is initially set when creating
the window. I played with just renaming "chain" to "onContentLoaded" and if it is not
empty, then running it instead of the window's initial onContenLoaded, but I wasn't
thrilled with it not being an actual Mootools Class event like the original
onContentLoaded is. To make it so would require making updateContent a Class rather
than merely a function. I'll have to give this some more thought.

Cheers.

Comment 3 by gregory.houston, Dec 23, 2008

(No comment was entered for this change.)

Status: Accepted
Owner: gregory.houston

Enhancement: Use Safari's built-in shadowing in canvas - #59

Reported by carlsholmberg, Jan 29, 2009

I hacked together a Shadower.js-file that implements MochaUI.Window if the browser is
Browser.Engine.webkit. It changes some of the functions to use Safari's support for shadowin in
canvas-drawing.

It is a proof-of-concept which could be included in the library to make the generation of windows
faster in Safari and other browsers in the future.

Currently it only checks if it is Browser.Engine.webkit, which is'nt ideal. I'm not sure which exact
versions of Safari have native shadows in canvas, so this needs to be corrected.

And again sorry for the previous post!

Thanks for a awesome library! Great work!

Comment 1 by carlsholmberg, Jan 29, 2009

Here is the file.

Shadower.js

4.0 KB Download

Compatability Issue with MooTools 1.2.3 - #78

Reported by [email protected], Aug 24, 2009

What steps will reproduce the problem?

  1. Updating MooTools core and more files to latest version downloadable
    from MooTools website.

What is the expected output? What do you see instead?
Windows loading using the normal examples are expected. Instead no windows
are loaded at all and an error occurs.

What version of MochaUI are you using?
0.9.5

On what operating system and with what browser?
Windows Vista Ultimate - Chrome 2.0.172.39 & Internet Explorer
8.0.6001.18813

Please provide any additional information below.

Use box-shadow and border-radius

Just a thought, if a browser has box-shadow and border-radius it could use CSS for the Windows corner and shadow, if not it could use canvas fallback as it is currently.

Should I give it a try?

Bug in resizeWindow

Reported by fblomqvist, Jun 15, 2009

What steps will reproduce the problem?

  1. Open the Demo
  2. Go to File->Tests->No Canvas Body
  3. Maximize the window

What is the expected output?
Window should be maximized to cover the entire workspace.

What do you see instead?
Window is resized but the left edge stays at initial position somewhere in
the middle of the screen.
(and since you can't move a maximized window you can't drag it).

What version of MochaUI are you using?
Current SVN version (June 15th)

On what operating system and with what browser?
WinXP. FF3, Safari4, Chrome2

Please provide any additional information below.
Problem is caused by the lines at #2500 in Window.js (resizeWindow)
example:
"var top = options.top || oldTop;"
The intention is that if options.top is undefined/null the default should
be "oldTop".
But, if options.top == 0 the OR operation will still evaluate and return
oldTop.

Solution:
Change to this style instead.
"var top = typeof(options.top) != 'undefined' ? options.top : oldTop;"
(and similar for the other three places this pattern is used around #2500)

I've been bitten by this gotcha couple of times myself. "||" is just so
convenient..

Regards
// Fredrik Blomqvist

Comment 1 by fblomqvist, Sep 22, 2009

.. also noticed that the same kind of error is present when setting the initial
position of the window. Since the code uses "if (!options.x)" 0 will be interpreted
as false. Change to "if (options.x == null)".

// Fredrik

bug IE 8 - #69

Reported by karikrane, May 19, 2009

hello
how can i resolve a IE 8 bug for mocha ui
i can't see the right panel

thanks

Comment 1 by [email protected], May 28, 2009

I just pulled the latest from the SVN trunk ( r 527), and its works for me in IE8.

Add a column start collapsed - #92

Reported by [email protected], Feb 11, 2010

What does your patch do?
Start a column in collapsed mode in order to use it later.
Because columns cannot be created later on a first or second place (imagine
3 column design)

Usage:
generate left column:
new MUI.Column({
id: 'sideColumn1',
placement: 'left',
width: 200,
resizeLimit: [100, 300],
isCollapsed: true
});

Open the column:
MUI.columnCollapse($('sideColumn1'));
Close the column:
MUI.columnExpand($('sideColumn1'));

What version of MochaUI is it for and what revision number in the SVN?
0.9.6
Revision 529

What files were changed?
Layout.js

What browsers have you tested it in?
mac, windows xp, ff3, safari, ie7, chrome

line 340 add:
isCollapsed: false,

line 474 add:
if (this.options.isCollapsed){
this.columnToggle();
}

Next code based on idea from John Porra:
line 1409 add:
/* Function: columnCollapse
* Collapse a Column
* Will fire the onColapse event when finished.
*
*/
columnCollapse: function(columnEl){
var instances = MUI.Columns.instances;
var instance = instances.get(columnEl.id);
if (instance.isCollapsed == false){
columnEl.oldWidth = columnEl.getStyle('width').toInt();
instance.resize.detach(); instance.handleEl.removeEvents('dblclick');
instance.handleEl.addEvent('click', function(){
columnEl.columnExpand();
}.bind(columnEl));
instance.handleEl.setStyle('cursor', 'pointer').addClass('detached');
columnEl.setStyle('width', 0);
instance.isCollapsed = true;
columnEl.addClass('collapsed');
columnEl.removeClass('expanded');
MUI.rWidth();
}
columnEl.fireEvent('onCollapse');
return true;
},

    /* Function: columnExpand 
     * Expands a Column 
     *  Will fire the onExpand event when finished.
     * 
    */ 
    columnExpand : function(columnEl){ 
        var instances = MUI.Columns.instances;
        var instance = instances.get(columnEl.id);
        if (instance.isCollapsed == true){ 
            columnEl.setStyle('width', columnEl.oldWidth); 
            instance.isCollapsed = false; 
            columnEl.addClass('expanded'); 
            columnEl.removeClass('collapsed');
            instance.handleEl.removeEvents('click'); 
            instance.handleEl.addEvent('dblclick', function(){ 
                columnEl.columnCollapse(); 
            }.bind(columnEl)); 
            instance.resize.attach(); 
            instance.handleEl.setStyle('cursor', Browser.Engine.webkit ? 'col-

resize' : 'e-resize').addClass('attached');
MUI.rWidth();
}
columnEl.fireEvent('onExpand');
return true;
},

Start reviewing: /branches/
Comment 2 by [email protected], Feb 11, 2010

2 changes:
function columnCollapse
change line:
columnEl.oldWidth = columnEl.getStyle('width').toInt();
to:
instance.oldWidth = columnEl.getStyle('width').toInt();

and in
function columnExpand
change:
columnEl.setStyle('width', columnEl.oldWidth);
to:
columnEl.setStyle('width', instance.oldWidth);

sorry for inconvenience

Iframe YouTube tabs not working normal using Virtual Desktop - #91

Reported by webmaster1989, Jan 29, 2010

What steps will reproduce the problem?

  1. File
  2. Starters
  3. Virtual Desktop
  4. Examples
  5. Iframe: YouTube
  6. Tab click !?

What is the expected output? What do you see instead?
If you click on a tab, it should be load the new youtube video.
Just nothing happens.

What version of MochaUI are you using?
Latest version from SVN.

On what operating system and with what browser?
Firefox 3.6

Please provide any additional information below.
This tab problem IS only when I use Virtual Desktop in Web Application.

Ps.
Maybe the fix from carlsholmberg could fix the problem :S
Issue 62: http://code.google.com/p/mocha-ui/issues/detail?id=62

Kind regards,
Melroy van den Berg

Comment 2 by webmaster1989, Jan 29, 2010

What version of MochaUI are you using?
R529

On what operating system and with what browser?
MS Windows 7 - Firefox 3.6*

Please provide any additional information below.
This tab problem IS only when I use Virtual Desktop but not when using Web Application.*

Comment 3 by webmaster1989, Jan 30, 2010

The problem with this Virtual Desktop & Tabs should be something to do with this line:
MUI.initializeTabs('youtubeTabs');

Because Internet Explorer report an error on line 106 in the file:
scripts/demo-virtual-desktop-init.js.

Please somebody??


Error webpage

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64;
Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media
Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; Creative
AutoUpdate v1.40.00)
Time: Sat, 30 Jan 2010 12:46:00 UTC

Message: This property or method is not supported by this object
Line: 106
Sign: 5
Code: 0

URI: .../MOCHA-UI/scripts/demo-virtual-desktop-init.js

Enhancements to the MochaUI Window api, plus a few other tweaks - #53

Reported by tjmcgrew, Dec 23, 2008

What does your patch do?
Added the following methods to the MochaUI.Window class:
close( )
minimize( )
maximize( )
restore( )
They all do what you would expect. I also made the argument to hideSpinner
or showSpinner optional - by default they show the spinner of the window
(or desktop) they are a method of.
Changed MochaUI.closeAll( ) so that it would no longer close windows marked
as not closable. Changed MochaUI.arrangeTile( ) and MochaUI.arrangeCascade(
) so that they would no longer move windows marked as not draggable (as the
designer probably doesn't want these windows to be moved)
Fixed a bug in Internet Explorer where $('windowUnderlay') is not always
initialized properly ( issue #48 )

What version of MochaUI is it for and what revision number in the SVN?
This is for the next release of MochaUI, changed against revision 385.

What browsers have you tested it in?
Windows - IE6,7,8, Safari 3.1.2, Chrome, Firefox 3.0.1, Opera 9.5.1
Linux - Firefox 2,3, Opera 9.5.1

mochaui.zip

194 KB Download
Comment 1 by tjmcgrew, Dec 23, 2008

This is code to be reviewed for inclusion, but I couldn't get that option to work. Sorry.

Comment 2 by tjmcgrew, Jan 14, 2009

I rewrote this enhancement as a plugin - perhaps it will be easier to integrate this
way. Let me know if you need anything else or if you just don't want these changes.

enhancements.js

5.7 KB Download
Comment 3 by gregory.houston, Jan 16, 2009

I added the close(), minimize(), maximize(), and restore() shortcuts in r393.

I need to think more about the closeAll() functionality. Though in the demo there is
a menu option for it, it is really meant as a backend utility for the programmer.
There might be instances where the programmer wants to close all the windows without
exception as the function now does. I use it for instance before loading a saved
workspace. I might add an argument to the function that could be used to toggle
between closing all, and only closing all that are "closable".

closeAll('all');
closeAll('closable');

If I did this it would probably default to 'all' in order to be a bit more backward
compatible.

I added the changes to arrangeTile() and arrangeCascade() in r394 since I couldn't
think of any exceptions to the new behavior.

I did not add the spinner changes.

Thanks for the submission. Sorry it took me a while to get to it.

Status: Started
Owner: gregory.houston

the mootools internal element method $() not work. - 83

Reported by [email protected], Oct 01, 2009

Hi, I see you said you will shorten the expression of belowing.

// Returns the window's Class instance
$('myWindow').retrieve('instance').close();

However, there comes out a problem to the mootools internal element method $().
Because when I use the the expression below, it will not work.

alert($('group_after_add_form').getElementById('id').value);

So, I suggest do not override the mootools internal method $(), but use
a different name instead, eg. mui_$() or something else.

"$extend(Asset..." and "Closing Jobs" problem

Hi,
I hope this is the right place for this.
If not, feel free to delete this. Both problems are part of the mocha.js file.
I have noticed, that I have to comment out this part of the "$extend(asset..." function to make it work:

if ($(properties.id)) {
properties.onload();
return $(properties.id);
}

I am using Chrome 6.0.427.0 but I have used this "fix" for quite some time. I think Firefox also has problems with that part, if loading multiple assets at one go.

Also I noticed that in the "Closing Jobs" part the delay
"//added Delay to make sure window id is erased
(function() {instance.fireEvent('onCloseComplete'); }).delay(100);"
has been removed, which breaks my application (CloseComplete is probably not fired without it).

I am not a javascript expert - just wanted to let you know.

src/demo/index.html path and general Directory structure

Hi
When browsing to src/demo/index.html all path to scripts and css files are wrong. Do you use some kind of build script for mochaui, am I missing something?

Would you mind we switch the directory layout to more general MooTools style directory structure?

Allow dockVisibility to be set an an option - #65

Reported by stourwalk, Mar 12, 2009

Additional Functionality:

  1. Allow dockVisibility to be set on initial dock creation
  2. Allow visibility to be toggled programmatically

What is the expected output? What do you see instead?
Currently you can hide the dock manually, but then the resize events and
redraw events don't know that it's hidden as dockVisibility is still 'true'

We are trying to use the desktop but don't want the Dock to appear
initially until after the user has logged into our 'application', if we
just hide the dock but don't set dockVisible correctly we get script
warnings in IE about focusing non-visible objects.

What version of MochaUI are you using?
0.9.5

Proposed changes:

MochaUI.options.extend({
// Naming options:
// If you change the IDs of the Mocha Desktop containers in
your HTML, you need to change them here as well.
dockWrapper: 'dockWrapper',
dockVisible: 'true',
dock: 'dock'
});

Modify initialize
MochaUI.dockVisible = this.options.dockVisible;

add this (before setDesktopSize() ! )

    if (!(MochaUI.dockVisible)) {
        this.dockWrapper.hide();
    }

Add this function
toggleDock: function(){
if (!MochaUI.dockVisible){
this.dockWrapper.show();
MochaUI.dockVisible = true;
MochaUI.Desktop.setDesktopSize();
}
else {
this.dockWrapper.hide();
MochaUI.dockVisible = false;
MochaUI.Desktop.setDesktopSize();
}
},

MUI.closePanel() aborts with an error, when there is only 1 panel in column - #86

Reported by chegabyte, Nov 24, 2009

What steps will reproduce the problem?

  1. new MUI.Panel({...});
  2. MUI.closePanel( $("mainPanel") );

What is the expected output? What do you see instead?
panel does close, but firefox reports:
Error: $(column).getChildren(".panelWrapper").getLast() is null
Source File: http://chegspc/centralcontracts/htdocs/lib/mocha(modified).js
Line: 5665

What version of MochaUI are you using?
r529 0.9.6 development

On what operating system and with what browser?
firefox 3.5.5 / windows 7

Please provide any additional information below.

I fixed my copy by adding an if...
on layout.js
line 1503

if( panels = $(column).getChildren('.panelWrapper') )
panels.getLast().getElement('.panel').addClass('bottomPanel');

Comment 2 by [email protected], Feb 11, 2010

I preferr a more clear solution without changing the line 1503:

original line:
$(column).getChildren('.panelWrapper').getLast().getElement('.panel').addClass('bottomPanel');

just add this "if-line" above the original:
if( $(column).getChildren('.panelWrapper').getLast() )

panel.partner wrong after layout change - #80

Reported by fblomqvist, Aug 26, 2009

What steps will reproduce the problem?

  1. drag a panel to another column than its initial
  2. drag possibly other panels in that column so it is last one
  3. collapse the panel

What is the expected output? What do you see instead?
Last panel collapse should collapse it's containing column.
But instead the very first column the panel was added to is collapsed.

What version of MochaUI are you using?
Latest SVN.

On what operating system and with what browser?
Win Vista, FF3

Please provide any additional information below.
Layout.js
Related to the onSort event panel[i].options.column should be updated.
And in the "Set panel resize partners" block in panelHeight2
panel[i].partner assignment should be fixed (not set in all branches).

IE 9.0 Compatibility

Prepare for IE 9.0 Canvas control. Stop including excanvas_r43.js for IE 9.0?

Rendering issue in IE8b2 #50

Reported by tjmcgrew, Oct 17, 2008

What steps will reproduce the problem?

  1. Open the demo site with Internet Explorer 8 beta 2.

What is the expected output? What do you see instead?
The window decorations for the popup windows do not render. They do seem to
work correctly however. Also, the buttons on the right side of the taskbar
do not render correctly.

What version of MochaUI are you using?
0.9.5

On what operating system and with what browser?
Windows XP SP3, Internet Explorer 8 beta 2

Please provide any additional information below.
The fact that IE8 is still in beta would make this low priority, but
something to be aware of. I have also tried this using IE8's compatibility
mode, with the same results. I have attached a screenshot.

mochaui-ie8b2.jpg

153 KB View Download
Comment 2 by tjmcgrew, Oct 17, 2008

Apologies,

After some further research I see that you're aware of the problem and that the issue
is with IE8 itself.

Comment 3 by gregory.houston, Oct 17, 2008

Yeah, we are sort of in a holding pattern until the next IE8 release. Hopefully there
will be at least one more beta and they will have all the issues worked out in it,
though I wouldn't count on it.

MochaUI with Excanvas works in IE8 beta 2:

  • Browser Mode: IE7, Document Mode: Quirks Mode

Caveats: Being in quirks mode causes other CSS problems. Not working in IE8 Standards
mode makes it so you cannot use the new CSS features implemented in IE8.

MochaUI with Moocanvas works in:

  • Browser Mode: IE7, Document Mode: Quirks Mode
  • Browser Mode: IE7, Document Mode: IE7 Standards Mode
  • Browser Mode: IE8, Document Mode: Quirks Mode
  • Browser Mode: IE8, Document Mode: IE7 Standards Mode
  • Browser Mode: IE8 Compatibility View, Document Mode: Quirks Mode
  • Browser Mode: IE8 Compatibility View, Document Mode: IE7 Standards Mode
    http://ibolmo.com/projects/moocanvas/

Caveats: There are some issues still with Moocanvas. The CoolClock widget example in
MochaUI does not display properly with it. Ibolmo, the author of Moocanvas is aware
of the clock widget problem. He may fix it, but no guarantees. Also, not working in
IE8 Standards mode makes it so you cannot use the new CSS features implemented in IE8.

For Excanvas or Moocanvas to work in IE8 Standards Mode will require the
Excanvas code be modified to use import instead of the of the
star selector (v: *).
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333905

Also, the following bug will need to be fixed for either Excanvas or
Moocanvas to work in IE8 Standards Mode.
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=364096

So to sum up, we are waiting on a couple things, bug fixes in IE8, and then a new
release of either Excanvas or Moocanvas that uses import rather than the star selector.

In the worst case scenario, if Microsoft fails to fix the bugs and there is not a new
release of Excanvas that works in as many modes as Moocanvas, then I will make a new
release of MochaUI with Moocanvas in IE7 standards mode. The downside to this is that
it will break the clock widget and will also not allow developers to use new CSS
features added to IE8.

One other fix required in MochaUI for IE8 Standards Mode is to add another line in
the CSS wherever opacity is set:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */     
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/  
opacity: .0;
-moz-opacity: 0;

Comment 4 by gregory.houston, Dec 23, 2008

There is a new version of Excanvas included in r386. I had to tweak a little bit of
code in MochaUI to get it working but it seems to be okay. It is not compressed yet.

The clock is not currently working in IE8 beta 2. I will probably wait to fool with
it more until the IE8 release candidate is out.

So other than the clock the canvas elements are rendering properly in IE8 Standards
Mode.

The window resize event does not fire in IE8 beta 2. This is a known issue and
supposedly is fixed in the current IE8 nightly build.

There are some strange errors here and there. Hopefully they will be resolved in the
release candidate. If not, I'll explore them further then.

Comment 5 by gregory.houston, Feb 08, 2009

As of r426 in the SVN, all of the MochaUI demos should now be
compatible with IE8 RC1 in both the "IE=7" and "IE=8" X-UA-Compatible
modes. You could also set the X-UA-Compatible meta tag to "IE=edge" or
remove it entirely.

I would suggest using "IE=8" unless you have your own code that breaks
in IE8 Standards Mode. If your code does break, then try "IE=7". If
your code breaks in both modes then you too will have the joy of
modifying your code to work in IE8 RC1.

SVN:
http://code.google.com/p/mocha-ui/source/checkout

Let me know if you find any further bugs. Depending on what craziness
IE does between now and their final release they may very well create
more regression bugs that we will have to deal with after the IE8
final release.

As long as it isn't too far off in the future, sometime after the
final release of IE8 I will probably release MochaUI 1.0. So if you
want to get your sites IE8 compatible before that time you will
probably need to get the code from the SVN.

Also of interest, The IE8 Readiness Toolkit:
http://www.microsoft.com/windows/internet-explorer/beta/readiness/developers-new.aspx

I will probably wait to close this ticket until after IE8's final release.

Status: Accepted
Comment 6 by [email protected], May 28, 2009

I am using the trunk (r526) here and in IE8 on vista it all works.
good work Greg !!

Comment 7 by webmaster1989, Jan 28, 2010

OW THX!!!! I loveeeeeeeeeee Mocha UI

mainPanel problem when loadMethod is iframe - #81

Reported by [email protected], Sep 25, 2009

What steps will reproduce the problem?

  1. In mocha-init.js, add a line in the click event method of notesLink:
    loadMethod: 'iframe', then save it.
  2. In the browser, click the notesLink.
  3. Collapse all the collapsible panels in the right-side column. The you
    will find the mainPanel can't resize normally.

What is the expected output? What do you see instead?
The problem is: mainPanel(when loadMethod is iframe) can't resize normally.

What version of MochaUI are you using?
0.9.6, the most newable version from SVN. (Revision: 529 )

On what operating system and with what browser?
windows, ie8 and firefox.

Please provide any additional information below.

1.png

43.0 KB View Download
Comment 1 by [email protected], Feb 10, 2010

found the same problem.
Version 0.9.6
revision unkown, sorry

any solutions?

Comment 2 by [email protected], Feb 10, 2010

Solution:
Core.js row 266
change:
'class': 'mochaIframe',
to:
'class': 'mochaIframe rWidth',

problem solved

Arg: Fraction out of range on IE 7

Reported by david187hk, Jun 04, 2009

After I update my excanvas to ver r3, It work fine on IE8, however, it
cause Arg: Fraction out of range on IE 7.

However, when I repleace the file back to old version, it work fine in IE
7, but IE 8.

As a result, I use the following code:

I don't know this problem is caused by excanvas or mocha-ui 0.9.5, if this
problem is caused by excanvas r3, I will report it to them.

P.S I am using mocha-ui 0.95 now, but I added some function for mocha-ui,
and so, I cannot try to upgrade to r526 in a short time.

Comment 1 by david187hk, Jun 13, 2009

Sorry, issue title should be "Arg: Fraction out of range on IE 7"

IE6 error 'request' is null or not an object

Hi
I noticed an error in IE6 'request' is null or not an object
line 215 src/demo/index.html
IE8 is ok. Can't test to IE7.

I tested back through all changes and found the error was introduced here:
http://github.com/cdotyone/mochaui/commit/1f35c6fd95e262e6b7a861f3a41703188ce86490

I went back commit by commit with git reset --hard HEAD^

This one should checkout the state with the commit where the error first appeared
git reset --hard 1f35c6f

and going one more back git reset --hard HEAD^ should be a version without error.

I could get rid of the error introduced in HEAD 1f35c6f
in 3 placed each marked with // Invisible dummy object
options.somethingcolor that draws the dummy had undefined color

But I failed getting rid of the error in the current develop version.

Color Theming in CSS - #63

Reported by carlsholmberg, Jan 30, 2009

What steps will reproduce the problem?
When setting a background-color for .mochaTitlebar in the ui.css I get a colored square above
the window canvas.

What is the expected output? What do you see instead?
As a wbdesigner I would expect that setting the background-color in the css would result in a
gradient of that color applied to the titlebar.

What version of MochaUI are you using?
r395

On what operating system and with what browser?
Safari 3.2.1, Firefox 3.0.5 and Opera 9.60.5246

A simple solution which could lead to better themeing of MochaUI is to look at the background-
color, apply that to the canvas and then removing the background-color. I have done just that in
the hack below which should be inserted after the window is inserted into the DOM (line 502 in
Window.js):
// Set TitlebarColor
if (this.titleBarEl.getStyle('background-color') !== '') {
this.options.headerStartColor = new Color(this.titleBarEl.getStyle('background-
color')).mix('#fff', 20);
this.options.headerStopColor = new Color(this.titleBarEl.getStyle('background-
color')).mix('#000', 20);
this.titleBarEl.setStyle('background-color', 'transparent');
}
By adding the following to the ui.css you can se the changes on the parametrics window and in
the json demo:
.mochaTitlebar {
background-color: #fff000;
}

json01 .mochaTitlebar {

background-color: #ff0000;

}

json02 .mochaTitlebar {

background-color: #0000ff;

}

json03 .mochaTitlebar {

background-color: #00ff00;

}

Sorry for spamming you with all of theese issues but I'm between jobs and thought it would be a
good time to get to know this cool library a bit!

Comment 1 by gregory.houston, Jan 30, 2009

This is a great idea. I want to think about it a bit more, but will probably
implement it in a future release.

Feel free to spam as much as you wish. :)

Summary: Color Theming in CSS
Labels: -Type-Defect -Priority-Medium Type-Enhancement Priority-Low
Comment 2 by gregory.houston, Feb 26, 2009

This has been implemented in r502. Rather than setting titleBarEl's background-color
to transparent with JavaScript, the title bar is given the class, "replaced", which
allows for dynamic Theme changes.

As well in r502, all of the window color options can be set in the CSS, and this is
now the preferred method. Setting them in the Window options will be deprecated.

  • headerStartColor: .mochaTitlebar background-color (See notes below.)
  • headerStopColor: .mochaTitlebar background-color (See notes below.)
  • bodyBgColor: .mocha background-color
  • minimizeColor: .mochaMinimizeButton color
  • minimizeBgColor: .mochaMinimizeButton background-color
  • maximizeColor: .mochaMaximizeButton color
  • maximizeBgColor: .mochaMaximizeButton background-color
  • closeColor: .mochaCloseButton color
  • closeBgColor: .mochaCloseButton background-color
  • resizableColor: .mocha .cornerSE background-color

If you set the background color of .mochaTitlebar, a gradient will be created from
that value. The gradient will start with the value you gave plus 20% white, and end
with the value you assigned plus 20% black. So the color in the middle of the
gradient should be the color you defined.

If you want more control over the start and end colors of the gradient then you will
need to set the background-image of .mochaTitlebar in the following way. Here we got
a bit creative using a query string appended to a background image.

{{{background: url(../images/spacer.gif?from=fafafa&to=e5e5e5);}}}

"from" is the top color of the gradient. "to" is the bottom color of the gradient.
Both must be hex values without the leading # sign.

To style some windows or panels differently than others using the addClass option.
The example windows created from with JSON for instance have been given the class,
"jsonExample". We can change their title bar color like so:

{{{
.jsonExample .mochaTitlebar {
background-color: #6db6db;
}
}}}

Status: Started
Owner: gregory.houston
Labels: -Priority-Low Priority-Medium

$('windowUnderlay') is sometimes null - #93

Reported by DaveSave, Mar 03, 2010

What steps will reproduce the problem?

  1. IE shows JS error.
  2. after searching for the cause it turns out that
    $('windowUnderlay') is sometimes null in Core.js
  3. I fixed it by doing this:

Origianl lines :

setUnderlaySize: function(){
$('windowUnderlay').setStyle('height', parent.getCoordinates
().height);
}

My Lines:

setUnderlaySize: function(){
if ($('windowUnderlay')) {
$('windowUnderlay').setStyle('height',
parent.getCoordinates().height);
}
}

What is the expected output? What do you see instead?

What version of MochaUI are you using?
0.9.5

On what operating system and with what browser?
Windows XP SP2, IE6.0.2900.2180

Please provide any additional information below.

Calendar plugin on a MODAL window - #85

Reported by alpmatari, Nov 10, 2009

What steps will reproduce the problem?

  1. Add the plugin in a modal window with a form.

What is the expected output? What do you see instead?
I expect to see the calendar, but I don't see it. It is behind the modal
window. I've change the z-Index property in the CSS calendar but it doesn't
work.

What version of MochaUI are you using? If you are using a copy of MochaUI
from the SVN, what revision number are you working with?
I'm using the last development version downloaded by HTTP.

On what operating system and with what browser?
Windows XP / Firefox 3.5.1

Please use labels and text to provide additional information.
I move the modal window and see the calendar behind. It works perfect: I
select a date and set it into the form field.

Calendar-issue.png

206 KB View Download

Windows resize handles not contained to container nor browser viewport - #74

Reported by 3gambit3, Jun 21, 2009

What steps will reproduce the problem?

  1. open any resizeable window
  2. you can now resize it outside the browser viewport
  3. try going to extremes on both width an height

What is the expected output? What do you see instead?
when window is made bigger than the viewport all kind of things happen:

  • it might pop back into viewport
  • it might become unusable if you resize the drag handle outside the viewport

since the windows are contained to viewport the resize handles should also be

What version of MochaUI are you using? If you are using a copy of MochaUI
from the SVN, what revision number are you working with?

SVN rev. 259

On what operating system and with what browser?

win XP SP3
all latest: FF3, IE8, chrome

Attached is my take on fixing the problem.
Modified: attachResizable() function in Window.js

tested a little bit in all my browsers
it should work on all browsers - there's no browser specific stuff here
just some additional stuff in establishing the limits

also it takes into account the windows "resizeLimit" property

Window.js

76.4 KB Download

mocha stop work with mootools-1.2.4 - #87

Reported by davcaffa, Dec 15, 2009

What steps will reproduce the problem?

  1. use the new version of mootools-1.2.4-core.js and
    mootools-1.2.4.2-more.js with all features

What is the expected output? What do you see instead?

Mocha don't work correctly
The error in firefox is:

this.fireEvent is not a function
http://localhost/mocha/scripts/source/Utilities/mocha.js.php
Line 1078

What version of MochaUI are you using?
v.0.9.5

On what operating system and with what browser?
Linux, windows xp
opera, firefox, safari

Please provide any additional information below.

Comment 1 by bryancmason, Jan 28, 2010

I fixed the code for mootools 1.2.4, see attached. Or if you'd like to know the gory
details... I added "Extends: Events, " (without the quotes) to the beginning of line
933 of version 0.9.5 and it works now.

So the patched lines 932-934 now look like:
MochaUI.Window = new Class({
Extends: Events, options: MochaUI.Windows.windowOptions,
initialize: function(options){

mochaui-cdsi.js

135 KB Download

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.