Make plugin accept config parameters

.gitignore

@@ -0,0 +1,2 @@
+# Created by .ignore support plugin (hsz.mobi)
+/manager.dat

conf/default.php

@@ -9,13 +9,14 @@
  *
  */
 
+$conf['maxitems']      = 0;
 $conf['counterstyle']  = 'none';
 $conf['separator']     = ' +++ ';
 $conf['speed']         = 6;
-$conf['stopOnHover']   = 1;
-$conf['showBorder']    = 0;
+$conf['stoponhover']   = 1;
+$conf['showborder']    = 0;
 $conf['border']        = '0.5px dashed #000';
-$conf['border-radius'] = '20px';
+$conf['borderradius'] = '20px';
 $conf['width']         = '90%';
 $conf['height']        = '2.5em';
 $conf['textcolor']     = 'red';

conf/metadata.php

@@ -7,14 +7,14 @@
  * @author Michael Bohn <mjbohn@gmail.com>
  *
  */
-
+$meta['maxitems']      = array('numeric');
 $meta['counterstyle']  = array('multichoice', _choices => array('decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman','lower-latin', 'upper-latin', 'none'));
 $meta['separator']     = array('string');
 $meta['speed']         = array('numeric');
-$meta['stopOnHover']   = array('onoff');
-$meta['showBorder']    = array('onoff');
+$meta['stoponhover']   = array('onoff');
+$meta['showborder']    = array('onoff');
 $meta['border']        = array('string');
-$meta['border-radius'] = array('string');
+$meta['borderradius']  = array('string');
 $meta['width']         = array('string');
 $meta['height']        = array('string');
 $meta['textcolor']     = array('string');

lang/de/settings.php

@@ -5,15 +5,15 @@
  * @author Michael Bohn <mjbohn@gmail.com>
  *
  */
-
+$lang['maxitems']      = 'Anzahl der Einträge auf n begrenzen (0 = aus, alle zeigen)';
 $lang['counterstyle']  = 'Numerierungs-Stil der Einträge (Standard: none)';
 $lang['separator']     = 'Trenner zwischen Einträgen (Standard: +++ )';
 $lang['speed']         = 'Laufgeschwindigkeit (Standard: 6)';
-$lang['stopOnHover']   = 'Ticker beim Überfahren stoppen';
-$lang['showBorder']    = 'Umrandung für den Ticker? (Standard: nein)';
+$lang['stoponhover']   = 'Ticker beim Überfahren stoppen';
+$lang['showborder']    = 'Umrandung für den Ticker? (Standard: nein)';
 $lang['border']        = 'CSS-Stil für Rand (Standard: "0.5px dashed #000" )';
-$lang['border-radius'] = 'abgerundete Ecken am Rand? ( Radius oder 0 für keine )';
+$lang['borderradius']  = 'abgerundete Ecken am Rand? ( Radius oder 0 für keine )';
 $lang['width']         = 'Ticker Breite (%)';
 $lang['height']        = 'Ticker Höhe (Standard: 2em)';
 $lang['textcolor']     = 'Farbe des Ticker-Inhalts';
-$lang['bgcolor']     = 'Farbe des Hintergrunds';
+$lang['bgcolor']       = 'Farbe des Hintergrunds';

lang/en/settings.php

@@ -6,13 +6,14 @@
  *
  */
 
+$lang['maxitems']      = 'Limit of n items to show (0 = off, show all)';
 $lang['counterstyle']  = 'Add counter in front of ticker items (default none)';
 $lang['separator']     = 'Separator between items';
 $lang['speed']         = 'Tickerspeed';
-$lang['stopOnHover']   = 'Stop Ticker on mouse hover';
-$lang['showBorder']    = 'Show border on ticker';
+$lang['stoponhover']   = 'Stop Ticker on mouse hover';
+$lang['showborder']    = 'Show border on ticker';
 $lang['border']        = 'Border style (default "0.5px dashed #000" )';
-$lang['border-radius'] = 'Add rounded corners ( 0 for none )';
+$lang['borderradius']  = 'Add rounded corners ( 0 for none )';
 $lang['width']         = 'Ticker width (%)';
 $lang['height']        = 'Ticker height (default 2em)';
 $lang['textcolor']     = 'Color of ticker text';

script.js

