Collect values and send them to backend.

This rule apply to mutiple attributes, include ph-params, ph-headers etc.

Type path and query for test:

Selected ids fixtures(fruit):

101 102 103

::: extract special value or by css selector

it("should extract by selector", () => {
  // create an html element with tag and attributes
  tutil.setpathname("/hello");
  SelectedIdsStore.getInstance().saveNewSelectedIds("user", ["1", "2"]);
  const input = document.createElement("input");
  input.value = "55";
  input.name = "age";

  const div = document.createElement("div");
  div.id = "myid";
  div.textContent = "hello innerhtml";
  div.setAttribute("ph-id", "my-ph-id");
  div.setAttribute(
    "ph-params",
    "selectedIds:::__selected_ids__/user,id:::this/id,dataid:::this/attribute/ph-id,html:::this/innerHTML,age:::input[name=age]/value"
  );
  document.body.appendChild(div);
  document.body.appendChild(input);

  const kvs = htmlUtil.getParams(div);

  expect(kvs).toStrictEqual({
    id: "myid",
    dataid: "my-ph-id",
    html: "hello innerhtml",
    age: "55",
    selectedIds: "1,2",
  });
});

Special cases:

__selected_ids__/user will get current selected ids. see: ph-row-selector

this/attribute/href will get the attribute value.

__ref_attr__/ph-abc it will get the attribute on the same element, Usually it’s because the value is too large or too complex to mixed up with other parameters.

__alias__/id create an alias for parameter, usually for the parameter which will change before submit.

__function__/fn_on_window get the value by execute a function on window object.

<a
  href="http://localhost:8787/upload/"
  ph-ajax
  ph-json
  ph-method="post"
  ph-params-in-url="action::mpu-complete,uploadId::6fEP9oVB1AMIbT2Q9cdRLS2-WTe0-vsd7Ew1uMULrh1VVwR1BDxedoHKtxH-ijFtUknWUH9z1h01IE7gw1IqiVMzQ4JtDbRfn0f-b_fuVHTmLbQ_XySDLYv5U5P01Bw1i-v03StYlUOvUtqlJX8ZJSMpOXAcH-WObrh8WWV6Uas"
  ph-params="parts:::&ph-param-parts"
  ph-params-type-map="parts:json"
  ph-param-parts='[{"partNumber":1,"etag":"71BxsQTUX2hbt3FfOd5Nd7ga8t3dbh22zQ0_N2v63R1d1cgUC4cFja2MWBpV79AE_HqxIhn4ThnY69shI4RMtufkZpLPtE7hSxxqkylgcil6_f5zhGDqqmnlriemygKD2mRmPhsOvJd-AOHvQJGpPVHiVrQILwgdSkTJM1Ux11Q"}]'
>
  Complete</a
>

:: add constant value

<a
  href="../pjax-link-1.html"
  ph-pjax-link
  ph-params="a::1,b::2,c::hello"
  id="to-pjax-link-1"
>
  To pjax-link-1</a
>

: extract values from url

it("should parse from query", () => {
  tutil.setpathname("/hello/55/x");
  tutil.setquery("id=123&dataid=456&html=hello%20world");
  let div = document.createElement("div");
  // zero based path parts
  div.setAttribute("ph-params", "id:/1/,html,dataid1:dataid");
  document.body.appendChild(div);
  let kvs = htmlUtil.getParams(div);
  expect(kvs).toEqual({ id: "55", html: "hello world", dataid1: "456" });

  div = document.createElement("div");
  // there's no 10th part.
  div.setAttribute("ph-params", "id:/10/");
  document.body.appendChild(div);
  kvs = htmlUtil.getParams(div);
  expect(kvs).toStrictEqual({});

  div = document.createElement("div");
  div.setAttribute("ph-params", "id:/-1/");
  document.body.appendChild(div);
  kvs = htmlUtil.getParams(div);
  expect(kvs).toStrictEqual({});

  div = document.createElement("div");
  div.setAttribute("ph-params", "id:/abc/");
  document.body.appendChild(div);
  kvs = htmlUtil.getParams(div);
  expect(kvs).toStrictEqual({});

  div = document.createElement("div");
  div.setAttribute("ph-params", "id://");
  document.body.appendChild(div);
  kvs = htmlUtil.getParams(div);
  expect(kvs).toStrictEqual({});
});

Special cases:

id:idInUrl will get the idInUrl and as id to new url parameter.

id:/0/ will get the first part of the pathname.

get all query

it("should extract by selector, keep current query.", () => {
  // create an html element with tag and attributes
  tutil.setquery("id=123&dataid=456&html=hello%20world");
  let div = document.createElement("div");
  div.setAttribute("ph-params", "*:*");
  document.body.appendChild(div);
  let kvs = htmlUtil.getParams(div);

  expect(kvs).toStrictEqual({ id: "123", dataid: "456", html: "hello world" });

  div = document.createElement("div");
  div.setAttribute("ph-params", "*:*,id::321");
  document.body.appendChild(div);
  kvs = htmlUtil.getParams(div);

  expect(kvs).toStrictEqual({ id: "321", dataid: "456", html: "hello world" });

  div = document.createElement("div");
  div.setAttribute("ph-params", "all:*json");
  document.body.appendChild(div);
  kvs = htmlUtil.getParams(div);

  expect(kvs).toStrictEqual({
    all: JSON.stringify({ id: "123", dataid: "456", html: "hello world" }),
  });

  div = document.createElement("div");
  div.setAttribute("ph-params", "all:*");
  document.body.appendChild(div);
  kvs = htmlUtil.getParams(div);

  expect(kvs).toStrictEqual({ all: "id=123&dataid=456&html=hello+world" });
});

Special cases:

*:*,page::3 will include all the current query string in the url, the page will override if exists.

all:*json will add queries to all as a json string.

all:* will add query string to all.