diff --git a/action.php b/action.php index 9bcc0a0..d1f01a4 100644 --- a/action.php +++ b/action.php @@ -33,10 +33,11 @@ public function insert_button(Doku_Event $event, $param) { } private function buildSkeleton() { - $skeleton .= '\n'; - $skeleton .= 'getLang('ms-data').'">\n'; - return $skeleton; + $skeleton = ''; + $skeleton .= '\n'; + $skeleton .= 'getLang('ms-data').'">\n'; + return $skeleton; } diff --git a/helper.php b/helper.php index e86619d..fbe82c9 100644 --- a/helper.php +++ b/helper.php @@ -25,11 +25,11 @@ class helper_plugin_dwtimeline extends DokuWiki_Plugin { */ public static function getDirection($direction) { - if($direction === 'right'){ - $direction = 'left'; + if($direction === 'tl-right'){ + $direction = 'tl-left'; } else { - $direction = 'right'; + $direction = 'tl-right'; } return $direction; } @@ -123,7 +123,7 @@ public static function checkValues($toCheck,$allowed,$standard) { "SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue", "Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"]; - if (in_array($color, $COLOR_NAMES)) { + if (in_array(strtolower($color), array_map('strtolower',$COLOR_NAMES))) { return trim($color); } diff --git a/plugin.info.txt b/plugin.info.txt index aa9cf76..ccb81f5 100644 --- a/plugin.info.txt +++ b/plugin.info.txt @@ -1,7 +1,7 @@ base dwtimeline author saggi email saggi@gmx.de -date 2022-07-11 +date 2022-07-13 name dwtimeline plugin desc Provides a DokuWiki styled timeline url http://www.dokuwiki.org/plugin:dwtimeline diff --git a/style.css b/style.css index c0ff45b..9c92718 100644 --- a/style.css +++ b/style.css @@ -1,75 +1,73 @@ -* { - box-sizing: border-box; -} - /* The actual timeline (the vertical ruler) */ .timeline-vert { - position: relative; - max-width: 1200px; - margin: 0 auto; + box-sizing: border-box; + position: relative; + max-width: 1200px; + margin: 0 auto; } /* The actual timeline (the vertical ruler) */ .timeline-vert::after { - content: ''; - position: absolute; - width: 6px; - background-color: @ini_text; - top: 0; - bottom: 0; - left: 50%; - margin-left: -3px; + content: ''; + position: absolute; + width: 6px; + background-color: @ini_text; + top: 0; + bottom: 0; + left: 50%; + margin-left: -3px; } /* Container around content */ .container-vert { - padding: 10px 40px; - position: relative; - background-color: inherit; - width: 50%; - margin-left: unset; - margin-right: unset; + padding: 10px 40px; + position: relative; + background-color: inherit; + width: 50%; + box-sizing: border-box; + margin-left: unset; + margin-right: unset; } /* The circles on the timeline */ -.container-vert.left::before, .container-vert.right::before { - content: attr(data-point); - display: inline-block; - position: absolute; - width: 25px; - height: 25px; - right: -17px; - font-size:1.2em; - font-weight: unset; - text-align: center; - line-height: 1.5em; - background-color: @ini_background; - border: 4px solid @ini_link; - top: 15px; - border-radius: 50%; - z-index: 1; - box-sizing: unset; - color: @ini_link; +.container-vert.tl-left::before, .container-vert.tl-right::before { + content: attr(data-point); + display: inline-block; + position: absolute; + width: 25px; + height: 25px; + right: -17px; + font-size:1.2em; + font-weight: unset; + text-align: center; + line-height: 1.5em; + background-color: @ini_background; + border: 4px solid @ini_link; + top: 15px; + border-radius: 50%; + z-index: 1; + box-sizing: unset; + color: @ini_link; } /* invert color on timeline point on hover */ -.container-vert.left:hover::before, .container-vert.right:hover::before { - background-color: @ini_link; - color: @ini_background; +.container-vert.tl-left:hover::before, .container-vert.tl-right:hover::before { + background-color: @ini_link; + color: @ini_background; } /* Place the container to the left */ -.container-vert.left { - left: 0; +.container-vert.tl-left { + left: 0; } /* Place the container to the right */ -.container-vert.right { - left: 50%; +.container-vert.tl-right { + left: 50%; } /* Place the container to center */ -.container-vert.top, .container-vert.bottom { +.container-vert.tl-top, .container-vert.tl-bottom { padding: 0; margin-left: auto; margin-right: auto; @@ -81,214 +79,217 @@ } /* Add arrows to the top container (pointing down) */ -.container-vert.top::after { - content: ''; - height: 0; - position: absolute; - top: 100%; - left: 50%; - width: 0; - margin-left: -10px; - z-index: 1; - border: medium solid @ini_background_neu; - border-width: 10px 10px 0px 10px; - border-color: @ini_background_neu transparent transparent transparent; +.container-vert.tl-top::after { + content: ''; + height: 0; + position: absolute; + top: 100%; + left: 50%; + width: 0; + margin-left: -10px; + z-index: 1; + border: medium solid @ini_background_neu; + border-width: 10px 10px 0px 10px; + border-color: @ini_background_neu transparent transparent transparent; } /* Add arrows to the bottom container (pointing up) */ -.container-vert.bottom::after { - content: ''; - height: 0; - position: absolute; - bottom: 100%; - left: 50%; - width: 0; - margin-left: -10px; - z-index: 1; - border: medium solid @ini_background_neu; - border-width: 0px 10px 10px 10px; - border-color: transparent transparent @ini_background_neu transparent; +.container-vert.tl-bottom::after { + content: ''; + height: 0; + position: absolute; + bottom: 100%; + left: 50%; + width: 0; + margin-left: -10px; + z-index: 1; + border: medium solid @ini_background_neu; + border-width: 0px 10px 10px 10px; + border-color: transparent transparent @ini_background_neu transparent; } /* Add arrows to the left container (pointing right) */ -.container-vert.left::after { - content: ''; - height: 0; - position: absolute; - top: 22px; - width: 0; - z-index: 1; - right: 30px; - border: medium solid @ini_background_neu; - border-width: 10px 0 10px 10px; - border-color: transparent transparent transparent @ini_background_neu; +.container-vert.tl-left::after { + content: ''; + height: 0; + position: absolute; + top: 22px; + width: 0; + z-index: 1; + right: 30px; + border: medium solid @ini_background_neu; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent @ini_background_neu; } /* Add arrows to the right container (pointing left) */ -.container-vert.right::after { - content: ''; - height: 0; - position: absolute; - top: 22px; - width: 0; - z-index: 1; - left: 30px; - border: medium solid white; - border-width: 10px 10px 10px 0; - border-color: transparent @ini_background_neu transparent transparent; +.container-vert.tl-right::after { + content: ''; + height: 0; + position: absolute; + top: 22px; + width: 0; + z-index: 1; + left: 30px; + border: medium solid white; + border-width: 10px 10px 10px 0; + border-color: transparent @ini_background_neu transparent transparent; } /* Fix the circle for containers on the right side */ -.container-vert.right::before { - left: -16px; +.container-vert.tl-right::before { + left: -16px; } /* The actual content */ -.content { - padding: 10px 10px; - background-color: @ini_background_neu; - position: relative; - border-radius: 6px; - color: @ini_text; - white-space: normal; - text-align: unset; +.tlcontent { + padding: 10px 10px; + background-color: @ini_background_neu; + position: relative; + border-radius: 6px; + color: @ini_text; + white-space: normal; + text-align: unset; } /* description of milestone, removed

*/ .msdesc { - font-weight: bold; - font-size: 1.1em; - padding: 5px; - text-align: center; - color: @ini_text; + font-weight: bold; + font-size: 1.1em; + padding: 5px; + text-align: center; + color: @ini_text; } /* Titles of timeline and milestones, removed

*/ .mstitle, .tltitle { - font-weight: bold; - font-size: 1.6em; - padding: 5px; - color: @ini_text; + font-weight: bold; + font-size: 1.4em; + padding: 5px; + color: @ini_text; } /* fix for space arround paragraph */ .mstitle>p { -margin-bottom: 0px; + margin-bottom: 0px; } /* set the Header to left or */ -.container-vert.left .content .mstitle { - text-align: right; +.container-vert.tl-left .tlcontent .mstitle { + text-align: right; } /* right */ -.container-vert.right .content .mstitle { - text-align: left; +.container-vert.tl-right .tlcontent .mstitle { + text-align: left; } /* Horizontal TimeLine */ .timeline-horz { - white-space: nowrap; - overflow-x: scroll; - padding: 30px 0 10px 0; - position: relative; - margin: 0 auto; + box-sizing: border-box; + white-space: nowrap; + overflow-x: scroll; + padding: 30px 0 10px 0; + position: relative; + margin: 0 auto; + box-sizing: border-box; } /* The actual timeline (the horizontal ruler) */ .timeline-horz-line { - height: 4px; - background: @ini_background_neu; - width: 100%; - position: relative; - top: 16px; + height: 4px; + background: @ini_background_neu; + width: 100%; + position: relative; + top: 16px; } /* a smaller bottom container */ .container-horz { - display: inline-block; - vertical-align: top; - padding: 10px 10px 10px 10px; - position: relative; - background-color: inherit; - width: 33%; - margin-left: -2px; - margin-right: -2px; - text-align: center; + display: inline-block; + vertical-align: top; + padding: 10px 10px 10px 10px; + position: relative; + background-color: inherit; + width: 33%; + margin-left: -2px; + margin-right: -2px; + text-align: center; + box-sizing: border-box; } /* The circles on the timeline at top of container*/ .container-horz::before { - content: attr(data-point); - position: absolute; - width: 20px; - height: 20px; - font-size:1em; - font-weight: unset; - text-align: center; - line-height: 20px; - background-color: @ini_background; - border: 3px solid @ini_link; - color: @ini_link; - top: -30px; - left: 50%; - margin-left: -14px; - border-radius: 50%; - z-index: 1; - box-sizing: unset; + content: attr(data-point); + position: absolute; + width: 20px; + height: 20px; + font-size:1em; + font-weight: unset; + text-align: center; + line-height: 20px; + background-color: @ini_background; + border: 3px solid @ini_link; + color: @ini_link; + top: -30px; + left: 50%; + margin-left: -14px; + border-radius: 50%; + z-index: 1; + box-sizing: unset; } /* invert color on timeline point on hover */ .container-horz:hover::before { - background-color: @ini_link; - color: @ini_background; + background-color: @ini_link; + color: @ini_background; } /* Add arrows to the container (pointing up) */ .container-horz::after { - content: ''; - height: 0; - position: absolute; - bottom: 100%; - left: 50%; - width: 0; - margin-left: -10px; - margin-bottom: -10px; - z-index: 1; - border: medium solid @ini_background_neu; - border-width: 0px 10px 10px 10px; - border-color: transparent transparent @ini_background_neu transparent; + content: ''; + height: 0; + position: absolute; + bottom: 100%; + left: 50%; + width: 0; + margin-left: -10px; + margin-bottom: -10px; + z-index: 1; + border: medium solid @ini_background_neu; + border-width: 0px 10px 10px 10px; + border-color: transparent transparent @ini_background_neu transparent; } /* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 600px) { - /* Place the timelime to the left */ - .timeline::after { - left: 31px; - } - - /* Full-width containers */ - .container { - width: 100%; - padding-left: 70px; - padding-right: 25px; - } - - /* Make sure that all arrows are pointing leftwards */ - .container::before { - left: 60px; - border: medium solid @ini_background_alt; - border-width: 10px 10px 10px 0; - border-color: transparent @ini_background_alt transparent transparent; - } - - /* Make sure all circles are at the same spot */ - .left::after, .right::after { - left: 15px; - } - - /* Make all right containers behave like the left ones */ - .right { - left: 0%; - } + /* Place the timelime to the left */ + .timeline::after { + left: 31px; + } + + /* Full-width containers */ + .container-vert { + width: 100%; + padding-left: 70px; + padding-right: 25px; + } + + /* Make sure that all arrows are pointing leftwards */ + .container-vert::before { + left: 60px; + border: medium solid @ini_background_alt; + border-width: 10px 10px 10px 0; + border-color: transparent @ini_background_alt transparent transparent; + } + + /* Make sure all circles are at the same spot */ + .tl-left::after, .tl-right::after { + left: 15px; + } + + /* Make all right containers behave like the left ones */ + .tl-right { + left: 0%; + } } \ No newline at end of file diff --git a/syntax/milestone.php b/syntax/milestone.php index 2691973..3eb16fd 100644 --- a/syntax/milestone.php +++ b/syntax/milestone.php @@ -42,7 +42,9 @@ function getAllowedTypes() { */ public function connectTo($mode) { - $this->Lexer->addEntryPattern('',$mode,'plugin_dwtimeline_milestone'); + if ($mode == "plugin_dwtimeline_timeline") { + $this->Lexer->addEntryPattern('',$mode,'plugin_dwtimeline_milestone'); + } } /** @@ -89,24 +91,22 @@ public function handle($match, $state, $pos, Doku_Handler $handler) public function render($mode, Doku_Renderer $renderer, $data) { if ($mode == 'xhtml') { - global $direction; - if (!$direction) {$direction=$this->getConf('direction');} + if (!$direction) {$direction='tl-'.$this->getConf('direction');} list($state,$indata) = $data; switch ($state) { case DOKU_LEXER_ENTER : - $renderer->doc .= '
'. DOKU_LF; - $renderer->doc .= '
'. DOKU_LF; - if (isset($indata['title'])) { - if (isset($indata['link'])) { - $renderer->doc .= '
'.$this->render_text('[['.$indata['link'].'|'.$indata['title'].']]').'
'. DOKU_LF; - } else { - $renderer->doc .= '
'.$indata['title'].'
'. DOKU_LF; - } + $renderer->doc .= '
'. DOKU_LF; + $renderer->doc .= '
'. DOKU_LF; + if (isset($indata['title'])) { + if (isset($indata['link'])) { + $renderer->doc .= '
'.$this->render_text('[['.$indata['link'].'|'.$indata['title'].']]').'
'. DOKU_LF; + } else { + $renderer->doc .= '
'.$indata['title'].'
'. DOKU_LF; } - if (isset($indata['description'])) {$renderer->doc .= '
'.$indata['description'].'
'. DOKU_LF;} + } + if (isset($indata['description'])) {$renderer->doc .= '
'.$indata['description'].'
'. DOKU_LF;} break; - case DOKU_LEXER_UNMATCHED : $renderer->doc .= $renderer->cdata($indata); break; diff --git a/syntax/timeline.php b/syntax/timeline.php index 230a36b..e409ebc 100644 --- a/syntax/timeline.php +++ b/syntax/timeline.php @@ -93,15 +93,15 @@ public function render($mode, Doku_Renderer $renderer, $data) { if ($mode == 'xhtml') { global $direction; - if (!$direction) {$direction=$this->getConf('direction');} + if (!$direction) {$direction='tl-'.$this->getConf('direction');} list($state,$indata) = $data; switch ($state) { case DOKU_LEXER_ENTER : if ($indata['align'] === 'horz'){$renderer->doc .= '
'. DOKU_LF;}; $renderer->doc .= '
'. DOKU_LF; if (isset($indata['title']) or isset($indata['description'])) { - $renderer->doc .= '
'. DOKU_LF; - $renderer->doc .= '
'. DOKU_LF; + $renderer->doc .= '
'. DOKU_LF; + $renderer->doc .= '
'. DOKU_LF; if (isset($indata['title'])) {$renderer->doc .= '
'.$indata['title'].'
'. DOKU_LF;} if (isset($indata['description'])) {$renderer->doc .= '

'.$indata['description'].'

'. DOKU_LF;} $renderer->doc .= '
'. DOKU_LF; @@ -113,15 +113,15 @@ public function render($mode, Doku_Renderer $renderer, $data) break; case DOKU_LEXER_EXIT : if (isset($indata['title']) or isset($indata['description'])) { - $renderer->doc .= '
'. DOKU_LF; - $renderer->doc .= '
'. DOKU_LF; + $renderer->doc .= '
'. DOKU_LF; + $renderer->doc .= '
'. DOKU_LF; if (isset($indata['title'])) {$renderer->doc .= '
'.$indata['title'].'
'. DOKU_LF;} if (isset($indata['description'])) {$renderer->doc .= '

'.$indata['description'].'

'. DOKU_LF;} $renderer->doc .= '
'. DOKU_LF; $renderer->doc .= '
'. DOKU_LF; } $renderer->doc .= '
'. DOKU_LF; - $direction=$this->getConf('direction');//Reset direction + $direction='tl-'.$this->getConf('direction');//Reset direction break; } return true;