xuijs / xui

A tiny javascript framework for mobile web apps.

xui

A lightweight, dead simple, micro-tiny, super modular JavaScript framework for building mobile web applications. It's true: the minified code is super tiny. You can find more information, downloads and documentation on the http://xuijs.com.

If you want to build your own custom xui or help contribute: please read on! The best documentation is in the source and the tests.

Building xui

To get the full source you need Git:

$ git clone git://github.com/xui/xui.git
$ cd xui
$ git submodule init
$ git submodule update

To build xui, you will need Ruby, and if minifying, Java as well:

$ ./build                 # Generates lib/xui.js
$ ./build profile=bb      # Builds xui for BlackBerry 4/5 browsers (uses Sizzle selector engine)
$ ./build profile=ie      # Builds xui for Internet Explorer
$ ./build --minify        # Builds xui and minifies (Java required)
$ ./build --cat=path/f.js # Builds xui and appends the contents of f.js to the built files under lib/

Generating Documentation

The documentation is generated from the inline comments in the source-code. joDoc uses the comments to generate a set of HTML files.

To generate the documentation, you will need Ruby, Perl, and Git:

./build --generate-docs

Source Tree

xui
 |-README.md ................ You are reading it!
 |
 |-doc ...................... API Documentation (generated by build script)
 |
 |-lib ...................... Build directory (generated by build script)
 | |-xui.js ................. Core xui - optimized for standards-friendly browsers, i.e. webkit
 | |-xui-bb.js .............. BlackBerry implementation
 | '-xui-ie.js .............. Internet Explorer implementation
 |
 |-packages ................. Third-party libs utilized by xui (gitsubmodules)
 | |-qunit ..................   - awesome async friendly test lib by John Resig
 | |-emile ..................   - amazing tiny effects lib by Thomas Fuchs
 | |-sizzle .................   - kickass selector engine that powers jQuery, by John Resig.
 | '-split.js ...............   - override IE bad implementation of String.split
 |
 |-spec ..................... The spec
 | |-index.html ............. Open to run the spec
 |
 |-src
 | |-base.js ................ Bare essentials for dom node retrieval
 | |
 | |-js ..................... Essentials:
 | | |-dom.js ...............   - dom node manipulation
 | | |-event.js .............   - event subscribe/publish
 | | |-fx.js ................   - animation
 | | |-style.js .............   - css hackery
 | | '-xhr.js ...............   - remoting
 | |
 | '-ie
 |   |-dom.js
 |   |-event.js
 |   |-style.js
 |
 '-util ..................... Utils for minification, obfuscation, verification

Creators

• http://github.com/brianleroux
• http://github.com/silentrob
• http://github.com/sintaxi

Contributors

• http://github.com/rmurphey
• http://github.com/remy
• http://github.com/filmaj
• http://github.com/alunny
• http://github.com/gdagley
• http://github.com/slexaxton
• http://github.com/cluster
• http://github.com/joemccann
• http://github.com/mwbrooks
• http://github.com/RichardBronosky
• http://github.com/bryfox
• http://github.com/i8ramin
• http://github.com/edufelipe

(If we missed you, please let us know!)

License

Copyright (c) 2008, 2009, 2010 Brian LeRoux, Brock Whitten, Rob Ellis

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

xui's Issues

X-Requested-With:XMLHttpRequest Not set by xhr()

Inspecting an .xhr() request in the chrome dev pane shows no X-Requested-With:XMLHttpRequest header on xhr calls. Not sure if there is a reason for this that I'm missing.

Untitled

tests failing on xuijs.com

need to fix pathing problem from generated tests to /public dir

Dynamic Iframes on IE on Windows Phone 7.5: x$.ready seems to fire too early

Only on Windows Mobile 7.5 (Mango), when changing the location of an IFRAME through Javascript. The x$.ready inside the framed page seem to fire too early, such that getElementById returns null all the time. Well, basically, the DOM isn't ready and we're trying to touch it.

The (dirty) workaround is in the reproducer: stick to the body tag's "onload"

