aUX_web: A JavaScript repository from jasonweng

aUX_web¶ ↑

aUX.web is a helper library for writing mobile web apps and AppMobi apps.

About¶ ↑

At AppMobi, we use our own tools to build apps and these libraries came out of our internal needs. Two libraries require AppMobi to use, while the rest can be used for AppMobi and general mobile web development. aUX.web.web.min.js contains a minified version of functions that can be used for mobile web development aUX.web.am.min.js contains the appmobi specific functions. aUX.web.all.min.js contains all the toolkit functions

The sources are in the web/ and appmobi/ folders. You can find demos in the demo/ folder.

Mobile Web Libaries (aUX_web.min.js)¶ ↑

These libraries can be used in AppMobi or general mobile web development. aUX.web.alphaTable

A CSS3 Alphabetical/scrolling table. This creates a table that you can scroll, but have the alphabetical index for users to jump around with.

aUX.web.scroller

A CSS3 scrolling library. This allows you to create a fixed height/width div and scroll veritical and/or horizontal.

aUX.web.carousel

A CSS3 carousel library. You can create vertical or horizontal carousels.

aUX.web.swipeListener

This detects swipe events on an element. You can set the threshold of pixels they must move for veritcal or horizontal.
Executes a callback function with an object as a parameter that indicates if the swipe was north, south, east, west.

aUX.web.template

A template parsing library, similar to popular scripting languages syntax. The parsing engine is John Resig’s micro template engine

aUX.web.appMobiSelect

A replacement for HTML select boxes. There is a bug when -webkit-transform:translate3d is applied to elements, it causes an issue with painting the active area
This will find all select boxes in an element and replace them with the new widget
Old select box stays, so it is backwards compatibile with any code/interaction.

aUX.web.appMobiPassword

A replacement for HTML password boxes. There is a bug when -webkit-transform:translate3d is applied to elements, it causes an issue with painting the focused box on the page.
This will find all password boxes in an element and replace them with the new widget
Old password boxes stays, so it is backwards compatibile with any code/interaction

aUX.web.css3animate

This is a helper function for doing css3 animations. It allows you to animate the x/y position, opacity and width/height (more properties coming soon).

AppMobi Libraries¶ ↑

These libraries require AppMobi to work

aUX.web.shakeListener

This taps into the accelerometer to trigger an event when the device has been shook. You can set a threshold to indicate movement required to trigger the shake.
Executes a callback function when it recieves a shake.

aUX.web.social (coming soon in 3.4.1)

A wrapper utility for making oAuth calls using AppMobi

aUX.web.alphaTable¶ ↑

To use aUX.web.alphaTable, you must also include the aUX.web.scroller library. You must do the following

Create a aUX.web.scroller for your list. See the instructions below.

Create your list, broken up by divs/spans/anchors for each alphabet.

<div id="contacts_A">
    <li>Joe Anderson</li>
</div>
<div id="contacts_B">
    <li>Joe Bob</li>
</div>

Call the javascript function to create the object. The first paramter is the ID for the scroller, the second is the scroller object. The third is optional config parameters
```
var alphaTable = new aUX.web.alphaTable("contentDIV",scroller,{prefix:"contacts_",listCssClass:"cssClassName"});
```

There are two optional parameters

var options{
    prefix:"contacts_", //prefix for your divs
    listCssClass:"listTable" //CSS class name to style the alphabet list.  Youc an position it, set the background color, etc.
}

aUX.web.scroller¶ ↑

To use aUX.web.scroller you must do the following

Create an outer container div that has the height and width of the area you want to see visible

<div id="my_div_container" style="width:100%;height:300px">
    <!-- div from below goes here -->
</div>

Create a div with the content inside you want scrollable.
```
<div id="my_div" >
    
</div>
```

Call the javascript function

var scroller = new aUX.web.scroller("my_div");

There are additional configuration options that are passed in as an object parameter

var options={
    verticalScroll:true, //vertical scrolling
    horizontalScroll:false, //horizontal scrolling
    scrollBars:true  //display scrollbars
}
var scroller = new aUX.web.scroller("my_div",options);

You can also have it scroll to a specific position

scroller.scrollTo({x:-100,y:-200});