@@ -17,84 +17,133 @@
 
 
 jQuery.fn.liScroll = function(settings) {
+
+    /**
+     *  extend settings, incorporate live parameters
+     */
     settings = jQuery.extend({
-        travelocity: JSINFO['plugin_scrollticker']['speed'] / 100
+        travelocity: settings.speed / 100
     }, settings);
 
-    return this.each(function(){
-        var $strip = jQuery(this);
-        $strip.addClass("newsticker"); // each ul inside <scrollticker> gets class added
-        var stripWidth = 1;
-        var separator = JSINFO['plugin_scrollticker']['separator'];
-        separator = separator.replace(/\s/g, '\xa0'); //make spaces safe
-
-        $strip.find("li").each(function(i){ //iterate through every <li>
-            var liTxt = jQuery( this ).html();
-            if(i < $strip.find("li").length -1) {
-                jQuery(this).html(liTxt + separator); // add separator between items
-            }
-            else{
-                jQuery(this).html(liTxt );
-            }
-
-            // add counter if desired
-            jQuery( this ).addClass("counter_" + JSINFO['plugin_scrollticker']['counterstyle']);
-
-            //sum up width of ticker items including separator
-            stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
-        });
+    console.log('native settings in liscroll:', settings);
+
+    // get the next parent with class tickercontainer, see if it holds parameters to override global settings
+    let live_params = jQuery(this).parents('.ui-newsticker');
+    console.log('ticker data is ', live_params.data());
+
+    // DANGER! the .data() function will ONLY work with lowercase parameters ;-(
+    jQuery.each(live_params.data(), function(name, val){
+        if(settings.hasOwnProperty(name)) {
+            console.log('changing setting ', name, ' to value ', val);
+            settings[name] = val;
+        }
+    });
 
-        var $mask = $strip.wrap("<div class='mask'></div>");
-        var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
-        var containerWidth = $strip.parent().parent().width();	//a.k.a. 'mask' width
+    console.log('updated settings:', settings);
+
+    /**
+     *  define basic vars for ticker
+     */
+    let strip = jQuery(this);
+    console.log('strip holds:', strip);
+
+    strip.addClass("newsticker"); // this ul inside <scrollticker> gets class added
+
+    let stripWidth = 1;
+    let separator = settings.separator;
+    separator = separator.replace(/\s/g, '\xa0'); //make spaces safe
+    console.log('separator:', separator);
+
+    // limit items to display if wanted
+    let maxlength = strip.find("li").length - 1;
+    if (settings.maxitems > 0 && settings.maxitems < maxlength) {
+        maxlength = settings.maxitems;
+    }
 
-        // enlarge strip to fit counter
-        if(JSINFO['plugin_scrollticker']['counterstyle'] != 'none')
-        {
-            stripWidth += 21 * $strip.find('li').length; // why the hell 21 ??
+    strip.find("li").each(function(i) { //iterate through every <li>
+        console.log('counting li :', i);
+        // add separators between items if wanted
+        let liTxt = jQuery(this).html();
+        console.log('liTxt holds: ', liTxt);
+        if (i < maxlength - 1) {
+            jQuery(this).html(liTxt + separator); // add separator between items
+        } else {
+            jQuery(this).html(liTxt);
         }
 
+        // add counter if desired
+        jQuery(this).addClass("counter_" + settings.counterstyle);
 
-        $strip.width(stripWidth);
+        //sum up width of ticker items including separator
+        stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
+        console.log('stripwidth:', stripWidth);
 
-        var totalTravel = stripWidth+containerWidth;
-        var defTiming = totalTravel/settings.travelocity;	// thanks to Scott Waye
-        function scrollnews(spazio, tempo){
-            $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){
-                $strip.css("left", containerWidth);
-                scrollnews(totalTravel, defTiming);
-            });
+        if (i >= maxlength) {
+            jQuery(this).remove();
+            // return false; // break out of loop
         }
-        scrollnews(totalTravel, defTiming);
-        $strip.hover(function(){
-                if(JSINFO['plugin_scrollticker']['stopOnHover']){jQuery(this).stop();}
-            },
-            function(){
-                var offset = jQuery(this).offset();
-                var residualSpace = offset.left + stripWidth;
-                var residualTime = residualSpace/settings.travelocity;
-                scrollnews(residualSpace, residualTime);
-            });
     });
+    console.log('after counters and separators strip is :', strip);
+
+    let mask = strip.wrap("<div class='mask'></div>");
+    let tickercontainer = strip.parent().wrap("<div class='tickercontainer'></div>");
+    let containerWidth = strip.parent().parent().width();	//a.k.a. 'mask' width
+
+    // enlarge strip to fit counter
+    if(settings.counterstyle != 'none')
+    {
+        stripWidth += 21 * strip.find('li').length; // why the hell 21 ??
+    }
+    strip.width(stripWidth);
+
+    let totalTravel = stripWidth+containerWidth;
+    let defTiming = totalTravel/settings.travelocity;	// thanks to Scott Waye
+    function scrollnews(spazio, tempo){
+        strip.animate({left: '-='+ spazio}, tempo, "linear", function(){
+            strip.css("left", containerWidth);
+            scrollnews(totalTravel, defTiming);
+        });
+    }
+    scrollnews(totalTravel, defTiming);
+    strip.hover(function(){
+        if(settings.stoponhover){jQuery(this).stop();}
+    },
+    function(){
+        let offset = jQuery(this).offset();
+        let residualSpace = offset.left + stripWidth;
+        let residualTime = residualSpace/settings.travelocity;
+        scrollnews(residualSpace, residualTime);
+    });
+
+    ////  some final styling
+    // set text color
+    jQuery(".tickercontainer li").css("color", settings.textcolor);
+    jQuery(".tickercontainer .li").css("color", settings.textcolor);
+
+    // set background color
+    jQuery(".tickercontainer ").css("background-color", settings.bgcolor);
+    jQuery(".tickercontainer li").css("background-color", settings.bgcolor);
+    jQuery(".tickercontainer .li").css("background-color", settings.bgcolor);
+
+    // set border radius for container
+    jQuery(".tickercontainer").css("border-radius", settings.borderradius);
 };
 
 
 jQuery(function(){
-    jQuery("div.ui-newsticker ul").liScroll({
 
+    console.log('JSINFO is:', JSINFO['plugin_scrollticker']);
+    // override plugin settings with matching attributes
+    let settings = {};
+    jQuery.each(JSINFO['plugin_scrollticker'], function(skey, svalue) {
+        console.log('parsing jsinfo with key: ' + skey + ' and value: ' + svalue);
+        settings[skey] = svalue;
     });
-    var $ticker = jQuery(".tickercontainer");
-
-    $ticker.css("border-radius",JSINFO['plugin_scrollticker']['border-radius']);
 
-    if(JSINFO['plugin_scrollticker']['showBorder']){
-        $ticker.css("border",JSINFO['plugin_scrollticker']['border']);
-    }
+    console.log('settings now: ', settings);
 
-    $ticker.css("width",JSINFO['plugin_scrollticker']['width']);
-    $ticker.css("height",JSINFO['plugin_scrollticker']['height']);
-    $ticker.css("color",JSINFO['plugin_scrollticker']['textcolor']);
-    jQuery(".tickercontainer ul li").css("color",JSINFO['plugin_scrollticker']['textcolor']);
-    $ticker.css("background-color",JSINFO['plugin_scrollticker']['bgcolor']);
-    jQuery(".tickercontainer ul li").css("background-color","transparent");
-});
+    jQuery("div.ui-newsticker ul").each(function(){
+        console.log("starting scroll");
+        jQuery(this).liScroll(settings);
+    });
+});

syntax.php

@@ -41,7 +41,7 @@ public function getSort() {
      * @param string $mode Parser mode
      */
     public function connectTo($mode) {
-        $this->Lexer->addEntryPattern('<scrollticker>(?=.*?</scrollticker>)',$mode,'plugin_scrollticker');
+        $this->Lexer->addEntryPattern('<scrollticker.*?>(?=.*?</scrollticker>)',$mode,'plugin_scrollticker');
     }
 
     public function postConnect() {
@@ -59,7 +59,23 @@ public function postConnect() {
      * @return array Data for the renderer
      */
     public function handle($match, $state, $pos, Doku_Handler $handler){
-        return array($state, $match);
+        $parameters = trim(substr($match, 13,-1)); // get string between "<scrollticker" and ">"
+        if(strlen(trim($parameters))< 3) {
+            return array($state, $match, false); // no parameters given, dont bother with extra work
+        }
+
+        $params_arr = array();
+        if($parameters and strpos($parameters, '=')) { // see if we have a string and it contains at least one '='
+            $parameters = preg_split('/\s+/', $parameters, -1, PREG_SPLIT_NO_EMPTY); // turn into array separated by whit spaces
+            foreach($parameters as $parameter) {
+                list($key, $val) = explode('=', $parameter);
+                $key = 'data-'.strtolower(trim(htmlspecialchars($key))); // http://html5doctor.com/html5-custom-data-attributes/
+                $val = strtolower(trim(htmlspecialchars($val)));
+                $params_arr[$key] = $val;
+            }
+        }
+
+        return array($state, $match, $params_arr);
     }
 
     /**
@@ -72,25 +88,38 @@ public function handle($match, $state, $pos, Doku_Handler $handler){
      */
     public function render($mode, Doku_Renderer $renderer, $data) {
         if($mode != 'xhtml') return false;
-        list($state, $match) = $data;
+        if (empty($data)) return false;
+
+        list($state, $match, $parameters) = $data;
+
         switch ($state) {
             case DOKU_LEXER_ENTER :
-                $renderer->doc .= '<div class="ui-newsticker">';
+                // xdebug_break();
+                if(is_array($parameters) and count($parameters) > 0) {
+                    // implode array fast
+                    $parameters = http_build_query($parameters,'', ' ');
+                }
+
+                $renderer->doc.= '<div class="ui-newsticker" '.$parameters.'>';
                 break;
+
             case DOKU_LEXER_UNMATCHED :
-                $renderer->doc .= $renderer->_xmlEntities($match);
+                $renderer->doc.= $renderer->_xmlEntities($match);
                 break;
+
             case DOKU_LEXER_EXIT :
-                $renderer->doc .= '</div>';
+                $renderer->doc.= '</div>';
                 break;
+
             default:
                 $renderer->doc.= 'MATCH: '.$renderer->_xmlEntities($match);
                 $renderer->doc.= 'STATE: '.$renderer->_xmlEntities($state);
+                $renderer->doc.= 'PARAMS: '.$renderer->_xmlEntities($parameters);
         }
 
         // $renderer->doc .= var_export($data, true); // might be helpful when debugging
         return true;
     }
 }
 
-// vim:ts=4:sw=4:et:
+// vim:ts=4:sw=4:et: