![]() |
Search:
|
Page last modified 13:00, 2 Apr 2012 by tehmina.khan
Template:Look and Feel > Template:SectionUI
Template:SectionUITable of contentsNo 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 // // 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 ?? "accordion"; 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 ?? true; // 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:true }; } else if (style == "accordion") { let options = options ?? {collapsible:true}; 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.hasClass('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> } |
|
Powered by MindTouch Core |