lazarus.fresnel/demo/TextDecoration/MainUnit.pas

unit MainUnit;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls, Fresnel.Events, FCL.Events,
  Fresnel.Classes, Fresnel.DemoRadioButton, Fresnel.DemoSlider;

type

  { TMainForm }

  TMainForm = class(TFresnelForm)
    procedure MainFormCreate(Sender: TObject);
  private
    procedure OnLineClick(Event: TAbstractEvent);
    procedure OnRangeClick(Event: TAbstractEvent);
    procedure OnStyleClick(Event: TAbstractEvent);
    procedure OnThicknessClick(Event: TAbstractEvent);
    procedure OnThicknessPxChanged(Sender: TObject);
  public
    LineRadiogroup: TDiv;
    LineLabel: TLabel;
    LineUnderlineRadioButton: TDemoRadioButton;
    LineOverlineRadioButton: TDemoRadioButton;
    LineLineThroughRadioButton: TDemoRadioButton;
    LineGrammarErrorRadioButton: TDemoRadioButton;
    LineSpellingErrorRadioButton: TDemoRadioButton;

    StyleRadiogroup: TDiv;
    StyleLabel: TLabel;
    StyleSolidRadioButton: TDemoRadioButton;
    StyleDoubleRadioButton: TDemoRadioButton;
    StyleDashedRadioButton: TDemoRadioButton;
    StyleDottedRadioButton: TDemoRadioButton;
    StyleWavyRadioButton: TDemoRadioButton;

    ThicknessRadiogroup: TDiv;
    ThicknessLabel: TLabel;
    ThicknessAutoRadioButton: TDemoRadioButton;
    ThicknessFromFontRadioButton: TDemoRadioButton;
    ThicknessPxRadioButton: TDemoRadioButton;
    ThicknessPxSlider: TDemoSlider;

    RangeRadiogroup: TDiv;
    RangeLabel: TLabel;
    RangeLabelRadioButton: TDemoRadioButton;
    RangeSpanRadioButton: TDemoRadioButton;
    RangeDivRadioButton: TDemoRadioButton;

    El: TFresnelElement;
    TextDiv: TDiv;
    Span1: TSpan;
    Label1, Label2, Label3, Label4, Label5: TLabel;
  end;

var
  MainForm: TMainForm;

implementation

{$R *.lfm}

{ TMainForm }

procedure TMainForm.MainFormCreate(Sender: TObject);

  function AddLabel(aName, aCaption: string; aParent: TFresnelElement): TLabel;
  begin
    Result:=TLabel.Create(Self);
    Result.Name:=aName;
    Result.Caption:=aCaption;
    Result.Parent:=aParent;
  end;

  function AddSpan(aName: string; aParent: TFresnelElement): TSpan;
  begin
    Result:=TSpan.Create(Self);
    Result.Name:=aName;
    Result.Parent:=aParent;
  end;

  function AddDiv(aName: string; aParent: TFresnelElement): TDiv;
  begin
    Result:=TDiv.Create(Self);
    Result.Name:=aName;
    Result.Parent:=aParent;
  end;

  function AddRadioButton(aName, aCaption: string; aParent: TFresnelElement;
    const OnClick: TFresnelEventHandler = nil): TDemoRadioButton;
  begin
    Result:=TDemoRadioButton.Create(Self);
    Result.Name:=aName;
    Result.Caption:=aCaption;
    Result.Parent:=aParent;
    Result.AddEventListener(evtClick,OnClick);
  end;

  function AddSlider(aName, aCaption: string; aParent: TFresnelElement;
    MinPos, MaxPos, CurPos: TFresnelLength; ValueFormat: string;
    const OnChange: TNotifyEvent): TDemoSlider;
  begin
    Result:=TDemoSlider.Create(Self);
    Result.Name:=aName;
    Result.Caption:=aCaption;
    Result.MinPosition:=MinPos;
    Result.MaxPosition:=MaxPos;
    Result.SliderPosition:=CurPos;
    Result.ValueFormat:=ValueFormat;
    Result.OnChange:=OnChange;
    Result.Parent:=aParent;
  end;

