An iPhone compatible template for DokuWiki
Compatible with DokuWiki
2009-12-25c “Lemming”, 2013-12-08 “Binky”
This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.
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:
Click on a button to display that link's contents.
They show / hide using jQuery.
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:
Refer to template on how to install and use templates in DokuWiki.
I switch Themes based on the usesd Device:
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!
?>
at the end causing the image path to 404.Add your bugs or issues here
jQuery.noConflict()
with the EditorOn 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