//---------------------------------------------------------------------------------------------
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 void Execute(Atom parent)
{
var form = new Form ();
new Fieldset (form, fs => {
new Legend (fs,"Legend");
new Label(fs, "LabelText");
new TextInput(fs, i=>{
i.Placeholder="type something";
i.Name="text";
});
new Span(fs, s=>{s.Text="Example block-level help text here"; s.ClassName="help-block";});
new CheckField(fs, cf=>{
cf.Name="allow";
cf.Input.Text="Check me";
cf.Input.Checked=true;
});
new SubmitButton(fs, b=>{
b.Text="Send";
b.Clicked+= (e) =>{
e.PreventDefault();
form.JQuery.Serialize().LogInfo();
};
});
form.Append(fs);
});
parent.JQuery.Append("Default styles".Header (3)).Append (form);
var sform = new Form ();
new TextInput (sform, i => {
i.Name="stext";
i.Placeholder="search for";
i.Required=true;
i.ClassName="input-medium search-query";
i.MaxLength=8;
i.MinLength=3;
});
new SubmitButton(sform, b=>{
b.Text="Search...";
b.Clicked+= (e) =>{
if(!sform.CheckValidity()) return ;
sform.JQuery.Serialize().LogInfo();
};
});
parent.JQuery.Append("Optional Layouts".Header (3)).Append("Search Form".Header(4)).Append (sform);
var lform = new Form ();
lform.SubmitHandler = f => f.JQuery.Serialize().LogInfo() ;
lform.ClassName = "form-inline";
new EmailInput (lform, i => {
i.Placeholder = "your email";
i.Required=true;
i.Name="email";
});
new PasswordInput (lform, i => {
i.Placeholder = "your password";
i.Required=true;
i.Name="password";
i.MinLength=4;
});
new CheckInput (lform,i =>{
i.Name="remember";
i.Text="Remember?";
i.Checked=true;
});
new SubmitButton (lform, b => b.Text = "submit");
parent.JQuery.Append("Inline Form".Header(4)).Append (lform);
new Form (f=>{
f.ClassName="form-horizontal";
new EmailField(f,i=>{
i.Text="Email";
i.Placeholder="your email";
i.Input.Required=true;
i.Name="email";
});
new PasswordField(f,i=>{
i.Text="Password";
i.Placeholder="your password";
i.Input.Required=true;
i.Input.MinLength=4;
i.Name="password";
});
new CheckField(f, i=>{
i.Input.Text="Remember";
i.Input.Checked=true;
i.Name="remember";
new SubmitButton(i.Controls, b=> b.Text="Login");
});
f.SubmitHandler= fr=> fr.JQuery.Serialize().LogInfo();
parent.JQuery.Append("Horizontal Form".Header(4)).Append (f);
});
var login = new Div ("span4 offset3 well");
login.Append (new Legend("Login Form"));
new Form (login, f => {
var nm = new TextField(f);
nm.Placeholder="user name";
nm.Name ="username";
nm.Input.ClassName="span12";
nm.Input.Required=true;
nm.Input.MinLength=8;
var pwd = new PasswordField(f);
pwd.Placeholder="password";
pwd.Name ="password";
pwd.Input.ClassName="span12";
pwd.Input.Required=true;
pwd.Input.MinLength=6;
pwd.Input.MaxLength=10;
var rmb = new CheckField(f);
rmb.Name="remember";
rmb.Input.Text="Remember";
var sb = new SubmitButton(f);
sb.Text="Login";
sb.AddClass("btn-info btn-block");
f.SubmitHandler= fr=>{
sb.Disabled=true;
Window.SetTimeout(()=>{
sb.Disabled=false;
"Welcome {0}".Fmt(nm.Value).LogSuccess();
f.Reset();
}, 1000);
};
});
parent.JQuery.Append ("Samples".Header(3)).Append ("Login Form".Header(4))
.Append (UI.CreateContainer(ct=> UI.CreateRow(ct, rw=> rw.Append(login))));
var contact = new Div ("container");
new Form (contact, f=>{
f.ClassName="well span8";
UI.CreateRowFluid(f, row=>{
new Div(row, p=>{
p.ClassName="span5";
new TextField(p, tf=>{tf.Name="firstname"; tf.Required=true; tf.Text="FirstName"; tf.Input.ClassName="span12"; });
new TextField(p, tf=>{tf.Name="lastname"; tf.Required=true; tf.Text="LastName"; tf.Input.ClassName="span12"; });
new EmailField(p, tf=>{tf.Name="email"; tf.Required=true; tf.Text="Email";tf.Input.ClassName="span12";});
new SelectField<string>(p, sf=>{
sf.Text="Subject";
sf.Name="subject";
sf.Input.ClassName="span12";
sf.Input.Add("", "Choose one...");
sf.Input.Add("1", "General Customer Service");
sf.Input.Add("2", "Suggestions");
sf.Input.Add("3", "Product suport");
sf.Input.Add("4", "Bug");
sf.Input.Required=true;
});
});
new Div(row, p=>{
p.ClassName="span7";
new TextAreaField(p, tf=>{tf.Name="message"; tf.Rows=11; tf.Text="Message";tf.Input.ClassName="span12";});
});
new SubmitButton(row, bt=>{
bt.AddClass("btn-primary pull-right");
bt.Text="Send";
});
});
f.SubmitHandler=fr=> AlertFn.Success(fr.FirstChild,"Message sent",true, 5000);
});
parent.JQuery.Append("Conctact Form".Header(4)).Append (contact);
parent.Append ("C# code".Header(3));
var rq =jQuery.GetData<string> ("code/demoform.html");
rq.Done (s=> {
var code=new Div();
code.InnerHTML= s;
parent.Append(code);
});
}
void ShowMenu()
{
UI.CreateContainerFluid (fluid=>{
UI.CreateRowFluid(fluid, row=>{
new Div(row,span=>{
span.ClassName="span2";
var navlist = new NavList(span);
navlist.Header="Main Menu";
navlist.AddDivider();
foreach(var item in MenuItems){
navlist.Add(item.Title, handler:e=>{
e.PreventDefault();
Work.Empty();
if(modules.Contains(item.Class))
{
ExecuteModule(Work, item.Class);
}
else
{
jQuery.GetScript(item.File, (o)=>{
modules.Add(item.Class);
ExecuteModule(Work, item.Class);
});
}
});
}
});
Work = new Div(row, w=>{
w.ID="work";
w.ClassName="span10";
w.Append("Welcome".Header(3));
});
});
Document.Body.AppendChild(fluid);
});
}
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 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 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;
}