I've created MEMO component

Raudus Forums Custom components I've created MEMO component

This topic contains 2 replies, has 2 voices, and was last updated by  leo_kacharkov 8 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #852730

    leo_kacharkov
    Participant

    I do this because the TinyMCE always refresh, when i paste from MS-Word.
    I have adapt it from the example project: JQdatetimepicker
    it is really dirrrty because I’m so new to JavaScript, i dont know how to delete unwanted code, but it work for me.

    unit RxLeoMemo;

    interface

    uses
    Classes, SysUtils, dialogs,
    RaControlsVCL;

    type
    TRxLEOmemo = class(TRaExtendableControlGCD)
    public
    constructor Create(AOwner: TComponent); override;
    private
    FValue: TDateTime;
    FValueJQ: String;
    SNFValue : String;

    FValueModified: Boolean;
    FChangeMonth: Boolean;
    FChangeYear: Boolean;
    FShowWeek: Boolean;
    FShowButtonPanel: Boolean;
    FUseLocalNames: Boolean;
    FFormatSettings: TFormatSettings;
    FFormatSettingsDateFormatJQ: String;
    FFormatSettingsLongMonthNamesJQ: String;
    FFormatSettingsShortMonthNamesJQ: String;
    FFormatSettingsLongDayNamesJQ: String;
    FFormatSettingsShortDayNamesJQ: String;
    FOthersModified: Boolean;
    FOnSelect: TNotifyEvent;
    procedure SetValue(AValue: TDateTime);
    procedure SetChangeMonth(AChangeMonth: Boolean);
    procedure SetChangeYear(AChangeYear: Boolean);
    procedure SetShowWeek(AShowWeek: Boolean);
    procedure SetShowButtonPanel(AShowButtonPanel: Boolean);
    procedure SetFormatSettings;
    procedure DoOnSelect;
    procedure SNSetValue(AValue:String);
    private
    function EncodeDateJQ(D: TDateTime): String;
    function DecodeDateJQ(S: String): TDateTime;
    published
    property Value: TDateTime read FValue write SetValue;
    property SValue: string read SNFValue write SNSetValue;
    property ChangeMonth: Boolean read FChangeMonth write SetChangeMonth default False;
    property ChangeYear: Boolean read FChangeYear write SetChangeYear default False;
    property ShowWeek: Boolean read FShowWeek write SetShowWeek default False;
    property ShowButtonPanel: Boolean read FShowButtonPanel write SetShowButtonPanel default False;
    property UseLocalNames: Boolean read FUseLocalNames write FUseLocalNames default False;
    property OnSelect: TNotifyEvent read FOnSelect write FOnSelect;
    protected
    procedure RaDrawExtend(var AJavascript: String); override;
    procedure RaUpgradeExtend(var AJavascript: String); override;
    procedure RaRouteExtend(AData: String); override;
    published
    property Anchors;
    property Visible;
    property OnEnter;
    property OnExit;
    end;

    procedure Register;

    implementation

    uses
    StrUtils, DateUtils;

    constructor TRxLEOmemo.Create(AOwner: TComponent);
    begin
    inherited;
    SetBounds(Left, Top, 121, 21);
    SetFormatSettings;
    // SetValue(EncodeDate(1900, 1, 1));
    SNSetValue(‘AA’);
    FChangeMonth := False;
    FChangeYear := False;
    FShowWeek := False;
    FShowButtonPanel := False;
    FUseLocalNames := False;
    end;

    procedure TRxLEOmemo.SetValue(AValue: TDateTime);
    begin
    FValue := AValue;
    FValueJQ := EncodeDateJQ(FValue);
    FValueModified := True;
    end;
    procedure TRxLEOmemo.SNSetValue(AValue:String);
    begin
    snFvalue := AValue;
    FValueJQ := snFvalue;//EncodeDateJQ(FValue);
    FValueModified := True;
    end;
    procedure TRxLEOmemo.SetChangeMonth(AChangeMonth: Boolean);
    begin
    FChangeMonth := AChangeMonth;
    FOthersModified := True;
    end;

    procedure TRxLEOmemo.SetChangeYear(AChangeYear: Boolean);
    begin
    FChangeYear := AChangeYear;
    FOthersModified := True;
    end;

    procedure TRxLEOmemo.SetShowWeek(AShowWeek: Boolean);
    begin
    FShowWeek := AShowWeek;
    FOthersModified := True;
    end;

    procedure TRxLEOmemo.SetShowButtonPanel(AShowButtonPanel: Boolean);
    begin
    FShowButtonPanel := AShowButtonPanel;
    FOthersModified := True;
    end;

    {$IFDEF VER220}
    {$DEFINE FORMATSETTINGS} // Delphi 15 – Delphi XE
    {$ENDIF}
    {$IFDEF VER230}
    {$DEFINE FORMATSETTINGS} // Delphi 16 – Delphi XE2
    {$ENDIF}
    {$IFDEF VER240}
    {$DEFINE FORMATSETTINGS} // Delphi 17 – Delphi XE3
    {$ENDIF}
    {$IFDEF VER250}
    {$DEFINE FORMATSETTINGS} // Delphi 18 – Delphi XE4
    {$ENDIF}

    procedure TRxLEOmemo.SetFormatSettings;

    function MayBeConvert(AString: String): String;
    begin
    {$IFDEF FPC}
    {$IFDEF MSWINDOWS}
    Result := AnsiToUtf8(AString);
    {$ELSE}
    Result := AString; // already in utf8. ADD CLOCALE UNIT!
    {$ENDIF}
    {$ELSE}
    Result := AString; // no need for explicit convert
    {$ENDIF}
    end;

    var
    i: Integer;
    begin
    // here settings are taken from SysUtils. you may introduce
    // a number of properties to setup each DatePicker individually
    FFormatSettings.DateSeparator := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}DateSeparator;
    FFormatSettings.ShortDateFormat := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}ShortDateFormat;
    for i := 1 to 12 do begin
    FFormatSettings.LongMonthNames[i] := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}LongMonthNames[i];
    FFormatSettings.ShortMonthNames[i] := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}ShortMonthNames[i];
    end;
    for i := 1 to 7 do begin
    FFormatSettings.LongDayNames[i] := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}LongDayNames[i];
    FFormatSettings.ShortDayNames[i] := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}ShortDayNames[i];
    end;
    // DateFormat for jQuery
    FFormatSettingsDateFormatJQ := FFormatSettings.ShortDateFormat;
    FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘dddd’, ‘DD’, [rfReplaceAll]);
    FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘ddd’, ‘D’, [rfReplaceAll]);
    FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘MM’, ‘mm’, [rfReplaceAll]);
    FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘M’, ‘m’, [rfReplaceAll]);
    FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘mmmm’, ‘MM’, [rfReplaceAll]);
    FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘mmm’, ‘M’, [rfReplaceAll]);
    FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘yy’, ‘y’, [rfReplaceAll]);
    // LongMonthNames for jQuery
    FFormatSettingsLongMonthNamesJQ := ‘[‘;
    for i := 1 to 12 do begin
    if i > 1 then begin
    FFormatSettingsLongMonthNamesJQ := FFormatSettingsLongMonthNamesJQ + ‘,’;
    end;
    FFormatSettingsLongMonthNamesJQ := FFormatSettingsLongMonthNamesJQ + ‘”‘ +
    MayBeConvert(FFormatSettings.LongMonthNames[i]) + ‘”‘;
    end;
    FFormatSettingsLongMonthNamesJQ := FFormatSettingsLongMonthNamesJQ + ‘]’;
    // ShortMonthNames for jQuery
    FFormatSettingsShortMonthNamesJQ := ‘[‘;
    for i := 1 to 12 do begin
    if i > 1 then begin
    FFormatSettingsShortMonthNamesJQ := FFormatSettingsShortMonthNamesJQ + ‘,’;
    end;
    FFormatSettingsShortMonthNamesJQ := FFormatSettingsShortMonthNamesJQ + ‘”‘ +
    MayBeConvert(FFormatSettings.ShortMonthNames[i]) + ‘”‘;
    end;
    FFormatSettingsShortMonthNamesJQ := FFormatSettingsShortMonthNamesJQ + ‘]’;
    // LongDayNames for jQuery
    FFormatSettingsLongDayNamesJQ := ‘[‘;
    for i := 1 to 7 do begin
    if i > 1 then begin
    FFormatSettingsLongDayNamesJQ := FFormatSettingsLongDayNamesJQ + ‘,’;
    end;
    FFormatSettingsLongDayNamesJQ := FFormatSettingsLongDayNamesJQ + ‘”‘ +
    MayBeConvert(FFormatSettings.LongDayNames[i]) + ‘”‘;
    end;
    FFormatSettingsLongDayNamesJQ := FFormatSettingsLongDayNamesJQ + ‘]’;
    // ShortDayNames for jQuery
    FFormatSettingsShortDayNamesJQ := ‘[‘;
    for i := 1 to 7 do begin
    if i > 1 then begin
    FFormatSettingsShortDayNamesJQ := FFormatSettingsShortDayNamesJQ + ‘,’;
    end;
    FFormatSettingsShortDayNamesJQ := FFormatSettingsShortDayNamesJQ + ‘”‘ +
    MayBeConvert(Copy(FFormatSettings.ShortDayNames[i], 1, 2)) + ‘”‘;
    end;
    FFormatSettingsShortDayNamesJQ := FFormatSettingsShortDayNamesJQ + ‘]’;
    //
    FOthersModified := True;
    end;

    procedure TRxLEOmemo.DoOnSelect;
    begin
    if Assigned(FOnSelect) then FOnSelect(Self);
    end;

    function TRxLEOmemo.EncodeDateJQ(D: TDateTime): String;
    begin
    if D = 0 then begin
    Result := ”;
    end else begin
    {$IFDEF FPC}
    Result := FormatDateTime(FFormatSettings.ShortDateFormat, D);
    {$ELSE}
    Result := DateToStr(D, FFormatSettings);
    {$ENDIF}
    end;
    end;

    function TRxLEOmemo.DecodeDateJQ(S: String): TDateTime;
    var
    FS: TFormatSettings;
    begin
    FS.ShortDateFormat := ‘dd.mm.yyyy’;
    FS.DateSeparator := ‘.’;
    {$IFDEF FPC}
    Result := StrToDate(S, FS.ShortDateFormat, FS.DateSeparator);
    {$ELSE}
    Result := StrToDate(S, FS);
    {$ENDIF}
    end;

    procedure TRxLEOmemo.RaDrawExtend(var AJavascript: String);
    begin
    FValueModified := False;
    FOthersModified := False;
    AJavascript :=

    ‘var me=this;’ +
    ‘me.VALUE=”‘ + FValueJQ + ‘”;’ +
    ‘me.DATEFORMAT=”‘ + FFormatSettingsDateFormatJQ + ‘”;’ +
    IfThen(FUseLocalNames,
    ‘me.MONTHNAMES=’ + FFormatSettingsLongMonthNamesJQ + ‘;’ +
    ‘me.MONTHNAMESSHORT=’ + FFormatSettingsShortMonthNamesJQ + ‘;’ +
    ‘me.DAYNAMES=’ + FFormatSettingsLongDayNamesJQ + ‘;’ +
    ‘me.DAYNAMESSHORT=’ + FFormatSettingsShortDayNamesJQ + ‘;’ +
    ‘me.DAYNAMESMIN=’ + FFormatSettingsShortDayNamesJQ + ‘;’, ”) +
    ‘me.CHANGEMONTH=’ + IfThen(FChangeMonth, ‘1’, ‘0’) + ‘;’ +
    ‘me.CHANGEYEAR=’ + IfThen(FChangeYear, ‘1’, ‘0’) + ‘;’ +
    ‘me.SHOWWEEK=’ + IfThen(FShowWeek, ‘1’, ‘0’) + ‘;’ +
    ‘me.SHOWBUTTONPANEL=’ + IfThen(FShowButtonPanel, ‘1’, ‘0’) + ‘;’ +

    ‘me.onRender=function(){‘ +
    // load jQuery library or ensure it is already loaded
    ‘me.r=me.require([“js”,”/jquery-1.10.1/jquery-1.10.1.min.js”],function(){‘ +
    ‘me.r=me.require([“js”,”/jquery-ui-1.10.3/ui/minified/jquery-ui.min.js”,’ +
    ‘”css”,”/jquery-ui-1.10.3/themes/base/minified/jquery-ui.min.css”],function(){‘ +

    ‘me.r=undefined;’ +

    ‘if(typeof jQuery===”undefined”){‘ +
    ‘me.getDOM().innerHTML=”jQuery library was not loaded”;’ +
    ‘return;’ +
    ‘};’ +
    ‘if(typeof jQuery.datepicker===”undefined”){‘ +
    ‘me.getDOM().innerHTML=”jQuery UI was not loaded”;’ +
    ‘return;’ +
    ‘};’ +

    ‘me.e=document.createElement(“TEXTAREA”);’ +
    // +’me.e.onEvent.add(function(){‘ +
    // ‘me.CONTENT=me.e.getContent();’ +
    // postponed send content to server (to RaRouteExtend)

    ‘ me.e.addEventListener(“input”, function(){ var person = “John Doe”; person=me.e.value; me.route(escape(person),true); }); ‘
    // alert(person)

    // ‘me.route(escape(“me.e.VALUE”));’ +
    // ‘});’ +
    + ‘me.e.setAttribute(“type”,”text”);’ +
    ‘me.e.setAttribute(“resize”,”none”);’ +

    ‘me.e.value=me.VALUE;’ +

    ‘me.e.style.cssText=”resize: none;’ +
    ‘-webkit-box-sizing:border-box;’ +
    ‘-moz-box-sizing:border-box;’ +
    ‘-o-box-sizing:border-box;’ +
    ‘box-sizing:border-box;’ +
    ‘font-family:MS Sans Serif,Tahoma,Verdana,Arial;’ +
    ‘font-size:’ + IfThen(Font.Size = 0, ‘8’, IntToStr(Font.Size)) + ‘pt;’ +
    ‘outline:none;’ +
    ‘width:100%;’ +
    ‘height:100%;’ +
    ‘”;’ +

    //
    //

    ‘me.getDOM().appendChild(me.e);’ +

    ‘$(me.e).on(“focus”,function(){‘ +
    ‘me.acquireFocus();’ +
    ‘});’ +

    ‘$(me.e).datepicker({‘ +
    ‘dateFormat:me.DATEFORMAT,’ +
    ‘monthNames:me.MONTHNAMES,’ +
    ‘monthNamesShort:me.MONTHNAMESSHORT,’ +
    ‘dayNames:me.DAYNAMES,’ +
    ‘dayNamesShort:me.DAYNAMESSHORT,’ +
    ‘dayNamesMin:me.DAYNAMESMIN,’ +
    ‘changeMonth:me.CHANGEMONTH,’ +
    ‘changeYear:me.CHANGEYEAR,’ +
    ‘showWeek:me.SHOWWEEK,’ +
    ‘showButtonPanel:me.SHOWBUTTONPANEL,’ +
    ‘onSelect:function(s,d){‘ +
    ‘me.VALUE=s;’ +
    ‘me.route(‘ +
    ‘[d.selectedDay.toString(),’ +
    ‘(d.selectedMonth+1).toString(),’ +
    ‘d.selectedYear.toString()].join(“.”)’ +
    ‘);’ +
    ‘}’ +
    ‘});’ +

    ‘if($.datepicker&&$.datepicker.dpDiv&&$.datepicker.dpDiv[0]){‘ +
    ‘$.datepicker.dpDiv[0].style.fontSize=”‘ + IfThen(Font.Size = 0, ‘8’, IntToStr(Font.Size)) + ‘pt”‘ +
    ‘};’ +

    ‘});’ +
    ‘});’ +
    ‘};’ +

    ‘me.onFadePopup=function(){‘ +
    ‘if(typeof jQuery!==”undefined”){‘ +
    ‘if($.datepicker&&$.datepicker._hideDatepicker){‘ +
    ‘$.datepicker._hideDatepicker();’ +
    ‘};’ +
    ‘if(me.e){‘ +
    ‘$(me.e).blur();’ +
    ‘};’ +
    ‘};’ +
    ‘};’ +

    ‘me.onUnrender=function(){‘ +
    ‘if(typeof jQuery!==”undefined”){‘ +
    ‘if($.datepicker&&$.datepicker._hideDatepicker){‘ +
    ‘$.datepicker._hideDatepicker();’ +
    ‘};’ +
    ‘};’ +
    ‘if(me.r){‘ +
    ‘me.dontRequire(me.r);’ +
    ‘me.r=undefined;’ +
    ‘};’ +
    ‘if(me.d){‘ +
    ‘clearTimeout(me.d);’ +
    ‘me.d=undefined;’ +
    ‘};’ +
    ‘if(me.e){‘ +
    // ‘me.e.destroy();’ + // TODO how to dispose correcly? or no dispose?
    ‘me.e=undefined;’ +
    ‘};’ +
    ‘};’;

    end;

    procedure TRxLEOmemo.RaUpgradeExtend(var AJavascript: String);
    begin

    if FValueModified then begin
    FValueModified := False;
    AJavascript := AJavascript +
    ‘var me=this;’ +
    ‘me.VALUE=”‘ + FValueJQ + ‘”;’ +
    ‘if(me.e){‘ +
    ‘me.e.value=me.VALUE;’ +
    ‘};’;
    end;

    if FOthersModified then begin
    FOthersModified := False;
    AJavascript := AJavascript +
    ‘var me=this;’ +
    ‘me.CHANGEMONTH=’ + IfThen(FChangeMonth, ‘1’, ‘0’) + ‘;’ +
    ‘me.CHANGEYEAR=’ + IfThen(FChangeYear, ‘1’, ‘0’) + ‘;’ +
    ‘me.SHOWWEEK=’ + IfThen(FShowWeek, ‘1’, ‘0’) + ‘;’ +
    ‘me.SHOWBUTTONPANEL=’ + IfThen(FShowButtonPanel, ‘1’, ‘0’) + ‘;’ ;
    end;

    end;

    procedure TRxLEOmemo.RaRouteExtend(AData: String);
    VAR SE:Tstringlist; i:integer;
    begin
    // showmessage(adata);
    // FValue := AData;//DecodeDateJQ(AData);
    FValueJQ :=adata;// EncodeDateJQ(FValue);

    se:=tstringlist.Create;
    se.Text:= adata;
    // showmessage(inttostr(se.Count));
    for i := 0 to se.Count – 1 do
    begin

    if i< se.Count – 1 then se[i]:=se[i]+'<br />’;

    end;
    snfvalue:=se.Text;

    freeandnil(se);
    //DoOnSelect;
    end;

    procedure Register;
    begin
    RegisterComponents(‘Rx LEOX’, [TRxLEOmemo]);
    end;

    end.

    #852733

    kqdelphi
    Participant

    thank your share,can you help me solve problem

    I use 94-RxJqCalculator in the computer and Android phones are normal, but in the Apple phone can not get the focus, but the native RaEdit in all the platform can get the focus. How to modify can achieve the same effect as RaEdit

    #852734

    leo_kacharkov
    Participant

    ohh sorry, I can not help you for now because I barely understand Javascript

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.