diff --git a/.buildpath b/.buildpath index 6f11008..7d2c19b 100644 --- a/.buildpath +++ b/.buildpath @@ -2,5 +2,4 @@ - diff --git a/.settings/org.eclipse.php.core.prefs b/.settings/org.eclipse.php.core.prefs index 5efbe3e..5f7d896 100644 --- a/.settings/org.eclipse.php.core.prefs +++ b/.settings/org.eclipse.php.core.prefs @@ -1,2 +1,2 @@ eclipse.preferences.version=1 -include_path=2;/kirby +include_path= diff --git a/README.md b/README.md index c461f2a..920bbec 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,44 @@ -# KirbyCMS Extension - Audio +# Kirby Extension - AudioExt -Display a audio via the HTML5 audio tag. +This plugin adds a new `audio` and `audioext` Kirbytext tag which enables you to embed your music and sounds easily and HTML5 compatible. -## Options +**Attention:** In this version I changed the used custom config variable for a better usage with other extension and kirby. Also the default kirbytext tag is now `audioext` but you can reactivate the `audio` tag support via config variables. -* *mp3*: Name of a page file or absolute URL of a external file -* *ogg*: Name of a page file or absolute URL of a external file -* *wav*: Name of a page file or absolute URL of a external file -* *preload*: (optional, Values: none/metadata/auto) The preload attribute specifies if and how the author thinks that the audio file should be loaded when the page loads. -* *controls*: (optional, Values: true/false, Default: true) Specifies that video controls should be displayed (such as a play/pause button etc). -* *loop*: (optional, Values: true/false, Default: false) Specifies that the video will start over again, every time it is finished -* *muted*: (optional, Values: true/false, Default: false) Specifies that the audio output of the video should be muted -* *autoplay*: (optional, Values: true/false, Default: false) Specifies that the video will start playing as soon as it is ready. -* *caption*: (optional) Create a figure with a caption element over the video tag -* *caption_top*: (optional, Values: true/false, Default: false) Place the caption at the top of the audio player -* *class*: (optional) Class string for the figure element +**Info:** When you don't use the snipped, you get a wrong HTML code. This is a existend bug of kirby in version 2.0.6. In the current develop version is this bug corrected. https://github.com/getkirby/kirby/issues/226 + +## KirbyText options + +| Option | Optional | Description | +| ------ | -------- | ----------- | +| `mp3` | X | Name of a page file or absolute URL of a external file | +| `ogg` | X | Name of a page file or absolute URL of a external file | +| `wav` | X | Name of a page file or absolute URL of a external file | +| `class` | X | see config variable `kirby.extension.audioext.class` | +| `preload` | X | see config variable `kirby.extension.audioext.preload` | +| `controls` | X | see config variable `kirby.extension.audioext.controls` | +| `loop` | X | see config variable `kirby.extension.audioext.loop` | +| `muted` | X | see config variable `kirby.extension.audioext.muted` | +| `autoplay` | X | see config variable `kirby.extension.audioext.autoplay` | +| `caption` | X | see config variable `kirby.extension.audioext.caption` | +| `caption_top` | X | see config variable `kirby.extension.audioext.caption_top` | +| `caption_class` | X | see config variable `kirby.extension.audioext.caption_class` | +| `snippet_name` | X | see config variable `kirby.extension.audioext.snippet_name` | + +## Config variables + +| Kirby option | Default | Values | Description | +| ------------ | ------- | ------ | ----------- | +| `kirby.extension.audioext.snippet_name` | null | null/{string} | Set the name of the snippet (example `audioext`), or false. With the false false, the script generate via Brick class the HTML code. | +| `kirby.extension.audioext.class` | `audio` | false/{string} | Define a class string for the audio element. | +| `kirby.extension.audioext.preload` | false | false/none/metadata/auto | Specifies if and how the author thinks the audio should be loaded when the page loads. | +| `kirby.extension.audioext.controls` | true | true/false | Specifies that audio controls should be displayed (such as a play/pause button etc). | +| `kirby.extension.audioext.loop` | false | true/false | Specifies that the audio will start over again, every time it is finished. | +| `kirby.extension.audioext.muted` | false | true/false | Specifies that the audio output should be muted. | +| `kirby.extension.audioext.autoplay` | false | true/false | Specifies that the audio will start playing as soon as it is ready. | +| `kirby.extension.audioext.caption` | null | null/{string} | Create a figure with a caption element over the video tag. | +| `kirby.extension.audioext.caption_top` | false | true/false | Place the caption at the top of the video player. | +| `kirby.extension.audioext.caption_class` | `audio` | {string} | Class string for the figure element. | +| `kirby.extension.audioext.audio_tag` | false | true/false | Overwrite the default `audio` kirbytext tag | ## Examples @@ -30,11 +54,18 @@ Display a audio via the HTML5 audio tag. (audio ogg: http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.ogg mp3: http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.mp3) ``` -### Extended version +## Changelog -``` -(audio muted: true) -(audio_source: demo-audio.ogg [type: audio/ogg] [media: screen and (min-width:320px)]) -(audio_source: demo-audio.mp3 [type: audio/mpeg] [media: screen]) -(/audio) -``` \ No newline at end of file +### v1.1 + +* Changed the used the default kirbytext tag from `audio` to `audioext`. It's is possible to reactivate the `audio` tag support. +* Changed the name of theis extension from "Audio" to "AudioExt". "AudioExt" stands for "Video Extended". +* Changed the used custom config variable for a better usage with other extension and kirby. +* Moved the used code into a custom class for better reusage in themes and other extension. +* Some Options and there values are changed. +* Add to the figcaption a CSS class to realize if the tag is at the top or bottom. +* Clean up + +### v1.0 + +* init version \ No newline at end of file diff --git a/package.json b/package.json index 57f0cd4..975a5b7 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "audio", - "readable": "HTML5 Audio", - "version": "1.0", - "stable": false, + "name": "audioext", + "readable": "HTML5-Audio extended", + "version": "1.1", + "stable": true, "description": "Display a audio via the HTML5 audio tag.", "author": "Thomas Fanninger", "url": "http://thomas.fanninger.at" diff --git a/site/plugins/audioext/audioext.php b/site/plugins/audioext/audioext.php index 4002fb7..0d7b9ee 100644 --- a/site/plugins/audioext/audioext.php +++ b/site/plugins/audioext/audioext.php @@ -1,73 +1,258 @@ + * @link https://github.com/fanningert/kirbycms-extension-audio + */ class AudioExt { - const OPTION_FIGURE = 'figure'; - const OPTION_FIGURE_LABEL = 'figure_label'; - - const OPTION_AUTOPLAY = 'autoplay'; + /** + * ************************************************************************** + */ + const SNIPPET_NAME = 'snippet_name'; + const AUDIO_CLASS = 'class'; + const OPTION_PRELOAD = 'preload'; const OPTION_CONTROLS = 'controls'; const OPTION_LOOP = 'loop'; const OPTION_MUTED = 'muted'; - const OPTION_PRELOAD = 'preload'; + const OPTION_AUTOPLAY = 'autoplay'; + const CAPTION = 'caption'; + const CAPTION_TOP = 'caption_top'; + const CAPTION_CLASS = 'caption_class'; + const SOURCES = 'sources'; const TYPE_MP3 = 'audio/mpeg'; const TYPE_OGG = 'audio/ogg'; const TYPE_WAV = 'audio/wav'; + /** + * ************************************************************************** + */ private $page = null; - private $options = array( self::OPTION_AUTOPLAY => false, - self::OPTION_CONTROLS => true, - self::OPTION_LOOP => false, - self::OPTION_MUTED => false, - self::OPTION_PRELOAD => false, - self::OPTION_FIGURE => false, - self::OPTION_FIGURE_LABEL => false - ); - private $sources = array(); - private $NoSupportMessage = array( 'en' => 'Your browser does not support the audio tag.' ); + private $options = array( + AudioExt::SNIPPET_NAME => null, + AudioExt::AUDIO_CLASS => 'audio', + AudioExt::OPTION_PRELOAD => false, + AudioExt::OPTION_CONTROLS => true, + AudioExt::OPTION_LOOP => false, + AudioExt::OPTION_MUTED => false, + AudioExt::OPTION_AUTOPLAY => false, + AudioExt::CAPTION => null, + AudioExt::CAPTION_TOP => false, + AudioExt::CAPTION_CLASS => 'audio', + AudioExt::SOURCES => array () + ); - public function AudioExt(Page $page){ + /** + * + * @param \Page $page + */ + public function __construct(\Page $page) { $this->page = $page; + + // if ($this->page instanceof \Page) { + // throw new AudioExtException ( AudioExtException::missing_page_object ); + // } + + $this->setOption ( AudioExt::SNIPPET_NAME, kirby ()->option ( 'kirby.extension.audioext.snippet_name', $this->options[AudioExt::SNIPPET_NAME] ) ); + $this->setOption ( AudioExt::AUDIO_CLASS, kirby ()->option ( 'kirby.extension.audioext.class', $this->options[AudioExt::AUDIO_CLASS] ) ); + $this->setOption ( AudioExt::OPTION_PRELOAD, kirby ()->option ( 'kirby.extension.audioext.preload', $this->options[AudioExt::OPTION_PRELOAD] ) ); + $this->setOption ( AudioExt::OPTION_CONTROLS, kirby ()->option ( 'kirby.extension.audioext.controls', $this->options[AudioExt::OPTION_CONTROLS] ) ); + $this->setOption ( AudioExt::OPTION_LOOP, kirby ()->option ( 'kirby.extension.audioext.loop', $this->options[AudioExt::OPTION_LOOP] ) ); + $this->setOption ( AudioExt::OPTION_MUTED, kirby ()->option ( 'kirby.extension.audioext.muted', $this->options[AudioExt::OPTION_MUTED] ) ); + $this->setOption ( AudioExt::OPTION_AUTOPLAY, kirby ()->option ( 'kirby.extension.audioext.autoplay', $this->options[AudioExt::OPTION_AUTOPLAY] ) ); + $this->setOption ( AudioExt::CAPTION, kirby ()->option ( 'kirby.extension.audioext.caption', $this->options[AudioExt::CAPTION] ) ); + $this->setOption ( AudioExt::CAPTION_TOP, kirby ()->option ( 'kirby.extension.audioext.caption_top', $this->options[AudioExt::CAPTION_TOP] ) ); + $this->setOption ( AudioExt::CAPTION_CLASS, kirby ()->option ( 'kirby.extension.audioext.caption_class', $this->options[AudioExt::CAPTION_CLASS] ) ); } - public function addOption($name, $value){ - $this->options[$name] = $value; + public function setOption($opt_name, $opt_value) { + if (array_key_exists ( $opt_name, $this->options )) + $this->options [$opt_name] = $opt_value; + + return $this; + } + public function getOption($opt_name) { + if (array_key_exists ( $opt_name, $this->options )) { + return $this->options [$opt_name]; + } else { + throw new AudioExtException ( AudioExtException::unknown_option ); + } } - public function setNoSupportMessage($message, $lang = 'en'){ - $this->NoSupportMessage[$lang] = $message; + /** + * Add a new Source + * + * @param string $audio + * @param string $type + * @param string $media + * @return AudioExt + */ + public function addSource($audio, $type = null, $media = null) { + if (! empty ( $audio )) { + $this->options [AudioExt::SOURCES] [] = array ( + 'src' => $audio, + 'type' => $type, + 'media' => $media + ); + } + return $this; } - public function addSource($file, $media_query = null){ - $this->addSource($file, null, $media_query); + /** + * Check if the caption should print at the top. + * + * @return boolean + */ + public function isCaptionTop() { + return $this->getOption ( AudioExt::CAPTION_TOP ); } - public function addSource($file, $type, $media_query = null){ - $array_value = $this->sources[]; - $array_value['type'] = $type; - $array_value['media'] = $media_query; - - $file_obj = $page->file($file); - $url = ($file_obj)?$file_obj->url():$file; - $array_value['src'] = $url; + /** + * Generate the HTML-Code of the audio tag. + * + * @return string + */ + public function toHtml() { + // Check if snippet set and snippet exist + if ($this->getOption ( AudioExt::SNIPPET_NAME ) != null && file_exists ( $kirby->roots->snippets () . '/' . $this->getOption ( AudioExt::SNIPPET_NAME ) . '.php' )) { + $snippet = ( string ) $this->getOption ( AudioExt::SNIPPET_NAME ); + return ( string ) snippet ( $snippet, $options, true ); + } else { + // Create over BRICK + $audio = new \Brick ( 'audio' ); + + // Add options + if ($this->getOption ( AudioExt::AUDIO_CLASS ) != null) + $audio->addClass ( $this->getOption ( AudioExt::AUDIO_CLASS ) ); + if ($this->getOption ( AudioExt::OPTION_PRELOAD ) != false) + $audio->attr ( 'preload', $this->getOption ( AudioExt::OPTION_PRELOAD ) ); + if ($this->getOption ( AudioExt::OPTION_CONTROLS ) == true) + $audio->attr ( 'controls', 'controls' ); + if ($this->getOption ( AudioExt::OPTION_LOOP ) == true) + $audio->attr ( 'loop', 'loop' ); + if ($this->getOption ( AudioExt::OPTION_MUTED ) == true) + $audio->attr ( 'muted', 'muted' ); + + // Add Sources + foreach ( $this->options [AudioExt::SOURCES] as $source ) { + $audio_source = new \Brick ( 'source' ); + + $file = $this->page->file ( $source ['src'] ); + $url_audio = ($file) ? $file->url () : $source ['src']; + $audio_source->attr ( 'src', $url_audio ); + + if ($source ['type'] != null) + $audio_source->attr ( 'type', $source ['type'] ); + if ($source ['media'] != null) + $audio_source->attr ( 'media', $source ['media'] ); + $audio->append ( $audio_source ); + } + + // Add optional caption + $figure_caption = ''; + if ($this->getOption ( AudioExt::CAPTION ) != null) { + $caption = ( string ) $this->convert ( $this->getOption ( AudioExt::CAPTION ) ); + $figure_caption = new \Brick ( 'figcaption', $caption ); + } + + if ($this->getOption ( AudioExt::CAPTION ) != null) { + $figure = new \Brick ( 'figure' ); + if ($this->getOption ( AudioExt::CAPTION_CLASS ) != null) + $figure->addClass ( $this->getOption ( AudioExt::CAPTION_CLASS ) ); + if ($this->isCaptionTop () && ! empty ( $figure_caption )) { + $figure_caption->addClass ( 'caption-top' ); + $figure->append ( $figure_caption ); + } + $figure->append ( $audio ); + if (! $this->isCaptionTop () && ! empty ( $figure_caption )) { + $figure_caption->addClass ( 'caption-bottom' ); + $figure->append ( $figure_caption ); + } + + return ( string ) $figure->toString (); + } else { + return ( string ) $audio->toString (); + } + } } - public function toHTML(){ - $audio = new Brick('audio'); - - $language = $this->page->site()->language()->code(); - - return $audio; + /** + * Overwrite of the super method + */ + public function __toString() { + $this->toHtml (); + } + + /** + * Replace not allowed character in the text with replacements. + * + * @param string $text + * @return string + */ + protected function convert($text) { + return ( string ) htmlentities ( $text ); + } + + /** + * This static method is executed by kirbytag method. + * + * @param unknown $tag + * @return string Generated HTML-Code for the HTML5-Audio-KirbyTag + */ + public static function executeTag($tag, $tag_name = 'audioext') { + try { + $audioext = new AudioExt ( $tag->page () ); + + foreach ( \kirbytext::$tags [$tag_name] ['attr'] as $name ) { + if (! empty ( $value = $tag->attr ( $name ) )) + $audioext->setOption ( $name, $value ); + } + + // Sources + $audioext->addSource ( $tag->attr ( 'ogg' ), AudioExt::TYPE_OGG ); + $audioext->addSource ( $tag->attr ( 'mp3' ), AudioExt::TYPE_MP3 ); + $audioext->addSource ( $tag->attr ( 'wav' ), AudioExt::TYPE_WAV ); + + return $audioext->toHtml (); + } catch ( AudioExtException $e ) { + echo 'Exception: ', $e->getMessage (), "\n"; + } } } -kirbytext::$pre[] = function($kirbytext, $text) { - $audio_class = new AudioExt($kirbytext->field->page); - - $text = preg_replace_callback('!\(audio(.*?)\)(.*?)\(audio\)!is', function($matches) use($kirbytext) { +/** + * + * @package AudioExt + * @author Thomas Fanninger + * @link https://github.com/fanningert/kirbycms-extension-video + */ +class AudioExtException extends \Exception { + const unknown_option = 1; + const missing_page_object = 2; + public function __construct($code, $message = null, $previous = null) { + $this->code = $code; - }, $text); - - return $audio_class->toHTML(); -}; \ No newline at end of file + if ($message == null) + $message = $this->generateMessageForCode (); + + parent::__construct ( $message, $code, $previous ); + } + public function __toString() { + } + private function generateMessageForCode() { + switch ($this->code) { + case 2 : + return 'Missing page object'; + case 1 : + return 'Unknown option'; + default : + return 'Unknown error'; + } + } + public function toHtml() { + } +} \ No newline at end of file diff --git a/site/snippets/audio.php b/site/snippets/audio.php deleted file mode 100644 index 4236201..0000000 --- a/site/snippets/audio.php +++ /dev/null @@ -1,28 +0,0 @@ - - * @version: 0.3 - */ - -?> - -> - - - - - - - - - - - \ No newline at end of file diff --git a/site/snippets/audioext.php b/site/snippets/audioext.php new file mode 100644 index 0000000..213ffe3 --- /dev/null +++ b/site/snippets/audioext.php @@ -0,0 +1,45 @@ + + * @link https://github.com/fanningert/kirbycms-extension-audio + */ + +?> + +> + +
+ + +> + + /> + + Your browser does not support the audio element. + + + +
+ + + \ No newline at end of file diff --git a/site/tags/audioext.php b/site/tags/audioext.php new file mode 100644 index 0000000..05063e6 --- /dev/null +++ b/site/tags/audioext.php @@ -0,0 +1,57 @@ + + * @link https://github.com/fanningert/kirbycms-extension-audio + */ +kirbytext::$tags['audioext'] = array( + 'attr' => array( + 'mp3', + 'ogg', + 'wav', + 'class', + 'preload', + 'controls', + 'loop', + 'muted', + 'autoplay', + 'caption', + 'caption_top', + 'caption_class', + 'snippet_name' + ), + 'html' => function($tag) { + return \at\fanninger\kirby\extension\audioext\AudioExt::executeTag( $tag, 'audioext' ); + } +); + +if ( kirby()->option('kirby.extension.audioext.audio_tag') == true ) { + kirbytext::$tags['audio'] = array( + 'attr' => array( + 'mp3', + 'ogg', + 'wav', + 'class', + 'preload', + 'controls', + 'loop', + 'muted', + 'autoplay', + 'caption', + 'caption_top', + 'caption_class', + 'snippet_name' + ), + 'html' => function($tag) { + return \at\fanninger\kirby\extension\audioext\AudioExt::executeTag( $tag, 'audio' ); + } + ); +} \ No newline at end of file