begin
  StyleSheet.Text:=':root { font-size: 12px; }'+LineEnding
    +'#TextDiv { font-size: 30px; }'+LineEnding
    +'#TextDiv label { margin-right: .5em; }';

  // line radiogroup
  LineRadiogroup:=AddDiv('LineRadiogroup',Self);
  LineRadiogroup.Style:='padding: 1em;';

  LineLabel:=AddLabel('LineLabel','text-decoration-line',LineRadiogroup);
  LineUnderlineRadioButton:=AddRadioButton('LineUnderlineRadioButton','underline',
    LineRadiogroup,@OnLineClick);
  LineUnderlineRadioButton.Checked:=true;
  LineOverlineRadioButton:=AddRadioButton('LineOverlineRadioButton','overline',
    LineRadiogroup,@OnLineClick);
  LineLineThroughRadioButton:=AddRadioButton('LineLineThroughRadioButton','line-through',
    LineRadiogroup,@OnLineClick);
  LineGrammarErrorRadioButton:=AddRadioButton('LineGrammarErrorRadioButton','grammar-error',
    LineRadiogroup,@OnLineClick);
  LineSpellingErrorRadioButton:=AddRadioButton('LineSpellingErrorRadioButton','spelling-error',
    LineRadiogroup,@OnLineClick);

  // style radiogroup
  StyleRadiogroup:=AddDiv('StyleRadiogroup',Self);
  StyleRadiogroup.Style:='padding: 1em;';

  StyleLabel:=AddLabel('StyleLabel','text-decoration-style',StyleRadiogroup);
  StyleSolidRadioButton:=AddRadioButton('StyleSolidRadioButton','solid',
    StyleRadiogroup,@OnStyleClick);
  StyleSolidRadioButton.Checked:=true;
  StyleDashedRadioButton:=AddRadioButton('StyleDashedRadioButton','dashed',
    StyleRadiogroup,@OnStyleClick);
  StyleDottedRadioButton:=AddRadioButton('StyleDottedRadioButton','dotted',
    StyleRadiogroup,@OnStyleClick);
  StyleDoubleRadioButton:=AddRadioButton('StyleDoubleRadioButton','doubled',
    StyleRadiogroup,@OnStyleClick);
  StyleWavyRadioButton:=AddRadioButton('StyleWavyRadioButton','wavy',
    StyleRadiogroup,@OnStyleClick);

  // thickness
  ThicknessRadiogroup:=AddDiv('ThicknessRadiogroup',Self);
  ThicknessRadiogroup.Style:='padding: 1em;';

  ThicknessLabel:=AddLabel('ThicknessLabel','text-decoration-thickness',ThicknessRadiogroup);
  ThicknessAutoRadioButton:=AddRadioButton('ThicknessAutoRadioButton','auto',
    ThicknessRadiogroup,@OnThicknessClick);
  ThicknessAutoRadioButton.Checked:=true;
  ThicknessFromFontRadioButton:=AddRadioButton('ThicknessFromFontRadioButton','from-font',
    ThicknessRadiogroup,@OnThicknessClick);
  ThicknessPxRadioButton:=AddRadioButton('ThicknessPxRadioButton','px',
    ThicknessRadiogroup,@OnThicknessClick);
  ThicknessPxSlider:=AddSlider('ThicknessPxSlider','',ThicknessRadiogroup,
    0,5,1,'%fpx',@OnThicknessPxChanged);

  // range radiogroup
  RangeRadiogroup:=AddDiv('RangeRadiogroup',Self);
  RangeRadiogroup.Style:='padding: 1em;';

  RangeLabel:=AddLabel('RangeLabel','Apply to',StyleRadiogroup);
  RangeLabelRadioButton:=AddRadioButton('RangeLabelRadioButton','label',
    RangeRadiogroup,@OnRangeClick);
  RangeLabelRadioButton.Checked:=true;
  RangeSpanRadioButton:=AddRadioButton('RangeSpanRadioButton','span',
    RangeRadiogroup,@OnRangeClick);
  RangeDivRadioButton:=AddRadioButton('RangeDivRadioButton','div',
    RangeRadiogroup,@OnRangeClick);

  // div, span, label
  TextDiv:=AddDiv('TextDiv',Self);
  TextDiv.Style:='padding: 1em; border: 1px solid black;';
  Span1:=AddSpan('Span1',TextDiv);
  Span1.Style:='border: 1px solid blue;';
  Label1:=AddLabel('Label1','Happy',Span1);
  El:=Label1;
  Label1.SetStyleAttr('text-decoration-line','underline');
  Label2:=AddLabel('Label2','Fresnel',Span1);
  Label3:=AddLabel('Label3','day',Span1);
  Label4:=AddLabel('Label4','to',TextDiv);
  Label5:=AddLabel('Label5','everyone',TextDiv);
