* Additional bootstrap demos

demo/webwidget/widgets/demobootstrap.pp

@@ -0,0 +1,187 @@
+unit demobootstrap;
+
+{$mode objfpc}
+
+interface
+
+uses
+  sysutils, web, js, webwidget, htmlwidgets, bootstrapwidgets,  widgetdemo;
+
+Type
+
+  { TSimpleToastWidgetDemo }
+
+  TSimpleToastWidgetDemo = class(TDemoContainer)
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+  { TToastManagerDemo }
+
+  TToastManagerDemo = class(TDemoContainer)
+  private
+    procedure DoShowToast(Sender: TObject; Event: TJSEvent);
+  Protected
+    FLabelClosable:TLabelWidget;
+    FLabelHeader:TLabelWidget;
+    FLabelBody:TLabelWidget;
+    FLabelContextual:TLabelWidget;
+    FHeader : TTextInputWidget;
+    FBody : TTextAreaWidget;
+    FContextual : TSelectWidget;
+    FClosable : TCheckboxInputWidget;
+    FShowButton: TBootstrapButton;
+  public
+    Class Function Demohelp : String; override;
+    Class Function Description : String; override;
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Function GetInspectorInstance: TObject; override;
+    Procedure ShowDemo; override;
+  end;
+
+
+  { TBootstrapButtonDemo }
+
+  TBootstrapButtonDemo = class(TDemoContainer)
+  Private
+  public
+    class function WebWidgetClass: TCustomWebWidgetClass; override;
+    Procedure ShowDemo; override;
+  end;
+
+implementation
+
+{ TToastManagerDemo }
+
+procedure TToastManagerDemo.DoShowToast(Sender: TObject; Event: TJSEvent);
+
+Var
+  T : TContextual;
+begin
+  if FContextual.SelectedIndex<>-1 then
+    T:=TContextual(FContextual.SelectedIndex)
+  else
+    T:=cNone;
+  TToastManager.Instance.ShowToast(FHeader.Value,FBody.Lines.text,T,FClosable.Checked);
+end;
+
+class function TToastManagerDemo.Demohelp: String;
+begin
+  Result:='Toast manager demo: click button to show a toast in the top-left corner';
+end;
+
+class function TToastManagerDemo.Description: String;
+begin
+  Result:='Toast manager demo';
+end;
+
+class function TToastManagerDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=Nil;
+end;
+
+function TToastManagerDemo.GetInspectorInstance: TObject;
+begin
+  Result:=TToastManager.Instance;
+end;
+
+procedure TToastManagerDemo.ShowDemo;
+
+Var
+  T : TContextual;
+  R : TRowWidget;
+  C : TColWidget;
+
+  Procedure AddRow;
+  begin
+    R:=TRowWidget.Create(Self);
+    R.Parent:=Self;
+    C:=TColWidget.Create(Self);
+    C.Parent:=R;
+  end;
+
+begin
+  inherited ShowDemo;
+  TToastManager.Instance.ParentID:='toastarea-stack';
+  // Contextual
+  AddRow;
+  FLabelContextual:=TLabelWidget.Create(Self);
+  FLabelContextual.Text:='Contextual class for message';
+  FContextual:=TSelectWidget.Create(Self);
+  For T in TContextual do
+    FContextual.Items.Add(ContextualNames[t]);
+  FContextual.SelectedIndex:=0;
+  FLabelContextual.LabelFor:=FContextual;
+  FLabelContextual.Parent:=C;
+  FContextual.Parent:=C;
+  FContextual.Classes:='form-control';
+  // Header
+  AddRow;
+  FLabelHeader:=TLabelWidget.Create(Self);
+  FLabelHeader.Text:='Toast header';
+  FHeader:=TTextInputWidget.Create(Self);
+  FHeader.Value:='The message title';
+  FLabelHeader.LabelFor:=FHeader;
+  FLabelHeader.Parent:=C;
+  FHeader.Parent:=C;
+  FHeader.Classes:='form-control';
+  // Body
+  AddRow;
+  FLabelBody:=TLabelWidget.Create(Self);
+  FLabelBody.Text:='Toast body';
+  FBody:=TTextAreaWidget.Create(Self);
+  FBody.Lines.Text:='A nice message to show';
+  FLabelBody.LabelFor:=FBody;
+  FLabelBody.Parent:=C;
+  FBody.Parent:=C;
+  FBody.Classes:='form-control';
+  // Closable checkbox
+  AddRow;
+  FLabelClosable:=TLabelWidget.Create(Self);
+  FLabelClosable.Text:='Allow to close toast';
+  FClosable:=TCheckboxInputWidget.Create(Self);
+  FClosable.Classes:='form-check-input';
+  FLabelClosable.LabelFor:=FClosable;
+  FLabelClosable.Parent:=C;
+  FClosable.Parent:=C;
+  // button
+  AddRow;
+  FShowButton:=TBootstrapButton.Create(Self);
+  FShowButton.Text:='Show toast';
+  FShowButton.Parent:=C;
+  FShowButton.OnClick:=@DoShowToast;
+  Refresh;
+end;
+
+{ TBootstrapButtonDemo }
+
+class function TBootstrapButtonDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TBootstrapButton;
+end;
+
+procedure TBootstrapButtonDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+  WidgetInstance.OnClick:=@DoClick;
+end;
+
+{ TToastManagerDemo }
+
+class function TSimpleToastWidgetDemo.WebWidgetClass: TCustomWebWidgetClass;
+begin
+  Result:=TSimpleToastWidget;
+end;
+
+procedure TSimpleToastWidgetDemo.ShowDemo;
+begin
+  inherited ShowDemo;
+end;
+
+initialization
+  TBootstrapButtonDemo.RegisterDemo;
+  TSimpleToastWidgetDemo.RegisterDemo;
+  TToastManagerDemo.RegisterDemo;
+end.
+

