# From 0.5 to 0.6

## Important changes

- jQuery has been removed
- Icons are now svg based

## Removing jQuery

You can read more about removing jQuery from your project here: [http://youmightnotneedjquery.com/]()

### Loading SirTrevor.Editor

```
var editor = new SirTrevor.Editor({
  el: $('.sir-trevor')
});
```

#### Will need to change to:

```
var editor = new SirTrevor.Editor({
  el: $('.sir-trevor')[0]
});
```

#### or replace with native functionality:

```
var editor = new SirTrevor.Editor({
  el: document.querySelector('.sir-trevor')
});
```

### Referencing elements

Elements are now native HTMLNode elements rather than jQuery elements.

To deal with this change you'll need to modify your element refernces to not include a starting $ and wrap any elements retrieved in $(element) if you still wish to use jQuery.

### Elements that have changed name

```
# Editor
$outer => outer
$wrapper => wrapper

# Blocks
$editor => editor
$inner => inner
$inputs => inputs
```

### Finding inner elements

If you were using the in-built find syntax on a SirTrevor element you'll need to modify your behaviour.

```
# Before
this.$('.selector') => Array of jQuery elements

# Now
this.$('.selector') => NodeList
this.$('.selector')[0] => Element
```

Also as this returns a NodeList you'll need to update your calls to work on individual elements.

```
# Before
this.$('.selector').hide();

# Now
Array.prototype.forEach.call(this.$('.selector'), function(element) {
  $(element).hide();
}
```

### Event delegation

In your blocks you might be relying on jQuery on/bind/delegate functions. If this is the case you can look at our examples to replicate this functionality in your own code.

```
# src/packages/events.js
element.on(selector, event) => Events.delegate(element, selector, event)
```

### Blocks that include the fetchable mixin

We now use the built in Fetch browser Api for ajax requests.
[https://developer.mozilla.org/en/docs/Web/API/Fetch_API]()
We've also included a polyfill for older browsers: [https://github.com/github/fetch]()

When working with a different domain you'll need to bypass cors protection using the following option.

```
this.fetch(url, {jsonp: true})
```

If not using jsonp then the options get passed directly to the fetch function. A list of the available options can be found here [https://developer.mozilla.org/en-US/docs/Web/API/Request]()

## Icons are now svg based

Sir Trevor now requires an external svg file for icons rather than the embedded iconfont.
You'll want to edit your sir-trevor initialiser to specify the location of this file.

```
SirTrevor.setDefaults({
 iconUrl: 'sir-trevor-icons.svg'
});

var editor = new SirTrevor.Editor({
  el: document.querySelector('.sir-trevor')
});
```

For more information see here [https://css-tricks.com/svg-sprites-use-better-icon-fonts]()
