pas2js/demo/promise/utils.pp

unit utils;

{$mode objfpc}{$H+}

interface

uses
  sysutils, JS, web;

var
  fakeSlowNetwork : boolean;

function wait(ms : NativeInt) : TJSPromise;
function get(url : string) : TJSPromise;
function getJson(url : string) : TJSPromise;
procedure addHtmlToPage(Content : string);
Procedure addTextToPage(content : string) ;
Procedure InitSlowNetwork;

implementation

function wait(ms : NativeInt) : TJSPromise;

  procedure doTimeout(resolve,reject : TJSPromiseResolver) ;

  begin
    window.setTimeout(TJSTimerCallBack(resolve),ms);
  end;

begin
  Result := TJSPromise.New(@doTimeOut);
end;

Procedure InitSlowNetwork;

Const
  lsKey = 'fake-slow-network';

Var
  networkFakeDiv : TJSHTMLElement;
  checkbox : TJSHTMLInputElement;

  procedure doChange;

  begin
    window.localStorage.setItem(lsKey,IntToStr(Ord(checkbox.checked)));
    window.location.reload(false);
  end;


begin
  networkFakeDiv:=TJSHTMLElement(document.querySelector('.network-fake'));
  checkbox:=TJSHTMLInputElement(networkFakeDiv.querySelector('input'));
  fakeSlowNetwork:=window.localStorage.getItem(lsKey)='1';
  networkFakeDiv.style.setProperty('display','block');
  checkbox.checked:=fakeSlowNetwork;
  checkbox.addEventListener('change',@doChange)
end;

function get(url : string) : TJSPromise;

// Return a new promise.

  // We do all the work within the constructor callback.
  procedure DoRequest(resolve,reject : TJSPromiseResolver) ;

  var
    req : TJSXMLHttpRequest;

    function DoOnLoad(event : TEventListenerEvent) : boolean;

    begin
      // On error we reject, otherwise we resolve
      if (req.status=200) then
        resolve(req.responseText)
      else
        reject(TJSError.New(req.statusText));
    end;

    function DoOnError(event : TEventListenerEvent) : boolean;

    begin
      // On error we reject
      reject(TJSError.New('Network Error'));
    end;

  begin
    req:=TJSXMLHttpRequest.new;
    req.open('get', url);
    req.addEventListener('load',@DoOnLoad);
    req.addEventListener('error',@DoOnError);
    req.send();
  end;

  function ReturnResult(res: JSValue) : JSValue;

  begin
    // Result is an array of resolve values of the 2 promises, so we need the second one.
    Result:=TJSArray(res)[1];
  end;

var
  fakeNetworkWait,
  requestPromise : TJSPromise;

begin
  fakeNetworkWait := Wait(trunc(3000 * random * Ord(fakeSlowNetwork)));
  requestPromise:=TJSPromise.New(@DoRequest);
  Result:=TJSPromise.all([fakeNetworkWait, requestPromise])._then(@ReturnResult);
end;

function getJson(url : string) : TJSPromise;

  Function DoConvert(aValue : JSValue) : JSValue;

  begin
    Result:=TJSJSON.parse(String(aValue));
  end;

begin
  Result:=get(url)._then(@DoConvert);
end;

procedure addHtmlToPage(Content : string);

var
  aDiv, storyDiv : TJSElement;

begin
  aDiv:=document.createElement('div');
  StoryDiv:=document.querySelector('.story');
  aDiv.innerHTML:=content;
  storyDiv.appendChild(aDiv);
end;


Procedure addTextToPage(content : string) ;

var
  aDiv, storyDiv : TJSElement;

begin
  aDiv:=document.createElement('p');
  StoryDiv:=document.querySelector('.story');
  aDiv.textContent:=content;
  storyDiv.appendChild(aDiv);
end;

end.