demo/webwidget/widgets/frmdemo.pp

@@ -89,7 +89,7 @@ begin
   FContainer.ParentID:=SDemoContainerID;
   FContainer.Refresh;
   FContainer.ShowDemo;
-  FPropertyGrid.Subject:=FContainer.WidgetInstance;
+  FPropertyGrid.Subject:=FContainer.InspectorInstance;
   FPropertyGrid.LookupRoot:=FContainer;
   FPropertyGrid.Refresh;
 end;

demo/webwidget/widgets/webwidgetsdemo.lpi

@@ -4,22 +4,23 @@
     <Version Value="12"/>
     <General>
       <Flags>
+        <SaveOnlyProjectUnits Value="True"/>
         <MainUnitHasCreateFormStatements Value="False"/>
         <MainUnitHasTitleStatement Value="False"/>
         <MainUnitHasScaledStatement Value="False"/>
         <Runnable Value="False"/>
+        <SaveJumpHistory Value="False"/>
+        <SaveFoldState Value="False"/>
       </Flags>
       <SessionStorage Value="InProjectDir"/>
       <Title Value="webwidgetsdemo"/>
       <UseAppBundle Value="False"/>
       <ResourceType Value="res"/>
     </General>
-    <CustomData Count="5">
+    <CustomData Count="3">
       <Item0 Name="MaintainHTML" Value="1"/>
-      <Item1 Name="PasJSHTMLFile" Value="project1.html"/>
-      <Item2 Name="PasJSPort" Value="0"/>
-      <Item3 Name="PasJSWebBrowserProject" Value="1"/>
-      <Item4 Name="RunAtReady" Value="1"/>
+      <Item1 Name="PasJSWebBrowserProject" Value="1"/>
+      <Item2 Name="RunAtReady" Value="1"/>
     </CustomData>
     <BuildModes>
       <Item Name="Default" Default="True"/>
@@ -60,6 +61,10 @@
         <Filename Value="democonsts.pp"/>
         <IsPartOfProject Value="True"/>
       </Unit>
+      <Unit>
+        <Filename Value="demobootstrap.pp"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
     </Units>
   </ProjectOptions>
   <CompilerOptions>

demo/webwidget/widgets/webwidgetsdemo.lpr

@@ -4,7 +4,7 @@ program webwidgetsdemo;
 
 uses
   browserconsole, browserapp, JS, Classes, SysUtils, Web, widgetdemo, frmDemo, Rtl.TemplateLoader,
-  demohtmlwidgets, democonsts, webrouter;
+  demohtmlwidgets, democonsts, webrouter, demobootstrap;
 
 type
   TMyApplication = class(TBrowserApplication)

demo/webwidget/widgets/widgetdemo.pp

@@ -20,6 +20,8 @@ Type
     procedure DoClick(Sender: TObject; Event: TJSEvent); virtual;
     // Event that can be used by descendents to attach to OnChange
     procedure DoChange(Sender: TObject; Event: TJSEvent); virtual;
+    // Override this to return something else but the widget itself
+    function GetInspectorInstance: TObject; virtual;
   Public
     function HTMLTag: String; override;
     function DoRenderHTML(aParent, aElement: TJSHTMLElement): TJSHTMLElement; override;
@@ -27,7 +29,10 @@ Type
     Class Function Description : String; virtual;
     Class function WebWidgetClass : TCustomWebWidgetClass; virtual; abstract;
     Class Function RegisterDemo : TDemoRegistration;
+    // The widget instance
     Property WidgetInstance : TCustomWebWidget Read FWidgetInstance;
+    // The object to show in object inspector. By default, this is the widget instance
+    Property InspectorInstance : TObject Read GetInspectorInstance;
     Procedure ShowDemo; virtual;
   end;
   TDemoContainerClass = Class of TDemoContainer;
@@ -185,6 +190,11 @@ end;
 
 { TDemoContainer }
 
+function TDemoContainer.GetInspectorInstance: TObject;
+begin
+  Result:=WidgetInstance;
+end;
+
 procedure TDemoContainer.DoClick(Sender: TObject; Event: TJSEvent);
 begin
   Writeln(Sender.ClassName,' : OnClick event');

demo/webwidget/widgets/widgetsdemo.html

@@ -21,8 +21,13 @@
   <div class="banner container-fluid">
      <h2  class="text-center">
       <span "align-middle">WebWidgets demo</span>
-    </h2>  </div>
+    </h2>
+  </div>
   <div class="container-fluid"/>
+    <div id="toastarea" aria-live="polite" aria-atomic="true" style="position: relative; top:0; right: 0; z-index: 99;">
+     <div id="toastarea-stack" style="position: absolute; top: 0; right: 0; z-index: 99;" data-ww-element-content="ww-1"  >
+     </div>
+    </div>
     <div class="row">
       <div id="demoarea" class="col-10">
         <div class="row">