# Upgrading from v0.4

A few breaking changes have been made between version 0.4.x and version 1.0.x\
Upgrading should take less than 30 minutes.

### Imports 

Replace :

```markup
<!-- replace: -->
<script src="dist/js/jquery.chocolat.js"></script>
<!-- with: -->
<script src="dist/js/chocolat.js"></script>
```

### Instanciation

Version 1 is no longer relaying on jQuery.

```javascript
// replace:
$('#parent').Chocolat({})

// with:
Chocolat(document.querySelectorAll('#parent .chocolat-image'), {})
```

Also the `imageSelector` option has been removed.

```javascript
// replace:
$('#parent').Chocolat({
    imageSelector: '.my-image',
    // options...
})

// with:
Chocolat(document.querySelectorAll('#parent .my-image'), {
    // options...
})
```

### Options

#### images

You should no longer pass `images` array as an option, you are now supposed to pass it as the first argument of Chocolat.\
You can learn more on how to instanciate Chocolat [here](https://chocolat.gitbook.io/chocolat/master/usage).

```javascript
// replace:
$('whatever').Chocolat({
    images: [ 
        { src: 'img1.jpg' }, ...
    ],
    // options...
})

// with:
Chocolat([ { src: 'img1.jpg' }, ... ], {
    // options...
})
```

#### container

`container` must be an `HTMLElement` .

Selectors are no longer valid.

```javascript
// replace:
{
    container: '.my-container-selector',
    // options ...
}

// with 
{
    container: document.querySelector('.my-container-selector'),
    // options ...
}
```

jQuery objects are no longer valid.

```javascript
// replace:
{
    container: $('.my-container-selector'),
    // options ...
}

// with 
{
    container: document.querySelector('.my-container-selector'),
    // or
    // container: $('.my-container-selector')[0],
    
    // options ...
}
```

#### setTitle

`setTitle` is now a function returning a string.

```javascript
// replace:
{
    setTitle: 'Title',
    // options ...
}

// with 
{
    setTitle: function () { return 'title' },
    // options ...
}
```

You can no longer use `data-chocolat-title` on your html element to set the title.

```markup
<!-- replace: -->
<div id="parent" data-chocolat-title="Set title">
    <!-- ... -->
</div>
```

```javascript
// with 
{
    setTitle: function () { 
        return 'Set title' 
        // or 
        // return document.querySelector('#parent').dataset.chocolatTitle
    }
    // options ...
}
```

#### separator2

&#x20;`separator2` has been replaced with the `pagination` function.

```javascript
// replace:
{
    separator2: '-',
    // options ...
}

// with 
{
    pagination: function () { 
        const last = this.settings.lastImageIndex + 1
        const position = this.settings.currentImageIndex + 1

        return `${position}-${last}`
    },
    // options ...
}
```

#### firstImage

`firstImage` has been renamed to `firstImageIndex` .

```javascript
// replace:
{
    firstImage: 0,
    // options ...
}

// with 
{
    firstImageIndex: 0,
    // options ...
}
```

#### lastImage

`lastImage` has been renamed to `lastImageIndex` .

```javascript
// replace:
{
    lastImage: 5,
    // options ...
}

// with 
{
    lastImageIndex: 5,
    // options ...
}
```

#### currentImage

`currentImage` has been renamed to `currentImageIndex` .

```javascript
// replace:
{
    currentImage: 5,
    // options ...
}

// with 
{
    currentImageIndex: 5,
    // options ...
}
```

#### imageSize

`imageSize` default value `'default'` as been renamed to `'scale-down'`

```javascript
// replace:
{
    imageSize: 'default',
    // options ...
}

// with 
{
    imageSize: 'scale-down',
    // options ...
}
```

#### enableZoom

`enableZoom` has been renamed to `allowZoom` .

```javascript
// replace:
{
    enableZoom: true,
    // options ...
}

// with 
{
    allowZoom: true,
    // options ...
}
```

### Api

API can now be accessed without calling the `api()` function.\
You can learn more on how to use the API [here](https://chocolat.gitbook.io/chocolat/master/api)

```javascript
// replace:
const instance = $(...).Chocolat().data('chocolat')
instance.api().open() // open() is taken as an example here.

// with:
const instance = Chocolat(...)
instance.api.open() // open() is taken as an example here.
```

#### place

`place` has been renamed to `position` .

```javascript
// replace: 
instance.api().place()

// with: 
instance.api.position()
```