Compatible with DokuWiki

2009-12-25c “Lemming”, 2013-12-08 “Binky”

• Download

An iPhone compatible template for DokuWiki

Last updated on

2010-02-28

Requires

jquery

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Tagged with iphone, mobile

By hiflyer

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!

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.

• 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 indexmenu, or another autogenerating navbar plugin.

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

The Note Plugin requires the following changes to it's style.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;
}

More to come probably…

Use the following URL to download this template:

• dokumobile.zip

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

I switch Themes based on the usesd Device:

• put Mobile_Detect.php¹⁾ 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';}

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.

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!

• 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

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.

Edit top_bar.php and change.

  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

to

  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

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.

If you are using multitemplate multitemplate and also want to use dokumobile, the following code can be inserted…

		 if (clientismobile()) 
		{
		    $DOKU_TPL		= DOKU_TPL.'../dokumobile/';
			$DOKU_TPLINC	= DOKU_TPLINC.'../dokumobile/';
			@include(dirname(__FILE__).'/../dokumobile/'.$mt_file);
			 break;
		}

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

<?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);
}
?>

UPDATE:

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

<?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;
?>

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 multitemplate