aUX.web.carousel¶ ↑

To use aUX.web.scroller you must do the following

Create a div with the content inside you want to page between. You must set the height and width of this div, along with overflow:hidden

<div id="my_div" style="width:768px;height:400px;overflow:hidden">
    <div style="float:left;width:766px;height:400;border:1px solid white;background:yellow;"></div>
    <div style="float:left;width:766px;height:400;border:1px solid white;background:green;"></div>
</div>

if you want the dots to show up for paging, create the div

<div id="carousel_dots" style="text-align: center; margin-left: auto; margin-right: auto; clear: both;position:relative;top:-40px;z-index:200"></div>

Call the javascript function to create the carousel
```
var carousel = new aUX.web.carousel("my_div");
```

There are additional configuration options that are passed in as an object parameter

var options={
    totalPages:2, //number of pages to scroll through
    vertical:false, // page up/down
    horizontal:true, // page left/right
    pagingDiv:null, // div to hold the dots for paging
    pagingCssName:"carousel_paging", //classname for the paging dots
    pagingCssNameSelected: "carousel_paging_selected" //classname for the selected page dots
}
var carousel = new aUX.web.carousel("my_div",options);

aUX.web.swipeListener¶ ↑

To use aUX.web.swipeListener you must do the following

Create an html elemenet you want to detect the swipe on. This could also be the whole document.

Call the javascript function to listen for the swipe event

var swipe=new aUX.web.swipeListener(document); //string or element to listen on

There are additional configuration options that are passed in as an object parameter

var options={
    vthreshold:50, //vertical pixel threshold
    hthreshold:50, //horizontal pixel threshold
    callback:null //callback function to execute.  It takes one parameter that has the swipe directions
}
var swipeListener = new aUX.web.swipeListener("myDiv",options);
var swipe = new aUX.web.swipeListener(document,{vthreshold:30,hthreshold:50,callBack:function(dir){console.log(dir)}});

aUX.web.template¶ ↑

The template parsing library is John Resig’s micro templating, with some fixes and enhancements. ejohn.org/blog/javascript-micro-templating/ To use aUX.web.template you must do the following

Create your template. The easiest way is to create <script> tags with the content type of “text/html” and set an id

<script type='text/html' id='user_info'>
Name <%=userinfo.name%><br>
Company <%=userinfo.company%><br>
Cool <%=userinfo.awesome%>
</script>

To process the template you call a javascript function with the id of the template, and optional data to pass in
```
document.getElementById('output').innerHTML=aUX.web.template("template");
```

You can pass in an optional object parameter that provides data to be used within the template. Below is a sample that could display user information based on a user object

<script type='text/html' id='user_info'>
    Name <%=userinfo.name%><br>
    Company <%=userinfo.company%><br>
    Cool <%=userinfo.awesome%>
</script>
<script type='text/javascript'>
    var user={
       name:"Joe Programmer",
       company:"appMobi",
       awesome:"of course"
    }
    document.getElementById("output").innerHTML=aUX.web.template("user_info",{userinfo:user});
</script>

aUX.web.appMobiSelect¶ ↑

Currently, there exists a bug in mobile webkit with -webkit-transform:translate being applied to an element that has <select> elements in it. The second the translate position is changed, the active box for the select box changes. It could be above or below the actual select box, making the user experience a disaster. What this does is replaces all select boxes with a custom widget that is similar to the android picker. The old select is still there and backwards compatible with other libraries for getting/setting values.

To use aUX.web.appMobiSelect you must do the following

Make sure your current select boxes are wrapped in a span tag
```
<span><select id="myid"><option>1</option></select>
```
On the document.load or appMobi.device.ready listener, you must create an object, then call getOldSelects on the elements (div/spans/document) you want.
```
var selectFixer = new aUX.web.appMobiSelect();
selectFixer.getOldSelects("selectTest");
```

getOldSelects takes in the id of the element you want to search for select tags in. Ideally, you would call it on all the divs that have select boxes in it. There are issues with Google Maps, and other libraries, that inject their own select boxes into the DOM.

Currently, you can not theme this, but it will be added soon.

aUX.web.appMobiPassword¶ ↑

