brianleroux / xui

A tiny javascript framework for mobile web apps.

MOVED!

Hey guys! Lots of ppl using XUI so we moved it into this org: http://github.com/xui/xui

Please report bugs and the such there. Cheers - brian

xui's Issues

Rake or build?

All - this is fairly important, I'm trying to fix bugs in the event system but I'm not sure which build I'm supposed to be testing against.

Building with (requirejs) build.sh build profile=enchilada gives me errors throughout the the DOM tests, but building with rake min gives me a 1k additional overhead in the build.

So which are we going with? If requirejs, I'll see if I can fix the DOM errors.

Result of expression '$(window).load' [undefined] is not a function.

When running on just core.js - trying any kind of events fails with the
error above.

Is just running on core.js supported or are you supposed to use the entire more.js? The documentation is not very clear on this issue?

xhr 'post' option not setting request header content type

The documenation shows post as a supported method for xhr. Looking at the source code, it doesn't look like the correct request header is set onto the request if post is used. The lack of this header is stopping the XHR post from working correctly.

I chaned my local copy to use the logic below and I was able to successfully use the post option on the xhr() method.

        xhr:function(url,options) {   

            if (options == undefined) var options = {};

            var that   = this;
            var req    = new XMLHttpRequest();

            var method = options.method || 'get';
            var async  = options.async || false ;            
            var params = options.data || null;

                    req.open(method,url,async);
                    req.onload = (options.callback != null) ? options.callback : function() { that.html(this.responseText); }
                    if (method === 'post') {
                        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                        req.send(params);
                    } else {
                        req.send(null);
                    }

            return this;
        },

build process

• ruby dependent
• no modular enough

xhr fully working in BB (browser/phonegap)

• booyah

s60 regex unicode