end;

procedure TMainForm.OnLineClick(Event: TAbstractEvent);
var
  s: String;
begin
  if Event.Sender=LineUnderlineRadioButton then
    s:='underline'
  else if Event.Sender=LineOverlineRadioButton then
    s:='overline'
  else if Event.Sender=LineLineThroughRadioButton then
    s:='line-through'
  else if Event.Sender=LineGrammarErrorRadioButton then
    s:='grammar-error'
  else if Event.Sender=LineSpellingErrorRadioButton then
    s:='spelling-error'
  else
    s:='none';
  El.SetStyleAttr('text-decoration-line',s);
end;

procedure TMainForm.OnRangeClick(Event: TAbstractEvent);
var
  NewEl: TFresnelElement;
  OldLine, OldStyle, OldThickness: String;
begin
  if Event.Sender=RangeDivRadioButton then
    NewEl:=TextDiv
  else if Event.Sender=RangeSpanRadioButton then
    NewEl:=Span1
  else
    NewEl:=Label1;
  if El=NewEl then exit;

  OldLine:=El.GetStyleAttr('text-decoration-line');
  El.SetStyleAttr('text-decoration-line','');
  OldStyle:=El.GetStyleAttr('text-decoration-style');
  El.SetStyleAttr('text-decoration-style','');
  OldThickness:=El.GetStyleAttr('text-decoration-thickness');
  El.SetStyleAttr('text-decoration-thickness','');

  El:=NewEl;
  El.SetStyleAttr('text-decoration-line',OldLine);
  El.SetStyleAttr('text-decoration-style',OldStyle);
  El.SetStyleAttr('text-decoration-thickness',OldThickness);
end;

procedure TMainForm.OnStyleClick(Event: TAbstractEvent);
var
  s: String;
begin
  if Event.Sender=StyleDashedRadioButton then
    s:='dashed'
  else if Event.Sender=StyleDottedRadioButton then
    s:='dotted'
  else if Event.Sender=StyleDoubleRadioButton then
    s:='double'
  else if Event.Sender=StyleWavyRadioButton then
    s:='wavy'
  else
    s:='solid';
  El.SetStyleAttr('text-decoration-style',s);
end;

procedure TMainForm.OnThicknessClick(Event: TAbstractEvent);
var
  s: String;
begin
  if Event.Sender=ThicknessAutoRadioButton then
    s:='auto'
  else if Event.Sender=ThicknessFromFontRadioButton then
    s:='from-font'
  else if Event.Sender=ThicknessPxRadioButton then
    s:=FloatToCSSPx(ThicknessPxSlider.SliderPosition);
  El.SetStyleAttr('text-decoration-thickness',s);
end;

procedure TMainForm.OnThicknessPxChanged(Sender: TObject);
begin
  if ThicknessPxRadioButton.Checked then
    El.SetStyleAttr('text-decoration-thickness',FloatToCSSPx(ThicknessPxSlider.SliderPosition));
end;

end.