Multiple Changes to 0.30 alpha 1 (also fixes issues #2 and #74)

[GoogleCodeExporter]

The attached code includes several important changes to iUI 0.30 alpha 1.  
(The check-in version that includes smooth scrolling.)

I will attach both the iui.js source code file, as well as a highlighted 
change report that shows every change made to the original alpha 1 code.

There are several fixes from other issues, as well as new code that has 
been discussed previously on the forum.

The highlighted change file includes a very detailed discussion of the 
changes made, as well as reasoning behind the changes.  It is contained in 
the file's comments at the top, so do a View Source to see the detailed 
information.

I will also paste the same detail below.

_______________
PROPOSED changes to iUI 0.30 alpha 1
by Todd Northrop (Speednet Group), July 27, 2009

Summary of changes:

All of these fixes/features are being submitted under one issue,
which should be issue #152 when it is submitted.

1. Custom events

Adds three custom JavaScript events to iUI:
    - onLoad (called on page load)
    - onUnload (called on page unload, useful for cleanup)
    - onPageUpdated (called after new panel is displayed in current 
page)

The events can be set in a page as shown in the following example:
    iui.onLoad = function () { ... };

onLoad and onUnload are not passed any arguments, but onPageUpdated is 
passed two arguments: the "to" page/panel and the "from" page/panel. 

The combination of these three events is very powerful for developers 
wishing to customize the appearance of the page. I use these events to 
capture certain elements and perform miscellaneous setup code in onLoad, 
then use onPageUpdated to show/hide/customize elements depending on what 
panel has just loaded, then perform any cleanup necessary using 
onUnload. 

2. _replaceinner (Existing issue #74)

Adds "_replaceinner" link target which replaces button 
clicked with content, as opposed to "_replace", which appends content to 
the end of the page. 

3. URL bar appears when loading via AJAX (Fixes issue #2)

Fixes iPhone/AJAX issue that causes the URL bar to briefly appear and
disappear every time a new load of AJAX content occurs.  With the fix in
place, the developer can simply place a hash mark in the href attribute
before the path/file name of the AJAX content, and the URL bar will
no longer appear.  For example:

<a href="#mycontent.htm">link text</a>

Note, this is the same syntax as opening a new page/panel based on the ID
attribute of the content to open.  The new code recognizes that the URL
in the AJAX call is not an ID and tries to open by URL instead.

The comments in issue #2 contain a similar solution that involves adding
a hash mark and an underscore to AJAX calls, and uses code to parse
out the underscore.  While this does work, it introduces a difficult-to-
remember syntax that does not have semantic meaning.  By using a hash
mark alone for both element-based content and AJAX content, it is
easier to read and remember syntactically, and does not introduce an
extraneous character that exists simply for the purpose of
differentiation.

4. Clean up main click handler

The main click handler that starts with addEventListener("click", ... 
was made more efficient and readable by capturing the link attributes
that are tested and used multiple times in local variables.  Previously,
the same object and property references would have to be resolved
numerous times for each click, causing unnecessary computation.

Also, to see if the back button was clicked, the code was searching
the DOM for the backButton element and then comparing the element
itself to the clicked link to test for equality.  This was changed to a
simple comparison of the id attribute.

5. Added slide animation for dialogs

If slide animation is enabled in the code by setting iui.animOn to true,
dialogs will slide in the top, much like native iPhone apps.  In addition
to the animated dialog, I tried to fade-in the grayed out area behind
the dialog, but the effect was glitchy on the iPhone, and made the
dialog momentarily blink on and off.  (The effect worked nicely with
Safari on a PC however.)  So the compromise was to mask the 
background first, then slide the dialog onto the page.

In addition, a bug was fixed that previously did not extend the grayed
area behind a dialog all the way to the bottom of the masked content.
A user was able to scroll the page containing the dialog up beyond the
masked area and interact with the page beneath.  Now the mask
extends all the way to the bottom.  The user can still scroll, but they
cannot interact with the content.

6. Fixed bug related to scroll position after slide

With smooth animation disabled, the existing code performs a "scroll
to top" before the slide is executed.  This helps if the user is scrolled
down the page when the slide is initiated.  With smooth scrolling
enabled, no such "scroll to top" is currently performed.

There are two issues here:  (a) the smooth scrolling code needs to have
"scroll to top" added, and, (b) the "scroll to top" should be performed
*after* the slide is complete, not before.  The reason for doing the 
scroll after is that currently it can be a very jarring experience for the
user to click a link and have the page jump immediately to the top and
then start moving.

To solve these two issues, "scrollTo(0, 1);" has been added to the
slideDone() function.  This ensures that "scroll to top" is done for
both types of slides, and performs the "scroll to top" *after* the
slide is finished.

7. Minor preventDefault() change

In the code that starts with "form.onsubmit = function(event)..."
I have commented-out the event.preventDefault(); and added a
return false; at the end of the function.  There are other cases
in the code where this could be done, but I made this change as an
example/test.

JavaScript best generally-accepted practices call for the use of
"return false" rather than preventDefault, because it is quicker
and more all-encompassing.  In addition to preventing the default
action of the event, using "return false" also stops event bubbling.

My suggestion is to make the same change to the other event
handlers throughout the code, but I thought it would be better
to achieve consensus with the project owners on this issue before
submitting the code for it.

Original issue reported on code.google.com by t...@speednet.biz on 27 Jul 2009 at 2:34

Attachments:

• iui-0.30alpha1-updates.htm
• iui.js

[GoogleCodeExporter]

Well, someone beat me to issue #152, so please substitute "Issue #153" where I 
mention issue #152 in the descriptions.

Original comment by t...@speednet.biz on 27 Jul 2009 at 2:35

[GoogleCodeExporter]

I have updated the Lottery Post iPhone edition to use the exact code file 
(iui.js) 
that I have submitted here.

The URL is http://www.lotterypost.com

It allows you to see all of the changes made in this file:

- The animated dialog is used in the Lottery Results section.  CLick Lottery 
Results, then click the Change button at the top.

- The new scrollTo() code can be viewed in the same section.  Scroll far down 
the 
page listing the various states, and then click one of them.  You will see the 
smooth scroll occur first, then it goes to the top of the page.  (A nice 
addition to 
the iui code would be to smooth-scroll up to the top instead of using 
scrollTo(), 
but that's a fight for another day.)

- The onLoad and onPageUpdated events are both used.  In particular, you can 
see the 
effects of the onPageUpdated event, as the toolbar buttons appear and disappear 
depending on the page you navigate to.  For example, if you navigate to the 
home 
page you will see the buttons disappear.  That is handled in the onPageUpdated 
event.

- The _replaceinner functionality is used on the page that displays the current 
lottery results.  From the Home page, click Lottery Results, then click 
Arizona, 
then click Powerball.  Scroll down to the bottom and you'll see buttons for 
Show 
Last 10 Drawings and Show Last 10 Jackpots.  You will notice that when you 
click 
those buttons, the buttons are replaced with the new content, rather than 
having the 
content appended to the page if the normal _replace was used.  _replaceinner 
replaced the item clicked with the new content.

- Finally, you will notice throughout the site that the URL bar never drops 
down as 
new pages are loaded, despite the fact that nearly every page is an AJAX load.  
That's because all of the AJAX page names in the href attribute are prefixed 
with a 
hash mark, and the new code submitted here figures out that it is an AJAX page 
reference and not an element on the page to load.

Original comment by t...@speednet.biz on 27 Jul 2009 at 3:02

[GoogleCodeExporter]

i attached the patch file... 

Original comment by kaisergi...@googlemail.com on 31 Jul 2009 at 11:34

Attachments:

• issue-153.patch

[GoogleCodeExporter]

Thank you kaisergimmel!

By the way, I have downloaded the latest 0.30 beta 1 code and as a test took 
the 
iui.js file attached to this issue and directly overlaid the iui.js file in the 
demo 
pages.  It worked bug-free (from what I could tell), and the animations for the 
dialog were working nicely too.

Original comment by t...@speednet.biz on 31 Jul 2009 at 2:49

[GoogleCodeExporter]

We still need to look at this functionality for 0.40.  Not  as a monolithic 
patch, but we don't want to lose any of 
this good stuff.  I'm not sure if we should open some other issues for this or 
what the approach is.  For now, I"m 
going to mark this as being part of 0.40.

Original comment by msgilli...@gmail.com on 8 Sep 2009 at 3:31

• Changed state: Accepted
• Added labels: Milestone-REL-0.40

[GoogleCodeExporter]

I'm looking at this patch today to make sure the extensibility changes to 0.40 
will support all the features proposed in this patch.  
Since the functionality of the onload and onunload events in this patch can be 
implemented just by calling:
addEventListener("load", function) or addEventListener("unload", function) and 
using addEventListener allows multiple listeners 
whereas iui.onload = function does not, I think it's best to recommend using 
addEventListener for this function.

The functionality of onPageUpdated will be added to iui.js, but I'm also 
leaning towards using addEventListener with a custom, 
synthetic event to implement this.  This would also allow multiple listeners.

Original comment by msgilli...@gmail.com on 13 Sep 2009 at 12:57

[GoogleCodeExporter]

thanks, looks cool.

specialy i like feature 5 with the popup.
is it possible to make it also appear from the bottom?

greets
chris

Original comment by ilovesi...@gmail.com on 13 Sep 2009 at 10:57

[GoogleCodeExporter]

Thanks Chris.  That dialog is fun to watch gliding in like a native app.  I am 
sure 
that it can be slid from the bottom too, but would require a lot more effort 
than 
sliding from the top.   That's because the bottom of the visible area is not 
really 
the bottom of the page.  Getting the dialog to display is a bit of trickery 
that 
overlays some elements on the page.  When sliding from the top, I can deal in 
specific size elements, but with sliding from the bottom the page can be any 
length, 
and I would somehow need to figure out how to deal with that.

I know that native apps tend to slide the dialog from the bottom, but in 
actually 
making this work, I found that making it slide at all was very difficult and 
filled 
with trial-and-error.  Then, thinking about accomplishing that from the bottom 
was a 
bit overwhelming at the time and I considered myself lucky to get it working 
the way 
it is!  :)

I was actually trying to *fade* to black and then do the slide, which worked 
great 
in the Safari desktop browser, but on the iPhone it was very glitchy.  That 
would 
have been a really nice effect.

Original comment by t...@speednet.biz on 14 Sep 2009 at 2:17

[GoogleCodeExporter]

Original comment by msgilli...@gmail.com on 26 Sep 2011 at 12:04

• Added labels: Milestone-REL-0.6
• Removed labels: Milestone-REL-0.40