.
The Open Protein Structure Annotation Network
PDB Keyword
.

Template:SectionUI

    Table of contents
    No headers
    // SectionUI, by neilw and rberinger, 2009
    //
    // Version History
    //     1.0.0    24-Sept-2009    neilw, rberinger        First release
    //     1.1.0    ??-????-2009    neilw, rberinger        Added support for "Accordion" style
    //     1.1.1    12-Nov-2009     neilw                   Slight tweak for accordion options
    //     1.1.2    12-Nov-2009     neilw                   A bit of code cleanup
    //     1.1.3    8-Feb-2010      rberinger               Moved resource files to script.mindtouch.com
    //     1.1.4    22-March-2010   neilw                   Fixed typo that crept in somehow
    //     1.1.5    7-Dec-2011      neilw                   Properly handle level 1 headings
    //     1.2.0    8-Dec-2011      neilw                   Cleaned up stylesheets and fixed editing
    //     1.2.1    17-May-2012     neilw                   Handle level 1 headings in Deuce lighty-blue
    //
    // Usage:
    //    SectionUI {
    //        style: str?,            (default "tab")  Style of UI for sections.  Valid options: "tab", "accordion".
    //        allowEdits: bool?,      (default true)   Allow editing of subsections if user has permission
    //        showOriginal: bool?,    (default false)  Provide link to reload page with original version of page
    //        maxLength: num?,        (default 0)      Maximum length of tab title after which title will be truncated.  "0" -> no limit
    //        maxHeight: str?,        (default "0")    Maximum height of a tab section, after which it will be scrolled.  "0" -> no limit
    //        textSize: str?,         (default "1em")  Size of text in tab titles
    //        options: map?           (default {})     Options specific to each style
    //    }
    
    // Parameters
    var errors = [];
    
    // Style
    var style = $0 ?? $style ?? "tab";
    let style = string.tolower(style);
    var allowable_styles = [ "tab", "accordion" ];
    if (!list.contains(allowable_styles, style)) {
        let errors ..= [ "invalid style '"..style.."': supported styles are "..
            string.join(allowable_styles, ",") ];
        let style = "tab";
    }
    // allowEdits
    var allow_edits = $1 ?? $allowEdits ?? true;
    if (allow_edits is not bool) {
        let errors ..= [ "allowEdits parameter must be true or false" ];
        let allow_edits = true;
    }
    // showOriginal
    var show_original = $2 ?? $showOriginal ?? false;
    // maxLength
    var max_length = $3 ?? $maxLength ?? 0;
    if (max_length is not num || max_length < 0) {
        let errors ..= [ "maxLength parameter must be a non-negative number" ];
        let max_length = 0;
    }
    // maxHeight
    var max_height = $4 ?? $maxHeight ?? 0;
    // textSize
    var text_size = $5 ?? $textSize ?? '';
    // options
    var options = $6 ?? $options;
    if (options is not nil && options is not map) {
        let errors ..= [ "options parameter must be a map" ];
        let options = nil;
    }
    if (style == "tab") {
        let options = options ?? { collapsible:true };
        if (options.event == "mouseover")            // bad to use "mouseover" with "collapsible"
            let options ..= { collapsible:false };
    }
    else if (style == "accordion") {
        let options = options ?? {};
        if (options.autoHeight == nil) let options ..= { autoHeight:false };
        if (options.active == nil) let options ..= { active:false };
    }
    
    if ( __request.args.SectionUI == false)
        <p><a href=(page.uri & { sectionUI:true })> "Show transformed page" </a></p>;
    else {
    <html>
    <head>
    <link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.core.css" rel="stylesheet" />
    <link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.theme.css" rel="stylesheet" />
    style == "tab" ?
        <link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.tabs.css" rel="stylesheet" /> :
        <link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.accordion.css" rel="stylesheet" />;
    
    <script type="text/javascript" src="http://scripts.mindtouch.com/res/jqueryui/ui.core.js.txt"></script>
    style == "tab" ?
        <script type="text/javascript" src="http://scripts.mindtouch.com/res/jqueryui/ui.tabs.js.txt"></script> :
        <script type="text/javascript" src="http://scripts.mindtouch.com/res/jqueryui/ui.accordion.js.txt"></script>;
    
    // Hide entire page content frame until SectionUI does its thing.  Optimal if at most 1 SectionUI is used on a page.
    <style type="text/css"> " .pageContentFrame { display:none; } " </style>
    
    // Call the main SectionUI function
    <script type="text/javascript"> "
    Deki.$(document).ready(function($) {
        var id = "..json.emit(@id)..";
        var $section = $('div#'+id).parent();
        $('div#'+id).remove();
        transform_sections($, id, $section,
            "..json.emit(style)..",
            "..json.emit(max_length)..",
            "..json.emit(max_height)..",
            "..json.emit(text_size)..",
            "..json.emit(allow_edits)..",
            "..json.emit(options)..");
    
        $('div.pageContentFrame').show();
    });
    " </script>
    // Main SectionUI function.  This does all the work in mangling the HTML to enable the transformation
    <script type="text/javascript"> "
    function transform_sections($, id, $section, style, max_length, max_height, font_size, editable, options) {
    // Figure out what header level we're at (should be simpler way to do this???)
        var isTop = $section.attr('id') == 'pageText';
        var $outer = $section.find(':header').eq(0);
        if ($outer.length == 0) return;
        var inner = 'h' + ((isTop?0:1) + Number($outer.get(0).tagName.substr(1,1)));
        if (isTop) $outer = $outer.parent().prev();
    // Process options as necessary
        if (font_size != '') font_size = 'font-size:'+font_size;
    // First wrap entire top level section in a div
        var top_id = id + 'top';
        $outer.nextAll().wrapAll('<div id=\"'+top_id+'\"></div>');
    // If 'tab', create a UL for tab names
        if (style == 'tab') $section.find('div#'+top_id).prepend('<ul></ul>');
        var $ul = $section.find('ul:first');
    // Now process each of the subsections
        $section.find(inner).each(function() {
            $(this).hide();
            var $div = $(this).parent();
        // clean up extra vertical whitespace
            $div.css({ 'padding-top':'5px', 'padding-bottom':'10px' });
            $(this).nextAll(':first').css({'margin-top':'0px','padding-top':'0px'});
            $(this).nextAll(':last').css({'margin-bottom':'0px','padding-bottom':'0px'});
        // set max_height of each section
            if (max_height)
                $div.css({'max-height':max_height, 'overflow':'auto'});
        // truncate title text if necessary
            var title_text = $(this).text();
            if (max_length && title_text.length > max_length) title_text = title_text.substr(0,max_length) + '...';
        // Process the section title according to style
            var hdr_link = '<a style=\"'+font_size+';text-decoration:none;\" href=\"#'+$div.attr('id')+'\" title=\"'+title_text+'\">' + title_text +
                '<span class=\"icon\" style=\"visibility:hidden; margin-left:10px\">' +
                '<img class=\"sectionedit\" alt=\"Edit section\" src=\"/skins/common/icons/icon-trans.gif\" style=\"cursor:pointer\"/></span></a>';
            switch(style) {
                case 'tab':        // add tab title to <ul>
                    $ul.append('<li style=\"list-style-type:none\">' + hdr_link + '</li>');
                    break;
                case 'accordion':  // insert title before <div>
                    $div.before('<div class=\"accordion-header\">' + hdr_link + '</div>');                 break;
                default: break;
            }          
        // Add pop-up 'edit' icon, if enabled
            if (editable && $(this).find('div.editIcon').length) {
                var $header = (style == 'tab' ? $ul.find('li:last') :
                                                $section.find('div.accordion-header:last'));
                if (console) console.log('setting hover for edit icon');
                $header.hover(
                    function() {
                        if (!Deki.Editor || (!Deki.Editor.IsLoading && !Deki.Editor.IsStarted))
                             $(this).find('span').css('visibility','visible');
                    },
                    function() { $(this).find('span:last').css('visibility','hidden'); }
                );
                var $tab = $header.find('a:first');
                var activeClass = (style == 'tab' ? 'ui-tabs-selected' : 'ui-state-active');
                $header.find('img:last').click(function() {
                    if (!$header.hasClass(activeClass)) $tab.click();
                    $div.find(inner+' a:last').click();
                    return(false);
                });
            }
        });
    // Call appropriate styler
        switch(style) {
            case 'tab':
                $('#'+top_id).tabs(options);
                break;
            case 'accordion':
                options.header = 'div.accordion-header';
                $('#'+top_id).accordion(options);
                break;
            default: break;
        }
    }
    " </script>;
    </head>
    <body>
    <div id=(@id) />;            // Marker
    <div id=(@id.."original")    // "Show Original" link
        style=("width:100%;text-align:right;font-size:.7em;visibility:"..(show_original?"visible":"hidden"))>
        <a href=(page.uri&{SectionUI:false})> (show_original ? "show original" : ".") </a>
    </div>;
    if (#errors) {
        <p style="color:red">
            "ERRORS:"; <br />;
            foreach (var e in errors) { e; <br />; }
        </p>
    }
    </body>
    </html>
    }

    Reviews

    References

     

    No references found.

    Tag page
    • No tags

    Files (0)

     
    You must login to post a comment.
    All content on this site is licensed under a Creative Commons Attribution 3.0 License
    Powered by MindTouch