ui_components.naml
==========================================
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>