yauction-category-picker

<yauction-category-picker /> is a category picker for TW Yahoo! Auction. Users could go through the whole category tree to pick a suitable category for their merchandise. <yauction-category-picker /> will show up with categoryId which developers set. That means user can start from category 「root」 or 「leaf」.

Vision

• <yauction-category-picker /> rised.

• <yauction-category-picker /> rised (search mode).

Basic Usage

<yauction-category-picker /> is a web component. All we need to do is put the required script into your HTML document. Then follow <yauction-category-picker />'s html structure and everything will be all set.

Required Script

<script
  type="module"
  src="https://your-domain/wc-yauction-category-picker.js">        
</script>

Structure

Put <yauction-category-picker /> into HTML document. It will have different functions and looks with attribute mutation.

<yauction-category-picker>
  <script type="application/json">
    {
      "l10n": {
        "title": "Category Picker",
        "confirm": "CONFIRM",
        "emptyLabel": "Select",
        "placeholder": "Search category"
      },
      "params": {
        "id": "mei",
        ...
      },
      "webservice": {
        "path": "https://your-domain/getCategoryPath",
        "children": "https://your-domain/getCategoryChildren",
        "nodes": "https://your-domain/getCategoryNodes",
        "tree": "https://your-domain/getCategoryTree"
      } 
    }
  </script>
</yauction-category-picker>

Otherwise, developers could also choose remoteconfig to fetch config for <yauction-category-picker />.

<yauction-category-picker remoteconfig="https://your-domain/api-path"

JavaScript Instantiation

<yauction-category-picker /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { YauctionCategoryPicker } from 'https://your-domain/wc-yauction-category-picker.js';

// use DOM api
const nodeA = document.createElement('yauction-category-picker');
document.body.appendChild(nodeA);
nodeA.params = {
  id: 'mei',
  sex: 'M'
};
nodeA.show();

// new instance with Class
const nodeB = new YauctionCategoryPicker();
document.body.appendChild(nodeB);
nodeB.params = {
  id: 'mei',
  sex: 'M'
};
nodeB.show('23288');

// new instance with Class & default config
const config = {
  l10n: {
    title: 'Category Picker',
    confirm: 'CONFIRM',
    emptyLabel: 'Select'
  },
  params: {
    id: 'mei',
    sex: 'M'
  },
  webservice: {
    path: 'https://your-domain/getCategoryPath',
    children: 'https://your-domain/getCategoryChildren',
    nodes: 'https://your-domain/getCategoryNodes',
    tree: 'https://your-domain/getCategoryTree'
  } 
};
const nodeC = new YauctionCategoryPicker(config);
document.body.appendChild(nodeC);
</script>

Style Customization

Developers could apply styles to decorate <yauction-category-picker />'s looking.

<style>
yauction-category-picker {
  /* common */
  --yauction-category-picker-label-color: rgba(35 42 49);
  --yauction-category-picker-theme-color: rgba(15 105 255);
  --yauction-category-picker-section-line-color: rgba(224 228 233);

  /* listing */
  --yauction-category-picker-listing-color: rgba(35 42 49);
  --yauction-category-picker-listing-bgc: rgba(246 248 250);
  --yauction-category-picker-arrow-color: rgba(151 158 168);
  --yauction-category-picker-line-color: rgba(198 198 200);
  --yauction-category-picker-max-listing-count: 10;
  --yauction-category-picker-no-result-color: rgba(35 42 49);

  /* action button */
  --yauction-category-picker-confirm-text-color: rgba(255 255 255);
  --yauction-category-picker-confirm-bgc: rgba(58 191 186);

  /* loading sign */
  --yauction-category-picker-loading-color: rgba(255 255 255);
  --yauction-category-picker-loading-bgc: rgba(0 0 0/.25);
}
</style>

Attributes

<yauction-category-picker /> supports some attributes to let it become more convenience & useful.

• params

Set parameters for <yauction-category-picker />. It should be JSON string. Each fetching will attached these parameters to api. Default is {} (not set).

<yauction-category-picker
  params='{"id":"mei","sex":"M"}'
>
  ...
</yauction-category-picker>

• l10n

Set localization for <yauction-category-picker />. It will replace some message & button text to anything you like. It should be JSON string. Developers could set title、confirm、emptyLabel and placeholder.

• title：category title text. Default is Category Picker.
• confirm：button「confirm」text. Default is CONFIRM.
• emptyLabel：empty label text. Default is Select.
• placeholder：search field placeholder content. Default is Search category.

<yauction-category-picker
  l10n='{"title":"Category Picker","confirm":"CONFIRM","emptyLabel":"Select","placeholder":"Search category"}'
>
  ...
</yauction-category-picker>

• webservice

Set web service information for <yauction-category-picker />. It should be JSON string. Developers could set path、nodes、children and tree api address here..

PS. Developers could apply {{categoryId}} as replace key for category id in api address. Such as "https://your-domain/getCategoryChildren/{{categoryId}}".

• path：api address for category path information fetching (leaf to root).
• children：api address for category children fetching.
• nodes：api address for category nodes information fetching.
• tree：api address for category tree information fetching.

<yauction-category-picker
  webservice='{"path":"https://your-domain/getCategoryPath","children":"https://your-domain/getCategoryChildren","nodes":"https://your-domain/getCategoryNodes","tree":"https://your-domain/getCategoryTree"}'
>
  ...
</yauction-category-picker>

Properties

| Property Name | Type | Description | | ----------- | ----------- | ----------- | | params | Object | Getter / Setter for params. Each fetching will attached these parameters to api. Default is {}. | | l10n | Object | Getter / Setter for l10n. It will replace some UI text to anything you like. Developers could set title、confirm、emptyLabel and placeholder. | | webservice | Object | Getter / Setter for webservice. Developers could set path、children、nodes and tree api address here. | | open | Boolean | Getter for <yauction-category-picker />'s open status. | | pickedInfo | Object | Getter for current <yauction-category-picker />'s category information. Developers could get { picked, path }. |

Method

| Method Signature | Description | | ----------- | ----------- | | show(categoryId) | Fetch & popup <yauction-category-picker />. Developers could call this method with argument > categero id to popup . Such as：element.show('23288'). Default is 0 (not set). | | dismiss | Dismiss <yauction-category-picker />.

Event

| Event Signature | Description | | ----------- | ----------- | | yauction-category-picker-pick | Fired when user finish picked category. Developers could gather picked data > { picked,path } through event.detail. | | yauction-category-picker-cancel | Fired when <yauction-category-picker /> canceled.（user closed <yauction-category-picker />） | | yauction-category-picker-error | Fired when <yauction-category-picker /> fetching error. Develpoers could gather information through event.detail.（<yauction-category-picker /> will put server response to event.detail.cause） |

Reference

• <yauction-category-picker /> DEMO
• WEBCOMPONENTS.ORG
• YouTube
• TW Yahoo! Auction