//---------------------------------------------------------------------------------------------
public static Panel Panel(PanelOptions options=null)
{
DraggableObject dobject=null;
ResizableObject robject=null;
var e = new Div ("well well-panel").As<Panel>();
e.CreateId ();
e._options = options ?? new PanelOptions ();
e._headerband = new Div ("well-panel-header");
e.CloseIcon= new CssIcon (e._options.CloseIconClass);
e.CloseIcon.CreateId ();
e.CollapseIcon = new CssIcon (e._options.CollapseIconClass);
e.CollapseIcon.CreateId ();
e.Header= Atom ("ctxt");
e._contentband= new Div ("well-panel-content");
e.Body = new Div("well-panel-body");
e._contentband.Append(e.Body);
if (e._options.Hidden)
jQuery.FromElement (e).Hide ();
jQuery.FromElement (e._headerband).Append (e.CloseIcon).Append (e.CollapseIcon).Append(e.Header);
jQuery.FromElement (e).Append (e._headerband).Append (e._contentband);
SetToAtomProperty (e, "is_closable", (Func<bool>)( () => e._options.Closable ));
SetToAtomProperty (e, "closable", (Action<bool?>)(v => {
e._options.Closable = v.HasValue?v.Value:true;
e.CloseIcon.Hidden= !e._options.Closable;
}));
SetToAtomProperty (e, "is_collapsible", (Func<bool>)( () =>e._options.Collapsible ));
SetToAtomProperty (e, "collapsible", (Action<bool?>)(v => {
e._options.Collapsible = v.HasValue?v.Value:true;
e.CollapseIcon.Hidden= !e._options.Collapsible;
}));
SetToAtomProperty (e, "get_top", (Func<string>)( () => e._options.Top ));
SetToAtomProperty (e, "set_top", (Action<string>)( (v) =>{
if(v.IsNullOrEmpty()) return;
e._options.Top=v;
e.Style.Top = v;
}));
SetToAtomProperty (e, "get_left", (Func<string>)( () => e._options.Left ));
SetToAtomProperty (e, "set_left", (Action<string>)( (v) =>{
if(v.IsNullOrEmpty()) return;
e._options.Left=v;
e.Style.Left = v;
}));
SetToAtomProperty (e, "get_height", (Func<string>)( () => e._options.Height ));
SetToAtomProperty (e, "set_height", (Action<string>)( (v) =>{
if(v.IsNullOrEmpty()) return;
e._options.Height=v;
e._contentband.Style.Height = v;
e.Style.Height = "auto";
}));
SetToAtomProperty (e, "get_width", (Func<string>)( () => e._options.Width ));
SetToAtomProperty (e, "set_width", (Action<string>)( (v) =>{
if(v.IsNullOrEmpty()) return;
e._options.Width=v;
e.Style.Width = v;
e._contentband.Style.Width = "auto";
}));
SetToAtomProperty (e, "get_caption", (Func<string>)( () => e._options.Caption ));
SetToAtomProperty (e, "set_caption", (Action<string>)(v => {
e._options.Caption=v;
e.Header.InnerHTML= v.IsNullOrEmpty()? "": v;
}));
SetToAtomProperty (e, "do_show", (Action<bool?>)(show => {
if(e.ParentNode==null) jQuery.FromElement(Document.Body).Append(e);
if(!show.HasValue || show.Value)
jQuery.FromElement(e).Show();
else
jQuery.FromElement(e).Hide();
}));
SetToAtomProperty(e, "close", (Action)( ()=> jQuery.FromElement(e).Remove()));
SetToAtomProperty (e, "add", (Func<Element,Panel>)((c) =>{
jQuery.FromElement (e.Body).Append (c);
return e;
}));
if (e._options.CloseIconHandler == null)
e._options.CloseIconHandler = p => p.Close ();
if (e._options.CollapseIconHandler == null)
e._options.CollapseIconHandler = (p,cl) => p.Collapse ();
SetToProperty (e,"add_closeIconClicked", (Action<jQueryEventHandler>)
((ev) => {
On(e, PanelCloseIconEventName, ev, "#"+e.CloseIcon.ID);}));
SetToProperty (e,"remove_closeIconClicked", (Action<jQueryEventHandler>)
((ev) => Off (e,PanelCloseIconEventName, ev, "#"+e.CloseIcon.ID)));
SetToProperty (e,"add_collapseIconClicked", (Action<jQueryEventHandler>)
((ev) => On(e, PanelCollapseIconEventName, ev, "#"+e.CollapseIcon.ID)));
SetToProperty (e,"remove_collapseIconClicked", (Action<jQueryEventHandler>)
((ev) => Off (e,PanelCollapseIconEventName, ev, "#"+e.CollapseIcon.ID)));
SetToProperty(e,"collapse", (Action)(()=>{
var collapsed = e._contentband.Hidden;
e._contentband.Hidden=!collapsed;
if (collapsed){
e.CollapseIcon.RemoveClass(options.ExpandIconClass);
e.CollapseIcon.AddClass(options.CollapseIconClass);
} else {
e.CollapseIcon.RemoveClass(options.CollapseIconClass);
e.CollapseIcon.AddClass(options.ExpandIconClass);
e.Style.Height="auto";
}
}));
SetToProperty(e, "resizable", (Action<bool?>)(v=>{
options.Resizable=v.HasValue?v.Value:true;
if(e._options.Resizable){
if(robject==null){
robject = jQuery.FromElement(e._contentband).Resizable ();
robject.AlsoResize = e;
}
} else {
if(robject!=null){
robject.Destroy();
robject=null;
}
}
}));
SetToProperty(e, "is_resizable", (Func<bool>)( ()=> options.Resizable ) );
SetToProperty(e, "do_draggable", (Action<bool?>)( v=>{
e._options.Draggable=v.HasValue?v.Value:true;
if(options.Draggable){
if(dobject==null){
dobject = jQuery.FromElement(e).Draggable ();
dobject.Stack = "#"+e.ID;
dobject.AddClasses = false;
dobject.Containment = "parent";
dobject.Distance = 10;
dobject.Handle = e._headerband;
}
} else {
if(dobject!=null){
dobject.Destroy();
dobject=null;
}
}
}));
SetToProperty(e, "is_draggable", (Func<bool>)( ()=> options.Draggable ) );
e.SetToAtomProperty("get_closeIconHandler", (Func<Action<Panel>>)(()=> e._options.CloseIconHandler ));
e.SetToAtomProperty("set_closeIconHandler", (Action<Action<Panel>>)((v)=> e._options.CloseIconHandler=v ));
e.SetToAtomProperty("get_collapseIconHandler", (Func<Action<Panel,bool>>)(()=> e._options.CollapseIconHandler ));
e.SetToAtomProperty("set_CollapseIconHandler", (Action<Action<Panel,bool>>)((v)=> e._options.CollapseIconHandler=v ));
jQuery.FromElement (e).On ("click", "#"+e.CloseIcon.ID, ev => {
var j= jQuery.FromElement(ev.CurrentTarget);
if(j.HasClass("disabled") ) return ;
j.Trigger(PanelCloseIconEventName);
})
.On("dragstop", ev=>z=e.Style.ZIndex)
.On("click", ev=>{
//e.Style.ZIndex=z++;
})
.On ("click", "#"+e.CollapseIcon.ID, ev => {
var j= jQuery.FromElement(ev.CurrentTarget);
if(j.HasClass("disabled") ) return ;
j.Trigger(PanelCollapseIconEventName);
});
e.CloseIconClicked+= (ev) => {
e._options.CloseIconHandler(e);
};
e.CollapseIconClicked+= (ev) => {
e._options.CollapseIconHandler(e, e._contentband.Hidden);
};
e.Resizable = options.Resizable;
e.Draggable = options.Draggable;
e.Closable=options.Closable;
e.Collapsible = options.Collapsible;
e.Caption = options.Caption;
if (options.Overlay) {
e.Style.Position = "fixed";
}
e.Height = options.Height;
e.Width = options.Width;
e.Left = options.Left;
e.Top = options.Top;
return e;
}
public static NavList NavList(Atom parent =null)
{
var e = new Div ("well sidebar-nav").As<NavList>();
e.Nav = Nav ("nav-list");
jQuery.FromElement (e).Append (e.Nav);
e.Nav.SetToAtomProperty ("get_header", (Func<string>)(() => e.GetFromAtomProperty ("$header").ToString () ?? ""));
e.Nav.SetToAtomProperty ("set_header", (Action<string>)((v) => {
e.SetToAtomProperty ("$header", v);
var fli= jQuery.Select ("li:first", e.Nav);
if (fli.Length == 0) {
jQuery.FromElement (e.Nav).Append (new HtmlListItem("nav-header", v));
} else if (fli.HasClass ("nav-header"))
fli.Html (BuildText (v));
else {
fli.Before (new HtmlListItem ("nav-header", v));
}
}));
e.SetToAtomProperty("get_text", (Func<string>)(()=> e.Header) );
e.SetToAtomProperty("set_text", (Action<string>)((v)=> e.Header=v) );
if (parent != null)
parent.Append (e);
return e;
}
public static NavBar NavBar(){
var e = new Div ("navbar").As<NavBar> ();
var ar = new Anchor ("btn btn-navbar");
ar.SetAttribute ("data-toggle", "collapse");
for(int i =0; i<3; i++){
var sp = new Span ("icon-bar");
jQuery.FromElement(ar).Append (sp);
}
e.Collapse = new Div ("nav-collapse collapse");
ar.SetAttribute ("data-target", "#"+e.Collapse.CreateId() );
e.Nav = Nav ();
e.Collapse.Append (e.Nav);
var cf = new Div ("container-fluid");
jQuery.FromElement(cf).Append (ar).Append (e.Collapse);
var nbi = new Div ("navbar-inner");
jQuery.FromElement(nbi).Append (cf);
jQuery.FromElement (e).Append (nbi);
e.Nav.SetToAtomProperty ("$brand", null);
e.Nav.SetToAtomProperty ("get_brandText", (Func<string>)(()=>{
if (e.Brand==null) return "";
return e.Brand.Text;
}));
e.Nav.SetToAtomProperty ("set_brandText", (Action<string>)(v => {
var fli= jQuery.Select (BrandSelector, cf);
if (fli.Length == 0){
e.Brand=new Anchor("brand",text:v);
jQuery.FromElement (e.Collapse).Before ( e.Brand );
}
else
e.Brand.Text=v;
}));
e.Nav.SetToAtomProperty ("add_brandClicked", (Action<jQueryEventHandler>)((ev) =>
On (cf, BrandEventName, ev, BrandSelector)));
e.Nav.SetToAtomProperty ("remove_brandClicked", (Action<jQueryEventHandler>)((ev) =>
Off(cf, BrandEventName , ev, BrandSelector)));
e.Nav.SetToAtomProperty("is_inverse",
(Func<bool>)( ()=> jQuery.FromElement(e).HasClass("navbar-inverse")));
e.Nav.SetToAtomProperty("inverse",(Action<bool?>)( v=> {
if(!v.HasValue || v.Value)
jQuery.FromElement(e).AddClass("navbar-inverse");
else
jQuery.FromElement(e).RemoveClass("navbar-inverse");
}));
e.SetToAtomProperty("get_text", (Func<string>)( ()=> e.BrandText ));
e.SetToAtomProperty ("set_text",(Action<string>)((v) => e.BrandText = v));
e.Collapse.SetToAtomProperty ("addElement", (Action<Element>)(v=> e.Collapse.Append(v)));
jQuery.FromElement (cf).On ("click", BrandSelector, ev => {
ev.PreventDefault();
var j= jQuery.FromElement(ev.CurrentTarget);
if(j.HasClass("disabled") ) return ;
j.Trigger(BrandEventName);
});
return e;
}
public static TabPanel TabPanel(TabPanelOptions options, Action<TabPanel> action)
{
options = options ?? new TabPanelOptions ();
var e = new Div (
("tabbable{0}{1}").Fmt(
options.Bordered ? " tabbable-bordered" : "",
" tabs-" + options.TabsPosition)
).As<TabPanel>();
e.Links = new HtmlList (string.Format ("nav nav-{0}{1}", options.NavType, options.Stacked ? " nav-stacked" : ""));
e.Content = new Div ("tab-content");
var getTab = (Func<object,Tab>)(t => {
var tp = Type.GetScriptType (t);
if (tp == "number")
return jQuery.Select("a[data-toggle='tab']",e.Links ).GetElement(int.Parse(t.ToString())).As<Tab>();
if (tp == "object")
return UI.Cast<Tab> (t);
return null;
});
if (options.TabsPosition != "below") {
jQuery.FromElement(e).Append (e.Links).Append(e.Content);
} else {
jQuery.FromElement(e).Append (e.Content).Append(e.Links);
}
e.SetToAtomProperty("addDropdownTab", (Func<string,string,DropdownTab>)( (t,i)=>
new DropdownTab(e,t,i)
));
e.SetToAtomProperty ("add", (Action<Tab>)((tab) => {
e.Links.Append(tab.Item);
e.Content.Append (tab.Body);
}));
e.SetToAtomProperty ("addTab", (Action<Action<Tab>>)((act) => {
var tab = new Tab();
act(tab);
e.Links.Append(tab.Item);
e.Content.Append (tab.Body);
}));
e.SetToAtomProperty ("getTab", (Func<int,Tab>)((index) =>
jQuery.Select("a[data-toggle='tab']", e.Links).GetElement(index).As<Tab>()
));
e.SetToAtomProperty ("remove", (Action<object>)((t) => {
Tab tab = getTab(t);
if(tab==null) return ;
jQuery.FromElement(tab.Body).Remove();
jQuery.FromElement(tab.Item).Remove();
}));
e.SetToAtomProperty ("show", (Action<object>)(t => {
Tab tab = getTab (t);
if (tab == null)
return;
jQuery.FromElement (tab).Execute ("tab", "show");
}));
e.SetToAtomProperty ("disable", (Action<object, bool?>)((t,v) => {
Tab tab = getTab(t);
if(tab==null) return ;
tab.Disabled= v.HasValue?v.Value:true;
}));
UI.SetToProperty (e, "add_tabShow", (Action<jQueryEventHandler>)
((ev) => UI.On (e, "show", ev, "a[data-toggle='tab']")));
UI.SetToProperty (e,"remove_tabShow", (Action<jQueryEventHandler>)
((ev) => UI.Off (e,"show", ev, "a[data-toggle='tab']")));
UI.SetToProperty (e, "add_tabShown", (Action<jQueryEventHandler>)
((ev) => UI.On (e, "shown", ev, "a[data-toggle='tab']")));
UI.SetToProperty (e,"remove_tabShown", (Action<jQueryEventHandler>)
((ev) => UI.Off (e,"shown", ev, "a[data-toggle='tab']")));
UI.SetToProperty (e, "add_tabClicked", (Action<jQueryEventHandler>)
((ev) => UI.On (e, "click", ev, "a[data-toggle='tab']")));
UI.SetToProperty (e,"remove_tabClicked", (Action<jQueryEventHandler>)
((ev) => UI.Off (e,"clik", ev, "a[data-toggle='tab']")));
jQuery.FromElement (e).On ("click","a[data-toggle='tab']", ev => {
ev.PreventDefault();
if(ev.CurrentTarget.ClassList.Contains ("disabled") ) return ;
ev.CurrentTarget.As<Tab>().ClickHandler(ev.CurrentTarget.As<Tab>() );
});
if(action!=null) action(e);
return e;
}