diff --git a/PicoUIBlurb.php b/PicoUIBlurb.php new file mode 100644 index 0000000..1e77055 --- /dev/null +++ b/PicoUIBlurb.php @@ -0,0 +1,186 @@ +config['loadBootstrap'] = false; + $this->config['blurbTitle'] = ''; + $this->config['blurbText'] = ''; + $this->config['blurbMoreLink'] = ''; + // load custom config if needed + if (isset($config['PicoUIBlurb.loadBootstrap'])) { + $this->config['loadBootstrap'] = $config['PicoUIBlurb.loadBootstrap']; + } + if (isset($config['PicoUIBlurb.cssClass.blurbTitle'])) { + $this->config['blurbTitle'] = $config['PicoUIBlurb.cssClass.blurbTitle']; + } + if (isset($config['PicoUIBlurb.cssClass.blurbText'])) { + $this->config['blurbText'] = $config['PicoUIBlurb.cssClass.blurbText']; + } + if (isset($config['PicoUIBlurb.cssClass.blurbMoreLink'])) { + $this->config['blurbMoreLink'] = $config['PicoUIBlurb.cssClass.blurbMoreLink']; + } + } + + /** + * Triggered after Pico has prepared the raw file contents for parsing + * + * @see Pico::parseFileContent() + * @see DummyPlugin::onContentParsed() + * @param string &$content prepared file contents for parsing + * @return void + */ + public function onContentPrepared(&$content) + { + // we only do any processing at all if the page contains our tag, so we save time + if (strpos($content, '[ui.blurb') !== false) { + // below is our comprehensive regex to detect for the full [ui.blurb] tag, + // which includes the tag and its attributes, and the [title] and [text] subtags. + $config = $this->config; + $content = preg_replace_callback( + '/\[ui\.blurb((\s+[a-z]+\=[\'\"][^\'\"]*[\'\"])*)\s*\]\s*((\[[a-z]+\][^\[]*\[\/[a-z]+\]\s*)*)\[\/ui\.blurb\s*\]/', + function ($matches) use ($config) { + // $matches[1] contain the list of attributes + // $matches[3] contain the list of subtags + preg_match_all('/\s*([a-z]+)\=[\'\"]([^\'\"]*)[\'\"]/', $matches[1], $attributes); + preg_match_all('/\[([a-z]+)\]([^\[]*)\[\/([a-z]+)\]\s*/', $matches[3], $subtags); + // look for what we want from attributes and subtags + $uiblurb = array('href' => '', 'img' => '', 'imgpos' => '', 'title' => '', 'text' => '', 'more' => ''); + for ($i = 0; $i < count($attributes[0]); $i++) { + $uiblurb[ $attributes[1][$i] ] = $attributes[2][$i]; + } + for ($i = 0; $i < count($subtags[0]); $i++) { + if ($subtags[1][$i] != $subtags[3][$i]) { + continue; // closing subtag must match in order to be valid + } + $uiblurb[ $subtags[1][$i] ] = $subtags[2][$i]; + } + $result = '
'; + if ($uiblurb['imgpos'] != 'right') { + $result .= '
'; + $result .= ''; + $result .= '
'; + } + $result .= '
'; + $result .= ''; + $result .= $uiblurb['title']; + $result .= ''; + $result .= ''; + $result .= $uiblurb['text']; + $result .= ''; + $result .= ''; + $result .= $uiblurb['more']; + $result .= ''; + $result .= '
'; + if ($uiblurb['imgpos'] == 'right') { + $result .= '
'; + $result .= ''; + $result .= '
'; + } + $result .= '
'; + return $result; + }, + $content); + } + } + + /** + * Triggered after Pico has rendered the page + * + * @param string &$output contents which will be sent to the user + * @return void + */ + public function onPageRendered(&$output) + { + // regular pages + // add css to end of + $output = str_replace('', ($this->buildExtraHeaders() . ''), $output); + // add js to end of + $output = str_replace('', ($this->buildExtraFooters() . ''), $output); + } + + /** + * Add some extra header tags for our styling. + */ + private function buildExtraHeaders() { + $headers = ''; + // if set to true, load from bootstrap cdn + if ($this->config['loadBootstrap'] === true) { + $headers .= PHP_EOL.''; + } + // now set up blurb css classes + $headers .= ' + +'; + return $headers; + } + + /** + * Add some extra footer tags we need. + */ + private function buildExtraFooters() { + $footers = ''; + // if set to true, load from bootstrap cdn + if ($this->config['loadBootstrap'] === true) { + $footers .= PHP_EOL.''.PHP_EOL; + } + return $footers; + } +} \ No newline at end of file diff --git a/README.md b/README.md index 1b4364a..1992455 100644 --- a/README.md +++ b/README.md @@ -144,3 +144,54 @@ this would be customizing font sizes, colors, etc. ``` $config[ 'PicoUICarousel.cssClass.carouselText' ] = 'my-title-class'; ``` + +# Pico UI: Blurb + +Create a text blurb (with a hyperlink) along an image such as this, typically used to feature content: + +![image](https://cloud.githubusercontent.com/assets/5854176/26037599/8c90361c-38ab-11e7-9465-d7ab5928ff92.png) + +Using code that looks like below in your markdown file: + +``` +[ui.blurb href="https://google.com" img="http://i.imgur.com/BLPXYLZ.png"] +[title]Pancake Chef[/title] +[text]This dog is really good at making pancakes! To see what kind of recipes he uses and what his pancakes look like, +you should totally click into this page to read more about it. +[/text] +[more]Read more...[/more] +[/ui.blurb] +``` + +## Installation + +Installation is simple. Simply drop the `PicoUIBlurb.php` file into the `plugins` directory of your Pico installation. + +## Configuration + +The plugin will not be enabled by default, so simply add the following line to your +`config/config.php` file to enable it: + +``` +$config[ 'PicoUIBlurb.enabled' ] = true; +``` + +**Bootstrap**: Bootstrap is a CSS and JS framework used commonly on many web sites. Pico UI Card relies on +some Bootstrap CSS elements to style and position cards properly. + +If your theme already includes Bootstrap, you are good. Default config will not include an extra copy of it. + +If you don't, you can enable this setting to load Bootstrap from their official CDN. + +``` +$config[ 'PicoUIBlurb.loadBootstrap' ] = true; +``` + +**Title text, description text, more link text**: You can define your own CSS classes for the title text, +description text and "More" link text. Typically the use case for this would be customizing font sizes, colors, etc. + +``` +$config[ 'PicoUIBlurb.cssClass.blurbTitle' ] = 'my-title-class'; +$config[ 'PicoUIBlurb.cssClass.blurbText' ] = 'my-text-class'; +$config[ 'PicoUIBlurb.cssClass.blurbMoreLink' ] = 'my-more-link-class'; +```