Currently, there exists a bug in mobile webkit with -webkit-transform:translate being applied to an element that has <input type=“password”> elements in it. The second the translate position is changed, the overlay for the password is in a different position, making it look like another input box appears. What this does is replaces the password box with an input box that updates the content as it goes with an asterik to simulate a password box

To use aUX.web.appMobiPassword you must do the following

Make sure your current password boxes are wrapped in a span tag
```
<span><input type="password" id="myid"></span>
```
On the document.load or appMobi.device.ready listener you must create an object and then call getOldPasswords on the elements (div/spans/document) you want.
```
var pwFixer = new aUX.web.appMobiPassword();
pwFixer.getOldPasswords("selectTest");//element you want to replace the password boxes in
```

getOldPasswords takes in the id of the element you want to search for password boxes in. This will replace them with the new tool.

Currently, you can not theme the input boxes, but that will be added soon.

aUX.web.css3animate¶ ↑

This is a library to help with css3 animations

To use aUX.web.css3animate you must

Call the function

aUX.web.css3animate("element_id",options);

There are additional configuration options that are passed in as an object parameter

var options={
   x:20, //x axis move. this can be a number (40), percent (50%), or pixels (40px) - if it's a number, px is added to it.
   y:20, //y axis move
   opacity:.5, //opacity to change to
   width:"100px", //style.width to change to
   height:"100px", //style.height to change to
   origin:"50% 50%", //offset to start the animation from default is 0 0
   rotateX:"50deg", //rotate along the x-axis
   rotateY:"50deg", //rotate along the y-axis
   skewX:"50deg", //skew along the x-axis
   skewY:"50deg", //skew along the y-axis
   time:"300ms", //time for transition
   timingFunction:"linear", //timing function for animation
   previous:false // move from previous position - not tested with animation by percentages
   callback:function(){console.log("finished animation")}
}
aUX.web.css3animate("element_id",options);

You can chain animations by passing in a animation in the callback function

aUX.web.css3Animate("animate", {x : 20,    y : 30,    time : "300ms",    callback : function() {    aUX.web.css3Animate("animate", {x : 20,    y : 30,time : "500ms",    previous : true,callback : function() {reset();    }});}});

This will be released with AppMobi 3.4.1

This is a wrapper library for making oAuth requests using AppMobi.oauth functions. Please see the AppMobi.oauth documentation for full details (coming in 3.4.1).

To use aUX.web.social you must do the following

Create an object for each service

var serviceName="twitter";
var twitter= new aUX.web.social(serviceName);

Make the oAuth request for the service

twitter.makeRequest("https://api.twitter.com/1/statuses/user_timeline.json","get_timeline","GET",printTimeline);

makeRequest is the main function you will interact with. It takes in the following parameters

API request url
Service id - this should be unique per request url
Method - GET/POST (optional defaults to GET)
Callback function (optional) - takes in an event from appMobi.oauth.protected.data
Request Body - url parameters to pass in the request

Below is a sample of posting a status update to twitter

twitter.makeRequest("https://api.twitter.com/1/statuses/update.json","set_update","POST",checkResult,"status=foobar"

aUX.web.shakeListener¶ ↑

To use aUX.web.shakeListener you must do the following

Call the javascript function and pass in a callback function to be executed when a shake is detected
```
aUX.web.shakeListener(function(){console.log("Shake Detected");});
```

An optional second parameter is threshold for declaring accelerometer movement as a shake. The default is 5. Lowering it will trigger the callback more, raising it will trigger it less.

aUX.web.shakeListener(function(){console.log("Shake Detected");},10); //More shakes needed to trigger the callback

jasonweng/aUX_web

aUX_web¶ ↑

About¶ ↑

Mobile Web Libaries (aUX_web.min.js)¶ ↑

AppMobi Libraries¶ ↑

aUX.web.alphaTable¶ ↑

aUX.web.scroller¶ ↑

aUX.web.carousel¶ ↑

aUX.web.swipeListener¶ ↑

aUX.web.template¶ ↑

aUX.web.appMobiSelect¶ ↑

aUX.web.appMobiPassword¶ ↑

aUX.web.css3animate¶ ↑

aUX.web.social¶ ↑

aUX.web.shakeListener¶ ↑