Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Frontend improvements #93

Merged
merged 29 commits into from Jun 30, 2012
Merged

Frontend improvements #93

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
16cc7ed
removed names from footnotes and removed anchors from headings altoge…
selfthinker Apr 8, 2012
940db3a
use abbr instead of deprecated acronym
selfthinker Apr 8, 2012
3c86b7e
removed align attribute from images and inserted them only in the fee…
selfthinker Apr 8, 2012
8e38227
renamed smiley image class to 'icon' (FS#1970)
selfthinker Apr 8, 2012
0607bfe
added some wanting classes
selfthinker Apr 8, 2012
6c47a78
load only one stylesheet for all modes instead of three
selfthinker Apr 9, 2012
57b3442
moved the mobile part of the rtl styles (including @media) into mobil…
selfthinker Apr 9, 2012
6322e09
minor changes to gradients: quotes around data-uris and commented css…
selfthinker Apr 9, 2012
49e5a70
moved contents of rtl.css into other CSS files
selfthinker Apr 9, 2012
d5acc30
rewrote and improved HTML for TOC
selfthinker Apr 9, 2012
91b05b6
improved HTML for search results
selfthinker Apr 9, 2012
3d2fd76
added accidentally removed jquery-ui styles back again
selfthinker Apr 9, 2012
c8388e4
made TOC togling script more generic
splitbrain Apr 20, 2012
290a806
mobile styles for the TOC structure changes
splitbrain Apr 20, 2012
5dcb125
collapse sidebar in mobile view FS#2473
splitbrain Apr 20, 2012
48722ac
improved toc changes and sidebar toggling
selfthinker Apr 22, 2012
1a82105
match on img tag in feed's img align replacement
splitbrain Apr 23, 2012
df06cef
removed superfluous whitespaces
splitbrain Jun 29, 2012
d14f401
improved media queries for mobile and tablet modes
selfthinker Jun 29, 2012
a4760d1
try twitter bootstrap version of media queries for mobile and tablet …
selfthinker Jun 29, 2012
ddc8fa8
adjusted wrong dimension for tablet mode
selfthinker Jun 29, 2012
30fc91c
adjusted comment in mobile.css to reflect recent changes
selfthinker Jun 29, 2012
ef7e36e
make mobile javascript work correctly on orientation change
splitbrain Jun 29, 2012
0c06a18
Merge branch 'master' of github.com:splitbrain/dokuwiki into frontend…
selfthinker Jun 29, 2012
688c521
fixed the toc/sidebar toggling script for real
splitbrain Jun 30, 2012
e6889ec
removed debugging and check for TOC/sidebar exisance
splitbrain Jun 30, 2012
ea39a99
use a PNG alpha gradient instead of CSS3 or SVG
splitbrain Jun 30, 2012
2329bcd
separate determination of device class & set as an html class on <htm…
Chris--S Jun 30, 2012
3f7dd17
make sure content column is at least as long as sidebar
splitbrain Jun 30, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions feed.php
View file
Open in desktop
Expand Up @@ -324,6 +324,10 @@ function rss_buildItems(&$rss,&$data,$opt){
// no TOC in feeds
$content = preg_replace('/(<!-- TOC START -->).*(<!-- TOC END -->)/s','',$content);

// add alignment for images
$content = preg_replace('/class="medialeft"/s', 'class="medialeft" align="left"', $content);
$content = preg_replace('/class="mediaright"/s', 'class="mediaright" align="right"', $content);

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

memo to myself: to avoid having this modifying actual content, it should at least match the image tag as well. The tag would be HTML encoded for actual content, so it should be safe to preg_replace it.

// make URLs work when canonical is not set, regexp instead of rerendering!
if(!$conf['canonical']){
$base = preg_quote(DOKU_REL,'/');
Expand Down
44 changes: 24 additions & 20 deletions inc/html.php
View file
Open in desktop
Expand Up @@ -323,11 +323,11 @@ function html_search(){
flush();

//show progressbar
print '<div class="centeralign" id="dw__loading">'.NL;
print '<div id="dw__loading">'.NL;
print '<script type="text/javascript" charset="utf-8"><!--//--><![CDATA[//><!--'.NL;
print 'showLoadBar();'.NL;
print '//--><!]]></script>'.NL;
print '<br /></div>'.NL;
print '</div>'.NL;
flush();

//do quick pagesearch
Expand Down Expand Up @@ -363,20 +363,24 @@ function html_search(){
//do fulltext search
$data = ft_pageSearch($QUERY,$regex);
if(count($data)){
print '<dl class="search_results">';
$num = 1;
foreach($data as $id => $cnt){
print '<div class="search_result">';
print '<dt>';
print html_wikilink(':'.$id,useHeading('navigation')?null:$id,$regex);
if($cnt !== 0){
print ': <span class="search_cnt">'.$cnt.' '.$lang['hits'].'</span><br />';
print ': '.$cnt.' '.$lang['hits'].'';
}
print '</dt>';
if($cnt !== 0){
if($num < FT_SNIPPET_NUMBER){ // create snippets for the first number of matches only
print '<div class="search_snippet">'.ft_snippet($id,$regex).'</div>';
print '<dd>'.ft_snippet($id,$regex).'</dd>';
}
$num++;
}
print '</div>';
flush();
}
print '</dl>';
}else{
print '<div class="nothing">'.$lang['nothingfound'].'</div>';
}
Expand Down Expand Up @@ -449,7 +453,7 @@ function html_revisions($first=0, $media_id = false){

if (!$media_id) print p_locale_xhtml('revisions');

$params = array('id' => 'page__revisions');
$params = array('id' => 'page__revisions', 'class' => 'changes');
if ($media_id) $params['action'] = media_managerURL(array('image' => $media_id), '&');

$form = new Doku_Form($params);
Expand Down Expand Up @@ -664,12 +668,13 @@ function html_recent($first=0, $show_changes='both'){
if (getNS($ID) != '')
print '<div class="level1"><p>' . sprintf($lang['recent_global'], getNS($ID), wl('', 'do=recent')) . '</p></div>';

$form = new Doku_Form(array('id' => 'dw__recent', 'method' => 'GET'));
$form = new Doku_Form(array('id' => 'dw__recent', 'method' => 'GET', 'class' => 'changes'));
$form->addHidden('sectok', null);
$form->addHidden('do', 'recent');
$form->addHidden('id', $ID);

if ($conf['mediarevisions']) {
$form->addElement('<div class="changeType">');
$form->addElement(form_makeListboxField(
'show_changes',
array(
Expand All @@ -682,6 +687,7 @@ function html_recent($first=0, $show_changes='both'){
array('class'=>'quickselect')));

$form->addElement(form_makeButton('submit', 'recent', $lang['btn_apply']));
$form->addElement('</div>');
}

$form->addElement(form_makeOpenTag('ul'));
Expand Down Expand Up @@ -1381,7 +1387,7 @@ function html_edit(){
}

$form->addHidden('target', $data['target']);
$form->addElement(form_makeOpenTag('div', array('id'=>'wiki__editbar')));
$form->addElement(form_makeOpenTag('div', array('id'=>'wiki__editbar', 'class'=>'editBar')));
$form->addElement(form_makeOpenTag('div', array('id'=>'size__ctl')));
$form->addElement(form_makeCloseTag('div'));
if ($wr) {
Expand Down Expand Up @@ -1413,13 +1419,12 @@ function html_edit(){
echo 'textChanged = ' . ($mod ? 'true' : 'false');
echo '//--><!]]></script>' . NL;
} ?>
<div style="width:99%;">
<div class="editBox">

<div class="toolbar">
<div id="draft__status"><?php if(!empty($INFO['draft'])) echo $lang['draftdate'].' '.dformat();?></div>
<div id="tool__bar"><?php if ($wr && $data['media_manager']){?><a href="<?php echo DOKU_BASE?>lib/exe/mediamanager.php?ns=<?php echo $INFO['namespace']?>"
target="_blank"><?php echo $lang['mediaselect'] ?></a><?php }?></div>

<div id="draft__status"><?php if(!empty($INFO['draft'])) echo $lang['draftdate'].' '.dformat();?></div>
<div id="tool__bar"><?php if ($wr && $data['media_manager']){?><a href="<?php echo DOKU_BASE?>lib/exe/mediamanager.php?ns=<?php echo $INFO['namespace']?>"
target="_blank"><?php echo $lang['mediaselect'] ?></a><?php }?></div>
</div>
<?php

Expand Down Expand Up @@ -1711,11 +1716,11 @@ function html_TOC($toc){
if(!count($toc)) return '';
global $lang;
$out = '<!-- TOC START -->'.DOKU_LF;
$out .= '<div class="toc">'.DOKU_LF;
$out .= '<div class="tocheader toctoggle" id="toc__header">';
$out .= '<div id="dw__toc">'.DOKU_LF;
$out .= '<h3>';
$out .= $lang['toc'];
$out .= '</div>'.DOKU_LF;
$out .= '<div id="toc__inside">'.DOKU_LF;
$out .= '</h3>'.DOKU_LF;
$out .= '<div>'.DOKU_LF;
$out .= html_buildlist($toc,'toc','html_list_toc','html_li_default',true);
$out .= '</div>'.DOKU_LF.'</div>'.DOKU_LF;
$out .= '<!-- TOC END -->'.DOKU_LF;
Expand All @@ -1732,8 +1737,7 @@ function html_list_toc($item){
$link = $item['link'];
}

return '<span class="li"><a href="'.$link.'" class="toc">'.
hsc($item['title']).'</a></span>';
return '<a href="'.$link.'">'.hsc($item['title']).'</a>';
}

/**
Expand Down
20 changes: 8 additions & 12 deletions inc/parser/xhtml.php
View file
Open in desktop
Expand Up @@ -109,7 +109,7 @@ function document_end() {

// open the footnote and set the anchor and backlink
$this->doc .= '<div class="fn">';
$this->doc .= '<sup><a href="#fnt__'.$id.'" id="fn__'.$id.'" name="fn__'.$id.'" class="fn_bot">';
$this->doc .= '<sup><a href="#fnt__'.$id.'" id="fn__'.$id.'" class="fn_bot">';
$this->doc .= $id.')</a></sup> '.DOKU_LF;

// get any other footnotes that use the same markup
Expand All @@ -118,7 +118,7 @@ function document_end() {
if (count($alt)) {
foreach ($alt as $ref) {
// set anchor and backlink for the other footnotes
$this->doc .= ', <sup><a href="#fnt__'.($ref+1).'" id="fn__'.($ref+1).'" name="fn__'.($ref+1).'" class="fn_bot">';
$this->doc .= ', <sup><a href="#fnt__'.($ref+1).'" id="fn__'.($ref+1).'" class="fn_bot">';
$this->doc .= ($ref+1).')</a></sup> '.DOKU_LF;
}
}
Expand Down Expand Up @@ -181,9 +181,9 @@ function header($text, $level, $pos) {
if ($level <= $conf['maxseclevel']) {
$this->doc .= ' class="' . $this->startSectionEdit($pos, 'section', $text) . '"';
}
$this->doc .= '><a name="'.$hid.'" id="'.$hid.'">';
$this->doc .= ' id="'.$hid.'">';
$this->doc .= $this->_xmlEntities($text);
$this->doc .= "</a></h$level>".DOKU_LF;
$this->doc .= "</h$level>".DOKU_LF;
}

function section_open($level) {
Expand Down Expand Up @@ -316,7 +316,7 @@ function footnote_close() {
}

// output the footnote reference and link
$this->doc .= '<sup><a href="#fn__'.$id.'" name="fnt__'.$id.'" id="fnt__'.$id.'" class="fn_top">'.$id.')</a></sup>';
$this->doc .= '<sup><a href="#fn__'.$id.'" id="fnt__'.$id.'" class="fn_top">'.$id.')</a></sup>';
}

function listu_open() {
Expand Down Expand Up @@ -471,8 +471,8 @@ function acronym($acronym) {

$title = $this->_xmlEntities($this->acronyms[$acronym]);

$this->doc .= '<acronym title="'.$title
.'">'.$this->_xmlEntities($acronym).'</acronym>';
$this->doc .= '<abbr title="'.$title
.'">'.$this->_xmlEntities($acronym).'</abbr>';

} else {
$this->doc .= $this->_xmlEntities($acronym);
Expand All @@ -483,7 +483,7 @@ function smiley($smiley) {
if ( array_key_exists($smiley, $this->smileys) ) {
$title = $this->_xmlEntities($this->smileys[$smiley]);
$this->doc .= '<img src="'.DOKU_BASE.'lib/images/smileys/'.$this->smileys[$smiley].
'" class="middle" alt="'.
'" class="icon" alt="'.
$this->_xmlEntities($smiley).'" />';
} else {
$this->doc .= $this->_xmlEntities($smiley);
Expand Down Expand Up @@ -1075,10 +1075,6 @@ function _media ($src, $title=NULL, $align=NULL, $width=NULL,
$ret .= '<img src="'.ml($src,array('w'=>$width,'h'=>$height,'cache'=>$cache)).'"';
$ret .= ' class="media'.$align.'"';

// make left/right alignment for no-CSS view work (feeds)
if($align == 'right') $ret .= ' align="right"';
if($align == 'left') $ret .= ' align="left"';

if ($title) {
$ret .= ' title="' . $title . '"';
$ret .= ' alt="' . $title .'"';
Expand Down
6 changes: 1 addition & 5 deletions inc/template.php
View file
Open in desktop
Expand Up @@ -354,12 +354,8 @@ function tpl_metaheaders($alt=true){
}

// load stylesheets
$head['link'][] = array('rel'=>'stylesheet', 'media'=>'screen', 'type'=>'text/css',
$head['link'][] = array('rel'=>'stylesheet', 'type'=>'text/css',
'href'=>DOKU_BASE.'lib/exe/css.php?t='.$conf['template'].'&tseed='.$tseed);
$head['link'][] = array('rel'=>'stylesheet', 'media'=>'all', 'type'=>'text/css',
'href'=>DOKU_BASE.'lib/exe/css.php?s=all&t='.$conf['template'].'&tseed='.$tseed);
$head['link'][] = array('rel'=>'stylesheet', 'media'=>'print', 'type'=>'text/css',
'href'=>DOKU_BASE.'lib/exe/css.php?s=print&t='.$conf['template'].'&tseed='.$tseed);

// make $INFO and other vars available to JavaScripts
$json = new JSON();
Expand Down
125 changes: 76 additions & 49 deletions lib/exe/css.php
View file
Open in desktop
Expand Up @@ -9,6 +9,7 @@
if(!defined('DOKU_INC')) define('DOKU_INC',dirname(__FILE__).'/../../');
if(!defined('NOSESSION')) define('NOSESSION',true); // we do not use a session or authentication here (better caching)
if(!defined('DOKU_DISABLE_GZIP_OUTPUT')) define('DOKU_DISABLE_GZIP_OUTPUT',1); // we gzip ourself here
if(!defined('NL')) define('NL',"\n");
require_once(DOKU_INC.'inc/init.php');

// Main (don't run when UNIT test)
Expand All @@ -30,10 +31,12 @@ function css_out(){
global $lang;
global $config_cascade;

$mediatype = 'screen';
if (isset($_REQUEST['s']) &&
in_array($_REQUEST['s'], array('all', 'print', 'feed'))) {
$mediatype = $_REQUEST['s'];
if (isset($_REQUEST['s']) && ($_REQUEST['s'] == 'feed')) {
$mediatypes = array('feed');
$type = 'feed';
} else {
$mediatypes = array('screen', 'all', 'print');
$type = '';
}

$tpl = trim(preg_replace('/[^\w-]+/','',$_REQUEST['t']));
Expand All @@ -46,7 +49,7 @@ function css_out(){
}

// The generated script depends on some dynamic options
$cache = new cache('styles'.$_SERVER['HTTP_HOST'].$_SERVER['SERVER_PORT'].DOKU_BASE.$tplinc.$mediatype,'.css');
$cache = new cache('styles'.$_SERVER['HTTP_HOST'].$_SERVER['SERVER_PORT'].DOKU_BASE.$tplinc.$type,'.css');

// load template styles
$tplstyles = array();
Expand All @@ -57,57 +60,79 @@ function css_out(){
}
}

// Array of needed files and their web locations, the latter ones
// are needed to fix relative paths in the stylesheets
$files = array();
// load core styles
$files[DOKU_INC.'lib/styles/'.$mediatype.'.css'] = DOKU_BASE.'lib/styles/';
// load jQuery-UI theme
$files[DOKU_INC.'lib/scripts/jquery/jquery-ui-theme/smoothness.css'] = DOKU_BASE.'lib/scripts/jquery/jquery-ui-theme/';
// load plugin styles
$files = array_merge($files, css_pluginstyles($mediatype));
// load template styles
if (isset($tplstyles[$mediatype])) {
$files = array_merge($files, $tplstyles[$mediatype]);
}
// if old 'default' userstyle setting exists, make it 'screen' userstyle for backwards compatibility
if (isset($config_cascade['userstyle']['default'])) {
$config_cascade['userstyle']['screen'] = $config_cascade['userstyle']['default'];
}
// load user styles
if(isset($config_cascade['userstyle'][$mediatype])){
$files[$config_cascade['userstyle'][$mediatype]] = DOKU_BASE;
}
// load rtl styles
// @todo: this currently adds the rtl styles only to the 'screen' media type
// but 'print' and 'all' should also be supported
if ($mediatype=='screen') {
if($lang['direction'] == 'rtl'){
if (isset($tplstyles['rtl'])) $files = array_merge($files, $tplstyles['rtl']);
// start output buffering
ob_start();

foreach($mediatypes as $mediatype) {
// Array of needed files and their web locations, the latter ones
// are needed to fix relative paths in the stylesheets
$files = array();
// load core styles
$files[DOKU_INC.'lib/styles/'.$mediatype.'.css'] = DOKU_BASE.'lib/styles/';
// load jQuery-UI theme
if ($mediatype == 'screen') {
$files[DOKU_INC.'lib/scripts/jquery/jquery-ui-theme/smoothness.css'] = DOKU_BASE.'lib/scripts/jquery/jquery-ui-theme/';
}
// load plugin styles
$files = array_merge($files, css_pluginstyles($mediatype));
// load template styles
if (isset($tplstyles[$mediatype])) {
$files = array_merge($files, $tplstyles[$mediatype]);
}
// if old 'default' userstyle setting exists, make it 'screen' userstyle for backwards compatibility
if (isset($config_cascade['userstyle']['default'])) {
$config_cascade['userstyle']['screen'] = $config_cascade['userstyle']['default'];
}
// load user styles
if(isset($config_cascade['userstyle'][$mediatype])){
$files[$config_cascade['userstyle'][$mediatype]] = DOKU_BASE;
}
// load rtl styles
// note: this adds the rtl styles only to the 'screen' media type
// @deprecated 2012-04-09: rtl will cease to be a mode of its own,
// please use "[dir=rtl]" in any css file in all, screen or print mode instead
if ($mediatype=='screen') {
if($lang['direction'] == 'rtl'){
if (isset($tplstyles['rtl'])) $files = array_merge($files, $tplstyles['rtl']);
}
}
}

$cache_files = array_merge(array_keys($files), getConfigFiles('main'));
$cache_files[] = $tplinc.'style.ini';
$cache_files[] = __FILE__;
$cache_files = array_merge(array_keys($files), getConfigFiles('main'));
$cache_files[] = $tplinc.'style.ini';
$cache_files[] = __FILE__;

// check cache age & handle conditional request
// This may exit if a cache can be used
http_cached($cache->cache,
$cache->useCache(array('files' => $cache_files)));
// check cache age & handle conditional request
// This may exit if a cache can be used
http_cached($cache->cache,
$cache->useCache(array('files' => $cache_files)));

// start output buffering and build the stylesheet
ob_start();
// build the stylesheet

// print the default classes for interwiki links and file downloads
css_interwiki();
css_filetypes();
// print the default classes for interwiki links and file downloads
if ($mediatype == 'screen') {
css_interwiki();
css_filetypes();
}

// load files
foreach($files as $file => $location){
print css_loadfile($file, $location);
// load files
$css_content = '';
foreach($files as $file => $location){
$css_content .= css_loadfile($file, $location);
}
switch ($mediatype) {
case 'screen':
print NL.'@media screen { /* START screen styles */'.NL.$css_content.NL.'} /* /@media END screen styles */'.NL;
break;
case 'print':
print NL.'@media print { /* START print styles */'.NL.$css_content.NL.'} /* /@media END print styles */'.NL;
break;
case 'all':
case 'feed':
default:
print NL.'/* START rest styles */ '.NL.$css_content.NL.'/* END rest styles */'.NL;
break;
}
}

// end output buffering and get contents
$css = ob_get_contents();
ob_end_clean();
Expand Down Expand Up @@ -275,6 +300,8 @@ function css_pluginstyles($mediatype='screen'){
if ($mediatype=='screen') {
$list[DOKU_PLUGIN."$p/style.css"] = DOKU_BASE."lib/plugins/$p/";
}
// @deprecated 2012-04-09: rtl will cease to be a mode of its own,
// please use "[dir=rtl]" in any css file in all, screen or print mode instead
if($lang['direction'] == 'rtl'){
$list[DOKU_PLUGIN."$p/rtl.css"] = DOKU_BASE."lib/plugins/$p/";
}
Expand Down