====== dokumobile Template ======

---- template ----
description   : An iPhone compatible template for DokuWiki
author        : hiflyer
email         : hiflyer.x@gmail.com
lastupdate    : 2010-02-28
compatible    : 2009-12-25c “Lemming”, 2013-12-08 “Binky”
depends       : plugin:jquery
conflicts     : 
similar       : 
screenshot_img: http://img718.imageshack.us/img718/6096/dokumobiletoolbar.png
tags          : iPhone, mobile

downloadurl   : https://trello.com/1/cards/5d711bc283c3778bffe22c01/attachments/5d711d28fb2a477484e28ef0/download/dokumobile.zip
bugtracker    : # eg. https://github.com/example/dokuwiki-plugin-sample/issues
sourcerepo    : # eg. https://github.com/example/dokuwiki-plugin-sample/
donationurl   : # eg. https://www.paypal.com/...
----

Since there hasn't been a DokuWiki template for the iPhone, I decided to try my hand at creating one. This was based on the default template that comes with DokuWiki. Hopefully it doesn't totally suck on it's first release...

I am not a programmer & would welcome tweaks & additions to make it more esthetically appealing -- especially better icons ;)

That said, I've found it to be very usable which was the key.

Hey, an iPhone template had to start somewhere after all!


===== More Screen s=====

