Topic: [WIP] jQuery Mobile Mode

[nend]

This is still a work in progress, working pretty good, still a few minor bugs. Once those are worked out I will either release this or hand it over to a fellow developer to release.

Current Bugs
Back key in browser handles like browser.
Need a way to rewrite the browser history so it handles more like a app instead of like a browser back key which may take you in circles if that is what you did.

Test site
http://wrestletopia.2-si.net/n/?jmobile

I also got a Android version that needs testing, this however I will not be releasing due to the complications in setup and support. If you wish to have the Android app version please contact me. For demo purposes - http://wrestletopia.2-si.net/mobile/android/Wrestle%20Topia.apk

Once again this is in active development, once the history thing is tackled I will be looking to release this. If I release it as a mod then I may pass this on to another developer, since I don't like tackling the support and hoops to get it here. However I may just release it as a hack, simpler on me.

[Doctor Deejay]

Nice

[GQCritic]

Great work!

[Liam_michael]

Cool

[SA™]

glad to see you decided to share it here it is a nice addition

[nend]

Having a little difficulty trying to figure out how to structure the browser history to make a more app like quality to the mode.

I tried BBQ but no go there so far. The BBQ API looks like it should do the trick though, but it is a new API to me and still trying to make sense of it all. http://benalman.com/projects/jquery-bbq-plugin/

I don't know if I am wasting my time here, trying to get this structure history behavior. It looks like the BBQ API can do it, just can't figure it out so far.

[nend]

I haven't had the chance to touch anything lately. I am going to forget about the history structure for now, since it is really not needed. I will release the code later on today when I get to my PC as a hack so anyone here can test it for me and see if they can find any problems with it.

[Joker™]

Can you explain a bit more what sort of history structure are you exactly looking for. In simple projects one can use "window.history.back();" and can float back. It'd be interesting to hear whats exactly in your mind .

[nend]

Can you explain a bit more what sort of history structure are you exactly looking for. In simple projects one can use "window.history.back();" and can float back. It'd be interesting to hear whats exactly in your mind .

Say this is your browsing

Board Index -> Board1 -> Topic1 -> Board2 -> Topic3 -> Board1

As you can see if you go back from the first entry you end up going this route

Board1 -> Topic3 -> Board2 -> Topic1 -> Board1 -> Board Index

This is the natural behavior of the browser history. I want to rewrite or manipulate the history system where Topic will always take you to the board it is in when pressing back. As forth the board when pressing back will always take you to the parent board or board index.

On to the roll out of the hack now...

In the main index.php
Find

Code: [Select]

// Determine if this is using WAP, WAP2, or imode.  Technically, we should check that wap comes before application/xhtml or text/html, but this doesn't work in practice as much as it should.
if (isset($_REQUEST['wap']) || isset($_REQUEST['wap2']) || isset($_REQUEST['imode']))Replace

Code: [Select]

// Determine if this is using WAP, WAP2, or imode.  Technically, we should check that wap comes before application/xhtml or text/html, but this doesn't work in practice as much as it should.
if (isset($_REQUEST['wap']) || isset($_REQUEST['wap2']) || isset($_REQUEST['imode']) || isset($_REQUEST['jmobile']))
Find

Code: [Select]

if (!defined('WIRELESS'))
define('WIRELESS', isset($_REQUEST['wap']) || isset($_REQUEST['wap2']) || isset($_REQUEST['imode']));Replace

Code: [Select]

if (!defined('WIRELESS'))
define('WIRELESS', isset($_REQUEST['wap']) || isset($_REQUEST['wap2']) || isset($_REQUEST['imode']) || isset($_REQUEST['jmobile']));
Find

Code: [Select]

if (WIRELESS)
{
define('WIRELESS_PROTOCOL', isset($_REQUEST['wap']) ? 'wap' : (isset($_REQUEST['wap2']) ? 'wap2' : (isset($_REQUEST['imode']) ? 'imode' : '')));Replace

Code: [Select]

if (WIRELESS)
{
define('WIRELESS_PROTOCOL', isset($_REQUEST['wap']) ? 'wap' : (isset($_REQUEST['wap2']) ? 'wap2' : (isset($_REQUEST['imode']) ? 'imode' : (isset($_REQUEST['jmobile']) ? 'jmobile' : ''))));
Find

Code: [Select]

// Wireless protocol header.
if (WIRELESS_PROTOCOL == 'wap')
header('Content-Type: text/vnd.wap.wml');Add After

Code: [Select]

// jQuery Mobile most smartphones actually support output compression...
if (WIRELESS_PROTOCOL == 'jmobile') {
$modSettings['enableCompressedOutput'] = '1';
}
After adding all this code download the attached file and open up your Wireless.template.php. Add the contents of this file to the end of your template file right before the ending ?>

[Joker™]

Say this is your browsing

Board Index -> Board1 -> Topic1 -> Board2 -> Topic3 -> Board1

Is it possible to surf like that?

[nend]

Figured out the problem, my function was only getting called once since it was hooked to the onload event. Since jQuery Mobile uses asynchronous loading the onload event only gets called once. I put my new code in each div container in the DOM to be executed with every load of a new page.

Simple, should of known though asynchronous that is, my fault.

[hakcenter]

I'm really interested in this project.

I don't mind tapatalk.. Just rather have something free for my user base. If you need help or want to collaborate let me know.

[nend]

The code in this post should do the job http://www.simplemachines.org/community/index.php?topic=469498.msg3290572#msg3290572

As for the customization, that was for my Android app. I got it to work but it made it incompatible with web. 

[Joker™]

Well there is a frame know as backbone JS.

We were also facing a similar history issue with android and iOS while developing an App. At that moment we discovered that backbone JS passes a parameter with every url route/redirect as "replace : true".

"replace" basically replaces your routed page with the current page, while helps you to avoid building cyclic references in the history. You can read more about it here.

You can do something similar in your app too.

[nend]

It is a little complex but in Android you can set up a JavaScript interface which can share information back and forth with the web view. Basically all I did was get the server side to pass this information on to the app.

I have a 100% working Android Application, history works perfect and everything.

However I am not offering the Java code for the Android app and server side code for SMF for the app at this time.

There are allot of reasons though why I am not going to do this right now. Even if I did offer the source code it will take at least a novice Java developer to edit it and compile it into a Android Application. Basically if I released it I will have to custom tailor every app and/or give support on how to do it.

I just really need to think about this, all coding work has finished on this project. Now just have to figure out what to release. I know the code I posted a few post down is perfect, if anyone wants to throw that in a mod that is just fine with me. Although like my first point, I am not going to release the Java code base at this time.