# Js Widget

## Prerequisites

To use our widget you will need to have the API Key, if you don't have one please request to our team at <https://turnbackhoax.id/tentang-kami/kontak-kami/>

## Installation and Setup

Put these line of code inside your header tag

{% code title="header.html" %}

```javascript
<link rel="stylesheet" href="http://cekfakta.com/public/widget/yd-widget-1.1.0.css" />
<script src="http://cekfakta.com/public/widget/yd-widget-1.1.0.jquery.min.js"></script>
<script>
    (function($) {
        $(document).ready( function() {
    
            $('.js-widget').yudistira({
                key  : [YOUR API KEY]
                // more options here
            });
        });
    }(jQuery));
</script>

```

{% endcode %}

{% hint style="danger" %}
The widget is based on jQuery javascript library, so you will need to include **jQuery** as well.
{% endhint %}

## Options Parameter

### Type

#### Value

| Value  | type   | Description           |
| ------ | ------ | --------------------- |
| list   | string | Show list of news     |
| single | string | Show only single news |

#### Example

{% hint style="info" %}
Please check all files on the sample code below
{% endhint %}

{% tabs %}
{% tab title="List.js" %}

```javascript
$('.js-widget').yudistira({
    ... ,
    type : 'list' // you can use value 'list' or 'single'
    ...
});
```

{% endtab %}

{% tab title="Single.js" %}

```javascript
$('.js-widget').yudistira({
    ... ,
    type : 'single' // you can use value 'list' or 'single'
    ...
});
```

{% endtab %}
{% endtabs %}

### Method

#### Value

| Value    | Type   | Description                      |
| -------- | ------ | -------------------------------- |
| latest   | string | Get latest news                  |
| random   | string | Get random news                  |
| property | string | Get news with specified property |

#### Example

{% hint style="info" %}
Please check all files on the sample code below
{% endhint %}

{% tabs %}
{% tab title="Latest.js" %}

```javascript
$('.js-widget').yudistira({
    ... ,
    method : 'latest',
    value: '[DATA_COUNT_NUMBER]' // news count which will be shown
    ...
});
```

{% endtab %}

{% tab title="Random.js" %}

```javascript
$('.js-widget').yudistira({
    ... ,
    method : 'random',
    value: '[DATA_COUNT_NUMBER]' // news count which will be shown
    ...
});
```

{% endtab %}

{% tab title="Property.js" %}

```javascript
// Format

$('.js-widget').yudistira({
    ... ,
    method : 'property',
    prop: '[PROPERTY_TYPE]', // see list of 'prop' param
    value: '[PROPERTY_VALUE]' // reflecting to the 'prop' value 
    ...
});

// Use Case: Get news which tags is presiden

$('.js-widget').yudistira({
    ... ,
    method : 'property',
    prop: 'tags', // property is tags
    value: 'presiden' // property value is presiden 
    ...
});
```

{% endtab %}
{% endtabs %}

#### Prop Parameter

When you use method 'property' at your plugin there will be selection of 'prop' value.

| Property Type Value | Description                                                   |
| ------------------- | ------------------------------------------------------------- |
| id                  | Show news which id is as defined in the value                 |
| kesimpulan          | Show news which conclusion contains defined text in the value |
| sumber              | Show news which source is same with defined text in the value |
| isi                 | Show news which content contains defined text in the value    |
| tags                | Show news which tagged with defined text in the value         |

#### Value Parameter

This parameter function differently on the three method stated above

| Method name | Value parameter usage                                      |
| ----------- | ---------------------------------------------------------- |
| Latest      | Number of news to show/displayed in the widget             |
| Random      | Number of news to show/displayed in the widget             |
| Property    | Value of property params, see example for clearer use case |