Example #1
0
		//---------------------------------------------------------------------------------------------


		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;
		}
Example #2
0
		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);
			});

		
		}
Example #3
0
		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);
			});

		}
Example #4
0
		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;
		}
Example #5
0
		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;
		}
Example #6
0
		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;
		}