Due to some nokia regex bug that does not like unicode, in the dom function wrap (line 131), regular expression /^<([A-Z][A-Z0-9])([^

Non-existent commit referred in emile

I forked the project and cloned it. I wasn't able to git submodule update.

I think your submodule is referring to a commit that doesn't exist anymore.

git submodule init
Submodule 'packages/emile' (git://github.com/madrobby/emile.git) registered for path 'packages/emile'
Submodule 'packages/qunit' (git://github.com/jquery/qunit.git) registered for path 'packages/qunit'
Submodule 'packages/shoulda-js' (git://github.com/brianleroux/shoulda-js.git) registered for path 'packages/shoulda-js'
Submodule 'packages/sizzle' (git://github.com/jeresig/sizzle.git) registered for path 'packages/sizzle'

git submodule update
Initialized empty Git repository in /Users/iamwil/Dropbox/projects/lib/xui/packages/emile/.git/
remote: Counting objects: 112, done.
remote: Compressing objects: 100% (110/110), done.
remote: Total 112 (delta 56), reused 0 (delta 0)
Receiving objects: 100% (112/112), 25.28 KiB, done.
Resolving deltas: 100% (56/56), done.
fatal: reference is not a tree: 97cec22794f8148da7273d950e8d1cdd192b55fe
Unable to checkout '97cec22794f8148da7273d950e8d1cdd192b55fe' in submodule path 'packages/emile'

anybody got a sample for example.build.js?

something changed for the better obviously, but building was simpler. Does anybody have sample for example.build.js?

Formatting

Can we please agree a format for spaces. I was using 2 spaces, it looked like Brian was using 4 spaces and now there's a bunch of code that's been checked in under tabs which has screwed a) the diffs but also formatting.

I'm saying stick with Brian's format.

Propose to ditch newly added xui('<img />');

I've reviewed the code that filmaj checked in to create elements and (could possibly do with tuning, along with killing the global vars being created - tsk!) although it does what is says on the tin, I think it's going to create problems. Here's why:

It looks to replicate the functionality of other libraries, such as jQuery, when you pass the HTML to generate the markup on the fly, except it kinda doesn't.

xui('<img />') does the same as jQuery('<img />');

But - misleadingly:

xui('<img /><strong>bold</strong>') does NOT do the same as jQuery('<img /><strong>bold</strong>');

Instead XUI gives us a single <img> element inside the collection, rather than the <img> and <strong> with text set to bold.

/me fixing.

Callback not firing when using tween method (Fixed - possibly)

The callback wasn't firing when I was using the tween method. I have changed line 599 from

if (typeof callback == 'function') options.after = callback;

to

if (typeof callback == 'function') opts.after = callback;

Which seems to have fixed it :)

xhr callback for onerror

Only executes the callback if status OK, should pass the status as first param to callback and always execute on completion (no handling for when the request goes bad).

Thanks!

dom templating attributes out of order

when using .html method

Suggestion: x$(selector).rmattr('attrname')

First of all, great library, thanks a bunch.
When dealing with disabled input boxes, such as button or submit, to enable them after they have been disabled a call to removeAttribute is required to remove the disabled attribute. After a call to removeAttribute the button is enabled. I added rmattr() to my local version, but I think other people might find it useful.

code: /**
* Remove an attribute
*
*/
rmattr: function(attribute) {
this.each(function(el) {
el.removeAttribute(attribute);
});
}

Thanks,
Charles

EVERYTHING BELOW THIS IS FUCT

Inconsistency between setStyle and getStyle

Taken straight out of the specs:

x$('#someElement').setStyle('backgroundColor','blue');
x$('#someElement').getStyle('background-color', function(v) { // ; });

How come we use two different strings to reference the same style property? Shouldn't this be consistent?

Thoughts?

submodule in sizzle

...

getStyle

only applys to the first element, should apply to all elements

XHR headers need moving

Line 104-108 where headers are set in xhr.js should be moved to after the 'open' command, otherwise you might get an exception (e.g INVALID_STATE_ERR: DOM Exception 11).

Consolidating core and more

There is a 1k minified difference between core and more. Additionally, some functions in more, I think, are useless, and others I use all the fucking time. I think we should just combine the two.

I wanted to hack it all up right away but brian in his democratic way said, let's vote on it. So, here's a summary of functions present in more.js and my thoughts on whether to drop or incorporate into mainline. Please share your thoughts!

more/fx.js:

native animations (i say kill it)

webkit-transform-based animations (kill it)

more/dom.js:

shortcut .html methods, i.e. .bottom() .top() etc. (incorporate)

more/base.js:

add(), adds more dom elements to existing set. (kill it, I don't use it)

end(), "Pops the last selector from XUI", wtf is this?

first(), this is just get(0). typing get(0) is one less char so I don't know why someone
would use first. kill it!

get()... ya keep it.

eq(): returns a collection containing element at given index. never use it, kill it.

size(): return this.length. nuf said. kill it.

more/xhr.js:

xhrjson - i love this function. keep it!

more/event.js:

shortcut functions .click .touchstart etc. keep!

more/form.js:

just helper functions for parsing forms. kill it, I never use it.

Please vote !!!!!!!

tween is fucked

not sure whats going on there

No xui.events. Commit efd813bbfa6ff2ccafa92c9b289d173193560ca8 breaks xui.

The following commit efd813b breaks xui. It assumes xui.event is an object, but it is never assigned. Putting the following in our code fixes this:

xui.events = {};

Any ideas for long-term fix?

style lib needs to standardize on the JavaScript style

padding-right vs paddingRight... etc

CSS show/hide not firing in Safari when placed before an XHR call (FF works ok)

I'm trying to load more results at the end of a page with an .xhr call. What I want to do is onclick, show the 'loading' p and hide the 'more' button... then when the data comes back, do the opposite (hide the 'loading' p and show the 'more' button). This works fine for me in Firefox, but Safari (and Mobile Safari) just refuses to do the show/hide thing when it's followed by an .xhr call. If I put an alert between the show/hide code and the .xhr, you can see it's working, but without that, the show/hide doesn't seem to work. Mabye I'm doing something wrong here?

x$('.pagingNav').before( '<p class="loading" style="display: none">Loading...</p>' );
x$('.pagingNav a')[0].href = '#_' + x$('.pagingNav a')[0].href;
x$('.pagingNav a').on( 'click', function(e){
    x$('.pagingNav').setStyle('display','none');
    x$('.loading').setStyle('display','block');
    nextPageUrl = nextPageUrl.length > 0 ? nextPageUrl : e.target.hash.slice(2);
    x$('.'+listType).xhr(nextPageUrl, {callback:function(){
        x$('.pagingNav').setStyle('display','table');
        x$('.loading').setStyle('display','none');
        tempEl = document.createElement('div');
        tempEl.innerHTML = this.responseText;
        x$('.'+listType+':last-child').after( tempEl.getElementsByClassName(listType)[0] );
        if ( tempEl.getElementsByClassName('newer').length > 0 ) {
            nextPageUrl = tempEl.getElementsByClassName('newer')[0].firstChild.href;
        } else {
            x$('.pagingNav').setStyle('display','none');
        }
    } });
    e.preventDefault();
});

working xui-core.js

Since the compiled xui-core on google code is terribly out of date, could anyone please be so nice as to provide some temporary link to the newest compiled version (dom, event, xhr)? Ive been banging my head against the table for couple of hours already to make one myself to no avail :(

hasClass()

and remove setStyle

How do I serialize form elements when submitting via xhr?

I'm trying to submit a form with an .xhr call, but I need to serialize my form elements... what's the easiest way to do that? I see a private method called _toQueryString that seems to do that but I'm not sure how to make use of it? Does .xhr use it automatically somehow that I'm not seeing?

ReferenceError: Can't find variable: $

event.js

line 155: $('body').fire('orientationchange');

should be
x$('body').fire('orientationchange');

context not passed to Sizzle in find()

Context on the find method can be lost when Sizzle is included with the library. Spec & patch here:

http://github.com/bryfox/xui/commit/c4ef1deb8f777b23a7262dee33bbbc86c83f6fec

...but I can't currently run specs on the platforms that include sizzle in their build profiles (IE/BB).

ReferenceError: Can't find variable: $. Line 1065

On orientation change for older browsers xUI throws this reference error.

ReferenceError: Can't find variable: $. Line 1065

Line 1065:
$('body').fire('orientationchange'); // will this bubble up?

Needs to be:
x$('body').fire('orientationchange'); // will this bubble up?

Thanks.

getStyle can return nothing rather than the computed style

should return computed

element-type selectors are fucked on BlackBerry

Selectors like this:
#blah a
don't work. BUT! give the anchor tags a class and then select with this:
#blah a.somerandomclass
works!

wtf eh? I'll try to tackle this at some point in the distant future.

fatal: reference is not a tree

$ git submodule update
fatal: reference is not a tree: 97cec22794f8148da7273d950e8d1cdd192b55fe
Unable to checkout '97cec22794f8148da7273d950e8d1cdd192b55fe' in submodule path 'packages/emile'

tests/specs for custom eventing in more

...

Latest is missing xhrjson

The latest commit seem to be missing xhrjson. Did this get removed?

xui core tests failing

q.toString() == '[object NodeList]' is inadequate

In xui's find() method, there's the following conditional:

} else if (q.toString() == '[object NodeList]' {
ele = slice(q);

}

This doesn't support a call from someForm.elements, though, as that comes back as [object HTMLCollection]

For example, if a page contains a form with id 'someform'. The following results in an empty xui object:

x$(document.getElementById('someform').elements);

Just changing the above conditional solves the problem (although may also need to be updated to include [object NamedNodeMap])):

} else if (q.toString() == '[object NodeList]' || q.toString() == '[object HTMLCollection]') {

eventing: no unbind in core

• this is fail

xhr post doesn't work

Has it can be refered here : http://groups.google.com/group/phonegap/browse_thread/thread/c61a2e089c9d0289/
The xhr call with method: 'post' doesn't work unless you define the headers on it.

Thanks

tests are only running in iphone sim

• need to run on BB sim
• need to run on Android sim
• need to run on Palm sim
• need to run on Nokia sim

Rake build fail

Grabbed a fresh version of XUI today and attempted to build, receive the following error:

No such file or directory - /Users/bryanrieger/Tools/xui/packages/emile/emile.js
/Users/bryanrieger/Tools/xui/Rakefile:143:in `initialize'

Apparently 'emile.js' is missing from 'packages' (as I suspect are files related to qunit, shoulda-js and sizzle - those directories are also currently empty).

xhr-more fix sugar syntax at top

...

xhr-more test xhrjson

...and/or remove and talk to rob about creating a new lib for this purpose based on PURE

check for method dups in core/more

methods are appearing in both. why.

documentation audit

• inline docs are out of date
• no canonical docs anywhere else
• need to solve as a team

hasClass() should return false on an empty set

Feel free to invalidate this, but (coming from jQuery, at least) I would expect hasClass() to return false for any class when tested against an empty set of elements.

Patch + spec: http://github.com/bryfox/xui/commit/64bc66a50c2147f420d277e6b482a3a04a56a74d

WebOS: Emile style normalization fails, (no child nodes exist)

Not sure where this bug belongs, WebOS or Emile, but line 1300 of XUI-Full fails. I suspect innerHTML is not honored if the node is not part of the DOM.

Take this test case, adapted from the Emile code:

var parseEl = document.createElement("div");
parseEl.innerHTML = "<div style="height:100px"></div>";
Mojo.Log.error("NODE 0: " + parseEl.childNodes[0]);
var css = parseEl.childNodes[0].style;

Result: error: NODE 0: undefined

I'm writing up a better test case, but I thought I'd toss this out there to make sure I'm not crazy.

• Clint

fast matching for pure ID selectors fails if context != document

jQuery solves this by matching against:

quickExpr = /^[^<](<[\w\W]+>)[^>]$|^#([\w-]+)$/,

then only branches to the getElementById if match[1] && !context

context.getElementById can fail

Coming from a jquery background, I would expect this to work:
var container = x$('#container');
var containee = container.find('#containee');
Instead, you end up with context.getElementById is not a function

A quick fix would be to check to see if context has a getElementById function and if not, force a call from document instead of context.

remove() shortcut fails

can be fixed by changing line 247 to:

if (html && html.each !== undefined)