{{http://img718.imageshack.us/img718/6096/dokumobiletoolbar.png?200| Toolbar}} {{http://img35.imageshack.us/img35/8961/dokumobiletoc.png?200|Table on Contents}} {{http://img188.imageshack.us/img188/8360/dokumobileformatting.png?200|Formatting}} {{http://img64.imageshack.us/img64/5343/dokumobileadmin.png?200|Admin}}

===== Quick rundown: =====

There are three buttons at the top of every page:
  * The Left shows the current page TOC
  * The Middle button shows the search bar + buttons (login etc)
  * The Right button displays the wiki:navigation_mobile page which you have to create. I suggest a page with indexmenu solely.

Click on a button to display that link's contents.

They show / hide using jQuery.

===== Requirements =====

  * [[plugin:jquery|jQuery plugin]]

Create a page at "wiki:navigation_mobile" to use as your navigation page (or edit the ''top_bar.php'' to point somewhere else). I highly suggest [[plugin:indexmenu |indexmenu]], or another autogenerating navbar plugin.

===== Plugin Issues =====

Since most plugins were NOT designed around the idea of a 320px wide screen, some do require tweaking.

The [[plugin:note|Note Plugin]] requires the following changes to it's ''style.css'':

<code css>
.noteclassic, .noteimportant, .notewarning, .notetip {
  margin: 2em;
  margin-left: auto;
  margin-right: auto;
  width: 68% !important;
  min-height: 40px;
  clear: both;
  text-align: left;
  vertical-align: middle;
  border-collapse: collapse;
  padding: 5px 5px 5px 70px;
  background-position: 5px 50%;
  background-repeat: no-repeat;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
}
</code>

More to come probably...

===== Download and Install ======

Use the following URL to download this template:

  * [[https://trello.com/1/cards/5d711bc283c3778bffe22c01/attachments/5d711d28fb2a477484e28ef0/download/dokumobile.zip|dokumobile.zip]]

Refer to [[:template]] on how to install and use templates in DokuWiki.

==== Use as an alternative mobile Theme  to a standard Theme ====

I switch Themes based on the usesd Device:

  * put **Mobile_Detect.php**((http://code.google.com/p/php-mobile-detect/)) into your conf-dir
  * put into your local.php manually after "%%$conf['template']=%%":

  include("Mobile_Detect.php");
  $mdetect = new Mobile_Detect();
  if ($mdetect->isMobile()) {$conf['template']='dokumobile';}

===== To Do =====

Admin pages need to be reworked which is out of my league.
(Admin, mediamanager, configuration, etc...)

Configurable options need to be added into the main DokuWiki configuration page.

===== Tips =====

If you're editing a wiki page on your iPhone and need to scroll the edit box, hold one finger down in the edit box area and then scroll with a second finger. Works perfectly!

===== Bugs & Issues =====

  * There appears to be an issue with the top_bar.php file, originally the img src has an extra ''?>'' at the end causing the image path to 404.
Add your bugs or issues here
  * Use ''jQuery.noConflict()'' with the Editor

===== Discussion =====

On MSIE, and Safari, I am not getting any icons, only questions marks with a box around them. On Firefox, I do not even get that. I installed JQuery, I'm not sure what I did wrong.

Regardless of the browser, I find that the code you provide to switch templates based on UserAgent creates a failure of the wiki to load on mobile devices unless tplSwitcher plugin is also installed and activated.  After activation, that plugin it adds code to local.protected.php that makes the Mobile_Detect.php mod work (and load on mobile devices).  tplSwitcher can then be disabled if desired, but the code in local.protected.php MUST stay or the wiki won't load on mobile devices.

==== Solution to MSIE/Safari ====

Edit ''top_bar.php'' and change.

<code html>
  7 <table width="300px" cellspacing="0" cellpadding="0" style="border:0;margin:5px auto 5px auto;">
  8   <tr>
  9     <td width="33%" style="border:0;" align="left"><img src="<?php echo DOKU_TPL?>images/icon_left.png? >" id="toggle_toc" /></td>
 10     <td width="33%" style="border:0;" align="center"><img src="<?php echo DOKU_TPL?>images/icon_middle.png? >" id="toggle_admin" /></td>
 11     <td width="33%" style="border:0;" align="right"><img src="<?php echo DOKU_TPL?>images/icon_right.png? >" id="toggle_nav" /></td>
 12   </tr>
 13 </table>
 14
</code>

to

<code html>
  7 <table width="300px" cellspacing="0" cellpadding="0" style="border:0;margin:5px auto 5px auto;">
  8   <tr>
  9     <td width="33%" style="border:0;" align="left"><img src="<?php echo DOKU_TPL?>images/icon_left.png" id="toggle_toc" /></td>
 10     <td width="33%" style="border:0;" align="center"><img src="<?php echo DOKU_TPL?>images/icon_middle.png" id="toggle_admin" /></td>
 11     <td width="33%" style="border:0;" align="right"><img src="<?php echo DOKU_TPL?>images/icon_right.png" id="toggle_nav" /></td>
 12   </tr>
 13 </table>
 14
</code>

This does not seem to be a jQuery issue (and not a browser issue as well). Just remove the "? >" sequence after the image file names since ".../icon_left.png? >" is not a valid URL! After modifying the template file images should show up properly in any browser.

==== using with multitemplate ====

If you are using [[template:multitemplate]] multitemplate and also want to use** dokumobile**, the following code can be inserted...
<code php>
		 if (clientismobile()) 
		{
		    $DOKU_TPL		= DOKU_TPL.'../dokumobile/';
			$DOKU_TPLINC	= DOKU_TPLINC.'../dokumobile/';
			@include(dirname(__FILE__).'/../dokumobile/'.$mt_file);
			 break;
		}
</code>		

Edit **\wiki\lib\tpl\multitemplate\meat.php** like this.

<code php>
<?php global $DOKU_TPL,$DOKU_TPLINC; ?>
<?php
/** Multitemplate for DokuWiki
 * By Terence J. Grant
 * tjgrant [at] tatewake [dot] com
 * License: GPL v2
 */
function mt_beginsWith( $str, $sub ) {
	return ( substr( $str, 0, strlen( $sub ) ) === $sub );
}

@include(dirname(__FILE__).'/local_pref.php');


if (isset($ID) == TRUE)
{
	foreach($multitemplate as $mt_namespace => $mt_othertemplate)
	{           
	    if (clientismobile()) 
		{
		    $DOKU_TPL		= DOKU_TPL.'../dokumobile/';
			$DOKU_TPLINC	= DOKU_TPLINC.'../dokumobile/';
			@include(dirname(__FILE__).'/../dokumobile/'.$mt_file);
			 break;
		}
		if (mt_beginsWith($ID, $mt_namespace))
		{
			$DOKU_TPL		= DOKU_TPL.'../'.$mt_othertemplate.'/';
			$DOKU_TPLINC	= DOKU_TPLINC.'../'.$mt_othertemplate.'/';
			@include(dirname(__FILE__).'/'.'../'.$mt_othertemplate.'/'.$mt_file);
			break;
		}
	}
}
else
{
	$DOKU_TPL		= DOKU_TPL.'../'.$multitemplate[''].'/';
	$DOKU_TPLINC	= DOKU_TPLINC.'../'.$multitemplate[''].'/';
	@include(dirname(__FILE__).'/'.'../'.$multitemplate[''].'/'.$mt_file);
}
?>
</code>


UPDATE:

Actually it is not running... I had to add the following at the beginning:

<code php>
<?php
// This is the top Toolbar for dokumobile
if (isset($DOKU_TPL)==FALSE) $DOKU_TPL = DOKU_TPL; if (isset($DOKU_TPLINC)==FALSE) $DOKU_TPLINC = DOKU_TPLINC;
?>
</code>
Note the line starting with "if (isset....."

and to replace DOKU_TPL with $DOKU_TPL on the rest of the document in top_bar.php
(see "How to modify your templates" in [[template:multitemplate]]