https://nyov.github.io/mochaui/Demo
A MooTools UI Library User Interface Library
/Source - all source files required to build /Demo - demonstration of MochaUI
Expect some breaking changes
development tree for MochaUI
Home Page: http://mochaui.org/demo/
License: Other
https://nyov.github.io/mochaui/Demo
A MooTools UI Library User Interface Library
/Source - all source files required to build /Demo - demonstration of MochaUI
Expect some breaking changes
MooTools More implements String.parseQueryString
http://mootools.net/docs/more/Native/String.QueryString#String:parseQueryString
Could we omit the MochaUI implementation?
http://github.com/cdotyone/mochaui/blob/develop/src/mui/core.js#L439
I haven't really found where in Mocha it is used.
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:
One could use the MUI.Column onResize event, but there seems no generic way to get all the panels in this column.
Feature request:
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
Reported by luca.boccianti, Jan 06, 2010
What steps will reproduce the problem?
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
Reported by [email protected], May 28, 2009
What steps will reproduce the problem?
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.
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.
No radius on maximize, needs to be optional.
What steps will reproduce the problem?
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.
Reported by fblomqvist, Sep 28, 2009
What steps will reproduce the problem?
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).
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:
What version of MochaUI are you using?
---r529
On what operating system and with what browser?
---win xp google browser
Thanks
Window isn't building and giving me an error on IE8. This seems to be a newly introduced issue in current git develop branch.
I tracked this down to a problem only if resizable: false
fixed in http://github.com/eerne/mochaui/commit/f41863a4221e636a73e4fd2d457bd6cef060ef76
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
Reported by a2b2c2d, Jul 03, 2009
What steps will reproduce the problem?
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]
});
Reported by fblomqvist, Jul 17, 2009
What steps will reproduce the problem?
What is the expected output? What do you see instead?
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
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:
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.
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.
Reported by noeldacosta, Jul 20, 2009
What steps will reproduce the problem?
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);
...
...
});
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.
Window, when maximized should have the shadow turned off.
I get an error with Chrome on Linux when viewing index.html:
Uncaught TypeError: Cannot read property 'length' of null script/mocha.js line 700
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
Reported by fblomqvist, Jun 16, 2009
What steps will reproduce the problem?
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
Reported by huangfengjing, Jan 07, 2010
What steps will reproduce the problem?
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');
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
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
How about integrating a datagrid, for example omnigrid: http://www.omnisdata.com/omnigrid/ with mochaUI?
Reported by [email protected], Aug 24, 2009
What steps will reproduce the problem?
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.
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?
Reported by fblomqvist, Jun 15, 2009
What steps will reproduce the problem?
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
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.
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
Reported by webmaster1989, Jan 29, 2010
What steps will reproduce the problem?
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
Window needs to stay below dock when maximized.
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
create a generic way to close a panel, window, or column
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.
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.
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?
Reported by stourwalk, Mar 12, 2009
Additional Functionality:
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();
}
},
Reported by chegabyte, Nov 24, 2009
What steps will reproduce the problem?
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() )
Reported by fblomqvist, Aug 26, 2009
What steps will reproduce the problem?
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).
Prepare for IE 9.0 Canvas control. Stop including excanvas_r43.js for IE 9.0?
Reported by tjmcgrew, Oct 17, 2008
What steps will reproduce the problem?
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:
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:
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
Reported by [email protected], Sep 25, 2009
What steps will reproduce the problem?
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
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"
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.
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;
}
background-color: #ff0000;
}
background-color: #0000ff;
}
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.
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
Reported by DaveSave, Mar 03, 2010
What steps will reproduce the problem?
setUnderlaySize: function(){
$('windowUnderlay').setStyle('height', parent.getCoordinates
().height);
}
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.
Reported by alpmatari, Nov 10, 2009
What steps will reproduce the problem?
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
Reported by 3gambit3, Jun 21, 2009
What steps will reproduce the problem?
What is the expected output? What do you see instead?
when window is made bigger than the viewport all kind of things happen:
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
Feature Request for Window onDragStart onDragComplete events
http://github.com/eerne/mochaui/commit/b2356eec57aa5ce833e0312338a8c241787a982d
Reported by davcaffa, Dec 15, 2009
What steps will reproduce the problem?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.