WordPress.org
Get WordPress

Plugin Directory

Changeset 598213


Ignore:
Timestamp:
09/12/2012 10:38:01 PM (13 years ago)
Author:
flashpixx
Message:

tabs

Location:
geshi-source-colorer/trunk
Files:
1 added
7 edited

Legend:

Unmodified
Added
Removed

  • geshi-source-colorer/trunk/css/layout.css

    r596394 r598213  
    5151
    5252
    53 
    54 /* ==== global configuration eg toolbar images ============================================================ */
     53/* ==== global configuration ============================================================================== */
    5554/** style of a code line **/
    5655.geshisourcecolorer-line
    … …  
    6463    cursor: pointer;
    6564}
    66 
     65/* ======================================================================================================== */
     66
     67
     68/* ==== global tab layout ================================================================================= */
     69/** style of the container div of the tab menu **/
     70.geshisourcecolorer-tab .tabmenu
     71{
     72    overflow: hidden;
     73}
     74
     75/** style of the list within the tab container **/
     76.geshisourcecolorer-tab .tabmenu ul
     77{
     78    list-style-type: none;
     79    margin: 0;
     80}
     81
     82/** style of the code tab items **/
     83.geshisourcecolorer-tab .tabmenu ul li
     84{
     85    cursor: pointer;
     86    display: inline;
     87    text-align: center;
     88    margin-right: 1em;
     89    padding-left: 1em;
     90    padding-right: 1em;
     91    font-family: sans-serif;
     92    font-size: small;
     93    font-weight: bold;
     94}
     95/* ======================================================================================================== */
     96
     97
     98/* ==== global code container layout ====================================================================== */
    6799/** define the main style of the code boxex **/
    68100.geshisourcecolorer
    … …  
    77109{
    78110    list-style-position: outside;
    79     margin-left: 0;
    80     padding-left: 0;
     111    margin: 0;
     112    padding: 0;
    81113}
    82114
    … …  
    87119    margin-left: 3em;
    88120}   
    89 
    90 
     121/* ======================================================================================================== */
     122
     123
     124/* ==== global toolbar layout ============================================================================= */
    91125/** style of the toolbar on each block **/
    92126.geshisourcecolorer .toolbar
    … …  
    172206    background-color: #ababab;
    173207}
     208
     209.geshisourcecolorer-tab-default
     210{
     211    border-width: 3px;
     212    border-color: #ababab;
     213    border-style: solid;
     214    margin-top: 0.5em;
     215    margin-bottom: 0.5em;
     216}
     217
     218.geshisourcecolorer-tab-default .tabmenu {
     219    background:-moz-linear-gradient(top, #efefef, #cfcfcf);
     220    background:-webkit-linear-gradient(top, #efefef, #cfcfcf);
     221    background:-o-linear-gradient(top, #efefef, #cfcfcf);
     222    background:-ms-linear-gradient(top, #efefef, #cfcfcf);
     223    background:linear-gradient(top, #efefef, #cfcfcf);
     224    padding: 0.25em;
     225}
     226
     227.geshisourcecolorer-tab-default .tabmenu ul
     228{
     229    padding: 0.25em;
     230}
     231
     232.geshisourcecolorer-tab-default .tabmenu .current
     233{
     234    text-decoration:underline;
     235}
    174236/* ======================================================================================================== */
    175237 

  • geshi-source-colorer/trunk/filter.class.php

    r596394 r598213  
    111111     * @return regular expression
    112112     **/
    113     private static function createFilterRegEx($pcTag)
     113    static function createFilterRegEx($pcTag)
    114114    {
    115115        // set regular expression for filtering (mask all meta character, and replace the fragments %c% (code), %s% (spaces) and %p% (parameter) )
    … …  
    143143        $option["hoverhighlight"]        = array();
    144144        $option["highlight"]             = array();
     145        $option["tab"]                   = array();
    145146       
    146147        // create GeSHi instance with code and remove an linebreaks of the source
    … …  
    174175        if (empty($option["language"]))
    175176            return __("no source code language is set", "fpx_geshisourcecolorer");
    176 
     177       
    177178        // create GeSHi instance with code
    178179        $source = self::convertWordpress2Code($pa[4]);
    179180        $id     = "geshisourcecolorer-" . (empty($option["id"]) ? md5($source) : $option["id"]);
    180181        $class  = $option["css"]["block"];
    181         $action = null;
    182 
    183         if ($option["collapse"])
     182        $prefix = null;
     183        $suffix = null;
     184       
     185        // set collapse data
     186        if ( ($option["collapse"]) && (empty($option["tab"])) )
    184187        {
    185             $class .= " geshisourcecolorer-collapse";
    186             $action = "<div class=\"geshisourcecolorer-collapse-button\" id=\"".$id."-collapse-button\">".$option["collapsetext"]."</div>";
     188            $class  .= " geshisourcecolorer-collapse";
     189            $prefix .= "<span class=\"geshisourcecolorer-collapse-button\" id=\"".$id."-collapse-button\">".$option["collapsetext"]."</span>";
    187190        }
     191       
     192        // set tab structure
     193        if (!empty($option["tab"]))
     194        {
     195            $prefix .= "<div class=\"geshisourcecolorer-tab ".$option["css"]["tab"]." ".$option["tab"][0]."\" rel=\"".$option["tab"][1]."\">";
     196            $suffix .= "</div>";
     197        }
     198       
     199       
    188200
    189201        $geshi  = new \GeSHi( $source, $option["language"] );
    … …  
    194206        $lc = $geshi->error();
    195207        if (empty($lc))
    196                 return " ".$action.$geshi->parse_code()." ";
     208            return " ".$prefix.$geshi->parse_code().$suffix." ";
     209       
    197210        return " <strong>".$lc."</strong> ";
    198211    }
    199    
     212
     213    /** actin that is run before, for replacing all character to HTML elements
     214     * @param $pa input array for format
     215     * @return replaced data
     216     **/
    200217    static function actionBefore($pa)
    201218    {
    … …  
    434451        // check if the style exists, if not, try to get a style that named equal to the
    435452        // language name
    436         if ( (isset($param["style"])) && (is_string($param["style"])) )
    437             $param["style"] = isset($styles[ $param["style"] ]) ? $styles[ strtolower($param["style"]) ] : $styles["default"];
     453        if ( (isset($param["style"])) && (is_string($param["style"])) && (isset($styles[ strtolower($param["style"]) ])) )
     454            $param["style"] = $styles[ strtolower($param["style"]) ];
     455        elseif ( (isset($param["style"])) && (is_string($param["style"])) && (isset($styles[strtolower($param["language"]) ])) )
     456            $param["style"] = $styles[ strtolower($param["language"]) ];
    438457        else
    439             $param["style"] = isset($styles[ $param["language"] ]) ? $styles[ strtolower($param["language"]) ] : $styles["default"];
     458            $param["style"] = $styles["default"];
    440459       
    441460       
    … …  
    454473        } else
    455474            $param["hoverhighlight"] = array();
    456 
     475       
     476        // check tabbed setting
     477        if ( (isset($param["tab"])) && (is_string($param["tab"])) )
     478            $param["tab"] = preg_split("/\s+/", $param["tab"], 2, PREG_SPLIT_NO_EMPTY);
     479        else
     480            $param["tab"] = array();
    457481       
    458482        // check other options

  • geshi-source-colorer/trunk/geshi-source-colorer.php

    r596533 r598213  
    3434//define(__NAMESPACE__."\LOCALPLUGINFILE", __FILE__);
    3535define(__NAMESPACE__."\LOCALPLUGINFILE", WP_PLUGIN_DIR."/geshi-source-colorer/".basename(__FILE__));
    36 define(__NAMESPACE__."\DEBUG", false);
     36define(__NAMESPACE__."\DEBUG", true);
    3737// =================================================================================================================================================
    3838
    … …  
    5656   
    5757// ==== create Wordpress Hooks =====================================================================================================================
    58 add_action("wp_head", "de\\flashpixx\\geshisourcecolorer\\initHead");
    59 add_action("wp_enqueue_scripts", "de\\flashpixx\\geshisourcecolorer\\initScripts");
    60 add_action("admin_enqueue_scripts", "de\\flashpixx\\geshisourcecolorer\\initAdminScripts");
     58add_action("init", "de\\flashpixx\\geshisourcecolorer\\initScripts");
     59add_filter("the_posts", "de\\flashpixx\\geshisourcecolorer\\activateScripts");
    6160
    6261add_action("wp_ajax_geshisourcecolorer-preview", "de\\flashpixx\\geshisourcecolorer\\filter::preview");
    6362add_filter("the_content", "de\\flashpixx\\geshisourcecolorer\\filter::runListOfListings");
    64 add_filter("the_content", "de\\flashpixx\\geshisourcecolorer\\filter::runCode", 1000);
     63add_filter("the_content", "de\\flashpixx\\geshisourcecolorer\\filter::runCodeLineBefore", -1000);
    6564add_filter("the_content", "de\\flashpixx\\geshisourcecolorer\\filter::runCodeBefore", -1000);
    66 add_filter("the_content", "de\\flashpixx\\geshisourcecolorer\\filter::runCodeLine", 1000);
    67 add_filter("the_content", "de\\flashpixx\\geshisourcecolorer\\filter::runCodeLineBefore", -1000);
    68    
     65add_filter("the_content", "de\\flashpixx\\geshisourcecolorer\\filter::runCodeLine");
     66add_filter("the_content", "de\\flashpixx\\geshisourcecolorer\\filter::runCode");
     67
     68add_action("admin_enqueue_scripts", "de\\flashpixx\\geshisourcecolorer\\initAdminScripts");
    6969add_action("admin_menu", "de\\flashpixx\\geshisourcecolorer\\render::adminmenu");
    7070add_action("admin_init", "de\\flashpixx\\geshisourcecolorer\\render::optionfields");
    … …  
    8585    wp_register_script( "geshisourcecolorer_zeroclipboard", plugins_url("external/zeroclipboard/ZeroClipboard.min.js", LOCALPLUGINFILE) );
    8686    wp_register_script( "geshisourcecolorer_function", plugins_url("js/function".(DEBUG ? null : ".min").".js", LOCALPLUGINFILE), array("jquery", "geshisourcecolorer_zeroclipboard") );
    87    
    88     wp_enqueue_script( "jquery" );
    89     wp_enqueue_script( "geshisourcecolorer_zeroclipboard" );
    90     wp_enqueue_script( "geshisourcecolorer_function" );
    91 
     87    wp_register_style( "geshisourcecolorer_userstyle", get_template_directory_uri()."/geshi-source-colorer.css" );
    9288   
    9389    // CSS script
    9490    wp_register_style( "geshisourcecolorer_style", plugins_url("css/layout".(DEBUG ? null : ".min").".css", LOCALPLUGINFILE) );
    95    
    96     // include only this files, which are needed
     91    wp_register_script( "geshisourcecolorer_userfunction", get_template_directory_uri()."/geshi-source-colorer.js", array("geshisourcecolorer_function" ) );
     92}
     93   
     94   
     95/** set up the scripts only if needed
     96 * @param $posts post array
     97 **/
     98function activateScripts($posts)
     99{
     100    // disable scripts on admin pages or if post is empty
     101    if ( (is_admin()) || (empty($posts)) )
     102        return $posts;
     103   
     104    // check the posts if the filter shortcut it found
    97105    $option = get_option("fpx_geshisourcecolorer_option");
    98     if ($option["maincss"])
    99         wp_enqueue_style( "geshisourcecolorer_style" );
    100    
    101    
    102     // check theme files, if there is a "geshi-source-colorer.js" and/or a "geshi-source-colorer.css" within the theme directory, we include the files
    103     wp_register_style( "geshisourcecolorer_userstyle", get_template_directory_uri()."/geshi-source-colorer.css" );
    104     $css = get_theme_root()."/".get_template()."/geshi-source-colorer.css";
    105     if (file_exists($css) && is_file($css))
    106         wp_enqueue_style( "geshisourcecolorer_userstyle" );
    107    
    108     wp_register_script( "geshisourcecolorer_userfunction", get_template_directory_uri()."/geshi-source-colorer.js", array("geshisourcecolorer_function" ) );
    109     $js = get_theme_root()."/".get_template()."/geshi-source-colorer.js";
    110     if (file_exists($js) && is_file($js))
    111         wp_enqueue_script( "geshisourcecolorer_userfunction" );
    112 }
    113    
    114    
    115 /** plugin administration page initialization **/
    116 function initAdminScripts()
    117 {
     106    foreach($posts as $post)
     107        if ( (preg_match( filter::createFilterRegEx($option["tag"]["code"]), $post->post_content )) || (preg_match( filter::createFilterRegEx($option["tag"]["line"]), $post->post_content )) )
     108        {
     109            add_action("wp_head", "de\\flashpixx\\geshisourcecolorer\\initHead");
     110           
     111            wp_enqueue_script( "jquery" );
     112            wp_enqueue_script( "geshisourcecolorer_zeroclipboard" );
     113            wp_enqueue_script( "geshisourcecolorer_function" );
     114           
     115            if ($option["maincss"])
     116                wp_enqueue_style( "geshisourcecolorer_style" );
     117           
     118            // check theme files, if there is a "geshi-source-colorer.js" and/or a "geshi-source-colorer.css" within the theme directory, we include the files
     119            $css = get_theme_root()."/".get_template()."/geshi-source-colorer.css";
     120            if (file_exists($css) && is_file($css))
     121                wp_enqueue_style( "geshisourcecolorer_userstyle" );
     122           
     123            $js = get_theme_root()."/".get_template()."/geshi-source-colorer.js";
     124            if (file_exists($js) && is_file($js))
     125                wp_enqueue_script( "geshisourcecolorer_userfunction" );           
     126       
     127            break;
     128        }
     129   
     130    // return post array
     131    return $posts;
     132}
     133   
     134   
     135/** plugin administration page initialization
     136 * @param $hook hook name of the enquere call
     137 **/
     138function initAdminScripts($hook)
     139{
     140    // CSS script
     141    wp_register_style( "geshisourcecolorer_adminstyle", plugins_url("css/administration".(DEBUG ? null : ".min").".css", LOCALPLUGINFILE) );
     142   
    118143    // jQuery and function script
    119144    wp_register_script( "geshisourcecolorer_administration", plugins_url("js/administration".(DEBUG ? null : ".min").".js", LOCALPLUGINFILE), array("jquery") );
     145
     146    // scripts are only load if needed (injection error supress)
     147    if ($hook == "settings_page_fpx_geshisourcecolorer_option") {
     148        wp_enqueue_script( "geshisourcecolorer_administration" );
     149
     150        wp_localize_script( "geshisourcecolorer_administration", "geshisourcecolorer_messages", array(
     151            "defaultdelete"      => __("default style can not be deleted", "fpx_geshisourcecolorer"),
     152            "save"               => __("save this style under a new name or use the same name for overriding", "fpx_geshisourcecolorer"),
     153            "previewemptycode"   => __("The preview code is empty. Please add some code lines", "fpx_geshisourcecolorer")
     154        ));
    120155       
    121     wp_enqueue_script( "geshisourcecolorer_administration" );
    122 
    123     wp_localize_script( "geshisourcecolorer_administration", "geshisourcecolorer_messages", array(
    124         "defaultdelete"      => __("default style can not be deleted", "fpx_geshisourcecolorer"),
    125         "save"               => __("save this style under a new name or use the same name for overriding", "fpx_geshisourcecolorer"),
    126         "previewemptycode"   => __("The preview code is empty. Please add some code lines", "fpx_geshisourcecolorer")
    127     ));
    128    
    129    
    130    
    131     // CSS script
    132     wp_register_style( "geshisourcecolorer_adminstyle", plugins_url("css/administration".(DEBUG ? null : ".min").".css", LOCALPLUGINFILE) );
    133    
    134     wp_enqueue_style( "geshisourcecolorer_adminstyle" );
     156        wp_enqueue_style( "geshisourcecolorer_adminstyle" );
     157    }
    135158}
    136159   
    … …  
    190213                 
    191214                        "line"          => "geshisourcecolorer-line",
    192                         "block"         => "geshisourcecolorer-block"
    193                  
     215                        "block"         => "geshisourcecolorer-block",
     216                        "tab"           => "geshisourcecolorer-tab-default"
     217               
    194218                ),
    195219                 

  • geshi-source-colorer/trunk/import.class.php

    r596394 r598213  
    7676            $options["css"]["line"]                         = $data["css"]["line"];
    7777            $options["css"]["block"]                        = $data["css"]["block"];
     78            $options["css"]["tab"]                          = $data["css"]["tab"];
    7879        }
    7980        switch ($pa["importstyles"])

  • geshi-source-colorer/trunk/js/function.js

    r596275 r598213  
    2929    // hide all collapsed code blocks
    3030    jQuery(".geshisourcecolorer-collapse").hide();
     31                       
     32   
     33    // create code tabs
     34    jQuery(".geshisourcecolorer-tab").each( function () {
     35        var tabid  = jQuery.trim(jQuery(this).attr("class").split(" ")[2]);
     36        var first  = jQuery("."+tabid+":first");
     37        var codeid = jQuery(this).find(".geshisourcecolorer:first").attr("id");
     38        var item   = jQuery("<li/>").html( jQuery(this).attr("rel") ).attr("rel", codeid);
     39                     
     40        // copy content on each div, which is not the first into the first div
     41        if (jQuery(this).get(0) === first.get(0))
     42        {
     43            // on the first div create menu
     44            var menu = jQuery("<div/>").addClass("tabmenu");
     45            menu.prepend( jQuery("<ul/>").append( item.addClass("current") ) );
     46            menu.data("code-show", codeid);
     47            first.prepend( menu );
     48            first.removeAttr("rel");
     49                                           
     50        } else {
     51            // add code to the tabmenu and the ID of the code block to the rel attribute of the menu entry
     52            first.find(".tabmenu ul:first").append( item );
     53            jQuery(jQuery(this).html()).appendTo(first);
     54            jQuery(this).remove();
     55            jQuery("#"+codeid).hide();
     56        }
     57    });
     58             
     59                       
     60    /** toggle action on tab click **/
     61    jQuery(".geshisourcecolorer-tab .tabmenu li").click( function() {
     62        var active = jQuery(this).parent().find(".current");
     63                                                         
     64        if ( active.get(0) !== jQuery(this).get(0) )
     65        {
     66            jQuery("#"+active.attr("rel")).slideToggle("slow");
     67            jQuery("#"+jQuery(this).attr("rel")).slideToggle("slow");
     68                                                       
     69            active.removeClass("current");
     70            jQuery(this).addClass("current");
     71        }
     72    });
    3173
    3274

  • geshi-source-colorer/trunk/readme.txt

    r596533 r598213  
    6868<li>%s is a placeholder for any kind of spaces. You need this placeholder to create a space between the name of the tag and the parameter list. This placeholder represent one or more than one space</li>
    6969</ul>
    70 All meta characters are masked, so you can add a own tag strucutre. Take a look to the plugin's setting page, the defalut values are used within this documentation. Add to your post or page a tag
     70All meta characters are masked, so you can add a own tag structure. Take a look to the plugin's setting page, the defalut values are used within this documentation. Add to your post or page a tag
    7171<pre>[cc lang="source language"]your source code[/cc]</pre> or the call <pre>[cci lang="source language"]your source code[/cci]</pre>
    7272You can change in the global plugin option this tags / options, so you don't need a change to your articles, if you update from another plugin. The layout of the code is stored in the plugin options
    … …  
    8585    <ul>
    8686        <li>"geshisourcecolorer-collapse-button" is the class name of the div container, which is shown if a code block is marked with "collapse=true"</li>
     87        <li>"geshisourcecolorer-tab" is the class name of the div, which is stored all div container of a tab view</li>
     88        <li>"tabmenu" is the container div, which shows the tab menu, it is always stored within the geshisourcecolorer-tab</li>
    8789        <li>"geshisourcecolorer" is the global class name of each code block / line, so with this class you can set styles for all codes</li>
    8890        <li>"toolbar" is the class, which is always within a "geshisourcecolorer", which descripes the toolbar div container</li>
    … …  
    138140= 0.12 =
    139141
     142* scripts are loaded only on pages with code
    140143* change translation
     144* language detected fixed
    141145* add class definition for styles
    142146* add themeable JavaScript and CSS file
    … …  
    167171<li>id                    : set the unique ID of the code block [allowed values: every string, default value: geshisourcecolorer-MD5 hash of the source] </li>
    168172<li>style                 : sets the style of the code. If this option is not set, the plugin tries to find a style which is named with the language name (lower-case). If the style is not found, it uses the default style</li>
     173<li>tab                   : sets the information, which code blocks should be collected in one container. The option value of this field is a class name and a name, which is shown in the item [allowed value: string value in this structure "classname tabtext"]</li>
    169174<li>lol                   : name of the source code that is shown within the list of listing (if this flag isn't set or empty, the code is not shown on the list) [allowed values: string value]</li>
    170175<li>lolhead               : shows the name, which is set by the list of listing option [allowed values: true | false]</li>
    … …  
    189194Yes, you can create a "list of listings" with the call <pre>[lol]</pre>. This will add a div to your page and a jQuery call fills the source data into the
    190195the div after the page have been loaded. The layout of this list is stored in the main CSS file. Feel free to change your layout.
     196
     197
     198= Can I collecte different code blocks into one container ? =
     199Yes, use the tag option "tab", which create one container and add all other code blocks with the same name into this container. The value is "classname name of your code".
     200All code blocks with equal classnames are grouped and a tab menu is created, each item of the menu shows the text which is set after the first space in the tab option.
    191201
    192202

  • geshi-source-colorer/trunk/render.class.php

    r596533 r598213  
    5858        add_settings_field("blockcss",          __("css class name of the code blocks container", "fpx_geshisourcecolorer")." <em>[css_block]</em>",     get_class()."::render_codeblockcss",      "fpx_geshisourcecolorer_optionmain",      "fpx_geshisourcecolorer_option"); 
    5959        add_settings_field("linecss",           __("css class name of the code lines container", "fpx_geshisourcecolorer")." <em>[css_line]</em>",       get_class()."::render_codelinecss",       "fpx_geshisourcecolorer_optionmain",      "fpx_geshisourcecolorer_option"); 
     60        add_settings_field("tabcss",            __("css class name of the tab container", "fpx_geshisourcecolorer"),       get_class()."::render_tabcss",       "fpx_geshisourcecolorer_optionmain",      "fpx_geshisourcecolorer_option"); 
    6061 
    6162       
    … …  
    111112        if ( (!isset($pa["css_line"])) || (empty($pa["css_block"])) )
    112113            add_settings_error( "geshisourcecolorer", "option_validate_cssline", __("css class name of the code block need not to be empty", "fpx_geshisourcecolorer"), "error");
     114        if ( (!isset($pa["css_tab"])) || (empty($pa["css_tab"])) )
     115            add_settings_error( "geshisourcecolorer", "option_validate_csstab", __("css class name of the tab container need not to be empty", "fpx_geshisourcecolorer"), "error");
    113116       
    114117       
    … …  
    132135        $options["css"]["line"]                         = $pa["css_line"];
    133136        $options["css"]["block"]                        = $pa["css_block"];
     137        $options["css"]["tab"]                          = $pa["css_tab"];
    134138       
    135139        $options["geshicss"]                            = isset($pa["geshicss"]) && (!empty($pa["geshicss"]));
    … …  
    339343    }
    340344   
     345    static function render_tabcss()
     346    {
     347        $options = get_option("fpx_geshisourcecolorer_option");
     348        echo "<input name=\"fpx_geshisourcecolorer_option[css_tab]\" size=\"30\" type=\"text\" value=\"".$options["css"]["tab"]."\" />";
     349    }
     350   
    341351   
    342352   
Note: See TracChangeset for help on using the changeset viewer.