Running the reproducer:
Save all the files. Add the IE-specific XUI javascript base.
Host the pages so they can be access through a mobile web-browser
Open iewrap.html on a Windows 7.5 phone.
Try the two buttons at the bottom.

Source code for reproducer:

iewrap.html:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Nothing</title>
</head>
<body>
<iframe src="somejs.html"></iframe>
<iframe src="somejswithxui.html"></iframe>
<iframe id="frm" name="frm" src="nojs.html"></iframe>
<p>Replace "Nothing" Frame Location with:</p>
<button onclick="window.frames['frm'].location.replace('somejs.html');">Basic JS page</button>
<button onclick="window.frames['frm'].location.replace('somejswithxui.html');">XUI page</button>
</body></html>

nojs.html:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Nothing</title>
</head>
<body>
<p>Nothing</p>
</body></html>

somejs.html:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Nothing</title>
</head>
<body onload="document.getElementById('val').value='I was written by JS';">
<p>With regular markup JS</p>
<p>body's onload will set the value below</p>
<input type="text" id="val" name="val" value="Attempt failed" />
</body></html>

somejswithxui.html:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Nothing</title>
    <script src="xui-ie-2.3.2.js"></script>
    <script>
    x$.ready(function(){
        document.getElementById('val').value='I was written by JS';
    });
    </script>
</head>
<body>
<p>With XUI</p>
<p>x$.ready will attempt to set the value below</p>
<input type="text" id="val" name="val" value="Attempt failed" />
</body></html>

.addClass() does not Support Multiple Classes

If you are adding multiple classes, it works the first time, for example:

x$('div').addClass('myclass1 myclass2 myclassXXX');

But if you run that same line again, the classes are added again. It will keep doing it every time you run said line, so you will have classes added to the element over and over which will look like ... <body class="class1 class2 class1 class2 class1... so on and so forth.

I am an awful programmer, especially with javascript, but this change has worked (not sure how to commit this or whatever?)

addClass: function(className) {
    cname = className.split(' ');
    for( i=0; i<cname.length ; i++){
        return this.each(function(el) {
            if (hasClass(el, cname[i]) === false) {el.className = trim(el.className + ' ' + className);}
        });
    }
},

xui not working on wp7

apparently the IE build doesnt work on windows phone 7. run test suite on that fker!

can't get/set textarea value with attr method

I read the source code find that you only get the value when the tag name is input.

Negative left value breaks tween

The following line breaks XUI

x$('#' + currentPage).tween({ left: (-(pageWidth)) + 'px' });

The error:

TypeError: Result of expression '(i+(o-i)*l).toFixed' [undefined] is not a function.

If I remove 'px' from there it doesn't throw an error, but it also doesn't do anything.

.HTML() method does not support HTML that contains % signs or periods

Example....

var markup = "<li id='help' style='width: 33%;'> help </li>"
x$(#testing).html('bottom', markup)

This results in the width property not being applied due to the percent sign.

var markup = "<li id='help' style='width: 33.3333%;'> help </li>"
x$(#testing).html('bottom', markup)

This also does not work even after fixing the % issue because the regex split does not accommodate periods either.

The problem can be fixed by modifying line 195 of DOM.JS

It is currently
attrList = result[2].split(/([A-Z-]\s=\s_['|"][A-Z0-9:;#\s]['|"])/i);
I corrected the issue by changing it to
attrList = result[2].split(/([A-Z-]\s_=\s_['|"][A-Z0-9:;#%.\s]_['|"])/i);

selector bug

on any page with xui, try x$('.sdgsd').has('odfibjdoifj').find('*').length
the selector given to find() seems to execute it on the entire page

iPhone innerHTML bug

When using xuijs with PhoneGap on the iPhone the .html("string") method is failing occasionally.

I fixed this by not using html strings but creating new DOM elements instead.

Example:

x$('#someul').html('bottom',"

With text

"); // is failing occasionally.

var li = document.createElement('li');
li.innerText = "With text";
x$('#someul').html('bottom',li); // is working correctly.

It looks like the innerHTML failing occurs more when using a database callback for some reason...

I found this could be some old webkit bug?
http://comments.gmane.org/gmane.comp.handhelds.phonegap/4301
http://blog.johnmckerrell.com/2007/03/07/problems-with-safari-and-innerhtml/

.html() fails on writing two attributes when passed an argument

Writing the following code:

x$("#miniCartHeader").html('top', "<a id='closeCart' onclick='miniCart.hideCart()'>X</a>");

Prints the following:

<div id="miniCartHeader">
<a id="closeCart onclic">X</a>

</div>

Resize event fires twice on Chrome (17.0.963.56) on Ubuntu

Using this HTML: I see two alerts each time I resize the window, is this expected?

<html>
  <script type="text/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js" />
  <script type="text/javascript">
  // <![CDATA[
    x$(window).on('resize', function() { 
      alert('resize');
    });
  // ]]>
  </script>

</html>

xhr should allow Http code 201 as successful

diff --git a/iOS/www/js/lib/xui-2.2.0.js b/iOS/www/js/lib/xui-2.2.0.js
index 1a0e50d..aa9bddb 100644
--- a/iOS/www/js/lib/xui-2.2.0.js
+++ b/iOS/www/js/lib/xui-2.2.0.js
@@ -1358,8 +1358,11 @@ xui.extend({
         function hdl(){ 
             if(req.readyState==4) {
                 delete(that.xmlHttpRequest);
-                if(req.status===0 || req.status==200) req.handleResp(); 
-                if((/^[45]/).test(req.status)) req.handleError(req.status, req.statusText);
+                if(req.status===0 || (/^[2]/).test(req.status)) {
+                    req.handleResp(); 
+                } else if((/^[45]/).test(req.status)) {
+                    req.handleError(req.status, req.statusText);
+                }
             }
         }
         if(async) {

.html() doesn't work on winmobile 6.5

x$('h2').html('set this..');

seem to have no effect on pda device running winmo6.5pro, ce os 5.2

Blackberry 5.0 issues with HTML and before

Posted from the Phonegap mailing list: the following code gives a "The page you requested could not be loaded; it is too large for the device" error when the button is clicked, both inside a Phonegap app as well as off a standard web page:

x$(window).load(function(e){ 
    x$('#button-add').click(function(){ 
      x$('#header').html('before','<div id="new-div">Hello!</div>'); 
    }); 
}); 


<div id="header"> 
   <h1>A header</h1> 
   <button id="button-add">Click me</button> 
</div><!-- /header --> 

css/tween inconsistencies

marginLeft works in css, but in tween I have to use 'margin-left' or nothing happens.

find() needs to be passed in context explicitly on older BlackBerries

4.6 BB or so has problem with .find(). Assuming the below selectors are valid, this won't work:

var el = x$('#myEl');
var subEl = el.find('.randomClass');

But this will:

var el = x$('#myEl');
var subEl = el.find('.randomClass', el[0]);

wtf?

What's Everyone Using for Touch / Swipe Mangement?

Aside from the built-in xui event management, is there a framework or module you guys are using to handle touchevents / swipes? Maybe I am overthinking this because I'm building Apps (where i need just touch), but I still want click support to test in browser.

I did modify this script for xuijs but it breaks too often with double taps and stuff
https://github.com/dave1010/jquery-fast-click

That said there's nothing readily available for in xuijs swipes ....
This plugin exists but it's definitely a little buggy
https://github.com/xui/xui-plugins/tree/master/swipe

Is there another mobile framework out there where I can just rip a module to handle these events?

"xui" is exactly "dick" in Russian

Think about it ;)

basic events

Hi. How to use events like 'mouseover' and 'mouseout'?

remove method failing

when selector undefined

x$('#nothere').remove(); // throws exception

.attr('value') fails on input elements

Confirmed in Chrome 10.0.648.205, Firefox 4, BlackBerry Browser 6 and 5.

XUI ie mobile is not working on IE8 browser (desktop)

I am working on a web application which should work on both mobile platform and also on desktop. For this i am using XUI js library. It is working perfectly on iphone/blackberry/android mobiles. Also working perfectly on FireFox browser. When i try using XUI ie mobile version on IE8 browser, app is broken.

Is it possible to use XUI ie mobile version for IE browser on desktop?

.xhr defaults to async=false

i would prefer async=true personally - anyone else?

no function called: toggleClass

In the documentation there is the style method toggleClass. But it does not exist in your xui.js file?

shamelessly steal working code

... from jQuery/Dojo for .html and .xhr.

Add note about XUI selector

It would be useful if the following information:

"XUI is available to the entire document as x$. It is a function, that accepts a query selector."

which I found here:

https://github.com/phonegap/xui

was added to the main XUI doc page:

http://xuijs.com/docs/basics

xhr doesn't work on WiMo 6.5

XMLHttpRequest doesn't exist in IE before version 7.

Instead of
new XMLHttpRequest()
the code would need to be changed to perform
new ActiveXObject("MSXML2.XMLHTTP")

I'm not sure if WiMo 6.5 is a target platform for XUI, but there are still some devices out there in the wild. I use IETester in IE6 mode to quickly test for WiMo 6.5.

test builds to site

for bb and ie

Getting value of form element with .value is empty using .submit()

using the .submit() listener for a form

x$('#form-id').submit(function(){
    console.log(document.getElementById('input-id').value);  // correctly gets value
    console.log(x$('#input-id').attr('value'));  // gives undefined
    console.log(x$('#input-id').value);  // gives undefined
});

post commit hooks

to regen docs, tests and downloads for xuijs.com

Using a variable as a selector doesn't work

I don´t know if this is a bug, or if it is intended to work like this.
If I get a selector from an element attribute (the attribute contains the selector) and put it into a variable, using this variable as a selector does not work:

Example:

var ref= x$("#somepage").attr("href") ; // variable 'ref' contains "#idselector"
x$(ref).css("display", "block") ; // this does NOT work

But if I do:

x$(""+ref).css("display", "block") ; // enforcing a string conversion, THIS works

BTW: xui is awesome. I have been using jQuery for many years but it's a little heavy for mobile.
Tested xui and its so light and compact ! Keep the good work !

Using xui on an xhr response

Hey guys,

I'm trying out xui and poking at xhr.

From the xui home page, I'm trying to load the /license page and to insert it at the end of the page. This works flawlessly if I want to include the integral response in the page:

 x$('section').xhr('bottom', '/license')

However I'm having problems when using x$(this) to parse the response. Here's what I'm trying:

x$().xhr('/license', function () {
  console.log( x$(this).find('section h1').html() )
})

I would expect this code to output "mit license", the first heading in the main section of the license page. Instead, I'm getting "about", which is the first heading on the main page.

Any insights on what I'm doing wrong?

Is xui able to parse xhr responses (or arbitrary html strings, for that matter), or does it strictly operate on the DOM?

Thanks in advance!

syntax highlight code examples in docs for xuijs.com

google code prettyfier serverside is my vote...but if someone beats me to it heres the issue to fix

version file

for use in the build script

also would be super handy for xuijs.com

XHR failure callback

At the moment an exception is produced on failure. Is this something that XUI wants to handle as callback, I could submit a patch?

window.onload? xui.ready() = DOMContentLoaded / document.readyState

Hi,

I noticed in some of the xui examples the following method was used to determine when the document was loaded.

xui(window).on('load', function() {});

Correct me if I am wrong, but I believe that is equivalent to doing an onLoad which waits for all resources to be loaded (images, etc.)

I haven't been able to find something similar to jQuery's $(document).ready() function and thought I'd create my own. This is what I have and it seems to work in webkit browsers:

xui.ready = function(fn) {
    var dr = document.readyState,
        st = setTimeout;

    if (dr) {
        st(function() {
            if (dr == 'loaded' || dr == 'complete') {
                fn()
            } else {
                st(arguments.callee, 1);
            }
        }, 1);
    } else {
        document.addEventListener('DOMContentLoaded', fn, false);
    }
};

This or something similar to it might be useful to include as part of xui's core.

Thank you,
Ramin

Ajax was not a god

Not to be pedantic, but Ajax was a mortal, not a god.
http://xuijs.com/docs/xhr

Hero, yes. God, no.

;-)

not(q) returns empty set instead of all nodes if xui(q) is empty

elements.not(q) should return elements if xui(q) returns an empty set. Instead, not(q) returns an empty set.

Spec & patch here: bryfox@17abdba

(Also note that I cache the xui(q) result set, which I can't see a problem with.)

I just made a clean fork of xui, so this is the only change on top of the xui/xui head; do you want a pull request?

Consider adding content-type: 'application/x-www-form-urlencoded' for every XHR POST request

Hi,
Now I have to set this header every time I'm doing post request. Prototype for example always (even for get requests) add this header. Thanks to this it works with e.g. PHP's $_POST variable.

Accessing non-existant property throws error in XUI code

I am moving some code from JQuery to XUI, and had the following JQuery attribute access code:

$(window).attr("height");

I quickly converted this to XUI

x$(window).attr("height");

which caused an error. The issue though is that the error showed up in the XUI code, and not in my code, which made it difficult to debug.

Here is the error from Google Chrome:

Uncaught TypeError: Object [object DOMWindow] has no method 'getAttribute' h.extend.attrxui-2.0.0.min.js:9 h.fn.h.eachxui-2.0.0.min.js:6 h.extend.attrxui-2.0.0.min.js:9 updateCanvasDimensionsmain.js:363 initmain.js:105

It would be nice if the error would show up in my code, and not XUI (maybe attr can throw an error?)

Shoult it have toggleClass?

Should XUI have toggleClass for convenience sake?

/* perhaps something like this */

    function  toggleClass (className){
        var self = this;
        if (className !== undefined) {                
            this.each(function(el) {
                if(hasClass(el, className)){
                    x$(el).removeClass(className);                    
                } else {
                    x$(el).addClass(className);
                }
            });
        }
        return this;
    }

Cannot customize Content-Type header on xhr() POST

My web service was strictly accepting request with Content-Type: application/json
I cannot get that kind of header in XUI. The code below always produce
Content-Type: application/x-www-form-urlencoded, application/json

Code:

x$("#result").xhr("/mobile.asmx/arsip", {
    method: "post",
    async: true,
    data: '{"hal": 1}',
    headers: { "Content-Type": "application/json" },
});

Bug in xhr (fix included, I think)

https://github.com/xui/xui/blob/master/src/js/xhr.js line 114

req.handleResp = (o.callback != null) ? o.callback : function() { that.html(location, this.responseText); };   

Should it be this instead?

    req.handleResp = (o.callback != null) ? o.callback : function() { 
        that.html(location, req.responseText); // using this.responseText results in undefined (webkit)
    };

tween on value that is auto by default

I was getting the error "Object autoNaN has no method 'toFixed'" when trying to tween 'top'.

The error was avoided by adding top:'0px' to the css so it wasn't defaulting to 'auto'

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

(brought over from issue 48 in the old git repo)
Code causing the problem (inside xui.fn = xui.prototype ... .find()):
} else if (q.toString() == '[object NodeList]' {
ele = slice(q);
}

The problem here is that not every collection of DOM nodes results in [object NodeList]. Often the browser will return [object HTMLCollection], for example, via:
x$(document.getElementById('some_form_id').elements);

Just changing the conditional to the following solved our issues:
} else if (q.toString() == '[object NodeList]' || q.toString() == '[object HTMLCollection]') {

.html wrapping output in <body> tag

xui('#somediv').html('bottom',' \
    <div class="page"> \
        <h1></h1> \
        <div class="page-content"> \
        </div> \
    </div>');

Produces

<body>
    <div class="page">
        <h1></h1>
        <div class="page-content">
        </div>
    </div>
</body>

Removing the whitespace at the beginning of the html string fixes the issue.

X-Request-With should actually be X-Requested-With

The request header X-Request-With that was added recently, is actually supposed to be X-Requested-With

http://en.wikipedia.org/wiki/List_of_HTTP_header_fields

.html is sort of fucked

x$(document.body).html('bottom','<p id="this-is-a-test" style="font-size:12px;color:red;">hi</p>');

Results in:

<body>
    <p id="this-is-a-test style">hi</p>
</body>

Pretty sure it's something to do with wrap(). We should just rip out whatever jquery does and use that.