Mercurial Hosting > nabble
view src/nabble/view/naml/ui_components.naml @ 0:7ecd1a4ef557
add content
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Thu, 21 Mar 2019 19:15:52 -0600 |
parents | |
children |
line wrap: on
line source
========================================== VERTICAL TAB CONTROL ========================================== <macro name="vertical_tab_control" dot_parameter="vertical_tabs"> <n.put_in_head.> <style type="text/css"> table.vertical-control { margin: 1em 0; width:100%; border-collapse:collapse; } table.vertical-control td { padding:0; vertical-align:top; } table.vertical-control td.details { width:90%; padding:.5em 1em; } ul.vertical-control { width:100%; list-style-type:none; padding:0; margin:0; } ul.vertical-control li { padding: .3em; white-space:nowrap; } ul.vertical-control li.selected { border-top-left-radius:5px; border-bottom-left-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-bottomleft:5px; } </style> </n.put_in_head.> <table class="vertical-control"> <tr> <td> <ul class="vertical-control"> <n.vertical_tab.> <n.vertical_tabs/> </n.vertical_tab.> </ul> </td> <td class="details shaded-bg-color"> <n.vertical_tabs/> </td> </tr> </table> </macro> <macro name="vertical_tab" dot_parameter="do"> <n.do/> </macro> <macro name="is_vertical_tab"> <n.is_in_command name="vertical_tab" /> </macro> <macro name="add_vertical_tab" dot_parameter="text" parameters="url,selected,details,icon,style"> <n.if.is_vertical_tab> <then> <n.if.selected> <then><li class="selected shaded-bg-color" style="[n.style/]"><n.hide_null.icon/> <n.truncate. size="25"><n.text/></n.truncate.></li></then> <else><li style="[n.style/]"><n.hide_null.icon/> <a href="[n.url/]"><n.truncate. size="25"><n.text/></n.truncate.></a></li></else> </n.if.selected> </then> <else> <n.if.selected> <then.details/> </n.if.selected> </else> </n.if.is_vertical_tab> </macro> ========================================== HORIZONTAL TAB CONTROL ========================================== <macro name="horizontal_tab_control" dot_parameter="horizontal_tabs" parameters="is_live"> <n.put_in_head.> <script src="[n.tabs_library_path/]" type="text/javascript"></script> <style type="text/css"> div.tab-contents { margin-top:1.5em; } </style> </n.put_in_head.> <script type="text/javascript"> NabbleTabs.startTabControl(<n.hide_null.is_live/>); <n.horizontal_tab.><n.horizontal_tabs/></n.horizontal_tab.> NabbleTabs.endTabControl(); </script> <n.if.is_null.is_live> <then> <div class="tab-contents"> <n.horizontal_tabs/> </div> </then> </n.if.is_null.is_live> </macro> <macro name="horizontal_tab" dot_parameter="do"> <n.do/> </macro> <macro name="is_horizontal_tab"> <n.is_in_command name="horizontal_tab" /> </macro> <macro name="add_horizontal_tab" parameters="url,text,selected,details"> <n.if.is_horizontal_tab> <then> NabbleTabs.addTab('<n.url/>', '<n.javascript_string_encode.text/>', <n.selected/>); </then> <else> <n.if.selected> <then.details/> </n.if.selected> </else> </n.if.is_horizontal_tab> </macro> <macro name="add_live_horizontal_tab" parameters="element_id,text,selected,details,onclick"> <n.if.is_horizontal_tab> <then> <n.if.is_null.onclick> <then>NabbleTabs.addLiveTab('<n.element_id/>', '<n.javascript_string_encode.text/>', <n.selected/>);</then> <else>NabbleTabs.addLiveTab('<n.element_id/>', '<n.javascript_string_encode.text/>', <n.selected/>, <n.onclick/>);</else> </n.if.is_null.onclick> </then> <else.details/> </n.if.is_horizontal_tab> </macro> ========================================== SLIDER ========================================== <macro name="slider" dot_parameter="contents" requires="html"> <n.put_in_head.> <script src="/util/nabblegallery-1.2.js"></script> </n.put_in_head.> <n.slider_counter.increment/> <div id="slider[n.slider_id/]" style="width:100%"> <table id="gallery-view[n.slider_id/]"> <tr> <td style="width:20px"> <img id="prev[n.slider_id/]" src="/images/left.png" style="cursor:pointer;display:none"/> </td> <td> <div id="gallery[n.slider_id/]" style="width:500px;overflow-x:hidden;position:relative"> <table id="images[n.slider_id/]" style="border-collapse:collapse;margin-top:.7em;"> <tr style="vertical-align:top"> <n.contents/> </tr> </table> </div> </td> <td style="width:20px"> <img id="next[n.slider_id/]" src="/images/right.png" style="cursor:pointer"/> </td> </tr> </table> </div> <script type="text/javascript"> function update<n.slider_id/>() { fixGalleryWidth(<n.slider_id/>); }; galleryReady(<n.slider_id/>); $(window).load(update<n.slider_id/>).resize(update<n.slider_id/>); </script> </macro> <macro name="slider_id"> <n.slider_counter.value/> </macro> <macro name="slider_counter" dot_parameter="do"> <n.counter name="slider" do="[n.do/]" /> </macro> ========================================== TOOLTIP ========================================== <macro name="tooltip" dot_parameter="contents" parameters="use_title, delay, position"> <n.if.not.is_ajax> <then.put_in_head.compress.tooltip_head/> </n.if.not.is_ajax> <n.set_var. name='tag_id'>tooltip<n.random max="99999"/></n.set_var.> <div id="[n.var name='tag_id'/]" class="nabble-tooltip" use_title="[n.null_to_false.use_title/]"> <n.hide_null.contents/> <div class="nabble-tooltip-arrow"> <div class="d1">♦</div> <div class="d2">♦</div> </div> </div> <script type="text/javascript"> Nabble.startTooltip(Nabble.get('<n.var name='tag_id'/>'), '<n.default to="up" text="[n.position/]"/>', <n.default to="400" text="[n.delay/]"/>); </script> </macro> <macro name="tooltip_head"> <n.tooltip_css/> <n.tooltip_js/> </macro> <macro name="tooltip_small_row" dot_parameter="contents"> <div class="nabble-tooltip-small-row second-font"> <n.contents/> </div> </macro> <macro name="tooltip_css"> <style type="text/css"> div.nabble-tooltip, div.nabble-tooltip * { color: #EEE; font-weight:bold; } div.nabble-tooltip { background: #000; font-size:90%; line-height:normal; display: none; position: absolute; z-index: 88888; padding: .5em; border: 1px solid #FFF; white-space:normal; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } div.nabble-tooltip-small-row, div.nabble-tooltip-small-row * { color:#D0EAF2; } div.nabble-tooltip-small-row { font-size:80%; font-weight:normal; padding-top: .4em; } div.nabble-tooltip-arrow { font: 40px Arial, Sans-serif; line-height:1em; left:15px; position:absolute; bottom:-15px; height:15px; width:30px; overflow:hidden; } div.nabble-tooltip-arrow div { position:absolute; } div.nabble-tooltip-arrow div.d1 { top:-22px; color: #FFF; } div.nabble-tooltip-arrow div.d2 { top:-25px; color: #000; } </style> </macro> <macro name="tooltip_js"> <script type="text/javascript"> <![CDATA[ Nabble.startTooltip = function(e, position, delay) { if (e.nabbletooltip) return; e.nabbletooltip = true; var $this = $(e); var $arrow = $this.children().last(); var $elem = $this.prev(); $elem.hover( function() { setTip(); setTimer(); }, function() { stopTimer(); $this.hide(); } ); function setTimer() { $this.showTipTimer = setTimeout(function() { $('div.nabble-tooltip').hide(); stopTimer(); $this.fadeTo('fast', .8); }, delay); }; function stopTimer() { clearInterval($this.showTipTimer); }; function setTip(){ if ($this.parent().get() != document.body) $(document.body).append($this); var useTitle = $this.attr('use_title') == 'true'; if (useTitle) { var title = $elem.attr('title'); if (title != '') { $arrow.remove(); $this.html(title); $elem.attr('title',''); $this.append($arrow); } } var win = $(window).width(); if (position == 'up') { var w = $this.outerWidth(); if (w > 250) { w = 250; $this.width(w); } var xMid = $elem.offset().left + $elem.outerWidth()/2; var xTip = xMid - w/2; if (xTip+w > win-5) xTip = win-w-5; if (xTip < 0) xTip = 0; var xArrow = xMid-xTip-11; var yTip = $elem.offset().top-$this.outerHeight()-12; $arrow.css('left', xArrow); $this.css({'top' : yTip, 'left' : xTip}); } else if (position == 'right') { var h = $this.outerHeight(); var yMid = $elem.offset().top + $elem.outerHeight()/2; var yTip = yMid - h/2; var xTip = $elem.offset().left + $elem.outerWidth() + 10; $arrow.width(8).height(24).css({bottom:0,left:-8}); var yArrow = (h - 24)/2; $arrow.css({top:yArrow}); var $d1 = $arrow.children().first(); var $d2 = $arrow.children().last(); $d1.css({top:-11}); $d2.css({top:-11,left:1}); $this.css({'top' : yTip, 'left' : xTip}); } }; }; ]]> </script> </macro> ========================================== CUSTOM DROPDOWN ========================================== <macro name="custom_dropdown" parameters="clickable_id, panel_id"> <n.put_in_head.> <script type="text/javascript"> <![CDATA[ var ddPanels = []; Nabble.asDropdown = function(clickableId, panelId) { ddPanels.push(panelId); $(document).ready(function() { var $clickable = $('#'+clickableId); var $panel = $('#'+panelId); $panel.css({ position:'absolute', zIndex: 5555, display:'none' }); $clickable.addClass('custom-dropdown'); $clickable.click(function(e) { e.stopPropagation(); var isVisible = $panel.css('display') != 'none'; closeDropdowns(); if (!isVisible) { var left = $(this).position().left - 5; var w = $panel.outerWidth(); var win = $(window).width() - 10; if (left+w > win) left = win - w -10; left = left < 0? 0 : left; $panel.css('left', left); $panel.show(); } }); $(document).click(function(e) { if ($(e.target).hasClass('custom-dropdown')) return; closeDropdowns(); }); function closeDropdowns() { for (var i=0;i<ddPanels.length;i++) $('#'+ddPanels[i]).hide(); }; }); }; ]]> </script> </n.put_in_head.> <script type="text/javascript"> Nabble.asDropdown('<n.clickable_id/>', '<n.panel_id/>'); </script> </macro>